@thienvu18/designable-core 2.0.1 → 2.0.2

package/lib/drivers/ViewportResizeDriver.js

@@ -1,68 +1,74 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportResizeDriver = void 0;
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const events_1 = require("../events");
-const resize_observer_1 = require("@juggle/resize-observer");
-const designable_shared_2 = require("@thienvu18/designable-shared");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.ViewportResizeDriver = void 0
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const events_1 = require('../events')
+const resize_observer_1 = require('@juggle/resize-observer')
+const designable_shared_2 = require('@thienvu18/designable-shared')
 class ViewportResizeDriver extends designable_shared_1.EventDriver {
-    constructor() {
-        super(...arguments);
-        this.request = null;
-        this.resizeObserver = null;
-        this.resizeTarget = null;
-        this.onResize = (event) => {
-            const target = Array.isArray(event)
-                ? event[0]?.target
-                : event.target;
-            this.resizeTarget = target ?? this.container;
-            if (this.request !== null)
-                return;
-            this.request = designable_shared_2.globalThisPolyfill.requestAnimationFrame(() => {
-                this.request = null;
-                const target = this.resizeTarget ?? this.container;
-                this.resizeTarget = null;
-                this.dispatch(new events_1.ViewportResizeEvent({
-                    scrollX: this.contentWindow.scrollX,
-                    scrollY: this.contentWindow.scrollY,
-                    width: this.contentWindow.innerWidth,
-                    height: this.contentWindow.innerHeight,
-                    innerHeight: this.contentWindow.innerHeight,
-                    innerWidth: this.contentWindow.innerWidth,
-                    view: this.contentWindow,
-                    target,
-                }));
-            });
-        };
+  constructor() {
+    super(...arguments)
+    this.request = null
+    this.resizeObserver = null
+    this.resizeTarget = null
+    this.onResize = (event) => {
+      const target = Array.isArray(event) ? event[0]?.target : event.target
+      this.resizeTarget = target ?? this.container
+      if (this.request !== null) return
+      this.request =
+        designable_shared_2.globalThisPolyfill.requestAnimationFrame(() => {
+          this.request = null
+          const target = this.resizeTarget ?? this.container
+          this.resizeTarget = null
+          this.dispatch(
+            new events_1.ViewportResizeEvent({
+              scrollX: this.contentWindow.scrollX,
+              scrollY: this.contentWindow.scrollY,
+              width: this.contentWindow.innerWidth,
+              height: this.contentWindow.innerHeight,
+              innerHeight: this.contentWindow.innerHeight,
+              innerWidth: this.contentWindow.innerWidth,
+              view: this.contentWindow,
+              target,
+            })
+          )
+        })
     }
-    attach() {
-        if (this.contentWindow && this.contentWindow !== designable_shared_2.globalThisPolyfill) {
-            this.addEventListener('resize', this.onResize);
-        }
-        else {
-            if (this.container && this.container !== document) {
-                const ResizeObserverImpl = designable_shared_2.globalThisPolyfill.ResizeObserver || resize_observer_1.ResizeObserver;
-                this.resizeObserver = new ResizeObserverImpl(this.onResize);
-                this.resizeObserver.observe(this.container);
-            }
-        }
+  }
+  attach() {
+    if (
+      this.contentWindow &&
+      this.contentWindow !== designable_shared_2.globalThisPolyfill
+    ) {
+      this.addEventListener('resize', this.onResize)
+    } else {
+      if (this.container && this.container !== document) {
+        const ResizeObserverImpl =
+          designable_shared_2.globalThisPolyfill.ResizeObserver ||
+          resize_observer_1.ResizeObserver
+        this.resizeObserver = new ResizeObserverImpl(this.onResize)
+        this.resizeObserver.observe(this.container)
+      }
     }
-    detach() {
-        if (this.request !== null) {
-            designable_shared_2.globalThisPolyfill.cancelAnimationFrame(this.request);
-            this.request = null;
-        }
-        this.resizeTarget = null;
-        if (this.contentWindow && this.contentWindow !== designable_shared_2.globalThisPolyfill) {
-            this.removeEventListener('resize', this.onResize);
-        }
-        else if (this.resizeObserver) {
-            if (this.container && this.container !== document) {
-                this.resizeObserver.unobserve(this.container);
-                this.resizeObserver.disconnect();
-            }
-            this.resizeObserver = null;
-        }
+  }
+  detach() {
+    if (this.request !== null) {
+      designable_shared_2.globalThisPolyfill.cancelAnimationFrame(this.request)
+      this.request = null
     }
+    this.resizeTarget = null
+    if (
+      this.contentWindow &&
+      this.contentWindow !== designable_shared_2.globalThisPolyfill
+    ) {
+      this.removeEventListener('resize', this.onResize)
+    } else if (this.resizeObserver) {
+      if (this.container && this.container !== document) {
+        this.resizeObserver.unobserve(this.container)
+        this.resizeObserver.disconnect()
+      }
+      this.resizeObserver = null
+    }
+  }
 }
-exports.ViewportResizeDriver = ViewportResizeDriver;
+exports.ViewportResizeDriver = ViewportResizeDriver

package/lib/drivers/ViewportScrollDriver.d.ts

@@ -1,8 +1,8 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { Engine } from '../models/Engine';
+import { EventDriver } from '@thienvu18/designable-shared'
+import { Engine } from '../models/Engine'
 export declare class ViewportScrollDriver extends EventDriver<Engine> {
-    request: any;
-    onScroll: (e: UIEvent) => void;
-    attach(): void;
-    detach(): void;
+  request: any
+  onScroll: (e: UIEvent) => void
+  attach(): void
+  detach(): void
 }

package/lib/drivers/ViewportScrollDriver.js

@@ -1,34 +1,37 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportScrollDriver = void 0;
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const events_1 = require("../events");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.ViewportScrollDriver = void 0
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const events_1 = require('../events')
 class ViewportScrollDriver extends designable_shared_1.EventDriver {
-    constructor() {
-        super(...arguments);
-        this.request = null;
-        this.onScroll = (e) => {
-            e.preventDefault();
-            this.request = designable_shared_1.globalThisPolyfill.requestAnimationFrame(() => {
-                this.dispatch(new events_1.ViewportScrollEvent({
-                    scrollX: this.contentWindow.scrollX,
-                    scrollY: this.contentWindow.scrollY,
-                    width: this.contentWindow.document.body.clientWidth,
-                    height: this.contentWindow.document.body.clientHeight,
-                    innerHeight: this.contentWindow.innerHeight,
-                    innerWidth: this.contentWindow.innerWidth,
-                    view: this.contentWindow,
-                    target: e.target,
-                }));
-                cancelAnimationFrame(this.request);
-            });
-        };
-    }
-    attach() {
-        this.addEventListener('scroll', this.onScroll);
-    }
-    detach() {
-        this.removeEventListener('scroll', this.onScroll);
+  constructor() {
+    super(...arguments)
+    this.request = null
+    this.onScroll = (e) => {
+      e.preventDefault()
+      this.request =
+        designable_shared_1.globalThisPolyfill.requestAnimationFrame(() => {
+          this.dispatch(
+            new events_1.ViewportScrollEvent({
+              scrollX: this.contentWindow.scrollX,
+              scrollY: this.contentWindow.scrollY,
+              width: this.contentWindow.document.body.clientWidth,
+              height: this.contentWindow.document.body.clientHeight,
+              innerHeight: this.contentWindow.innerHeight,
+              innerWidth: this.contentWindow.innerWidth,
+              view: this.contentWindow,
+              target: e.target,
+            })
+          )
+          cancelAnimationFrame(this.request)
+        })
     }
+  }
+  attach() {
+    this.addEventListener('scroll', this.onScroll)
+  }
+  detach() {
+    this.removeEventListener('scroll', this.onScroll)
+  }
 }
-exports.ViewportScrollDriver = ViewportScrollDriver;
+exports.ViewportScrollDriver = ViewportScrollDriver

package/lib/drivers/index.d.ts

@@ -1,6 +1,6 @@
-export * from './DragDropDriver';
-export * from './MouseClickDriver';
-export * from './MouseMoveDriver';
-export * from './ViewportResizeDriver';
-export * from './ViewportScrollDriver';
-export * from './KeyboardDriver';
+export * from './DragDropDriver'
+export * from './KeyboardDriver'
+export * from './MouseClickDriver'
+export * from './MouseMoveDriver'
+export * from './ViewportResizeDriver'
+export * from './ViewportScrollDriver'

package/lib/drivers/index.js

@@ -1,22 +1,38 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DragDropDriver"), exports);
-__exportStar(require("./MouseClickDriver"), exports);
-__exportStar(require("./MouseMoveDriver"), exports);
-__exportStar(require("./ViewportResizeDriver"), exports);
-__exportStar(require("./ViewportScrollDriver"), exports);
-__exportStar(require("./KeyboardDriver"), exports);
+'use strict'
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        var desc = Object.getOwnPropertyDescriptor(m, k)
+        if (
+          !desc ||
+          ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k]
+            },
+          }
+        }
+        Object.defineProperty(o, k2, desc)
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        o[k2] = m[k]
+      })
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m)
+      if (p !== 'default' && !Object.prototype.hasOwnProperty.call(exports, p))
+        __createBinding(exports, m, p)
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+__exportStar(require('./DragDropDriver'), exports)
+__exportStar(require('./MouseClickDriver'), exports)
+__exportStar(require('./MouseMoveDriver'), exports)
+__exportStar(require('./ViewportResizeDriver'), exports)
+__exportStar(require('./ViewportScrollDriver'), exports)
+__exportStar(require('./KeyboardDriver'), exports)

