@das-fed/utils 1.0.4 → 1.0.6

package/dimple-canvas/use-dimple-canvas/core/konva/index.d.ts

@@ -0,0 +1,53 @@
+import { Konva } from '@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/lib';
+import type { ObjectType, ObjectConfig } from '../type';
+declare const useKonva: () => {
+    canvasContainerEl: any;
+    canvas: any;
+    layer: any;
+    onCanvasMounted: (cb: Function) => number;
+    createCanvas: (container?: HTMLDivElement | null) => void;
+    addObject: (type: ObjectType, config?: ObjectConfig) => any;
+    findOne: (key: string) => any;
+    findObject: (type: ObjectType) => any;
+    removeObject: (key: string) => void;
+    addEventListener: (eventName: EventName, cb: (e: {
+        currentTarget: any;
+        evt: Event;
+        pointerId: any;
+        target: any;
+        type: string;
+        data: {
+            [key: string]: any;
+            setHoverImage?: (src?: string) => void;
+            setActiveImage?: (src?: string) => void;
+            setDisabledImage?: (src?: string) => void;
+        };
+    }) => void) => void;
+    changeImageSrc: (imageKey: string, payload: string | {
+        src?: string;
+        hoverSrc?: string;
+        activeSrc?: string;
+        disabledSrc?: string;
+    }) => void;
+    zoom: (type?: 'in' | 'out', radio?: number) => void;
+    toJSON: (config?: any) => any;
+    loadJSON: (json?: any, config?: any) => void;
+    remove: () => void;
+    transformAxis: (coordinate: {
+        [key: string]: any;
+        x: number;
+        y: number;
+    }) => any;
+    setDisabled: () => void;
+    showRule: (options?: {
+        /** 刻度间隔 */
+        precision?: number;
+        /** 刻度文字颜色 */
+        textColor?: string;
+        /** 刻度线颜色 */
+        lineColor?: string;
+    }) => any;
+    removeRule: () => void;
+    tr: any;
+};
+export { useKonva, Konva };

package/dimple-canvas/use-dimple-canvas/core/konva/index.js

