(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › Remove links between table nodes
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Remove links between table nodes (Read 2053 times)
Alex_H
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: Apr 19th, 2018
Remove links between table nodes
Apr 19th, 2018 at 3:50pm
Print Post  
Hi,

Edit: I am using Diagram Library for JavaScript and TypeScript 3.2.1

I am trying to add some validation in my diagram which consists of TableNodes.

I want to allow links to start at the right most column of the TableNode but they should always end at the first table node column (0). See example attachment.

I got the first part running - not allowing to start links at column 0 of the TableNode. I simply cancel the user action if the starting point is column 0 of the TableNode.

Code
Select All
onLinkCreating(sender: any, args: MindFusion.Diagramming.LinkEventArgs) {

    // origin must be a out connector (x > 0)
    if (args.link.originConnection.anchorPointDetails.location.x === 0) {
      // remove link / cancel action
      args.setCancel(true);
      args.cancelDrag();
    }
}


The same doesnt work with the destinationConnection. So I tried to delete the link after it was created like so:

Code
Select All
onLinkCreated(sender: any, args: MindFusion.Diagramming.LinkEventArgs) {

    this.sDiagram.removeItem(args.getLink());
}


This however is messing up the entire diagram visuals. And I get numerous exceptions. removeItem() is the function to be called when trying to remove something from the diagram afaik.

Any suggestions?

core.js:1448 ERROR TypeError: Cannot read property 'getShadowOffsetX' of null
at mdiag.DiagramLink.getShadowOffsetX (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:124301)
at mdiag.DiagramLink.createShadow (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:124809)
at Object.createElements (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:439989)
at Object.createElements (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:440748)
at mdiag.DiagramLink.updateCanvasElements (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:416215)
at mdraw.Container.draw (eval at <anonymous> (scripts.bundle.js:4), <anonymous>:1:61685)
at mdiag.CreateLinkController.drawInteraction (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:185588)
at mdiag.Diagram.repaint (eval at <anonymous> (scripts.bundle.js:4), <anonymous>:1:43335)
at mdiag.Diagram.updateCanvasSize (eval at <anonymous> (scripts.bundle.js:4), <anonymous>:1:50611)
at mdiag.Diagram.setBounds (eval at <anonymous> (scripts.bundle.js:4), <anonymous>:1:40820)
defaultErrorLogger @ core.js:1448
ErrorHandler.handleError @ core.js:1509
next @ core.js:5497
schedulerFn @ core.js:4331
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4311
(anonymous) @ core.js:4771
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4697
onHandleError @ core.js:4771
ZoneDelegate.handleError @ zone.js:392
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
core.js:1448 ERROR TypeError: Cannot read property 'getNodeAt' of null
at mdiag.DiagramLink.updateTargetConnection (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:396546)
at mdiag.DiagramLink.updateDrag (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:394132)
at mdiag.CreateLinkController.move (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:185105)
at mdiag.MouseInputDispatcher.onMouseMove (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:216019)
at mdiag.MouseEventHandler.onMouseMove (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:213567)
at HTMLCanvasElement.i (scripts.bundle.js:2)
at HTMLCanvasElement.dispatch (scripts.bundle.js:2)
at HTMLCanvasElement.y.handle (scripts.bundle.js:2)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
defaultErrorLogger @ core.js:1448
ErrorHandler.handleError @ core.js:1509
next @ core.js:5497
schedulerFn @ core.js:4331
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4311
(anonymous) @ core.js:4771
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4697
onHandleError @ core.js:4771
ZoneDelegate.handleError @ zone.js:392
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
core.js:1448 ERROR TypeError: Cannot read property 'getShadowOffsetX' of null
at mdiag.DiagramLink.getShadowOffsetX (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:124301)
at mdiag.DiagramLink.createShadow (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:124809)
at Object.createElements (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:439989)
at Object.createElements (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:440748)
at mdiag.DiagramLink.updateCanvasElements (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:416215)
at mdraw.Container.draw (eval at <anonymous> (scripts.bundle.js:4), <anonymous>:1:61685)
at mdiag.CreateLinkController.drawInteraction (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:185588)
at mdiag.Diagram.repaint (eval at <anonymous> (scripts.bundle.js:4), <anonymous>:1:43335)
at i (scripts.bundle.js:2)
at ZoneDelegate.invokeTask (zone.js:421)
defaultErrorLogger @ core.js:1448
ErrorHandler.handleError @ core.js:1509
next @ core.js:5497
schedulerFn @ core.js:4331
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4311
(anonymous) @ core.js:4771
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4697
onHandleError @ core.js:4771
ZoneDelegate.handleError @ zone.js:392
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
invalidate @ VM86259:1
invalidate @ VM86390:1
callBaseMethod @ VM86259:1
invalidate @ VM86390:1
updateFromPoints @ VM86390:1
arrangePoints @ VM86390:1
endDrag @ VM86390:1
commit @ VM86390:1
onMouseUp @ VM86390:1
onMouseUp @ VM86390:1
i @ scripts.bundle.js:2
dispatch @ scripts.bundle.js:2
y.handle @ scripts.bundle.js:2
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4740
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
49core.js:1448 ERROR TypeError: Cannot read property 'getNodeAt' of null
at mdiag.DiagramLink.updateTargetConnection (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:396546)
at mdiag.DiagramLink.updateDrag (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:394132)
at mdiag.CreateLinkController.move (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:185105)
at mdiag.MouseInputDispatcher.onMouseMove (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:216019)
at mdiag.MouseEventHandler.onMouseMove (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:213567)
at HTMLCanvasElement.i (scripts.bundle.js:2)
at HTMLCanvasElement.dispatch (scripts.bundle.js:2)
at HTMLCanvasElement.y.handle (scripts.bundle.js:2)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
defaultErrorLogger @ core.js:1448
ErrorHandler.handleError @ core.js:1509
next @ core.js:5497
schedulerFn @ core.js:4331
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4311
(anonymous) @ core.js:4771
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4697
onHandleError @ core.js:4771
ZoneDelegate.handleError @ zone.js:392
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
7core.js:1448 ERROR TypeError: Cannot read property 'getNodeAt' of null
at mdiag.DiagramLink.updateTargetConnection (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:396546)
at mdiag.DiagramLink.updateDrag (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:394132)
at mdiag.CreateLinkController.move (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:185105)
at mdiag.Diagram.onAutoScroll (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:297365)
at mdiag.Diagram.checkAutoScroll (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:296558)
at mdiag.MouseInputDispatcher.onMouseMove (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:215971)
at mdiag.MouseEventHandler.onMouseMove (eval at <anonymous> (MindFusion.Diagramming.js:1), <anonymous>:1:213567)
at HTMLCanvasElement.i (scripts.bundle.js:2)
at HTMLCanvasElement.dispatch (scripts.bundle.js:2)
at HTMLCanvasElement.y.handle (scripts.bundle.js:2)
  
example_allowed.PNG ( 11 KB | 94 Downloads )
example_allowed.PNG
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Remove links between table nodes
Reply #1 - Apr 20th, 2018 at 9:04am
Print Post  
Hello,

You can modify your linkCreating handler to check also for the target connection and if it lies on the left border of the target table node:

Code (Javascript)
Select All
if (args.link.originConnection.anchorPointDetails.location.x === 0)
{
    args.setCancel(true);
    args.cancelDrag();
    return;
}

if (args.link.targetConnection && args.link.targetConnection.anchorPointDetails.location.x !== 0)
{
    args.setCancel(true);
}


regards,
Lyubo
  
Back to top
 
IP Logged
 
Alex_H
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: Apr 19th, 2018
Re: Remove links between table nodes
Reply #2 - Apr 20th, 2018 at 3:04pm
Print Post  
Thanks, your solution worked. Wink

I still find it very odd that I cant call undo(), removeItem() etc. from within the linkCreated Event without errors.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Remove links between table nodes
Reply #3 - Aug 1st, 2018 at 9:27am
Print Post  
Calling undo or removeItem from linkCreated handler should work here -
https://mindfusion.eu/_beta/jsdiag322.zip

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge