Fix onReset

jomarko · Apr 25, 2024 · ba9e94a · ba9e94a
1 parent 8afd214
commit ba9e94a
Showing 1 changed file with 45 additions and 36 deletions.
diff --git a/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx b/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
@@ -38,6 +38,7 @@ import { useExternalModels } from "../includedModels/DmnEditorDependenciesContex
 import { MIN_NODE_SIZES } from "../diagram/nodes/DefaultSizes";
 import { NodeType } from "../diagram/connections/graphStructure";
 import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
+import { DC__Dimension } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_2/ts-gen/types";
 
 const DEFAULT_FILL_COLOR = { "@_blue": 255, "@_green": 255, "@_red": 255 };
 const DEFAULT_STROKE_COLOR = { "@_blue": 0, "@_green": 0, "@_red": 0 };
@@ -210,32 +211,44 @@ export function ShapeOptions({
   );
 
   const setShapeStyles = useCallback(
-    (callback: (shape: DMNDI15__DMNShape[], state: State) => void) => {
+    (
+      callback: (
+        shapesWithMinNodeSize: { shape: DMNDI15__DMNShape; minNodeSize: DC__Dimension }[],
+        state: State
+      ) => void
+    ) => {
       dmnEditorStoreApi.setState((s) => {
         const { diagramElements } = addOrGetDrd({ definitions: s.dmn.model.definitions, drdIndex: s.diagram.drdIndex });
 
-        const shapes = nodeIds.map((nodeId) => {
+        const shapesWithMinNodeSize = nodeIds.map((nodeId) => {
           const shape = s.computed(s).indexedDrd().dmnShapesByHref.get(nodeId);
+          const node = s.computed(s).getDiagramData(externalModelsByNamespace).nodesById.get(nodeId);
+
+          const minNodeSize = MIN_NODE_SIZES[node?.type as NodeType]({
+            snapGrid: s.diagram.snapGrid,
+            isAlternativeInputDataShape: s.computed(s).isAlternativeInputDataShape(),
+          });
+
           if (!shape) {
             throw new Error(`DMN Shape for '${nodeId}' does not exist.`);
           }
 
-          return diagramElements[shape.index];
+          return { shape: diagramElements[shape.index], minNodeSize };
         });
 
         let i = 0;
-        for (const shape of shapes) {
+        for (const { shape } of shapesWithMinNodeSize) {
           if (shape.__$$element !== "dmndi:DMNShape") {
             throw new Error(`DMN Element with index ${i++} is not a DMNShape.`);
           }
 
           shape["di:Style"] ??= { __$$element: "dmndi:DMNStyle" };
         }
 
-        callback(shapes, s);
+        callback(shapesWithMinNodeSize, s);
       });
     },
-    [dmnEditorStoreApi, nodeIds]
+    [dmnEditorStoreApi, externalModelsByNamespace, nodeIds]
   );
 
   const [temporaryStrokeColor, setTemporaryStrokeColor] = useState<string | undefined>();
@@ -257,10 +270,10 @@ export function ShapeOptions({
 
       setTemporaryStrokeColor(undefined);
 
-      setShapeStyles((shapes, state) => {
-        shapes.forEach((shape) => {
+      setShapeStyles((shapesWithMinNodeSize, state) => {
+        shapesWithMinNodeSize.forEach(({ shape }) => {
           state.diagram.isEditingStyle = false;
-          shape!["di:Style"]!["dmndi:StrokeColor"] ??= DEFAULT_STROKE_COLOR;
+          shape!["di:Style"]!["dmndi:StrokeColor"] ??= { ...DEFAULT_STROKE_COLOR };
           shape!["di:Style"]!["dmndi:StrokeColor"]["@_red"] = parseInt(temporaryStrokeColor.slice(0, 2), 16);
           shape!["di:Style"]!["dmndi:StrokeColor"]["@_green"] = parseInt(temporaryStrokeColor.slice(2, 4), 16);
           shape!["di:Style"]!["dmndi:StrokeColor"]["@_blue"] = parseInt(temporaryStrokeColor.slice(4, 6), 16);
@@ -292,10 +305,10 @@ export function ShapeOptions({
 
       setTemporaryFillColor(undefined);
 
-      setShapeStyles((shapes, state) => {
-        shapes.forEach((shape) => {
+      setShapeStyles((shapesWithMinNodeSize, state) => {
+        shapesWithMinNodeSize.forEach(({ shape }) => {
           state.diagram.isEditingStyle = false;
-          shape!["di:Style"]!["dmndi:FillColor"] ??= DEFAULT_FILL_COLOR;
+          shape!["di:Style"]!["dmndi:FillColor"] ??= { ...DEFAULT_FILL_COLOR };
           shape!["di:Style"]!["dmndi:FillColor"]["@_red"] = parseInt(temporaryFillColor.slice(0, 2), 16);
           shape!["di:Style"]!["dmndi:FillColor"]["@_green"] = parseInt(temporaryFillColor.slice(2, 4), 16);
           shape!["di:Style"]!["dmndi:FillColor"]["@_blue"] = parseInt(temporaryFillColor.slice(4, 6), 16);
@@ -309,31 +322,27 @@ export function ShapeOptions({
   }, [setShapeStyles, temporaryFillColor]);
 
   const onReset = useCallback(() => {
-    setShapeStyles((shapes, state) => {
-      shapes.forEach((shape) => {
-        shape!["di:Style"]!["dmndi:FillColor"] ??= DEFAULT_FILL_COLOR;
-        shape!["di:Style"]!["dmndi:FillColor"]["@_red"] = DEFAULT_FILL_COLOR["@_red"];
-        shape!["di:Style"]!["dmndi:FillColor"]["@_green"] = DEFAULT_FILL_COLOR["@_green"];
-        shape!["di:Style"]!["dmndi:FillColor"]["@_blue"] = DEFAULT_FILL_COLOR["@_blue"];
-
-        shape!["di:Style"]!["dmndi:StrokeColor"] ??= DEFAULT_STROKE_COLOR;
-        shape!["di:Style"]!["dmndi:StrokeColor"]["@_red"] = DEFAULT_STROKE_COLOR["@_red"];
-        shape!["di:Style"]!["dmndi:StrokeColor"]["@_green"] = DEFAULT_STROKE_COLOR["@_green"];
-        shape!["di:Style"]!["dmndi:StrokeColor"]["@_blue"] = DEFAULT_STROKE_COLOR["@_blue"];
-
-        for (const node of state.computed(state).getDiagramData(externalModelsByNamespace).nodesById.values()) {
-          if (node.data.shape["@_id"] === shape["@_id"]) {
-            const minNodeSize = MIN_NODE_SIZES[node?.type as NodeType]({
-              snapGrid: state.diagram.snapGrid,
-              isAlternativeInputDataShape: state.computed(state).isAlternativeInputDataShape(),
-            });
-            shape["dc:Bounds"]!["@_width"] = minNodeSize["@_width"];
-            shape["dc:Bounds"]!["@_height"] = minNodeSize["@_height"];
-          }
-        }
+    setShapeStyles((shapeWithNodes) => {
+      shapeWithNodes.forEach(({ shape, minNodeSize }) => {
+        shape["di:Style"] ??= {
+          __$$element: "dmndi:DMNStyle",
+          "dmndi:FillColor": { ...DEFAULT_FILL_COLOR },
+          "dmndi:StrokeColor": { ...DEFAULT_STROKE_COLOR },
+        };
+        shape["di:Style"]["dmndi:FillColor"] = { ...DEFAULT_FILL_COLOR };
+        shape["di:Style"]["dmndi:StrokeColor"] = { ...DEFAULT_STROKE_COLOR };
+
+        shape["dc:Bounds"] ??= {
+          "@_width": minNodeSize["@_width"],
+          "@_height": minNodeSize["@_width"],
+          "@_x": 0,
+          "@_y": 0,
+        };
+        shape["dc:Bounds"]["@_width"] = minNodeSize["@_width"];
+        shape["dc:Bounds"]["@_height"] = minNodeSize["@_height"];
       });
     });
-  }, [externalModelsByNamespace, setShapeStyles]);
+  }, [setShapeStyles]);
 
   const strokeColorPickerRef = React.useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;
   const fillColorPickerRef = React.useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;
@@ -350,7 +359,7 @@ export function ShapeOptions({
         action={
           <Button
             variant={ButtonVariant.plain}
-            onClick={() => onReset()}
+            onClick={onReset}
             style={{ paddingBottom: 0, paddingTop: 0 }}
             title={"Reset shape"}
           >