Sequence Diagram

[Srinivasa Reddy]

Hi Team,

integrated the sequence diagram in to angular diagram was loaded successfully,

Issue 1: when i tried to move the position of the Role Shape  that shape was going to zero position as attachment one.
issue 2: i added the context menu for the adding  Role shape after clicking on the add item it able adding can i draw link for them and delete them automatically like data mapping/flow chart.

if any drag and drop added sequence diagram demo available it would helpfull to me.

 

Thanks in-advance.

[Roman Bruckner]

Hi,

Issue 1: when i tried to move the position of the Role Shape  that shape was going to zero position as attachment one.

How did you change the position?

It's a JointJS demo, can you create a JS fiddle that demonstrates the issue?

issue 2: i added the context menu for the adding  Role shape after clicking on the add item it able adding can i draw link for them and delete them automatically like data mapping/flow chart,

I'm sorry I am not sure I understand. If you are asking whether you can add elements and links programmatically to the graph, then yes, you can.

Thank you,

Roman

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/4ac73cf2-9d1b-43d9-8f52-1fe40a2c4c91n%40googlegroups.com.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[Srinivasa Reddy]

Issue1: In JS When i moved the role shape(Browser,Web server,Database Server) they are getting the moved but where i changed the JS into angular service implementation diagram was presenting properly but when i moved the shapes they are not moving to the place where i dropped .
Error: <g> attribute transform: Expected number, "translate(NaN,20)".

index.mjs:1259 Error: <path> attribute d: Expected number, "M NaN NaN L NaN 52…".
Error: <path> attribute d: Expected number, "M NaN NaN L NaN 52…".
index.mjs:1259 Error: <path> attribute d: Expected number, "M NaN 525 L 0 0".
index.mjs:1259 Error: <path> attribute d: Expected number, "M NaN 525 L 0 0".
Error: <g> attribute transform: Expected number, "matrix(1,0,0,1,NaN,0)".
Please find the below attachment.
Issue2:Not programmatically  via drag and drop and with user interaction . let take simple flow chart in Rappid there i can drag the shape and connect to another shape right like wise any implementation of the sequence diagram with drag and drop like when i can drag the Role group with in it dropping Role and draw line  and adding the message with User interaction.Rappid adding any of drag and drop or User interacting operation like bpmn,simple flow chart and data mapping.

Thanks 

[Roman Bruckner]

1. How do you move the element? By mouse? What if you add just a rectangle to the graph? Can you see the same issue?

graph.addCell(new shapes.standard.Rectangle({ position: { x: 100, y: 100 }, size: { width: 100, height: 100 }}));

It seems that for a reason, one of your elements has an undefined/NaN position. e.g. element.get('position') === { x: NaN, y: 0 }

2. 

a) You can use `magnet` attribute (https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#dia.attributes.magnet)

An example here: https://resources.jointjs.com/demos/rough

b) You can use `ui.Halo` plugin (https://resources.jointjs.com/docs/rappid/v3.3/ui.html#ui.Halo) and its linking tool

c) You can make the Roles non-interactive/non-draggable and listen to element:pointerdown, element:pointermove and element:pointerup and draw an SVG line (https://jsfiddle.net/kumilingus/dxgp6sLr/)

  

After that, you would remove the link (or svg line) and add the actual Message link between 2 links programmatically.

Best,

Roman

To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/fdba637e-56dd-4478-a4ef-4b47540c8a36n%40googlegroups.com.

[Srinivasa Reddy]

Hi ,
1)in the sequence Diagram from one Lifeline link to another lifeline link i need to draw a life span link with GUI (not in programming) how can i enable it 

2)On lifespan link there is a feature to add message how can i do it with the help of the GUI
3) Can i connect the other role or role group to the lifeline link 
4) Current life line link having the one side arrow i need to have both side arrow link and how can vary or draw differently GUI

5)what was the event for context menu on paper/graph 

Please find the below link of code base.it wont run because it dont having the rappid package installed in it.you can just keep service file and app component into working rappid app it will work.
https://stackblitz.com/edit/angular-ivy-nqdk33