@@ -0,0 +1,119 @@
+import { ref as p, shallowRef as m, watch as j } from "vue";
+import { createCanvas as G } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/create-canvas";
+import { addObject as M } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/add-object";
+import { findOne as S, findObject as U } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/find";
+import { removeObject as W } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/remove-object";
+import { initTransformer as X, removeTransformer as w } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/transformer";
+import { initGuideline as $ } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/guideline";
+import { loadJSON as q } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/load-json";
+import { transformAxis as P } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/transform-axis";
+import { initRule as Q } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/rule";
+import { addEventListener as Y } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/add-event-listener";
+import { Konva as H } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/lib";
+import { Konva as me } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/lib";
+const ie = () => {
+  const n = p(null), r = m(), c = m(), i = m(), g = m();
+  let b = [];
+  const k = (e) => b.push(e), f = p(!1), d = (e) => {
+    n.value || (n.value = e);
+    const o = G(e);
+    r.value = o.canvas, c.value = o.layer, h(), f.value = !0;
+  }, h = () => {
+    var e;
+    g.value = X(r.value, c.value), $(r.value, c.value), b.map((o) => o()), (e = r.value) == null || e.on("mouseleave", () => {
+      w();
+    });
+  }, y = (e, o) => M(e, {
+    canvas: r.value,
+    layer: c.value,
+    config: o
+  }), F = (e) => {
+    W(r.value, e), w();
+  }, x = (e) => S(r.value, `${e}`), C = (e) => U(r.value, e), L = (e, o) => {
+    Y(r, e, o);
+  }, R = (e, o) => {
+    const t = S(r.value, e);
+    if (!t || !t.image)
+      return;
+    let a = {};
+    typeof o == "string" ? a = { src: o } : a = o;
+    const { src: s, hoverSrc: l, activeSrc: u, disabledSrc: O } = a;
+    if (s) {
+      t.attrs.src = s;
+      const v = new Image();
+      v.src = s;
+      const B = t.width(), z = t.height();
+      v.onload = () => {
+        t.image(v), t.width(B), t.height(z);
+      }, t.attrs.setDefaultImage = () => t.image(v);
+    }
+    l && (t.attrs.hoverSrc = l), u && (t.attrs.activeSrc = u), O && (t.attrs.disabledSrc = O);
+  }, J = (e, o) => {
+    var s, l;
+    const t = ((s = r.value) == null ? void 0 : s.scaleX()) || 1;
+    o === void 0 && (o = 0.1);
+    let a = 1;
+    e === "in" && (a = t - o), e === "out" && (a = t + o), (l = r.value) == null || l.scale({ x: a, y: a });
+  }, N = () => {
+    var o;
+    const e = (o = n.value) == null ? void 0 : o.children[0];
+    e == null || e.remove(), d(n.value);
+  }, T = (e) => {
+    var t;
+    return r.value ? (t = r.value) == null ? void 0 : t.toJSON() : {};
+  }, I = (e, o) => {
+    const t = () => {
+      if (!n.value)
+        return;
+      const a = q(n.value, e);
+      r.value = a.canvas, c.value = a.layer, i.value = a.ruleLayer, h();
+    };
+    if (f.value)
+      return t();
+    j(
+      () => f.value,
+      () => t()
+    );
+  }, A = (e) => n.value ? P(n.value, r.value, e) : { x: 0, y: 0 }, D = () => {
+    var s, l, u;
+    const { width: e = 0, height: o = 0 } = ((s = n.value) == null ? void 0 : s.getBoundingClientRect()) || {}, t = new H.Layer({ width: e, height: o }), a = new H.Rect({ width: e, height: o, fill: "rgba(0,0,0,0)", draggable: !1, name: "disabled" });
+    t.name("disabled"), (l = r.value) == null || l.add(t), console.log(t), t.add(a), t.moveToTop(), (u = r.value) == null || u.setDraggable(!1);
+  }, E = (e) => {
+    var o;
+    return i.value = Q(r.value, e), i.value.moveToBottom(), (o = r.value) == null || o.add(i.value), i;
+  }, K = () => {
+    var e;
+    (e = i.value) == null || e.remove();
+  };
+  return j(
+    () => n.value,
+    (e, o) => {
+      e && o === null && d(e);
+    }
+  ), {
+    canvasContainerEl: n,
+    canvas: r,
+    layer: c,
+    onCanvasMounted: k,
+    createCanvas: d,
+    addObject: y,
+    findOne: x,
+    findObject: C,
+    removeObject: F,
+    addEventListener: L,
+    changeImageSrc: R,
+    zoom: J,
+    toJSON: T,
+    loadJSON: I,
+    remove: N,
+    transformAxis: A,
+    setDisabled: D,
+    showRule: E,
+    removeRule: K,
+    tr: g
+  };
+};
+export {
+  me as Konva,
+  ie as useKonva
+};

package/dimple-canvas/use-dimple-canvas/core/konva/utils/add-event-listener.d.ts

