|
- var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
- if (VueDemi.install) {
- return VueDemi
- }
- if (!Vue) {
- console.error('[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.')
- return VueDemi
- }
-
- // Vue 2.7
- if (Vue.version.slice(0, 4) === '2.7.') {
- for (var key in Vue) {
- VueDemi[key] = Vue[key]
- }
- VueDemi.isVue2 = true
- VueDemi.isVue3 = false
- VueDemi.install = function () {}
- VueDemi.Vue = Vue
- VueDemi.Vue2 = Vue
- VueDemi.version = Vue.version
- VueDemi.warn = Vue.util.warn
- function createApp(rootComponent, rootProps) {
- var vm
- var provide = {}
- var app = {
- config: Vue.config,
- use: Vue.use.bind(Vue),
- mixin: Vue.mixin.bind(Vue),
- component: Vue.component.bind(Vue),
- provide: function (key, value) {
- provide[key] = value
- return this
- },
- directive: function (name, dir) {
- if (dir) {
- Vue.directive(name, dir)
- return app
- } else {
- return Vue.directive(name)
- }
- },
- mount: function (el, hydrating) {
- if (!vm) {
- vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
- vm.$mount(el, hydrating)
- return vm
- } else {
- return vm
- }
- },
- unmount: function () {
- if (vm) {
- vm.$destroy()
- vm = undefined
- }
- },
- }
- return app
- }
- VueDemi.createApp = createApp
- }
- // Vue 2.6.x
- else if (Vue.version.slice(0, 2) === '2.') {
- if (VueCompositionAPI) {
- for (var key in VueCompositionAPI) {
- VueDemi[key] = VueCompositionAPI[key]
- }
- VueDemi.isVue2 = true
- VueDemi.isVue3 = false
- VueDemi.install = function () {}
- VueDemi.Vue = Vue
- VueDemi.Vue2 = Vue
- VueDemi.version = Vue.version
- } else {
- console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
- }
- }
- // Vue 3
- else if (Vue.version.slice(0, 2) === '3.') {
- for (var key in Vue) {
- VueDemi[key] = Vue[key]
- }
- VueDemi.isVue2 = false
- VueDemi.isVue3 = true
- VueDemi.install = function () {}
- VueDemi.Vue = Vue
- VueDemi.Vue2 = undefined
- VueDemi.version = Vue.version
- VueDemi.set = function (target, key, val) {
- if (Array.isArray(target)) {
- target.length = Math.max(target.length, key)
- target.splice(key, 1, val)
- return val
- }
- target[key] = val
- return val
- }
- VueDemi.del = function (target, key) {
- if (Array.isArray(target)) {
- target.splice(key, 1)
- return
- }
- delete target[key]
- }
- } else {
- console.error('[vue-demi] Vue version ' + Vue.version + ' is unsupported.')
- }
- return VueDemi
- })(
- (this.VueDemi = this.VueDemi || (typeof VueDemi !== 'undefined' ? VueDemi : {})),
- this.Vue || (typeof Vue !== 'undefined' ? Vue : undefined),
- this.VueCompositionAPI || (typeof VueCompositionAPI !== 'undefined' ? VueCompositionAPI : undefined)
- );
- ;
- ;(function (exports, vueDemi, drauu, core, shared) {
- 'use strict';
-
- 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;
- 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;
- }
- };
- vueDemi.watch(() => core.unrefElement(target), (el) => {
- if (!el || typeof SVGSVGElement === "undefined" || !(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;
-
- })(this.VueUse = this.VueUse || {}, VueDemi, Drauu, VueUse, VueUse);
|