From c1bab0c92a80212b22f336019e66f6d39e47dc02 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 14:41:52 +0100 Subject: [PATCH 1/9] [#131] Add Rectangle and rectangle field in FaultEvent --- src/models/eventModel.tsx | 5 ++++- src/models/utils/Rectangle.tsx | 20 ++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 src/models/utils/Rectangle.tsx diff --git a/src/models/eventModel.tsx b/src/models/eventModel.tsx index 1e355f26..e5724ff1 100644 --- a/src/models/eventModel.tsx +++ b/src/models/eventModel.tsx @@ -1,6 +1,7 @@ import VocabularyUtils from "@utils/VocabularyUtils"; import {AbstractModel, CONTEXT as ABSTRACT_CONTEXT} from "@models/abstractModel"; import {FailureMode, CONTEXT as FAILURE_MODE_CONTEXT} from "@models/failureModeModel"; +import {Rectangle, CONTEXT as RECTANGLE_CONTEXT, PREFIX as DIAGRAM_PREFIX} from "@models/utils/Rectangle"; const ctx = { "name": VocabularyUtils.PREFIX + "hasName", @@ -14,9 +15,10 @@ const ctx = { "failureMode": VocabularyUtils.PREFIX + "hasFailureMode", "sequenceProbability": VocabularyUtils.PREFIX + "hasSequenceProbability", "childrenSequence": VocabularyUtils.PREFIX + "hasChildrenSequence", + "rectangle": DIAGRAM_PREFIX + "has-rectangle", }; -export const CONTEXT = Object.assign({}, ctx, ABSTRACT_CONTEXT, FAILURE_MODE_CONTEXT); +export const CONTEXT = Object.assign({}, ctx, ABSTRACT_CONTEXT, FAILURE_MODE_CONTEXT, RECTANGLE_CONTEXT); export enum EventType { BASIC = "BASIC", @@ -36,6 +38,7 @@ export interface FaultEvent extends AbstractModel { failureMode?: FailureMode, sequenceProbability?: number, childrenSequence?: any, + rectangle?: Rectangle, } export enum GateType { diff --git a/src/models/utils/Rectangle.tsx b/src/models/utils/Rectangle.tsx new file mode 100644 index 00000000..77acf3f9 --- /dev/null +++ b/src/models/utils/Rectangle.tsx @@ -0,0 +1,20 @@ +export const PREFIX = "http://onto.fel.cvut.cz/ontologies/diagram/"; + +const ctx = { + "iri": "@id", + "types": "@type", + "x": PREFIX + "x", + "y": PREFIX + "y", + "width": PREFIX + "width", + "height": PREFIX + "height" +}; + +export const CONTEXT = Object.assign({}, ctx); + +export interface Rectangle { + iri?: string, + x: number, + y: number, + width: number, + height: number +} \ No newline at end of file From 03c9cbb7139295956e8881eff7ed9f8177ca3076 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 14:45:36 +0100 Subject: [PATCH 2/9] [#131] Implement call server api to persist updated fault event rectangle, i.e. position and size --- src/services/faultEventService.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/services/faultEventService.tsx b/src/services/faultEventService.tsx index 2d740f85..41304bed 100644 --- a/src/services/faultEventService.tsx +++ b/src/services/faultEventService.tsx @@ -9,6 +9,7 @@ import {findIndex, flatten, sortBy} from "lodash"; import {CONTEXT as FAILURE_MODE_CONTEXT, FailureMode} from "@models/failureModeModel"; import {handleServerError} from "@services/utils/responseUtils"; import {simplifyReferencesOfReferences} from "@utils/utils"; +import {Rectangle, CONTEXT as RECTANGLE_CONTEXT} from "@models/utils/Rectangle"; export const findAll = async (): Promise => { try { @@ -91,6 +92,26 @@ export const addEvent = async (faultEventIri: string, event: FaultEvent): Promis } } +export const updateEventRectangle = async (faultEventIri: string, rectangleIri: string, rect: Rectangle) :Promise => { + try { + const fragment = extractFragment(faultEventIri); + const updateRequest = Object.assign({}, rect, {"@context": RECTANGLE_CONTEXT}); + + await axiosClient.put( + `/faultEvents/${fragment}/rectangle`, + updateRequest, + { + headers: authHeaders() + } + ) + return new Promise((resolve) => resolve()); + } catch (e) { + console.log('Event Service - Failed to call /updateRectangle') + const defaultMessage = "Failed to update rectangle"; + return new Promise((resolve, reject) => reject(handleServerError(e, defaultMessage))); + } +} + export const eventFromHookFormValues = (values: any): FaultEvent => { let faultEvent if (values.existingEvent) { From ef51a0cb7af085573a5094228870313c8022f2b2 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 14:55:10 +0100 Subject: [PATCH 3/9] [#131] Implement updating and persisting location of fault event node in FTA diagram - listens for release after node drag - call faultEventService.updateEventRectangle if position and size of node are different from rectangle --- src/components/editor/faultTree/Editor.tsx | 18 +++++++++++ .../editor/faultTree/canvas/EditorCanvas.tsx | 32 +++++++++++++++++++ 2 files changed, 50 insertions(+) diff --git a/src/components/editor/faultTree/Editor.tsx b/src/components/editor/faultTree/Editor.tsx index 9feab36a..faf72de6 100644 --- a/src/components/editor/faultTree/Editor.tsx +++ b/src/components/editor/faultTree/Editor.tsx @@ -18,6 +18,7 @@ import {ROUTES} from "@utils/constants"; import {extractFragment} from "@services/utils/uriIdentifierUtils"; import {FTABoundary} from "@components/editor/faultTree/shapes/shapesDefinitions"; import * as joint from "jointjs"; +import {Rectangle} from "@models/utils/Rectangle"; const Editor = ({setAppBarName}: DashboardTitleProps) => { const history = useNavigate(); @@ -79,6 +80,22 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { hideHighlightedBorders(); } + const handleMoveEvent = (elementView, evt) => { + const faultEventIri = elementView.model.get('custom/faultEventIri'); + // @ts-ignore + const movedEvent = findEventByIri(faultEventIri, _localContext.rootEvent); + const rect :Rectangle = movedEvent.rectangle; + const size = elementView.model.attributes.size; + const position = elementView.model.attributes.position; + if(rect.x != position.x || rect.y != position.y || rect.width != size.width || rect.height != size.height) { + rect.x = position.x; + rect.y = position.x; + rect.width = size.width; + rect.height = size.height; + faultEventService.updateEventRectangle(faultEventIri, rect.iri, rect); + } + } + const highlightBorders = (elementView) => { const tools = new joint.dia.ToolsView({ tools: [FTABoundary.factory()] @@ -134,6 +151,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { onElementPointerClick={handleElementPointerClick} onBlankPointerClick={handleBlankPointerClick} onConvertToTable={() => setFailureModesTableOpen(true)} + onNodeMove={handleMoveEvent} setHighlightedElement={setHighlightedElementView} refreshTree={refreshTree} /> diff --git a/src/components/editor/faultTree/canvas/EditorCanvas.tsx b/src/components/editor/faultTree/canvas/EditorCanvas.tsx index 27f38793..d7512df2 100644 --- a/src/components/editor/faultTree/canvas/EditorCanvas.tsx +++ b/src/components/editor/faultTree/canvas/EditorCanvas.tsx @@ -15,6 +15,12 @@ import {SVG_PAN_ZOOM_OPTIONS} from "@utils/constants"; import {saveSvgAsPng} from "save-svg-as-png"; import renderTree from "@components/editor/faultTree/shapes/RenderTree"; +enum MOVE_NODE { + DRAGGING = 0, + RELEASING =1 +} + + interface Props { treeName: string, rootEvent: FaultEvent, @@ -24,6 +30,7 @@ interface Props { onBlankPointerClick: () => void, onEventUpdated: (faultEvent: FaultEvent) => void, onConvertToTable: () => void, + onNodeMove: (element: any, evt: any) => void, refreshTree: () => void, setHighlightedElement: (element: any) => void, } @@ -37,6 +44,7 @@ const EditorCanvas = ({ onBlankPointerClick, onEventUpdated, onConvertToTable, + onNodeMove, refreshTree, setHighlightedElement }: Props) => { @@ -51,6 +59,11 @@ const EditorCanvas = ({ const [currentZoom, setCurrentZoom] = useState(1); const [isExportingImage, setIsExportingImage] = useState(false); + let isDraggingNode = false; + const setIsDraggingNode = (val: boolean) => { + isDraggingNode = val; + } + useEffect(() => { const canvasWidth = containerRef.current.clientWidth; const canvasHeight = containerRef.current.clientHeight; @@ -58,6 +71,7 @@ const EditorCanvas = ({ const graph = new joint.dia.Graph; const divContainer = document.getElementById("jointjs-container"); const paper = new joint.dia.Paper({ + // @ts-ignore el: divContainer, model: graph, @@ -85,6 +99,13 @@ const EditorCanvas = ({ 'element:pointerclick': (elementView, evt) => { onElementPointerClick(elementView, evt) }, + 'element:pointermove': (elementView: joint.dia.ElementView, evt: joint.dia.Event, x: number, y: number) => + { + handleNodeMove(MOVE_NODE.DRAGGING, elementView, evt, x, y); + }, + 'element:pointerup': (elementView: joint.dia.ElementView, evt: joint.dia.Event, x: number, y: number) => { + handleNodeMove(MOVE_NODE.RELEASING, elementView, evt, x, y); + }, 'blank:pointerclick': () => onBlankPointerClick(), 'blank:pointerdown': () => diagramZoom.enablePan(), 'blank:pointerup': () => diagramZoom.disablePan(), @@ -94,6 +115,17 @@ const EditorCanvas = ({ setJointPaper(paper); }, []); + const handleNodeMove = (move: MOVE_NODE, elementView: joint.dia.ElementView, evt: joint.dia.Event, x: number, y: number) => { + if(!isDraggingNode && move === MOVE_NODE.DRAGGING){ + setIsDraggingNode(true); + return; + } + if(isDraggingNode && move === MOVE_NODE.RELEASING) { + onNodeMove(elementView, evt); + setIsDraggingNode(false); + } + } + useEffect(() => { if (isExportingImage) { const svgPaper = document.querySelector('#jointjs-container > svg'); From ec80df9296e7967dbb8fae08347b422325e18667 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 22:49:59 +0100 Subject: [PATCH 4/9] [Refactor] Use constant JOINTJS_NODE_MODEL.faultEventIri instead of string 'custom/faultEventIri' when setting and getting IRI of fault event from jointjs element model. --- src/components/editor/faultTree/Editor.tsx | 7 ++++--- src/components/editor/faultTree/canvas/EditorCanvas.tsx | 3 ++- src/components/editor/faultTree/shapes/FaultEventShape.tsx | 3 ++- src/components/editor/faultTree/shapes/RenderTree.tsx | 3 ++- src/components/editor/faultTree/shapes/constants.tsx | 3 +++ 5 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 src/components/editor/faultTree/shapes/constants.tsx diff --git a/src/components/editor/faultTree/Editor.tsx b/src/components/editor/faultTree/Editor.tsx index faf72de6..05e6e7df 100644 --- a/src/components/editor/faultTree/Editor.tsx +++ b/src/components/editor/faultTree/Editor.tsx @@ -19,6 +19,7 @@ import {extractFragment} from "@services/utils/uriIdentifierUtils"; import {FTABoundary} from "@components/editor/faultTree/shapes/shapesDefinitions"; import * as joint from "jointjs"; import {Rectangle} from "@models/utils/Rectangle"; +import {JOINTJS_NODE_MODEL} from "@components/editor/faultTree/shapes/constants"; const Editor = ({setAppBarName}: DashboardTitleProps) => { const history = useNavigate(); @@ -59,7 +60,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { const [contextMenuAnchor, setContextMenuAnchor] = useState(contextMenuDefaultAnchor) const handleContextMenu = (elementView, evt) => { - const elementIri = elementView.model.get('custom/faultEventIri'); + const elementIri = elementView.model.get(JOINTJS_NODE_MODEL.faultEventIri); // @ts-ignore const foundEvent = findEventByIri(elementIri, _localContext.rootEvent); setContextMenuSelectedEvent(foundEvent); @@ -67,7 +68,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { } const handleElementPointerClick = (elementView) => { - const elementIri = elementView.model.get('custom/faultEventIri'); + const elementIri = elementView.model.get(JOINTJS_NODE_MODEL.faultEventIri); // @ts-ignore const foundEvent = findEventByIri(elementIri, _localContext.rootEvent); @@ -81,7 +82,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { } const handleMoveEvent = (elementView, evt) => { - const faultEventIri = elementView.model.get('custom/faultEventIri'); + const faultEventIri = elementView.model.get(JOINTJS_NODE_MODEL.faultEventIri); // @ts-ignore const movedEvent = findEventByIri(faultEventIri, _localContext.rootEvent); const rect :Rectangle = movedEvent.rectangle; diff --git a/src/components/editor/faultTree/canvas/EditorCanvas.tsx b/src/components/editor/faultTree/canvas/EditorCanvas.tsx index d7512df2..1a1b944a 100644 --- a/src/components/editor/faultTree/canvas/EditorCanvas.tsx +++ b/src/components/editor/faultTree/canvas/EditorCanvas.tsx @@ -14,6 +14,7 @@ import * as svgPanZoom from "svg-pan-zoom"; import {SVG_PAN_ZOOM_OPTIONS} from "@utils/constants"; import {saveSvgAsPng} from "save-svg-as-png"; import renderTree from "@components/editor/faultTree/shapes/RenderTree"; +import {JOINTJS_NODE_MODEL} from "@components/editor/faultTree/shapes/constants"; enum MOVE_NODE { DRAGGING = 0, @@ -150,7 +151,7 @@ const EditorCanvas = ({ const autoLayoutElements = []; const manualLayoutElements = []; graph.getElements().forEach((el) => { - const faultEventIri = el.get('custom/faultEventIri'); + const faultEventIri = el.get(JOINTJS_NODE_MODEL.faultEventIri); if(faultEventIri && faultEventIri === sidebarSelectedEvent?.iri) { const elementView = el.findView(jointPaper); setHighlightedElement(elementView) diff --git a/src/components/editor/faultTree/shapes/FaultEventShape.tsx b/src/components/editor/faultTree/shapes/FaultEventShape.tsx index b64e856a..30e203b1 100644 --- a/src/components/editor/faultTree/shapes/FaultEventShape.tsx +++ b/src/components/editor/faultTree/shapes/FaultEventShape.tsx @@ -8,6 +8,7 @@ import {createShape} from "@services/jointService"; import {sequenceListToArray} from "@services/faultEventService"; import * as faultEventService from "@services/faultEventService"; import {has} from "lodash"; +import {JOINTJS_NODE_MODEL} from "@components/editor/faultTree/shapes/constants"; const FaultEventShape = ({addSelf, treeEvent, parentShape}: JointEventShapeProps) => { const [currentShape, setCurrentShape] = useState(undefined) @@ -28,7 +29,7 @@ const FaultEventShape = ({addSelf, treeEvent, parentShape}: JointEventShapeProps } // @ts-ignore - eventShape.set('custom/faultEventIri', treeEvent.iri) + eventShape.set(JOINTJS_NODE_MODEL.faultEventIri, treeEvent.iri) setCurrentShape(eventShape) diff --git a/src/components/editor/faultTree/shapes/RenderTree.tsx b/src/components/editor/faultTree/shapes/RenderTree.tsx index 30d93546..eacbdc80 100644 --- a/src/components/editor/faultTree/shapes/RenderTree.tsx +++ b/src/components/editor/faultTree/shapes/RenderTree.tsx @@ -5,6 +5,7 @@ import * as faultEventService from "../../../../services/faultEventService"; import {Link} from "./shapesDefinitions"; import {flatten} from "lodash"; import {has} from "lodash"; +import {JOINTJS_NODE_MODEL} from "@components/editor/faultTree/shapes/constants"; const renderLink = (container, source, target) => { // @ts-ignore @@ -26,7 +27,7 @@ const renderTree = (container, node, parentShape = null) => { nodeShape.attr(['probabilityLabel', 'text'], node.probability.toExponential(2)); } // @ts-ignore - nodeShape.set('custom/faultEventIri', node.iri) + nodeShape.set(JOINTJS_NODE_MODEL.faultEventIri, node.iri) // Render link if(parentShape){ diff --git a/src/components/editor/faultTree/shapes/constants.tsx b/src/components/editor/faultTree/shapes/constants.tsx new file mode 100644 index 00000000..296d1637 --- /dev/null +++ b/src/components/editor/faultTree/shapes/constants.tsx @@ -0,0 +1,3 @@ +export const JOINTJS_NODE_MODEL = { + faultEventIri: 'custom/faultEventIri' +} \ No newline at end of file From 20a946a510c15747a9b0648445fabb927d88376b Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 23:35:20 +0100 Subject: [PATCH 5/9] [Update] x, y, with and height properties in Rectangle are optional. --- src/models/utils/Rectangle.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/models/utils/Rectangle.tsx b/src/models/utils/Rectangle.tsx index 77acf3f9..d8d507ff 100644 --- a/src/models/utils/Rectangle.tsx +++ b/src/models/utils/Rectangle.tsx @@ -13,8 +13,8 @@ export const CONTEXT = Object.assign({}, ctx); export interface Rectangle { iri?: string, - x: number, - y: number, - width: number, - height: number + x?: number, + y?: number, + width?: number, + height?: number } \ No newline at end of file From 90b3d4aeaeb0ecb3b666fcd6a02ac29b2ec7c58a Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 23:37:00 +0100 Subject: [PATCH 6/9] [Fix] Fix typo when updating rectangle of FaultEvent --- src/components/editor/faultTree/Editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/editor/faultTree/Editor.tsx b/src/components/editor/faultTree/Editor.tsx index 05e6e7df..6a961371 100644 --- a/src/components/editor/faultTree/Editor.tsx +++ b/src/components/editor/faultTree/Editor.tsx @@ -90,7 +90,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { const position = elementView.model.attributes.position; if(rect.x != position.x || rect.y != position.y || rect.width != size.width || rect.height != size.height) { rect.x = position.x; - rect.y = position.x; + rect.y = position.y; rect.width = size.width; rect.height = size.height; faultEventService.updateEventRectangle(faultEventIri, rect.iri, rect); From 441e2b5ae8bd5c418577213e29a6ff5013ada4ef Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Thu, 4 Jan 2024 23:42:30 +0100 Subject: [PATCH 7/9] [#131] In FTA diagram layout fault events according to persisted location if present, use automated layout otherwise --- src/components/editor/faultTree/canvas/EditorCanvas.tsx | 2 +- src/components/editor/faultTree/shapes/RenderTree.tsx | 7 ++++++- src/components/editor/faultTree/shapes/constants.tsx | 3 ++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/editor/faultTree/canvas/EditorCanvas.tsx b/src/components/editor/faultTree/canvas/EditorCanvas.tsx index 1a1b944a..b612f052 100644 --- a/src/components/editor/faultTree/canvas/EditorCanvas.tsx +++ b/src/components/editor/faultTree/canvas/EditorCanvas.tsx @@ -159,7 +159,7 @@ const EditorCanvas = ({ if (el.get('type') === 'fta.ConditioningEvent') { manualLayoutElements.push(el); - } else { + } else if(!el.get(JOINTJS_NODE_MODEL.hasPersistentPosition)) { autoLayoutElements.push(el); } }); diff --git a/src/components/editor/faultTree/shapes/RenderTree.tsx b/src/components/editor/faultTree/shapes/RenderTree.tsx index eacbdc80..9b0e43c3 100644 --- a/src/components/editor/faultTree/shapes/RenderTree.tsx +++ b/src/components/editor/faultTree/shapes/RenderTree.tsx @@ -28,7 +28,12 @@ const renderTree = (container, node, parentShape = null) => { } // @ts-ignore nodeShape.set(JOINTJS_NODE_MODEL.faultEventIri, node.iri) - + const r = node.rectangle; + if(r && r.x && r.y && r.width && r.height){ + nodeShape.position(node.rectangle.x, node.rectangle.y); + // @ts-ignore + nodeShape.set(JOINTJS_NODE_MODEL.hasPersistentPosition, true); + } // Render link if(parentShape){ renderLink(container, parentShape, nodeShape) diff --git a/src/components/editor/faultTree/shapes/constants.tsx b/src/components/editor/faultTree/shapes/constants.tsx index 296d1637..ce80c833 100644 --- a/src/components/editor/faultTree/shapes/constants.tsx +++ b/src/components/editor/faultTree/shapes/constants.tsx @@ -1,3 +1,4 @@ export const JOINTJS_NODE_MODEL = { - faultEventIri: 'custom/faultEventIri' + faultEventIri: 'custom/faultEventIri', + hasPersistentPosition: 'custom/has-persistent-position' } \ No newline at end of file From d42f842a3274c7f3cfeab9cab59eaba1985613a8 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Sat, 13 Jan 2024 13:33:52 +0100 Subject: [PATCH 8/9] [#131] Fix, element position is persisted only if position has changed. --- .../editor/faultTree/canvas/EditorCanvas.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/editor/faultTree/canvas/EditorCanvas.tsx b/src/components/editor/faultTree/canvas/EditorCanvas.tsx index b612f052..bcc15d1c 100644 --- a/src/components/editor/faultTree/canvas/EditorCanvas.tsx +++ b/src/components/editor/faultTree/canvas/EditorCanvas.tsx @@ -60,10 +60,7 @@ const EditorCanvas = ({ const [currentZoom, setCurrentZoom] = useState(1); const [isExportingImage, setIsExportingImage] = useState(false); - let isDraggingNode = false; - const setIsDraggingNode = (val: boolean) => { - isDraggingNode = val; - } + let dragStartPosition = null; useEffect(() => { const canvasWidth = containerRef.current.clientWidth; @@ -117,13 +114,11 @@ const EditorCanvas = ({ }, []); const handleNodeMove = (move: MOVE_NODE, elementView: joint.dia.ElementView, evt: joint.dia.Event, x: number, y: number) => { - if(!isDraggingNode && move === MOVE_NODE.DRAGGING){ - setIsDraggingNode(true); - return; - } - if(isDraggingNode && move === MOVE_NODE.RELEASING) { + if(!dragStartPosition && move === MOVE_NODE.DRAGGING) + dragStartPosition = [x, y]; + else if(dragStartPosition && (dragStartPosition[0] != x || dragStartPosition[1] != y) && move === MOVE_NODE.RELEASING){ + dragStartPosition = null; onNodeMove(elementView, evt); - setIsDraggingNode(false); } } From b528f786e0d9ac68b007093a3654de01bfa2ea65 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Tue, 16 Jan 2024 15:00:03 +0100 Subject: [PATCH 9/9] [Refactor] Remove @ts-ignore comments - remove @ts-ignore comments which did not cause compilation error, - reduce @ts-ignore comments in system and fault tree Editors. Encapsulate @ts-ignore comments getter methods and refactor @ts-ignore comment lines to use the getters --- src/components/editor/faultTree/Editor.tsx | 24 ++++++++++++------- .../editor/faultTree/canvas/EditorCanvas.tsx | 2 -- src/components/editor/system/Editor.tsx | 19 ++++++++++----- .../editor/system/canvas/EditorCanvas.tsx | 2 -- .../menu/component/ComponentEditMenu.tsx | 1 - .../menu/function/ComponentFunctionsList.tsx | 1 - 6 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/editor/faultTree/Editor.tsx b/src/components/editor/faultTree/Editor.tsx index 6a961371..30094df9 100644 --- a/src/components/editor/faultTree/Editor.tsx +++ b/src/components/editor/faultTree/Editor.tsx @@ -32,6 +32,16 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { const [highlightedElementView, setHighlightedElementView] = useState(null) const _localContext = useLocalContext({rootEvent: rootEvent, highlightedElementView: highlightedElementView}) + const getRootEvent = () : FaultEvent => { + // @ts-ignore + return _localContext.rootEvent; + } + + const getHighlightedElementView = () => { + // @ts-ignore + return _localContext.highlightedElementView + } + useEffect(() => { if (faultTree) { setAppBarName(faultTree.name) @@ -61,16 +71,15 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { const [contextMenuAnchor, setContextMenuAnchor] = useState(contextMenuDefaultAnchor) const handleContextMenu = (elementView, evt) => { const elementIri = elementView.model.get(JOINTJS_NODE_MODEL.faultEventIri); - // @ts-ignore - const foundEvent = findEventByIri(elementIri, _localContext.rootEvent); + + const foundEvent = findEventByIri(elementIri, getRootEvent()); setContextMenuSelectedEvent(foundEvent); setContextMenuAnchor({mouseX: evt.pageX, mouseY: evt.pageY,}) } const handleElementPointerClick = (elementView) => { const elementIri = elementView.model.get(JOINTJS_NODE_MODEL.faultEventIri); - // @ts-ignore - const foundEvent = findEventByIri(elementIri, _localContext.rootEvent); + const foundEvent = findEventByIri(elementIri, getRootEvent()); setSidebarSelectedEvent(foundEvent); setHighlightedElementView(elementView); @@ -83,8 +92,8 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { const handleMoveEvent = (elementView, evt) => { const faultEventIri = elementView.model.get(JOINTJS_NODE_MODEL.faultEventIri); - // @ts-ignore - const movedEvent = findEventByIri(faultEventIri, _localContext.rootEvent); + + const movedEvent = findEventByIri(faultEventIri, getRootEvent()); const rect :Rectangle = movedEvent.rectangle; const size = elementView.model.attributes.size; const position = elementView.model.attributes.position; @@ -104,8 +113,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { elementView.addTools(tools); } const hideHighlightedBorders = () => { - // @ts-ignore - _localContext.highlightedElementView?.removeTools(); + getHighlightedElementView()?.removeTools(); setHighlightedElementView(null); } diff --git a/src/components/editor/faultTree/canvas/EditorCanvas.tsx b/src/components/editor/faultTree/canvas/EditorCanvas.tsx index bcc15d1c..2aec953a 100644 --- a/src/components/editor/faultTree/canvas/EditorCanvas.tsx +++ b/src/components/editor/faultTree/canvas/EditorCanvas.tsx @@ -70,7 +70,6 @@ const EditorCanvas = ({ const divContainer = document.getElementById("jointjs-container"); const paper = new joint.dia.Paper({ - // @ts-ignore el: divContainer, model: graph, width: canvasWidth, @@ -89,7 +88,6 @@ const EditorCanvas = ({ }); setSvgZoom(diagramZoom); - // @ts-ignore paper.on({ 'element:contextmenu': (elementView, evt) => { onElementContextMenu(elementView, evt) diff --git a/src/components/editor/system/Editor.tsx b/src/components/editor/system/Editor.tsx index 70f442fb..68c8b452 100644 --- a/src/components/editor/system/Editor.tsx +++ b/src/components/editor/system/Editor.tsx @@ -45,11 +45,20 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { setContextMenuAnchor({mouseX: evt.pageX, mouseY: evt.pageY,}) } + const getSystem = () => { + // @ts-ignore + return _localContext.system; + } + + const getHighlightedElementView = () => { + // @ts-ignore + return _localContext.highlightedElementView + } + const handleContextMenu = (elementView, evt) => { const componentIri = elementView.model.get('custom/componentIri'); - // @ts-ignore - const flattenedComponents = flatten([_localContext.system.components]); + const flattenedComponents = flatten([getSystem().components]); const index = findIndex(flattenedComponents, el => el.iri === componentIri); if (index > -1) { setContextMenuSelectedComponent(flattenedComponents[index]); @@ -60,8 +69,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { const handleElementPointerClick = (elementView) => { const componentIri = elementView.model.get('custom/componentIri'); - // @ts-ignore - const flattenedComponents = flatten([_localContext.system.components]); + const flattenedComponents = flatten([getSystem().components]); const index = findIndex(flattenedComponents, el => el.iri === componentIri); if (index > -1) { setSidebarSelectedComponent(flattenedComponents[index]); @@ -82,8 +90,7 @@ const Editor = ({setAppBarName}: DashboardTitleProps) => { elementView.addTools(tools); } const hideHighlightedBorders = () => { - // @ts-ignore - _localContext.highlightedElementView?.removeTools(); + getHighlightedElementView()?.removeTools(); setHighlightedElementView(null); } diff --git a/src/components/editor/system/canvas/EditorCanvas.tsx b/src/components/editor/system/canvas/EditorCanvas.tsx index c4bcfe47..332ff7a8 100644 --- a/src/components/editor/system/canvas/EditorCanvas.tsx +++ b/src/components/editor/system/canvas/EditorCanvas.tsx @@ -55,7 +55,6 @@ const EditorCanvas = ({ const graph = new joint.dia.Graph; const divContainer = document.getElementById("jointjs-system-container"); const paper = new joint.dia.Paper({ - // @ts-ignore el: divContainer, model: graph, width: canvasWidth, @@ -73,7 +72,6 @@ const EditorCanvas = ({ }); setSvgZoom(diagramZoom); - // @ts-ignore paper.on({ 'blank:contextmenu': (evt) => { onBlankContextMenu(evt); diff --git a/src/components/editor/system/menu/component/ComponentEditMenu.tsx b/src/components/editor/system/menu/component/ComponentEditMenu.tsx index 9416d0a0..cd854df8 100644 --- a/src/components/editor/system/menu/component/ComponentEditMenu.tsx +++ b/src/components/editor/system/menu/component/ComponentEditMenu.tsx @@ -38,7 +38,6 @@ const ComponentEditMenu = ({component, onComponentUpdated}: Props) => { useEffect(() => { - // @ts-ignore reset(defaultValues) }, [component]) diff --git a/src/components/editor/system/menu/function/ComponentFunctionsList.tsx b/src/components/editor/system/menu/function/ComponentFunctionsList.tsx index 797e9041..4384d68a 100644 --- a/src/components/editor/system/menu/function/ComponentFunctionsList.tsx +++ b/src/components/editor/system/menu/function/ComponentFunctionsList.tsx @@ -148,7 +148,6 @@ const ComponentFunctionsList = ({ component }) => { }) } - // @ts-ignore return (