update docs

doc/components/Header.vue

@@ -4,8 +4,7 @@
       <div class="container">
         <NuxtLink to="/" class="logo">Vue-diagrams</NuxtLink>
         <NuxtLink to="/guides">Guides</NuxtLink>
-        <a href="stories">StoryBook</a>
-        <a href="playground">REPL playground</a>
+        <a href="/playground">StoryBook</a>
         <span style="flex-grow: 1" />
         <a href="https://github.com/gwenaelp/vue-diagrams" style="display: flex; gap: 14px; align-items: center;">
           <img src="https://img.shields.io/github/forks/gwenaelp/vue-diagrams" alt="forks" />

doc/components/Repl.vue

@@ -22,7 +22,7 @@ const store = new ReplStore({
 
 
 const files: Record<string, (typeof imports)[keyof typeof imports]> = {}
-const imports = exampleImports[props.example]
+const imports = exampleImports[props.example].files
 const additionalImports: Object = ('additionalImports' in imports ? imports.additionalImports : {}) as Object;
 
 for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
@@ -56,9 +56,9 @@ watch(() => props.example, async (newExample) => {
   // You may want to update the REPL environment or take other actions
 
   // For example, update the files and imports based on the new example
-  let newImports = exampleImports[newExample];
+  let newImports = exampleImports[newExample].files;
   const newFiles: Record<string, (typeof imports)[keyof typeof imports]> = {};
-  let newCss = '';
+  let newCss = `@import url('https://unpkg.com/vue-diagrams@latest/dist/style.css')`;
 
   for (const example of Object.keys(newImports).filter((i) => i !== 'additionalImports')) {
     if (example.includes('css')) {

doc/examples/customNodes/App.vue

@@ -0,0 +1,37 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script setup>
+import CustomNode from "./CustomNode.vue";
+import { getCurrentInstance } from 'vue';
+
+getCurrentInstance().appContext.components['vue-diagrams-node-custom'] = CustomNode;
+
+</script>
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80, { type: 'custom' });
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    diagramModel.addLink(node2OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>

doc/examples/customNodes/CustomNode.vue

@@ -0,0 +1,40 @@
+<template>
+  <g>
+    <rect
+      fill="#CC0000"
+      x="5"
+      y="15"
+      :width="nodeModel.width"
+      :height="nodeModel.height"
+    />
+    <text
+      :x="10" :y="30"
+      :class="nodeModel.options.editableTitle ? 'title-editable': ''"
+      font-size="14"
+      font-weight="bold"
+      fill="#000000"
+      ref="title"
+      @click="nodeModel.options.editableTitle ? $parent.$parent.$parent.editText(nodeModel, 'title', $refs.title) : undefined"
+    >
+      {{nodeModel.title}}
+    </text>
+
+    <g class="prevent-node-drag">
+      <slot />
+    </g>
+  </g>
+</template>
+<script>
+export default {
+  props: {
+    nodeModel: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

doc/examples/customNodes/index.ts

@@ -0,0 +1,10 @@
+import App from './App.vue?raw'
+import CustomNode from './CustomNode.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+    'CustomNode.vue': CustomNode,
+  }
+};

doc/examples/customPortPosition/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode('test2', 300, 200);
+    const inPort = node1.addInPort('in', { y: 80 });
+    const outPort = node1.addOutPort('out', { y: 80 });
+
+    const node2 = diagramModel.addNode('test', 10, 300, 144, 120);
+    const node2OutPort = node2.addOutPort('testOut', { y: 80 });
+    node2.color = '#00cc66';
+
+    diagramModel.addLink(node2OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>

doc/examples/customPortPosition/index.ts

@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};

doc/examples/dropToCreateNodes/App.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="node" draggable="true">Drop this node</div>
+  <div @drop="onDrop" @dragover.prevent @dragenter.prevent>
+    <diagram :model="model" width="400" height="400" ref="diagram" />
+  </div>
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    return {
+      model: diagramModel
+    };
+  },
+  methods: {
+    onDrop(event) {
+      const pan = this.$refs.diagram.spz.getPan();
+      const zoom = this.$refs.diagram.spz.getZoom();
+      const x = pan.x * (1/zoom) * -1;
+      const y = pan.y * (1/zoom) * -1;
+      const n = this.model.addNode('Node', x, y);
+      n.addInPort('In');
+      n.addOutPort('Out')
+    },
+  }
+};
+</script>
+<style scoped>
+  .node {
+    display: block;
+    width: 72px;
+    height: 100px;
+    border: 2px solid black;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-bottom: 20px;
+    cursor: grab;
+  }
+</style>

doc/examples/dropToCreateNodes/index.ts

@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  }
+};

doc/examples/editModes/App.vue

@@ -0,0 +1,70 @@
+<template>
+  <button :class="mode === 'move' ? 'is-active': ''" @click="mode = 'move'">
+    Move
+  </button>
+  <button :class="mode === 'select' ? 'is-active': ''" @click="mode = 'select'">
+    Select
+  </button>
+  <diagram ref="diagram" :model="model" height="400" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+    node3.deletable = false;
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel,
+      diagram: undefined,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.diagram = this.$refs.diagram;
+    });
+  },
+  computed: {
+    mode: {
+      get() {
+        return this.diagram ? this.diagram.mode : undefined;
+      },
+      set(v) {
+        if(this.diagram)
+          this.diagram.mode = v;
+      }
+    },
+  },
+};
+
+</script>
+<style scoped>
+  button {
+    color: blue;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  button.is-active {
+    font-weight: bold;
+  }
+</style>

doc/examples/editModes/index.ts

@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Advanced usage',
+  files: {
+    'App.vue': App,
+  }
+};

doc/examples/editableTitles/images/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("Image 1", 300, 200, 120, 120, {
+      type: 'image',
+      image: 'https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+    });
+
+    const node2 = diagramModel.addNode("Image 2", 100, 100, 160, 120, {
+      type: 'image',
+      image: 'https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
+    });
+
+    const inPort = node1.addInPort();
+    const outPort = node2.addOutPort();
+    diagramModel.addLink(outPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>

doc/examples/editableTitles/images/index.ts

@@ -0,0 +1 @@
+export { default as App } from './App.vue?raw'

doc/examples/editableTitles/index.ts

@@ -1 +1,8 @@
-export { default as App } from './App.vue?raw'
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};

doc/examples/gridSnap/App.vue

@@ -0,0 +1,36 @@
+<template>
+  <diagram :model="model" gridSnap="16" />
+</template>
+
+<script>
+import { Diagram } from "vue-diagrams";
+
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+    node3.deletable = false;
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>

doc/examples/gridSnap/index.ts

@@ -0,0 +1,8 @@
+import App from './App.vue?raw'
+
+export default {
+  section: 'Simple usage',
+  files: {
+    'App.vue': App,
+  }
+};