devstar插件

node_modules/@vueuse/integrations/useDrauu.mjs

@@ -0,0 +1,114 @@
+import { createEventHook, unrefElement } from '@vueuse/core';
+import { tryOnScopeDispose } from '@vueuse/shared';
+import { createDrauu } from 'drauu';
+import { ref, shallowRef, watch } from 'vue';
+
+function useDrauu(target, options) {
+  const drauuInstance = ref();
+  let disposables = [];
+  const onChangedHook = createEventHook();
+  const onCanceledHook = createEventHook();
+  const onCommittedHook = createEventHook();
+  const onStartHook = createEventHook();
+  const onEndHook = createEventHook();
+  const canUndo = shallowRef(false);
+  const canRedo = shallowRef(false);
+  const altPressed = shallowRef(false);
+  const shiftPressed = shallowRef(false);
+  const brush = ref({
+    color: "black",
+    size: 3,
+    arrowEnd: false,
+    cornerRadius: 0,
+    dasharray: void 0,
+    fill: "transparent",
+    mode: "draw",
+    ...options == null ? void 0 : options.brush
+  });
+  watch(brush, () => {
+    const instance = drauuInstance.value;
+    if (instance) {
+      instance.brush = brush.value;
+      instance.mode = brush.value.mode;
+    }
+  }, { deep: true });
+  const undo = () => {
+    var _a;
+    return (_a = drauuInstance.value) == null ? void 0 : _a.undo();
+  };
+  const redo = () => {
+    var _a;
+    return (_a = drauuInstance.value) == null ? void 0 : _a.redo();
+  };
+  const clear = () => {
+    var _a;
+    return (_a = drauuInstance.value) == null ? void 0 : _a.clear();
+  };
+  const cancel = () => {
+    var _a;
+    return (_a = drauuInstance.value) == null ? void 0 : _a.cancel();
+  };
+  const load = (svg) => {
+    var _a;
+    return (_a = drauuInstance.value) == null ? void 0 : _a.load(svg);
+  };
+  const dump = () => {
+    var _a;
+    return (_a = drauuInstance.value) == null ? void 0 : _a.dump();
+  };
+  const cleanup = () => {
+    var _a;
+    disposables.forEach((dispose) => dispose());
+    (_a = drauuInstance.value) == null ? void 0 : _a.unmount();
+  };
+  const syncStatus = () => {
+    if (drauuInstance.value) {
+      canUndo.value = drauuInstance.value.canUndo();
+      canRedo.value = drauuInstance.value.canRedo();
+      altPressed.value = drauuInstance.value.altPressed;
+      shiftPressed.value = drauuInstance.value.shiftPressed;
+    }
+  };
+  watch(
+    () => unrefElement(target),
+    (el) => {
+      if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
+        return;
+      if (drauuInstance.value)
+        cleanup();
+      drauuInstance.value = createDrauu({ el, ...options });
+      syncStatus();
+      disposables = [
+        drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+        drauuInstance.value.on("committed", (node) => onCommittedHook.trigger(node)),
+        drauuInstance.value.on("start", () => onStartHook.trigger()),
+        drauuInstance.value.on("end", () => onEndHook.trigger()),
+        drauuInstance.value.on("changed", () => {
+          syncStatus();
+          onChangedHook.trigger();
+        })
+      ];
+    },
+    { flush: "post" }
+  );
+  tryOnScopeDispose(() => cleanup());
+  return {
+    drauuInstance,
+    load,
+    dump,
+    clear,
+    cancel,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    brush,
+    onChanged: onChangedHook.on,
+    onCommitted: onCommittedHook.on,
+    onStart: onStartHook.on,
+    onEnd: onEndHook.on,
+    onCanceled: onCanceledHook.on
+  };
+}
+
+export { useDrauu };