Height
@@ -15803,7 +15949,6 @@ const AngularWorkflow = (defaultprops) => {
defaultValue={selectedComment["backgroundimage"]}
onChange={(event) => {
selectedComment.backgroundimage = event.target.value;
- console.log("Comment: ", selectedComment)
setSelectedComment(selectedComment);
}}
/>
@@ -19696,12 +19841,115 @@ const AngularWorkflow = (defaultprops) => {
);
};
+ const setupResizeHandlers = (cy, nodeId) => {
+ let height;
+ let width;
+ let resizeTimeout;
+
+ cy.on("drag", ".resize-handle", (event) => {
+ if (resizeTimeout) return;
+
+ resizeTimeout = setTimeout(() => {
+ resizeTimeout = null;
+ const handle = event.target;
+ const parent = cy.$(`#${nodeId}`); // Fetch the main node directly
+
+ // Check if the parent node exists
+ if (!parent || parent.empty()) {
+ console.warn(`Parent node (${nodeId}) not found.`);
+ return;
+ }
+
+ if (!handle?.position()) {
+ console.warn(`Handle position is undefined for ${handle.id()}`);
+ return;
+ }
+
+ const handlePos = handle.position();
+ const parentPos = parent.position();
+
+ if (!parentPos) {
+ console.warn(`Parent position is undefined for ${nodeId}`);
+ return;
+ }
+
+ // Calculate new width & height based on handle movement
+ const newWidth = Math.abs(handlePos.x - parentPos.x) * 2;
+ const newHeight = Math.abs(handlePos.y - parentPos.y) * 2;
+
+ // Apply min/max constraints
+ const constrainedWidth = Math.max(100, Math.min(newWidth, 500));
+ const constrainedHeight = Math.max(50, Math.min(newHeight, 300));
+
+ // Update node size
+ parent.style({
+ width: constrainedWidth,
+ height: constrainedHeight,
+ });
+
+ // Store dimensions for state update on drag end
+ height = Math.floor(constrainedHeight);
+ width = Math.floor(constrainedWidth);
+
+ // Update handle positions
+ cy.$(".resize-handle").forEach((corner) => {
+ if (!corner?.id() || !corner.position()) return;
+
+ const { x, y } = parent.position();
+ const offsetX = corner.id().includes("left") ? -constrainedWidth / 2 : constrainedWidth / 2;
+ const offsetY = corner.id().includes("top") ? -constrainedHeight / 2 : constrainedHeight / 2;
+
+ corner.position({ x: x + offsetX, y: y + offsetY });
+ });
+ }, 16); // Throttle to ~60 FPS
+ });
+
+ // Update state when resizing ends
+ cy.on("free", ".resize-handle", (event) => {
+ const data = event.target.data();
+ const parentNode = cy.getElementById(data.attachedTo);
+
+ if (parentNode) {
+
+ parentNode.data({
+ ...parentNode.data(),
+ width: Math.floor(width),
+ height: Math.floor(height),
+ });
+ setSelectedComment((prev) => ({
+ ...prev,
+ width: Math.floor(width),
+ height: Math.floor(height),
+ }));
+ }
+ });
+
+ };
+
+
+ const setupNodeDragHandler = (cy, nodeId) => {
+ cy.on("drag", `#${nodeId}`, (event) => {
+ const node = event.target;
+ const { x, y } = node.position();
+ const width = parseFloat(node.style("width"));
+ const height = parseFloat(node.style("height"));
+
+ // Move resize handles with the node
+ cy.$(".resize-handle").forEach((corner) => {
+ const offsetX = corner.id().includes("left") ? -width / 2 : width / 2;
+ const offsetY = corner.id().includes("top") ? -height / 2 : height / 2;
+
+ corner.position({ x: x + offsetX, y: y + offsetY });
+ });
+ });
+ };
+
const addCommentNode = () => {
const newId = uuidv4();
- const position = {
- x: 300,
- y: 300,
- };
+ const position = { x: 300, y: 300 };
+ const width = 250;
+ const height = 150;
+ const handleOffset = 10; // Move handles outside the node
cy.add({
group: "nodes",
@@ -19711,20 +19959,51 @@ const AngularWorkflow = (defaultprops) => {
type: "COMMENT",
is_valid: true,
decorator: true,
- width: 250,
- height: 150,
- position: position,
+ width,
+ height,
+ position,
backgroundcolor: "#1f2023",
color: "#ffffff",
+ textHalign: "center",
+ textValign: "center",
+ textMarginX: "0px",
+ textMarginY: "0px",
},
- position: position,
+ position,
});
+
+ // Define corner positions relative to the main node
+ const corners = [
+ { id: `${newId}-top-left`, dx: -width / 2 - handleOffset, dy: -height / 2 - handleOffset },
+ { id: `${newId}-top-right`, dx: width / 2 + handleOffset, dy: -height / 2 - handleOffset },
+ { id: `${newId}-bottom-left`, dx: -width / 2 - handleOffset, dy: height / 2 + handleOffset },
+ { id: `${newId}-bottom-right`, dx: width / 2 + handleOffset, dy: height / 2 + handleOffset },
+ ];
+
+ // Add resize handles **without** the parent property
+ corners.forEach((corner) => {
+ cy.add({
+ group: "nodes",
+ data: {
+ id: corner.id,
+ type: "RESIZE-HANDLE",
+ is_valid: true,
+ attachedTo: newId,
+ decorator: true,
+ }, // No parent to avoid edges
+ position: { x: position.x + corner.dx, y: position.y + corner.dy },
+ classes: "resize-handle",
+ });
+ });
+
+ setupResizeHandlers(cy, newId);
+ setupNodeDragHandler(cy, newId);
};
const RightSideBar = (props) => {
var defaultReturn = null
- if (Object.getOwnPropertyNames(selectedComment).length > 0) {
+ if (Object.getOwnPropertyNames(selectedComment).length > 0 && selectedComment.hasOwnProperty('id')) {
defaultReturn =
} else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
if (selectedTrigger.trigger_type === undefined) {