package/lib/effects/index.d.ts

@@ -1,11 +1,11 @@
-export * from './useCursorEffect';
-export * from './useViewportEffect';
-export * from './useDragDropEffect';
-export * from './useResizeEffect';
-export * from './useSelectionEffect';
-export * from './useFreeSelectionEffect';
-export * from './useKeyboardEffect';
-export * from './useAutoScrollEffect';
-export * from './useWorkspaceEffect';
-export * from './useContentEditableEffect';
-export * from './useTranslateEffect';
+export * from './useAutoScrollEffect'
+export * from './useContentEditableEffect'
+export * from './useCursorEffect'
+export * from './useDragDropEffect'
+export * from './useFreeSelectionEffect'
+export * from './useKeyboardEffect'
+export * from './useResizeEffect'
+export * from './useSelectionEffect'
+export * from './useTranslateEffect'
+export * from './useViewportEffect'
+export * from './useWorkspaceEffect'

package/lib/effects/index.js

@@ -1,27 +1,43 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useCursorEffect"), exports);
-__exportStar(require("./useViewportEffect"), exports);
-__exportStar(require("./useDragDropEffect"), exports);
-__exportStar(require("./useResizeEffect"), exports);
-__exportStar(require("./useSelectionEffect"), exports);
-__exportStar(require("./useFreeSelectionEffect"), exports);
-__exportStar(require("./useKeyboardEffect"), exports);
-__exportStar(require("./useAutoScrollEffect"), exports);
-__exportStar(require("./useWorkspaceEffect"), exports);
-__exportStar(require("./useContentEditableEffect"), exports);
-__exportStar(require("./useTranslateEffect"), exports);
+'use strict'
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        var desc = Object.getOwnPropertyDescriptor(m, k)
+        if (
+          !desc ||
+          ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k]
+            },
+          }
+        }
+        Object.defineProperty(o, k2, desc)
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        o[k2] = m[k]
+      })
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m)
+      if (p !== 'default' && !Object.prototype.hasOwnProperty.call(exports, p))
+        __createBinding(exports, m, p)
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+__exportStar(require('./useCursorEffect'), exports)
+__exportStar(require('./useViewportEffect'), exports)
+__exportStar(require('./useDragDropEffect'), exports)
+__exportStar(require('./useResizeEffect'), exports)
+__exportStar(require('./useSelectionEffect'), exports)
+__exportStar(require('./useFreeSelectionEffect'), exports)
+__exportStar(require('./useKeyboardEffect'), exports)
+__exportStar(require('./useAutoScrollEffect'), exports)
+__exportStar(require('./useWorkspaceEffect'), exports)
+__exportStar(require('./useContentEditableEffect'), exports)
+__exportStar(require('./useTranslateEffect'), exports)

