@idraw/core 0.4.0-beta.4 → 0.4.0-beta.41

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

@@ -1,7 +1,7 @@
-import type { BoardMiddleware, CoreEvent, Point } from '@idraw/types';
+import type { Middleware, CoreEventMap, Point } from '@idraw/types';
 declare const keyPrevPoint: unique symbol;
 type DraggerSharedStorage = {
     [keyPrevPoint]: Point | null;
 };
-export declare const MiddlewareDragger: BoardMiddleware<DraggerSharedStorage, CoreEvent>;
+export declare const MiddlewareDragger: Middleware<DraggerSharedStorage, CoreEventMap>;
 export {};

package/dist/esm/middleware/dragger/index.js

@@ -1,14 +1,16 @@
+import { coreEventKeys } from '../../config';
 const key = 'DRAG';
 const keyPrevPoint = Symbol(`${key}_prevPoint`);
 export const MiddlewareDragger = (opts) => {
     const { eventHub, sharer, viewer } = opts;
     let isDragging = false;
     return {
+        name: '@middleware/dragger',
         hover() {
             if (isDragging === true) {
                 return;
             }
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-default'
             });
         },
@@ -16,7 +18,7 @@ export const MiddlewareDragger = (opts) => {
             const { point } = e;
             sharer.setSharedStorage(keyPrevPoint, point);
             isDragging = true;
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-active'
             });
         },
@@ -34,7 +36,7 @@ export const MiddlewareDragger = (opts) => {
         pointEnd() {
             isDragging = false;
             sharer.setSharedStorage(keyPrevPoint, null);
-            eventHub.trigger('cursor', {
+            eventHub.trigger(coreEventKeys.CURSOR, {
                 type: 'drag-default'
             });
         }

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

@@ -0,0 +1,5 @@
+import type { MiddlewareInfoStyle } from '@idraw/types';
+export declare const infoFontSize = 10;
+export declare const infoLineHeight = 16;
+export declare const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = "@middleware/internal-event/show-info-angle";
+export declare const defaltStyle: MiddlewareInfoStyle;

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

@@ -0,0 +1,9 @@
+const infoBackground = '#1973bac6';
+const infoTextColor = '#ffffff';
+export const infoFontSize = 10;
+export const infoLineHeight = 16;
+export const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = '@middleware/internal-event/show-info-angle';
+export const defaltStyle = {
+    textBackground: infoBackground,
+    textColor: infoTextColor
+};

package/dist/esm/middleware/info/draw-info.d.ts

@@ -0,0 +1,29 @@
+import type { PointSize, ViewContext2D } from '@idraw/types';
+import type { MiddlewareInfoStyle } from '@idraw/types';
+export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    style: MiddlewareInfoStyle;
+}): void;
+export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    style: MiddlewareInfoStyle;
+}): void;
+export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
+    point: PointSize;
+    rotateCenter: PointSize;
+    angle: number;
+    text: string;
+    fontSize: number;
+    lineHeight: number;
+    style: MiddlewareInfoStyle;
+}): void;

package/dist/esm/middleware/info/draw-info.js

@@ -0,0 +1,113 @@
+import { rotateByCenter } from '@idraw/util';
+const fontFamily = 'monospace';
+export function drawSizeInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textColor, textBackground } = style;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x - textWidth / 2 - padding,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x - textWidth / 2,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = textBackground;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill('nonzero');
+        ctx.fillStyle = textColor;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawPositionInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x + padding,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = textBackground;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill('nonzero');
+        ctx.fillStyle = textColor;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}
+export function drawAngleInfoText(ctx, opts) {
+    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = style;
+    rotateByCenter(ctx, angle, rotateCenter, () => {
+        ctx.$setFont({
+            fontWeight: '300',
+            fontSize,
+            fontFamily
+        });
+        const padding = (lineHeight - fontSize) / 2;
+        const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
+        const bgStart = {
+            x: point.x,
+            y: point.y
+        };
+        const bgEnd = {
+            x: bgStart.x + textWidth + padding * 2,
+            y: bgStart.y + fontSize + padding
+        };
+        const textStart = {
+            x: point.x + padding,
+            y: point.y
+        };
+        ctx.setLineDash([]);
+        ctx.fillStyle = textBackground;
+        ctx.beginPath();
+        ctx.moveTo(bgStart.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgStart.y);
+        ctx.lineTo(bgEnd.x, bgEnd.y);
+        ctx.lineTo(bgStart.x, bgEnd.y);
+        ctx.closePath();
+        ctx.fill('nonzero');
+        ctx.fillStyle = textColor;
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, textStart.x, textStart.y + padding);
+    });
+}

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

