tiagobento commented on code in PR #2146:
URL:
https://github.com/apache/incubator-kie-tools/pull/2146#discussion_r1481685623
##########
packages/dmn-editor/src/diagram/Diagram.tsx:
##########
@@ -511,7 +530,7 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
state.diagram.ongoingConnection = undefined;
});
},
- [dmnEditorStoreApi, container, reactFlowInstance,
externalModelsByNamespace]
+ [dmnEditorStoreApi, container, reactFlowInstance,
externalModelsByNamespace, isAlternativeInputDataShape]
Review Comment:
Looks like you don't really need to reactivelly change this hook when
`isAlternativeInputDataShape`, as you have the state in your hands. You can
access `state.computed(state).isAlternativeInputDataShape()`, right?
##########
packages/dmn-editor/src/boxedExpressions/BoxedExpression.tsx:
##########
@@ -273,7 +273,11 @@ export function BoxedExpression({ container }: {
container: React.RefObject<HTML
////
- const Icon = expression ?
NodeIcon(getNodeTypeFromDmnObject(expression.drgElement)) : () => <></>;
+ const Icon = useMemo(
+ () =>
+ expression?.drgElement ? NodeIcon({ nodeType:
getNodeTypeFromDmnObject(expression.drgElement) }) : () => <></>,
+ [expression?.drgElement]
+ );
Review Comment:
IMHO we should be throwing in this case. This is really, really exceptional
behavior.
##########
packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx:
##########
@@ -21,66 +21,147 @@ import * as React from "react";
import { useDmnEditorStore, useDmnEditorStoreApi } from
"../store/StoreContext";
import { addOrGetDrd, getDefaultDrdName } from "../mutations/addOrGetDrd";
import { Text, TextContent } from
"@patternfly/react-core/dist/js/components/Text";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
import { Button, ButtonVariant } from
"@patternfly/react-core/dist/js/components/Button";
import { PlusCircleIcon } from
"@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
-import { ArrowRightIcon } from
"@patternfly/react-icons/dist/js/icons/arrow-right-icon";
import { DiagramNodesPanel } from "../store/Store";
import { getDrdId } from "./drd/drdId";
+import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { Form, FormGroup, FormSection } from
"@patternfly/react-core/dist/js/components/Form";
+import { ToggleGroup, ToggleGroupItem } from
"@patternfly/react-core/dist/js/components/ToggleGroup";
+import { AlternativeInputDataIcon, InputDataIcon } from "../icons/Icons";
export function DrdSelectorPanel() {
const thisDmn = useDmnEditorStore((s) => s.dmn);
const diagram = useDmnEditorStore((s) => s.diagram);
+ const isAlternativeInputDataShape = useDmnEditorStore((s) =>
s.computed(s).isAlternativeInputDataShape());
+ const drdIndex = useDmnEditorStore((s) => s.diagram.drdIndex);
const dmnEditorStoreApi = useDmnEditorStoreApi();
return (
<>
- <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
- <TextContent>
- <Text component="h3">DRDs</Text>
- </TextContent>
- <Button
- variant={ButtonVariant.link}
- onClick={() => {
- dmnEditorStoreApi.setState((state) => {
- const allDrds =
state.dmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? [];
- const newIndex = allDrds.length;
-
- addOrGetDrd({
- definitions: state.dmn.model.definitions,
- drdIndex: newIndex,
- });
-
- state.diagram.drdIndex = newIndex;
- state.diagram.drdSelector.isOpen = false;
- state.diagram.openNodesPanel = DiagramNodesPanel.DRG_NODES;
- state.focus.consumableId = getDrdId({ drdIndex: newIndex });
- });
- }}
- >
- <PlusCircleIcon />
- </Button>
- </Flex>
- <Divider style={{ marginBottom: "8px" }} />
- <div className={"kie-dmn-editor--drd-list"}>
-
{thisDmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"]?.map((drd, i)
=> (
- <React.Fragment key={drd["@_id"]!}>
- <button
- className={i === diagram.drdIndex ? "active" : undefined}
+ <div
+ style={{
+ display: "grid",
+ gridTemplateColumns: "300px 300px",
+ gridTemplateRows: "auto auto auto",
+ gridTemplateAreas: `
+ 'header-list header-properties'
+ 'divider-list divider-properties'
+ 'content-list content-properties'
+ `,
+ columnGap: "40px",
+ }}
+ >
+ <div style={{ gridArea: "header-list" }}>
+ <div style={{ display: "flex", justifyContent: "space-between" }}>
+ <TextContent>
+ <Text component="h3">DRDs</Text>
+ </TextContent>
+ <Button
+ variant={ButtonVariant.link}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
- state.diagram.drdIndex = i;
+ const allDrds =
state.dmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? [];
+ const newIndex = allDrds.length;
+
+ addOrGetDrd({
+ definitions: state.dmn.model.definitions,
+ drdIndex: newIndex,
+ });
+
+ state.diagram.drdIndex = newIndex;
state.diagram.drdSelector.isOpen = false;
+ state.diagram.openNodesPanel = DiagramNodesPanel.DRG_NODES;
+ state.focus.consumableId = getDrdId({ drdIndex: newIndex });
});
}}
>
- {`${i + 1}. ${drd["@_name"] || getDefaultDrdName({ drdIndex: i
})}`}
- </button>
- <br />
- </React.Fragment>
- ))}
+ <PlusCircleIcon />
+ </Button>
+ </div>
+ </div>
+ <div style={{ gridArea: "divider-list" }}>
+ <Divider style={{ marginBottom: "8px" }} />
+ </div>
+ <div style={{ gridArea: "content-list" }}
className={"kie-dmn-editor--drd-list"}>
+
{thisDmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"]?.map((drd, i)
=> (
+ <React.Fragment key={drd["@_id"]!}>
+ <button
+ className={i === diagram.drdIndex ? "active" : undefined}
+ onClick={() => {
+ dmnEditorStoreApi.setState((state) => {
+ state.diagram.drdIndex = i;
+ // state.diagram.drdSelector.isOpen = false;
+ });
+ }}
+ >
+ {`${i + 1}. ${drd["@_name"] || getDefaultDrdName({ drdIndex: i
})}`}
+ </button>
+ <br />
+ </React.Fragment>
+ ))}
+ </div>
+
+ <div style={{ gridArea: "header-properties" }}>
+ <Title headingLevel="h3" style={{ height: "36px" }}>
+ {getDefaultDrdName({ drdIndex })}
+ </Title>
Review Comment:
This will always render either "Default DRD" or "Untitled DRD". We want the
actual name of the DRD showing, right? See line 100.
##########
packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx:
##########
@@ -21,66 +21,147 @@ import * as React from "react";
import { useDmnEditorStore, useDmnEditorStoreApi } from
"../store/StoreContext";
import { addOrGetDrd, getDefaultDrdName } from "../mutations/addOrGetDrd";
import { Text, TextContent } from
"@patternfly/react-core/dist/js/components/Text";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
import { Button, ButtonVariant } from
"@patternfly/react-core/dist/js/components/Button";
import { PlusCircleIcon } from
"@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
-import { ArrowRightIcon } from
"@patternfly/react-icons/dist/js/icons/arrow-right-icon";
import { DiagramNodesPanel } from "../store/Store";
import { getDrdId } from "./drd/drdId";
+import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { Form, FormGroup, FormSection } from
"@patternfly/react-core/dist/js/components/Form";
+import { ToggleGroup, ToggleGroupItem } from
"@patternfly/react-core/dist/js/components/ToggleGroup";
+import { AlternativeInputDataIcon, InputDataIcon } from "../icons/Icons";
export function DrdSelectorPanel() {
const thisDmn = useDmnEditorStore((s) => s.dmn);
const diagram = useDmnEditorStore((s) => s.diagram);
+ const isAlternativeInputDataShape = useDmnEditorStore((s) =>
s.computed(s).isAlternativeInputDataShape());
+ const drdIndex = useDmnEditorStore((s) => s.diagram.drdIndex);
const dmnEditorStoreApi = useDmnEditorStoreApi();
return (
<>
- <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
- <TextContent>
- <Text component="h3">DRDs</Text>
- </TextContent>
- <Button
- variant={ButtonVariant.link}
- onClick={() => {
- dmnEditorStoreApi.setState((state) => {
- const allDrds =
state.dmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? [];
- const newIndex = allDrds.length;
-
- addOrGetDrd({
- definitions: state.dmn.model.definitions,
- drdIndex: newIndex,
- });
-
- state.diagram.drdIndex = newIndex;
- state.diagram.drdSelector.isOpen = false;
- state.diagram.openNodesPanel = DiagramNodesPanel.DRG_NODES;
- state.focus.consumableId = getDrdId({ drdIndex: newIndex });
- });
- }}
- >
- <PlusCircleIcon />
- </Button>
- </Flex>
- <Divider style={{ marginBottom: "8px" }} />
- <div className={"kie-dmn-editor--drd-list"}>
-
{thisDmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"]?.map((drd, i)
=> (
- <React.Fragment key={drd["@_id"]!}>
- <button
- className={i === diagram.drdIndex ? "active" : undefined}
+ <div
+ style={{
+ display: "grid",
+ gridTemplateColumns: "300px 300px",
+ gridTemplateRows: "auto auto auto",
+ gridTemplateAreas: `
+ 'header-list header-properties'
+ 'divider-list divider-properties'
+ 'content-list content-properties'
+ `,
+ columnGap: "40px",
+ }}
+ >
+ <div style={{ gridArea: "header-list" }}>
+ <div style={{ display: "flex", justifyContent: "space-between" }}>
+ <TextContent>
+ <Text component="h3">DRDs</Text>
+ </TextContent>
+ <Button
+ variant={ButtonVariant.link}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
- state.diagram.drdIndex = i;
+ const allDrds =
state.dmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? [];
+ const newIndex = allDrds.length;
+
+ addOrGetDrd({
+ definitions: state.dmn.model.definitions,
+ drdIndex: newIndex,
+ });
+
+ state.diagram.drdIndex = newIndex;
state.diagram.drdSelector.isOpen = false;
+ state.diagram.openNodesPanel = DiagramNodesPanel.DRG_NODES;
+ state.focus.consumableId = getDrdId({ drdIndex: newIndex });
});
}}
>
- {`${i + 1}. ${drd["@_name"] || getDefaultDrdName({ drdIndex: i
})}`}
- </button>
- <br />
- </React.Fragment>
- ))}
+ <PlusCircleIcon />
+ </Button>
+ </div>
+ </div>
+ <div style={{ gridArea: "divider-list" }}>
+ <Divider style={{ marginBottom: "8px" }} />
+ </div>
+ <div style={{ gridArea: "content-list" }}
className={"kie-dmn-editor--drd-list"}>
+
{thisDmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"]?.map((drd, i)
=> (
+ <React.Fragment key={drd["@_id"]!}>
+ <button
+ className={i === diagram.drdIndex ? "active" : undefined}
+ onClick={() => {
+ dmnEditorStoreApi.setState((state) => {
+ state.diagram.drdIndex = i;
+ // state.diagram.drdSelector.isOpen = false;
+ });
+ }}
+ >
+ {`${i + 1}. ${drd["@_name"] || getDefaultDrdName({ drdIndex: i
})}`}
+ </button>
+ <br />
+ </React.Fragment>
+ ))}
+ </div>
+
+ <div style={{ gridArea: "header-properties" }}>
+ <Title headingLevel="h3" style={{ height: "36px" }}>
+ {getDefaultDrdName({ drdIndex })}
+ </Title>
+ </div>
+ <div style={{ gridArea: "divider-properties" }}>
+ <Divider style={{ marginBottom: "8px" }} />
+ </div>
+ <div style={{ gridArea: "content-properties" }}>
+ <Form>
+ <FormSection>
+ <FormGroup label={"Input Data node shape"}>
+ <ToggleGroup
+ aria-label="Tweak the shape of the input data node"
+
className={"kie-dmn-editor--drd-properties--input-data-node-shape"}
+ >
+ <ToggleGroupItem
+ text="Classic"
+ icon={<InputDataIcon padding={"2px 0 0 0"} height={22} />}
+ buttonId="classic-input-node-shape"
+ isSelected={isAlternativeInputDataShape === false}
Review Comment:
I was writing the comment to ask to change it to
`!isAlternativeInputDataShape`, but really something about this specific line
makes it easier to write it this way. Well done :)
##########
packages/dmn-editor/src/store/computed/computeIsAlternativeInputDataShape.ts:
##########
@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { State } from "../Store";
+
+export function computeIsAlternativeInputDataShape(
+ drdIndex: State["diagram"]["drdIndex"],
+ dmnDi: State["dmn"]["model"]["definitions"]["dmndi:DMNDI"]
+) {
+ return
dmnDi?.["dmndi:DMNDiagram"]?.[drdIndex]["@_useAlternativeInputDataShape"] ??
false;
+}
Review Comment:
Also, feel free to inline this file directly at `Store.ts`... it's so small
and I don't see this changing to be more complex in the future.
##########
packages/dmn-editor/src/mutations/addOrGetDrd.ts:
##########
@@ -32,6 +33,7 @@ export function addOrGetDrd({ definitions, drdIndex }: {
definitions: DMN15__tDe
definitions["dmndi:DMNDI"]["dmndi:DMNDiagram"][drdIndex] ??= {};
const defaultDiagram =
definitions["dmndi:DMNDI"]["dmndi:DMNDiagram"][drdIndex];
+ defaultDiagram["@_id"] ??= generateUuid();
Review Comment:
👍
##########
packages/dmn-editor/src/diagram/nodes/NodeStyle.ts:
##########
@@ -192,9 +192,12 @@ export function getFontCssProperties(dmnFontStyle?:
DmnFontStyle): React.CSSProp
};
}
-export function getNodeLabelPosition(nodeType: NodeType): NodeLabelPosition {
+export function getNodeLabelPosition(nodeType: NodeType,
isAlternativeInputDataShape?: boolean): NodeLabelPosition {
Review Comment:
Why optional?
##########
packages/dmn-editor/src/diagram/maths/DmnMaths.ts:
##########
@@ -194,13 +194,13 @@ export function getContainmentRelationship({
container: DC__Bounds;
divingLineLocalY?: number;
snapGrid: SnapGrid;
- containerMinSizes: (snapGrid: SnapGrid) => DC__Dimension;
- boundsMinSizes: (snapGrid: SnapGrid) => DC__Dimension;
+ containerMinSizes: (args: { snapGrid: SnapGrid;
isAlternativeInputDataShape?: boolean }) => DC__Dimension;
+ boundsMinSizes: (args: { snapGrid: SnapGrid; isAlternativeInputDataShape?:
boolean }) => DC__Dimension;
Review Comment:
Why are those optional here?
##########
packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx:
##########
@@ -21,66 +21,147 @@ import * as React from "react";
import { useDmnEditorStore, useDmnEditorStoreApi } from
"../store/StoreContext";
import { addOrGetDrd, getDefaultDrdName } from "../mutations/addOrGetDrd";
import { Text, TextContent } from
"@patternfly/react-core/dist/js/components/Text";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
import { Button, ButtonVariant } from
"@patternfly/react-core/dist/js/components/Button";
import { PlusCircleIcon } from
"@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
-import { ArrowRightIcon } from
"@patternfly/react-icons/dist/js/icons/arrow-right-icon";
import { DiagramNodesPanel } from "../store/Store";
import { getDrdId } from "./drd/drdId";
+import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { Form, FormGroup, FormSection } from
"@patternfly/react-core/dist/js/components/Form";
+import { ToggleGroup, ToggleGroupItem } from
"@patternfly/react-core/dist/js/components/ToggleGroup";
+import { AlternativeInputDataIcon, InputDataIcon } from "../icons/Icons";
export function DrdSelectorPanel() {
const thisDmn = useDmnEditorStore((s) => s.dmn);
const diagram = useDmnEditorStore((s) => s.diagram);
+ const isAlternativeInputDataShape = useDmnEditorStore((s) =>
s.computed(s).isAlternativeInputDataShape());
+ const drdIndex = useDmnEditorStore((s) => s.diagram.drdIndex);
const dmnEditorStoreApi = useDmnEditorStoreApi();
return (
<>
- <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
- <TextContent>
- <Text component="h3">DRDs</Text>
- </TextContent>
- <Button
- variant={ButtonVariant.link}
- onClick={() => {
- dmnEditorStoreApi.setState((state) => {
- const allDrds =
state.dmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? [];
- const newIndex = allDrds.length;
-
- addOrGetDrd({
- definitions: state.dmn.model.definitions,
- drdIndex: newIndex,
- });
-
- state.diagram.drdIndex = newIndex;
- state.diagram.drdSelector.isOpen = false;
- state.diagram.openNodesPanel = DiagramNodesPanel.DRG_NODES;
- state.focus.consumableId = getDrdId({ drdIndex: newIndex });
- });
- }}
- >
- <PlusCircleIcon />
- </Button>
- </Flex>
- <Divider style={{ marginBottom: "8px" }} />
- <div className={"kie-dmn-editor--drd-list"}>
-
{thisDmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"]?.map((drd, i)
=> (
- <React.Fragment key={drd["@_id"]!}>
- <button
- className={i === diagram.drdIndex ? "active" : undefined}
+ <div
+ style={{
+ display: "grid",
+ gridTemplateColumns: "300px 300px",
+ gridTemplateRows: "auto auto auto",
+ gridTemplateAreas: `
+ 'header-list header-properties'
+ 'divider-list divider-properties'
+ 'content-list content-properties'
+ `,
+ columnGap: "40px",
+ }}
+ >
+ <div style={{ gridArea: "header-list" }}>
+ <div style={{ display: "flex", justifyContent: "space-between" }}>
+ <TextContent>
+ <Text component="h3">DRDs</Text>
+ </TextContent>
+ <Button
+ variant={ButtonVariant.link}
onClick={() => {
dmnEditorStoreApi.setState((state) => {
- state.diagram.drdIndex = i;
+ const allDrds =
state.dmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"] ?? [];
+ const newIndex = allDrds.length;
+
+ addOrGetDrd({
+ definitions: state.dmn.model.definitions,
+ drdIndex: newIndex,
+ });
+
+ state.diagram.drdIndex = newIndex;
state.diagram.drdSelector.isOpen = false;
+ state.diagram.openNodesPanel = DiagramNodesPanel.DRG_NODES;
+ state.focus.consumableId = getDrdId({ drdIndex: newIndex });
});
}}
>
- {`${i + 1}. ${drd["@_name"] || getDefaultDrdName({ drdIndex: i
})}`}
- </button>
- <br />
- </React.Fragment>
- ))}
+ <PlusCircleIcon />
+ </Button>
+ </div>
+ </div>
+ <div style={{ gridArea: "divider-list" }}>
+ <Divider style={{ marginBottom: "8px" }} />
+ </div>
+ <div style={{ gridArea: "content-list" }}
className={"kie-dmn-editor--drd-list"}>
+
{thisDmn.model.definitions["dmndi:DMNDI"]?.["dmndi:DMNDiagram"]?.map((drd, i)
=> (
+ <React.Fragment key={drd["@_id"]!}>
+ <button
+ className={i === diagram.drdIndex ? "active" : undefined}
+ onClick={() => {
+ dmnEditorStoreApi.setState((state) => {
+ state.diagram.drdIndex = i;
+ // state.diagram.drdSelector.isOpen = false;
Review Comment:
Either uncomment or delete.
##########
packages/dmn-editor/src/diagram/nodes/DefaultSizes.ts:
##########
@@ -91,57 +107,73 @@ export const MIN_NODE_SIZES: Record<NodeType, (snapGrid:
SnapGrid) => DC__Dimens
},
};
-export const DEFAULT_NODE_SIZES: Record<NodeType, (snapGrid: SnapGrid) =>
DC__Dimension> = {
- [NODE_TYPES.inputData]: (snapGrid) => {
+export const DEFAULT_NODE_SIZES: Record<
+ NodeType,
+ ({
+ snapGrid,
+ isAlternativeInputDataShape,
+ }: {
+ snapGrid: SnapGrid;
+ isAlternativeInputDataShape?: boolean;
Review Comment:
Why optional?
##########
packages/dmn-editor/src/store/computed/computeIsAlternativeInputDataShape.ts:
##########
@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { State } from "../Store";
+
+export function computeIsAlternativeInputDataShape(
+ drdIndex: State["diagram"]["drdIndex"],
+ dmnDi: State["dmn"]["model"]["definitions"]["dmndi:DMNDI"]
+) {
+ return
dmnDi?.["dmndi:DMNDiagram"]?.[drdIndex]["@_useAlternativeInputDataShape"] ??
false;
+}
Review Comment:
Why are we using the `dmnDi` as parameter here and not
`State["dmn"]["model"]["definitions"]["dmndi:DMNDI"]["dmndi:DMNDiagram"]`?
##########
packages/dmn-editor/src/diagram/nodes/Nodes.tsx:
##########
@@ -1193,18 +1266,22 @@ function useNodeDimensions(
type: NodeType,
snapGrid: SnapGrid,
shape: DMNDI15__DMNShape,
- isExternal: boolean
+ isExternal: boolean,
+ isAlternativeInputDataShape?: boolean
Review Comment:
Why optional?
##########
packages/dmn-editor/src/diagram/nodes/EditableNodeLabel.tsx:
##########
@@ -68,6 +69,7 @@ export function EditableNodeLabel({
skipValidation?: boolean;
onGetAllUniqueNames: (s: State) => UniqueNameIndex;
fontCssProperties?: React.CSSProperties;
+ setAlternativeEditableNodeHeight?:
React.Dispatch<React.SetStateAction<number>>;
Review Comment:
What does `alternative` have to do here in the context of this component? I
mean, this is really decoupled from anything related to the alternative
representation of the InputData node. We need a better name, or a better
mechanism to satisfying the new node's needs.
##########
packages/dmn-editor/src/diagram/nodes/DefaultSizes.ts:
##########
@@ -24,36 +24,52 @@ import { NodeType } from "../connections/graphStructure";
import { NODE_TYPES } from "./NodeTypes";
import { CONTAINER_NODES_DESIRABLE_PADDING } from "../maths/DmnMaths";
-export const MIN_NODE_SIZES: Record<NodeType, (snapGrid: SnapGrid) =>
DC__Dimension> = {
- [NODE_TYPES.inputData]: (snapGrid) => {
+export const MIN_NODE_SIZES: Record<
+ NodeType,
+ ({
+ snapGrid,
+ isAlternativeInputDataShape,
+ }: {
+ snapGrid: SnapGrid;
+ isAlternativeInputDataShape?: boolean;
Review Comment:
Why optional?
##########
packages/dmn-editor/src/svg/DmnDiagramSvg.tsx:
##########
@@ -250,6 +250,17 @@ const SVG_NODE_LABEL_TEXT_ADDITIONAL_PADDING_TOP_LEFT = 8;
export function getNodeLabelSvgTextAlignmentProps(n:
RF.Node<DmnDiagramNodeData>, labelPosition: NodeLabelPosition) {
switch (labelPosition) {
+ case "center-bottom":
+ const cbTx = n.position.x! + n.width! / 2;
+ const cbTy = n.position.y! + n.height!;
+ const cbWidth = n.width! - 2 * SVG_NODE_LABEL_TEXT_PADDING_ALL;
+ return {
+ verticalAnchor: "middle",
+ textAnchor: "middle",
+ transform: `translate(${cbTx},${cbTy})`,
+ width: cbWidth,
+ } as const;
Review Comment:
Nice. I would've completely forgotten this 🙈
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
