alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(svelte): add controls

Browse Source
This commit is contained in:
moklick
2023-02-19 17:29:29 +01:00
parent ba592ceea6
commit 90ac61a6bd
12 changed files with 239 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/container/Panel.svelte
+46
View File
@@ -0,0 +1,46 @@
<script lang="ts">
import type { PanelPosition } from '@reactflow/system';
import cc from 'classcat';
export let position: PanelPosition = 'top-right';
export { className as class }
let className: string;
$: positionClasses = `${position}`.split('-');
</script>
<div
class={cc(['react-flow__panel', className, ...positionClasses])}
>
<slot />
</div>
<style>
.react-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.react-flow__panel.top {
top: 0;
}
.react-flow__panel.bottom {
bottom: 0;
}
.react-flow__panel.left {
left: 0;
}
.react-flow__panel.right {
right: 0;
}
.react-flow__panel.center {
left: 50%;
transform: translateX(-50%);
}
</style>
packages/svelte/src/lib/container/SvelteFlow.svelte
+2
View File
@@ -47,6 +47,8 @@
<NodeRenderer />
<EdgeRenderer />
</Viewport>
<slot />
</div>
<style>
packages/svelte/src/lib/index.ts
+1
View File
@@ -1,3 +1,4 @@
import SvelteFlow from '$lib/container/SvelteFlow.svelte';
export { default as Controls } from '$lib/plugins/Controls/index.svelte';
export default SvelteFlow;
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import cc from 'classcat';
let className: string;
export { className as class }
</script>
<button type="button" on:click class={cc(['react-flow__controls-button', className])} {...$$restProps} >
<slot class="button-svg" />
</button>
<style>
.react-flow__controls-button {
border: none;
background: #fefefe;
border-bottom: 1px solid #eee;
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
cursor: pointer;
user-select: none;
padding: 5px;
}
.react-flow__controls-button :global(svg) {
width: 100%;
max-width: 12px;
max-height: 12px;
}
</style>
packages/svelte/src/lib/plugins/Controls/Icons/Fit.svelte
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
<path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 462 B

packages/svelte/src/lib/plugins/Controls/Icons/Lock.svelte
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

packages/svelte/src/lib/plugins/Controls/Icons/Minus.svelte
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
<path d="M0 0h32v4.2H0z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 96 B

packages/svelte/src/lib/plugins/Controls/Icons/Plus.svelte
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

packages/svelte/src/lib/plugins/Controls/Icons/Unlock.svelte
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 471 B

packages/svelte/src/lib/plugins/Controls/index.svelte
+89
View File
@@ -0,0 +1,89 @@
<script lang="ts">
import Panel from '$lib/container/Panel.svelte';
import type { PanelPosition } from '@reactflow/system';
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: PanelPosition = 'bottom-left';
export let showZoom = true;
export let showFitView = true;
export let showInteractive = true;
import { useStore } from '$lib/store';
const { zoomIn, zoomOut, fitView } = useStore();
const isInteractive = true;
const onZoomInHandler = () => {
zoomIn();
};
const onZoomOutHandler = () => {
zoomOut();
};
const onFitViewHandler = () => {
fitView();
};
const onToggleInteractivity = () => {
// store.setState({
// nodesDraggable: !isInteractive,
// nodesConnectable: !isInteractive,
// elementsSelectable: !isInteractive,
// });
// onInteractiveChange?.(!isInteractive);
};
</script>
<Panel class="react-flow__controls" position={position}>
{#if showZoom}
<ControlButton
on:click={onZoomInHandler}
class="react-flow__controls-zoomin"
title="zoom in"
aria-label="zoom in"
>
<PlusIcon />
</ControlButton>
<svelte:component
this={ControlButton}
on:click={onZoomOutHandler}
class="react-flow__controls-zoomout"
title="zoom out"
aria-label="zoom out"
>
<MinusIcon />
</svelte:component>
{/if}
{#if showFitView}
<svelte:component
this={ControlButton}
class="react-flow__controls-fitview"
on:click={onFitViewHandler}
title="fit view"
aria-label="fit view"
>
<FitViewIcon />
</svelte:component>
{/if}
{#if showInteractive}
<svelte:component
this={ControlButton}
class="react-flow__controls-interactive"
on:click={onToggleInteractivity}
title="toggle interactivity"
aria-label="toggle interactivity"
>
{#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
</svelte:component>
{/if}
</Panel>
packages/svelte/src/lib/store/index.ts
+48 -4
View File
@@ -10,9 +10,10 @@ import {
internalsSymbol,
type NodeOrigin,
type D3ZoomInstance,
type D3SelectionInstance
type D3SelectionInstance,
type ViewportHelperFunctionOptions
} from '@reactflow/system';
import { fitView } from '@reactflow/utils';
import { fitView, getD3Transition } from '@reactflow/utils';
import { getDimensions, getHandleBounds } from '../../utils';
import {
@@ -48,6 +49,9 @@ type SvelteFlowStore = {
}>;
transformStore: Writable<Transform>;
edgesWithDataStore: Readable<EdgeWithData[]>;
zoomIn: (options?: ViewportHelperFunctionOptions) => void;
zoomOut: (options?: ViewportHelperFunctionOptions) => void;
fitView: (options?: ViewportHelperFunctionOptions) => void;
updateNodePositions: (
nodeDragItems: NodeDragItem[],
positionChanged?: boolean,
@@ -68,7 +72,10 @@ export function createStore({
const heightStore = writable(500);
const widthStore = writable(500);
const nodeOriginStore = writable(nodeOrigin);
const d3Store = writable({ zoom: null, selection: null });
const d3Store = writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>({
zoom: null,
selection: null
});
let fitViewOnInitDone = false;
@@ -205,6 +212,40 @@ export function createStore({
nodesStore.set(nextNodes);
}
function zoomIn(options?: ViewportHelperFunctionOptions) {
const { zoom: d3Zoom, selection: d3Selection } = get(d3Store);
if (d3Zoom && d3Selection) {
d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1.2);
}
}
function zoomOut(options?: ViewportHelperFunctionOptions) {
const { zoom: d3Zoom, selection: d3Selection } = get(d3Store);
if (d3Zoom && d3Selection) {
d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1 / 1.2);
}
}
function _fitView() {
const { zoom: d3Zoom, selection: d3Selection } = get(d3Store);
if (d3Zoom && d3Selection) {
fitView(
{
nodes: get(nodesStore),
width: get(widthStore),
height: get(heightStore),
minZoom: 0.2,
maxZoom: 2,
d3Selection,
d3Zoom,
nodeOrigin: get(nodeOriginStore)
},
{}
);
}
}
return {
nodesStore,
edgesStore,
@@ -214,7 +255,10 @@ export function createStore({
widthStore,
edgesWithDataStore,
updateNodePositions,
updateNodeDimensions
updateNodeDimensions,
zoomIn,
zoomOut,
fitView: _fitView
};
}
packages/svelte/src/routes/+page.svelte
+4 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import type { Node, Edge } from '@reactflow/system';
import SvelteFlow from '../lib/index';
import SvelteFlow, { Controls } from '../lib/index';
const yNodes = 10;
const xNodes = 10;
@@ -57,7 +57,9 @@
// }]
</script>
<SvelteFlow {nodes} {edges} fitView />
<SvelteFlow {nodes} {edges} fitView >
<Controls />
</SvelteFlow>
<style>
:root {