canvas-color-disc 1.1.2 → 1.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018 Vasco Asturiano
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018 Vasco Asturiano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,87 +1,81 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: chengzan
- * @Date: 2021-10-16 15:40:48
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-10-16 17:04:00
--->
-# production
-
-> 一个Vue的canvas色盘选择组件,支持移动端和PC端
-
-
-![avatar](https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png)
-
-<img src="https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png" width="50%">
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm i canvas-color-disc --save
-```
-yarn
-``` bash
-# install dependencies
-yarn add canvas-color-disc
-```
-main.js添加组件
-```
-import CanvasColorDisc from 'canvas-color-disc'
-Vue.use(CanvasColorDisc)
-
-```
-
-```vue
-<template>
-    <div id="app">
-        <p>RGB: {{RGB}}</p>
-        <p>Hex: {{Hex}}</p>
-        <CanvasColorDisc
-            id="0"
-            :color="RGB"
-            :width="300"
-            :height="240"
-            @change="changeColor"></CanvasColorDisc>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'App',
-    data() {
-        return {
-            // RGB: { r: 255, g:255, b:255 },
-            RGB: '#ff0000',
-            Hex: '',
-        }
-    },
-    methods: {
-        changeColor(newRgb, utils) {
-            this.RGB = newRgb
-            this.Hex = `#${utils.RGBToHex(`(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`)}`.toUpperCase()
-        },
-    },
-}
-</script>
-
-<style>
-    html {
-        font-family: "Microsoft Sans Serif", Arial, Helvetica, sans-serif
-    }
-</style>
-```
-
-| 参数        | 说明    | 类型                                        | 默认值 |
-| ------------- | ----------- | ----------------------------------------------- | ------ |
-| id | canvas id拼接  | String                              | "0" |
-| color | 默认颜色 | Object ｜ String(如："#FF0000") | {"r": 255, "g": 255, "b": 255} |
-| width | canvas画板宽度 |    Number                      | window.innerWidth * 0.7 |
-| height | canvas画板高度 | Number                         | window.innerWidth * 0.78 |
-
-
-
-| 事件        | 说明    | 回调参数 |
-| ------------- | ----------- | ----------------------------------------------- |
-| change | 选择结束回调 | rgb: 颜色, Util: 内置util，可以转换颜色（Util.hvsToRGB、Util.RGBToHvs、Util.RGBToHex、Util.hexToRGB、Util.RGBToHsv、Util.hsvToRgb） |
+# canvas-color-disc
+
+> 一个基于 Vue + Canvas 的圆形色盘选择组件，支持移动端和 PC 端
+
+
+![avatar](https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png)
+
+<img src="https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png" width="50%">
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+```
+
+``` bash
+# serve examples at localhost:5173
+npm run dev
+```
+
+``` bash
+# library build (ES + UMD) to dist/
+npm run build
+```
+
+## 使用
+
+```vue
+<template>
+    <div id="app">
+        <p>RGB: {{ rgb }}</p>
+        <canvas-color-disc
+            v-model="rgb"
+            :width="300"
+            :height="300"
+            @change="onChange"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            rgb: { r: 255, g: 255, b: 255 }
+        }
+    },
+    methods: {
+        onChange (rgb) {
+            console.log('change:', rgb)
+        }
+    }
+}
+</script>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前颜色，支持 `v-model` | Object `{ r, g, b }` | `{ r: 255, g: 255, b: 255 }` |
+| width | 画布宽度（CSS 像素） | Number | 300 |
+| height | 画布高度（CSS 像素） | Number | 300 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | 颜色变化时实时触发（配合 `v-model` 使用） | `{ r, g, b }` |
+| change | 一次选择（拖动/点击）结束时触发 | `{ r, g, b }` |
+
+### 说明
+
+- 色盘为 HSV 模型：色相取角度、饱和度取离圆心的半径比例，明度固定为最高，圆心为白色
+- `width`/`height` 为画布逻辑尺寸（CSS 像素），色盘半径自动按 `min(width, height) / 2 - 18` 适配，圆心居中
+- 取色坐标会自动换算回画布逻辑坐标：即使画布被外部 CSS 缩放（如全局 `canvas { max-width: 100% }`、父容器压缩、transform 缩放），取色位置仍与视觉位置一致
+- 点击或拖动超出色盘范围时，选择器会钉在圆周上（取圆周对应位置的颜色）
+- 基于 Pointer Events，鼠标与触摸的操作方式一致

package/dist/canvas-color-disc.es.js

@@ -0,0 +1,228 @@
+var T = Object.defineProperty;
+var _ = Object.getOwnPropertySymbols;
+var U = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var P = (t, e, s) => e in t ? T(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, C = (t, e) => {
+  for (var s in e || (e = {}))
+    U.call(e, s) && P(t, s, e[s]);
+  if (_)
+    for (var s of _(e))
+      k.call(e, s) && P(t, s, e[s]);
+  return t;
+};
+function D(t, e, s) {
+  const o = (t % 360 + 360) % 360, n = e / 100, i = s / 100, a = Math.floor(o / 60), c = o / 60 - a, r = i * (1 - n), h = i * (1 - n * c), g = i * (1 - n * (1 - c));
+  let u = 0, d = 0, l = 0;
+  switch (a) {
+    case 0:
+      u = i, d = g, l = r;
+      break;
+    case 1:
+      u = h, d = i, l = r;
+      break;
+    case 2:
+      u = r, d = i, l = g;
+      break;
+    case 3:
+      u = r, d = h, l = i;
+      break;
+    case 4:
+      u = g, d = r, l = i;
+      break;
+    default:
+      u = i, d = r, l = h;
+  }
+  return {
+    r: Math.round(u * 255),
+    g: Math.round(d * 255),
+    b: Math.round(l * 255)
+  };
+}
+function z(t, e, s) {
+  const o = t / 255, n = e / 255, i = s / 255, a = Math.max(o, n, i), c = Math.min(o, n, i), r = a - c;
+  let h = 0;
+  return r !== 0 && (a === o ? h = 60 * ((n - i) / r % 6) : a === n ? h = 60 * ((i - o) / r + 2) : h = 60 * ((o - n) / r + 4), h < 0 && (h += 360)), {
+    h,
+    s: a === 0 ? 0 : r / a * 100,
+    v: a * 100
+  };
+}
+function $(t, e, s, o, n) {
+  const i = t - s, a = e - o, c = Math.sqrt(i * i + a * a);
+  let r = -Math.atan2(a, i) * 180 / Math.PI;
+  return r < 0 && (r += 360), {
+    h: r,
+    s: n === 0 ? 0 : Math.min(c / n, 1) * 100,
+    dist: c
+  };
+}
+function A(t, e, s, o, n) {
+  const i = -t * Math.PI / 180, a = e / 100 * n;
+  return {
+    x: s + Math.cos(i) * a,
+    y: o + Math.sin(i) * a
+  };
+}
+function X(t, e, s, o, n) {
+  const i = t.canvas, a = i.width, c = i.height, r = e * n, h = s * n, g = o * n, u = g * g, d = new Array(360);
+  for (let f = 0; f < 360; f++)
+    d[f] = D(f, 100, 100);
+  const l = t.createImageData(a, c), v = l.data;
+  for (let f = 0; f < c; f++) {
+    const m = f - h, O = m * m;
+    for (let b = 0; b < a; b++) {
+      const w = b - r, x = w * w + O;
+      if (x > u)
+        continue;
+      const p = (f * a + b) * 4, R = Math.sqrt(x) / g;
+      let I = -Math.atan2(m, w) * 180 / Math.PI;
+      I < 0 && (I += 360);
+      const M = d[Math.round(I) % 360];
+      v[p] = 255 + (M.r - 255) * R, v[p + 1] = 255 + (M.g - 255) * R, v[p + 2] = 255 + (M.b - 255) * R, v[p + 3] = 255;
+    }
+  }
+  t.putImageData(l, 0, 0);
+}
+function Y(t, e, s, o, n, i, a, c) {
+  var r = typeof t == "function" ? t.options : t;
+  return e && (r.render = e, r.staticRenderFns = s, r._compiled = !0), r._scopeId = "data-v-" + i, {
+    exports: t,
+    options: r
+  };
+}
+const q = 15, E = 12, N = 18, F = 8;
+function S(t) {
+  const e = t || {};
+  return {
+    r: typeof e.r == "number" ? e.r : 255,
+    g: typeof e.g == "number" ? e.g : 255,
+    b: typeof e.b == "number" ? e.b : 255
+  };
+}
+function B(t, e) {
+  return !!t && !!e && t.r === e.r && t.g === e.g && t.b === e.b;
+}
+const j = {
+  name: "CanvasColorDisc",
+  props: {
+    // 当前颜色 {r, g, b}，支持 v-model
+    value: {
+      type: Object,
+      default: () => ({ r: 255, g: 255, b: 255 })
+    },
+    // 画布宽高（CSS 像素）
+    width: {
+      type: Number,
+      default: 300
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  data() {
+    return {
+      rgb: S(this.value),
+      centerX: 0,
+      centerY: 0,
+      radius: 0,
+      dragging: !1
+    };
+  },
+  watch: {
+    value: {
+      deep: !0,
+      handler(t) {
+        B(t, this.rgb) || (this.rgb = S(t), this.drawSelector());
+      }
+    },
+    width() {
+      this.rebuildCanvas();
+    },
+    height() {
+      this.rebuildCanvas();
+    }
+  },
+  mounted() {
+    this.canvasRect = null, this.rafId = 0, typeof ResizeObserver != "undefined" && (this.canvasResizeObserver = new ResizeObserver(() => {
+      this.canvasRect = null;
+    }), this.canvasResizeObserver.observe(this.$refs.selectorCanvas)), this.rebuildCanvas();
+  },
+  beforeDestroy() {
+    this.rafId && (cancelAnimationFrame(this.rafId), this.rafId = 0), this.canvasResizeObserver && (this.canvasResizeObserver.disconnect(), this.canvasResizeObserver = null);
+  },
+  methods: {
+    // 初始化画布尺寸并重绘色盘与选择器
+    rebuildCanvas() {
+      this.$nextTick(() => {
+        this.setupCanvas(), this.drawSelector();
+      });
+    },
+    setupCanvas() {
+      const t = window.devicePixelRatio || 1, e = this.$refs.discCanvas, s = this.$refs.selectorCanvas;
+      [e, s].forEach((n) => {
+        n.style.width = this.width + "px", n.style.height = this.height + "px", n.width = Math.round(this.width * t), n.height = Math.round(this.height * t);
+      }), this.centerX = this.width / 2, this.centerY = this.height / 2, this.radius = Math.max(Math.min(this.width, this.height) / 2 - N, 1), this.discCtx = e.getContext("2d"), this.selectorCtx = s.getContext("2d"), this.discCtx.setTransform(t, 0, 0, t, 0, 0), this.selectorCtx.setTransform(t, 0, 0, t, 0, 0), X(this.discCtx, this.centerX, this.centerY, this.radius, t), this.canvasRect = null;
+    },
+    // 绘制选择器圆环
+    drawSelector() {
+      const t = this.selectorCtx;
+      if (!t)
+        return;
+      const e = z(this.rgb.r, this.rgb.g, this.rgb.b), s = A(e.h, e.s, this.centerX, this.centerY, this.radius);
+      t.clearRect(0, 0, this.width, this.height), t.save(), t.shadowOffsetX = 1, t.shadowOffsetY = 3, t.shadowColor = "rgba(100, 100, 100, 0.5)", t.shadowBlur = 5, t.beginPath(), t.arc(s.x, s.y, q, 0, Math.PI * 2), t.fillStyle = "#eee", t.fill(), t.restore(), t.save(), t.beginPath(), t.arc(s.x, s.y, E, 0, Math.PI * 2), t.fillStyle = "rgb(" + this.rgb.r + ", " + this.rgb.g + ", " + this.rgb.b + ")", t.fill(), t.restore();
+    },
+    onPointerDown(t) {
+      t.preventDefault();
+      const e = this.$refs.selectorCanvas;
+      this.canvasRect = e.getBoundingClientRect(), this.dragging = !0;
+      try {
+        e.setPointerCapture(t.pointerId);
+      } catch (s) {
+      }
+      this.pickColor(t.clientX, t.clientY);
+    },
+    onPointerMove(t) {
+      this.dragging && this.pickColor(t.clientX, t.clientY);
+    },
+    onPointerUp() {
+      this.dragging && (this.dragging = !1, this.flushUpdate(), this.$emit("change", C({}, this.rgb)));
+    },
+    // 根据触点坐标更新当前颜色
+    pickColor(t, e) {
+      this.canvasRect || (this.canvasRect = this.$refs.selectorCanvas.getBoundingClientRect());
+      const s = this.canvasRect;
+      if (!s || s.width === 0 || s.height === 0)
+        return;
+      const o = (t - s.left) * this.width / s.width, n = (e - s.top) * this.height / s.height, i = $(o, n, this.centerX, this.centerY, this.radius);
+      this.rgb = i.dist < F ? { r: 255, g: 255, b: 255 } : D(i.h, i.s, 100), this.scheduleUpdate();
+    },
+    // 用 requestAnimationFrame 合并高频的 pointermove 更新
+    scheduleUpdate() {
+      this.rafId || (this.rafId = requestAnimationFrame(() => {
+        this.rafId = 0, this.drawSelector(), this.$emit("input", C({}, this.rgb));
+      }));
+    },
+    // 立即提交尚未执行的更新（交互结束时调用）
+    flushUpdate() {
+      this.rafId && (cancelAnimationFrame(this.rafId), this.rafId = 0, this.drawSelector(), this.$emit("input", C({}, this.rgb)));
+    }
+  }
+};
+var H = function() {
+  var e = this, s = e._self._c;
+  return s("div", { staticClass: "canvas-color-disc" }, [s("canvas", { ref: "discCanvas", staticClass: "disc-canvas", attrs: { width: e.width, height: e.height } }), s("canvas", { ref: "selectorCanvas", staticClass: "disc-canvas disc-selector", attrs: { width: e.width, height: e.height }, on: { pointerdown: e.onPointerDown, pointermove: e.onPointerMove, pointerup: e.onPointerUp, pointercancel: e.onPointerUp } })]);
+}, L = [], G = /* @__PURE__ */ Y(
+  j,
+  H,
+  L,
+  !1,
+  null,
+  "e9569c49"
+);
+const y = G.exports;
+y.install = (t) => {
+  t.component(y.name, y);
+};
+export {
+  y as default
+};

package/dist/canvas-color-disc.umd.js

@@ -0,0 +1 @@
+(function(c,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h():typeof define=="function"&&define.amd?define(h):(c=typeof globalThis!="undefined"?globalThis:c||self,c.CanvasColorDisc=h())})(this,function(){"use strict";var H=Object.defineProperty;var T=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var O=(c,h,d)=>h in c?H(c,h,{enumerable:!0,configurable:!0,writable:!0,value:d}):c[h]=d,y=(c,h)=>{for(var d in h||(h={}))L.call(h,d)&&O(c,d,h[d]);if(T)for(var d of T(h))G.call(h,d)&&O(c,d,h[d]);return c};function c(t,e,s){const o=(t%360+360)%360,n=e/100,i=s/100,a=Math.floor(o/60),u=o/60-a,r=i*(1-n),l=i*(1-n*u),p=i*(1-n*(1-u));let v=0,f=0,g=0;switch(a){case 0:v=i,f=p,g=r;break;case 1:v=l,f=i,g=r;break;case 2:v=r,f=i,g=p;break;case 3:v=r,f=l,g=i;break;case 4:v=p,f=r,g=i;break;default:v=i,f=r,g=l}return{r:Math.round(v*255),g:Math.round(f*255),b:Math.round(g*255)}}function h(t,e,s){const o=t/255,n=e/255,i=s/255,a=Math.max(o,n,i),u=Math.min(o,n,i),r=a-u;let l=0;return r!==0&&(a===o?l=60*((n-i)/r%6):a===n?l=60*((i-o)/r+2):l=60*((o-n)/r+4),l<0&&(l+=360)),{h:l,s:a===0?0:r/a*100,v:a*100}}function d(t,e,s,o,n){const i=t-s,a=e-o,u=Math.sqrt(i*i+a*a);let r=-Math.atan2(a,i)*180/Math.PI;return r<0&&(r+=360),{h:r,s:n===0?0:Math.min(u/n,1)*100,dist:u}}function U(t,e,s,o,n){const i=-t*Math.PI/180,a=e/100*n;return{x:s+Math.cos(i)*a,y:o+Math.sin(i)*a}}function k(t,e,s,o,n){const i=t.canvas,a=i.width,u=i.height,r=e*n,l=s*n,p=o*n,v=p*p,f=new Array(360);for(let b=0;b<360;b++)f[b]=c(b,100,100);const g=t.createImageData(a,u),m=g.data;for(let b=0;b<u;b++){const I=b-l,B=I*I;for(let w=0;w<a;w++){const M=w-r,D=M*M+B;if(D>v)continue;const R=(b*a+w)*4,x=Math.sqrt(D)/p;let _=-Math.atan2(I,M)*180/Math.PI;_<0&&(_+=360);const P=f[Math.round(_)%360];m[R]=255+(P.r-255)*x,m[R+1]=255+(P.g-255)*x,m[R+2]=255+(P.b-255)*x,m[R+3]=255}}t.putImageData(g,0,0)}function z(t,e,s,o,n,i,a,u){var r=typeof t=="function"?t.options:t;return e&&(r.render=e,r.staticRenderFns=s,r._compiled=!0),r._scopeId="data-v-"+i,{exports:t,options:r}}const $=15,A=12,X=18,Y=8;function S(t){const e=t||{};return{r:typeof e.r=="number"?e.r:255,g:typeof e.g=="number"?e.g:255,b:typeof e.b=="number"?e.b:255}}function q(t,e){return!!t&&!!e&&t.r===e.r&&t.g===e.g&&t.b===e.b}const E={name:"CanvasColorDisc",props:{value:{type:Object,default:()=>({r:255,g:255,b:255})},width:{type:Number,default:300},height:{type:Number,default:300}},data(){return{rgb:S(this.value),centerX:0,centerY:0,radius:0,dragging:!1}},watch:{value:{deep:!0,handler(t){q(t,this.rgb)||(this.rgb=S(t),this.drawSelector())}},width(){this.rebuildCanvas()},height(){this.rebuildCanvas()}},mounted(){this.canvasRect=null,this.rafId=0,typeof ResizeObserver!="undefined"&&(this.canvasResizeObserver=new ResizeObserver(()=>{this.canvasRect=null}),this.canvasResizeObserver.observe(this.$refs.selectorCanvas)),this.rebuildCanvas()},beforeDestroy(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0),this.canvasResizeObserver&&(this.canvasResizeObserver.disconnect(),this.canvasResizeObserver=null)},methods:{rebuildCanvas(){this.$nextTick(()=>{this.setupCanvas(),this.drawSelector()})},setupCanvas(){const t=window.devicePixelRatio||1,e=this.$refs.discCanvas,s=this.$refs.selectorCanvas;[e,s].forEach(n=>{n.style.width=this.width+"px",n.style.height=this.height+"px",n.width=Math.round(this.width*t),n.height=Math.round(this.height*t)}),this.centerX=this.width/2,this.centerY=this.height/2,this.radius=Math.max(Math.min(this.width,this.height)/2-X,1),this.discCtx=e.getContext("2d"),this.selectorCtx=s.getContext("2d"),this.discCtx.setTransform(t,0,0,t,0,0),this.selectorCtx.setTransform(t,0,0,t,0,0),k(this.discCtx,this.centerX,this.centerY,this.radius,t),this.canvasRect=null},drawSelector(){const t=this.selectorCtx;if(!t)return;const e=h(this.rgb.r,this.rgb.g,this.rgb.b),s=U(e.h,e.s,this.centerX,this.centerY,this.radius);t.clearRect(0,0,this.width,this.height),t.save(),t.shadowOffsetX=1,t.shadowOffsetY=3,t.shadowColor="rgba(100, 100, 100, 0.5)",t.shadowBlur=5,t.beginPath(),t.arc(s.x,s.y,$,0,Math.PI*2),t.fillStyle="#eee",t.fill(),t.restore(),t.save(),t.beginPath(),t.arc(s.x,s.y,A,0,Math.PI*2),t.fillStyle="rgb("+this.rgb.r+", "+this.rgb.g+", "+this.rgb.b+")",t.fill(),t.restore()},onPointerDown(t){t.preventDefault();const e=this.$refs.selectorCanvas;this.canvasRect=e.getBoundingClientRect(),this.dragging=!0;try{e.setPointerCapture(t.pointerId)}catch(s){}this.pickColor(t.clientX,t.clientY)},onPointerMove(t){this.dragging&&this.pickColor(t.clientX,t.clientY)},onPointerUp(){this.dragging&&(this.dragging=!1,this.flushUpdate(),this.$emit("change",y({},this.rgb)))},pickColor(t,e){this.canvasRect||(this.canvasRect=this.$refs.selectorCanvas.getBoundingClientRect());const s=this.canvasRect;if(!s||s.width===0||s.height===0)return;const o=(t-s.left)*this.width/s.width,n=(e-s.top)*this.height/s.height,i=d(o,n,this.centerX,this.centerY,this.radius);this.rgb=i.dist<Y?{r:255,g:255,b:255}:c(i.h,i.s,100),this.scheduleUpdate()},scheduleUpdate(){this.rafId||(this.rafId=requestAnimationFrame(()=>{this.rafId=0,this.drawSelector(),this.$emit("input",y({},this.rgb))}))},flushUpdate(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=0,this.drawSelector(),this.$emit("input",y({},this.rgb)))}}};var N=function(){var e=this,s=e._self._c;return s("div",{staticClass:"canvas-color-disc"},[s("canvas",{ref:"discCanvas",staticClass:"disc-canvas",attrs:{width:e.width,height:e.height}}),s("canvas",{ref:"selectorCanvas",staticClass:"disc-canvas disc-selector",attrs:{width:e.width,height:e.height},on:{pointerdown:e.onPointerDown,pointermove:e.onPointerMove,pointerup:e.onPointerUp,pointercancel:e.onPointerUp}})])},F=[],j=z(E,N,F,!1,null,"e9569c49");const C=j.exports;return C.install=t=>{t.component(C.name,C)},C});

package/dist/style.css

@@ -0,0 +1 @@
+.canvas-color-disc[data-v-e9569c49]{position:relative;display:inline-block}.disc-canvas[data-v-e9569c49]{display:block}.disc-selector[data-v-e9569c49]{position:absolute;top:0;left:0;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}

package/package.json

@@ -1,103 +1,63 @@
-{
-  "name": "canvas-color-disc",
-  "version": "1.1.2",
-  "description": "Color disc realized by canvas",
-  "private": false,
-  "main": "src/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
-    "lintfix": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",
-    "build": "node build/build.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zancheng/canvas-color-disc.git"
-  },
-  "keywords": [
-    "canvas",
-    "color",
-    "disc",
-    "canvas disc",
-    "canvas color disc",
-    "canvas color",
-    "H5 disc",
-    "H5 color",
-    "H5 canvas color",
-    "H5 canvas color disc"
-  ],
-  "author": "chengzan",
-  "license": "MIT",
-  "dependencies": {
-    "vue": "^2.5.2"
-  },
-  "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^8.2.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^21.0.2",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.22.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-spawn": "^5.0.1",
-    "css-loader": "^0.28.0",
-    "eslint": "^5.0.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^5.2.3",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "glob-all": "^3.1.0",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^22.0.4",
-    "jest-serializer-vue": "^0.3.0",
-    "node-notifier": "^5.1.2",
-    "node-sass": "^4.12.0",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-url": "^7.2.1",
-    "purify-css": "^1.2.5",
-    "purifycss-webpack": "^0.7.0",
-    "rimraf": "^2.6.0",
-    "sass-loader": "^7.3.1",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
-    "vue-jest": "^1.0.2",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
-  },
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "bugs": {
-    "url": "https://github.com/zancheng/canvas-color-disc/issues"
-  },
-  "homepage": "https://github.com/zancheng/canvas-color-disc#readme"
-}
+{
+  "name": "canvas-color-disc",
+  "version": "1.2.0",
+  "description": "Color disc realized by canvas",
+  "private": false,
+  "main": "dist/canvas-color-disc.umd.js",
+  "module": "dist/canvas-color-disc.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/canvas-color-disc.es.js",
+      "require": "./dist/canvas-color-disc.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "style": "dist/style.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.vue src demo",
+    "lintfix": "eslint --fix --ext .js,.vue src demo"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zancheng/canvas-color-disc.git"
+  },
+  "keywords": [
+    "canvas",
+    "color",
+    "disc"
+  ],
+  "author": "chengzan",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^2.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "babel-eslint": "^8.2.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "vite": "^5.4.0",
+    "vue": "2.7.16"
+  },
+  "engines": {
+    "node": ">= 18"
+  },
+  "bugs": {
+    "url": "https://github.com/zancheng/canvas-color-disc/issues"
+  },
+  "homepage": "https://github.com/zancheng/canvas-color-disc#readme",
+  "allowScripts": {
+    "esbuild@0.21.5": true
+  }
+}