@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/middlewares/scroller/styles.js

@@ -0,0 +1,73 @@
+import { injectStyles, removeStyles, getMiddlewareValidStyles } from '@idraw/util';
+import { classNameMap, scrollbarTrackSize, scrollbarThumbLength, scrollbarThumbSize } from './static';
+export function initStyles(rootClassName, styles) {
+    const cls = (str) => `.${str}`;
+    const stylesProps = {
+        zIndex: styles.zIndex,
+        position: 'absolute',
+        background: 'transparent',
+        [cls(classNameMap.thumb)]: {
+            position: 'absolute',
+            background: styles.thumbBackground,
+            border: `1px solid ${styles.thumbBorderColor}`,
+            borderRadius: `${scrollbarThumbSize / 2}px`,
+            boxSizing: 'border-box',
+            [`&:hover`]: {
+                background: styles.hoverThumbBackground,
+                border: `1px solid ${styles.hoverThumbBorderColor}`,
+            },
+            [`&:active`]: {
+                background: styles.activeThumbBackground,
+                border: `1px solid ${styles.activeThumbBorderColor}`,
+            },
+        },
+        [`&${cls(classNameMap.vertical)}`]: {
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 'unset',
+            width: scrollbarTrackSize,
+            overflow: 'hidden',
+            [cls(classNameMap.thumb)]: {
+                top: scrollbarTrackSize,
+                bottom: 'unset',
+                left: scrollbarThumbSize / 2,
+                right: 'unset',
+                height: scrollbarThumbLength,
+                width: scrollbarThumbSize,
+            },
+        },
+        [`&${cls(classNameMap.horizontal)}`]: {
+            left: 0,
+            right: 0,
+            top: 'unset',
+            bottom: 0,
+            height: scrollbarTrackSize,
+            overflow: 'hidden',
+            [cls(classNameMap.thumb)]: {
+                top: scrollbarThumbSize / 2,
+                bottom: 'unset',
+                left: scrollbarTrackSize,
+                right: 'unset',
+                height: scrollbarThumbSize,
+                width: scrollbarThumbLength,
+            },
+        },
+    };
+    injectStyles({ styles: stylesProps, rootClassName, type: 'element' });
+}
+export function destroyStyles(rootClassName) {
+    removeStyles({ rootClassName, type: 'element' });
+}
+export function getMiddlewareScrollerStyles(config) {
+    const styles = getMiddlewareValidStyles(config, [
+        'zIndex',
+        'thumbBackground',
+        'thumbBorderColor',
+        'hoverThumbBackground',
+        'hoverThumbBorderColor',
+        'activeThumbBackground',
+        'activeThumbBorderColor',
+    ]);
+    return styles;
+}

package/dist/esm/middlewares/scroller/types.d.ts

