feat(draw): unclosed element can not set fill color #WIK-15921

worktile · Jul 2, 2024 · 8bcb314 · 8bcb314
1 parent c6029f8
commit 8bcb314
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 8 deletions.
diff --git a/.changeset/cuddly-candles-agree.md b/.changeset/cuddly-candles-agree.md
@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+add isDrawElementClosed function
diff --git a/packages/draw/src/constants/geometry.ts b/packages/draw/src/constants/geometry.ts
@@ -306,3 +306,11 @@ export const GEOMETRY_WITHOUT_TEXT = [
 ] as GeometryShapes[];
 
 export const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
+
+export const GEOMETRY_NOT_CLOSED = [
+    FlowchartSymbols.noteCurlyLeft,
+    FlowchartSymbols.noteCurlyRight,
+    FlowchartSymbols.noteSquare,
+    UMLSymbols.requiredInterface,
+    UMLSymbols.deletion
+] as GeometryShapes[];
diff --git a/packages/draw/src/utils/common.ts b/packages/draw/src/utils/common.ts
@@ -40,7 +40,7 @@ import { PlaitBaseTable } from '../interfaces/table';
 import { memorizeLatestShape } from './memorize';
 import { isHitEdgeOfShape, isInsideOfShape } from './hit';
 import { getHitConnectorPoint } from './arrow-line';
-import { getNearestPoint, isGeometryIncludeText, isSingleTextGeometry } from './geometry';
+import { getNearestPoint, isGeometryClosed, isGeometryIncludeText, isSingleTextGeometry } from './geometry';
 import { isMultipleTextGeometry } from './multi-text-geometry';
 import { PlaitDrawShapeText } from '../generators/text.generator';
 
@@ -99,6 +99,18 @@ export const isDrawElementsIncludeText = (elements: PlaitDrawElement[]) => {
     });
 };
 
