@idraw/core 0.3.1 → 0.4.0-alpha.2

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

@@ -0,0 +1,12 @@
+import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } from '@idraw/types';
+export type ScrollbarThumbType = 'X' | 'Y';
+export declare function isPointInScrollThumb(helperContext: ViewContext2D, p: Point, opts: {
+    xThumbRect?: ElementSize | null;
+    yThumbRect?: ElementSize | null;
+}): ScrollbarThumbType | null;
+export declare function drawScroller(ctx: ViewContext2D, opts: {
+    snapshot: BoardViewerFrameSnapshot;
+}): {
+    xThumbRect: ElementSize;
+    yThumbRect: ElementSize;
+};

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

@@ -0,0 +1,192 @@
+import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
+const minScrollerWidth = 12;
+const scrollerLineWidth = 16;
+const scrollerAlpha = 0.12;
+const scrollerThumbAlpha = 0.36;
+const scrollConfig = {
+    width: minScrollerWidth,
+    color: '#000000',
+    showBackground: true
+};
+function isPointAtRect(helperContext, p, rect) {
+    const ctx = helperContext;
+    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(helperContext, p, opts) {
+    let thumbType = null;
+    const { xThumbRect, yThumbRect } = opts;
+    if (xThumbRect && isPointAtRect(helperContext, p, xThumbRect)) {
+        thumbType = 'X';
+    }
+    else if (yThumbRect && isPointAtRect(helperContext, 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
+    };
+    return info;
+}
+function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
+    const { width, height } = viewSizeInfo;
+    const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
+    const sliderMinSize = scrollerLineWidth * 2.5;
+    const lineSize = scrollerLineWidth;
+    let xSize = 0;
+    let ySize = 0;
+    xSize = Math.max(sliderMinSize, width - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
+    if (xSize >= width) {
+        xSize = width;
+    }
+    ySize = Math.max(sliderMinSize, height - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
+    if (ySize >= height) {
+        ySize = height;
+    }
+    const xStart = lineSize / 2;
+    const xEnd = width - xSize - lineSize;
+    let translateX = xStart;
+    if (offsetLeft > 0) {
+        translateX = xStart;
+    }
+    else if (offsetRight > 0) {
+        translateX = xEnd;
+    }
+    else if (offsetLeft <= 0 && xSize > 0 && !(offsetLeft === 0 && offsetRight === 0)) {
+        translateX = xSize / 2 + ((width - xSize) * Math.abs(offsetLeft)) / (Math.abs(offsetLeft) + Math.abs(offsetRight));
+        translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
+    }
+    const yStart = lineSize / 2;
+    const yEnd = height - ySize - lineSize;
+    let translateY = yStart;
+    if (offsetTop > 0) {
+        translateY = yStart;
+    }
+    else if (offsetBottom > 0) {
+        translateY = yEnd;
+    }
+    else if (offsetTop <= 0 && ySize > 0 && !(offsetTop === 0 && offsetBottom === 0)) {
+        translateY = ySize / 2 + ((height - ySize) * Math.abs(offsetTop)) / (Math.abs(offsetTop) + Math.abs(offsetBottom));
+        translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
+    }
+    const xThumbRect = {
+        x: translateX,
+        y: height - lineSize,
+        w: xSize,
+        h: lineSize
+    };
+    const yThumbRect = {
+        x: width - lineSize,
+        y: translateY,
+        w: lineSize,
+        h: ySize
+    };
+    const scrollWrapper = {
+        lineSize,
+        xSize,
+        ySize,
+        translateY,
+        translateX,
+        color: '#0000007A',
+        xThumbRect,
+        yThumbRect
+    };
+    return scrollWrapper;
+}
+function drawScrollerThumb(ctx, opts) {
+    let { x, y, h, w } = opts;
+    const { color, 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 = scrollerThumbAlpha;
+    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 = color;
+    ctx.fill();
+    ctx.globalAlpha = 1;
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    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();
+}
+function drawScrollerInfo(helperContext, opts) {
+    const ctx = helperContext;
+    const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
+    const { activeThumbType, prevPoint, activePoint } = scrollInfo;
+    const { width, height } = viewSizeInfo;
+    const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo);
+    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);
+        }
+    }
+    if (scrollConfig.showBackground === true) {
+        ctx.globalAlpha = scrollerAlpha;
+        ctx.fillStyle = wrapper.color;
+        ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
+    }
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.color }));
+    if (scrollConfig.showBackground === true) {
+        ctx.globalAlpha = scrollerAlpha;
+        ctx.fillStyle = wrapper.color;
+        ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
+    }
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.color }));
+    ctx.globalAlpha = 1;
+    return {
+        xThumbRect,
+        yThumbRect
+    };
+}
+export function drawScroller(ctx, opts) {
+    const { snapshot } = opts;
+    const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+    const scrollInfo = getScrollInfoFromSnapshot(snapshot);
+    const { xThumbRect, yThumbRect } = drawScrollerInfo(ctx, { viewSizeInfo, viewScaleInfo, scrollInfo });
+    return { xThumbRect, yThumbRect };
+}

package/dist/esm/middleware/selector/config.d.ts

@@ -0,0 +1,20 @@
+export declare const key = "SELECT";
+export declare const keyActionType: unique symbol;
+export declare const keyResizeType: unique symbol;
+export declare const keyAreaStart: unique symbol;
+export declare const keyAreaEnd: unique symbol;
+export declare const keyHoverElement: unique symbol;
+export declare const keyHoverElementVertexes: unique symbol;
+export declare const keySelectedElementList: unique symbol;
+export declare const keySelectedElementListVertexes: unique symbol;
+export declare const keySelectedElementController: unique symbol;
+export declare const keyGroupQueue: unique symbol;
+export declare const keyGroupQueueVertexesList: unique symbol;
+export declare const keyDebugElemCenter: unique symbol;
+export declare const keyDebugStartVertical: unique symbol;
+export declare const keyDebugEndVertical: unique symbol;
+export declare const keyDebugStartHorizontal: unique symbol;
+export declare const keyDebugEndHorizontal: unique symbol;
+export declare const keyDebugEnd0: unique symbol;
+export declare const resizeControllerBorderWidth = 2;
+export declare const wrapperColor = "#1973ba";