@@ -1,11 +1,13 @@
-import type { Point, ElementSize } from '@idraw/types';
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
+import type { Point, HTMLCSSProps } from '@idraw/types';
+import { keyXThumbStyle, keyYThumbStyle, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './static';
 export type DeepScrollerSharedStorage = {
-    [keyXThumbRect]: null | ElementSize;
-    [keyYThumbRect]: null | ElementSize;
-    [keyHoverXThumbRect]: boolean | null;
-    [keyHoverYThumbRect]: boolean | null;
+    [keyXThumbStyle]: null | HTMLCSSProps;
+    [keyYThumbStyle]: null | HTMLCSSProps;
     [keyPrevPoint]: null | Point;
     [keyActivePoint]: null | Point;
     [keyActiveThumbType]: null | 'X' | 'Y';
 };
+export type ScrollbarStyles = {
+    xThumbStyle: HTMLCSSProps | null;
+    yThumbStyle: HTMLCSSProps | null;
+};

package/dist/esm/middlewares/scroller/types.js

@@ -1 +1 @@
-import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
+import { keyXThumbStyle, keyYThumbStyle, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './static';

package/dist/esm/middlewares/scroller/util.d.ts

@@ -1,13 +1,6 @@
-import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize, MiddlewareScrollerStyle } from '@idraw/types';
-export type ScrollbarThumbType = 'X' | 'Y';
-export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
-    xThumbRect?: ElementSize | null;
-    yThumbRect?: ElementSize | null;
-}): ScrollbarThumbType | null;
-export declare function drawScroller(ctx: ViewContext2D, opts: {
-    snapshot: BoardViewerFrameSnapshot;
-    style: MiddlewareScrollerStyle;
-}): {
-    xThumbRect: ElementSize;
-    yThumbRect: ElementSize;
-};
+import type { ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+import type { ScrollbarStyles } from './types';
+export declare function calcScrollbarStyles(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): ScrollbarStyles;

package/dist/esm/middlewares/scroller/util.js

@@ -1,49 +1,12 @@
-import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect, keyHoverXThumbRect, keyHoverYThumbRect } from './config';
-const scrollerLineWidth = 16;
-const minThumbLength = scrollerLineWidth * 2.5;
-function isPointAtRect(overlayContext, p, rect) {
-    const ctx = overlayContext;
-    const { x, y, w, h } = rect;
-    ctx.beginPath();
-    ctx.rect(x, y, w, h);
-    ctx.closePath();
-    if (ctx.isPointInPath(p.x, p.y)) {
-        return true;
-    }
-    return false;
-}
-export function isPointInScrollThumb(overlayContext, p, opts) {
-    let thumbType = null;
-    const { xThumbRect, yThumbRect } = opts;
-    if (xThumbRect && isPointAtRect(overlayContext, p, xThumbRect)) {
-        thumbType = 'X';
-    }
-    else if (yThumbRect && isPointAtRect(overlayContext, p, yThumbRect)) {
-        thumbType = 'Y';
-    }
-    return thumbType;
-}
-function getScrollInfoFromSnapshot(snapshot) {
-    const { sharedStore } = snapshot;
-    const info = {
-        activePoint: sharedStore[keyActivePoint] || null,
-        prevPoint: sharedStore[keyPrevPoint] || null,
-        activeThumbType: sharedStore[keyActiveThumbType] || null,
-        xThumbRect: sharedStore[keyXThumbRect] || null,
-        yThumbRect: sharedStore[keyYThumbRect] || null,
-        hoverXThumb: sharedStore[keyHoverXThumbRect],
-        hoverYThumb: sharedStore[keyHoverYThumbRect]
-    };
-    return info;
-}
-function calcScrollerInfo(opts) {
-    const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style } = opts;
+import { scrollbarTrackSize, scrollbarThumbLength } from './static';
+export function calcScrollbarStyles(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
     const { width, height } = viewSizeInfo;
     const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
+    const scrollerLineWidth = scrollbarTrackSize;
+    const minThumbLength = scrollbarThumbLength;
     const sliderMinSize = minThumbLength;
     const lineSize = scrollerLineWidth;
-    const { thumbBackground, thumbBorderColor, hoverThumbBackground, hoverThumbBorderColor } = style;
     let xSize = 0;
     let ySize = 0;
     xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
@@ -80,109 +43,17 @@ function calcScrollerInfo(opts) {
         translateY = yStart + ((height - ySize) * Math.abs(offsetTop)) / (Math.abs(offsetTop) + Math.abs(offsetBottom));
         translateY = Math.min(Math.max(0, translateY - yStart), height - ySize);
     }
-    const xThumbRect = {
-        x: translateX,
-        y: height - lineSize,
-        w: xSize,
-        h: lineSize
+    const xThumbStyle = {
+        left: translateX,
+        width: xSize,
     };
-    const yThumbRect = {
-        x: width - lineSize,
-        y: translateY,
-        w: lineSize,
-        h: ySize
+    const yThumbStyle = {
+        top: translateY,
+        height: ySize,
     };
-    const scrollWrapper = {
-        lineSize,
-        xSize,
-        ySize,
-        translateY,
-        translateX,
-        xThumbBackground: hoverXThumb ? hoverThumbBackground : thumbBackground,
-        yThumbBackground: hoverYThumb ? hoverThumbBackground : thumbBackground,
-        xThumbBorderColor: hoverXThumb ? hoverThumbBorderColor : thumbBorderColor,
-        yThumbBorderColor: hoverYThumb ? hoverThumbBorderColor : thumbBorderColor,
-        xThumbRect,
-        yThumbRect
+    const scrollbarInfo = {
+        xThumbStyle,
+        yThumbStyle,
     };
-    return scrollWrapper;
-}
-function drawScrollerThumb(ctx, opts) {
-    let { x, y, h, w } = opts;
-    const { background, borderColor } = opts;
-    ctx.save();
-    ctx.shadowColor = '#FFFFFF';
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    ctx.shadowBlur = 1;
-    {
-        const { axis } = opts;
-        if (axis === 'X') {
-            y = y + h / 4 + 0;
-            h = h / 2;
-        }
-        else if (axis === 'Y') {
-            x = x + w / 4 + 0;
-            w = w / 2;
-        }
-        let r = opts.r;
-        r = Math.min(r, w / 2, h / 2);
-        if (w < r * 2 || h < r * 2) {
-            r = 0;
-        }
-        ctx.globalAlpha = 1;
-        ctx.beginPath();
-        ctx.moveTo(x + r, y);
-        ctx.arcTo(x + w, y, x + w, y + h, r);
-        ctx.arcTo(x + w, y + h, x, y + h, r);
-        ctx.arcTo(x, y + h, x, y, r);
-        ctx.arcTo(x, y, x + w, y, r);
-        ctx.closePath();
-        ctx.fillStyle = background;
-        ctx.fill('nonzero');
-        ctx.beginPath();
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = borderColor;
-        ctx.setLineDash([]);
-        ctx.moveTo(x + r, y);
-        ctx.arcTo(x + w, y, x + w, y + h, r);
-        ctx.arcTo(x + w, y + h, x, y + h, r);
-        ctx.arcTo(x, y + h, x, y, r);
-        ctx.arcTo(x, y, x + w, y, r);
-        ctx.closePath();
-        ctx.stroke();
-    }
-    ctx.restore();
-}
-function drawScrollerInfo(overlayContext, opts) {
-    const ctx = overlayContext;
-    const { viewScaleInfo, viewSizeInfo, scrollInfo, style } = opts;
-    const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo;
-    const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb, style });
-    let xThumbRect = Object.assign({}, wrapper.xThumbRect);
-    let yThumbRect = Object.assign({}, wrapper.yThumbRect);
-    if (activeThumbType && prevPoint && activePoint) {
-        if (activeThumbType === 'X' && scrollInfo.xThumbRect) {
-            xThumbRect = Object.assign({}, scrollInfo.xThumbRect);
-            xThumbRect.x = xThumbRect.x + (activePoint.x - prevPoint.x);
-        }
-        else if (activeThumbType === 'Y' && scrollInfo.yThumbRect) {
-            yThumbRect = Object.assign({}, scrollInfo.yThumbRect);
-            yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
-        }
-    }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, background: wrapper.xThumbBackground, borderColor: wrapper.xThumbBorderColor }));
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, background: wrapper.yThumbBackground, borderColor: wrapper.yThumbBorderColor }));
-    return {
-        xThumbRect,
-        yThumbRect
-    };
-}
-export function drawScroller(ctx, opts) {
-    const { snapshot, style } = opts;
-    const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
-    const scrollInfo = getScrollInfoFromSnapshot(snapshot);
-    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo, style });
-    return { xThumbRect, yThumbRect };
+    return scrollbarInfo;
 }