@@ -0,0 +1,9 @@
+import type { Middleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
+import type { DeepInfoSharedStorage } from './types';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
+export declare const MiddlewareInfo: Middleware<DeepInfoSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareInfoConfig>;

package/dist/esm/middleware/info/index.js

@@ -0,0 +1,131 @@
+import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
+import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
+import { defaltStyle, MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
+const infoFontSize = 10;
+const infoLineHeight = 16;
+export const MiddlewareInfo = (opts, config) => {
+    const { boardContent, calculator, eventHub } = opts;
+    const { overlayContext } = boardContent;
+    let innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
+    let showAngleInfo = true;
+    const showInfoAngleCallback = ({ show }) => {
+        showAngleInfo = show;
+    };
+    return {
+        name: '@middleware/info',
+        use() {
+            eventHub.on(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+        },
+        disuse() {
+            eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+        },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
+        beforeDrawFrame({ snapshot }) {
+            var _a;
+            const { textBackground, textColor } = innerConfig;
+            const style = {
+                textBackground,
+                textColor
+            };
+            const { sharedStore } = snapshot;
+            const selectedElementList = sharedStore[keySelectedElementList];
+            const actionType = sharedStore[keyActionType];
+            const groupQueue = sharedStore[keyGroupQueue] || [];
+            if (selectedElementList.length === 1) {
+                const elem = selectedElementList[0];
+                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+                    const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+                    const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+                    const { x, y, w, h, angle } = elem;
+                    const totalGroupQueue = [
+                        ...groupQueue,
+                        ...[
+                            {
+                                uuid: createUUID(),
+                                x,
+                                y,
+                                w,
+                                h,
+                                angle,
+                                type: 'group',
+                                detail: { children: [] }
+                            }
+                        ]
+                    ];
+                    const calcOpts = { viewScaleInfo, viewSizeInfo };
+                    const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
+                    let totalAngle = 0;
+                    totalGroupQueue.forEach((group) => {
+                        totalAngle += group.angle || 0;
+                    });
+                    const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
+                    if (rangeRectInfo) {
+                        const elemCenter = rangeRectInfo === null || rangeRectInfo === void 0 ? void 0 : rangeRectInfo.center;
+                        const rectInfo = {
+                            topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
+                            topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
+                            bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
+                            bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
+                            center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
+                            top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
+                            right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
+                            bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
+                            left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
+                        };
+                        const x = formatNumber(elem.x, { decimalPlaces: 2 });
+                        const y = formatNumber(elem.y, { decimalPlaces: 2 });
+                        const w = formatNumber(elem.w, { decimalPlaces: 2 });
+                        const h = formatNumber(elem.h, { decimalPlaces: 2 });
+                        const xyText = `${formatNumber(x, { decimalPlaces: 0 })},${formatNumber(y, { decimalPlaces: 0 })}`;
+                        const whText = `${formatNumber(w, { decimalPlaces: 0 })}x${formatNumber(h, { decimalPlaces: 0 })}`;
+                        const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
+                        drawSizeInfoText(overlayContext, {
+                            point: {
+                                x: rectInfo.bottom.x,
+                                y: rectInfo.bottom.y + infoFontSize
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: whText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            style
+                        });
+                        drawPositionInfoText(overlayContext, {
+                            point: {
+                                x: rectInfo.topLeft.x,
+                                y: rectInfo.topLeft.y - infoFontSize * 2
+                            },
+                            rotateCenter: rectInfo.center,
+                            angle: totalAngle,
+                            text: xyText,
+                            fontSize: infoFontSize,
+                            lineHeight: infoLineHeight,
+                            style
+                        });
+                        if (showAngleInfo) {
+                            if (((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.rotatable) !== false) {
+                                drawAngleInfoText(overlayContext, {
+                                    point: {
+                                        x: rectInfo.top.x + infoFontSize + 4,
+                                        y: rectInfo.top.y - infoFontSize * 2 - 18
+                                    },
+                                    rotateCenter: rectInfo.center,
+                                    angle: totalAngle,
+                                    text: angleText,
+                                    fontSize: infoFontSize,
+                                    lineHeight: infoLineHeight,
+                                    style
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+};

package/dist/esm/middleware/info/types.d.ts

@@ -0,0 +1,3 @@
+import { keySelectedElementList, keyHoverElement, keyActionType, keyGroupQueue } from '../selector';
+import type { DeepSelectorSharedStorage } from '../selector';
+export type DeepInfoSharedStorage = Pick<DeepSelectorSharedStorage, typeof keySelectedElementList | typeof keyHoverElement | typeof keyActionType | typeof keyGroupQueue>;

package/dist/esm/middleware/info/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import type { MiddlewareLayoutSelectorStyle } from '@idraw/types';
+export declare const key = "LAYOUT_SELECT";
+export declare const keyLayoutActionType: unique symbol;
+export declare const keyLayoutControlType: unique symbol;
+export declare const keyLayoutController: unique symbol;
+export declare const keyLayoutIsHoverContent: unique symbol;
+export declare const keyLayoutIsHoverController: unique symbol;
+export declare const keyLayoutIsSelected: unique symbol;
+export declare const keyLayoutIsBusyMoving: unique symbol;
+export declare const controllerSize = 10;
+export declare const defaultStyle: MiddlewareLayoutSelectorStyle;

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

@@ -0,0 +1,12 @@
+export const key = 'LAYOUT_SELECT';
+export const keyLayoutActionType = Symbol(`${key}_layoutActionType`);
+export const keyLayoutControlType = Symbol(`${key}_layoutControlType`);
+export const keyLayoutController = Symbol(`${key}_layoutController`);
+export const keyLayoutIsHoverContent = Symbol(`${key}_layoutIsHoverContent`);
+export const keyLayoutIsHoverController = Symbol(`${key}_layoutIsHoverController`);
+export const keyLayoutIsSelected = Symbol(`${key}_layoutIsSelected`);
+export const keyLayoutIsBusyMoving = Symbol(`${key}_layoutIsSelected`);
+export const controllerSize = 10;
+export const defaultStyle = {
+    activeColor: '#b331c9'
+};

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

@@ -0,0 +1,5 @@
+import type { Middleware, MiddlewareLayoutSelectorConfig, CoreEventMap } from '@idraw/types';
+import type { LayoutSelectorSharedStorage } from './types';
+import { keyLayoutIsSelected, keyLayoutIsBusyMoving } from './config';
+export { keyLayoutIsSelected, keyLayoutIsBusyMoving };
+export declare const MiddlewareLayoutSelector: Middleware<LayoutSelectorSharedStorage, CoreEventMap, MiddlewareLayoutSelectorConfig>;