File size: 3,220 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<script>import cc from 'classcat';
import Panel from '../../container/Panel/Panel.svelte';
import { useStore } from '../../store';
import ControlButton from './ControlButton.svelte';
import PlusIcon from './Icons/Plus.svelte';
import MinusIcon from './Icons/Minus.svelte';
import FitViewIcon from './Icons/Fit.svelte';
import LockIcon from './Icons/Lock.svelte';
import UnlockIcon from './Icons/Unlock.svelte';
export let position = 'bottom-left';
export let showZoom = true;
export let showFitView = true;
export let showLock = true;
export let buttonBgColor = undefined;
export let buttonBgColorHover = undefined;
export let buttonColor = undefined;
export let buttonColorHover = undefined;
export let buttonBorderColor = undefined;
export let ariaLabel = undefined;
export let style = undefined;
export let orientation = 'vertical';
export let fitViewOptions = undefined;
let className = '';
export { className as class };
const { zoomIn, zoomOut, fitView, viewport, minZoom, maxZoom, nodesDraggable, nodesConnectable, elementsSelectable } = useStore();
const buttonProps = {
bgColor: buttonBgColor,
bgColorHover: buttonBgColorHover,
color: buttonColor,
colorHover: buttonColorHover,
borderColor: buttonBorderColor
};
$: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
$: minZoomReached = $viewport.zoom <= $minZoom;
$: maxZoomReached = $viewport.zoom >= $maxZoom;
const onZoomInHandler = () => {
zoomIn();
};
const onZoomOutHandler = () => {
zoomOut();
};
const onFitViewHandler = () => {
fitView(fitViewOptions);
};
const onToggleInteractivity = () => {
isInteractive = !isInteractive;
nodesDraggable.set(isInteractive);
nodesConnectable.set(isInteractive);
elementsSelectable.set(isInteractive);
};
$: orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
</script>
<Panel
class={cc(['svelte-flow__controls', orientationClass, className])}
{position}
data-testid="svelte-flow__controls"
aria-label={ariaLabel ?? 'Svelte Flow controls'}
{style}
>
<slot name="before" />
{#if showZoom}
<ControlButton
on:click={onZoomInHandler}
class="svelte-flow__controls-zoomin"
title="zoom in"
aria-label="zoom in"
disabled={maxZoomReached}
{...buttonProps}
>
<PlusIcon />
</ControlButton>
<ControlButton
on:click={onZoomOutHandler}
class="svelte-flow__controls-zoomout"
title="zoom out"
aria-label="zoom out"
disabled={minZoomReached}
{...buttonProps}
>
<MinusIcon />
</ControlButton>
{/if}
{#if showFitView}
<ControlButton
class="svelte-flow__controls-fitview"
on:click={onFitViewHandler}
title="fit view"
aria-label="fit view"
{...buttonProps}
>
<FitViewIcon />
</ControlButton>
{/if}
{#if showLock}
<ControlButton
class="svelte-flow__controls-interactive"
on:click={onToggleInteractivity}
title="toggle interactivity"
aria-label="toggle interactivity"
{...buttonProps}
>
{#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
</ControlButton>
{/if}
<slot />
<slot name="after" />
</Panel>
|