diff --git a/.changeset/cuddly-candles-agree.md b/.changeset/cuddly-candles-agree.md new file mode 100644 index 000000000..c89d19b88 --- /dev/null +++ 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 index ef37543d7..71300ec99 100644 --- 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 index 98c740c18..19e1d795d 100644 --- 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 index ba2e74429..7de98360e 100644 --- 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 index 32492d8b1..0f5c19cb5 100644 --- 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 index a90e90f1b..13019c040 100644 --- a/src/app/components/setting-panel/setting-panel.component.html +++ b/src/app/components/setting-panel/setting-panel.component.html @@ -287,7 +287,7 @@ -
+
填充颜色：
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); + } } } });