Merge pull request #14 from shuangxunian/feature

Feature
shuangxunian · Dec 21, 2023 · 338b9d5 · 338b9d5
2 parents 460f474 + 01874ff
commit 338b9d5
Show file tree

Hide file tree

Showing 8 changed files with 1,007 additions and 961 deletions.
diff --git a/src/components/colorPicker/Area/Hue/index.vue b/src/components/colorPicker/Area/Hue/index.vue
@@ -1,75 +1,81 @@
 <template>
-    <div class="hue">
-        <div ref="hueRef" class="hue-area">
-            <div class="picker-cursor" :style="pointerStyle"></div>
-        </div>
+  <div class="hue">
+    <div ref="hueRef" class="hue-area" @click="hueAreaClick">
+      <div class="picker-cursor" :style="pointerStyle"></div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, onMounted, computed} from 'vue'
-import {isDefined, usePointerSwipe} from '@vueuse/core'
-import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue";
+import { isDefined, usePointerSwipe } from "@vueuse/core";
+import { Color } from "@/utils/color/color";
 
 const props = defineProps<{
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-}>()
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>();
 
-const hueRef = ref<HTMLDivElement>()
+const hueRef = ref<HTMLDivElement>();
 
 const state = reactive({
-    width: 0,
-})
+  width: 0,
+});
 
 const pointerStyle = computed(() => {
-    const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const {r, g, b} = new Color(new HSVA(props.hue, 1, 1, 1)).rgba
-    const offsetLeft = (((props.hue * state.width) / 360) | 0) - 8
-    return {
-        left: `${offsetLeft}px`,
-        // background: `rgb(${r}, ${g}, ${b})`,
-        background: color.rgb,
-    }
-})
+  const color = new Color(`hsva(${props.hue},1,1,1)`);
+  // const {r, g, b} = new Color(new HSVA(props.hue, 1, 1, 1)).rgba
+  const offsetLeft = (((props.hue * state.width) / 360) | 0) - 8;
+  return {
+    left: `${offsetLeft}px`,
+    // background: `rgb(${r}, ${g}, ${b})`,
+    background: color.rgb,
+  };
+});
 
 onMounted(() => {
-    if (isDefined(hueRef)) {
-        state.width = hueRef.value.clientWidth
-    }
-})
+  if (isDefined(hueRef)) {
+    state.width = hueRef.value.clientWidth;
+    rect = hueRef.value?.getBoundingClientRect()
+    props.updateColor(getColor(), "onChange");
+  }
+});
 
-let rect: DOMRect | undefined
+let rect: DOMRect | undefined;
 
 const getColor = () => {
-    if (!isDefined(rect)) return
-    const value = posEnd.x - rect.x
-    const color = new Color(`hsva(${(360 * value) / state.width},${props.saturation},${props.value},1)`)
-    // const hsva = new HSVA((360 * value) / state.width, props.saturation, props.value, 1)
-    // const {r, g, b} = new Color(hsva).rgba
-    return {
-        r:color.getRgba().r,
-        g:color.getRgba().g,
-        b:color.getRgba().b,
-        hue: color.hue,
-    }
+  if (!isDefined(rect)) return;
+  const value = Math.max(0, posEnd.x - rect.x)
+  const color = new Color(
+    `hsva(${(360 * value) / state.width},${props.saturation},${props.value},1)`
+  );
+  return {
+    r: color.getRgba().r,
+    g: color.getRgba().g,
+    b: color.getRgba().b,
+    hue: color.hue,
+  };
 }
 
-const {posEnd} = usePointerSwipe(hueRef, {
-    threshold: 0,
-    onSwipeStart() {
-        rect = hueRef.value?.getBoundingClientRect()
-        props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-        if (!isDefined(rect)) return
-        props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-        if (!isDefined(rect)) return
-        props.updateColor(getColor(), 'onEndChange')
-    },
-})
+const hueAreaClick = () => {
+  props.updateColor(getColor(), "onChange")
+}
+
+const { posEnd } = usePointerSwipe(hueRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = hueRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onStartChange");
+  },
+  onSwipe() {
+    if (!isDefined(rect)) return;
+    props.updateColor(getColor(), "onChange");
+  },
+  onSwipeEnd() {
+    if (!isDefined(rect)) return;
+    props.updateColor(getColor(), "onEndChange");
+  },
+});
 </script>
diff --git a/src/components/colorPicker/Area/Picker/index.vue b/src/components/colorPicker/Area/Picker/index.vue
@@ -1,93 +1,100 @@
 <template>
   <div ref="pickerAreaRef" class="spectrum-map" :style="pickerStyle">
-    <div class="spectrum"></div>
+    <div class="spectrum" @click="spectrumClick"></div>
     <div class="picker-cursor" :style="pointerStyle"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, computed } from 'vue'
