Merge pull request #42 from plastic-io/next

Next

package.json

@@ -26,7 +26,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/standalone": "^7.20.12",
     "@mdi/js": "^7.1.96",
-    "@plastic-io/plastic-io": "^2.0.1",
+    "@plastic-io/plastic-io": "2.0.3",
     "bezier-js": "^6.1.0",
     "deep-diff": "^1.0.2",
     "domhandler": "^5.0.3",

packages/CodeEditor/Editor.vue

@@ -94,6 +94,7 @@ export default {
     });
     monaco.languages.typescript.typescriptDefaults.addExtraLib(editorLibSrc, libUri);
     // monaco.editor.createModel(editorLibSrc, 'typescript', monaco.Uri.parse(libUri));
+
     await this.initEditor();
     if (this.isPopout) {
       window.addEventListener('resize', this.debounceLayout);
@@ -216,8 +217,15 @@ export default {
           this.cursorLocation = this.$refs.editor.pinstance.getPosition();
         }
       });
+      editor.onKeyDown((e) => {
+        if (e.keyCode === 49 && (e.ctrlKey || e.metaKey)) {
+          this.save();
+          e.preventDefault();
+        } 
+      });
       // HACK: if editor is attached to "this" it will freeze the system
       this.$refs.editor.pinstance = editor;
+
       const getSize = (l, defaultSize) => {
         return localStorage.getItem(this.storeKey + '-size-' + l) || defaultSize;
       };

packages/CompileTemplate/importVue.ts

@@ -36,6 +36,44 @@ const _vModelText = self.dependencies.vue.vModelText;
 const _toDisplayString = self.dependencies.vue.toDisplayString;
 const _normalizeProps = self.dependencies.vue.normalizeProps;
 const _resolveDynamicComponent = self.dependencies.vue.resolveDynamicComponent;
