@qxs-bns/components 0.0.22 → 0.0.24

package/lib/src/photo-crop-tool/src/photo-crop-tool.vue.js

@@ -1,403 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var hooks = require('@qxs-bns/hooks');
-var core = require('@vueuse/core');
-var composables = require('./composables.js');
-
-const _hoisted_1 = ["src"];
-var _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "QxsPhotoCropTool"
-  },
-  __name: "photo-crop-tool",
-  props: {
-    imgFile: {
-      type: Object,
-      default: () => null
-    },
-    aspectRatio: {
-      type: String,
-      default: () => "16 / 9"
-    },
-    defaultWidth: {
-      type: Number,
-      default: () => 320
-    },
-    defaultHeight: {
-      type: Number,
-      default: () => 180
-    },
-    /**
-     * free 自由缩放
-     * fixed 固定比例缩放
-     */
-    zoomType: {
-      type: String,
-      default: () => "fixed"
-    }
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    let startX = 0;
-    let startY = 0;
-    let startWidth = 0;
-    let startHeight = 0;
-    const ns = hooks.useNamespace("photo-crop-tool");
-    const cropBoxRef = vue.ref(null);
-    const containerBoxRef = vue.ref(null);
-    const imgRef = vue.ref(null);
-    const errorMessage = vue.ref("");
-    const dargPoint = vue.ref("");
-    const initialValue = vue.ref({
-      x: 0,
-      y: 0
-    });
-    const cropInfo = vue.ref({
-      width: props.defaultWidth,
-      height: props.defaultHeight,
-      x: 0,
-      y: 0
-    });
-    const { width, height } = core.useElementSize(cropBoxRef);
-    const { width: imgWidth } = core.useElementSize(imgRef);
-    const { x, y, style } = core.useDraggable(cropBoxRef, {
-      containerElement: containerBoxRef,
-      draggingElement: cropBoxRef,
-      disabled: vue.computed(() => !!dargPoint.value),
-      exact: true,
-      initialValue
-    });
-    const imageUrl = vue.computed(() => {
-      if (!props.imgFile) {
-        return "";
-      }
-      return URL.createObjectURL(props.imgFile);
-    });
-    vue.watch(
-      () => props.imgFile,
-      (newFile) => {
-        if (newFile && !newFile.type.startsWith("image/")) {
-          errorMessage.value = "\u6587\u4EF6\u7C7B\u578B\u9519\u8BEF";
-        } else {
-          errorMessage.value = "";
-        }
-      }
-    );
-    const ratio = vue.computed(() => {
-      return (imgRef.value?.naturalWidth || 0) / imgWidth.value;
-    });
-    const customStyle = vue.computed(() => {
-      const position = {
-        left: 0,
-        top: 0
-      };
-      if (dargPoint.value === "bottom-right") {
-        position.left = cropInfo.value.x;
-        position.top = cropInfo.value.y;
-      } else if (dargPoint.value === "top-left") {
-        position.left = cropInfo.value.x - width.value;
-        position.top = cropInfo.value.y - height.value;
-      } else if (dargPoint.value === "top-right") {
-        position.top = cropInfo.value.y - height.value;
-        position.left = cropInfo.value.x;
-      } else if (dargPoint.value === "bottom-left") {
-        position.left = cropInfo.value.x - width.value;
-        position.top = cropInfo.value.y;
-      }
-      return position;
-    });
-    const sizeStyle = vue.computed(() => {
-      const { aspectRatio } = props;
-      const style2 = {
-        "width": `${cropInfo.value.width || props.defaultWidth}`,
-        "height": `${cropInfo.value.height || props.defaultHeight}`,
-        "aspect-ratio": aspectRatio,
-        "top": `${customStyle.value.top}px`,
-        "left": `${customStyle.value.left}px`
-      };
-      if (props.zoomType === "free") {
-        delete style2["aspect-ratio"];
-      } else if (props.zoomType === "fixed") {
-        delete style2.height;
-      }
-      return ns.cssVarBlock(style2);
-    });
-    function zoom(pixel) {
-      return pixel * ratio.value;
-    }
-    async function crop(img = imgRef.value) {
-      let backgroundColor = "transparent";
-      if (containerBoxRef.value) {
-        backgroundColor = window.getComputedStyle(
-          containerBoxRef.value
-        ).backgroundColor;
-      }
-      const canvas = document.createElement("canvas");
-      canvas.width = zoom(containerBoxRef.value?.clientWidth || 0);
-      canvas.height = zoom(containerBoxRef.value?.clientHeight || 0);
-      const { drawImage, cropCanvas, drawColor } = composables.useCanvas(canvas);
-      drawColor(0, 0, canvas.width, canvas.height, backgroundColor);
-      drawImage(
-        img,
-        zoom(img.offsetLeft),
-        zoom(img.offsetTop),
-        img.naturalWidth,
-        img.naturalHeight
-      );
-      return await cropCanvas(
-        zoom(x.value),
-        zoom(y.value),
-        zoom(width.value),
-        zoom(height.value)
-      );
-    }
-    function checkBoundaries(newWidth, newHeight) {
-      const maxWidth = containerBoxRef.value?.clientWidth || Infinity;
-      const maxHeight = containerBoxRef.value?.clientHeight || Infinity;
-      return {
-        width: Math.min(Math.max(newWidth, 0), maxWidth),
-        height: Math.min(Math.max(newHeight, 0), maxHeight)
-      };
-    }
-    function mousemove(e) {
-      const deltaX = e.clientX - startX;
-      const deltaY = e.clientY - startY;
-      if (dargPoint.value === "bottom-right") {
-        if (props.zoomType === "free") {
-          const { width: width2, height: height2 } = checkBoundaries(
-            startWidth + deltaX,
-            startHeight + deltaY
-          );
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        } else if (props.zoomType === "fixed") {
-          const aspectRatio = Number.parseFloat(props.aspectRatio.split(" / ")[0]) / Number.parseFloat(props.aspectRatio.split(" / ")[1]);
-          let newWidth = startWidth + deltaX;
-          let newHeight = newWidth / aspectRatio;
-          const { width: width2, height: height2 } = checkBoundaries(newWidth, newHeight);
-          if (height2 > (containerBoxRef.value?.clientHeight || Infinity)) {
-            newHeight = containerBoxRef.value?.clientHeight || Infinity;
-            newWidth = newHeight * aspectRatio;
-          }
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        }
-      } else if (dargPoint.value === "top-left") {
-        if (props.zoomType === "free") {
-          const { width: width2, height: height2 } = checkBoundaries(
-            startWidth - deltaX,
-            startHeight - deltaY
-          );
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        } else if (props.zoomType === "fixed") {
-          const aspectRatio = Number.parseFloat(props.aspectRatio.split(" / ")[0]) / Number.parseFloat(props.aspectRatio.split(" / ")[1]);
-          let newWidth = startWidth - deltaX;
-          let newHeight = newWidth / aspectRatio;
-          const { width: width2, height: height2 } = checkBoundaries(newWidth, newHeight);
-          if (height2 > (containerBoxRef.value?.clientHeight || Infinity)) {
-            newHeight = containerBoxRef.value?.clientHeight || Infinity;
-            newWidth = newHeight * aspectRatio;
-          }
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        }
-        x.value = customStyle.value.left;
-        y.value = customStyle.value.top;
-      } else if (dargPoint.value === "top-right") {
-        if (props.zoomType === "free") {
-          const { width: width2, height: height2 } = checkBoundaries(
-            startWidth + deltaX,
-            startHeight - deltaY
-          );
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        } else if (props.zoomType === "fixed") {
-          const aspectRatio = Number.parseFloat(props.aspectRatio.split(" / ")[0]) / Number.parseFloat(props.aspectRatio.split(" / ")[1]);
-          let newWidth = startWidth + deltaX;
-          let newHeight = newWidth / aspectRatio;
-          const { width: width2, height: height2 } = checkBoundaries(newWidth, newHeight);
-          if (height2 > (containerBoxRef.value?.clientHeight || Infinity)) {
-            newHeight = containerBoxRef.value?.clientHeight || Infinity;
-            newWidth = newHeight * aspectRatio;
-          }
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        }
-        x.value = customStyle.value.left;
-        y.value = customStyle.value.top;
-      } else if (dargPoint.value === "bottom-left") {
-        if (props.zoomType === "free") {
-          const { width: width2, height: height2 } = checkBoundaries(
-            startWidth - deltaX,
-            startHeight + deltaY
-          );
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        } else if (props.zoomType === "fixed") {
-          const aspectRatio = Number.parseFloat(props.aspectRatio.split(" / ")[0]) / Number.parseFloat(props.aspectRatio.split(" / ")[1]);
-          let newWidth = startWidth - deltaX;
-          let newHeight = newWidth / aspectRatio;
-          const { width: width2, height: height2 } = checkBoundaries(newWidth, newHeight);
-          if (height2 > (containerBoxRef.value?.clientHeight || Infinity)) {
-            newHeight = containerBoxRef.value?.clientHeight || Infinity;
-            newWidth = newHeight * aspectRatio;
-          }
-          cropInfo.value.width = width2;
-          cropInfo.value.height = height2;
-        }
-        x.value = customStyle.value.left;
-        y.value = customStyle.value.top;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    function mousedown(e, point) {
-      dargPoint.value = point;
-      startX = e.clientX;
-      startY = e.clientY;
-      startWidth = cropInfo.value.width;
-      startHeight = cropInfo.value.height;
-      if (point === "bottom-right") {
-        cropInfo.value.x = x.value;
-        cropInfo.value.y = y.value;
-      } else if (point === "top-left") {
-        cropInfo.value.x = x.value + width.value;
-        cropInfo.value.y = y.value + height.value;
-      } else if (point === "top-right") {
-        cropInfo.value.x = x.value;
-        cropInfo.value.y = y.value + height.value;
-      } else if (point === "bottom-left") {
-        cropInfo.value.x = x.value + width.value;
-        cropInfo.value.y = y.value;
-      }
-    }
-    function mouseup() {
-      dargPoint.value = "";
-    }
-    function resize() {
-      cropInfo.value.width = props.defaultWidth;
-      cropInfo.value.height = props.defaultHeight;
-      x.value = 0;
-      y.value = 0;
-    }
-    document.addEventListener("mouseup", mouseup);
-    document.addEventListener("mousemove", mousemove);
-    vue.onMounted(() => {
-      vue.nextTick(() => {
-        initialValue.value.x = (containerBoxRef.value?.offsetWidth || 0) / 2 - cropInfo.value.width / 2;
-        initialValue.value.y = (containerBoxRef.value?.offsetHeight || 0) / 2 - cropInfo.value.height / 2;
-      });
-    });
-    vue.onUnmounted(() => {
-      if (imageUrl.value) {
-        URL.revokeObjectURL(imageUrl.value);
-      }
-      document.removeEventListener("mouseup", mouseup);
-      document.removeEventListener("mousemove", mousemove);
-    });
-    __expose({
-      crop,
-      resize
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(
-        "div",
-        {
-          ref_key: "containerBoxRef",
-          ref: containerBoxRef,
-          class: vue.normalizeClass([vue.unref(ns).e("img-box")])
-        },
-        [
-          vue.unref(errorMessage) ? (vue.openBlock(), vue.createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: vue.normalizeClass([vue.unref(ns).e("error-message")])
-            },
-            vue.toDisplayString(vue.unref(errorMessage)),
-            3
-            /* TEXT, CLASS */
-          )) : (vue.openBlock(), vue.createElementBlock(
-            vue.Fragment,
-            { key: 1 },
-            [
-              vue.createElementVNode("img", {
-                ref_key: "imgRef",
-                ref: imgRef,
-                class: vue.normalizeClass([vue.unref(ns).e("image")]),
-                src: vue.unref(imageUrl)
-              }, null, 10, _hoisted_1),
-              vue.createElementVNode(
-                "div",
-                {
-                  ref_key: "cropBoxRef",
-                  ref: cropBoxRef,
-                  class: vue.normalizeClass([vue.unref(ns).e("crop-tool-box")]),
-                  style: vue.normalizeStyle([
-                    vue.unref(sizeStyle),
-                    vue.unref(dargPoint) ? `left: ${vue.unref(customStyle).left}px;top: ${vue.unref(customStyle).top}px` : vue.unref(style)
-                  ])
-                },
-                [
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: vue.normalizeClass([vue.unref(ns).e("top-left")]),
-                      onMousedown: _cache[0] || (_cache[0] = ($event) => mousedown($event, "top-left"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  ),
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: vue.normalizeClass([vue.unref(ns).e("top-right")]),
-                      onMousedown: _cache[1] || (_cache[1] = ($event) => mousedown($event, "top-right"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  ),
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: vue.normalizeClass([vue.unref(ns).e("bottom-right")]),
-                      onMousedown: _cache[2] || (_cache[2] = ($event) => mousedown($event, "bottom-right"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  ),
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: vue.normalizeClass([vue.unref(ns).e("bottom-left")]),
-                      onMousedown: _cache[3] || (_cache[3] = ($event) => mousedown($event, "bottom-left"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  )
-                ],
-                6
-                /* CLASS, STYLE */
-              )
-            ],
-            64
-            /* STABLE_FRAGMENT */
-          ))
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-
-exports.default = _sfc_main;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("@qxs-bns/hooks"),l=require("@vueuse/core"),a=require("./composables.js");const o=["src"];var u=e.defineComponent({name:"QxsPhotoCropTool",__name:"photo-crop-tool",props:{imgFile:{type:Object,default:()=>null},aspectRatio:{type:String,default:()=>"16 / 9"},defaultWidth:{type:Number,default:()=>320},defaultHeight:{type:Number,default:()=>180},zoomType:{type:String,default:()=>"fixed"}},setup(u,{expose:i}){const n=u;let r=0,s=0,v=0,h=0;const c=t.useNamespace("photo-crop-tool"),f=e.ref(null),p=e.ref(null),d=e.ref(null),m=e.ref(""),g=e.ref(""),y=e.ref({x:0,y:0}),w=e.ref({width:n.defaultWidth,height:n.defaultHeight,x:0,y:0}),{width:x,height:b}=l.useElementSize(f),{width:z}=l.useElementSize(d),{x:E,y:N,style:R}=l.useDraggable(f,{containerElement:p,draggingElement:f,disabled:e.computed((()=>!!g.value)),exact:!0,initialValue:y}),k=e.computed((()=>n.imgFile?URL.createObjectURL(n.imgFile):""));e.watch((()=>n.imgFile),(e=>{e&&!e.type.startsWith("image/")?m.value="文件类型错误":m.value=""}));const H=e.computed((()=>(d.value?.naturalWidth||0)/z.value)),C=e.computed((()=>{const e={left:0,top:0};return"bottom-right"===g.value?(e.left=w.value.x,e.top=w.value.y):"top-left"===g.value?(e.left=w.value.x-x.value,e.top=w.value.y-b.value):"top-right"===g.value?(e.top=w.value.y-b.value,e.left=w.value.x):"bottom-left"===g.value&&(e.left=w.value.x-x.value,e.top=w.value.y),e})),T=e.computed((()=>{const{aspectRatio:e}=n,t={width:`${w.value.width||n.defaultWidth}`,height:`${w.value.height||n.defaultHeight}`,"aspect-ratio":e,top:`${C.value.top}px`,left:`${C.value.left}px`};return"free"===n.zoomType?delete t["aspect-ratio"]:"fixed"===n.zoomType&&delete t.height,c.cssVarBlock(t)}));function F(e){return e*H.value}function M(e,t){const l=p.value?.clientWidth||1/0,a=p.value?.clientHeight||1/0;return{width:Math.min(Math.max(e,0),l),height:Math.min(Math.max(t,0),a)}}function W(e){const t=e.clientX-r,l=e.clientY-s;if("bottom-right"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v+t,h+l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v+t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}}else if("top-left"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v-t,h-l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v-t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}else if("top-right"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v+t,h-l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v+t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}else if("bottom-left"===g.value){if("free"===n.zoomType){const{width:e,height:a}=M(v-t,h+l);w.value.width=e,w.value.height=a}else if("fixed"===n.zoomType){const e=Number.parseFloat(n.aspectRatio.split(" / ")[0])/Number.parseFloat(n.aspectRatio.split(" / ")[1]);let l=v-t,a=l/e;const{width:o,height:u}=M(l,a);u>(p.value?.clientHeight||1/0)&&(a=p.value?.clientHeight||1/0,l=a*e),w.value.width=o,w.value.height=u}E.value=C.value.left,N.value=C.value.top}e.preventDefault(),e.stopPropagation()}function B(e,t){g.value=t,r=e.clientX,s=e.clientY,v=w.value.width,h=w.value.height,"bottom-right"===t?(w.value.x=E.value,w.value.y=N.value):"top-left"===t?(w.value.x=E.value+x.value,w.value.y=N.value+b.value):"top-right"===t?(w.value.x=E.value,w.value.y=N.value+b.value):"bottom-left"===t&&(w.value.x=E.value+x.value,w.value.y=N.value)}function L(){g.value=""}return document.addEventListener("mouseup",L),document.addEventListener("mousemove",W),e.onMounted((()=>{e.nextTick((()=>{y.value.x=(p.value?.offsetWidth||0)/2-w.value.width/2,y.value.y=(p.value?.offsetHeight||0)/2-w.value.height/2}))})),e.onUnmounted((()=>{k.value&&URL.revokeObjectURL(k.value),document.removeEventListener("mouseup",L),document.removeEventListener("mousemove",W)})),i({crop:async function(e=d.value){let t="transparent";p.value&&(t=window.getComputedStyle(p.value).backgroundColor);const l=document.createElement("canvas");l.width=F(p.value?.clientWidth||0),l.height=F(p.value?.clientHeight||0);const{drawImage:o,cropCanvas:u,drawColor:i}=a.useCanvas(l);return i(0,0,l.width,l.height,t),o(e,F(e.offsetLeft),F(e.offsetTop),e.naturalWidth,e.naturalHeight),await u(F(E.value),F(N.value),F(x.value),F(b.value))},resize:function(){w.value.width=n.defaultWidth,w.value.height=n.defaultHeight,E.value=0,N.value=0}}),(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:p,class:e.normalizeClass([e.unref(c).e("img-box")])},[e.unref(m)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(c).e("error-message")])},e.toDisplayString(e.unref(m)),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:d,class:e.normalizeClass([e.unref(c).e("image")]),src:e.unref(k)},null,10,o),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:f,class:e.normalizeClass([e.unref(c).e("crop-tool-box")]),style:e.normalizeStyle([e.unref(T),e.unref(g)?`left: ${e.unref(C).left}px;top: ${e.unref(C).top}px`:e.unref(R)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("top-left")]),onMousedown:l[0]||(l[0]=e=>B(e,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("top-right")]),onMousedown:l[1]||(l[1]=e=>B(e,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("bottom-right")]),onMousedown:l[2]||(l[2]=e=>B(e,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(c).e("bottom-left")]),onMousedown:l[3]||(l[3]=e=>B(e,"bottom-left"))},null,34)],6)],64))],2))}});exports.default=u;
 //# sourceMappingURL=photo-crop-tool.vue.js.map

