@sepveneto/free-dom 0.0.7 → 0.3.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* ../../../../../../tmp/tmp-23081-wnXhBVUmkYXa/core/src/style/index.css */
+/* ../../../../../../../tmp/tmp-1812-xR8NNKBE7ahD/core/src/style/index.css */
 :root {
   --free-dom-theme: #4089ef;
   --free-dom-line: var(--free-dom-theme);
@@ -23,12 +23,14 @@
 }
 .free-dom__widget-wrapper {
   display: inline-block;
-  position: absolute;
   border: 1px dashed transparent;
   transition: border-color 0.3s;
   box-sizing: content-box;
   user-select: none;
 }
+.free-dom__widget-wrapper.is-absolute {
+  position: absolute;
+}
 .free-dom__widget-wrapper.is-active,
 .free-dom__widget-wrapper.can-move:hover {
   border: 1px dashed var(--free-dom-dot-border);
@@ -38,6 +40,13 @@
 .free-dom__widget-wrapper:hover .free-dom__widget-dot {
   opacity: 1;
 }
+.free-dom__widget-wrapper.is-active .free-dom__resizable-handler,
+.free-dom__widget-wrapper:hover .free-dom__resizable-handler {
+  opacity: 1;
+}
+.free-dom__widget-wrapper.is-scale {
+  transition: none !important;
+}
 .free-dom__widget-dot {
   opacity: 0;
   position: absolute;
@@ -49,3 +58,19 @@
   border: 1px solid var(--free-dom-dot-border);
   background-color: var(--free-dom-dot-border);
 }
+.free-dom__resizable-handler {
+  opacity: 0;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+}
+.free-dom__resizable-handler::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 5px;
+  height: 5px;
+  border-right: 2px solid rgba(0, 0, 0, 0.4);
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}

package/dist/index.d.ts

