@qxs-bns/components 0.0.22 → 0.0.24

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

@@ -1,399 +1,2 @@
-import { defineComponent, ref, computed, watch, onMounted, nextTick, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, toDisplayString, Fragment, createElementVNode, normalizeStyle } from 'vue';
-import { useNamespace } from '@qxs-bns/hooks';
-import { useElementSize, useDraggable } from '@vueuse/core';
-import { useCanvas } from './composables.js';
-
-const _hoisted_1 = ["src"];
-var _sfc_main = /* @__PURE__ */ 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 = useNamespace("photo-crop-tool");
-    const cropBoxRef = ref(null);
-    const containerBoxRef = ref(null);
-    const imgRef = ref(null);
-    const errorMessage = ref("");
-    const dargPoint = ref("");
-    const initialValue = ref({
-      x: 0,
-      y: 0
-    });
-    const cropInfo = ref({
-      width: props.defaultWidth,
-      height: props.defaultHeight,
-      x: 0,
-      y: 0
-    });
-    const { width, height } = useElementSize(cropBoxRef);
-    const { width: imgWidth } = useElementSize(imgRef);
-    const { x, y, style } = useDraggable(cropBoxRef, {
-      containerElement: containerBoxRef,
-      draggingElement: cropBoxRef,
-      disabled: computed(() => !!dargPoint.value),
-      exact: true,
-      initialValue
-    });
-    const imageUrl = computed(() => {
-      if (!props.imgFile) {
-        return "";
-      }
-      return URL.createObjectURL(props.imgFile);
-    });
-    watch(
-      () => props.imgFile,
-      (newFile) => {
-        if (newFile && !newFile.type.startsWith("image/")) {
-          errorMessage.value = "\u6587\u4EF6\u7C7B\u578B\u9519\u8BEF";
-        } else {
-          errorMessage.value = "";
-        }
-      }
-    );
-    const ratio = computed(() => {
-      return (imgRef.value?.naturalWidth || 0) / imgWidth.value;
-    });
-    const customStyle = 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 = 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 } = 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);
-    onMounted(() => {
-      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;
-      });
-    });
-    onUnmounted(() => {
-      if (imageUrl.value) {
-        URL.revokeObjectURL(imageUrl.value);
-      }
-      document.removeEventListener("mouseup", mouseup);
-      document.removeEventListener("mousemove", mousemove);
-    });
-    __expose({
-      crop,
-      resize
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          ref_key: "containerBoxRef",
-          ref: containerBoxRef,
-          class: normalizeClass([unref(ns).e("img-box")])
-        },
-        [
-          unref(errorMessage) ? (openBlock(), createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: normalizeClass([unref(ns).e("error-message")])
-            },
-            toDisplayString(unref(errorMessage)),
-            3
-            /* TEXT, CLASS */
-          )) : (openBlock(), createElementBlock(
-            Fragment,
-            { key: 1 },
-            [
-              createElementVNode("img", {
-                ref_key: "imgRef",
-                ref: imgRef,
-                class: normalizeClass([unref(ns).e("image")]),
-                src: unref(imageUrl)
-              }, null, 10, _hoisted_1),
-              createElementVNode(
-                "div",
-                {
-                  ref_key: "cropBoxRef",
-                  ref: cropBoxRef,
-                  class: normalizeClass([unref(ns).e("crop-tool-box")]),
-                  style: normalizeStyle([
-                    unref(sizeStyle),
-                    unref(dargPoint) ? `left: ${unref(customStyle).left}px;top: ${unref(customStyle).top}px` : unref(style)
-                  ])
-                },
-                [
-                  createElementVNode(
-                    "div",
-                    {
-                      class: normalizeClass([unref(ns).e("top-left")]),
-                      onMousedown: _cache[0] || (_cache[0] = ($event) => mousedown($event, "top-left"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  ),
-                  createElementVNode(
-                    "div",
-                    {
-                      class: normalizeClass([unref(ns).e("top-right")]),
-                      onMousedown: _cache[1] || (_cache[1] = ($event) => mousedown($event, "top-right"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  ),
-                  createElementVNode(
-                    "div",
-                    {
-                      class: normalizeClass([unref(ns).e("bottom-right")]),
-                      onMousedown: _cache[2] || (_cache[2] = ($event) => mousedown($event, "bottom-right"))
-                    },
-                    null,
-                    34
-                    /* CLASS, NEED_HYDRATION */
-                  ),
-                  createElementVNode(
-                    "div",
-                    {
-                      class: normalizeClass([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 */
-      );
-    };
-  }
-});
-
-export { _sfc_main as default };
+import{defineComponent as e,ref as t,computed as l,watch as a,onMounted as o,nextTick as i,onUnmounted as u,createElementBlock as v,openBlock as h,normalizeClass as s,unref as n,toDisplayString as r,Fragment as p,createElementVNode as c,normalizeStyle as f}from"vue";import{useNamespace as d}from"@qxs-bns/hooks";import{useElementSize as m,useDraggable as g}from"@vueuse/core";import{useCanvas as y}from"./composables.js";const w=["src"];var x=e({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(e,{expose:x}){const b=e;let R=0,H=0,T=0,z=0;const F=d("photo-crop-tool"),N=t(null),W=t(null),k=t(null),L=t(""),M=t(""),E=t({x:0,y:0}),$=t({width:b.defaultWidth,height:b.defaultHeight,x:0,y:0}),{width:C,height:_}=m(N),{width:j}=m(k),{x:U,y:B,style:O}=g(N,{containerElement:W,draggingElement:N,disabled:l((()=>!!M.value)),exact:!0,initialValue:E}),S=l((()=>b.imgFile?URL.createObjectURL(b.imgFile):""));a((()=>b.imgFile),(e=>{e&&!e.type.startsWith("image/")?L.value="文件类型错误":L.value=""}));const P=l((()=>(k.value?.naturalWidth||0)/j.value)),V=l((()=>{const e={left:0,top:0};return"bottom-right"===M.value?(e.left=$.value.x,e.top=$.value.y):"top-left"===M.value?(e.left=$.value.x-C.value,e.top=$.value.y-_.value):"top-right"===M.value?(e.top=$.value.y-_.value,e.left=$.value.x):"bottom-left"===M.value&&(e.left=$.value.x-C.value,e.top=$.value.y),e})),X=l((()=>{const{aspectRatio:e}=b,t={width:`${$.value.width||b.defaultWidth}`,height:`${$.value.height||b.defaultHeight}`,"aspect-ratio":e,top:`${V.value.top}px`,left:`${V.value.left}px`};return"free"===b.zoomType?delete t["aspect-ratio"]:"fixed"===b.zoomType&&delete t.height,F.cssVarBlock(t)}));function Y(e){return e*P.value}function q(e,t){const l=W.value?.clientWidth||1/0,a=W.value?.clientHeight||1/0;return{width:Math.min(Math.max(e,0),l),height:Math.min(Math.max(t,0),a)}}function D(e){const t=e.clientX-R,l=e.clientY-H;if("bottom-right"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T+t,z+l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T+t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}}else if("top-left"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T-t,z-l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T-t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}U.value=V.value.left,B.value=V.value.top}else if("top-right"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T+t,z-l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T+t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}U.value=V.value.left,B.value=V.value.top}else if("bottom-left"===M.value){if("free"===b.zoomType){const{width:e,height:a}=q(T-t,z+l);$.value.width=e,$.value.height=a}else if("fixed"===b.zoomType){const e=Number.parseFloat(b.aspectRatio.split(" / ")[0])/Number.parseFloat(b.aspectRatio.split(" / ")[1]);let l=T-t,a=l/e;const{width:o,height:i}=q(l,a);i>(W.value?.clientHeight||1/0)&&(a=W.value?.clientHeight||1/0,l=a*e),$.value.width=o,$.value.height=i}U.value=V.value.left,B.value=V.value.top}e.preventDefault(),e.stopPropagation()}function I(e,t){M.value=t,R=e.clientX,H=e.clientY,T=$.value.width,z=$.value.height,"bottom-right"===t?($.value.x=U.value,$.value.y=B.value):"top-left"===t?($.value.x=U.value+C.value,$.value.y=B.value+_.value):"top-right"===t?($.value.x=U.value,$.value.y=B.value+_.value):"bottom-left"===t&&($.value.x=U.value+C.value,$.value.y=B.value)}function Q(){M.value=""}return document.addEventListener("mouseup",Q),document.addEventListener("mousemove",D),o((()=>{i((()=>{E.value.x=(W.value?.offsetWidth||0)/2-$.value.width/2,E.value.y=(W.value?.offsetHeight||0)/2-$.value.height/2}))})),u((()=>{S.value&&URL.revokeObjectURL(S.value),document.removeEventListener("mouseup",Q),document.removeEventListener("mousemove",D)})),x({crop:async function(e=k.value){let t="transparent";W.value&&(t=window.getComputedStyle(W.value).backgroundColor);const l=document.createElement("canvas");l.width=Y(W.value?.clientWidth||0),l.height=Y(W.value?.clientHeight||0);const{drawImage:a,cropCanvas:o,drawColor:i}=y(l);return i(0,0,l.width,l.height,t),a(e,Y(e.offsetLeft),Y(e.offsetTop),e.naturalWidth,e.naturalHeight),await o(Y(U.value),Y(B.value),Y(C.value),Y(_.value))},resize:function(){$.value.width=b.defaultWidth,$.value.height=b.defaultHeight,U.value=0,B.value=0}}),(e,t)=>(h(),v("div",{ref_key:"containerBoxRef",ref:W,class:s([n(F).e("img-box")])},[n(L)?(h(),v("div",{key:0,class:s([n(F).e("error-message")])},r(n(L)),3)):(h(),v(p,{key:1},[c("img",{ref_key:"imgRef",ref:k,class:s([n(F).e("image")]),src:n(S)},null,10,w),c("div",{ref_key:"cropBoxRef",ref:N,class:s([n(F).e("crop-tool-box")]),style:f([n(X),n(M)?`left: ${n(V).left}px;top: ${n(V).top}px`:n(O)])},[c("div",{class:s([n(F).e("top-left")]),onMousedown:t[0]||(t[0]=e=>I(e,"top-left"))},null,34),c("div",{class:s([n(F).e("top-right")]),onMousedown:t[1]||(t[1]=e=>I(e,"top-right"))},null,34),c("div",{class:s([n(F).e("bottom-right")]),onMousedown:t[2]||(t[2]=e=>I(e,"bottom-right"))},null,34),c("div",{class:s([n(F).e("bottom-left")]),onMousedown:t[3]||(t[3]=e=>I(e,"bottom-left"))},null,34)],6)],64))],2))}});export{x as default};
 //# sourceMappingURL=photo-crop-tool.vue.js.map

package/es/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":["style","width","height"],"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/es/src/photo-crop-tool/src/photo-crop-tool.vue2.js

@@ -1,6 +1,2 @@
-import _sfc_main from './photo-crop-tool.vue.js';
-
-
-
-export { _sfc_main as default };
+import o from"./photo-crop-tool.vue.js";export{o as default};
 //# sourceMappingURL=photo-crop-tool.vue2.js.map

package/es/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/es/src/subject-action/index.js

@@ -1,7 +1,2 @@
-import { withInstall } from '../withInstall.js';
-import _sfc_main from './src/subject-action.vue.js';
-
-const QxsSubjectAction = withInstall(_sfc_main);
-
-export { QxsSubjectAction, QxsSubjectAction as default };
+import{withInstall as t}from"../withInstall.js";import o from"./src/subject-action.vue.js";const s=t(o);export{s as QxsSubjectAction,s as default};
 //# sourceMappingURL=index.js.map

package/es/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,YAAYC,SAAS;;;;"}
+{"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":"2FAGA,MAAMA,EAAmBC,EAAYC"}