package/lib/src/photo-crop-tool/src/photo-crop-tool.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"photo-crop-tool.vue.js","sources":["../../../../../../packages/components/src/photo-crop-tool/src/photo-crop-tool.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { useDraggable, useElementSize } from '@vueuse/core'\nimport { useCanvas } from './composables'\n\ndefineOptions({\n  name: 'QxsPhotoCropTool',\n})\n\nconst props = defineProps({\n  imgFile: {\n    type: Object as PropType<File>,\n    default: () => null,\n  },\n  aspectRatio: {\n    type: String,\n    default: () => '16 / 9',\n  },\n  defaultWidth: {\n    type: Number,\n    default: () => 320,\n  },\n  defaultHeight: {\n    type: Number,\n    default: () => 180,\n  },\n  /**\n   * free 自由缩放\n   * fixed 固定比例缩放\n   */\n  zoomType: {\n    type: String,\n    default: () => 'fixed',\n  },\n})\nlet startX = 0\nlet startY = 0\nlet startWidth = 0\nlet startHeight = 0\n\nconst ns = useNamespace('photo-crop-tool')\n\nconst cropBoxRef = ref<HTMLElement | null>(null)\nconst containerBoxRef = ref<HTMLElement | null>(null)\nconst imgRef = ref<HTMLImageElement | null>(null)\nconst errorMessage = ref('')\nconst dargPoint = ref('')\nconst initialValue = ref({\n  x: 0,\n  y: 0,\n})\nconst cropInfo = ref({\n  width: props.defaultWidth,\n  height: props.defaultHeight,\n  x: 0,\n  y: 0,\n})\n\nconst { width, height } = useElementSize(cropBoxRef)\nconst { width: imgWidth } = useElementSize(imgRef)\n\nconst { x, y, style } = useDraggable(cropBoxRef, {\n  containerElement: containerBoxRef,\n  draggingElement: cropBoxRef,\n  disabled: computed(() => !!dargPoint.value),\n  exact: true,\n  initialValue,\n})\n\nconst imageUrl = computed(() => {\n  if (!props.imgFile) {\n    return ''\n  }\n  return URL.createObjectURL(props.imgFile)\n})\n\nwatch(\n  () => props.imgFile,\n  (newFile: File | null) => {\n    if (newFile && !newFile.type.startsWith('image/')) {\n      errorMessage.value = '文件类型错误'\n    }\n    else {\n      errorMessage.value = ''\n    }\n  },\n)\n\nconst ratio = computed(() => {\n  return (imgRef.value?.naturalWidth || 0) / imgWidth.value\n})\n\nconst customStyle = computed(() => {\n  const position = {\n    left: 0,\n    top: 0,\n  }\n  if (dargPoint.value === 'bottom-right') {\n    position.left = cropInfo.value.x\n    position.top = cropInfo.value.y\n  }\n  else if (dargPoint.value === 'top-left') {\n    position.left = cropInfo.value.x - width.value\n    position.top = cropInfo.value.y - height.value\n  }\n  else if (dargPoint.value === 'top-right') {\n    position.top = cropInfo.value.y - height.value\n    position.left = cropInfo.value.x\n  }\n  else if (dargPoint.value === 'bottom-left') {\n    position.left = cropInfo.value.x - width.value\n    position.top = cropInfo.value.y\n  }\n  return position\n})\n\nconst sizeStyle = computed(() => {\n  const { aspectRatio } = props\n\n  const style: {\n    'height'?: string\n    'width': string\n    'aspect-ratio'?: string\n    'top': string\n    'left': string\n  } = {\n    'width': `${cropInfo.value.width || props.defaultWidth}`,\n    'height': `${cropInfo.value.height || props.defaultHeight}`,\n    'aspect-ratio': aspectRatio,\n    'top': `${customStyle.value.top}px`,\n    'left': `${customStyle.value.left}px`,\n  }\n  if (props.zoomType === 'free') {\n    delete style['aspect-ratio']\n  }\n  else if (props.zoomType === 'fixed') {\n    delete style.height\n  }\n  return ns.cssVarBlock(style)\n})\n\nfunction zoom(pixel: number) {\n  return pixel * ratio.value\n}\nasync function crop(img: HTMLImageElement = imgRef.value!) {\n  let backgroundColor = 'transparent'\n  if (containerBoxRef.value) {\n    backgroundColor = window.getComputedStyle(\n      containerBoxRef.value,\n    ).backgroundColor\n  }\n  const canvas = document.createElement('canvas')\n  canvas.width = zoom(containerBoxRef.value?.clientWidth || 0)\n  canvas.height = zoom(containerBoxRef.value?.clientHeight || 0)\n  const { drawImage, cropCanvas, drawColor } = useCanvas(canvas)\n  drawColor(0, 0, canvas.width, canvas.height, backgroundColor)\n  drawImage(\n    img,\n    zoom(img.offsetLeft),\n    zoom(img.offsetTop),\n    img.naturalWidth,\n    img.naturalHeight,\n  )\n  return await cropCanvas(\n    zoom(x.value),\n    zoom(y.value),\n    zoom(width.value),\n    zoom(height.value),\n  )\n}\n\nfunction checkBoundaries(\n  newWidth: number,\n  newHeight: number,\n): { width: number, height: number } {\n  const maxWidth = containerBoxRef.value?.clientWidth || Infinity\n  const maxHeight = containerBoxRef.value?.clientHeight || Infinity\n\n  return {\n    width: Math.min(Math.max(newWidth, 0), maxWidth),\n    height: Math.min(Math.max(newHeight, 0), maxHeight),\n  }\n}\n\nfunction mousemove(e: MouseEvent) {\n  const deltaX = e.clientX - startX\n  const deltaY = e.clientY - startY\n\n  if (dargPoint.value === 'bottom-right') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth + deltaX,\n        startHeight + deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth + deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n  }\n  else if (dargPoint.value === 'top-left') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth - deltaX,\n        startHeight - deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth - deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  else if (dargPoint.value === 'top-right') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth + deltaX,\n        startHeight - deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth + deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  else if (dargPoint.value === 'bottom-left') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth - deltaX,\n        startHeight + deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth - deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nfunction mousedown(e: MouseEvent, point: string) {\n  dargPoint.value = point\n  startX = e.clientX\n  startY = e.clientY\n  startWidth = cropInfo.value.width\n  startHeight = cropInfo.value.height\n\n  if (point === 'bottom-right') {\n    cropInfo.value.x = x.value\n    cropInfo.value.y = y.value\n  }\n  else if (point === 'top-left') {\n    cropInfo.value.x = x.value + width.value\n    cropInfo.value.y = y.value + height.value\n  }\n  else if (point === 'top-right') {\n    cropInfo.value.x = x.value\n    cropInfo.value.y = y.value + height.value\n  }\n  else if (point === 'bottom-left') {\n    cropInfo.value.x = x.value + width.value\n    cropInfo.value.y = y.value\n  }\n}\n\nfunction mouseup() {\n  dargPoint.value = ''\n}\n\nfunction resize() {\n  cropInfo.value.width = props.defaultWidth\n  cropInfo.value.height = props.defaultHeight\n  x.value = 0\n  y.value = 0\n}\n\ndocument.addEventListener('mouseup', mouseup)\ndocument.addEventListener('mousemove', mousemove)\n\nonMounted(() => {\n  nextTick(() => {\n    // 初始化位置\n    initialValue.value.x\n      = (containerBoxRef.value?.offsetWidth || 0) / 2 - cropInfo.value.width / 2\n    initialValue.value.y\n      = (containerBoxRef.value?.offsetHeight || 0) / 2\n      - cropInfo.value.height / 2\n  })\n})\n\nonUnmounted(() => {\n  if (imageUrl.value) {\n    URL.revokeObjectURL(imageUrl.value)\n  }\n  document.removeEventListener('mouseup', mouseup)\n  document.removeEventListener('mousemove', mousemove)\n})\n\ndefineExpose({\n  crop,\n  resize,\n})\n</script>\n\n<template>\n  <div ref=\"containerBoxRef\" :class=\"[ns.e('img-box')]\">\n    <div v-if=\"errorMessage\" :class=\"[ns.e('error-message')]\">\n      {{ errorMessage }}\n    </div>\n    <template v-else>\n      <img\n        ref=\"imgRef\"\n        :class=\"[ns.e('image')]\"\n        :src=\"imageUrl\"\n      >\n      <div\n        ref=\"cropBoxRef\"\n        :class=\"[ns.e('crop-tool-box')]\"\n        :style=\"[\n          sizeStyle,\n          dargPoint\n            ? `left: ${customStyle.left}px;top: ${customStyle.top}px`\n            : style,\n        ]\"\n      >\n        <div\n          :class=\"[ns.e('top-left')]\"\n          @mousedown=\"mousedown($event, 'top-left')\"\n        />\n        <div\n          :class=\"[ns.e('top-right')]\"\n          @mousedown=\"mousedown($event, 'top-right')\"\n        />\n        <div\n          :class=\"[ns.e('bottom-right')]\"\n          @mousedown=\"mousedown($event, 'bottom-right')\"\n        />\n        <div\n          :class=\"[ns.e('bottom-left')]\"\n          @mousedown=\"mousedown($event, 'bottom-left')\"\n        />\n      </div>\n    </template>\n  </div>\n</template>\n"],"names":["useNamespace","ref","useElementSize","useDraggable","computed","watch","style","useCanvas","width","height","onMounted","nextTick","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"photo-crop-tool.vue.js","sources":["../../../../../../packages/components/src/photo-crop-tool/src/photo-crop-tool.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { useDraggable, useElementSize } from '@vueuse/core'\nimport { useCanvas } from './composables'\n\ndefineOptions({\n  name: 'QxsPhotoCropTool',\n})\n\nconst props = defineProps({\n  imgFile: {\n    type: Object as PropType<File>,\n    default: () => null,\n  },\n  aspectRatio: {\n    type: String,\n    default: () => '16 / 9',\n  },\n  defaultWidth: {\n    type: Number,\n    default: () => 320,\n  },\n  defaultHeight: {\n    type: Number,\n    default: () => 180,\n  },\n  /**\n   * free 自由缩放\n   * fixed 固定比例缩放\n   */\n  zoomType: {\n    type: String,\n    default: () => 'fixed',\n  },\n})\nlet startX = 0\nlet startY = 0\nlet startWidth = 0\nlet startHeight = 0\n\nconst ns = useNamespace('photo-crop-tool')\n\nconst cropBoxRef = ref<HTMLElement | null>(null)\nconst containerBoxRef = ref<HTMLElement | null>(null)\nconst imgRef = ref<HTMLImageElement | null>(null)\nconst errorMessage = ref('')\nconst dargPoint = ref('')\nconst initialValue = ref({\n  x: 0,\n  y: 0,\n})\nconst cropInfo = ref({\n  width: props.defaultWidth,\n  height: props.defaultHeight,\n  x: 0,\n  y: 0,\n})\n\nconst { width, height } = useElementSize(cropBoxRef)\nconst { width: imgWidth } = useElementSize(imgRef)\n\nconst { x, y, style } = useDraggable(cropBoxRef, {\n  containerElement: containerBoxRef,\n  draggingElement: cropBoxRef,\n  disabled: computed(() => !!dargPoint.value),\n  exact: true,\n  initialValue,\n})\n\nconst imageUrl = computed(() => {\n  if (!props.imgFile) {\n    return ''\n  }\n  return URL.createObjectURL(props.imgFile)\n})\n\nwatch(\n  () => props.imgFile,\n  (newFile: File | null) => {\n    if (newFile && !newFile.type.startsWith('image/')) {\n      errorMessage.value = '文件类型错误'\n    }\n    else {\n      errorMessage.value = ''\n    }\n  },\n)\n\nconst ratio = computed(() => {\n  return (imgRef.value?.naturalWidth || 0) / imgWidth.value\n})\n\nconst customStyle = computed(() => {\n  const position = {\n    left: 0,\n    top: 0,\n  }\n  if (dargPoint.value === 'bottom-right') {\n    position.left = cropInfo.value.x\n    position.top = cropInfo.value.y\n  }\n  else if (dargPoint.value === 'top-left') {\n    position.left = cropInfo.value.x - width.value\n    position.top = cropInfo.value.y - height.value\n  }\n  else if (dargPoint.value === 'top-right') {\n    position.top = cropInfo.value.y - height.value\n    position.left = cropInfo.value.x\n  }\n  else if (dargPoint.value === 'bottom-left') {\n    position.left = cropInfo.value.x - width.value\n    position.top = cropInfo.value.y\n  }\n  return position\n})\n\nconst sizeStyle = computed(() => {\n  const { aspectRatio } = props\n\n  const style: {\n    'height'?: string\n    'width': string\n    'aspect-ratio'?: string\n    'top': string\n    'left': string\n  } = {\n    'width': `${cropInfo.value.width || props.defaultWidth}`,\n    'height': `${cropInfo.value.height || props.defaultHeight}`,\n    'aspect-ratio': aspectRatio,\n    'top': `${customStyle.value.top}px`,\n    'left': `${customStyle.value.left}px`,\n  }\n  if (props.zoomType === 'free') {\n    delete style['aspect-ratio']\n  }\n  else if (props.zoomType === 'fixed') {\n    delete style.height\n  }\n  return ns.cssVarBlock(style)\n})\n\nfunction zoom(pixel: number) {\n  return pixel * ratio.value\n}\nasync function crop(img: HTMLImageElement = imgRef.value!) {\n  let backgroundColor = 'transparent'\n  if (containerBoxRef.value) {\n    backgroundColor = window.getComputedStyle(\n      containerBoxRef.value,\n    ).backgroundColor\n  }\n  const canvas = document.createElement('canvas')\n  canvas.width = zoom(containerBoxRef.value?.clientWidth || 0)\n  canvas.height = zoom(containerBoxRef.value?.clientHeight || 0)\n  const { drawImage, cropCanvas, drawColor } = useCanvas(canvas)\n  drawColor(0, 0, canvas.width, canvas.height, backgroundColor)\n  drawImage(\n    img,\n    zoom(img.offsetLeft),\n    zoom(img.offsetTop),\n    img.naturalWidth,\n    img.naturalHeight,\n  )\n  return await cropCanvas(\n    zoom(x.value),\n    zoom(y.value),\n    zoom(width.value),\n    zoom(height.value),\n  )\n}\n\nfunction checkBoundaries(\n  newWidth: number,\n  newHeight: number,\n): { width: number, height: number } {\n  const maxWidth = containerBoxRef.value?.clientWidth || Infinity\n  const maxHeight = containerBoxRef.value?.clientHeight || Infinity\n\n  return {\n    width: Math.min(Math.max(newWidth, 0), maxWidth),\n    height: Math.min(Math.max(newHeight, 0), maxHeight),\n  }\n}\n\nfunction mousemove(e: MouseEvent) {\n  const deltaX = e.clientX - startX\n  const deltaY = e.clientY - startY\n\n  if (dargPoint.value === 'bottom-right') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth + deltaX,\n        startHeight + deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth + deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n  }\n  else if (dargPoint.value === 'top-left') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth - deltaX,\n        startHeight - deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth - deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  else if (dargPoint.value === 'top-right') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth + deltaX,\n        startHeight - deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth + deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  else if (dargPoint.value === 'bottom-left') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth - deltaX,\n        startHeight + deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth - deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nfunction mousedown(e: MouseEvent, point: string) {\n  dargPoint.value = point\n  startX = e.clientX\n  startY = e.clientY\n  startWidth = cropInfo.value.width\n  startHeight = cropInfo.value.height\n\n  if (point === 'bottom-right') {\n    cropInfo.value.x = x.value\n    cropInfo.value.y = y.value\n  }\n  else if (point === 'top-left') {\n    cropInfo.value.x = x.value + width.value\n    cropInfo.value.y = y.value + height.value\n  }\n  else if (point === 'top-right') {\n    cropInfo.value.x = x.value\n    cropInfo.value.y = y.value + height.value\n  }\n  else if (point === 'bottom-left') {\n    cropInfo.value.x = x.value + width.value\n    cropInfo.value.y = y.value\n  }\n}\n\nfunction mouseup() {\n  dargPoint.value = ''\n}\n\nfunction resize() {\n  cropInfo.value.width = props.defaultWidth\n  cropInfo.value.height = props.defaultHeight\n  x.value = 0\n  y.value = 0\n}\n\ndocument.addEventListener('mouseup', mouseup)\ndocument.addEventListener('mousemove', mousemove)\n\nonMounted(() => {\n  nextTick(() => {\n    // 初始化位置\n    initialValue.value.x\n      = (containerBoxRef.value?.offsetWidth || 0) / 2 - cropInfo.value.width / 2\n    initialValue.value.y\n      = (containerBoxRef.value?.offsetHeight || 0) / 2\n      - cropInfo.value.height / 2\n  })\n})\n\nonUnmounted(() => {\n  if (imageUrl.value) {\n    URL.revokeObjectURL(imageUrl.value)\n  }\n  document.removeEventListener('mouseup', mouseup)\n  document.removeEventListener('mousemove', mousemove)\n})\n\ndefineExpose({\n  crop,\n  resize,\n})\n</script>\n\n<template>\n  <div ref=\"containerBoxRef\" :class=\"[ns.e('img-box')]\">\n    <div v-if=\"errorMessage\" :class=\"[ns.e('error-message')]\">\n      {{ errorMessage }}\n    </div>\n    <template v-else>\n      <img\n        ref=\"imgRef\"\n        :class=\"[ns.e('image')]\"\n        :src=\"imageUrl\"\n      >\n      <div\n        ref=\"cropBoxRef\"\n        :class=\"[ns.e('crop-tool-box')]\"\n        :style=\"[\n          sizeStyle,\n          dargPoint\n            ? `left: ${customStyle.left}px;top: ${customStyle.top}px`\n            : style,\n        ]\"\n      >\n        <div\n          :class=\"[ns.e('top-left')]\"\n          @mousedown=\"mousedown($event, 'top-left')\"\n        />\n        <div\n          :class=\"[ns.e('top-right')]\"\n          @mousedown=\"mousedown($event, 'top-right')\"\n        />\n        <div\n          :class=\"[ns.e('bottom-right')]\"\n          @mousedown=\"mousedown($event, 'bottom-right')\"\n        />\n        <div\n          :class=\"[ns.e('bottom-left')]\"\n          @mousedown=\"mousedown($event, 'bottom-left')\"\n        />\n      </div>\n    </template>\n  </div>\n</template>\n"],"names":["props","__props","startX","startY","startWidth","startHeight","ns","useNamespace","cropBoxRef","ref","containerBoxRef","imgRef","errorMessage","dargPoint","initialValue","x","y","cropInfo","width","defaultWidth","height","defaultHeight","useElementSize","imgWidth","style","useDraggable","containerElement","draggingElement","disabled","computed","value","exact","imageUrl","imgFile","URL","createObjectURL","watch","newFile","type","startsWith","ratio","naturalWidth","customStyle","position","left","top","sizeStyle","aspectRatio","zoomType","cssVarBlock","zoom","pixel","checkBoundaries","newWidth","newHeight","maxWidth","clientWidth","Infinity","maxHeight","clientHeight","Math","min","max","mousemove","e","deltaX","clientX","deltaY","clientY","Number","parseFloat","split","preventDefault","stopPropagation","mousedown","point","mouseup","document","addEventListener","onMounted","nextTick","offsetWidth","offsetHeight","onUnmounted","revokeObjectURL","removeEventListener","__expose","crop","async","img","backgroundColor","window","getComputedStyle","canvas","createElement","drawImage","cropCanvas","drawColor","useCanvas","offsetLeft","offsetTop","naturalHeight","resize"],"mappings":"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"}

package/lib/src/photo-crop-tool/src/photo-crop-tool.vue2.js

@@ -1,10 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var photoCropTool_vue_vue_type_script_setup_true_lang = require('./photo-crop-tool.vue.js');
-
-
-
-exports.default = photoCropTool_vue_vue_type_script_setup_true_lang.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./photo-crop-tool.vue.js");exports.default=e.default;
 //# sourceMappingURL=photo-crop-tool.vue2.js.map

package/lib/src/photo-crop-tool/src/photo-crop-tool.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"photo-crop-tool.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"photo-crop-tool.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/src/subject-action/index.js

@@ -1,12 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var withInstall = require('../withInstall.js');
-var subjectAction_vue_vue_type_script_setup_true_lang = require('./src/subject-action.vue.js');
-
-const QxsSubjectAction = withInstall.withInstall(subjectAction_vue_vue_type_script_setup_true_lang.default);
-
-exports.QxsSubjectAction = QxsSubjectAction;
-exports.default = QxsSubjectAction;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../withInstall.js"),t=require("./src/subject-action.vue.js");const s=e.withInstall(t.default);exports.QxsSubjectAction=s,exports.default=s;
 //# sourceMappingURL=index.js.map

package/lib/src/subject-action/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/src/subject-action/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/subject-action.vue'\n\nconst QxsSubjectAction = withInstall(component)\n  \nexport {\n  QxsSubjectAction\n}\n  \nexport default QxsSubjectAction"],"names":["QxsSubjectAction","withInstall","component"],"mappings":";;;;;;;AAGA,MAAMA,gBAAA,GAAmBC,wBAAYC,yDAAS;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/src/subject-action/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/subject-action.vue'\n\nconst QxsSubjectAction = withInstall(component)\n  \nexport {\n  QxsSubjectAction\n}\n  \nexport default QxsSubjectAction"],"names":["QxsSubjectAction","withInstall","component","default"],"mappings":"gJAGA,MAAMA,EAAmBC,cAAYC,EAASC"}