package/dist/esm/middlewares/selector/dom.d.ts

@@ -0,0 +1,21 @@
+import type { RenderMaterialHelperOptions, Point, Material, StrictMaterial } from '@idraw/types';
+export declare function initRoot(opts: {
+    rootClassName: string;
+    $container: HTMLElement;
+}): HTMLDivElement;
+export declare function resetMaterialNestedBox($root: HTMLDivElement | null, opts: RenderMaterialHelperOptions): void;
+export declare function clearMaterialHoverBox($root: HTMLDivElement | null): void;
+export declare function renderMaterialHoverBox($root: HTMLDivElement | null, opts: RenderMaterialHelperOptions): void;
+export declare function clearMaterialLockedBox($root: HTMLDivElement | null): void;
+export declare function renderMaterialLockedBox($root: HTMLDivElement | null, opts: RenderMaterialHelperOptions): void;
+export declare function resetMaterialSelectedBox($root: HTMLDivElement | null, opts: RenderMaterialHelperOptions): void;
+export declare function clearMaterialSelectionAreaBox($root: HTMLDivElement | null): void;
+export declare function resetMaterialSelectionAreaBox($root: HTMLDivElement | null, opts: RenderMaterialHelperOptions & {
+    areaStart: Point | null;
+    areaEnd: Point | null;
+    selectedMaterials: Material[];
+}): void;
+export declare function isPointInActiveGroup(e: Event, opts: {
+    $root: HTMLElement | null;
+    groupQueue: StrictMaterial<'group'>[] | null;
+}): boolean;