@sepveneto/free-dom 0.0.6

package/dist/index.mjs

@@ -0,0 +1,600 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// src/components/freeDom.ts
+import {
+  nextTick,
+  onMounted,
+  defineComponent,
+  h,
+  computed,
+  inject,
+  ref as ref2,
+  reactive,
+  isVue2,
+  shallowRef,
+  watch as watch2
+} from "vue-demi";
+
+// src/hooks/use-normalize-style.ts
+import { ref, unref, watch } from "vue-demi";
+function useNormalizeStyle(style) {
+  const _style = ref({
+    transition: "inherit"
+  });
+  watch(() => style, (data) => {
+    const res = Object.entries(unref(data)).reduce(
+      (obj, _style2) => {
+        const [key, value] = _style2;
+        if (typeof value === "number") {
+          obj[key] = `${value}px`;
+        } else {
+          obj[key] = value;
+        }
+        return obj;
+      },
+      {}
+    );
+    _style.value = {
+      ..._style.value,
+      ...res
+    };
+  }, { deep: true });
+  return _style;
+}
+
+// src/components/freeDom.ts
+import { onClickOutside } from "@vueuse/core";
+
+// src/util/EventBus.ts
+var _EventBus = class {
+  static on(name, callback) {
+    if (!Array.isArray(_EventBus._callbacks[name])) {
+      _EventBus._callbacks[name] = [];
+    }
+    _EventBus._callbacks[name].push(callback);
+  }
+  static emit(name, ...args) {
+    _EventBus._callbacks[name]?.forEach((item) => item.apply(this, args));
+  }
+  static off(name) {
+    _EventBus._callbacks[name].length = 0;
+  }
+};
+var EventBus = _EventBus;
+__publicField(EventBus, "_callbacks", {});
+
+// src/util/tokens.ts
+var SceneToken = Symbol("Scene");
+
+// src/components/freeDom.ts
+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
+    },
+    scale: {
+      type: [Boolean, Array],
+      default: void 0
+    },
+    move: Boolean,
+    preview: Boolean,
+    limitWidth: {
+      type: Number,
+      default: void 0
+    },
+    limitHeight: {
+      type: Number,
+      default: void 0
+    }
+  },
+  emits: ["update:customStyle", "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 widgetRef = shallowRef();
+    const _style = ref2({});
+    const wrapStyle = useNormalizeStyle(_style);
+    const uuid = uuidv4();
+    const isScale = ref2(false);
+    const isMove = ref2(false);
+    const _rect = reactive({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    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();
+    });
+    onMounted(async () => {
+      _style.value = props.customStyle;
+      await nextTick();
+      const rect = widgetRef.value.getBoundingClientRect();
+      normalize(props.customStyle);
+      _rect.width = rect.width;
+      _rect.height = rect.height;
+      trigger();
+    });
+    function trigger() {
+      const { x, y, width, height } = _rect;
+      _style.value = {
+        ...props.customStyle,
+        transform: `translate(${x}px, ${y}px)`,
+        width,
+        height
+      };
+    }
+    const _dots = computed(() => {
+      return SceneContext && Array.isArray(SceneContext.scale) ? SceneContext.scale : props.scale;
+    });
+    const dots = computed(() => {
+      if (!isActive.value)
+        return [];
+      return Array.isArray(_dots.value) ? _dots.value : Dots;
+    });
+    const direct = {
+      l: "w",
+      r: "e",
+      t: "n",
+      b: "s"
+    };
+    const isActive = shallowRef(true);
+    function onMousedownDot(evt, dot) {
+      evt.stopPropagation();
+      evt.preventDefault();
+      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;
+        }
+        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 getDotPos(dot) {
+      if (!_style.value)
+        return {};
+      const { width, height } = _style.value;
+      const isL = /l/.test(dot);
+      const isR = /r/.test(dot);
+      const isT = /t/.test(dot);
+      let left, top;
+      if (dot.length === 2) {
+        left = isL ? 0 : width;
+        top = isT ? 0 : height;
+      } else {
+        if (isL || isR) {
+          left = isL ? 0 : width;
+          top = Number(height) / 2;
+        } else {
+          left = Number(width) / 2;
+          top = isT ? 0 : height;
+        }
+      }
+      return {
+        top: top + "px",
+        left: left + "px",
+        cursor: dot.split("").reverse().map((item) => direct[item]).join("") + "-resize"
+      };
+    }
+    function onMousedown(evt) {
+      evt.stopPropagation();
+      if (isScale.value || !canMove.value)
+        return;
+      isMove.value = true;
+      active.value = true;
+      const pos = getStyle(_style.value);
+      const move = (mouseEvt) => {
+        const { clientX, clientY } = mouseEvt;
+        const x = clientX - evt.clientX + pos.x;
+        const y = clientY - evt.clientY + pos.y;
+        _rect.x = x;
+        _rect.y = y;
+        _rect.width = pos.width;
+        _rect.height = pos.height;
+        if (!checkValid(_rect))
+          return;
+        EventBus.emit("move", uuid);
+        trigger();
+      };
+      const up = () => {
+        isMove.value = false;
+        EventBus.emit("moveup", uuid);
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+        emit("update:customStyle", _style.value);
+        emit("select", _rect);
+      };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    }
+    function checkValid(rect) {
+      if (SceneContext) {
+        return SceneContext.checkValid(rect);
+      } else if (props.limitWidth && props.limitHeight) {
+        const { x, y, width, height } = rect;
+        return x >= 0 && x + width <= props.limitWidth && y >= 0 && y + height <= props.limitHeight;
+      } else {
+        return true;
+      }
+    }
+    function getStyle(style) {
+      const { transform, width, height } = style;
+      const { x, y } = getPos(transform);
+      return {
+        x: x ? Number(x) : 0,
+        y: y ? Number(y) : 0,
+        width: parseFloat(width),
+        height: parseFloat(height)
+      };
+    }
+    function getPos(transform) {
+      if (!transform) {
+        return {
+          x: 0,
+          y: 0
+        };
+      }
+      const posRegexp = /translate\(([.0-9]+)px[, ]+([.0-9]+)px\)/;
+      const [, x, y] = posRegexp.exec(transform) ?? [];
+      return { x: parseNum(x), y: parseNum(y) };
+    }
+    return {
+      widgetRef,
+      canMove,
+      wrapStyle,
+      canScale,
+      dots,
+      active,
+      getDotPos,
+      onMousedown,
+      onMousedownDot
+    };
+  },
+  render() {
+    const dots = this.canScale ? this.dots.map((dot) => {
+      if (isVue2) {
+        return h("div", {
+          class: "free-dom__widget-dot",
+          style: this.getDotPos(dot),
+          on: {
+            mousedown: (evt) => this.onMousedownDot(evt, dot)
+          }
+        });
+      }
+      return h("div", {
+        class: "free-dom__widget-dot",
+        style: this.getDotPos(dot),
+        onMousedown: (evt) => this.onMousedownDot(evt, dot)
+      });
+    }) : null;
+    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
+    if (isVue2) {
+      return h(
+        "section",
+        {
+          class: [
+            "free-dom__widget-wrapper",
+            { "can-move": this.canMove },
+            { "is-active": this.active }
+          ],
+          style: this.wrapStyle,
+          ref: "widgetRef",
+          on: {
+            mousedown: this.onMousedown
+          }
+        },
+        [dots, defaultSlot]
+      );
+    }
+    return h(
+      "section",
+      {
+        ref: "widgetRef",
+        class: [
+          "free-dom__widget-wrapper",
+          { "can-move": this.canMove },
+          { "is-active": this.active }
+        ],
+        style: this.wrapStyle,
+        onMousedown: this.onMousedown
+      },
+      [dots, defaultSlot]
+    );
+  }
+});
+
+// src/components/freeDomWrap.ts
+import { defineComponent as defineComponent3, shallowRef as shallowRef3, h as h3, provide, reactive as reactive3, ref as ref4, toRefs } from "vue-demi";
+import { useElementBounding } from "@vueuse/core";
+
+// src/components/markLine.ts
+import { h as h2, defineComponent as defineComponent2, shallowRef as shallowRef2, ref as ref3, reactive as reactive2, inject as inject2, onBeforeUnmount } from "vue-demi";
+var lineType = ["xt", "xc", "xb", "yl", "yc", "yr"];
+var markLine_default = defineComponent2({
+  setup() {
+    const SceneContext = inject2(SceneToken);
+    const lines = shallowRef2(lineType);
+    const diff = ref3(SceneContext.diff);
+    const nodes = SceneContext.nodes;
+    const lineStatus = reactive2({
+      xt: {
+        show: false,
+        pos: 0
+      },
+      xc: {
+        show: false,
+        pos: 0
+      },
+      xb: {
+        show: false,
+        pos: 0
+      },
+      yl: {
+        show: false,
+        pos: 0
+      },
+      yc: {
+        show: false,
+        pos: 0
+      },
+      yr: {
+        show: false,
+        pos: 0
+      }
+    });
+    EventBus.on("move", async (uuid) => {
+      const current = nodes.find((node) => node.uuid === uuid)?.node ?? {};
+      clearStatus();
+      nodes.forEach((node) => {
+        if (node.uuid === uuid)
+          return;
+        const _current = normalize(current._rect);
+        const _target = normalize(node.node._rect);
+        if (isNearly(_current.top, _target.top)) {
+          lineStatus.xt = {
+            show: true,
+            pos: _target.top
+          };
+          current._rect.y = _target.top;
+        }
+        if (isNearly(_current.bottom, _target.top)) {
+          lineStatus.xt = {
+            show: true,
+            pos: _target.top
+          };
+          current._rect.y = _target.top - _current.height;
+        }
+        if (isNearly(_current.centerY, _target.centerY)) {
+          lineStatus.xc = {
+            show: true,
+            pos: _target.centerY
+          };
+          current._rect.y = _target.centerY - _current.height / 2;
+        }
+        if (isNearly(_current.top, _target.bottom)) {
+          lineStatus.xb = {
+            show: true,
+            pos: _target.bottom
+          };
+          current._rect.y = _target.bottom;
+        }
+        if (isNearly(_current.bottom, _target.bottom)) {
+          lineStatus.xb = {
+            show: true,
+            pos: _target.bottom
+          };
+          current._rect.y = _target.bottom - _current.height;
+        }
+        if (isNearly(_current.left, _target.left)) {
+          lineStatus.yl = {
+            show: true,
+            pos: _target.left
+          };
+          current._rect.x = _target.left;
+        }
+        if (isNearly(_current.right, _target.left)) {
+          lineStatus.yl = {
+            show: true,
+            pos: _target.left
+          };
+          current._rect.x = _target.left - _current.width;
+        }
+        if (isNearly(_current.centerX, _target.centerX)) {
+          lineStatus.yc = {
+            show: true,
+            pos: _target.centerX
+          };
+          current._rect.x = _target.centerX - _current.width / 2;
+        }
+        if (isNearly(_current.left, _target.right)) {
+          lineStatus.yr = {
+            show: true,
+            pos: _target.right
+          };
+          current._rect.x = _target.right;
+        }
+        if (isNearly(_current.right, _target.right)) {
+          lineStatus.yr = {
+            show: true,
+            pos: _target.right
+          };
+          current._rect.x = _target.right - _current.width;
+        }
+      });
+    });
+    EventBus.on("moveup", clearStatus);
+    onBeforeUnmount(() => {
+      EventBus.off("move");
+      EventBus.off("moveup");
+    });
+    function clearStatus() {
+      lineStatus.xt.show = false;
+      lineStatus.xc.show = false;
+      lineStatus.xb.show = false;
+      lineStatus.yl.show = false;
+      lineStatus.yc.show = false;
+      lineStatus.yr.show = false;
+    }
+    function normalize(rect) {
+      return {
+        top: rect.y,
+        bottom: rect.y + rect.height,
+        left: rect.x,
+        right: rect.x + rect.width,
+        width: rect.width,
+        height: rect.height,
+        centerX: rect.x + rect.width / 2,
+        centerY: rect.y + rect.height / 2
+      };
+    }
+    function isNearly(curr, target) {
+      return Math.abs(curr - target) <= diff.value;
+    }
+    return {
+      lines,
+      diff,
+      lineStatus
+    };
+  },
+  render() {
+    const _line = (line, info) => h2("div", {
+      style: { [line.includes("x") ? "top" : "left"]: info.pos + "px" },
+      class: [line.includes("x") ? "free-dom__xline" : "free-dom__yline", "free-dom__line"]
+    });
+    const _lines = this.lines.filter((line) => this.lineStatus[line].show).map((line) => _line(line, this.lineStatus[line]));
+    return h2("div", {
+      class: "free-dom__mark-line"
+    }, _lines);
+  }
+});
+
+// src/components/freeDomWrap.ts
+var freeDomWrapProps = {
+  preview: Boolean,
+  move: Boolean,
+  scale: [Boolean, Array],
+  diff: {
+    type: Number,
+    default: 3
+  }
+};
+var FreeDomWrap = defineComponent3({
+  name: "FreeDomWrap",
+  props: freeDomWrapProps,
+  setup(props) {
+    const rectRef = shallowRef3(null);
+    const rect = useElementBounding(rectRef);
+    const nodes = ref4([]);
+    function register(uuid, node) {
+      nodes.value.push({ uuid, node });
+    }
+    function checkValid(pos) {
+      const { x, y, width, height } = pos;
+      return x >= 0 && x + width <= rect.width.value && y >= 0 && y + height <= rect.height.value;
+    }
+    provide(
+      SceneToken,
+      reactive3({
+        ...toRefs(props),
+        nodes,
+        register,
+        checkValid
+      })
+    );
+    return {
+      rectRef
+    };
+  },
+  render() {
+    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
+    return h3("section", {
+      ref: "rectRef"
+    }, [defaultSlot, h3(markLine_default)]);
+  }
+});
+
+// src/index.ts
+var freeDom = FreeDom;
+var freeScene = FreeDomWrap;
+export {
+  freeDom,
+  freeScene
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@sepveneto/free-dom",
+  "version": "0.0.6",
+  "description": "",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/type.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./css": "./dist/theme.css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vueuse/core": "^9.2.0",
+    "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",
+    "esbuild-plugin-sass": "^1.0.1",
+    "tsup": "^6.5.0",
+    "vue": "^3.2.39"
+  },
+  "changelog": "https://github.com/SepVeneto/free-dom/blob/master/packages/core/CHANGELOG.md",
+  "homepage": "https://github.com/SepVeneto/free-dom/blob/master/readme.md",
+  "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"
+  }
+}