+const _createCommentVNode = self.dependencies.vue.createCommentVNode;
+const _vModelRadio = self.dependencies.vue.vModelRadio;
+const _vModelCheckbox = self.dependencies.vue.vModelCheckbox;
+const _vModelSelect = self.dependencies.vue.vModelSelect;
+const _vModelDynamic = self.dependencies.vue.vModelDynamic;
+const _vOnWithModifiers = self.dependencies.vue.onWithModifiers;
+const _vOnWithoutModifiers = self.dependencies.vue.onWithoutModifiers;
+const _vShow = self.dependencies.vue.vShow;
+const _createSlots = self.dependencies.vue.createSlots;
+const _createStaticVNode = self.dependencies.vue.createStaticVNode;
+const _createRenderer = self.dependencies.vue.createRenderer;
+const _h = self.dependencies.vue.h; // alias for createVNode
+const _useSlots = self.dependencies.vue.useSlots;
+const _useAttrs = self.dependencies.vue.useAttrs;
+const _useListeners = self.dependencies.vue.useListeners;
+const _provide = self.dependencies.vue.provide;
+const _inject = self.dependencies.vue.inject;
+const _reactive = self.dependencies.vue.reactive;
+const _readonly = self.dependencies.vue.readonly;
+const _ref = self.dependencies.vue.ref;
+const _computed = self.dependencies.vue.computed;
+const _watch = self.dependencies.vue.watch;
+const _watchEffect = self.dependencies.vue.watchEffect;
+const _nextTick = self.dependencies.vue.nextTick;
+const _onMounted = self.dependencies.vue.onMounted;
+const _onUpdated = self.dependencies.vue.onUpdated;
+const _onUnmounted = self.dependencies.vue.onUnmounted;
+const _onActivated = self.dependencies.vue.onActivated;
+const _onDeactivated = self.dependencies.vue.onDeactivated;
+const _onBeforeMount = self.dependencies.vue.onBeforeMount;
+const _onBeforeUpdate = self.dependencies.vue.onBeforeUpdate;
+const _onBeforeUnmount = self.dependencies.vue.onBeforeUnmount;
+const _onErrorCaptured = self.dependencies.vue.onErrorCaptured;
+const _onRenderTracked = self.dependencies.vue.onRenderTracked;
+const _onRenderTriggered = self.dependencies.vue.onRenderTriggered;
+const _teleport = self.dependencies.vue.teleport;
+const _suspense = self.dependencies.vue.suspense;
+const _normalizeStyle = self.dependencies.vue.normalizeStyle;
 `);
 
     const script = compiler.compileScript(blocks.descriptor, {

packages/Graph/GraphCanvas.vue

@@ -26,7 +26,7 @@
             ></div>
             <node-edge-connector
                 v-for="c in connectors"
-                :key="c.connector.id + graphUpdateVersion"
+                :key="c.connector.id"
                 :connector="c.connector"
                 :edge="c.edge"
                 :node="c.node"
@@ -41,22 +41,20 @@
             <div v-if="selectionRect.visible && !presentation" class="selection-rect" :style="selectionRectStyle"></div>
             <div v-if="selectedNodes.length !== 0 && !presentation" class="bounding-rect" :style="boundingRectStyle"></div>
         </div>
-        <keep-alive>
-            <div style="position: fixed; top: 33px;left: 10px;" v-if="showGraphCodeEditor" v-show="!presentation">
-                <monaco-code-editor
-                    style="opacity: 0.98"
-                    templateType="vue"
-                    language="html"
-                    :graphId="graphSnapshot.id"
-                    :errors="errors.filter(e => e.type === 'graph')"
-                    :value="graphTemplateValue"
-                    helpLink="https://plastic-io.github.io/plastic-io/interfaces/NodeInterface.html"
-                    @close="showGraphCodeEditor = false"
-                    @dirty="setIsDirty = $event"
-                    @save="saveGraphTemplate($event)"
-                />
-            </div>
-        </keep-alive>
+        <div style="position: fixed; top: 33px;left: 10px;" v-if="showGraphCodeEditor" v-show="!presentation">
+            <monaco-code-editor
+                style="opacity: 0.98"
+                templateType="vue"
+                language="html"
+                :graphId="graphSnapshot.id"
+                :errors="errors.filter(e => e.type === 'graph')"
+                :value="graphTemplateValue"
+                helpLink="https://plastic-io.github.io/plastic-io/interfaces/NodeInterface.html"
+                @close="showGraphCodeEditor = false"
+                @dirty="setIsDirty = $event"
+                @save="saveGraphTemplate($event)"
+            />
+        </div>
         <div class="graph-errors" v-if="errors.length > 0">
             <v-alert color="error" @click="showGraphCodeEditor = true">
                 <pre v-for="error in errors">{{error}}</pre>

packages/Graph/info.ts

@@ -39,6 +39,7 @@ export default {
         let parentNode = e.target;
         const navEl = document.getElementsByClassName('graph-nav-drawer')[0];
         const menuEl = document.getElementsByClassName('v-overlay-container')[0];
+        const infoEl = document.getElementsByClassName('connector-info-value')[0];
         if (this.locked) {
             while (parentNode) {
                 if (parentNode.className === "node") {
@@ -53,6 +54,9 @@ export default {
         if (menuEl && menuEl.contains(e.target)) {
             return false;
         }
+        if (infoEl && infoEl.contains(e.target)) {
+            return false;
+        }
         const r = /no-graph-target/;
         // HACK: cheap hack, just check one node up for no-target
         return !(r.test(e.target.className) || (e.target.parentNode && r.test(e.target.parentNode.className)));

packages/Graph/mutation.ts

@@ -30,11 +30,7 @@ export default {
     async addItem(e: any) {
         const artifactPrefix = "artifacts/";
         let item, er;
-        if (e.type === 'publishedGraph') {
-            item = await this.orchestratorStore.dataProviders.publish.get(e.id);
-        } else if (e.type === 'component') {
-            item = e;
-        } else if (e["artifact-url"] && this.preferencesStore.preferences.graphHTTPServer) {
+        if (e["artifact-url"] && this.preferencesStore.preferences.graphHTTPServer) {
             try {
                 const artifactUrl = this.preferencesStore.preferences.graphHTTPServer + e["artifact-url"];
                 item = await fetch(artifactUrl);
@@ -44,7 +40,11 @@ export default {
             } catch (err) {
                 er = err;
             }
-        } else if (e.url && /api\.github\.com/.test(e.url)) {
+        } else if (e.type === 'publishedGraph') {
+            item = await this.orchestratorStore.dataProviders.publish.get(e.id);
+        } else if (e.type === 'component') {
+            item = e;
+        } else  if (e.url && /api\.github\.com/.test(e.url)) {
             const data = await fetch(e.url);
             const dataJson = await data.json();
             item = JSON.parse(atob(dataJson.content));

packages/ImportPanel/ImportPanelList.vue

@@ -73,7 +73,7 @@ export default {
                 });
             Object.keys(group).forEach((prefix) => {
                 group[prefix].sort((a, b) => {
-                    return new Date(a) - new Date(b);
+                    return b.version - a.version;
                 });
             });
             return group;

packages/Input/keys.ts

@@ -13,6 +13,7 @@ const equalKeyCode = 187;
 const backslashKeyCode = 220;
 const graveKeyCode = 192;
 const tabKeyCode = 9;
+const escKeyCode = 27;
 // const shiftKeyCode = 16;
 // const metaKeyCode = 91;
 // const spaceKeyCode = 32;
@@ -32,6 +33,29 @@ export const keys = (store: any, e: UIEvent) => {
     const shift = e.shiftKey;
     const alt = e.altKey;
     const locked = store.graphStore.presentation || store.locked;
+    if (keys[escKeyCode]) {
+        store.graphStore.startedAddingConnector = null;
+        store.graphStore.startedMovingConnector = null;
+        store.graphStore.movingConnector = null;
+        store.graphStore.addingConnector = null;
+        store.inputStore.mouse.lmb = false;
+        store.graphStore.movingNodes.forEach((n: any) => {
+            const ogNode = store.graphSnapshotStore.graph.nodes.find((no: any) => no.id = n.id);
+            const node = store.graphStore.graphSnapshot.nodes.find((no: any) => no.id = n.id);
+            if (ogNode && node) {
+                node.properties.presentation.x = ogNode.properties.presentation.x;
+                node.properties.presentation.y = ogNode.properties.presentation.y;
+                node.properties.x = ogNode.properties.x;
+                node.properties.y = ogNode.properties.y;
+            }
+        });
+        for (let t = 0; t < 1500; t += 100) {
+            setTimeout(() => {
+                store.orchistratorStore.redrawConnectorVersion += 1;
+            }, t);
+        }
+        store.graphStore.movingNodes = [];
+    }
     if (keys[graveKeyCode] && alt) {
         store.graphStore.presentation = !store.graphStore.presentation;
     }

packages/Input/mouse.ts

@@ -70,18 +70,8 @@ export default class MouseAction {
     // check if the mouse is hovering over any connectors using LUTs generated by bezier.ts plugin
     let x = (mouse.x - this.graphStore.view.x) / this.graphStore.view.k;
     let y = (mouse.y - this.graphStore.view.y) / this.graphStore.view.k;
-    // margin
-    let m = 5;
-    // map LUTs for collions
-    const luts = Object.keys(this.graphStore.luts).map((connectorId: string) => {
-        return {
-            output: this.graphStore.luts[connectorId].output,
-            input: this.graphStore.luts[connectorId].input,
-            node: this.graphStore.luts[connectorId].node,
-            connector: this.graphStore.luts[connectorId].connector,
-            table: this.graphStore.luts[connectorId].lut,
-        };
-    });
+    // LUT collision margin
+    let m = 10;
     // adding a connector
     if (this.graphStore.hoveredPort && !this.inputStore.mouse.lmb && mouse.lmb && !this.graphStore.movingConnector && !locked) {
         this.graphStore.ltrPct = this.graphStore.hoveredPort.type === "output" ? 0 : 1;
@@ -139,37 +129,40 @@ export default class MouseAction {
     this.graphStore.connectorWarn = null;
     // check hits on the connector LUT to find connector selection and connection hovers
     this.graphStore.hoveredConnector = null;
-    if (!this.graphStore.addingConnector) {
-        for (let j = 0; j < luts.length; j += 1) {
-            const t = luts[j].table;
-            const connector = luts[j].connector;
-            const node = luts[j].node;
-            const input = luts[j].input;
-            const output = luts[j].output;
-            for (let i = 0; i < t.length; i += 1) {
-                if ((t[i].x < x && t[i].x + m > x && t[i].y < y && t[i].y + m > y)
-                    || (t[i].x >= this.graphStore.selectionRect.x && t[i].x <= this.graphStore.selectionRect.x + this.graphStore.selectionRect.width
-                    && t[i].y >= this.graphStore.selectionRect.y && t[i].y <= this.graphStore.selectionRect.y + this.graphStore.selectionRect.height)) {
-                    // left to right % of the hit
-                    if (!this.graphStore.movingConnector && !this.graphStore.addingConnector) {
-                        this.graphStore.ltrPct = i / t.length;
-                    }
-                    // check if state connector should be selected as well as hovered
-                    if ((mouse.lmb && !this.inputStore.mouse.lmb) || this.graphStore.selectionRect.visible) {
-                        // maybe remove the previous selection before adding state one
-                        if (!(this.inputStore.keys[shiftKeyCode] || this.inputStore.keys[metaKeyCode] || this.inputStore.keys[ctrlKeyCode])
-                            && !this.graphStore.selectionRect.visible) {
-                            this.graphStore.selectedConnectors = [];
+    if (!this.graphStore.addingConnector && !this.graphStore.hoveredPort) {
+        for (const connectorId in this.graphStore.luts) {
+            if (this.graphStore.luts.hasOwnProperty(connectorId)) {
+                const lut = this.graphStore.luts[connectorId];
+                const t = lut.lut;
+                const connector = lut.connector;
+                const node = lut.node;
+                const input = lut.input;
+                const output = lut.output;
+                for (let i = 0; i < t.length; i += 1) {
+                    if ((t[i].x - m < x && t[i].x + m > x && t[i].y - m < y && t[i].y + m > y)
+                        || (t[i].x >= this.graphStore.selectionRect.x && t[i].x <= this.graphStore.selectionRect.x + this.graphStore.selectionRect.width
+                        && t[i].y >= this.graphStore.selectionRect.y && t[i].y <= this.graphStore.selectionRect.y + this.graphStore.selectionRect.height)) {
+                        // left to right % of the hit
+                        if (!this.graphStore.movingConnector && !this.graphStore.addingConnector) {
+                            this.graphStore.ltrPct = i / t.length;
                         }
-                        if (this.graphStore.selectedConnectors.indexOf(connector) === -1) {
-                            this.graphStore.selectedConnectors.push(connector);
+                        // check if state connector should be selected as well as hovered
+                        if ((mouse.lmb && !this.inputStore.mouse.lmb) || this.graphStore.selectionRect.visible) {
+                            // maybe remove the previous selection before adding state one
+                            if (!(this.inputStore.keys[shiftKeyCode] || this.inputStore.keys[metaKeyCode] || this.inputStore.keys[ctrlKeyCode])
+                                && !this.graphStore.selectionRect.visible) {
+                                this.graphStore.selectedConnectors = [];
+                            }
+                            if (this.graphStore.selectedConnectors.indexOf(connector) === -1) {
+                                this.graphStore.selectedConnectors.push(connector);
+                            }
                         }
+                        // don't hover other connectors while moving a connector
+                        if (!this.graphStore.movingConnector && !this.graphStore.selectionRect.visible) {
+                            this.graphStore.hoveredConnector = {node, connector, input, output};
+                        }
+                        break;
                     }
-                    // don't hover other connectors while moving a connector
-                    if (!this.graphStore.movingConnector && !this.graphStore.selectionRect.visible) {
-                        this.graphStore.hoveredConnector = {node, connector, input, output};
-                    }
-                    break;
                 }
             }
         }
@@ -239,10 +232,17 @@ export default class MouseAction {
                     connector.nodeId = this.graphStore.hoveredPort.node.id;
                     connector.graphId = this.graphStore.hoveredPort.node.graphId;
                     connector.version = this.graphStore.hoveredPort.node.version;
-                    edge.connectors.push(connector);
-                    if (node.linkedGraph) {
-                        linkInnerNodeEdges(node, this.graphStore.scheduler.instance);
+                    if (!connector.field || !connector.nodeId || !connector.graphId || !connector.version) {
+                        throw new Error('Invalid connector source ' + connector);
+                    }
+                    if (!edge.connectors.find((conn: any) => {
+                        return conn.field == connector.field
+                            && conn.nodeId == connector.nodeId
+                            && conn.graphId == connector.graphId
+                    })) {
+                        edge.connectors.push(connector);
                     }
+                    // silently ignore duplicate connectors
                 } else if (this.graphStore.hoveredPort.type === "output" && this.graphStore.addingConnector.type === 'input') {
                     // add connector to the hovered port's node
                     const node = this.graphStore.graphSnapshot.nodes.find((v: Node) => v.id === this.graphStore.hoveredPort.node.id);
@@ -251,7 +251,17 @@ export default class MouseAction {
                     connector.nodeId = this.graphStore.addingConnector.node.id;
                     connector.graphId = this.graphStore.addingConnector.node.graphId;
                     connector.version = this.graphStore.addingConnector.node.version;
-                    edge.connectors.push(connector);
+                    if (!connector.field || !connector.nodeId || !connector.graphId || !connector.version) {
+                        throw new Error('Invalid connector source ' + connector);
+                    }
+                    if (!edge.connectors.find((conn: any) => {
+                        return conn.field == connector.field
+                            && conn.nodeId == connector.nodeId
+                            && conn.graphId == connector.graphId
+                    })) {
+                        edge.connectors.push(connector);
+                    }
+                    // silently ignore duplicate connectors
                 }
                 this.graphStore.addingConnector = null;
                 this.applyGraphChanges("Add Connector");

packages/Input/store.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 import {useStore as useInputStore} from "@plastic-io/graph-editor-vue3-input";
-import {useStore as useGraphStore} from "@plastic-io/graph-editor-vue3-graph";
+import {useStore as useGraphStore, useGraphSnapshotStore} from "@plastic-io/graph-editor-vue3-graph";
 import {newId} from "@plastic-io/graph-editor-vue3-utils";
 import {keys} from "./keys";
 import MouseAction from "./mouse";
@@ -13,6 +13,7 @@ export const useStore = defineStore('input', {
     orchistratorStore: useOrchestratorStore(),
     graphStore: useGraphStore(),
     inputStore: useInputStore(),
+    graphSnapshotStore: useGraphSnapshotStore(),
     mouse: {
       lmb: false,
       rmb: false,