@idraw/core 0.4.0-beta.9 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idraw/core",
-  "version": "0.4.0-beta.9",
+  "version": "0.4.0",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -18,16 +18,15 @@
     "url": "https://github.com/idrawjs/idraw/issues"
   },
   "homepage": "https://github.com/idrawjs/idraw#readme",
-  "author": "chenshenhai",
+  "author": "idrawjs",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-beta.9"
+    "@idraw/types": "^0.4.0"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/board": "^0.4.0-beta.9",
-    "@idraw/renderer": "^0.4.0-beta.9",
-    "@idraw/util": "^0.4.0-beta.9"
+    "@idraw/renderer": "^0.4.0",
+    "@idraw/util": "^0.4.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/esm/lib/cursor.d.ts

@@ -1,16 +0,0 @@
-import type { UtilEventEmitter, CoreEvent } from '@idraw/types';
-export declare class Cursor {
-    private _eventHub;
-    private _container;
-    private _cursorType;
-    private _resizeCursorBaseImage;
-    private _cursorImageMap;
-    constructor(container: HTMLDivElement, opts: {
-        eventHub: UtilEventEmitter<CoreEvent>;
-    });
-    private _init;
-    private _loadResizeCursorBaseImage;
-    private _resetCursor;
-    private _setCursorResize;
-    private _appendRotateResizeImage;
-}

package/dist/esm/lib/cursor.js

@@ -1,129 +0,0 @@
-import { limitAngle, loadImage, parseAngleToRadian } from '@idraw/util';
-import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE } from './cursor-image';
-export class Cursor {
-    constructor(container, opts) {
-        this._cursorType = null;
-        this._resizeCursorBaseImage = null;
-        this._cursorImageMap = {
-            auto: CURSOR,
-            'drag-default': CURSOR_DRAG_DEFAULT,
-            'drag-active': CURSOR_DRAG_ACTIVE,
-            'rotate-0': CURSOR_RESIZE
-        };
-        this._container = container;
-        this._eventHub = opts.eventHub;
-        this._init();
-        this._loadResizeCursorBaseImage();
-    }
-    _init() {
-        const { _eventHub: eventHub } = this;
-        this._resetCursor('auto');
-        eventHub.on('cursor', (e) => {
-            var _a;
-            if (e.type === 'over-element' || !e.type) {
-                this._resetCursor('auto');
-            }
-            else if (typeof e.type === 'string' && ((_a = e.type) === null || _a === void 0 ? void 0 : _a.startsWith('resize-'))) {
-                this._setCursorResize(e);
-            }
-            else if (e.type === 'drag-default') {
-                this._resetCursor('drag-default');
-            }
-            else if (e.type === 'drag-active') {
-                this._resetCursor('drag-active');
-            }
-            else {
-                this._resetCursor('auto');
-            }
-        });
-    }
-    _loadResizeCursorBaseImage() {
-        loadImage(CURSOR_RESIZE)
-            .then((img) => {
-            this._resizeCursorBaseImage = img;
-        })
-            .catch((err) => {
-            console.error(err);
-        });
-    }
-    _resetCursor(cursorKey) {
-        if (this._cursorType === cursorKey) {
-            return;
-        }
-        this._cursorType = cursorKey;
-        const image = this._cursorImageMap[this._cursorType] || this._cursorImageMap['auto'];
-        let offsetX = 0;
-        let offsetY = 0;
-        if (cursorKey.startsWith('rotate-') && this._cursorImageMap[this._cursorType]) {
-            offsetX = 10;
-            offsetY = 10;
-        }
-        this._container.style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
-    }
-    _setCursorResize(e) {
-        var _a;
-        let totalAngle = 0;
-        if (e.type === 'resize-top') {
-            totalAngle += 0;
-        }
-        else if (e.type === 'resize-top-right') {
-            totalAngle += 45;
-        }
-        else if (e.type === 'resize-right') {
-            totalAngle += 90;
-        }
-        else if (e.type === 'resize-bottom-right') {
-            totalAngle += 135;
-        }
-        else if (e.type === 'resize-bottom') {
-            totalAngle += 180;
-        }
-        else if (e.type === 'resize-bottom-left') {
-            totalAngle += 225;
-        }
-        else if (e.type === 'resize-left') {
-            totalAngle += 270;
-        }
-        else if (e.type === 'resize-top-left') {
-            totalAngle += 315;
-        }
-        totalAngle += limitAngle(((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.angle) || 0);
-        if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
-            e.groupQueue.forEach((group) => {
-                totalAngle += limitAngle(group.angle || 0);
-            });
-        }
-        totalAngle = limitAngle(totalAngle);
-        const cursorKey = this._appendRotateResizeImage(totalAngle);
-        this._resetCursor(cursorKey);
-    }
-    _appendRotateResizeImage(angle) {
-        const key = `rotate-${angle}`;
-        if (!this._cursorImageMap[key]) {
-            const baseImage = this._resizeCursorBaseImage;
-            if (baseImage) {
-                const canvas = document.createElement('canvas');
-                const w = baseImage.width;
-                const h = baseImage.height;
-                const center = {
-                    x: w / 2,
-                    y: h / 2
-                };
-                canvas.width = w;
-                canvas.height = h;
-                const ctx = canvas.getContext('2d');
-                const radian = parseAngleToRadian(angle);
-                ctx.translate(center.x, center.y);
-                ctx.rotate(radian);
-                ctx.translate(-center.x, -center.y);
-                ctx.drawImage(baseImage, 0, 0, w, h);
-                ctx.translate(center.x, center.y);
-                ctx.rotate(-radian);
-                ctx.translate(-center.x, -center.y);
-                const base = canvas.toDataURL('image/png');
-                this._cursorImageMap[key] = base;
-            }
-        }
-        return key;
-    }
-}

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

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

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

