Merge pull request #41 from plastic-io/next

diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -36,7 +36,6 @@
     "flatted": "^3.2.7",
     "htmlparser2": "^8.0.1",
     "jshashes": "^1.0.8",
-    "jszip": "^3.10.1",
     "meriyah": "^4.3.3",
     "moment": "^2.29.4",
     "monaco-editor": "^0.34.1",

diff --git a/packages/Auth0AuthenticationProvider/main.ts b/packages/Auth0AuthenticationProvider/main.ts
@@ -48,6 +48,8 @@ export default class Auth0 extends EditorModule {
       title: 'Logout',
       component: 'v-icon',
       props: {
+        style: "cursor: pointer",
+        "help-topic": "logout",
         alt: 'Logout of your current session',
         title: 'Logout of your current session',
         icon: 'mdi-logout',

diff --git a/packages/CompileTemplate/importVue.ts b/packages/CompileTemplate/importVue.ts
@@ -46,7 +46,6 @@ const _resolveDynamicComponent = self.dependencies.vue.resolveDynamicComponent;
     let styles = blocks.descriptor.styles.map((style: any) => {
         const s = compiler.compileStyle({id, source: style.content} as any);
         errors.push(...s.errors);
-        console.log('s', s);
         return s.code;
     });
 

diff --git a/packages/Graph/GraphCanvas.vue b/packages/Graph/GraphCanvas.vue
@@ -1,9 +1,21 @@
 <template>
     <div>
+        <component
+            :is="graphPresentationComponent"
+            v-if="graphSnapshot && presentation"
+            :graph="graphSnapshot"
+        />
+        <component
+            v-for="(style, index) in styles"
+            :is="'style'"
+            v-if="graphSnapshot && presentation"
+            v-html="style"
+            :key="index"
+        />
         <div
             x-graph-canvas
             :style="graphCanvasStyle"
-            v-if="graphSnapshot"
+            v-if="graphSnapshot && !presentation"
             :key="graphUpdateVersion"
             @drop="drop($event)"
             @dragover="dragOver($event)"
@@ -20,7 +32,7 @@
                 :node="c.node"
             />
             <node
-                v-for="node in graphSnapshot.nodes"
+                v-for="node in sortedNodes"
                 :key="node.id + graphUpdateVersion"
                 :node="node"
                 :graph="graphSnapshot"
@@ -29,18 +41,44 @@
             <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 class="graph-errors" v-if="errors.length > 0">
+            <v-alert color="error" @click="showGraphCodeEditor = true">
+                <pre v-for="error in errors">{{error}}</pre>
+            </v-alert>
+        </div>
     </div>
 </template>
 <script lang="ts">
+import {markRaw} from "vue";
 import {mapWritableState, mapActions} from "pinia";
-import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 import {useStore as useGraphStore} from "./store";
+import compileTemplate from "@plastic-io/graph-editor-vue3-compile-template";
 import {useStore as usePreferencesStore} from "@plastic-io/graph-editor-vue3-preferences-provider";
+import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 import colors from "vuetify/lib/util/colors";
 export default {
   name: 'graph-canvas',
   data: () => {
     return {
+      compiledTemplate: null,
+      errors: [],
+      styles: [],
       innerHeight: 0,
       innerWidth: 0,
       positionLocationSaveTimeout: 750,
@@ -49,6 +87,9 @@ export default {
     }
   },
   watch: {
+    'graphSnapshot.properties.template'() {
+        this.loadTemplate();
+    },
     graphSnapshot: {
         handler() {
             // force updates in rewind mode
@@ -75,7 +116,22 @@ export default {
   methods: {
     ...mapActions(useGraphStore, [
         'drop',
+        'updateGraphFromSnapshot',
     ]),
+    async loadTemplate() {
+        const comp = await compileTemplate(this, this.graphSnapshot.id,
+            this.graphSnapshot.properties.template);
+        this.compiledTemplate = markRaw(comp);
+        this.errors = comp.errors;
+        this.styles = this.compiledTemplate.styles;
+        this.errors.forEach((err) => {
+            useOrchestratorStore().raiseError(this.graphSnapshot.id, err, 'vue');
+        });
+    },
+    async saveGraphTemplate(val) {
+        this.graphSnapshot.properties.template = val;
+        await this.updateGraphFromSnapshot('Update Graph Presentation Template');
+    },
     dragOver(e) {
         e.preventDefault();
         e.dataTransfer.dropEffect = "link";
@@ -91,7 +147,7 @@ export default {
       });
     },
   },
-  mounted() {
+  async mounted() {
     const resize = () => {
         this.innerWidth = window.innerWidth;
         this.innerHeight = window.innerHeight;
@@ -103,6 +159,10 @@ export default {
     this.view = view;
     document.addEventListener('resize', resize);
     resize();
+    if (!this.graphSnapshot.properties.template) {
+        this.graphSnapshot.properties.template = this.preferences!.defaultNewGraphTemplate;
+    }
+    await this.loadTemplate();
   },
   computed: {
     ...mapWritableState(usePreferencesStore, ['preferences']),
@@ -118,7 +178,20 @@ export default {
         'boundingRect',
         'presentation',
         'inRewindMode',
+        'showGraphCodeEditor',
     ]),
+    graphPresentationComponent() {
+        return this.compiledTemplate ? this.compiledTemplate.component : 'div';
+    },
+    sortedNodes() {
+        return this.graphSnapshot.nodes.sort((a, b) => {
+            return (a.properties.presentation.sort || 0)
+                - (b.properties.presentation.sort || 0);
+        });
+    },
+    graphTemplateValue() {
+        return this.graphSnapshot.properties.template;
+    },
     connectors: function () {
         let connectors = [];
         this.graphSnapshot.nodes.forEach((node) => {
@@ -228,4 +301,11 @@ export default {
         100px 100px,
         100px 100px;
 }
+.graph-errors {
+    position: fixed;
+    right: 10px;
+    top: 33px;
+    width: 33%;
+    min-width: 500px;
+}
 </style>
diff --git a/packages/Graph/clipboard.ts b/packages/Graph/clipboard.ts
@@ -1,5 +1,4 @@
 import type {Graph, Node} from "@plastic-io/plastic-io";
-import JSZip from 'jszip';
 import {newId} from "@plastic-io/graph-editor-vue3-utils";
 export default {
     async unzip(file: any, fileName: string): Promise<any> {

diff --git a/packages/Graph/mutation.ts b/packages/Graph/mutation.ts
@@ -396,6 +396,7 @@ export default {
           width: 300,
           timeout: 30000,
           logLevel: 2,
+          template: this.preferencesStore.preferences!.defaultNewGraphTemplate,
         } as any
       };
     },
@@ -691,6 +692,7 @@ export default {
                   x: pos.x,
                   y: pos.y,
                   z: 0 + this.preferencesStore.preferences!.newNodeOffset.z,
+                  order: this.graphSnapshot.nodes.length,
               },
           },
           template: {

diff --git a/packages/Graph/state.ts b/packages/Graph/state.ts
@@ -34,6 +34,7 @@ export default () => {
         graphSnapshotStore: useGraphSnapshotStore(),
         graphSnapshot: null as any,
         updatingSnapshotLocally: false,
+        showGraphCodeEditor: false,
         isNewGraph: false,
         rewindVersion: 0,
         keys: {} as Record<string, string>,

diff --git a/packages/GraphPropertiesPanel/GraphCodeMenu.vue b/packages/GraphPropertiesPanel/GraphCodeMenu.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-icon
+    title="Edit Graph Presentation Code"
+    @click="showGraphCodeEditor = !showGraphCodeEditor"
+    help-topic="toggleShowGraphCode"
+    :color="showGraphCodeEditor ? 'info' : ''"
+    class="mx-2"
+    style="cursor: pointer;"
+    >mdi-vuejs</v-icon>
+</template>
+<script lang="ts">
+  import {mapWritableState, mapActions, mapState} from "pinia";
+  import {useStore as useGraphStore} from "@plastic-io/graph-editor-vue3-graph";
+
+  export default {
+    name: 'graph-properties-menu',
+    computed: {
+      ...mapWritableState(useGraphStore, [
+          'showGraphCodeEditor',
+      ]),
+    }
+  }
+</script>
diff --git a/packages/GraphPropertiesPanel/GraphPropertiesMenu.vue b/packages/GraphPropertiesPanel/GraphPropertiesMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <v-menu>
     <template v-slot:activator="{props}">
-      <v-icon icon="mdi-graph" v-bind="props" class="ma-2"/>
+      <v-icon help-topic="graphProperties" icon="mdi-vector-polyline-edit" v-bind="props" class="ma-2"/>
     </template>
     <graph-properties @click.stop @mousemove.stop/>
   </v-menu>

diff --git a/packages/GraphPropertiesPanel/main.ts b/packages/GraphPropertiesPanel/main.ts
@@ -2,26 +2,36 @@ import type {App} from "vue";
 import type {Router} from "vue-router";
 import _GraphProperties from "./GraphProperties.vue";
 import GraphPropertiesMenu from "./GraphPropertiesMenu.vue";
+import GraphCodeMenu from "./GraphCodeMenu.vue";
 import EditorModule, {Plugin} from "@plastic-io/graph-editor-vue3-editor-module";
 import {useStore as useOrchestratorStore} from "@plastic-io/graph-editor-vue3-orchestrator";
 export default class GraphProperties extends EditorModule {
   constructor(config: Record<string, any>, app: App<Element>, hostRouter: Router) {
     super();
     app.component('graph-properties', _GraphProperties);
     app.component('graph-properties-menu', GraphPropertiesMenu);
+    app.component('graph-code-menu', GraphCodeMenu);
     const graphOrchestratorStore =  useOrchestratorStore();
 
-    const plugin = new Plugin({
+    graphOrchestratorStore.addPlugin({
       name: 'GraphPropertiesMenu',
       title: 'Graph Properties',
       component: 'graph-properties-menu',
       divider: true,
       helpTopic: 'graphProperties',
       type: 'system-bar-bottom',
-      order: 3,
+      order: -1,
     });
 
-    graphOrchestratorStore.addPlugin(plugin);
+    graphOrchestratorStore.addPlugin({
+      name: 'GraphCodeMenu',
+      title: 'Graph Code',
+      component: 'graph-code-menu',
+      divider: true,
+      helpTopic: 'graphCode',
+      type: 'system-bar-bottom',
+      order: 0,
+    });
 
   }
 };