From f7260135aa5e31db5a46c0ebc20c3e5f785cf76e Mon Sep 17 00:00:00 2001
From: qq_32624153 <qq_32624153@devide>
Date: Tue, 12 Sep 2023 16:06:00 +0800
Subject: [PATCH] Tue Sep 12 16:06:00 CST 2023 inscode

---
 .inscode       |  4 ++++
 src/canvas.vue | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/main.js    |  2 +-
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/canvas.vue

diff --git a/.inscode b/.inscode
index 70c7853..9fec957 100644
--- a/.inscode
+++ b/.inscode
@@ -1,4 +1,5 @@
 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"
diff --git a/src/canvas.vue b/src/canvas.vue
new file mode 100644
index 0000000..35b10a4
--- /dev/null
+++ b/src/canvas.vue
@@ -0,0 +1,59 @@
+<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>
diff --git a/src/main.js b/src/main.js
index 90e6400..99c2dd5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './canvas.vue'
 
 import './assets/main.css'
 
-- 
GitLab