@sqlrooms/canvas 0.25.0-rc.0 → 0.26.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/Canvas.js +3 -3
  3. package/dist/Canvas.js.map +1 -1
  4. package/dist/CanvasSlice.d.ts +145 -600
  5. package/dist/CanvasSlice.d.ts.map +1 -1
  6. package/dist/CanvasSlice.js +49 -51
  7. package/dist/CanvasSlice.js.map +1 -1
  8. package/dist/nodes/CanvasNodeContainer.js +1 -1
  9. package/dist/nodes/CanvasNodeContainer.js.map +1 -1
  10. package/package.json +9 -9
package/README.md CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  ReactFlow-based canvas for building and editing DAGs of SQL and Vega nodes, with a Zustand slice for persistence in SQLRooms apps.
4
4
 
5
- - CanvasSlice stores nodes and edges under `config.canvas`
5
+ - CanvasSlice stores nodes and edges under `canvas.config`
6
6
  - Canvas component renders and edits the graph
package/dist/Canvas.js CHANGED
@@ -13,12 +13,12 @@ const nodeTypes = {
13
13
  vega: VegaNode,
14
14
  };
15
15
  export const Canvas = () => {
16
- const nodes = useStoreWithCanvas((s) => s.config.canvas.nodes);
17
- const edges = useStoreWithCanvas((s) => s.config.canvas.edges);
16
+ const nodes = useStoreWithCanvas((s) => s.canvas.config.nodes);
17
+ const edges = useStoreWithCanvas((s) => s.canvas.config.edges);
18
18
  const addEdge = useStoreWithCanvas((s) => s.canvas.addEdge);
19
19
  const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);
20
20
  const applyEdgeChanges = useStoreWithCanvas((s) => s.canvas.applyEdgeChanges);
21
- const viewport = useStoreWithCanvas((s) => s.config.canvas.viewport);
21
+ const viewport = useStoreWithCanvas((s) => s.canvas.config.viewport);
22
22
  const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);
23
23
  const addNode = useStoreWithCanvas((s) => s.canvas.addNode);
24
24
  const empty = nodes.length === 0;
package/dist/Canvas.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Canvas.js","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, useTheme} from '@sqlrooms/ui';\nimport {\n Background,\n BackgroundVariant,\n Controls,\n Edge,\n MiniMap,\n Node,\n ReactFlow,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport {PlusIcon} from 'lucide-react';\nimport React from 'react';\nimport {CanvasAssistantDrawer} from './CanvasAssistantDrawer';\nimport type {CanvasNodeData} from './CanvasSlice';\nimport {useStoreWithCanvas} from './CanvasSlice';\nimport {AddNodePopover} from './nodes/AddNodePopover';\nimport {SqlNode} from './nodes/SqlNode';\nimport {VegaNode} from './nodes/VegaNode';\n\nconst nodeTypes = {\n sql: SqlNode,\n vega: VegaNode,\n};\n\nexport const Canvas: React.FC = () => {\n const nodes = useStoreWithCanvas(\n (s) => s.config.canvas.nodes,\n ) as unknown as Node<CanvasNodeData>[];\n const edges = useStoreWithCanvas((s) => s.config.canvas.edges) as Edge[];\n const addEdge = useStoreWithCanvas((s) => s.canvas.addEdge);\n const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);\n const applyEdgeChanges = useStoreWithCanvas((s) => s.canvas.applyEdgeChanges);\n const viewport = useStoreWithCanvas((s) => s.config.canvas.viewport);\n const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);\n const addNode = useStoreWithCanvas((s) => s.canvas.addNode);\n\n const empty = nodes.length === 0;\n const {theme: colorMode} = useTheme();\n\n return (\n <div className=\"h-full w-full\">\n <div className=\"relative h-full w-full\">\n {empty && (\n <div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n <AddNodePopover>\n <Button size=\"xs\">\n <PlusIcon className=\"h-4 w-4\" />\n Add node\n </Button>\n </AddNodePopover>\n </div>\n )}\n <ReactFlow\n minZoom={0.1}\n colorMode={colorMode}\n nodes={nodes as any}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={applyNodeChanges}\n onEdgesChange={applyEdgeChanges}\n onViewportChange={setViewport}\n onConnect={addEdge}\n viewport={viewport}\n // fitView\n >\n <MiniMap />\n <Controls position=\"top-left\" />\n <Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n </ReactFlow>\n </div>\n <CanvasAssistantDrawer />\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"Canvas.js","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Button, useTheme} from '@sqlrooms/ui';\nimport {\n Background,\n BackgroundVariant,\n Controls,\n Edge,\n MiniMap,\n Node,\n ReactFlow,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\nimport {PlusIcon} from 'lucide-react';\nimport React from 'react';\nimport {CanvasAssistantDrawer} from './CanvasAssistantDrawer';\nimport type {CanvasNodeData} from './CanvasSlice';\nimport {useStoreWithCanvas} from './CanvasSlice';\nimport {AddNodePopover} from './nodes/AddNodePopover';\nimport {SqlNode} from './nodes/SqlNode';\nimport {VegaNode} from './nodes/VegaNode';\n\nconst nodeTypes = {\n sql: SqlNode,\n vega: VegaNode,\n};\n\nexport const Canvas: React.FC = () => {\n const nodes = useStoreWithCanvas(\n (s) => s.canvas.config.nodes,\n ) as unknown as Node<CanvasNodeData>[];\n const edges = useStoreWithCanvas((s) => s.canvas.config.edges) as Edge[];\n const addEdge = useStoreWithCanvas((s) => s.canvas.addEdge);\n const applyNodeChanges = useStoreWithCanvas((s) => s.canvas.applyNodeChanges);\n const applyEdgeChanges = useStoreWithCanvas((s) => s.canvas.applyEdgeChanges);\n const viewport = useStoreWithCanvas((s) => s.canvas.config.viewport);\n const setViewport = useStoreWithCanvas((s) => s.canvas.setViewport);\n const addNode = useStoreWithCanvas((s) => s.canvas.addNode);\n\n const empty = nodes.length === 0;\n const {theme: colorMode} = useTheme();\n\n return (\n <div className=\"h-full w-full\">\n <div className=\"relative h-full w-full\">\n {empty && (\n <div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n <AddNodePopover>\n <Button size=\"xs\">\n <PlusIcon className=\"h-4 w-4\" />\n Add node\n </Button>\n </AddNodePopover>\n </div>\n )}\n <ReactFlow\n minZoom={0.1}\n colorMode={colorMode}\n nodes={nodes as any}\n edges={edges}\n nodeTypes={nodeTypes}\n onNodesChange={applyNodeChanges}\n onEdgesChange={applyEdgeChanges}\n onViewportChange={setViewport}\n onConnect={addEdge}\n viewport={viewport}\n // fitView\n >\n <MiniMap />\n <Controls position=\"top-left\" />\n <Background variant={BackgroundVariant.Dots} gap={16} size={1} />\n </ReactFlow>\n </div>\n <CanvasAssistantDrawer />\n </div>\n );\n};\n"]}