package/dist/esm/middleware/selector/config.js

@@ -0,0 +1,20 @@
+export const key = 'SELECT';
+export const keyActionType = Symbol(`${key}_actionType`);
+export const keyResizeType = Symbol(`${key}_resizeType`);
+export const keyAreaStart = Symbol(`${key}_areaStart`);
+export const keyAreaEnd = Symbol(`${key}_areaEnd`);
+export const keyHoverElement = Symbol(`${key}_hoverElement`);
+export const keyHoverElementVertexes = Symbol(`${key}_hoverElementVertexes`);
+export const keySelectedElementList = Symbol(`${key}_selectedElementList`);
+export const keySelectedElementListVertexes = Symbol(`${key}_selectedElementListVertexes`);
+export const keySelectedElementController = Symbol(`${key}_selectedElementController`);
+export const keyGroupQueue = Symbol(`${key}_groupQueue`);
+export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
+export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
+export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
+export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
+export const keyDebugStartHorizontal = Symbol(`${key}_debug_startHorizontal`);
+export const keyDebugEndHorizontal = Symbol(`${key}_debug_endHorizontal`);
+export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
+export const resizeControllerBorderWidth = 2;
+export const wrapperColor = '#1973ba';

package/dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -0,0 +1,22 @@
+import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController } from '@idraw/types';
+import type { AreaSize } from './types';
+export declare function drawHoverVertexesWrapper(ctx: ViewContext2D, vertexes: ViewRectVertexes | null, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;
+export declare function drawSelectedElementControllersVertexes(ctx: ViewContext2D, controller: ElementSizeController | null, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;
+export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;
+export declare function drawArea(ctx: ViewContext2D, opts: {
+    start: PointSize;
+    end: PointSize;
+}): void;
+export declare function drawListArea(ctx: ViewContext2D, opts: {
+    areaSize: AreaSize;
+}): void;
+export declare function drawGroupQueueVertexesWrappers(ctx: ViewContext2D, vertexesList: ViewRectVertexes[], opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -0,0 +1,111 @@
+import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
+import { resizeControllerBorderWidth, wrapperColor } from './config';
+function drawVertexes(ctx, vertexes, opts) {
+    const { borderColor, borderWidth, background, lineDash } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = borderWidth;
+    ctx.strokeStyle = borderColor;
+    ctx.fillStyle = background;
+    ctx.setLineDash(lineDash);
+    ctx.beginPath();
+    ctx.moveTo(vertexes[0].x, vertexes[0].y);
+    ctx.lineTo(vertexes[1].x, vertexes[1].y);
+    ctx.lineTo(vertexes[2].x, vertexes[2].y);
+    ctx.lineTo(vertexes[3].x, vertexes[3].y);
+    ctx.lineTo(vertexes[0].x, vertexes[0].y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+}
+export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
+    if (!vertexes) {
+        return;
+    }
+    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+}
+export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
+    if (!controller) {
+        return;
+    }
+    const { elementWrapper, left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = controller;
+    const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
+    const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
+    drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
+    drawVertexes(ctx, calcViewVertexes(left.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(right.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(top.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(bottom.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);
+    drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
+}
+export function drawElementListShadows(ctx, elements, opts) {
+    elements.forEach((elem) => {
+        let { x, y, w, h } = elem;
+        const { angle = 0 } = elem;
+        if (opts === null || opts === void 0 ? void 0 : opts.calculator) {
+            const { calculator } = opts;
+            const size = calculator.elementSize({ x, y, w, h }, opts.viewScaleInfo, opts.viewSizeInfo);
+            x = size.x;
+            y = size.y;
+            w = size.w;
+            h = size.h;
+        }
+        const vertexes = rotateElementVertexes({ x, y, w, h, angle });
+        if (vertexes.length >= 2) {
+            ctx.setLineDash([]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = '#aaaaaa';
+            ctx.fillStyle = '#0000001A';
+            ctx.beginPath();
+            ctx.moveTo(vertexes[0].x, vertexes[0].y);
+            for (let i = 0; i < vertexes.length; i++) {
+                const p = vertexes[i];
+                ctx.lineTo(p.x, p.y);
+            }
+            ctx.closePath();
+            ctx.stroke();
+            ctx.fill();
+        }
+    });
+}
+export function drawArea(ctx, opts) {
+    const { start, end } = opts;
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = wrapperColor;
+    ctx.fillStyle = '#1976d24f';
+    ctx.beginPath();
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.lineTo(start.x, end.y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+}
+export function drawListArea(ctx, opts) {
+    const { areaSize } = opts;
+    const { x, y, w, h } = areaSize;
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = wrapperColor;
+    ctx.fillStyle = '#1976d21c';
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+}
+export function drawGroupQueueVertexesWrappers(ctx, vertexesList, opts) {
+    for (let i = 0; i < vertexesList.length; i++) {
+        const vertexes = vertexesList[i];
+        const wrapperOpts = { borderColor: wrapperColor, borderWidth: 2, background: 'transparent', lineDash: [4, 4] };
+        drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
+    }
+}

package/dist/esm/middleware/selector/index.d.ts

@@ -0,0 +1,3 @@
+import type { CoreEvent } from '@idraw/types';
+import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent>;