Tue Sep 12 16:06:00 CST 2023 inscode

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

src/canvas.vue

+<template>
+  <div class="canvas" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
+    <div v-for="(component, index) in components" :key="index" class="component" :style="{ left: component.x + 'px', top: component.y + 'px' }" :draggable="true" @dragstart="handleDragStart(component, $event)" @dragend="handleDragEnd(component, $event)">{{ component.text }}</div>
+    <svg>
+      <path v-for="(line, index) in lines" :key="index" :d="line.path" stroke="black" fill="transparent" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      components: [
+        { text: 'Component 1', x: 50, y: 50 },
+        { text: 'Component 2', x: 150, y: 50 },
+        { text: 'Component 3', x: 100, y: 150 }
+      ],
+      lines: []
+    };
+  },
+  methods: {
+    handleMouseDown(event) {
+      // Handle mouse down event
+    },
+    handleMouseMove(event) {
+      // Handle mouse move event
+    },
+    handleMouseUp(event) {
+      // Handle mouse up event
+    },
+    handleDragStart(component, event) {
+      // Handle drag start event
+    },
+    handleDragEnd(component, event) {
+      // Handle drag end event
+    }
+  }
+};
+</script>
+
+<style>
+.canvas {
+  position: relative;
+}
+
+.component {
+  position: absolute;
+  background-color: #ccc;
+  padding: 10px;
+}
+
+svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+</style>

src/main.js

 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './canvas.vue'
 
 import './assets/main.css'