Skip to content

Commit

Permalink
npm run lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@RadStr
RadStr committed Jan 13, 2025
1 parent aa654bc commit 25bd09e
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 106 deletions.
4 changes: 2 additions & 2 deletions applications/conceptual-model-editor/src/action/add-group-to-visual-model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function addGroupToVisualModelAction(
}

return visualModel.addVisualGroup({
content: [...new Set(convertedContentWithExistingGroups)], // remove possible duplicate groups
anchored: null,
content: [...new Set(convertedContentWithExistingGroups)], // Remove possible duplicate groups
anchored: null,
});
}
2 changes: 0 additions & 2 deletions applications/conceptual-model-editor/src/action/remove-part-of-group-content.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { UseNotificationServiceWriterType } from "../notification/notification-s
import { removeGroupFromVisualModelAction } from "./remove-group-from-visual-model";
import { findTopLevelGroupFromVisualModel } from "./utilities";


// TODO RadStr: Maybe should be separated somehow (it is called recursively and on removeGroup)
/**
* Removes part of group's content.
Expand Down Expand Up @@ -40,7 +39,6 @@ export function removePartOfGroupContentAction(
return true;
});


const topLevelGroup = findTopLevelGroupFromVisualModel(groupIdentifier, visualModel);
if(newGroupContent.length === 0 || (newGroupContent.length === 1 && topLevelGroup === groupIdentifier)) {
removeGroupFromVisualModelAction(notifications, visualModel, groupIdentifier);
Expand Down
6 changes: 0 additions & 6 deletions applications/conceptual-model-editor/src/action/test/remove-part-of-group-content.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ test("Test dissolving top level groups", () => {
expect(visualModel.getVisualEntities().size).toEqual(4);
});


test("Test dissolving group through visibility", () => {
const visualModel: WritableVisualModel = createDefaultVisualModelFactory().createNewWritableVisualModelSync();
const model = "TEST MODEL";
Expand All @@ -59,7 +58,6 @@ test("Test dissolving group through visibility", () => {
expect(visualModel.getVisualEntities().size).toEqual(1);
});


test("Test dissolving multi-group through visibility of one whole group", () => {
const visualModel: WritableVisualModel = createDefaultVisualModelFactory().createNewWritableVisualModelSync();
const model = "TEST MODEL";
Expand Down Expand Up @@ -87,7 +85,6 @@ test("Test dissolving multi-group through visibility of one whole group", () =>
expect(visualModel.getVisualEntities().size).toEqual(3);
});


test("Test dissolving multi-group through visibility sequentially", () => {
const visualModel: WritableVisualModel = createDefaultVisualModelFactory().createNewWritableVisualModelSync();
const model = "TEST MODEL";
Expand Down Expand Up @@ -177,7 +174,6 @@ test("Test dissolving everything through visiblity", () => {
expect(visualModel.getVisualEntities().size).toEqual(0);
});


test("Test removing part of visual group", () => {
const visualModel: WritableVisualModel = createDefaultVisualModelFactory().createNewWritableVisualModelSync();
const model = "TEST MODEL";
Expand Down Expand Up @@ -212,8 +208,6 @@ test("Test removing part of visual group", () => {
expect(visualModel.getVisualEntities().size).toEqual(5);
});



//

const createNewVisualNodeForTesting = (visualModel: WritableVisualModel, model: string, semanticIdentifierAsNumber: number) => {
Expand Down
1 change: 0 additions & 1 deletion applications/conceptual-model-editor/src/diagram/canvas/canvas-toolbar-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export interface CanvasToolbarGeneralProps {
export interface CanvasToolbarContentProps {
canvasPosition: Position;


/**
* Is the identifier of the node which caused the toolbar to appear.
* For example when dragging edge to canvas, then it is the source node of the connection.
Expand Down
75 changes: 24 additions & 51 deletions applications/conceptual-model-editor/src/diagram/diagram-controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,15 @@ import { GroupMenu } from "./node/group-menu";
import { findTopLevelGroup } from "../action/utilities";
import { CanvasToolbarGeneralComponentProps } from "./canvas/canvas-toolbar-general";


const getTopLeftPosition = (nodes: Node<any>[]) => {
const topLeft = {x: 10000000, y: 10000000};
nodes.forEach(node => {
if(node.position.x < topLeft.x) {
topLeft.x = node.position.x;
}
if(node.position.y < topLeft.y) {
topLeft.y = node.position.y;
}
if(node.position.x < topLeft.x) {
topLeft.x = node.position.x;
}
if(node.position.y < topLeft.y) {
topLeft.y = node.position.y;
}
});

return topLeft;
Expand All @@ -76,14 +75,14 @@ const getTopLeftPosition = (nodes: Node<any>[]) => {
const getBotRightPosition = (nodes: Node<any>[]) => {
const botRight = {x: -10000000, y: -10000000};
nodes.forEach(node => {
const x = node.position.x + (node.measured?.width ?? 0);
if(x > botRight.x) {
botRight.x = x;
}
const y = node.position.y + (node.measured?.height ?? 0);
if(y > botRight.y) {
botRight.y = y;
}
const x = node.position.x + (node.measured?.width ?? 0);
if(x > botRight.x) {
botRight.x = x;
}
const y = node.position.y + (node.measured?.height ?? 0);
if(y > botRight.y) {
botRight.y = y;
}
});

return botRight;
Expand Down Expand Up @@ -142,7 +141,7 @@ const createGroupNode = (groupId: string, content: Node<any>[], hidden: boolean)
border: "none",
},
data: {
// TODO: DEBUG Just keep the color
// TODO: DEBUG Just keep the color
cls: undefined,
color: "#694025",
attributes: [],
Expand All @@ -153,7 +152,6 @@ const createGroupNode = (groupId: string, content: Node<any>[], hidden: boolean)
return groupNode
};


export type NodeType = Node<ApiNode>;

export type EdgeType = Edge<ApiEdge>;
Expand Down Expand Up @@ -361,7 +359,7 @@ function useCreateDiagramControllerIndependentOnActionsAndContext(
selectedNodesRef,
userSelectedNodes, setUserSelectedNodes, userSelectedNodesRef,
cleanSelection,
} = createdReactStates;
} = createdReactStates;
const alignmentController = useAlignmentController({ reactFlowInstance });
const canvasHighlighting = useExplorationCanvasHighlightingController(setNodes, setEdges);
const isCtrlPressed = useKeyPress("Control");
Expand All @@ -381,7 +379,7 @@ function useCreateDiagramControllerIndependentOnActionsAndContext(

const onEdgesChange = useCallback(createEdgesChangeHandler(
setEdges, setSelectedEdges),
[setEdges, setSelectedEdges]);
[setEdges, setSelectedEdges]);

useEffect(() => {
// TODO: DEBUG
Expand Down Expand Up @@ -416,7 +414,6 @@ function useCreateDiagramControllerIndependentOnActionsAndContext(
const onNodeMouseEnter = useCallback(createOnNodeMouseEnterHandler(canvasHighlighting.changeHighlight, reactFlowInstance), [canvasHighlighting.changeHighlight, reactFlowInstance]);
const onNodeMouseLeave = useCallback(createOnNodeMouseLeaveHandler(canvasHighlighting.resetHighlight), [canvasHighlighting.resetHighlight]);


return {
alignmentController,
onNodesChange,
Expand Down Expand Up @@ -479,7 +476,7 @@ function useCreateDiagramControllerDependentOnActionsAndContext(

const onNodeDragStart = useCallback(createOnNodeDragStartHandler(
alignmentController, canvasHighlighting.disableTemporarily, nodesInGroupWhichAreNotPartOfDragging, context.closeCanvasToolbar),
[alignmentController, canvasHighlighting.disableTemporarily, nodesInGroupWhichAreNotPartOfDragging, context.closeCanvasToolbar]);
[alignmentController, canvasHighlighting.disableTemporarily, nodesInGroupWhichAreNotPartOfDragging, context.closeCanvasToolbar]);

return {
context,
Expand All @@ -490,7 +487,6 @@ function useCreateDiagramControllerDependentOnActionsAndContext(
};
}


export function useDiagramController(api: UseDiagramType): UseDiagramControllerType {
const reactStates = useCreateReactStates();
// We can use useStore get low level access.
Expand Down Expand Up @@ -546,7 +542,6 @@ const createOnNodeDragStartHandler = (
};
};


const createOnNodeMouseEnterHandler = (
changeHighlight: (
startingNodeId: string,
Expand Down Expand Up @@ -616,12 +611,10 @@ const createChangeSelectionHandler = (
}
};


const isNodeChangeChangingSelection = (change: NodeChange<NodeType>): change is (NodePositionChange | NodeSelectionChange) => {
return change.type === "select" || (change.type === "position" && change.dragging === false);
};


const createNodesChangeHandler = (
nodes: NodeType[],
setNodes: ReactPrevSetStateType<NodeType[]>,
Expand Down Expand Up @@ -654,25 +647,22 @@ const createNodesChangeHandler = (
console.info("nodes", nodes);

if(handleStartOfGroupDraggingThroughGroupNode(nodes, changes, userSelectedNodesRef, setNodes,
setUserSelectedNodes, setSelectedNodes, groups, nodesInGroupWhichAreNotPartOfDragging)) {
setUserSelectedNodes, setSelectedNodes, groups, nodesInGroupWhichAreNotPartOfDragging)) {
return;
}
if(handleGroupDraggingThroughNotSelectedNode(changes, userSelectedNodesRef, isSelectingThroughCtrl, setNodes,
setUserSelectedNodes, setSelectedNodes, groups, nodesInGroupWhichAreNotPartOfDragging, selectedNodes, selectedNodesRef)) {
setUserSelectedNodes, setSelectedNodes, groups, nodesInGroupWhichAreNotPartOfDragging, selectedNodes, selectedNodesRef)) {
return;
}
const extractedDataFromChanges = getDataFromChanges(changes, groups, nodeToGroupMapping, selectedNodesRef, nodes);

// TODO: DEBUG
console.info(extractedDataFromChanges, {...extractedDataFromChanges});


// TODO RadStr: Using the selected in data instead ... remove
// addNewChangesBasedOnGroups(newlySelectedNodesBasedOnGroups, changedSelectionByUser, true, changes);
// addNewChangesBasedOnGroups(newlyUnselectedNodesBasedOnGroups, changedSelectionByUser, false, changes);



updateChangesByGroupDragEvents(changes, nodes, groups, nodeToGroupMapping,
extractedDataFromChanges.directlyDraggedGroup, nodesInGroupWhichAreNotPartOfDragging);

Expand Down Expand Up @@ -720,7 +710,6 @@ const createNodesChangeHandler = (
// setSelectedNodes(p => newSelectedNodes);
// selectedNodesRef.current = newSelectedNodes;


// if(lastSelectedNode !== null) {
// setNodeWithToolbar(lastSelectedNode);
// }
Expand All @@ -744,7 +733,6 @@ const createNodesChangeHandler = (
return newUserSelectedNodes;
});


setSelectedNodes(previouslySelectedNodes => {
const newSelectedNodes = updateSelectedNodesBasedOnNodeChanges(
previouslySelectedNodes,
Expand Down Expand Up @@ -776,7 +764,7 @@ const createNodesChangeHandler = (
// }
// }
// nodesInGroupWhichAreNotPartOfDragging.current = newNodesInGroupWhichAreNotPartOfDragging;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

alignmentController.alignmentNodesChange(changes);
////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -820,7 +808,6 @@ const createNodesChangeHandler = (
}
};


/**
* Solves the situation when we are starting to drag the "pink" group node
* @returns True if such situation occured, false if not
Expand Down Expand Up @@ -856,7 +843,6 @@ const handleStartOfGroupDraggingThroughGroupNode = (
return false;
};


/**
* Solves the situation when we are starting to drag selected node which isn't selected in reactflow, but is selected because it is part of group
* @returns True if there is dragging by not selected node as source. False otherwise
Expand All @@ -873,7 +859,7 @@ const handleGroupDraggingThroughNotSelectedNode = (
selectedNodes: string[],
selectedNodesRef: React.MutableRefObject<string[]>,
): boolean => {
if(!isSelectingThroughCtrl && changes.length === userSelectedNodesRef.current.length + 1 && userSelectedNodesRef.current.length > 0) {
if(!isSelectingThroughCtrl && changes.length === userSelectedNodesRef.current.length + 1 && userSelectedNodesRef.current.length > 0) {
let isPossibleSelectionKeeper: boolean = true;
let newlySelected: NodeSelectionChange | null = null;
for(const change of changes) {
Expand Down Expand Up @@ -1054,7 +1040,6 @@ const removeNotCompleteGroupUnselections = (
});
}


// TODO RadStr: Just debug prints
// console.info("newlyUnselectedNodesBasedOnGroups");
// console.info(newlyUnselectedNodesBasedOnGroups);
Expand All @@ -1066,7 +1051,6 @@ const removeNotCompleteGroupUnselections = (
};
}


const getDataFromChanges = (
changes: NodeChange<NodeType>[],
groups: Record<string, NodeIdentifierWithType[]>,
Expand Down Expand Up @@ -1225,7 +1209,7 @@ const updateChangesByGroupDragEvents = (
// TODO RadStr: Probably can put away the nodesInGroupWhichAreNotPartOfDragging.current.length and directlyDraggedGroup !== null condition
// Alternatively you could just compute the nodesInGroupWhichAreNotPartOfDragging from the user selected and selected nodes here on demand.
const draggedGroups = [...new Set(changes.filter(change => change.type === "position").map(change => findTopLevelGroup(change.id, groups, nodeToGroupMapping))
.concat(nodesInGroupWhichAreNotPartOfDragging.current.map(node => findTopLevelGroup(node, groups, nodeToGroupMapping))).filter(group => group !== null))];
.concat(nodesInGroupWhichAreNotPartOfDragging.current.map(node => findTopLevelGroup(node, groups, nodeToGroupMapping))).filter(group => group !== null))];
// TODO RadStr: Putting away directlyDraggedGroup
// if(nodesInGroupWhichAreNotPartOfDragging.current.length > 0 || directlyDraggedGroup !== null || draggedGroups.length > 0) {
if(draggedGroups.length > 0) {
Expand All @@ -1251,7 +1235,6 @@ const updateChangesByGroupDragEvents = (
positionDifference.x -= sourceNode?.position?.x ?? 0;
positionDifference.y -= sourceNode?.position?.y ?? 0;


// TODO RadStr: Debug prints
// TODO RadStr: Just debug prints
// console.info("positionDifference");
Expand All @@ -1263,10 +1246,9 @@ const updateChangesByGroupDragEvents = (
// console.warn({...nodes.filter(n => n.selected === true)});
// console.info(directlyDraggedGroup);


for(const node of nodes) {
if(!(nodesInGroupWhichAreNotPartOfDragging.current.includes(node.id) ||
// TODO RadStr: Commented code
// TODO RadStr: Commented code
// TODO RadStr: Putting away directlyDraggedGroup
// (directlyDraggedGroup !== null && groups[change.id].includes(node.id)) ||
(isGroup(node.id, groups) && draggedGroups.includes(node.id)))) {
Expand All @@ -1287,7 +1269,6 @@ const updateChangesByGroupDragEvents = (
});
}


// TODO RadStr: Commented code just for now to play with - remove after "final" commit
// setNodes(prevNodes => {
// return prevNodes.map(node => {
Expand Down Expand Up @@ -1341,7 +1322,6 @@ const updateUserSelectedNodesBasedOnNodeChanges = (
return newUserSelectedNodes;
};


const updateSelectedNodesBasedOnNodeChanges = (
previouslySelectedNodes: string[],
newlyUnselectedNodesBasedOnGroups: string[],
Expand Down Expand Up @@ -1378,7 +1358,6 @@ const updateSelectedNodesBasedOnNodeChanges = (
// console.info(applyNodeChanges(changes, nodes).filter(n => n.selected === true));
// }


// TODO RadStr: Old version
// const newSelectedNodes = newUserSelectedNodes.concat(nodesInGroupWhichAreNotPartOfDragging.current);
// selectedNodesRef.current = newSelectedNodes;
Expand All @@ -1392,7 +1371,6 @@ const updateSelectedNodesBasedOnNodeChanges = (
return newSelectedNodes;
};


const updateNodesBasedOnNodeChanges = (
prevNodes: NodeType[],
changes: NodeChange<NodeType>[],
Expand Down Expand Up @@ -1429,7 +1407,6 @@ const updateNodesBasedOnNodeChanges = (
// console.info("!!!CORRECT !!!");
// }


if(Object.entries(groupsNewlyContainedInSelectionChange).length > 0) {
for(const group of Object.keys(groupsNewlyContainedInSelectionChange)) {
const groupNodeIndex = updatedNodes.findIndex(node => node.id === group);
Expand All @@ -1438,8 +1415,6 @@ const updateNodesBasedOnNodeChanges = (
}
updatedNodes[groupNodeIndex] = showGroupNode(updatedNodes[groupNodeIndex], groups, updatedNodes);



// if(updatedNodes.find(node => node.id === group) !== undefined) {
// continue;
// }
Expand Down Expand Up @@ -1529,7 +1504,6 @@ const createEdgesChangeHandler = (
};
};


// // TODO RadStr: If I actually keep it this way then I should definitely at least document it better - when the values are null and when not
/**
* Helper method, sets selected elements based on changes. Elements are either nodes or edges, same for changes -
Expand Down Expand Up @@ -1633,7 +1607,6 @@ const setSelectedBasedOnNewData = (
});
}


const createConnectHandler = () => {
return (_: Connection) => {
// Here we would normally handle creation of a new edge in reaction
Expand Down
Loading

0 comments on commit 25bd09e

Please sign in to comment.