marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed the linting

Browse Source
This commit is contained in:
Piyush Kumar Pradhan
2025-03-03 16:59:11 +05:30
parent fb57145cf9
commit 3d02907947
2 changed files with 317 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/defaultCytoscapeStyle.jsx
+25 -6
View File
@@ -95,23 +95,42 @@ const data = [
{
selector: `node[type="COMMENT"]`,
css: {
label: function(element) {
return element.data("label")
},
label: function (element) {
return element.data("label")
},
shape: "roundrectangle",
color: "data(color)",
width: "data(width)",
height: "data(height)",
padding: "0px",
padding: "5px",
margin: "0px",
"background-color": "data(backgroundcolor)",
"background-image": "data(backgroundimage)",
"border-color": "#ffffff",
"text-margin-x": "0px",
"text-margin-x": "data(textMarginX)",
"text-margin-y": "data(textMarginY)",
"z-index": 4999,
"border-radius": "5px",
"background-opacity": "0.5",
"text-wrap": "wrap",
"text-wrap": "wrap",
"text-max-width": "data(width)",
"text-halign": "data(textHalign)",
"text-valign": "data(textValign)"
},
},
{
selector: `node[type="RESIZE-HANDLE"]`,
css: {
shape: "ellipse",
width: "8px",
height: "8px",
"border-width": 1,
"border-color": "white",
"z-index": 5002,
"overlay-opacity": 0,
"cursor": "nwse-resize",
"opacity": 0,
"pointer-events": "auto",
},
},
{
frontend/src/views/AngularWorkflow.jsx
+292 -13
View File
@@ -1074,6 +1074,7 @@ const AngularWorkflow = (defaultprops) => {
// Special multi-workflow edgecase handler for events
if (distributedFromParent === "" && suborgWorkflows === []) {
} else {
console.log("here");
if (cy !== undefined && cy !== null) {
cy.removeListener("select");
cy.removeListener("unselect");
@@ -1118,7 +1119,8 @@ const AngularWorkflow = (defaultprops) => {
!el.data("isButton") &&
!el.data("isDescriptor") &&
!el.data("isSuggestion") &&
el.data("type") !== "COMMENT") {
el.data("type") !== "COMMENT" &&
el.data("type") !== "RESIZE-HANDLE") {
return true
}
@@ -2325,6 +2327,7 @@ const AngularWorkflow = (defaultprops) => {
var newBranches = [];
var newVBranches = [];
var newComments = [];
var newResizes = [];
for (let cyelementsKey in cyelements) {
if (cyelements[cyelementsKey].data === undefined) {
continue;
@@ -2509,7 +2512,40 @@ const AngularWorkflow = (defaultprops) => {
//console.log(curworkflowComment)
newComments.push(curworkflowComment);
} else {
} else if (type === "RESIZE-HANDLE") {
if (useworkflow.resizes === undefined || useworkflow.resizes === null) {
useworkflow.resizes = [];
}
var curworkflowResize = useworkflow.resizes.find(
(a) => a.id === cyelements[cyelementsKey].data()["id"]
);
if (curworkflowResize === undefined) {
curworkflowResize = cyelements[cyelementsKey].data();
}
// Ensure width and height are properly parsed
const parsedHeight = parseInt(curworkflowResize["height"]);
if (!isNaN(parsedHeight)) {
curworkflowResize.height = parsedHeight;
} else {
curworkflowResize.height = 150; // Default value if parsing fails
}
const parsedWidth = parseInt(curworkflowResize["width"]);
if (!isNaN(parsedWidth)) {
curworkflowResize.width = parsedWidth;
} else {
curworkflowResize.width = 200; // Default value if parsing fails
}
// Update position from Cytoscape
curworkflowResize.position = cyelements[cyelementsKey].position();
newResizes.push(curworkflowResize);
}
else {
toast("No handler for type: " + type);
}
}
@@ -6522,6 +6558,21 @@ const AngularWorkflow = (defaultprops) => {
}
setSelectedComment(data);
} else if (data.type === "RESIZE-HANDLE") {
const parentNode = cy.getElementById(data.attachedTo);
if (parentNode) {
console.log("Resizing parent node:", parentNode);
// Get the parent node's data
const parentData = parentNode.data();
if (parentData?.type === "COMMENT") {
// Set the parent node's data as the selected comment
setSelectedComment(parentData);
}
}
return; // Exit after handling the resize handle
} else {
toast("Can't handle node type " + data.type);
return;
@@ -9650,7 +9701,8 @@ const AngularWorkflow = (defaultprops) => {
!el.data("isButton") &&
!el.data("isDescriptor") &&
!el.data("isSuggestion") &&
el.data("type") !== "COMMENT") {
el.data("type") !== "COMMENT" &&
el.data("type") !== "RESIZE-HANDLE") {
return true
}
@@ -9732,6 +9784,27 @@ const AngularWorkflow = (defaultprops) => {
cy.on("mouseover", "node", (e) => onNodeHover(e));
cy.on("mouseout", "node", (e) => onNodeHoverOut(e));
cy.on("mouseover", "node[type='RESIZE-HANDLE']", (e) => {
const nodeId = e.target.id();
// Check the node ID to determine the cursor style based on position
if (nodeId.includes("bottom-right")) {
cy.container().style.cursor = "nwse-resize"; // Bottom-right resize cursor
} else if (nodeId.includes("top-right")) {
cy.container().style.cursor = "nesw-resize"; // Top-right resize cursor
} else if (nodeId.includes("top-left")) {
cy.container().style.cursor = "nwse-resize"; // Top-left resize cursor
} else if (nodeId.includes("bottom-left")) {
cy.container().style.cursor = "nesw-resize"; // Bottom-left resize cursor
} else {
cy.container().style.cursor = "default"; // Default cursor for other cases
}
});
cy.on("mouseout", "node[type='RESIZE-HANDLE']", (e) => {
cy.container().style.cursor = "";
});
// Handles dragging
cy.on("drag", "node", (e) => onNodeDrag(e, selectedAction));
cy.on("free", "node", (e) => onNodeDragStop(e, selectedAction));
@@ -15699,6 +15772,79 @@ const AngularWorkflow = (defaultprops) => {
setSelectedComment(selectedComment);
}}
/>
<div style={{ display: "flex", marginTop: 10 }}>
<div style={{
width: "50%"
}}>
<div>Justify</div>
<Select
style={{ backgroundColor: theme.palette.inputColor }}
fullWidth
defaultValue="center"
value={selectedComment.textHalign !== "center" && selectedComment.textHalign !== undefined ? selectedComment.textHalign === "left" ? "right" : "left" : "center"}
onChange={(event) => {
const alignment = event.target.value;
const width = selectedComment.width || 250; // Default width if undefined
// Compute new values
let textHalign = alignment !== "center" ? alignment === "left" ? "right" : "left" : "center";
let textMarginX = "0px"; // Default for center alignment
if (alignment === "left") {
textMarginX = `-${width}px`;
} else if (alignment === "right") {
textMarginX = `${width}px`;
}
selectedComment.textHalign = textHalign;
selectedComment.textMarginX = textMarginX;
// Update state properly
setSelectedComment((prev) => ({
...prev,
textHalign,
textMarginX,
}));
// Use useEffect or separate logging to confirm state changes
}}
>
<MenuItem value="left">Left</MenuItem>
<MenuItem value="center">Center</MenuItem>
<MenuItem value="right">Right</MenuItem>
</Select>
</div>
<div style={{ marginLeft: 5, width: "50%" }}>
<div>Align</div>
<Select
fullWidth
style={{ backgroundColor: theme.palette.inputColor }}
defaultValue="center"
value={selectedComment.textValign !== "center" && selectedComment.textHalign !== undefined ? selectedComment.textValign === "top" ? "bottom" : "top" : "center" || "center"}
onChange={(event) => {
const height = selectedComment.height || 150; // Default width if undefined
let textValign = event.target.value === "center" ? "center" : event.target.value === "top" ? "bottom" : "top";
let textMarginY = "0px"; // Default for center alignment
if (textValign === "top") {
textMarginY = `${height}px`;
} else if (textValign === "bottom") {
textMarginY = `-${height}px`;
}
selectedComment.textValign = textValign;
selectedComment.textMarginY = textMarginY;
setSelectedComment((prev) => ({
...prev,
textValign,
textMarginY
}));
}}
>
<MenuItem value="top">Top</MenuItem>
<MenuItem value="center">Center</MenuItem>
<MenuItem value="bottom">Bottom</MenuItem>
</Select>
</div>
</div>
<div style={{ display: "flex", marginTop: 10 }}>
<div>
<div>Height</div>
@@ -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 = <CommentSidebar />
} else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
if (selectedTrigger.trigger_type === undefined) {