@@ -1,3 +0,0 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
-export declare const middlewareEventRuler = "@middleware/show-ruler";
-export declare const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEvent>;

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

@@ -1,48 +0,0 @@
-import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
-export const middlewareEventRuler = '@middleware/show-ruler';
-export const MiddlewareRuler = (opts) => {
-    const { boardContent, viewer, eventHub } = opts;
-    const { helperContext, underContext } = boardContent;
-    let show = true;
-    let showGrid = true;
-    const rulerCallback = (e) => {
-        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean') {
-            show = e.show;
-        }
-        if (typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
-            showGrid = e.showGrid;
-        }
-        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean' || typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
-            viewer.drawFrame();
-        }
-    };
-    return {
-        name: '@middleware/ruler',
-        use() {
-            eventHub.on(middlewareEventRuler, rulerCallback);
-        },
-        disuse() {
-            eventHub.off(middlewareEventRuler, rulerCallback);
-        },
-        beforeDrawFrame: ({ snapshot }) => {
-            if (show === true) {
-                const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
-                const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
-                const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawXRuler(helperContext, { scaleList: xList });
-                const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawYRuler(helperContext, { scaleList: yList });
-                if (showGrid === true) {
-                    drawUnderGrid(underContext, {
-                        xList,
-                        yList,
-                        viewScaleInfo,
-                        viewSizeInfo
-                    });
-                }
-            }
-        }
-    };
-};

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

@@ -1,3 +0,0 @@
-import type { BoardMiddleware, CoreEvent } from '@idraw/types';
-export declare const middlewareEventScale = "@middleware/scale";
-export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent>;

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

@@ -1,6 +0,0 @@
-export const key = 'SCROLL';
-export const keyXThumbRect = Symbol(`${key}_xThumbRect`);
-export const keyYThumbRect = Symbol(`${key}_yThumbRect`);
-export const keyPrevPoint = Symbol(`${key}_prevPoint`);
-export const keyActivePoint = Symbol(`${key}_activePoint`);
-export const keyActiveThumbType = Symbol(`${key}_activeThumbType`);

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

@@ -1,2 +0,0 @@
-import type { BoardMiddleware } from '@idraw/types';
-export declare const MiddlewareScroller: BoardMiddleware;

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

@@ -1,107 +0,0 @@
-import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } 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, topLeft, topRight, bottomLeft, bottomRight } = controller;
-    const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
-    const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
-    drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
-    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 = areaBorderWidth;
-    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 = areaBorderWidth;
-    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: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
-        drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
-    }
-}

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

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