@vueuse/integrations 6.4.1 → 6.5.3

package/useDrauu.iife.js

@@ -59,121 +59,128 @@
   window.VueDemi = VueDemi
 })(window)
 ;
-;(function (exports, vueDemi, drauu, shared) {
+;(function (exports, vueDemi, drauu, core, shared) {
   'use strict';
 
-  /**
-   * Get the dom element of a ref of element or Vue component instance
-   *
-   * @param elRef
-   */
-  function unrefElement(elRef) {
-      var _a, _b;
-      const plain = vueDemi.unref(elRef);
-      return (_b = (_a = plain) === null || _a === void 0 ? void 0 : _a.$el) !== null && _b !== void 0 ? _b : plain;
-  }
-
-  var SwipeDirection;
-  (function (SwipeDirection) {
-      SwipeDirection["UP"] = "UP";
-      SwipeDirection["RIGHT"] = "RIGHT";
-      SwipeDirection["DOWN"] = "DOWN";
-      SwipeDirection["LEFT"] = "LEFT";
-      SwipeDirection["NONE"] = "NONE";
-  })(SwipeDirection || (SwipeDirection = {}));
-
-  /**
-   * Reactive drauu
-   *
-   * @see https://vueuse.org/useDrauu
-   * @param target The target svg element
-   * @param options Drauu Options
-   */
-  function useDrauu(target, options) {
-      const drauuInstance = vueDemi.ref();
-      let disposables = [];
-      const onChangedHook = shared.createEventHook();
-      const onCanceledHook = shared.createEventHook();
-      const onCommittedHook = shared.createEventHook();
-      const onStartHook = shared.createEventHook();
-      const onEndHook = shared.createEventHook();
-      const canUndo = vueDemi.ref(false);
-      const canRedo = vueDemi.ref(false);
-      const altPressed = vueDemi.ref(false);
-      const shiftPressed = vueDemi.ref(false);
-      const brush = vueDemi.ref({
-          color: 'black',
-          size: 3,
-          arrowEnd: false,
-          cornerRadius: 0,
-          dasharray: undefined,
-          fill: 'transparent',
-          mode: 'draw',
-      });
-      vueDemi.watch(brush, () => {
-          const instance = drauuInstance.value;
-          if (instance)
-              instance.brush = brush.value;
-      }, { deep: true });
-      const undo = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.undo(); };
-      const redo = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.redo(); };
-      const clear = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.clear(); };
-      const cancel = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.cancel(); };
-      const load = (svg) => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.load(svg); };
-      const dump = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.dump(); };
-      const cleanup = () => {
-          var _a;
-          disposables.forEach(dispose => dispose());
-          (_a = drauuInstance.value) === null || _a === void 0 ? 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;
-          }
-      };
-      vueDemi.watch(() => unrefElement(target), (el) => {
-          if (!el || !(el instanceof SVGSVGElement))
-              return;
-          if (drauuInstance.value)
-              cleanup();
-          drauuInstance.value = drauu.createDrauu(Object.assign({ el }, options));
-          syncStatus();
-          disposables = [
-              drauuInstance.value.on('canceled', () => onCanceledHook.trigger()),
-              drauuInstance.value.on('committed', () => onCommittedHook.trigger()),
-              drauuInstance.value.on('start', () => onStartHook.trigger()),
-              drauuInstance.value.on('end', () => onEndHook.trigger()),
-              drauuInstance.value.on('changed', () => {
-                  syncStatus();
-                  onChangedHook.trigger();
-              }),
-          ];
-      }, { flush: 'post' });
-      shared.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,
-      };
+  var __defProp = Object.defineProperty;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  function useDrauu(target, options) {
+    const drauuInstance = vueDemi.ref();
+    let disposables = [];
+    const onChangedHook = core.createEventHook();
+    const onCanceledHook = core.createEventHook();
+    const onCommittedHook = core.createEventHook();
+    const onStartHook = core.createEventHook();
+    const onEndHook = core.createEventHook();
+    const canUndo = vueDemi.ref(false);
+    const canRedo = vueDemi.ref(false);
+    const altPressed = vueDemi.ref(false);
+    const shiftPressed = vueDemi.ref(false);
+    const brush = vueDemi.ref({
+      color: "black",
+      size: 3,
+      arrowEnd: false,
+      cornerRadius: 0,
+      dasharray: void 0,
+      fill: "transparent",
+      mode: "draw"
+    });
+    vueDemi.watch(brush, () => {
+      const instance = drauuInstance.value;
+      if (instance)
+        instance.brush = brush.value;
+    }, { 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;
+      }
+    };
+    vueDemi.watch(() => core.unrefElement(target), (el) => {
+      if (!el || !(el instanceof SVGSVGElement))
+        return;
+      if (drauuInstance.value)
+        cleanup();
+      drauuInstance.value = drauu.createDrauu(__spreadValues({ el }, options));
+      syncStatus();
+      disposables = [
+        drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+        drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
+        drauuInstance.value.on("start", () => onStartHook.trigger()),
+        drauuInstance.value.on("end", () => onEndHook.trigger()),
+        drauuInstance.value.on("changed", () => {
+          syncStatus();
+          onChangedHook.trigger();
+        })
+      ];
+    }, { flush: "post" });
+    shared.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
+    };
   }
 
   exports.useDrauu = useDrauu;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-}(this.VueUse = this.VueUse || {}, VueDemi, drauu, VueUse));
