Svelte NodeToolbar with E2E (#3643)

* Added NodeToolbar * Added comments & fixed default behaviour in svelte * Added e2e-tests for NodeToolbar component & added data-id to react NodeToolbar * refactor(svelte/NodeToolbar): cleanup * refactor(node-toolbar): add system utils --------- Co-authored-by: moklick <info@moritzklack.com>
2023-11-20 18:40:43 +01:00
parent b659443507
commit b8affc1c82
22 changed files with 564 additions and 71 deletions
@@ -0,0 +1,19 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeToolbar } from '@xyflow/react';
+
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition} align={data.toolbarAlign}>
+        <button>delete</button>
+        <button>copy</button>
+        <button>expand</button>
+      </NodeToolbar>
+      <div>{data.label}</div>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomNode);
@@ -0,0 +1,50 @@
+import { Position, type Node } from '@xyflow/react';
+import ToolbarNode from './components/ToolbarNode';
+
+const positions = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'center', 'end'];
+
+const nodes: Node[] = [
+  {
+    id: 'default-node',
+    type: 'ToolbarNode',
+    data: { label: 'toolbar top', toolbarPosition: Position.Top },
+    position: { x: 0, y: -200 },
+    className: 'react-flow__node-default',
+  },
+];
+
+positions.forEach((position, posIndex) => {
+  alignments.forEach((align, alignIndex) => {
+    const id = `node-${align}-${position}`;
+    nodes.push({
+      id,
+      type: 'ToolbarNode',
+      data: {
+        label: `toolbar ${position} ${align}`,
+        toolbarPosition: position as Position,
+        toolbarAlign: align,
+        toolbarVisible: true,
+      },
+      className: 'react-flow__node-default',
+      position: { x: posIndex * 300, y: alignIndex * 100 },
+    });
+  });
+});
+
+export default {
+  flowProps: {
+    fitView: true,
+    nodeTypes: {
+      ToolbarNode,
+    },
+    nodes,
+    edges: [
+      {
+        id: 'first-edge',
+        source: 'default-node',
+        target: 'node-start-top',
+      },
+    ],
+  },
+} satisfies FlowConfig;