From e21d634f27baff2f0b1364d27ea2235c3123fdab Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Sat, 14 Dec 2024 18:26:46 -0800 Subject: [PATCH] Fixed review comments Signed-off-by: CTomlyn --- .../src/common-canvas/common-canvas-utils.js | 18 +++++++-------- .../constants/canvas-constants.js | 5 ++++ .../src/common-canvas/svg-canvas-renderer.js | 23 ++++++++----------- .../svg-canvas-utils-drag-new-link.js | 10 +++----- .../src/object-model/layout-dimensions.js | 8 +++---- .../network/network-canvas.jsx | 3 +-- docs/pages/03.06.01-node-customization.md | 4 ++-- 7 files changed, 34 insertions(+), 37 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js b/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js index 025f2e4712..76be65bc22 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js @@ -23,7 +23,7 @@ import { get, has, isNumber, set } from "lodash"; import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK, LINK_TYPE_STRAIGHT, SUPER_NODE, NORTH, SOUTH, EAST, WEST, - PORT_DISPLAY_IMAGE + PORT_DISPLAY_IMAGE, PORT_WIDTH_DEFAULT, PORT_HEIGHT_DEFAULT, } from "../common-canvas/constants/canvas-constants.js"; export default class CanvasUtils { @@ -1707,8 +1707,8 @@ export default class CanvasUtils { newLayout.inputPortDisplayObjects = [ { type: PORT_DISPLAY_IMAGE, src: newLayout.inputPortImage, - height: newLayout.inputPortHeight, - width: newLayout.inputPortWidth + height: newLayout.inputPortHeight || PORT_HEIGHT_DEFAULT, + width: newLayout.inputPortWidth || PORT_WIDTH_DEFAULT } ]; } @@ -1717,8 +1717,8 @@ export default class CanvasUtils { newLayout.inputPortGuideObjects = [ { type: PORT_DISPLAY_IMAGE, src: newLayout.inputPortGuideImage, - height: newLayout.inputPortHeight, - width: newLayout.inputPortWidth + height: newLayout.inputPortHeight || PORT_HEIGHT_DEFAULT, + width: newLayout.inputPortWidth || PORT_WIDTH_DEFAULT } ]; } @@ -1729,8 +1729,8 @@ export default class CanvasUtils { newLayout.outputPortDisplayObjects = [ { type: PORT_DISPLAY_IMAGE, src: newLayout.outputPortImage, - height: newLayout.outputPortHeight, - width: newLayout.outputPortWidth + height: newLayout.outputPortHeight || PORT_HEIGHT_DEFAULT, + width: newLayout.outputPortWidth || PORT_WIDTH_DEFAULT, } ]; } @@ -1739,8 +1739,8 @@ export default class CanvasUtils { newLayout.outputPortGuideObjects = [ { type: PORT_DISPLAY_IMAGE, src: newLayout.outputPortGuideImage, - height: newLayout.outputPortHeight, - width: newLayout.outputPortWidth + height: newLayout.outputPortHeight || PORT_HEIGHT_DEFAULT, + width: newLayout.outputPortWidth || PORT_WIDTH_DEFAULT } ]; } diff --git a/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js b/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js index e7e8bf2e8d..8ce4f5660a 100644 --- a/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js +++ b/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js @@ -183,6 +183,11 @@ export const WEST = "w"; export const CAUSE_MOUSE = "M"; export const CAUSE_KEYBOARD = "K"; +// Defaults for port size incase width and height are not provided in +// the inputPortDisplayObjects and outputPortDisplayObjects arrays. +export const PORT_WIDTH_DEFAULT = 12; +export const PORT_HEIGHT_DEFAULT = 12; + // Context Menu button value export const CONTEXT_MENU_BUTTON = 2; diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js index 298b3a7dda..89f5218875 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js @@ -45,6 +45,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK, NORTH, SOUTH, EAST, WEST, WYSIWYG, CAUSE_KEYBOARD, CAUSE_MOUSE, FLOW_IN, FLOW_OUT, + PORT_WIDTH_DEFAULT, PORT_HEIGHT_DEFAULT, CANVAS_FOCUS } from "./constants/canvas-constants"; import SUPERNODE_ICON from "../../assets/images/supernode.svg"; @@ -2032,10 +2033,10 @@ export default class SVGCanvasRenderer { obj.attr("xlink:href", portInfo.src); } obj - .attr("x", cx - (portInfo.wd / 2)) - .attr("y", cy - (portInfo.ht / 2)) - .attr("width", portInfo.wd) - .attr("height", portInfo.ht) + .attr("x", cx - (portInfo.width / 2)) + .attr("y", cy - (portInfo.height / 2)) + .attr("width", portInfo.width) + .attr("height", portInfo.height) .attr("transform", transform); } else { @@ -2049,15 +2050,11 @@ export default class SVGCanvasRenderer { getPortDisplayInfo(displayObjects, i) { const idx = (i < displayObjects.length) ? i : displayObjects.length - 1; const portObj = displayObjects[idx]; - const ty = portObj.type; - const tg = ty === "jsx" ? "foreignObject" : ty; // Translate the tag to 'foreignObject' if type is 'jsx'. - return { - type: ty, - tag: tg, - src: portObj.src, - ht: portObj.height, - wd: portObj.width - }; + const obj = { ...portObj }; + obj.tag = portObj.type === "jsx" ? "foreignObject" : portObj.type; + obj.width = obj.width || PORT_WIDTH_DEFAULT; + obj.width = obj.height || PORT_HEIGHT_DEFAULT; + return obj; } // Attaches the appropriate listeners to the node groups. diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js index 97b4623d2e..8a759e0bad 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js @@ -167,10 +167,6 @@ export default class SVGCanvasUtilsDragNewLink { } } - getPortIndex(portId, ports) { - return ports.findIndex((p) => p.id === portId); - } - drawNewLink(d3Event) { if (this.ren.config.enableEditingActions === false || !this.drawingNewLinkData) { return; @@ -581,8 +577,8 @@ export default class SVGCanvasUtilsDragNewLink { // though some attributes will not be relevant. This is done // because I could not get the .each() method to work here (which // would be necessary to have an if statement based on guide object) - .attr("x", saveX1 - (saveNewLinkData.portGuideInfo?.wd / 2)) - .attr("y", saveY1 - (saveNewLinkData.portGuideInfo?.ht / 2)) + .attr("x", saveX1 - (saveNewLinkData.portGuideInfo?.width / 2)) + .attr("y", saveY1 - (saveNewLinkData.portGuideInfo?.height / 2)) .attr("cx", saveX1) .attr("cy", saveY1) .attr("transform", null); @@ -603,7 +599,7 @@ export default class SVGCanvasUtilsDragNewLink { .each((x, i, foreignObjects) => this.ren.externalUtils.removeExternalObject(x, i, foreignObjects)); - // Remove all the constituent part of the new link. + // Remove all the constituent parts of the new link. this.ren.nodesLinksGrp.selectAll(".d3-new-connection-line").remove(); this.ren.nodesLinksGrp.selectAll(".d3-new-connection-start").remove(); this.ren.nodesLinksGrp.selectAll(".d3-new-connection-guide").remove(); diff --git a/canvas_modules/common-canvas/src/object-model/layout-dimensions.js b/canvas_modules/common-canvas/src/object-model/layout-dimensions.js index 458de5e747..cc078e561b 100644 --- a/canvas_modules/common-canvas/src/object-model/layout-dimensions.js +++ b/canvas_modules/common-canvas/src/object-model/layout-dimensions.js @@ -233,7 +233,7 @@ const portsHorizontalDefaultLayout = { // this: { x_pos: 5, y_pos: 10, pos: "topRight" }. x_pos and y_pos are // offsets from the pos point on the node. // The order of the elements corresponds to the order of ports in the - // outputs array for the node. If there are more input ports than elements + // outputs array for the node. If there are more output ports than elements // in the array, the last element will be used for all remaining ports. outputPortPositions: [ { x_pos: 0, y_pos: 20, pos: "topRight" } @@ -250,7 +250,7 @@ const portsHorizontalDefaultLayout = { // { type: "jsx", src: (), width: 16, height: 16 } // // The order of the elements corresponds to the order of ports in the - // inputs array for the node. If there are more input ports than elements + // outputs array for the node. If there are more output ports than elements // in the array, the last element will be used for all remaining ports. outputPortGuideObjects: [ { type: "circle" } @@ -691,7 +691,7 @@ const portsVerticalDefaultLayout = { // this: { x_pos: 5, y_pos: 10, pos: "topRight" }. x_pos and y_pos are // offsets from the pos point on the node. // The order of the elements corresponds to the order of ports in the - // outputs array for the node. If there are more input ports than elements + // outputs array for the node. If there are more output ports than elements // in the array, the last element will be used for all remaining ports. outputPortPositions: [ { x_pos: 0, y_pos: 29, pos: "topRight" } @@ -708,7 +708,7 @@ const portsVerticalDefaultLayout = { // { type: "jsx", src: (), width: 16, height: 16 } // // The order of the elements corresponds to the order of ports in the - // inputs array for the node. If there are more input ports than elements + // outputs array for the node. If there are more output ports than elements // in the array, the last element will be used for all remaining ports. outputPortGuideObjects: [ { type: "circle" } diff --git a/canvas_modules/harness/src/client/components/custom-canvases/network/network-canvas.jsx b/canvas_modules/harness/src/client/components/custom-canvases/network/network-canvas.jsx index f9a2c56dbc..56b481ddae 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/network/network-canvas.jsx +++ b/canvas_modules/harness/src/client/components/custom-canvases/network/network-canvas.jsx @@ -62,8 +62,7 @@ export default class NetworkCanvas extends React.Component { outputPortDisplay: true, outputPortGuideObject: "image", - outputPortGuideImage: "/images/custom-canvases/flows/decorations/dragStateArrow.svg", - outputPortGuideImageRotate: true + outputPortGuideImage: "/images/custom-canvases/flows/decorations/dragStateArrow.svg" }, enableCanvasLayout: { dataLinkArrowHead: "M 0 0 L -5 -2 -5 2 Z" diff --git a/docs/pages/03.06.01-node-customization.md b/docs/pages/03.06.01-node-customization.md index 805a11f1c2..ee9ab5260e 100644 --- a/docs/pages/03.06.01-node-customization.md +++ b/docs/pages/03.06.01-node-customization.md @@ -229,7 +229,7 @@ The possible node layout properties are shown below with the values they have wh // this: { x_pos: 5, y_pos: 10, pos: "topRight" }. x_pos and y_pos are // offsets from the pos point on the node. // The order of the elements corresponds to the order of ports in the - // outputs array for the node. If there are more input ports than elements + // outputs array for the node. If there are more output ports than elements // in the array, the last element will be used for all remaining ports. outputPortPositions: [ { x_pos: 0, y_pos: 20, pos: "topRight" } @@ -246,7 +246,7 @@ The possible node layout properties are shown below with the values they have wh // { type: "jsx", src: (), width: 16, height: 16 } // // The order of the elements corresponds to the order of ports in the - // inputs array for the node. If there are more input ports than elements + // outputs array for the node. If there are more output ports than elements // in the array, the last element will be used for all remaining ports. outputPortGuideObjects: [ { type: "circle" }