@@ -0,0 +1,101 @@
+interface GlobalEventHandlersEventMap {
+    abort: UIEvent;
+    animationcancel: AnimationEvent;
+    animationend: AnimationEvent;
+    animationiteration: AnimationEvent;
+    animationstart: AnimationEvent;
+    auxclick: MouseEvent;
+    beforeinput: InputEvent;
+    blur: FocusEvent;
+    cancel: Event;
+    canplay: Event;
+    canplaythrough: Event;
+    change: Event;
+    click: MouseEvent;
+    close: Event;
+    compositionend: CompositionEvent;
+    compositionstart: CompositionEvent;
+    compositionupdate: CompositionEvent;
+    contextmenu: MouseEvent;
+    cuechange: Event;
+    dblclick: MouseEvent;
+    drag: DragEvent;
+    dragend: DragEvent;
+    dragenter: DragEvent;
+    dragleave: DragEvent;
+    dragover: DragEvent;
+    dragstart: DragEvent;
+    drop: DragEvent;
+    durationchange: Event;
+    emptied: Event;
+    ended: Event;
+    error: ErrorEvent;
+    focus: FocusEvent;
+    focusin: FocusEvent;
+    focusout: FocusEvent;
+    formdata: FormDataEvent;
+    gotpointercapture: PointerEvent;
+    input: Event;
+    invalid: Event;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    load: Event;
+    loadeddata: Event;
+    loadedmetadata: Event;
+    loadstart: Event;
+    lostpointercapture: PointerEvent;
+    mousedown: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mousemove: MouseEvent;
+    mouseout: MouseEvent;
+    mouseover: MouseEvent;
+    mouseup: MouseEvent;
+    pause: Event;
+    play: Event;
+    playing: Event;
+    pointercancel: PointerEvent;
+    pointerdown: PointerEvent;
+    pointerenter: PointerEvent;
+    pointerleave: PointerEvent;
+    pointermove: PointerEvent;
+    pointerout: PointerEvent;
+    pointerover: PointerEvent;
+    pointerup: PointerEvent;
+    progress: ProgressEvent;
+    ratechange: Event;
+    reset: Event;
+    resize: UIEvent;
+    scroll: Event;
+    securitypolicyviolation: SecurityPolicyViolationEvent;
+    seeked: Event;
+    seeking: Event;
+    select: Event;
+    selectionchange: Event;
+    selectstart: Event;
+    slotchange: Event;
+    stalled: Event;
+    submit: SubmitEvent;
+    suspend: Event;
+    timeupdate: Event;
+    toggle: Event;
+    touchcancel: TouchEvent;
+    touchend: TouchEvent;
+    touchmove: TouchEvent;
+    touchstart: TouchEvent;
+    transitioncancel: TransitionEvent;
+    transitionend: TransitionEvent;
+    transitionrun: TransitionEvent;
+    transitionstart: TransitionEvent;
+    volumechange: Event;
+    waiting: Event;
+    webkitanimationend: Event;
+    webkitanimationiteration: Event;
+    webkitanimationstart: Event;
+    webkittransitionend: Event;
+    wheel: WheelEvent;
+}
+export type EventName = keyof GlobalEventHandlersEventMap;
+declare const addEventListener: (canvas: Ref<any>, eventName: EventName, cb: any) => void;
+export { addEventListener };

package/dimple-canvas/use-dimple-canvas/core/konva/utils/add-event-listener.js

@@ -0,0 +1,17 @@
+import { watch as d } from "vue";
+const p = (t, r, e) => {
+  var o;
+  t.value && ((o = t.value) == null || o.on(r, e)), t.value || d(
+    () => t.value,
+    (a, l) => {
+      var u;
+      l || (u = t.value) == null || u.on(r, (i) => {
+        const f = i.target.attrs;
+        e({ ...i, data: f });
+      });
+    }
+  );
+};
+export {
+  p as addEventListener
+};

package/dimple-canvas/use-dimple-canvas/core/konva/utils/add-object/index.d.ts

@@ -0,0 +1,7 @@
+import type { Canvas, Layer, ObjectConfig } from '@das-fed/utils/dimple-canvas/use-dimple-canvas/core/type';
+declare const addObject: (type: ObjectType, options: {
+    canvas?: Canvas | null;
+    layer?: Layer | null;
+    config?: ObjectConfig;
+}) => Promise<any>;
+export { addObject };

package/dimple-canvas/use-dimple-canvas/core/konva/utils/add-object/index.js

@@ -0,0 +1,55 @@
+import { Konva as d } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/lib";
+const f = async (r, n) => {
+  const { config: t = {}, canvas: s, layer: a } = n;
+  if (!s || !a)
+    return;
+  let e = null;
+  t.type = r, t.draggable = t.draggable ?? !0;
+  const c = +/* @__PURE__ */ new Date();
+  return t.id = t.id ?? c.toString(), r === "Rect" && (e = new d.Rect(t)), r === "Circle" && (e = new d.Circle(t)), r === "Image" && (e = await l(t)), r === "BackgroundImage" && I(s, t), e && a.add(e), e;
+}, l = (r) => {
+  const { src: n = "" } = r || {};
+  return new Promise((t, s) => {
+    if (!n)
+      return t(null);
+    const a = new Image();
+    a.src = r.src || "", a.onload = () => {
+      const e = new d.Image({ image: a });
+      r.setDefaultImage = () => e.image(a), e.setAttrs(r);
+      const c = [
+        { getter: "hoverSrc", setter: "setHoverImage" },
+        { getter: "activeSrc", setter: "setActiveImage" },
+        { getter: "disabledSrc", setter: "setDisabledImage" }
+      ];
+      for (const g of c)
+        r[g.setter] = (u) => {
+          const i = u || e.attrs[g.getter];
+          if (!i)
+            return;
+          const o = new Image();
+          o.src = i, o.onload = () => {
+            var m;
+            return (m = e.image) == null ? void 0 : m.call(e, o);
+          };
+        };
+      e.setAttrs(r), t(e);
+    };
+  });
+}, I = (r, n) => {
+  const { src: t = "", scaleWidth: s = 30 } = n || {};
+  if (!t)
+    return;
+  const a = new d.Layer();
+  return r.add(a), a.moveToBottom(), l({
+    // listening: false,
+    src: t,
+    width: a.width() - s,
+    height: a.height() - s,
+    type: "BackgroundImage",
+    ...n,
+    draggable: !1
+  }).then((e) => (e && a.add(e), e));
+};
+export {
+  f as addObject
+};

