@thienvu18/designable-core 2.0.1 → 2.0.2

package/esm/drivers/ViewportResizeDriver.js

@@ -1,64 +1,61 @@
-import { EventDriver } from '@thienvu18/designable-shared';
-import { ViewportResizeEvent } from '../events';
-import { ResizeObserver } from '@juggle/resize-observer';
-import { globalThisPolyfill } from '@thienvu18/designable-shared';
+import { ResizeObserver } from '@juggle/resize-observer'
+import { EventDriver, globalThisPolyfill } from '@thienvu18/designable-shared'
+import { ViewportResizeEvent } from '../events'
 export class ViewportResizeDriver extends 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 = globalThisPolyfill.requestAnimationFrame(() => {
-                this.request = null;
-                const target = this.resizeTarget ?? this.container;
-                this.resizeTarget = null;
-                this.dispatch(new 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 = globalThisPolyfill.requestAnimationFrame(() => {
+        this.request = null
+        const target = this.resizeTarget ?? this.container
+        this.resizeTarget = null
+        this.dispatch(
+          new 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 !== globalThisPolyfill) {
-            this.addEventListener('resize', this.onResize);
-        }
-        else {
-            if (this.container && this.container !== document) {
-                const ResizeObserverImpl = globalThisPolyfill.ResizeObserver || ResizeObserver;
-                this.resizeObserver = new ResizeObserverImpl(this.onResize);
-                this.resizeObserver.observe(this.container);
-            }
-        }
+  }
+  attach() {
+    if (this.contentWindow && this.contentWindow !== globalThisPolyfill) {
+      this.addEventListener('resize', this.onResize)
+    } else {
+      if (this.container && this.container !== document) {
+        const ResizeObserverImpl =
+          globalThisPolyfill.ResizeObserver || ResizeObserver
+        this.resizeObserver = new ResizeObserverImpl(this.onResize)
+        this.resizeObserver.observe(this.container)
+      }
     }
-    detach() {
-        if (this.request !== null) {
-            globalThisPolyfill.cancelAnimationFrame(this.request);
-            this.request = null;
-        }
-        this.resizeTarget = null;
-        if (this.contentWindow && this.contentWindow !== 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) {
+      globalThisPolyfill.cancelAnimationFrame(this.request)
+      this.request = null
     }
+    this.resizeTarget = null
+    if (this.contentWindow && this.contentWindow !== 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
+    }
+  }
 }

package/esm/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/esm/drivers/ViewportScrollDriver.js

@@ -1,30 +1,32 @@
-import { EventDriver, globalThisPolyfill } from '@thienvu18/designable-shared';
-import { ViewportScrollEvent } from '../events';
+import { EventDriver, globalThisPolyfill } from '@thienvu18/designable-shared'
+import { ViewportScrollEvent } from '../events'
 export class ViewportScrollDriver extends EventDriver {
-    constructor() {
-        super(...arguments);
-        this.request = null;
-        this.onScroll = (e) => {
-            e.preventDefault();
-            this.request = globalThisPolyfill.requestAnimationFrame(() => {
-                this.dispatch(new 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 = globalThisPolyfill.requestAnimationFrame(() => {
+        this.dispatch(
+          new 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)
+  }
 }

package/esm/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/esm/drivers/index.js

@@ -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/esm/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/esm/effects/index.js

@@ -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/esm/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/esm/effects/useAutoScrollEffect.js

@@ -1,65 +1,76 @@
-import { CursorStatus } from '../models';
-import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events';
-import { calcAutoScrollBasicInfo, scrollAnimate, Point, } from '@thienvu18/designable-shared';
+import {
+  Point,
+  calcAutoScrollBasicInfo,
+  scrollAnimate,
+} from '@thienvu18/designable-shared'
+import { DragMoveEvent, DragStartEvent, DragStopEvent } from '../events'
+import { CursorStatus } from '../models'
 export const useAutoScrollEffect = (engine) => {
-    let xScroller = null;
-    let yScroller = null;
-    let xScrollerAnimationStop = null;
-    let yScrollerAnimationStop = null;
-    const scrolling = (point, viewport) => {
-        if (engine.cursor.status === CursorStatus.Dragging) {
-            xScroller = calcAutoScrollBasicInfo(point, 'x', viewport.rect);
-            yScroller = calcAutoScrollBasicInfo(point, 'y', viewport.rect);
-            if (xScroller) {
-                if (xScrollerAnimationStop) {
-                    xScrollerAnimationStop();
-                }
-                xScrollerAnimationStop = scrollAnimate(viewport.scrollContainer, 'x', xScroller.direction, xScroller.speed);
-            }
-            else {
-                if (xScrollerAnimationStop) {
-                    xScrollerAnimationStop();
-                }
-            }
-            if (yScroller) {
-                if (yScrollerAnimationStop) {
-                    yScrollerAnimationStop();
-                }
-                yScrollerAnimationStop = 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 === CursorStatus.Dragging) {
+      xScroller = calcAutoScrollBasicInfo(point, 'x', viewport.rect)
+      yScroller = calcAutoScrollBasicInfo(point, 'y', viewport.rect)
+      if (xScroller) {
+        if (xScrollerAnimationStop) {
+          xScrollerAnimationStop()
         }
-    };
-    engine.subscribeTo(DragStartEvent, () => {
-        engine.workbench.eachWorkspace((workspace) => {
-            workspace.viewport.takeDragStartSnapshot();
-        });
-    });
-    engine.subscribeTo(DragMoveEvent, (event) => {
-        engine.workbench.eachWorkspace((workspace) => {
-            const viewport = workspace.viewport;
-            const outline = workspace.outline;
-            const point = new Point(event.data.topClientX, event.data.topClientY);
-            if (outline.isPointInViewport(point)) {
-                scrolling(point, outline);
-            }
-            else if (viewport.isPointInViewport(point)) {
-                scrolling(point, viewport);
-            }
-        });
-    });
-    engine.subscribeTo(DragStopEvent, () => {
-        xScroller = null;
-        yScroller = null;
+        xScrollerAnimationStop = scrollAnimate(
+          viewport.scrollContainer,
+          'x',
+          xScroller.direction,
+          xScroller.speed
+        )
+      } else {
         if (xScrollerAnimationStop) {
-            xScrollerAnimationStop();
+          xScrollerAnimationStop()
+        }
+      }
+      if (yScroller) {
+        if (yScrollerAnimationStop) {
+          yScrollerAnimationStop()
         }
+        yScrollerAnimationStop = scrollAnimate(
+          viewport.scrollContainer,
+          'y',
+          yScroller.direction,
+          yScroller.speed
+        )
+      } else {
         if (yScrollerAnimationStop) {
-            yScrollerAnimationStop();
+          yScrollerAnimationStop()
         }
-    });
-};
+      }
+    }
+  }
+  engine.subscribeTo(DragStartEvent, () => {
+    engine.workbench.eachWorkspace((workspace) => {
+      workspace.viewport.takeDragStartSnapshot()
+    })
+  })
+  engine.subscribeTo(DragMoveEvent, (event) => {
+    engine.workbench.eachWorkspace((workspace) => {
+      const viewport = workspace.viewport
+      const outline = workspace.outline
+      const point = new Point(event.data.topClientX, event.data.topClientY)
+      if (outline.isPointInViewport(point)) {
+        scrolling(point, outline)
+      } else if (viewport.isPointInViewport(point)) {
+        scrolling(point, viewport)
+      }
+    })
+  })
+  engine.subscribeTo(DragStopEvent, () => {
+    xScroller = null
+    yScroller = null
+    if (xScrollerAnimationStop) {
+      xScrollerAnimationStop()
+    }
+    if (yScrollerAnimationStop) {
+      yScrollerAnimationStop()
+    }
+  })
+}

package/esm/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