+})(this.VueUse = this.VueUse || {}, VueDemi, Drauu, VueUse, VueUse);

package/useDrauu.iife.min.js

@@ -1 +1 @@
-!function(e){if(!e.VueDemi){var n={},o=e.Vue;if(o)if("2."===o.version.slice(0,2)){var r=e.VueCompositionAPI;if(r){for(var u in r)n[u]=r[u];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=o,n.Vue2=o,n.version=o.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if("3."===o.version.slice(0,2)){for(var u in o)n[u]=o[u];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=o,n.Vue2=void 0,n.version=o.version,n.set=function(e,n,o){return Array.isArray(e)?(e.length=Math.max(e.length,n),e.splice(n,1,o),o):(e[n]=o,o)},n.del=function(e,n){Array.isArray(e)?e.splice(n,1):delete e[n]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");e.VueDemi=n}}(window),function(e,n,o,r){"use strict";var u;!function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"}(u||(u={})),e.useDrauu=function(e,u){const a=n.ref();let i=[];const l=r.createEventHook(),t=r.createEventHook(),v=r.createEventHook(),s=r.createEventHook(),d=r.createEventHook(),c=n.ref(!1),f=n.ref(!1),m=n.ref(!1),V=n.ref(!1),p=n.ref({color:"black",size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:"transparent",mode:"draw"});n.watch(p,(()=>{const e=a.value;e&&(e.brush=p.value)}),{deep:!0});const g=()=>{var e;i.forEach((e=>e())),null===(e=a.value)||void 0===e||e.unmount()},h=()=>{a.value&&(c.value=a.value.canUndo(),f.value=a.value.canRedo(),m.value=a.value.altPressed,V.value=a.value.shiftPressed)};return n.watch((()=>function(e){var o,r;const u=n.unref(e);return null!==(r=null===(o=u)||void 0===o?void 0:o.$el)&&void 0!==r?r:u}(e)),(e=>{e&&e instanceof SVGSVGElement&&(a.value&&g(),a.value=o.createDrauu(Object.assign({el:e},u)),h(),i=[a.value.on("canceled",(()=>t.trigger())),a.value.on("committed",(()=>v.trigger())),a.value.on("start",(()=>s.trigger())),a.value.on("end",(()=>d.trigger())),a.value.on("changed",(()=>{h(),l.trigger()}))])}),{flush:"post"}),r.tryOnScopeDispose((()=>g())),{drauuInstance:a,load:e=>{var n;return null===(n=a.value)||void 0===n?void 0:n.load(e)},dump:()=>{var e;return null===(e=a.value)||void 0===e?void 0:e.dump()},clear:()=>{var e;return null===(e=a.value)||void 0===e?void 0:e.clear()},cancel:()=>{var e;return null===(e=a.value)||void 0===e?void 0:e.cancel()},undo:()=>{var e;return null===(e=a.value)||void 0===e?void 0:e.undo()},redo:()=>{var e;return null===(e=a.value)||void 0===e?void 0:e.redo()},canUndo:c,canRedo:f,brush:p,onChanged:l.on,onCommitted:v.on,onStart:s.on,onEnd:d.on,onCanceled:t.on}},Object.defineProperty(e,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,drauu,VueUse);
+(function(i){if(!i.VueDemi){var n={},o=i.Vue;if(o)if(o.version.slice(0,2)==="2."){var t=i.VueCompositionAPI;if(t){for(var c in t)n[c]=t[c];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=o,n.Vue2=o,n.version=o.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(o.version.slice(0,2)==="3."){for(var c in o)n[c]=o[c];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=o,n.Vue2=void 0,n.version=o.version,n.set=function(u,s,v){return Array.isArray(u)?(u.length=Math.max(u.length,s),u.splice(s,1,v),v):(u[s]=v,v)},n.del=function(u,s){if(Array.isArray(u)){u.splice(s,1);return}delete u[s]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");i.VueDemi=n}})(window),function(i,n,o,t,c){"use strict";var u=Object.defineProperty,s=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,p=(l,a,e)=>a in l?u(l,a,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[a]=e,S=(l,a)=>{for(var e in a||(a={}))v.call(a,e)&&p(l,e,a[e]);if(s)for(var e of s(a))O.call(a,e)&&p(l,e,a[e]);return l};function k(l,a){const e=n.ref();let m=[];const V=t.createEventHook(),_=t.createEventHook(),h=t.createEventHook(),E=t.createEventHook(),g=t.createEventHook(),P=n.ref(!1),b=n.ref(!1),C=n.ref(!1),U=n.ref(!1),f=n.ref({color:"black",size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:"transparent",mode:"draw"});n.watch(f,()=>{const r=e.value;r&&(r.brush=f.value)},{deep:!0});const w=()=>{var r;return(r=e.value)==null?void 0:r.undo()},A=()=>{var r;return(r=e.value)==null?void 0:r.redo()},j=()=>{var r;return(r=e.value)==null?void 0:r.clear()},I=()=>{var r;return(r=e.value)==null?void 0:r.cancel()},R=r=>{var d;return(d=e.value)==null?void 0:d.load(r)},D=()=>{var r;return(r=e.value)==null?void 0:r.dump()},y=()=>{var r;m.forEach(d=>d()),(r=e.value)==null||r.unmount()},H=()=>{e.value&&(P.value=e.value.canUndo(),b.value=e.value.canRedo(),C.value=e.value.altPressed,U.value=e.value.shiftPressed)};return n.watch(()=>t.unrefElement(l),r=>{!r||!(r instanceof SVGSVGElement)||(e.value&&y(),e.value=o.createDrauu(S({el:r},a)),H(),m=[e.value.on("canceled",()=>_.trigger()),e.value.on("committed",()=>h.trigger()),e.value.on("start",()=>E.trigger()),e.value.on("end",()=>g.trigger()),e.value.on("changed",()=>{H(),V.trigger()})])},{flush:"post"}),c.tryOnScopeDispose(()=>y()),{drauuInstance:e,load:R,dump:D,clear:j,cancel:I,undo:w,redo:A,canUndo:P,canRedo:b,brush:f,onChanged:V.on,onCommitted:h.on,onStart:E.on,onEnd:g.on,onCanceled:_.on}}i.useDrauu=k,Object.defineProperty(i,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,Drauu,VueUse,VueUse);

package/useDrauu.mjs

@@ -1,115 +1,123 @@
-import { unref, ref, watch } from 'vue-demi';
+import { ref, watch } from 'vue-demi';
 import { createDrauu } from 'drauu';
-import { createEventHook, tryOnScopeDispose } from '@vueuse/shared';
+import { createEventHook, unrefElement } from '@vueuse/core';
+import { tryOnScopeDispose } from '@vueuse/shared';
 
-/**
- * Get the dom element of a ref of element or Vue component instance
- *
- * @param elRef
- */
-function unrefElement(elRef) {
-    var _a, _b;
-    const plain = unref(elRef);
-    return (_b = (_a = plain) === null || _a === void 0 ? void 0 : _a.$el) !== null && _b !== void 0 ? _b : plain;
-}
-
-var SwipeDirection;
-(function (SwipeDirection) {
-    SwipeDirection["UP"] = "UP";
-    SwipeDirection["RIGHT"] = "RIGHT";
-    SwipeDirection["DOWN"] = "DOWN";
-    SwipeDirection["LEFT"] = "LEFT";
-    SwipeDirection["NONE"] = "NONE";
-})(SwipeDirection || (SwipeDirection = {}));
-
-/**
- * Reactive drauu
- *
- * @see https://vueuse.org/useDrauu
- * @param target The target svg element
- * @param options Drauu Options
- */
-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 = ref(false);
-    const canRedo = ref(false);
-    const altPressed = ref(false);
-    const shiftPressed = ref(false);
-    const brush = ref({
-        color: 'black',
-        size: 3,
-        arrowEnd: false,
-        cornerRadius: 0,
-        dasharray: undefined,
-        fill: 'transparent',
-        mode: 'draw',
-    });
-    watch(brush, () => {
-        const instance = drauuInstance.value;
-        if (instance)
-            instance.brush = brush.value;
-    }, { deep: true });
-    const undo = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.undo(); };
-    const redo = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.redo(); };
-    const clear = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.clear(); };
-    const cancel = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.cancel(); };
-    const load = (svg) => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.load(svg); };
-    const dump = () => { var _a; return (_a = drauuInstance.value) === null || _a === void 0 ? void 0 : _a.dump(); };
-    const cleanup = () => {
-        var _a;
-        disposables.forEach(dispose => dispose());
-        (_a = drauuInstance.value) === null || _a === void 0 ? 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 || !(el instanceof SVGSVGElement))
-            return;
-        if (drauuInstance.value)
-            cleanup();
-        drauuInstance.value = createDrauu(Object.assign({ el }, options));
-        syncStatus();
-        disposables = [
-            drauuInstance.value.on('canceled', () => onCanceledHook.trigger()),
-            drauuInstance.value.on('committed', () => onCommittedHook.trigger()),
-            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,
-    };
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+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 = ref(false);
+  const canRedo = ref(false);
+  const altPressed = ref(false);
+  const shiftPressed = ref(false);
+  const brush = ref({
+    color: "black",
+    size: 3,
+    arrowEnd: false,
+    cornerRadius: 0,
+    dasharray: void 0,
+    fill: "transparent",
+    mode: "draw"
+  });
+  watch(brush, () => {
+    const instance = drauuInstance.value;
+    if (instance)
+      instance.brush = brush.value;
+  }, { 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 || !(el instanceof SVGSVGElement))
+      return;
+    if (drauuInstance.value)
+      cleanup();
+    drauuInstance.value = createDrauu(__spreadValues({ el }, options));
+    syncStatus();
+    disposables = [
+      drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+      drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
+      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 };