pcui-graph version 1.0 (#5)

* update pcui-graph to version 1.0

Author: ellthompson

src/components/Graph/base-component.jsx .storybook/base-component.jsxsrc/components/Graph/base-component.jsx renamed to .storybook/base-component.jsx

@@ -1,26 +1,15 @@
 import React from 'react';
-import Graph from './index.js';
+import { Graph } from '../src/index.js';
 
 class BaseComponent extends React.Component {
     constructor(props) {
         super(props);
-        if (props.onClick) {
-            this.onClick = props.onClick;
-        }
-        if (props.onChange) {
-            this.onChange = props.onChange;
-        }
-        if (props.link) {
-            this.link = props.link;
-        }
     }
     attachElement = (nodeElement, containerElement) => {
         if (!nodeElement) return;
-        this.element = new Graph({
-            ...this.props,
+        this.element = new Graph(this.props.schema, {
+            ...this.props.options,
             dom: nodeElement,
-            container: containerElement,
-            parent: undefined
         });
         if (this.onClick) {
             this.element.on('click', this.onClick);

.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  stories: ['../src/components/Graph/index.stories.jsx'],
+  stories: ['./stories/**'],
   addons: [
     '@storybook/addon-actions/register',
     '@storybook/addon-links',
@@ -24,6 +24,14 @@ module.exports = {
           }],
       }
     );
+
+    config.module.rules.unshift(
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      }
+    );
     // Return the altered config
     return config;
   },

.storybook/stories/advanced/directed-graph.stories.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { GRAPH_ACTIONS } from '../../../src/constants';
+import Component from '../../base-component';
+
+var name = 'Directed Graph';
+var config = {
+    title: `Advanced/${name}`
+};
+
+export default {
+    title: config.title,
+    component: Component,
+    parameters: {
+        docs: {}
+    }
+};
+
+const GRAPH_ENUM = {
+    NODE: {
+        STATE: 0,
+    },
+    EDGE: {
+        EDGE: 0,
+    }
+};
+
+const GRAPH_SCHEMA = {
+    nodes: {
+        [GRAPH_ENUM.NODE.STATE]: {
+            name: 'state',
+            fill: 'rgb(54, 67, 70, 0.8)',
+            stroke: '#20292b',
+            icon: '',
+            iconColor: '#FFFFFF',
+            contextMenuItems: [
+                {
+                    text: 'Add transition',
+                    action: GRAPH_ACTIONS.ADD_EDGE,
+                    edgeType: GRAPH_ENUM.EDGE.EDGE
+                },
+                {
+                    text: 'Delete state',
+                    action: GRAPH_ACTIONS.DELETE_NODE
+                }
+            ]
+        }
+    },
+    edges: {
+        [GRAPH_ENUM.EDGE.EDGE]: {
+            stroke: '#0379EE',
+            strokeWidth: 2,
+            targetMarkerStroke: '#0379EE',
+            targetMarker: true,
+            from: [
+                GRAPH_ENUM.NODE.STATE,
+                GRAPH_ENUM.NODE.START_STATE,
+                GRAPH_ENUM.NODE.DEFAULT_STATE
+            ],
+            to: [
+                GRAPH_ENUM.NODE.STATE,
+                GRAPH_ENUM.NODE.DEFAULT_STATE,
+                GRAPH_ENUM.NODE.END_STATE
+            ],
+            contextMenuItems: [
+                {
+                    text: 'Delete edge',
+                    action: GRAPH_ACTIONS.DELETE_EDGE
+                }
+            ]
+        }
+    }
+};
+
+var GRAPH_DATA = {
+    nodes: {
+        1234: {
+            id: 1234,
+            nodeType: GRAPH_ENUM.NODE.STATE,
+            name: 'NODE A',
+            posX: 100,
+            posY: 100
+        },
+        1235: {
+            id: 1235,
+            nodeType: GRAPH_ENUM.NODE.STATE,
+            name: 'NODE B',
+            posX: 100,
+            posY: 300
+        },
+        1236: {
+            id: 1236,
+            nodeType: GRAPH_ENUM.NODE.STATE,
+            name: 'NODE C',
+            posX: 300,
+            posY: 200
+        }
+    },
+    edges: {
+        '1234-1235': {
+            edgeType: GRAPH_ENUM.EDGE.EDGE,
+            from: 1234,
+            to: 1235
+        },
+        '1235-1236': {
+            edgeType: GRAPH_ENUM.EDGE.EDGE,
+            from: 1235,
+            to: 1236
+        },
+    }
+};
+
+const GRAPH_CONTEXT_MENU_ITEMS_ITEMS = [
+    {
+        text: 'Add new state',
+        action: GRAPH_ACTIONS.ADD_NODE,
+        nodeType: GRAPH_ENUM.NODE.STATE,
+        attributes: {
+            name: 'New state',
+            speed: 1.0,
+            loop: false
+        }
+    }
+];
+
+export const DirectedGraphExample = (args) => { 
+    return <Component schema={GRAPH_SCHEMA} options={{
+        initialData: GRAPH_DATA,
+        contextMenuItems: GRAPH_CONTEXT_MENU_ITEMS_ITEMS,
+        passiveUIEvents: false,
+        includeFonts: true,
+        incrementNodeNames: true,
+        defaultStyles: {
+            background: {
+                color: '#20292B',
+                gridSize: 10
+            },
+            edge: {
+                connectionStyle: 'default'
+            }
+        }
+    }} />;
+};
+
+document.querySelector('#root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
+document.body.setAttribute('style', 'margin: 0px; padding: 0px;');
+
+setTimeout(() => {
+    Object.keys(GRAPH_ACTIONS).forEach((key) => {
+        const graphAction = GRAPH_ACTIONS[key];
+        document.querySelector('.pcui-graph').ui.on(graphAction, (data) => {
+            console.log(graphAction, data);
+        });
+    });
+}, 500);