package/dimple-canvas/use-dimple-canvas/core/konva/utils/create-canvas.d.ts

@@ -0,0 +1,5 @@
+declare const createCanvas: (container?: HTMLDivElement | null, config?: any) => {
+    canvas: any;
+    layer: any;
+};
+export { createCanvas };

package/dimple-canvas/use-dimple-canvas/core/konva/utils/create-canvas.js

@@ -0,0 +1,14 @@
+import { Konva as n } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/lib";
+const r = (e, c) => {
+  e || (e = document.createElement("div"), document.body.append(e));
+  const { width: d, height: o } = e.getBoundingClientRect(), a = new n.Stage({
+    container: e,
+    width: d,
+    height: o,
+    draggable: !0
+  }), t = new n.Layer();
+  return t.name("base"), a.add(t), { canvas: a, layer: t };
+};
+export {
+  r as createCanvas
+};

package/dimple-canvas/use-dimple-canvas/core/konva/utils/find.d.ts

@@ -0,0 +1,4 @@
+import type { Canvas } from '@das-fed/utils/dimple-canvas/use-dimple-canvas/core/type';
+declare const findOne: (canvas: Canvas | null | undefined, key: string) => any;
+declare const findObject: (canvas: Canvas | null | undefined, type: ObjectType) => any;
+export { findOne, findObject };

package/dimple-canvas/use-dimple-canvas/core/konva/utils/find.js

@@ -0,0 +1,5 @@
+const r = (e, t) => e == null ? void 0 : e.findOne(`${t}`), d = (e, t) => e == null ? void 0 : e.find(t);
+export {
+  d as findObject,
+  r as findOne
+};

package/dimple-canvas/use-dimple-canvas/core/konva/utils/guideline.d.ts

@@ -0,0 +1,4 @@
+import type { Canvas, Layer } from '@das-fed/utils/dimple-canvas/use-dimple-canvas/core/type';
+declare const initGuideline: (canvas?: Canvas | null, layer?: Layer | null) => void;
+declare const removeGuideline: (layer?: Layer | null) => void;
+export { initGuideline, removeGuideline };

package/dimple-canvas/use-dimple-canvas/core/konva/utils/guideline.js