-  import { clamp, isDefined, usePointerSwipe } from '@vueuse/core'
-  import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue";
+import { clamp, isDefined, usePointerSwipe } from "@vueuse/core";
+import { Color } from "@/utils/color/color";
 
-  const props = defineProps<{
-    red: number
-    green: number
-    blue: number
-    alpha: number
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-  }>()
+const props = defineProps<{
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>();
 
-  const pickerAreaRef = ref<HTMLDivElement>()
+const pickerAreaRef = ref<HTMLDivElement>();
 
-  const state = reactive({
-    width: 0,
-    height: 0,
-  })
+const state = reactive({
+  width: 0,
+  height: 0,
+});
 
-  const offsetLeft = computed(() => {
-    return Math.round(props.saturation * state.width - 8)
-  })
+const offsetLeft = computed(() => {
+  return Math.round(props.saturation * state.width - 8);
+});
 
-  const offsetTop = computed(() =>
-    Math.max(Math.round(state.height - props.value * state.height - 14), -6),
-  )
+const offsetTop = computed(() =>
+  Math.max(Math.round(state.height - props.value * state.height - 14), -6)
+);
 
-  const pointerStyle = computed(() => {
-    return {
-      backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
-      left: `${offsetLeft.value}px`,
-      top: `${offsetTop.value}px`,
-    }
-  })
+const pointerStyle = computed(() => {
+  return {
+    backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
+    left: `${offsetLeft.value}px`,
+    top: `${offsetTop.value}px`,
+  };
+});
 
-  const pickerStyle = computed(() => {
-      const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const color = new Color(new HSVA(props.hue, 1, 1, 1))
-    // const { r, g, b } = color.rgba
-    return {
-      backgroundColor: color.rgb,
-    }
-  })
+const pickerStyle = computed(() => {
+  const color = new Color(`hsva(${props.hue},1,1,1)`);
+  // const color = new Color(new HSVA(props.hue, 1, 1, 1))
+  // const { r, g, b } = color.rgba
+  return {
+    backgroundColor: color.rgb,
+  };
+});
 
-  onMounted(() => {
-    if (isDefined(pickerAreaRef)) {
-      state.width = pickerAreaRef.value.clientWidth
-      state.height = pickerAreaRef.value.clientHeight
-    }
-  })
+onMounted(() => {
+  if (isDefined(pickerAreaRef)) {
+    state.width = pickerAreaRef.value.clientWidth;
+    state.height = pickerAreaRef.value.clientHeight;
+    rect = pickerAreaRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onChange")
+  }
+});
 
-  let rect: DOMRect | undefined
+let rect: DOMRect | undefined;
 
-  const getColor = () => {
-    if (!isDefined(rect)) return
-    let x = clamp(posEnd.x - rect.x, 0, state.width)
-    let y = clamp(posEnd.y - rect.y, 0, state.height)
-    const saturation = x / state.width
-    const value = 1 - y / state.height
-      const color = new Color(`hsva(${props.hue},${saturation},${value},${props.alpha})`)
-    // const color = new Color(new HSVA(props.hue, saturation, value, props.alpha))
-    return {
-      ...color.getRgba(),
-      saturation,
-      value,
-    }
-  }
+const getColor = () => {
+  if (!isDefined(rect)) return;
+  let x = clamp(posEnd.x - rect.x, 0, state.width);
+  let y = clamp(posEnd.y - rect.y, 0, state.height);
+  const saturation = x / state.width;
+  const value = 1 - y / state.height;
+  const color = new Color(
+    `hsva(${props.hue},${saturation},${value},${props.alpha})`
+  );
+  return {
+    ...color.getRgba(),
+    saturation,
+    value,
+  };
+};
+
+const spectrumClick = (obj: any) => {
+  props.updateColor(getColor(), "onChange")
+}
 
-  const { posEnd } = usePointerSwipe(pickerAreaRef, {
-    threshold: 0,
-    onSwipeStart() {
-      rect = pickerAreaRef.value?.getBoundingClientRect()
-      props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-      props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-      props.updateColor(getColor(), 'onEndChange')
-    },
-  })
+const { posEnd } = usePointerSwipe(pickerAreaRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = pickerAreaRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onStartChange");
+  },
+  onSwipe() {
+    props.updateColor(getColor(), "onChange");
+  },
+  onSwipeEnd() {
+    props.updateColor(getColor(), "onEndChange");
+  },
+});
 </script>
diff --git a/src/components/colorPicker/Area/index.vue b/src/components/colorPicker/Area/index.vue
@@ -24,7 +24,7 @@
       :update-color="updateColor"
     />
 
-    <div class="preview">
+    <!-- <div class="preview">
       <Preview
         :red="red"
         :green="green"
@@ -39,7 +39,7 @@
         <Hue :hue="hue" :saturation="saturation" :value="value" :update-color="updateColor" />
         <Alpha :alpha="alpha" :red="red" :green="green" :blue="blue" :update-color="updateColor" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>