Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-when an unknown printer took a galley of type and scrambled it to make a type
-specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-when an unknown printer took a galley of type and scrambled it to make a type
-specimen book.
To link static files (like fonts) to your projects and stories, use the
- `staticDirs` configuration option to specify folders to load when
- starting Storybook.
- # Do more with Storybook
-
- Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
-
-
-
-
-
-
Autodocs
-
Auto-generate living,
- interactive reference documentation from your components and stories.
- We recommend building UIs with a{' '}
-
- component-driven
- {' '}
- process starting with atomic components and ending with pages.
-
-
- Render pages with mock data. This makes it easy to build and review page states without
- needing to navigate to them in your app. Here are some handy patterns for managing page
- data in Storybook:
-
-
-
- Use a higher-level connected component. Storybook helps you compose such data from the
- "args" of child component stories
-
-
- Assemble data in the page component from your services. You can mock these services out
- using Storybook.
-
+ We recommend building UIs with a
+
+ component-driven
+
+ process starting with atomic components and ending with pages.
+
+
+ Render pages with mock data. This makes it easy to build and review page states without
+ needing to navigate to them in your app. Here are some handy patterns for managing page data
+ in Storybook:
+
+
+
+ Use a higher-level connected component. Storybook helps you compose such data from the
+ "args" of child component stories
+
+
+ Assemble data in the page component from your services. You can mock these services out
+ using Storybook.
+
+
+
+ Get a guided tutorial on component-driven development at
+
+ Storybook tutorials
+
+ . Read more in the
+ docs
+ .
+
+
+ Tip
+ Adjust the width of the canvas with the
+
+ Viewports addon in the toolbar
+
+
+`;
+
+ article.insertAdjacentHTML('beforeend', section);
+
+ return article;
+};
diff --git a/src/stories/default-examples/page/page.css b/src/stories/page/page.css
similarity index 100%
rename from src/stories/default-examples/page/page.css
rename to src/stories/page/page.css
diff --git a/src/stories/shapes/CardNode.stories.ts b/src/stories/shapes/CardNode.stories.ts
deleted file mode 100644
index 3a689207..00000000
--- a/src/stories/shapes/CardNode.stories.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-import exampleData from '../../example-datasets/shapes/CardNode';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
- title: 'Shapes/CardNode',
- component: FlowCanvas,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
- layout: 'fullscreen',
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- // tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- } satisfies Meta;
-
- export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const CardNode: Story = {
- args: {
- initialNodes: exampleData,
- // initialEdges: initialEdges,
- },
-};
-
diff --git a/src/stories/shapes/Comments.stories.ts b/src/stories/shapes/Comments.stories.ts
deleted file mode 100644
index 611ebb70..00000000
--- a/src/stories/shapes/Comments.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-// import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-import exampleData from '../../example-datasets/shapes/Comments';
-import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
- title: 'Shapes/CommentNode',
- component: FlowCanvas,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
- layout: 'fullscreen',
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- // tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- } satisfies Meta;
-
- export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const CommentNode: Story = {
- args: {
- initialNodes: exampleData,
- // initialEdges: initialEdges,
- },
-};
-
diff --git a/src/stories/shapes/DataTypeFieldsNode.stories.ts b/src/stories/shapes/DataTypeFieldsNode.stories.ts
deleted file mode 100644
index cd81d86e..00000000
--- a/src/stories/shapes/DataTypeFieldsNode.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-// import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-import exampleData from '../../example-datasets/shapes/DataTypeFieldsNode';
-import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
- title: 'Shapes/DataTypeFieldsNode',
- component: FlowCanvas,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
- layout: 'fullscreen',
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- // tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- } satisfies Meta;
-
- export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const DataTypeFieldsNode: Story = {
- args: {
- initialNodes: exampleData,
- // initialEdges: initialEdges,
- },
-};
-
diff --git a/src/stories/shapes/GenericNode.stories.ts b/src/stories/shapes/GenericNode.stories.ts
deleted file mode 100644
index 488dc3c6..00000000
--- a/src/stories/shapes/GenericNode.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-// import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-import exampleData from '../../example-datasets/shapes/GenericNode';
-import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
- title: 'Shapes/GenericNode',
- component: FlowCanvas,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
- layout: 'fullscreen',
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- // tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- } satisfies Meta;
-
- export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const GenericNode: Story = {
- args: {
- initialNodes: exampleData,
- // initialEdges: initialEdges,
- },
-};
-
diff --git a/src/stories/shapes/Other.stories.ts b/src/stories/shapes/Other.stories.ts
deleted file mode 100644
index 270f75b1..00000000
--- a/src/stories/shapes/Other.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-// import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-import exampleData from '../../example-datasets/shapes/other';
-import FlowCanvas from '../../flow-canvas/canvasTypes/FlowCanvas';
-
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
- title: 'Shapes/Other',
- component: FlowCanvas,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
- layout: 'fullscreen',
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
- // tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- } satisfies Meta;
-
- export default meta;
-type Story = StoryObj;
-
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Other: Story = {
- args: {
- initialNodes: exampleData,
- // initialEdges: initialEdges,
- },
-};
-
diff --git a/src/stories/structures/nodes.stories.ts b/src/stories/structures/nodes.stories.ts
new file mode 100644
index 00000000..e0834f55
--- /dev/null
+++ b/src/stories/structures/nodes.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/html';
+import { createPage } from './nodes';
+
+const meta = {
+ title: 'Structures/nodes',
+ render: () => createPage(),
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+ layout: 'fullscreen',
+ },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj = {};
+
+
\ No newline at end of file
diff --git a/src/stories/structures/nodes.ts b/src/stories/structures/nodes.ts
new file mode 100644
index 00000000..c558a852
--- /dev/null
+++ b/src/stories/structures/nodes.ts
@@ -0,0 +1,60 @@
+// @ts-nocheck
+import GraphCanvas from "../../graphCanvas";
+import { INode, ILink, GraphCanvasSetting } from "../../graphCanvas/types";
+
+
+const initNodes: Array = [
+ {
+ id: "1",
+ label: "Invana",
+ type: "Person",
+ shape: "circle",
+ // x: 0,
+ // y: 0
+ },
+ {
+ id: "2",
+ label: "Invana Studio",
+ type: "Person",
+ shape: "circle",
+ // x: 0,
+ // y: 0
+ }
+];
+
+const initEdges: Array = [
+ {
+ id: '1-2',
+ source: '1',
+ target: '2',
+ type: 'has_project'
+ }
+];
+
+
+
+export const createPage = () => {
+
+ const html = document.createElement("div");
+
+ // create canvas
+ const canvasDiv = document.createElement('canvas');
+ canvasDiv.style.width = "100vw"
+ canvasDiv.style.height = "100vh"
+ // canvasDiv.style.border = "10px solid red"
+
+ html.appendChild(canvasDiv)
+
+
+
+ document.addEventListener("DOMContentLoaded", function (event) {
+ /* The stuff I needed to initialise */
+ console.log("=DOM is ready", event)
+ const canvasSettings: GraphCanvasSetting = { canvas: { containerDiv: canvasDiv, backgroundColor: 0x2a2c2e } };
+ const graph = new GraphCanvas(canvasSettings);
+ graph.addData(initNodes, initEdges)
+
+
+ }, false);
+ return html;
+};
diff --git a/src/stories/test_canvases/canvas-draggable.stories.ts b/src/stories/test_canvases/canvas-draggable.stories.ts
new file mode 100644
index 00000000..c8bed135
--- /dev/null
+++ b/src/stories/test_canvases/canvas-draggable.stories.ts
@@ -0,0 +1,28 @@
+// import draw from "../../test_canvases/canvas-draggable";
+import draw from "../../test_canvases/canvas-draggable-pixijs-draggable";
+import type { Meta, StoryObj } from '@storybook/html';
+
+
+
+export const createPage = () => {
+ const html = document.createElement("div");
+ draw()
+ return html;
+};
+
+
+const meta = {
+ title: 'Test Canvases/canvas-draggable',
+ render: () => createPage(),
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+ layout: 'fullscreen',
+ },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj = {};
+
+
+
diff --git a/src/stories/test_canvases/canvas-node-interaction.stories.ts b/src/stories/test_canvases/canvas-node-interaction.stories.ts
new file mode 100644
index 00000000..8b5f3eee
--- /dev/null
+++ b/src/stories/test_canvases/canvas-node-interaction.stories.ts
@@ -0,0 +1,28 @@
+// import draw from "../../test_canvases/canvas-draggable";
+import draw from "../../test_canvases/node-interaction-1";
+import type { Meta, StoryObj } from '@storybook/html';
+
+
+
+export const createPage = () => {
+ const html = document.createElement("div");
+ draw()
+ return html;
+};
+
+
+const meta = {
+ title: 'Test Canvases/node-interaction',
+ render: () => createPage(),
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+ layout: 'fullscreen',
+ },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj = {};
+
+
+
diff --git a/src/stories/test_canvases/canvas1.stories.ts b/src/stories/test_canvases/canvas1.stories.ts
new file mode 100644
index 00000000..ebe70808
--- /dev/null
+++ b/src/stories/test_canvases/canvas1.stories.ts
@@ -0,0 +1,28 @@
+import draw from "../../test_canvases/canvas1";
+
+import type { Meta, StoryObj } from '@storybook/html';
+
+
+
+export const createPage = () => {
+ const html = document.createElement("div");
+ draw()
+ return html;
+};
+
+
+const meta = {
+ title: 'Test Canvases/canvas1',
+ render: () => createPage(),
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+ layout: 'fullscreen',
+ },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj = {};
+
+
+
diff --git a/src/test_canvases/canvas-draggable-pixijs-draggable.ts b/src/test_canvases/canvas-draggable-pixijs-draggable.ts
new file mode 100644
index 00000000..cd4aead7
--- /dev/null
+++ b/src/test_canvases/canvas-draggable-pixijs-draggable.ts
@@ -0,0 +1,101 @@
+// @ts-nocheck
+import * as PIXI from 'pixi.js';
+
+
+
+const draw = () => {
+
+
+ // Create a Pixi Application
+const app = new PIXI.Application({ width: 1800, height: 900, antialias: true, backgroundColor: 0xFFFFFF });
+document.body.appendChild(app.view);
+
+// Create a container for the nodes
+const nodesContainer = new PIXI.Container();
+app.stage.addChild(nodesContainer);
+
+// Draggable nodes
+const node1 = createNode(50, 50, 0xFF0000);
+const node2 = createNode(150, 150, 0x00FF00);
+
+
+
+const edgeGraphics = new PIXI.Graphics();
+
+
+// Add nodes to the container
+nodesContainer.addChild(node1);
+nodesContainer.addChild(node2);
+
+// Make nodes draggable
+makeNodeDraggable(node1);
+makeNodeDraggable(node2);
+
+// Initial update of the edge
+updateEdge();
+
+// Function to create a draggable node
+function createNode(x, y, color) {
+ const node = new PIXI.Graphics();
+ node.beginFill(color);
+ node.drawCircle(0, 0, 20);
+ node.endFill();
+ node.x = x;
+ node.y = y;
+ return node;
+}
+
+// Function to make a node draggable
+function makeNodeDraggable(node) {
+ node.interactive = true;
+ node.buttonMode = true;
+
+ node
+ .on('pointerdown', onDragStart)
+ .on('pointerup', onDragEnd)
+ .on('pointerupoutside', onDragEnd)
+ .on('pointermove', onDragMove);
+}
+
+// Event handler for starting drag
+function onDragStart(event) {
+ this.data = event.data;
+ this.dragging = true;
+}
+
+// Event handler for ending drag
+function onDragEnd() {
+ this.dragging = false;
+ this.data = null;
+}
+
+// Event handler for dragging
+function onDragMove() {
+ if (this.dragging) {
+ const newPosition = this.data.getLocalPosition(this.parent);
+ this.x = newPosition.x;
+ this.y = newPosition.y;
+
+ // Update the edge when dragging
+ updateEdge();
+ }
+}
+
+
+// Function to update the edge (line) between nodes
+function updateEdge() {
+ edgeGraphics.clear();
+ app.stage.addChild(edgeGraphics);
+
+ // Set line style for the edge
+ edgeGraphics.lineStyle(2, 0x000000);
+
+ // Move to the starting point
+ edgeGraphics.moveTo(node1.x, node1.y);
+
+ // Draw a line to the ending point
+ edgeGraphics.lineTo(node2.x, node2.y);
+}
+}
+
+export default draw
\ No newline at end of file
diff --git a/src/test_canvases/canvas-draggable.ts b/src/test_canvases/canvas-draggable.ts
new file mode 100644
index 00000000..a478b7c6
--- /dev/null
+++ b/src/test_canvases/canvas-draggable.ts
@@ -0,0 +1,77 @@
+// @ts-nocheck
+import * as PIXI from "pixi.js";
+
+
+
+const draw = ( ) => {
+
+ // Create a Pixi Application
+const app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0xFFFFFF });
+document.body.appendChild(app.view);
+
+// Create a graphics object for the edge
+const edgeGraphics = new PIXI.Graphics();
+app.stage.addChild(edgeGraphics);
+
+// Create a container for the nodes and edge
+const nodesContainer = new PIXI.Container();
+app.stage.addChild(nodesContainer);
+
+// Draggable nodes
+const node1 = createNode(50, 50, 0xFF0000);
+const node2 = createNode(150, 150, 0x00FF00);
+
+// Add nodes to the container
+nodesContainer.addChild(node1);
+nodesContainer.addChild(node2);
+
+// Make nodes draggable
+makeNodeDraggable(node1);
+makeNodeDraggable(node2);
+
+// Initial update of the edge
+updateEdge();
+
+// Function to create a draggable node
+function createNode(x, y, color) {
+ const node = new PIXI.Graphics();
+ node.beginFill(color);
+ node.drawCircle(0, 0, 20);
+ node.endFill();
+ node.x = x;
+ node.y = y;
+ // node.interactive = true;
+ node.eventMode = 'auto';
+ node.buttonMode = true;
+ return node;
+}
+
+// Function to make a node draggable
+function makeNodeDraggable(node) {
+ node.draggable = true;
+
+ node.on('dragmove', () => {
+ console.log("dragmove triggered")
+
+ updateEdge();
+ });
+}
+
+// Function to update the edge (line) between nodes
+function updateEdge() {
+ console.log("updateEdge")
+ edgeGraphics.clear();
+
+ // Set line style for the edge
+ edgeGraphics.lineStyle(2, 0x000000);
+
+ // Move to the starting point
+ edgeGraphics.moveTo(node1.x, node1.y);
+
+ // Draw a line to the ending point
+ edgeGraphics.lineTo(node2.x, node2.y);
+}
+}
+
+
+export default draw;
\ No newline at end of file
diff --git a/src/test_canvases/canvas1.ts b/src/test_canvases/canvas1.ts
new file mode 100644
index 00000000..fc157da8
--- /dev/null
+++ b/src/test_canvases/canvas1.ts
@@ -0,0 +1,75 @@
+// @ts-nocheck
+// Create a Pixi Application
+import * as PIXI from 'pixi.js';
+import { Viewport } from 'pixi-viewport';
+
+
+const draw = () => {
+
+ // Create a PIXI.Application
+ const app = new PIXI.Application({ width: 800, height: 600, antialias: true, backgroundColor: 0x555555 });
+ document.body.appendChild(app.view);
+
+ // Create a Viewport
+ const viewport = new Viewport({
+ screenWidth: 800,
+ screenHeight: 600,
+ worldWidth: 1000,
+ worldHeight: 1000,
+ events: app.renderer.events,
+ });
+ app.stage.addChild(viewport);
+
+ // Function to create a draggable node
+ function createNode(x: number, y: number) {
+ const node = new PIXI.Graphics();
+ node.beginFill(0xff0000);
+ node.drawCircle(0, 0, 30);
+ node.endFill();
+ node.position.set(x, y);
+ node.interactive = true; // Enable mouse/touch events
+ node.buttonMode = true; // Show hand cursor on hover
+
+ // Event listeners for dragging
+ node.on('pointerdown', onDragStart)
+ .on('pointerup', onDragEnd)
+ .on('pointerupoutside', onDragEnd)
+ .on('pointermove', onDragMove);
+
+ // app.stage.addChild(node); // Add node to the viewport
+
+ viewport.addChild(node); // Add node to the viewport
+ }
+
+ // Function to handle drag start
+ function onDragStart(event: PIXI.InteractionEvent) {
+ const node = event.currentTarget as PIXI.Graphics;
+ node.data = event.data;
+ node.dragging = true;
+ }
+
+ // Function to handle drag end
+ function onDragEnd(event: PIXI.InteractionEvent) {
+ const node = event.currentTarget as PIXI.Graphics;
+ node.dragging = false;
+ node.data = null;
+ }
+
+ // Function to handle drag move
+ function onDragMove(event: PIXI.InteractionEvent) {
+ const node = event.currentTarget as PIXI.Graphics;
+ if (node.dragging) {
+ const newPosition = node.data.getLocalPosition(node.parent);
+ node.x = newPosition.x;
+ node.y = newPosition.y;
+ }
+ }
+
+ // Create draggable nodes
+ createNode(100, 100);
+ createNode(200, 200);
+ createNode(300, 300);
+}
+
+
+export default draw;
\ No newline at end of file
diff --git a/src/test_canvases/node-interaction-1.ts b/src/test_canvases/node-interaction-1.ts
new file mode 100644
index 00000000..5c7321df
--- /dev/null
+++ b/src/test_canvases/node-interaction-1.ts
@@ -0,0 +1,102 @@
+// @ts-nocheck
+import * as PIXI from "pixi.js";
+
+
+const draw = ()=> {
+
+
+ const app = new PIXI.Application({ width: 800, height: 600, antialias: true, backgroundColor: 0xFFFFFF });
+ document.body.appendChild(app.view);
+
+ // Container for the draggable node
+ const nodeContainer = new PIXI.Container();
+ app.stage.addChild(nodeContainer);
+
+ // Create a node
+ const node = new PIXI.Graphics();
+ node.beginFill(0xFF0000);
+ node.drawCircle(0, 0, 20);
+ node.endFill();
+ node.interactive = true;
+ node.buttonMode = true;
+
+ // Add the node to the container
+ nodeContainer.addChild(node);
+
+ // Initial scale and position
+ let scale = 1;
+ let position = new PIXI.Point(0, 0);
+
+ // Register the pointer events
+ node
+ .on('pointerdown', onDragStart)
+ .on('pointerup', onDragEnd)
+ .on('pointerupoutside', onDragEnd)
+ .on('pointermove', onDragMove)
+ .on('wheel', onZoom);
+
+ function onDragStart(event) {
+ this.data = event.data;
+ this.dragging = true;
+ this.dragPoint = this.data.getLocalPosition(this.parent);
+ }
+
+ function onDragEnd() {
+ this.dragging = false;
+ this.data = null;
+ }
+
+ function onDragMove() {
+ if (this.dragging) {
+ const newPosition = this.data.getLocalPosition(this.parent);
+ const delta = new PIXI.Point(newPosition.x - this.dragPoint.x, newPosition.y - this.dragPoint.y);
+
+ this.x += delta.x;
+ this.y += delta.y;
+
+ this.dragPoint = newPosition;
+ }
+ }
+
+ function onZoom(event) {
+ const delta = event.deltaY;
+ const zoomSpeed = 0.1;
+
+ scale += delta * zoomSpeed;
+
+ // Limit the scale to a reasonable range
+ scale = Math.min(Math.max(scale, 0.5), 2);
+
+ // Set the new scale
+ nodeContainer.scale.set(scale);
+
+ // Update the position to keep the zoom centered around the pointer
+ const newPosition = event.data.getLocalPosition(nodeContainer);
+ const anchorX = (newPosition.x - position.x) / (scale - 1);
+ const anchorY = (newPosition.y - position.y) / (scale - 1);
+
+ nodeContainer.pivot.set(anchorX, anchorY);
+ nodeContainer.position.set(position.x - anchorX * scale, position.y - anchorY * scale);
+ }
+
+ // Handle application resize
+ window.addEventListener('resize', () => {
+ app.renderer.resize(window.innerWidth, window.innerHeight);
+ });
+
+ // Add a sprite for the background or other elements
+ // ...
+
+ // Start the PIXI update loop
+ app.ticker.add(() => {
+ // Update any animations or additional logic here
+ });
+
+
+}
+
+
+
+
+
+export default draw;
\ No newline at end of file
diff --git a/src/test_canvases/node-interaction.ts b/src/test_canvases/node-interaction.ts
new file mode 100644
index 00000000..27e2d531
--- /dev/null
+++ b/src/test_canvases/node-interaction.ts
@@ -0,0 +1,79 @@
+// @ts-nocheck
+import * as PIXI from "pixi.js";
+
+
+const draw = ()=> {
+ // Create a Pixi Application
+const app = new PIXI.Application({ width: 800, height: 600, antialias: true, backgroundColor: 0xFFFFFF });
+document.body.appendChild(app.view);
+
+// Function to create a node with a border
+function createNode(x, y, radius, fillColor, borderColor) {
+ const node = new PIXI.Graphics();
+
+ // Draw the node
+ node.beginFill(fillColor);
+ node.drawCircle(0, 0, radius);
+ node.endFill();
+
+ // Draw the border
+ node.lineStyle(2, borderColor);
+ node.drawCircle(0, 0, radius);
+
+ // Set initial position
+ node.x = x;
+ node.y = y;
+
+ // Make the node interactive
+ node.interactive = true;
+ node.buttonMode = true;
+
+ // Set up event listeners for hover effects
+ node.on('pointerover', onNodeHover.bind(null, node, borderColor));
+ node.on('pointerout', onNodeOut.bind(null, node, borderColor));
+
+ return node;
+}
+
+// Create nodes with borders
+const node1 = createNode(100, 100, 30, 0xFF0000, 0x000000);
+const node2 = createNode(200, 200, 30, 0x00FF00, 0x000000);
+
+// Add nodes to the stage
+app.stage.addChild(node1);
+app.stage.addChild(node2);
+
+// Function to handle node hover
+function onNodeHover(node, borderColor) {
+ node.clear();
+
+ // Draw the node with an active state (different fill color)
+ node.beginFill(0xCCCCCC); // Set the active fill color
+ node.drawCircle(0, 0, 30);
+ node.endFill();
+
+ // Draw the border
+ node.lineStyle(5, borderColor);
+ node.drawCircle(0, 0, 30);
+}
+
+// Function to handle node mouseout
+function onNodeOut(node, borderColor) {
+ node.clear();
+
+ // Draw the node with the original fill color
+ node.beginFill(node.tint); // Use the original fill color
+ node.drawCircle(0, 0, 30);
+ node.endFill();
+
+ // Draw the border
+ node.lineStyle(2, borderColor);
+ node.drawCircle(0, 0, 30);
+}
+}
+
+
+
+
+
+export default draw;
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/todo.md b/todo.md
new file mode 100644
index 00000000..d97e9cf0
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,35 @@
+# TODO items
+
+
+## GraphCanvas
+- [ ] fitview
+- [ ] Zoom In
+- [ ] Zoom Out
+- [ ] Events - ContextMenu
+- [ ] redraw
+
+## Events/Interactions.
+- [ ] Canvas -
+ - [ ] contextMenu
+ - [ ] zoomIn
+ - [ ] zoomOut
+ - [ ] fitView
+
+
+- [ ] Node/Edge -
+ - [ ] contextMenu
+ - [ ] select
+ - [ ] deSelect
+ - [ ] click
+ - [ ] dragStart
+ - [ ] dragEnd
+ - [ ] dragging
+ - [ ] hover
+
+## Links
+- [ ] straightLine
+- [ ] brazierCurve
+- [ ] StepCurve
+- [ ] Loop
+
+
diff --git a/tsconfig.json b/tsconfig.json
index a841e1df..75abdef2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,23 @@
{
"compilerOptions": {
- "target": "es6",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "allowJs": true,
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "noFallthroughCasesInSwitch": true,
- "module": "esnext",
- "moduleResolution": "node",
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx"
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
},
- "include": [
- "src"
- ]
+ "include": ["src"]
}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..d13d98e2
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,27 @@
+// vite.config.js
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ build: {
+ lib: {
+ // Could also be a dictionary or array of multiple entry points
+ entry: resolve(__dirname, 'src/main.ts'),
+ name: 'graph-canvas',
+ // the proper extensions will be added
+ fileName: 'graph-canvas',
+ },
+ rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: ['vue'],
+ output: {
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {
+ vue: 'Vue',
+ },
+ },
+ },
+ },
+})
\ No newline at end of file
-