+export const isDrawElementClosed = (element: PlaitDrawElement) => {
+    if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element)) {
+        return false;
+    }
+
+    if (PlaitDrawElement.isGeometry(element)) {
+        return isGeometryClosed(element);
+    }
+
+    return true;
+};
+
 export const getSnappingShape = (board: PlaitBoard, point: Point): PlaitShapeElement | null => {
     let hitElement: PlaitShapeElement | null = getHitShape(board, point);
     if (hitElement) {
@@ -184,7 +196,7 @@ export const drawBoundReaction = (
             {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: 0,
-                fill: SELECTION_FILL_COLOR,
+                fill: isDrawElementClosed(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
                 fillStyle: 'solid'
             },
             drawOptions

diff --git a/packages/draw/src/utils/geometry.ts b/packages/draw/src/utils/geometry.ts
@@ -9,6 +9,7 @@ import {
     DefaultUMLPropertyMap,
     DrawPointerType,
     DrawThemeColors,
+    GEOMETRY_NOT_CLOSED,
     GEOMETRY_WITHOUT_TEXT,
     ShapeDefaultSpace,
     getFlowchartPointers,
@@ -390,3 +391,7 @@ export const isSingleTextShape = (shape: GeometryShapes) => {
 export const isSingleTextGeometry = (element: PlaitGeometry) => {
     return PlaitDrawElement.isGeometry(element) && isSingleTextShape(element.shape);
 };
+
+export const isGeometryClosed = (element: PlaitGeometry) => {
+    return !GEOMETRY_NOT_CLOSED.includes(element.shape);
+};
diff --git a/packages/draw/src/utils/style/stroke.ts b/packages/draw/src/utils/style/stroke.ts
@@ -2,7 +2,7 @@ import { PlaitBaseTable, PlaitDrawElement, StrokeStyle } from '../../interfaces'
 import { DefaultDrawStyle } from '../../constants';
 import { PlaitBoard, PlaitElement } from '@plait/core';
 import { getDrawDefaultStrokeColor, getFlowchartDefaultFill } from '../geometry';
-import { getStrokeWidthByElement } from '../common';
+import { getStrokeWidthByElement, isDrawElementClosed } from '../common';
 
 export const getStrokeColorByElement = (board: PlaitBoard, element: PlaitElement) => {
     const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
@@ -11,7 +11,10 @@ export const getStrokeColorByElement = (board: PlaitBoard, element: PlaitElement
 };
 
 export const getFillByElement = (board: PlaitBoard, element: PlaitElement) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element) ? getFlowchartDefaultFill(board.theme.themeColorMode) : DefaultDrawStyle.fill;
+    const defaultFill =
+        PlaitDrawElement.isFlowchart(element) && isDrawElementClosed(element as PlaitDrawElement)
+            ? getFlowchartDefaultFill(board.theme.themeColorMode)
+            : DefaultDrawStyle.fill;
     const fill = element.fill || defaultFill;
     return fill;
 };

diff --git a/src/app/components/setting-panel/setting-panel.component.html b/src/app/components/setting-panel/setting-panel.component.html
@@ -287,7 +287,7 @@
     <input type="text" [(ngModel)]="angle" (change)="changeAngle()" />
 </div>
 
-<div *ngIf="!isSelectedLine" class="property-item color-setting-toolbar">
+<div *ngIf="enableSetFillColor" class="property-item color-setting-toolbar">
     <div class="setting-panel-title">填充颜色：</div>
     <app-color-picker
         [defaultColor]="fillColor"

diff --git a/src/app/components/setting-panel/setting-panel.component.ts b/src/app/components/setting-panel/setting-panel.component.ts
@@ -55,7 +55,8 @@ import {
     getSwimlaneCount,
     PlaitTableCell,
     getSelectedTableCellsEditor,
-    isSingleSelectElementByTable
+    isSingleSelectElementByTable,
+    isDrawElementClosed
 } from '@plait/draw';
 import { MindLayoutType } from '@plait/layouts';
 import { FontSizes, LinkEditor, MarkTypes, PlaitMarkEditor, TextTransforms } from '@plait/text-plugins';
@@ -121,6 +122,8 @@ export class AppSettingPanelComponent extends PlaitIslandBaseComponent implement
 
     swimlaneCount = 3;
 
+    enableSetFillColor = true;
+
     @HostBinding('class.visible')
     get isVisible() {
         const selectedCount = getSelectedElements(this.board).length;
@@ -138,9 +141,11 @@ export class AppSettingPanelComponent extends PlaitIslandBaseComponent implement
     onBoardChange() {
         const selectedMindElements = getSelectedMindElements(this.board);
         const selectedLineElements = getSelectedArrowLineElements(this.board);
+        const selectedDrawElements = getSelectedDrawElements(this.board);
         this.isSelectedMind = !!selectedMindElements.length;
         this.isSelectedLine = !!selectedLineElements.length;
         this.isSelectSwimlane = isSingleSelectSwimlane(this.board);
+        this.enableSetFillColor = selectedDrawElements.some(item => isDrawElementClosed(item));
         if (this.isSelectSwimlane) {
             this.swimlaneCount = getSwimlaneCount(getSelectedElements(this.board)[0] as PlaitSwimlane);
         }
@@ -200,7 +205,6 @@ export class AppSettingPanelComponent extends PlaitIslandBaseComponent implement
                 this.cdr.markForCheck();
             });
         }
-        const selectedDrawElements = getSelectedDrawElements(this.board);
         this.isIncludeText = selectedMindElements.length ? true : isDrawElementsIncludeText(selectedDrawElements);
     }
 
@@ -244,7 +248,9 @@ export class AppSettingPanelComponent extends PlaitIslandBaseComponent implement
                 if (tableElement) {
                     DrawTransforms.setTableFill(this.board, element, property, path);
                 } else {
-                    Transforms.setNode(this.board, { fill: property }, path);
+                    if (isDrawElementClosed(element as PlaitDrawElement)) {
+                        Transforms.setNode(this.board, { fill: property }, path);
+                    }
                 }
             }
         });