feat: drag to set color (close: #47)

pearmini · Oct 27, 2021 · 53b2642 · 53b2642
1 parent b53ad60
commit 53b2642
Show file tree

Hide file tree

Showing 14 changed files with 199 additions and 188 deletions.
diff --git a/src/components/AttributeTree.vue b/src/components/AttributeTree.vue
@@ -5,24 +5,21 @@
       :options="child"
       :key="child.key"
       :values="values"
-      :colors="colors"
       @update="handleUpdate"
-      @color="handleUpdateColor"
     />
   </div>
   <collapse
     v-else-if="options.type === 'collapse'"
     :name="options.name"
     :defaultOpen="options.defaultOpen"
+    :indent="options.indent"
   >
     <attribute-tree
       v-for="child in options.children"
       :options="child"
       :key="child.key"
       :values="values"
-      :colors="colors"
       @update="handleUpdate"
-      @color="handleUpdateColor"
     />
   </collapse>
   <group v-else-if="options.type === 'section'" :name="options.name">
@@ -31,9 +28,7 @@
       :options="child"
       :key="child.key"
       :values="values"
-      :colors="colors"
       @update="handleUpdate"
-      @color="handleUpdateColor"
     />
   </group>
   <input-number
@@ -44,14 +39,8 @@
     :step="options.step || 1"
     :name="options.name"
   />
-  <color-palette
-    v-else-if="options.type === 'color palette'"
-    :name="options.name"
-    :groups="options.groups"
-    :colors="colors"
-    @input="handleInputColor"
-    @update="handleUpdateColor"
-  />
+  <color-palette v-else-if="options.type === 'color-palette'" />
+  <color-field v-else-if="options.type === 'color'" v-model="value" :name="options.name" />
   <feild v-else :name="options.name" :flex="options.type === 'image' ? 'col' : 'row'">
     <el-input
       v-if="options.type === 'text'"
@@ -65,7 +54,6 @@
       v-model="value"
       size="small"
     />
-    <el-color-picker v-if="options.type === 'color'" v-model="value" size="small" />
     <image-picker v-if="options.type === 'image'" v-model="value" />
     <el-select v-if="options.type === 'select'" v-model="value" size="small" filterable>
       <el-option
@@ -91,22 +79,31 @@
 </template>
 
 <script>
-import { get, deepCopy } from "../utils/object";
+import { get } from "../utils/object";
 import Feild from "./Field.vue";
 import Group from "./Group.vue";
 import ImagePicker from "./ImagePicker.vue";
 import InputNumber from "./InputNumber.vue";
 import Collapse from "./Collapse.vue";
 import SymbolInput from "./SymbolInput.vue";
-import ColorPalette from "./ColorPalette";
+import ColorPalette from "./ColorPalette.vue";
+import ColorField from "./ColorField.vue";
 
 export default {
   name: "attribute-tree",
-  components: { Feild, Group, ImagePicker, InputNumber, Collapse, SymbolInput, ColorPalette },
+  components: {
+    Feild,
+    Group,
+    ImagePicker,
+    InputNumber,
+    Collapse,
+    SymbolInput,
+    ColorPalette,
+    ColorField,
+  },
   props: {
     options: Object,
     values: Object,
-    colors: [],
   },
   computed: {
     value: {
@@ -122,15 +119,6 @@ export default {
         // 不直接改变 props 的值
         this.handleUpdate({ key, value: newValue });
 
-        // 更新全局 color picker 里面对应的属性
-        const newColors = deepCopy(this.colors);
-        for (const color of newColors) {
-          if (color.attribute === key) {
-            color.attribute = "";
-          }
-        }
-        this.handleUpdateColor(newColors);
-
         // 更新相关的值
         for (const { trigger, actions } of relations) {
           if (trigger === newValue) {
@@ -149,12 +137,6 @@ export default {
     handleUpdate(obj) {
       this.$emit("update", obj);
     },
-    handleUpdateColor(colors) {
-      this.$emit("color", colors);
-    },
-    handleInputColor(key, value) {
-      this.handleUpdate({ key, value });
-    },
   },
 };
 </script>

diff --git a/src/components/Collapse.vue b/src/components/Collapse.vue
@@ -6,7 +6,13 @@
       </span>
     </field>
     <el-collapse-transition>
-      <div class="collapse-children" v-show="open">
+      <div
+        class="collapse-children"
+        v-show="open"
+        :style="{
+          paddingLeft: indent ? '1em' : 0,
+        }"
+      >
         <slot></slot>
       </div>
     </el-collapse-transition>
@@ -21,6 +27,10 @@ export default {
   },
   props: {
     name: String,
+    indent: {
+      type: Boolean,
+      default: true,
+    },
     defaultOpen: {
       type: Boolean,
       default: true,
@@ -52,7 +62,6 @@ export default {
 </script>
 <style>
 .collapse-children {
-  padding-left: 1em;
   overflow: hidden;
   will-change: height;
 }

diff --git a/src/components/ColorField.vue b/src/components/ColorField.vue
@@ -0,0 +1,50 @@
+<template>
+  <div
+    @dragover="handleDragover"
+    @drop="handleDrop"
+    @dragleave="over = false"
+    :style="{
+      background: over ? '#eee' : 'white',
+    }"
+  >
+    <field :name="name">
+      <el-color-picker v-model="color" size="small" />
+    </field>
+  </div>
+</template>
+
+<script>
+import Field from "./Field.vue";
+export default {
+  props: {
+    name: String,
+    value: String,
+  },
+  components: { Field },
+  data() {
+    return {
+      over: false,
+    };
+  },
+  computed: {
+    color: {
+      get() {
+        return this.value;
+      },
+      set(newColor) {
+        this.$emit("input", newColor);
+      },
+    },
+  },
+  methods: {
+    handleDragover(e) {
+      e.preventDefault(); // 取消这个事件才能触发 drop 事件
+      this.over = true;
+    },
+    handleDrop(e) {
+      const color = e.dataTransfer.getData("drag-color");
+      this.$emit("input", color);
+    },
+  },
+};
+</script>