@@ -1,9 +1,25 @@
 import * as vue_demi from 'vue-demi';
 
 declare const freeDom: vue_demi.DefineComponent<{
-    customStyle: {
-        type: vue_demi.PropType<Partial<vue_demi.CSSProperties>>;
-        required: true;
+    x: {
+        type: NumberConstructor;
+        default: number;
+    };
+    y: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    absolute: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     scale: {
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
@@ -19,6 +35,18 @@ declare const freeDom: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    handler: {
+        type: vue_demi.PropType<"dot" | "mark">;
+        default: undefined;
+    };
+    diagonal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }, {
     widgetRef: vue_demi.ShallowRef<any>;
     canMove: vue_demi.ComputedRef<boolean>;
@@ -28,13 +56,32 @@ declare const freeDom: vue_demi.DefineComponent<{
     canScale: vue_demi.ComputedRef<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[] | undefined>;
     dots: vue_demi.ComputedRef<readonly ["t", "r", "l", "b", "lt", "lb", "rt", "rb"] | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
     active: vue_demi.Ref<boolean>;
+    isAbsolute: vue_demi.ComputedRef<boolean>;
+    isScale: vue_demi.Ref<boolean>;
+    handlerType: vue_demi.ComputedRef<"dot" | "mark">;
     getDotPos: (dot: string) => vue_demi.CSSProperties;
     onMousedown: (evt: MouseEvent) => void;
     onMousedownDot: (evt: MouseEvent, dot: string) => void;
-}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("update:customStyle" | "select")[], "update:customStyle" | "select", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
-    customStyle: {
-        type: vue_demi.PropType<Partial<vue_demi.CSSProperties>>;
-        required: true;
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("update:x" | "update:y" | "update:width" | "update:height" | "select")[], "update:x" | "update:y" | "update:width" | "update:height" | "select", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    x: {
+        type: NumberConstructor;
+        default: number;
+    };
+    y: {
+        type: NumberConstructor;
+        default: number;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    absolute: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     scale: {
         type: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
@@ -50,17 +97,44 @@ declare const freeDom: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    handler: {
+        type: vue_demi.PropType<"dot" | "mark">;
+        default: undefined;
+    };
+    diagonal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }>> & {
-    "onUpdate:customStyle"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:x"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:y"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:width"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:height"?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
 }, {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    absolute: boolean;
     scale: boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[];
     move: boolean;
     preview: boolean;
     limitWidth: number;
     limitHeight: number;
+    handler: "dot" | "mark";
+    diagonal: boolean;
+    grid: [number, number];
 }>;
 declare const freeScene: vue_demi.DefineComponent<{
+    absolute: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     preview: BooleanConstructor;
     move: BooleanConstructor;
     scale: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
@@ -68,9 +142,25 @@ declare const freeScene: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    handler: {
+        type: vue_demi.PropType<"dot" | "mark">;
+        default: undefined;
+    };
+    diagonal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }, {
     rectRef: vue_demi.ShallowRef<null>;
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    absolute: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     preview: BooleanConstructor;
     move: BooleanConstructor;
     scale: vue_demi.PropType<boolean | ("t" | "r" | "l" | "b" | "lt" | "lb" | "rt" | "rb")[]>;
@@ -78,9 +168,25 @@ declare const freeScene: vue_demi.DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    handler: {
+        type: vue_demi.PropType<"dot" | "mark">;
+        default: undefined;
+    };
+    diagonal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    grid: {
+        type: vue_demi.PropType<[number, number]>;
+        default: undefined;
+    };
 }>>, {
+    absolute: boolean;
     move: boolean;
     preview: boolean;
+    handler: "dot" | "mark";
+    diagonal: boolean;
+    grid: [number, number];
     diff: number;
 }>;
 

package/dist/index.js

@@ -60,9 +60,6 @@ function useNormalizeStyle(style) {
   return _style;
 }
 
-// src/components/freeDom.ts
-var import_core = require("@vueuse/core");
-
 // src/util/EventBus.ts
 var _EventBus = class {
   static on(name, callback) {
@@ -84,15 +81,88 @@ __publicField(EventBus, "_callbacks", {});
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
 
+// src/util/index.ts
+function clamp(value, min, max = Infinity) {
+  return Math.max(Math.min(value, max), min);
+}
+function snapToGrid(grid, pendingX, pendingY) {
+  const x = Math.round(pendingX / grid[0]) * grid[0];
+  const y = Math.round(pendingY / grid[1]) * grid[1];
+  return [x, y];
+}
+
+// src/hooks/use-resize.ts
+var MIN_SIZE = 20;
+function useResize(startX, startY, rect, dot, diagonal, snapGrid, callbacks) {
+  const isT = dot ? /t/.test(dot) : false;
+  const isL = dot ? /l/.test(dot) : false;
+  const isB = dot ? /b/.test(dot) : false;
+  const isR = dot ? /r/.test(dot) : false;
+  const isDiagonal = dot ? dot.length === 2 : false;
+  const { width: cWidth, height: cHeight, x, y } = rect;
+  const move = (mouseEvt) => {
+    const { clientX, clientY } = mouseEvt;
+    let deltaX = clientX - startX;
+    let deltaY = clientY - startY;
+    if (Array.isArray(snapGrid)) {
+      [deltaX, deltaY] = snapToGrid(snapGrid, deltaX, deltaY);
+    }
+    const rate = cWidth / cHeight;
+    const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
+    const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
+    if (isDiagonal && diagonal) {
+      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        rect.x = x + (isL ? deltaX : 0);
+        rect.width = clamp(newWidth, MIN_SIZE);
+        rect.height = clamp(newWidth / rate, MIN_SIZE);
+      } else {
+        rect.y = y + (isT ? deltaY : 0);
+        rect.height = clamp(newHeight, MIN_SIZE);
+        rect.width = clamp(newHeight * rate, MIN_SIZE);
+      }
+    } else {
+      rect.x = x + (isL ? deltaX : 0);
+      rect.y = y + (isT ? deltaY : 0);
+      rect.width = clamp(newWidth, MIN_SIZE);
+      rect.height = clamp(newHeight, MIN_SIZE);
+    }
+    callbacks && callbacks.onMove && callbacks.onMove();
+  };
+  const up = () => {
+    document.removeEventListener("mousemove", move);
+    document.removeEventListener("mouseup", up);
+    callbacks && callbacks.onMove && callbacks.onUp();
+  };
+  document.addEventListener("mousemove", move);
+  document.addEventListener("mouseup", up);
+}
+
 // src/components/freeDom.ts
+var import_core = require("@vueuse/core");
 var import_uuid = require("uuid");
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
 var FreeDom = (0, import_vue_demi2.defineComponent)({
   name: "FreeDom",
   props: {
-    customStyle: {
-      type: Object,
-      required: true
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
+    absolute: {
+      type: Boolean,
+      default: void 0
     },
     scale: {
       type: [Boolean, Array],
@@ -107,15 +177,31 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
     limitHeight: {
       type: Number,
       default: void 0
+    },
+    handler: {
+      type: String,
+      default: void 0
+    },
+    diagonal: {
+      type: Boolean,
+      default: void 0
+    },
+    grid: {
+      type: Object,
+      default: void 0
     }
   },
-  emits: ["update:customStyle", "select"],
+  emits: ["update:x", "update:y", "update:width", "update:height", "select"],
   setup(props, { emit }) {
     const active = (0, import_vue_demi2.ref)(false);
     const SceneContext = (0, import_vue_demi2.inject)(SceneToken);
     const _preview = (0, import_vue_demi2.computed)(() => SceneContext?.preview || props.preview);
     const canScale = (0, import_vue_demi2.computed)(() => !_preview.value && (SceneContext?.scale || props.scale));
     const canMove = (0, import_vue_demi2.computed)(() => !_preview.value && (SceneContext?.move || props.move));
+    const isAbsolute = (0, import_vue_demi2.computed)(() => props.absolute ?? SceneContext?.absolute ?? true);
+    const handlerType = (0, import_vue_demi2.computed)(() => props.handler ?? SceneContext?.handler ?? "dot");
+    const snapGrid = (0, import_vue_demi2.computed)(() => props.grid ?? SceneContext?.grid);
+    const diagonal = (0, import_vue_demi2.computed)(() => props.diagonal ?? SceneContext?.diagonal ?? true);
     const widgetRef = (0, import_vue_demi2.shallowRef)();
     const _style = (0, import_vue_demi2.ref)({});
     const wrapStyle = useNormalizeStyle(_style);
@@ -128,44 +214,40 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
       width: 0,
       height: 0
     });
+    const triggerThrottle = (0, import_core.useThrottleFn)(trigger);
     const context = {
       _rect,
       trigger
     };
-    (0, import_vue_demi2.onMounted)(() => {
-      SceneContext?.register(uuid, context);
-    });
     (0, import_core.onClickOutside)(widgetRef, () => {
       active.value = false;
     });
-    function normalize(style) {
-      const { transform, width, height } = style;
-      const { x, y } = getPos(transform);
-      _rect.width = parseNum(width ?? 0);
-      _rect.height = parseNum(height ?? 0);
-      _rect.x = x;
-      _rect.y = y;
-    }
     function parseNum(val) {
       return typeof val === "number" ? val : parseFloat(val);
     }
-    (0, import_vue_demi2.watch)(() => props.customStyle, (_style2) => {
-      normalize(_style2);
-      trigger();
+    let init = false;
+    (0, import_vue_demi2.watchEffect)(() => {
+      _rect.width = props.width;
+      _rect.height = props.height;
+      _rect.x = props.x;
+      _rect.y = props.y;
+      init && triggerThrottle();
+      init = true;
     });
     (0, import_vue_demi2.onMounted)(async () => {
-      _style.value = props.customStyle;
+      SceneContext?.register(uuid, context);
       await (0, import_vue_demi2.nextTick)();
       const rect = widgetRef.value.getBoundingClientRect();
-      normalize(props.customStyle);
-      _rect.width = rect.width;
-      _rect.height = rect.height;
+      _rect.width = _rect.width || rect.width;
+      _rect.height = _rect.height || rect.height;
+      _rect.x = _rect.x || 0;
+      _rect.y = _rect.y || 0;
       trigger();
+      emitPos();
     });
     function trigger() {
       const { x, y, width, height } = _rect;
       _style.value = {
-        ...props.customStyle,
         transform: `translate(${x}px, ${y}px)`,
         width,
         height
@@ -192,54 +274,27 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
       if (isMove.value)
         return;
       isScale.value = true;
-      const { x, y, width, height } = getStyle(_style.value);
-      const cWidth = width;
-      const cHeight = height;
-      const startX = evt.clientX;
-      const startY = evt.clientY;
-      const isT = /t/.test(dot);
-      const isL = /l/.test(dot);
-      const isB = /b/.test(dot);
-      const isR = /r/.test(dot);
-      const isDiagonal = dot.length === 2;
-      const move = (mouseEvt) => {
-        const currX = mouseEvt.clientX;
-        const currY = mouseEvt.clientY;
-        const deltaX = currX - startX;
-        const deltaY = currY - startY;
-        const rate = cWidth / cHeight;
-        const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
-        const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
-        if (isDiagonal) {
-          if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-            _rect.x = x + (isL ? deltaX : 0);
-            _rect.width = newWidth < 0 ? 0 : newWidth;
-            _rect.height = newWidth / rate;
-          } else {
-            _rect.y = y + (isT ? deltaY : 0);
-            _rect.height = newHeight < 0 ? 0 : newHeight;
-            _rect.width = newHeight * rate;
-          }
-        } else {
-          _rect.x = x + (isL ? deltaX : 0);
-          _rect.y = y + (isT ? deltaY : 0);
-          _rect.width = newWidth < 0 ? 0 : newWidth;
-          _rect.height = newHeight < 0 ? 0 : newHeight;
+      active.value = true;
+      const { clientX, clientY } = evt;
+      useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
+        onMove() {
+          if (!checkValid(_rect))
+            return;
+          EventBus.emit("move", uuid);
+          trigger();
+        },
+        onUp() {
+          isScale.value = false;
+          EventBus.emit("moveup", uuid);
+          emitPos();
         }
-        if (!checkValid(_rect))
-          return;
-        EventBus.emit("move", uuid);
-        trigger();
-      };
-      const up = () => {
-        isScale.value = false;
-        EventBus.emit("moveup", uuid);
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", up);
-        emit("update:customStyle", _style.value);
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", up);
+      });
+    }
+    function emitPos() {
+      emit("update:x", _rect.x);
+      emit("update:y", _rect.y);
+      emit("update:width", _rect.width);
+      emit("update:height", _rect.height);
     }
     function getDotPos(dot) {
       if (!_style.value)
@@ -262,8 +317,8 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         }
       }
       return {
-        top: top + "px",
-        left: left + "px",
+        top: handlerType.value === "dot" ? top : top - 3 + "px",
+        left: handlerType.value === "dot" ? left : left - 3 + "px",
         cursor: dot.split("").reverse().map((item) => direct[item]).join("") + "-resize"
       };
     }
@@ -292,7 +347,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         EventBus.emit("moveup", uuid);
         document.removeEventListener("mousemove", move);
         document.removeEventListener("mouseup", up);
-        emit("update:customStyle", _style.value);
+        emitPos();
         emit("select", _rect);
       };
       document.addEventListener("mousemove", move);
@@ -336,6 +391,9 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
       canScale,
       dots,
       active,
+      isAbsolute,
+      isScale,
+      handlerType,
       getDotPos,
       onMousedown,
       onMousedownDot
@@ -353,7 +411,7 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         });
       }
       return (0, import_vue_demi2.h)("div", {
-        class: "free-dom__widget-dot",
+        class: this.handlerType === "dot" ? "free-dom__widget-dot" : "free-dom__resizable-handler",
         style: this.getDotPos(dot),
         onMousedown: (evt) => this.onMousedownDot(evt, dot)
       });
@@ -365,6 +423,8 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         {
           class: [
             "free-dom__widget-wrapper",
+            { "is-scale": this.isScale },
+            { "is-absolute": this.isAbsolute },
             { "can-move": this.canMove },
             { "is-active": this.active }
           ],
@@ -383,13 +443,15 @@ var FreeDom = (0, import_vue_demi2.defineComponent)({
         ref: "widgetRef",
         class: [
           "free-dom__widget-wrapper",
+          { "is-scale": this.isScale },
+          { "is-absolute": this.isAbsolute },
           { "can-move": this.canMove },
           { "is-active": this.active }
         ],
         style: this.wrapStyle,
         onMousedown: this.onMousedown
       },
-      [dots, defaultSlot]
+      [defaultSlot, dots]
     );
   }
 });
@@ -561,12 +623,28 @@ var markLine_default = (0, import_vue_demi3.defineComponent)({
 
 // src/components/freeDomWrap.ts
 var freeDomWrapProps = {
+  absolute: {
+    type: Boolean,
+    default: void 0
+  },
   preview: Boolean,
   move: Boolean,
   scale: [Boolean, Array],
   diff: {
     type: Number,
     default: 3
+  },
+  handler: {
+    type: String,
+    default: void 0
+  },
+  diagonal: {
+    type: Boolean,
+    default: void 0
+  },
+  grid: {
+    type: Object,
+    default: void 0
   }
 };
 var FreeDomWrap = (0, import_vue_demi4.defineComponent)({

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   reactive,
   isVue2,
   shallowRef,
-  watch as watch2
+  watchEffect
 } from "vue-demi";
 
 // src/hooks/use-normalize-style.ts
@@ -47,9 +47,6 @@ function useNormalizeStyle(style) {
   return _style;
 }
 
-// src/components/freeDom.ts
-import { onClickOutside } from "@vueuse/core";
-
 // src/util/EventBus.ts
 var _EventBus = class {
   static on(name, callback) {
@@ -71,15 +68,88 @@ __publicField(EventBus, "_callbacks", {});
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
 
+// src/util/index.ts
+function clamp(value, min, max = Infinity) {
+  return Math.max(Math.min(value, max), min);
+}
+function snapToGrid(grid, pendingX, pendingY) {
+  const x = Math.round(pendingX / grid[0]) * grid[0];
+  const y = Math.round(pendingY / grid[1]) * grid[1];
+  return [x, y];
+}
+
+// src/hooks/use-resize.ts
+var MIN_SIZE = 20;
+function useResize(startX, startY, rect, dot, diagonal, snapGrid, callbacks) {
+  const isT = dot ? /t/.test(dot) : false;
+  const isL = dot ? /l/.test(dot) : false;
+  const isB = dot ? /b/.test(dot) : false;
+  const isR = dot ? /r/.test(dot) : false;
+  const isDiagonal = dot ? dot.length === 2 : false;
+  const { width: cWidth, height: cHeight, x, y } = rect;
+  const move = (mouseEvt) => {
+    const { clientX, clientY } = mouseEvt;
+    let deltaX = clientX - startX;
+    let deltaY = clientY - startY;
+    if (Array.isArray(snapGrid)) {
+      [deltaX, deltaY] = snapToGrid(snapGrid, deltaX, deltaY);
+    }
+    const rate = cWidth / cHeight;
+    const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
+    const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
+    if (isDiagonal && diagonal) {
+      if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        rect.x = x + (isL ? deltaX : 0);
+        rect.width = clamp(newWidth, MIN_SIZE);
+        rect.height = clamp(newWidth / rate, MIN_SIZE);
+      } else {
+        rect.y = y + (isT ? deltaY : 0);
+        rect.height = clamp(newHeight, MIN_SIZE);
+        rect.width = clamp(newHeight * rate, MIN_SIZE);
+      }
+    } else {
+      rect.x = x + (isL ? deltaX : 0);
+      rect.y = y + (isT ? deltaY : 0);
+      rect.width = clamp(newWidth, MIN_SIZE);
+      rect.height = clamp(newHeight, MIN_SIZE);
+    }
+    callbacks && callbacks.onMove && callbacks.onMove();
+  };
+  const up = () => {
+    document.removeEventListener("mousemove", move);
+    document.removeEventListener("mouseup", up);
+    callbacks && callbacks.onMove && callbacks.onUp();
+  };
+  document.addEventListener("mousemove", move);
+  document.addEventListener("mouseup", up);
+}
+
 // src/components/freeDom.ts
+import { onClickOutside, useThrottleFn } from "@vueuse/core";
 import { v4 as uuidv4 } from "uuid";
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
 var FreeDom = defineComponent({
   name: "FreeDom",
   props: {
-    customStyle: {
-      type: Object,
-      required: true
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
+    absolute: {
+      type: Boolean,
+      default: void 0
     },
     scale: {
       type: [Boolean, Array],
@@ -94,15 +164,31 @@ var FreeDom = defineComponent({
     limitHeight: {
       type: Number,
       default: void 0
+    },
+    handler: {
+      type: String,
+      default: void 0
+    },
+    diagonal: {
+      type: Boolean,
+      default: void 0
+    },
+    grid: {
+      type: Object,
+      default: void 0
     }
   },
-  emits: ["update:customStyle", "select"],
+  emits: ["update:x", "update:y", "update:width", "update:height", "select"],
   setup(props, { emit }) {
     const active = ref2(false);
     const SceneContext = inject(SceneToken);
     const _preview = computed(() => SceneContext?.preview || props.preview);
     const canScale = computed(() => !_preview.value && (SceneContext?.scale || props.scale));
     const canMove = computed(() => !_preview.value && (SceneContext?.move || props.move));
+    const isAbsolute = computed(() => props.absolute ?? SceneContext?.absolute ?? true);
+    const handlerType = computed(() => props.handler ?? SceneContext?.handler ?? "dot");
+    const snapGrid = computed(() => props.grid ?? SceneContext?.grid);
+    const diagonal = computed(() => props.diagonal ?? SceneContext?.diagonal ?? true);
     const widgetRef = shallowRef();
     const _style = ref2({});
     const wrapStyle = useNormalizeStyle(_style);
@@ -115,44 +201,40 @@ var FreeDom = defineComponent({
       width: 0,
       height: 0
     });
+    const triggerThrottle = useThrottleFn(trigger);
     const context = {
       _rect,
       trigger
     };
-    onMounted(() => {
-      SceneContext?.register(uuid, context);
-    });
     onClickOutside(widgetRef, () => {
       active.value = false;
     });
-    function normalize(style) {
-      const { transform, width, height } = style;
-      const { x, y } = getPos(transform);
-      _rect.width = parseNum(width ?? 0);
-      _rect.height = parseNum(height ?? 0);
-      _rect.x = x;
-      _rect.y = y;
-    }
     function parseNum(val) {
       return typeof val === "number" ? val : parseFloat(val);
     }
-    watch2(() => props.customStyle, (_style2) => {
-      normalize(_style2);
-      trigger();
+    let init = false;
+    watchEffect(() => {
+      _rect.width = props.width;
+      _rect.height = props.height;
+      _rect.x = props.x;
+      _rect.y = props.y;
+      init && triggerThrottle();
+      init = true;
     });
     onMounted(async () => {
-      _style.value = props.customStyle;
+      SceneContext?.register(uuid, context);
       await nextTick();
       const rect = widgetRef.value.getBoundingClientRect();
-      normalize(props.customStyle);
-      _rect.width = rect.width;
-      _rect.height = rect.height;
+      _rect.width = _rect.width || rect.width;
+      _rect.height = _rect.height || rect.height;
+      _rect.x = _rect.x || 0;
+      _rect.y = _rect.y || 0;
       trigger();
+      emitPos();
     });
     function trigger() {
       const { x, y, width, height } = _rect;
       _style.value = {
-        ...props.customStyle,
         transform: `translate(${x}px, ${y}px)`,
         width,
         height
@@ -179,54 +261,27 @@ var FreeDom = defineComponent({
       if (isMove.value)
         return;
       isScale.value = true;
-      const { x, y, width, height } = getStyle(_style.value);
-      const cWidth = width;
-      const cHeight = height;
-      const startX = evt.clientX;
-      const startY = evt.clientY;
-      const isT = /t/.test(dot);
-      const isL = /l/.test(dot);
-      const isB = /b/.test(dot);
-      const isR = /r/.test(dot);
-      const isDiagonal = dot.length === 2;
-      const move = (mouseEvt) => {
-        const currX = mouseEvt.clientX;
-        const currY = mouseEvt.clientY;
-        const deltaX = currX - startX;
-        const deltaY = currY - startY;
-        const rate = cWidth / cHeight;
-        const newWidth = cWidth + (isL ? -deltaX : isR ? deltaX : 0);
-        const newHeight = cHeight + (isT ? -deltaY : isB ? deltaY : 0);
-        if (isDiagonal) {
-          if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-            _rect.x = x + (isL ? deltaX : 0);
-            _rect.width = newWidth < 0 ? 0 : newWidth;
-            _rect.height = newWidth / rate;
-          } else {
-            _rect.y = y + (isT ? deltaY : 0);
-            _rect.height = newHeight < 0 ? 0 : newHeight;
-            _rect.width = newHeight * rate;
-          }
-        } else {
-          _rect.x = x + (isL ? deltaX : 0);
-          _rect.y = y + (isT ? deltaY : 0);
-          _rect.width = newWidth < 0 ? 0 : newWidth;
-          _rect.height = newHeight < 0 ? 0 : newHeight;
+      active.value = true;
+      const { clientX, clientY } = evt;
+      useResize(clientX, clientY, _rect, dot, diagonal.value, snapGrid.value, {
+        onMove() {
+          if (!checkValid(_rect))
+            return;
+          EventBus.emit("move", uuid);
+          trigger();
+        },
+        onUp() {
+          isScale.value = false;
+          EventBus.emit("moveup", uuid);
+          emitPos();
         }
-        if (!checkValid(_rect))
-          return;
-        EventBus.emit("move", uuid);
-        trigger();
-      };
-      const up = () => {
-        isScale.value = false;
-        EventBus.emit("moveup", uuid);
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", up);
-        emit("update:customStyle", _style.value);
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", up);
+      });
+    }
+    function emitPos() {
+      emit("update:x", _rect.x);
+      emit("update:y", _rect.y);
+      emit("update:width", _rect.width);
+      emit("update:height", _rect.height);
     }
     function getDotPos(dot) {
       if (!_style.value)
@@ -249,8 +304,8 @@ var FreeDom = defineComponent({
         }
       }
       return {
-        top: top + "px",
-        left: left + "px",
+        top: handlerType.value === "dot" ? top : top - 3 + "px",
+        left: handlerType.value === "dot" ? left : left - 3 + "px",
         cursor: dot.split("").reverse().map((item) => direct[item]).join("") + "-resize"
       };
     }
@@ -279,7 +334,7 @@ var FreeDom = defineComponent({
         EventBus.emit("moveup", uuid);
         document.removeEventListener("mousemove", move);
         document.removeEventListener("mouseup", up);
-        emit("update:customStyle", _style.value);
+        emitPos();
         emit("select", _rect);
       };
       document.addEventListener("mousemove", move);
@@ -323,6 +378,9 @@ var FreeDom = defineComponent({
       canScale,
       dots,
       active,
+      isAbsolute,
+      isScale,
+      handlerType,
       getDotPos,
       onMousedown,
       onMousedownDot
@@ -340,7 +398,7 @@ var FreeDom = defineComponent({
         });
       }
       return h("div", {
-        class: "free-dom__widget-dot",
+        class: this.handlerType === "dot" ? "free-dom__widget-dot" : "free-dom__resizable-handler",
         style: this.getDotPos(dot),
         onMousedown: (evt) => this.onMousedownDot(evt, dot)
       });
@@ -352,6 +410,8 @@ var FreeDom = defineComponent({
         {
           class: [
             "free-dom__widget-wrapper",
+            { "is-scale": this.isScale },
+            { "is-absolute": this.isAbsolute },
             { "can-move": this.canMove },
             { "is-active": this.active }
           ],
@@ -370,13 +430,15 @@ var FreeDom = defineComponent({
         ref: "widgetRef",
         class: [
           "free-dom__widget-wrapper",
+          { "is-scale": this.isScale },
+          { "is-absolute": this.isAbsolute },
           { "can-move": this.canMove },
           { "is-active": this.active }
         ],
         style: this.wrapStyle,
         onMousedown: this.onMousedown
       },
-      [dots, defaultSlot]
+      [defaultSlot, dots]
     );
   }
 });
@@ -548,12 +610,28 @@ var markLine_default = defineComponent2({
 
 // src/components/freeDomWrap.ts
 var freeDomWrapProps = {
+  absolute: {
+    type: Boolean,
+    default: void 0
+  },
   preview: Boolean,
   move: Boolean,
   scale: [Boolean, Array],
   diff: {
     type: Number,
     default: 3
+  },
+  handler: {
+    type: String,
+    default: void 0
+  },
+  diagonal: {
+    type: Boolean,
+    default: void 0
+  },
+  grid: {
+    type: Object,
+    default: void 0
   }
 };
 var FreeDomWrap = defineComponent3({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sepveneto/free-dom",
-  "version": "0.0.7",
+  "version": "0.3.0",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -15,6 +15,12 @@
     },
     "./css": "./dist/index.css"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "vue-demi-switch 3 && vitepress dev docs",
+    "release": "bumpp package.json --commit --push --tag",
+    "test": "vitest"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -23,15 +29,6 @@
     "uuid": "^9.0.0",
     "vue-demi": "latest"
   },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.1",
-    "vue": "^2.0.0 || >=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@types/uuid": "^8.3.4",
     "bumpp": "^8.2.1",
@@ -44,11 +41,5 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/SepVeneto/free-dom"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "vue-demi-switch 3 && vitepress dev docs",
-    "release": "pnpm build && bumpp package.json --commit --push --tag && pnpm -r publish --access public",
-    "test": "vitest"
   }
-}
+}