epic-designer/dist/hooks/src/common/element.js

基于vue3的设计器,可视化开发页面表单

import { ref as f, watch as v } from "vue";
import { onKeyDown as c, onKeyUp as i } from "@vueuse/core";
import { useStore as m } from "../store/index.js";
function w() {
  const t = f(!1), e = f(!1), a = f(!1);
  return c(" ", () => {
    t.value = !0;
  }), i(" ", () => {
    t.value = !1;
  }), c("Shift", (l) => {
    l.preventDefault(), e.value = !0;
  }), i("Shift", () => {
    e.value = !1;
  }), c("Control", (l) => {
    l.preventDefault(), a.value = !0;
  }), i("Control", () => {
    a.value = !1;
  }), { pressCtrl: a, pressShift: e, pressSpace: t };
}
function h(t) {
  const { pressSpace: e } = m(), a = new Image(1, 1);
  a.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
  let l = 0, r = 0;
  function u(n, s = !1) {
    var o;
    s && (l = n.x, r = n.y, typeof document < "u" && ((o = n.dataTransfer) == null || o.setDragImage(document.createElement("div"), 0, 0)));
  }
  function A(n, s = !1) {
    if (n.preventDefault(), !n.x || !n.y || !s)
      return;
    const o = n.x - l, d = n.y - r;
    l = n.x, r = n.y, t.value && (t.value.scrollTop -= d, t.value.scrollLeft -= o);
  }
  function p() {
    e.value = !1;
  }
  return { handleElementDrag: A, handleElementDragEnd: p, handleElementDragStart: u };
}
function E(t) {
  const { canvasScale: e, disabledZoom: a } = m();
  function l(r) {
    if (!r.ctrlKey || a.value)
      return;
    let u = 0;
    u = r.deltaY < 0 ? e.value + 0.05 : e.value - 0.05, !(u > 150 || u < 0.5) && (e.value = u);
  }
  return v(
    () => e.value,
    (r) => {
      t.value && !a.value && (t.value.style.transform = `scale(${r})`);
    }
  ), { canvasScale: e, handleZoom: l };
}
function S(t, e = 16.66) {
  let a;
  function l() {
    r(), a = window.setInterval(t, e);
  }
  function r() {
    window.clearInterval(a);
  }
  return {
    startTimedQuery: l,
    stopTimedQuery: r
  };
}
export {
  h as useElementDrag,
  E as useElementZoom,
  w as useKeyPress,
  S as useTimedQuery
};