@plait/draw 0.1.0-next.10 → 0.1.0-next.11

package/{fesm2020 → fesm2022}/plait-draw.mjs

@@ -2,7 +2,7 @@ import { PlaitElement, ACTIVE_STROKE_WIDTH, RectangleClient, PlaitBoard, setStro
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { getRectangleByPoints, getFactorByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
+import { getRectangleByPoints, getFactorByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
 import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
@@ -923,10 +923,10 @@ class GeometryComponent extends CommonPluginElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: GeometryComponent, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-GeometryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GeometryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: GeometryComponent, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: GeometryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: GeometryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-draw-geometry',
@@ -955,6 +955,10 @@ class LineShapeGenerator extends Generator {
 }
 
 class LineActiveGenerator extends Generator {
+    constructor() {
+        super(...arguments);
+        this.hasResizeHandle = false;
+    }
     canDraw(element, data) {
         if (data.selected) {
             return true;
@@ -965,24 +969,35 @@ class LineActiveGenerator extends Generator {
     }
     baseDraw(element, data) {
         const activeG = createG();
-        activeG.classList.add('active');
-        activeG.classList.add('line-handle');
-        const sourcePoint = getSourcePoint(this.board, element);
-        const targetPoint = getTargetPoint(this.board, element);
-        const sourceCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), sourcePoint, RESIZE_HANDLE_DIAMETER, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
-            fillStyle: 'solid'
-        });
-        const targetCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), targetPoint, RESIZE_HANDLE_DIAMETER, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
-            fillStyle: 'solid'
-        });
-        activeG.appendChild(targetCircle);
-        activeG.appendChild(sourceCircle);
+        if (this.hasResizeHandle) {
+            activeG.classList.add('active');
+            activeG.classList.add('line-handle');
+            const sourcePoint = getSourcePoint(this.board, element);
+            const targetPoint = getTargetPoint(this.board, element);
+            const sourceCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), sourcePoint, RESIZE_HANDLE_DIAMETER, {
+                stroke: '#999999',
+                strokeWidth: 1,
+                fill: '#FFF',
+                fillStyle: 'solid'
+            });
+            const targetCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), targetPoint, RESIZE_HANDLE_DIAMETER, {
+                stroke: '#999999',
+                strokeWidth: 1,
+                fill: '#FFF',
+                fillStyle: 'solid'
+            });
+            activeG.appendChild(targetCircle);
+            activeG.appendChild(sourceCircle);
+        }
+        else {
+            const points = getLinePoints(this.board, element);
+            const activeRectangle = getRectangleByPoints(points);
+            const strokeG = drawRectangle(this.board, activeRectangle, {
+                stroke: PRIMARY_COLOR,
+                strokeWidth: DefaultGeometryActiveStyle.selectionStrokeWidth
+            });
+            activeG.appendChild(strokeG);
+        }
         return activeG;
     }
 }
@@ -1041,11 +1056,18 @@ class LineComponent extends PlaitPluginElementComponent {
             this.updateTextRectangle();
             return;
         }
-        const hasSameSelected = value.selected === previous.selected;
-        if (!hasSameSelected) {
+        if (!isSelectionMoving(this.board)) {
+            this.activeGenerator.hasResizeHandle = this.hasResizeHandle();
             this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
         }
     }
+    hasResizeHandle() {
+        const selectedElements = getSelectedElements(this.board);
+        if (PlaitBoard.hasBeenTextEditing(this.board) && PlaitDrawElement.isText(this.element)) {
+            return false;
+        }
+        return selectedElements.length === 1 && !isSelectionMoving(this.board);
+    }
     initializeTextManages() {
         if (this.element.texts?.length) {
             this.element.texts.forEach((text, index) => {
@@ -1117,10 +1139,10 @@ class LineComponent extends PlaitPluginElementComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: LineComponent, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-LineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: LineComponent, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: LineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-draw-line',
@@ -1358,6 +1380,7 @@ const insertClipboardData = (board, elements, startPoint) => {
         element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
         Transforms.insertNode(board, element, [board.children.length]);
     });
+    Transforms.addSelectionWithTemporaryElements(board, elements);
 };
 
 const withDrawFragment = (baseBoard) => {
@@ -1366,21 +1389,26 @@ const withDrawFragment = (baseBoard) => {
     board.getDeletedFragment = (data) => {
         const drawElements = getSelectedDrawElements(board);
         if (drawElements.length) {
-            const lines = getBoardLines(board);
             const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
             const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
-            const boundLineElements = lines.filter(line => geometryElements.find(geometry => PlaitLine.isBoundElementOfSource(line, geometry) || PlaitLine.isBoundElementOfTarget(line, geometry)));
+            const boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
             data.push(...[...geometryElements, ...lineElements, ...boundLineElements.filter(line => !lineElements.includes(line))]);
         }
         return getDeletedFragment(data);
     };
-    board.setFragment = (data, rectangle) => {
+    board.setFragment = (data, rectangle, type) => {
         const targetDrawElements = getSelectedDrawElements(board);
+        let boundLineElements = [];
         if (targetDrawElements.length) {
-            const elements = buildClipboardData(board, targetDrawElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            if (type === 'cut') {
+                const geometryElements = targetDrawElements.filter(value => PlaitDrawElement.isGeometry(value));
+                const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
+                boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
+            }
+            const elements = buildClipboardData(board, [...targetDrawElements, ...boundLineElements], rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
             setClipboardData(data, elements);
         }
-        setFragment(data, rectangle);
+        setFragment(data, rectangle, type);
     };
     board.insertFragment = (data, targetPoint) => {
         const elements = getDataFromClipboard(data);
@@ -1404,6 +1432,10 @@ const withDrawFragment = (baseBoard) => {
     };
     return board;
 };
+const getBoundedLineElements = (board, geometries) => {
+    const lines = getBoardLines(board);
+    return lines.filter(line => geometries.find(geometry => PlaitLine.isBoundElementOfSource(line, geometry) || PlaitLine.isBoundElementOfTarget(line, geometry)));
+};
 
 const DefaultLineStyle = {
     strokeWidth: 2,
@@ -1736,9 +1768,8 @@ const withDraw = (board) => {
             return getRectangleByPoints(element.points);
         }
         if (PlaitDrawElement.isLine(element)) {
-            const source = getSourcePoint(board, element);
-            const target = getTargetPoint(board, element);
-            return getRectangleByPoints([source, target]);
+            const points = getLinePoints(board, element);
+            return getRectangleByPoints(points);
         }
         return getRectangle(element);
     };