@@ -0,0 +1,181 @@
+import { Konva as p } from "@das-fed/utils/dimple-canvas/use-dimple-canvas/core/konva/utils/lib";
+const w = (r, s) => {
+  if (!r || !s)
+    return;
+  var c = 5;
+  function b(o) {
+    var t = [0, r.width() / 2, r.width()], n = [0, r.height() / 2, r.height()];
+    return r.find(".object").forEach((f) => {
+      if (f !== o) {
+        var i = f.getClientRect();
+        t.push([i.x, i.x + i.width, i.x + i.width / 2]), n.push([i.y, i.y + i.height, i.y + i.height / 2]);
+      }
+    }), {
+      vertical: t.flat(),
+      horizontal: n.flat()
+    };
+  }
+  function v(o) {
+    var t = o.getClientRect(), n = o.absolutePosition();
+    return {
+      vertical: [
+        {
+          guide: Math.round(t.x),
+          offset: Math.round(n.x - t.x),
+          snap: "start"
+        },
+        {
+          guide: Math.round(t.x + t.width / 2),
+          offset: Math.round(n.x - t.x - t.width / 2),
+          snap: "center"
+        },
+        {
+          guide: Math.round(t.x + t.width),
+          offset: Math.round(n.x - t.x - t.width),
+          snap: "end"
+        }
+      ],
+      horizontal: [
+        {
+          guide: Math.round(t.y),
+          offset: Math.round(n.y - t.y),
+          snap: "start"
+        },
+        {
+          guide: Math.round(t.y + t.height / 2),
+          offset: Math.round(n.y - t.y - t.height / 2),
+          snap: "center"
+        },
+        {
+          guide: Math.round(t.y + t.height),
+          offset: Math.round(n.y - t.y - t.height),
+          snap: "end"
+        }
+      ]
+    };
+  }
+  function g(o, t) {
+    var n = [], f = [];
+    o.vertical.forEach((d) => {
+      t.vertical.forEach((a) => {
+        var h = Math.abs(d - a.guide);
+        h < c && n.push({
+          lineGuide: d,
+          diff: h,
+          snap: a.snap,
+          offset: a.offset
+        });
+      });
+    }), o.horizontal.forEach((d) => {
+      t.horizontal.forEach((a) => {
+        var h = Math.abs(d - a.guide);
+        h < c && f.push({
+          lineGuide: d,
+          diff: h,
+          snap: a.snap,
+          offset: a.offset
+        });
+      });
+    });
+    var i = [], e = n.sort((d, a) => d.diff - a.diff)[0], u = f.sort((d, a) => d.diff - a.diff)[0];
+    return e && i.push({
+      lineGuide: e.lineGuide,
+      offset: e.offset,
+      orientation: "V",
+      snap: e.snap
+    }), u && i.push({
+      lineGuide: u.lineGuide,
+      offset: u.offset,
+      orientation: "H",
+      snap: u.snap
+    }), i;
+  }
+  function x(o) {
+    o.forEach((t) => {
+      if (t.orientation === "H") {
+        var n = new p.Line({
+          points: [-6e3, 0, 6e3, 0],
+          stroke: "rgb(0, 161, 255)",
+          strokeWidth: 1,
+          name: "guid-line",
+          dash: [4, 6]
+        });
+        s.add(n), n.absolutePosition({
+          x: 0,
+          y: t.lineGuide
+        });
+      } else if (t.orientation === "V") {
+        var n = new p.Line({
+          points: [0, -6e3, 0, 6e3],
+          stroke: "rgb(0, 161, 255)",
+          strokeWidth: 1,
+          name: "guid-line",
+          dash: [4, 6]
+        });
+        s.add(n), n.absolutePosition({
+          x: t.lineGuide,
+          y: 0
+        });
+      }
+    });
+  }
+  s.on("dragmove", function(o) {
+    s.find(".guid-line").forEach((e) => e.destroy());
+    var t = b(o.target), n = v(o.target), f = g(t, n);
+    if (f.length) {
+      x(f);
+      var i = o.target.absolutePosition();
+      f.forEach((e) => {
+        switch (e.snap) {
+          case "start": {
+            switch (e.orientation) {
+              case "V": {
+                i.x = e.lineGuide + e.offset;
+                break;
+              }
+              case "H": {
+                i.y = e.lineGuide + e.offset;
+                break;
+              }
+            }
+            break;
+          }
+          case "center": {
+            switch (e.orientation) {
+              case "V": {
+                i.x = e.lineGuide + e.offset;
+                break;
+              }
+              case "H": {
+                i.y = e.lineGuide + e.offset;
+                break;
+              }
+            }
+            break;
+          }
+          case "end": {
+            switch (e.orientation) {
+              case "V": {
+                i.x = e.lineGuide + e.offset;
+                break;
+              }
+              case "H": {
+                i.y = e.lineGuide + e.offset;
+                break;
+              }
+            }
+            break;
+          }
+        }
+      }), o.target.absolutePosition(i);
+    }
+  }), s.on("dragend", function(o) {
+    s.find(".guid-line").forEach((t) => t.destroy());
+  });
+}, E = (r) => {
+  r == null || r.find(".guid-line").forEach((s) => s.destroy());
+};
+export {
+  w as initGuideline,
+  E as removeGuideline
+};

package/dimple-canvas/use-dimple-canvas/core/konva/utils/lib.d.ts

@@ -0,0 +1,3 @@
+import Konva from 'konva';
+/** 由于该库需要全局唯一命名空间，只能import一次 */
+export { Konva };