Thanks in-Advance.

[Srinivasa Reddy]

Hi Team,

How can i draw a lifespan (message and link) from the life line link (the horizontal connection) with GUI like pointer click.
How can we edit/add the message as well when ever i dragged the line .

lifeline1 &  lifeline2 are the links from the shape.

 var message1 = new joint.shapes['sd'].Message();

    message1.setFromTo(lifeline1, lifeline2);

    message1.setStart(50);

    message1.setDescription('HTTP GET Request');

    message1.addTo(this.graph);

Please check previous questions .
Thanks in-advance .

[Roman Bruckner]

Hi,

the sequence demo as it is requires only jointjs - so you can make the stackblitz demo work with open source JointJS only.

How can i draw a lifespan (message and link) from the life line link (the horizontal connection) with GUI like pointer click.

You can listen to various paper events and attach arbitrary actions to them (https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#dia.Paper.events).

There is no built-in feature that would do it out-of-the-box.

Here I will repeat myself. I think you should consider using the 3rd option c). but listen to `link:pointerdown`, `link:pointermove` and `link:pointerup` and implement the application logic you want.

a) You can use `magnet` attribute (https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#dia.attributes.magnet)

An example here: https://resources.jointjs.com/demos/rough

b) You can use `ui.Halo` plugin (https://resources.jointjs.com/docs/rappid/v3.3/ui.html#ui.Halo) and its linking tool

c) You can make the Roles non-interactive/non-draggable and listen to element:pointerdown, element:pointermove and element:pointerup and draw an SVG line (https://jsfiddle.net/kumilingus/dxgp6sLr/)  

After that, you would remove the link (or svg line) and add the actual Message link between 2 links programmatically.

You can check `paper.findView(evt.target)` to see what view is currently under the cursor so you know if a message or lifespan should be created.

Best,

Roman

To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/449479e8-f371-49ed-9b0e-4b9f3a62e7a5n%40googlegroups.com.

[Srinivasa Reddy]

Hi Roman,
Thanks for reply , i went to your implementation of drawing line but here is my issue which im facing 

1) In Sequence Diagram i had a two roles(Shapes) which had a lifelines ,my requirement is to connection between two life lines with message

for static we are doing like below

var message1 = new joint.shapes['sd'].Message();

    message1.setFromTo(lifeline1, lifeline2);

    message1.setStart(50);

    message1.setDescription('HTTP GET Request');

    message1.addTo(this.graph);


As per your jsfiddle implementation  and i implemented the as below code ,

 this.paper.on('link:pointerdown': function (linkView) {

        evt.data = linkView;
 });

this.paper.on('link:pointerup': function (linkView) {

    var message1 = new joint.shapes['sd'].Message(); 

    message1.setFromTo( evt.data  ,  linkView  );

    message1.setStart(50);

    message1.setDescription('HTTP GET Request');

    message1.addTo(this.graph);

 });

but the above code was not really helping out for draw a line between two life line.
Can you help me out where i made a wrong approach.

2) how can i get the scope of the Shape and update the text of shape from 'elementView'

this.paper.on('element:pointerdblclick', function (elementView, evt, magnet) {

       elementView. --> Any property to update the Its text 

  });
elementview was giving the complete shape but when to which property i need to update the text .

Thanks in-advance.

 

[Roman Bruckner]

Hi,

The `linkView`  below is the link view the user clicks on.

this.paper.on('link:pointerdown': function (linkView) {

        evt.data = linkView;
 });

What you need to do is to search on `link:pointermove` what linkView is under the cursor.

this.paper.on('link:pointermove': function (linkView, evt, x, y) {

        evt.data = findTheLinkViewUnderTheCursorIfAny(evt);
 });

You can inspire in the demo below (drop elements onto links). When an element is being dragged and a link view is under the cursor, it is highlighted.

https://jsfiddle.net/kumilingus/ypc9uwjs/

Best,

Roman

To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/e61a47ff-e1bb-44ec-930c-dacd6a82039bn%40googlegroups.com.