@idraw/core 0.4.0-alpha.6 → 0.4.0-beta.0

package/dist/esm/index.d.ts

@@ -4,7 +4,7 @@ export { MiddlewareScroller } from './middleware/scroller';
 export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
 export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
-export declare class Core {
+export declare class Core<E extends CoreEvent = CoreEvent> {
     #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
     use(middleware: BoardMiddleware<any, any>): void;
@@ -16,15 +16,15 @@ export declare class Core {
     }): void;
     resize(newViewSize: Partial<ViewSizeInfo>): void;
     clear(): void;
-    on<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void): void;
-    off<T extends keyof CoreEvent>(name: T, callback: (e: CoreEvent[T]) => void): void;
-    trigger<T extends keyof CoreEvent>(name: T, e: CoreEvent[T]): void;
+    on<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
+    off<T extends keyof E>(name: T, callback: (e: E[T]) => void): void;
+    trigger<T extends keyof E>(name: T, e: E[T]): void;
     getViewInfo(): {
         viewSizeInfo: ViewSizeInfo;
         viewScaleInfo: ViewScaleInfo;
     };
     refresh(): void;
-    updateViewScale(opts: {
+    setViewScale(opts: {
         scale: number;
         offsetX: number;
         offsetY: number;

package/dist/esm/index.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _Core_instances, _Core_board, _Core_container, _Core_initContainer;
 import { Board } from '@idraw/board';
-import { createBoardContexts, validateElements } from '@idraw/util';
+import { createViewContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
 export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
@@ -28,8 +28,7 @@ export class Core {
         const canvas = document.createElement('canvas');
         __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
-        const ctx = canvas.getContext('2d');
-        const viewContent = createBoardContexts(ctx, { devicePixelRatio });
+        const viewContent = createViewContent(canvas, { width, height, devicePixelRatio, offscreen: true });
         const board = new Board({ viewContent, container });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({
@@ -95,7 +94,7 @@ export class Core {
     refresh() {
         __classPrivateFieldGet(this, _Core_board, "f").getViewer().drawFrame();
     }
-    updateViewScale(opts) {
+    setViewScale(opts) {
         __classPrivateFieldGet(this, _Core_board, "f").updateViewScaleInfo(opts);
     }
 }

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

@@ -43,17 +43,12 @@ export const MiddlewareScroller = (opts) => {
     };
     return {
         mode: key,
-        wheelX: (e) => {
-            if (e.deltaX >= 0 || e.deltaX < 0) {
-                viewer.scroll({ moveX: 0 - e.deltaX });
-                viewer.drawFrame();
-            }
-        },
-        wheelY: (e) => {
-            if (e.deltaY >= 0 || e.deltaY < 0) {
-                viewer.scroll({ moveY: 0 - e.deltaY });
-                viewer.drawFrame();
-            }
+        wheel: (e) => {
+            viewer.scroll({
+                moveX: 0 - e.deltaX,
+                moveY: 0 - e.deltaY
+            });
+            viewer.drawFrame();
         },
         pointStart: (e) => {
             const { point } = e;

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

@@ -16,5 +16,7 @@ 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 selectWrapperBorderWidth = 2;
+export declare const resizeControllerBorderWidth = 4;
+export declare const areaBorderWidth = 1;
 export declare const wrapperColor = "#1973ba";

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

@@ -16,5 +16,7 @@ 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 selectWrapperBorderWidth = 2;
+export const resizeControllerBorderWidth = 4;
+export const areaBorderWidth = 1;
 export const wrapperColor = '#1973ba';

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

@@ -1,5 +1,5 @@
 import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
-import { resizeControllerBorderWidth, wrapperColor } from './config';
+import { resizeControllerBorderWidth, areaBorderWidth, wrapperColor, selectWrapperBorderWidth } from './config';
 function drawVertexes(ctx, vertexes, opts) {
     const { borderColor, borderWidth, background, lineDash } = opts;
     ctx.setLineDash([]);
@@ -28,8 +28,8 @@ 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 { 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);
@@ -70,7 +70,7 @@ export function drawElementListShadows(ctx, elements, opts) {
 export function drawArea(ctx, opts) {
     const { start, end } = opts;
     ctx.setLineDash([]);
-    ctx.lineWidth = 1;
+    ctx.lineWidth = areaBorderWidth;
     ctx.strokeStyle = wrapperColor;
     ctx.fillStyle = '#1976d24f';
     ctx.beginPath();
@@ -86,7 +86,7 @@ export function drawListArea(ctx, opts) {
     const { areaSize } = opts;
     const { x, y, w, h } = areaSize;
     ctx.setLineDash([]);
-    ctx.lineWidth = 1;
+    ctx.lineWidth = areaBorderWidth;
     ctx.strokeStyle = wrapperColor;
     ctx.fillStyle = '#1976d21c';
     ctx.beginPath();
@@ -101,7 +101,7 @@ export function drawListArea(ctx, opts) {
 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] };
+        const wrapperOpts = { borderColor: wrapperColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [4, 4] };
         drawVertexes(ctx, calcViewVertexes(vertexes, opts), wrapperOpts);
     }
 }

package/dist/esm/middleware/text-editor/index.js

@@ -75,13 +75,24 @@ export const MiddlewareTextEditor = (opts) => {
             parent = createBox({ size, parent });
         }
         const detail = Object.assign(Object.assign({}, defaultElementDetail), element.detail);
+        let elemX = element.x * scale + offsetLeft;
+        let elemY = element.y * scale + offsetTop;
+        let elemW = element.w * scale;
+        let elemH = element.h * scale;
+        if (groupQueue.length > 0) {
+            elemX = element.x * scale;
+            elemY = element.y * scale;
+            elemW = element.w * scale;
+            elemH = element.h * scale;
+        }
         textarea.style.position = 'absolute';
-        textarea.style.left = `${element.x * scale}px`;
-        textarea.style.top = `${element.y * scale}px`;
-        textarea.style.width = `${element.w * scale}px`;
-        textarea.style.height = `${element.h * scale}px`;
+        textarea.style.left = `${elemX}px`;
+        textarea.style.top = `${elemY}px`;
+        textarea.style.width = `${elemW}px`;
+        textarea.style.height = `${elemH}px`;
         textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
-        textarea.style.border = 'none';
+        textarea.style.boxSizing = 'border-box';
+        textarea.style.border = '1px solid #1973ba';
         textarea.style.resize = 'none';
         textarea.style.overflow = 'hidden';
         textarea.style.wordBreak = 'break-all';