package/lib/effects/useAutoScrollEffect.d.ts

@@ -1,2 +1,2 @@
-import { Engine } from '../models';
-export declare const useAutoScrollEffect: (engine: Engine) => void;
+import { Engine } from '../models'
+export declare const useAutoScrollEffect: (engine: Engine) => void

package/lib/effects/useAutoScrollEffect.js

@@ -1,69 +1,87 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutoScrollEffect = void 0;
-const models_1 = require("../models");
-const events_1 = require("../events");
-const designable_shared_1 = require("@thienvu18/designable-shared");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.useAutoScrollEffect = void 0
+const models_1 = require('../models')
+const events_1 = require('../events')
+const designable_shared_1 = require('@thienvu18/designable-shared')
 const useAutoScrollEffect = (engine) => {
-    let xScroller = null;
-    let yScroller = null;
-    let xScrollerAnimationStop = null;
-    let yScrollerAnimationStop = null;
-    const scrolling = (point, viewport) => {
-        if (engine.cursor.status === models_1.CursorStatus.Dragging) {
-            xScroller = (0, designable_shared_1.calcAutoScrollBasicInfo)(point, 'x', viewport.rect);
-            yScroller = (0, designable_shared_1.calcAutoScrollBasicInfo)(point, 'y', viewport.rect);
-            if (xScroller) {
-                if (xScrollerAnimationStop) {
-                    xScrollerAnimationStop();
-                }
-                xScrollerAnimationStop = (0, designable_shared_1.scrollAnimate)(viewport.scrollContainer, 'x', xScroller.direction, xScroller.speed);
-            }
-            else {
-                if (xScrollerAnimationStop) {
-                    xScrollerAnimationStop();
-                }
-            }
-            if (yScroller) {
-                if (yScrollerAnimationStop) {
-                    yScrollerAnimationStop();
-                }
-                yScrollerAnimationStop = (0, designable_shared_1.scrollAnimate)(viewport.scrollContainer, 'y', yScroller.direction, yScroller.speed);
-            }
-            else {
-                if (yScrollerAnimationStop) {
-                    yScrollerAnimationStop();
-                }
-            }
+  let xScroller = null
+  let yScroller = null
+  let xScrollerAnimationStop = null
+  let yScrollerAnimationStop = null
+  const scrolling = (point, viewport) => {
+    if (engine.cursor.status === models_1.CursorStatus.Dragging) {
+      xScroller = (0, designable_shared_1.calcAutoScrollBasicInfo)(
+        point,
+        'x',
+        viewport.rect
+      )
+      yScroller = (0, designable_shared_1.calcAutoScrollBasicInfo)(
+        point,
+        'y',
+        viewport.rect
+      )
+      if (xScroller) {
+        if (xScrollerAnimationStop) {
+          xScrollerAnimationStop()
         }
-    };
-    engine.subscribeTo(events_1.DragStartEvent, () => {
-        engine.workbench.eachWorkspace((workspace) => {
-            workspace.viewport.takeDragStartSnapshot();
-        });
-    });
-    engine.subscribeTo(events_1.DragMoveEvent, (event) => {
-        engine.workbench.eachWorkspace((workspace) => {
-            const viewport = workspace.viewport;
-            const outline = workspace.outline;
-            const point = new designable_shared_1.Point(event.data.topClientX, event.data.topClientY);
-            if (outline.isPointInViewport(point)) {
-                scrolling(point, outline);
-            }
-            else if (viewport.isPointInViewport(point)) {
-                scrolling(point, viewport);
-            }
-        });
-    });
-    engine.subscribeTo(events_1.DragStopEvent, () => {
-        xScroller = null;
-        yScroller = null;
+        xScrollerAnimationStop = (0, designable_shared_1.scrollAnimate)(
+          viewport.scrollContainer,
+          'x',
+          xScroller.direction,
+          xScroller.speed
+        )
+      } else {
         if (xScrollerAnimationStop) {
-            xScrollerAnimationStop();
+          xScrollerAnimationStop()
+        }
+      }
+      if (yScroller) {
+        if (yScrollerAnimationStop) {
+          yScrollerAnimationStop()
         }
+        yScrollerAnimationStop = (0, designable_shared_1.scrollAnimate)(
+          viewport.scrollContainer,
+          'y',
+          yScroller.direction,
+          yScroller.speed
+        )
+      } else {
         if (yScrollerAnimationStop) {
-            yScrollerAnimationStop();
+          yScrollerAnimationStop()
         }
-    });
-};
-exports.useAutoScrollEffect = useAutoScrollEffect;
+      }
+    }
+  }
+  engine.subscribeTo(events_1.DragStartEvent, () => {
+    engine.workbench.eachWorkspace((workspace) => {
+      workspace.viewport.takeDragStartSnapshot()
+    })
+  })
+  engine.subscribeTo(events_1.DragMoveEvent, (event) => {
+    engine.workbench.eachWorkspace((workspace) => {
+      const viewport = workspace.viewport
+      const outline = workspace.outline
+      const point = new designable_shared_1.Point(
+        event.data.topClientX,
+        event.data.topClientY
+      )
+      if (outline.isPointInViewport(point)) {
+        scrolling(point, outline)
+      } else if (viewport.isPointInViewport(point)) {
+        scrolling(point, viewport)
+      }
+    })
+  })
+  engine.subscribeTo(events_1.DragStopEvent, () => {
+    xScroller = null
+    yScroller = null
+    if (xScrollerAnimationStop) {
+      xScrollerAnimationStop()
+    }
+    if (yScrollerAnimationStop) {
+      yScrollerAnimationStop()
+    }
+  })
+}
+exports.useAutoScrollEffect = useAutoScrollEffect

package/lib/effects/useContentEditableEffect.d.ts

@@ -1,2 +1,2 @@
-import { Engine } from '../models';
-export declare const useContentEditableEffect: (engine: Engine) => void;
+import { Engine } from '../models'
+export declare const useContentEditableEffect: (engine: Engine) => void