archi-scripting-plugin icon indicating copy to clipboard operation
archi-scripting-plugin copied to clipboard

Feature request: add methods to change z-order of visual objects

Open jmattsso opened this issue 4 years ago • 4 comments
trafficstars

I have created some scripts that update diagrams based on changes in the model. I ran into a situation where a newly added group would cover model elements previously added to the diagram. It seems the latest added visual object is currently always added on the top. If I want something else, I'll have to manually change the z-ordering in the diagram using Archi ui.

Feature request is to add methods "sendToBack" and "bringToFront" for visual objects in jArchi. This would be enough to cover the use cases I can currently imagine.

jmattsso avatar Aug 03 '21 09:08 jmattsso

Added to the "to do" list for investigation.

Phillipus avatar Aug 03 '21 09:08 Phillipus

Hi Phil, I've experienced something similar. I often use nested Notes as visual indicators of element properties (see example below). However,, if those elements are dragged into a nested arrangement with another container element, the z-position of the Notes goes haywire. (- so 8.10.a.a gets re-ordered to 8.10.b) So,, as much as a z-order being a scriptable property would enable a quick repair, preservation of the existing order would fix the root cause. (P.S. Would also be nice if the Visual Connector would become "invisible" when nested, just as relationships do :-) ). image

lavenderb avatar Nov 11 '23 11:11 lavenderb

For this to be implemented we need to get consensus for a jArchi API.

Here are some options...

1. Implement an API like the Archi commands

This would be similar to the Archi commands "Send to Back", "Send Backward", "Bring to Front" and "Bring Forward":

diagramObject.sendToBack();
diagramObject.sendBackward();
diagramObject.bringToFront();
diagramObject.bringForward();

But perhaps it might be better to actually set the index ("z") position of the object as detailed in the following options...

2. Set the object's index position from its parent

This would mean getting the object's parent and setting the position from the parent. This is similar to how a Java List works.

Example:

// Diagram object we are interested in
var diagramObject = ...;

// Get the parent of the object (might be the View or another diagram object container)
var parent = $(diagramObject).parent().first();

// get current index position of child object
var indexPos = parent.indexOf(diagramObject);

// set new position of child object
parent.setIndex(diagramObject, newPos);

// this is equivalent to "Send to Back"
parent.setIndex(diagramObject, 0);

// this is equivalent to "Bring to Front"
parent.setIndex(diagramObject, -1);

// this is equivalent to "Send Backward"
parent.setIndex(diagramObject, parent.indexOf(diagramObject) - 1);

// this is equivalent to "Bring Forward"
parent.setIndex(diagramObject, parent.indexOf(diagramObject) + 1);

Disadvantages of this approach:

  1. First have to get the object's parent
  2. Internal code needs to check for valid parent and whether object is a child of the parent
  3. Internal code is duplicated for diagram objects and diagram view

3. Set the index position on the object itself

Get and set the object's position from itself.

Example:

// Diagram object we are interested in
var diagramObject = ...;

// get current index position of object
var indexPos = diagramObject.index;

// set new index position
diagramObject.index = 1;

// this is equivalent to "Send to Back"
diagramObject.index = 0;

// this is equivalent to "Bring to Front"
diagramObject.index = -1;

// this is equivalent to "Send Backward"
diagramObject.index--;

// this is equivalent to "Bring Forward"
diagramObject.index++; 

I prefer this option because it's simpler and easier to implement.

Feedback welcome...

Phillipus avatar Aug 09 '24 16:08 Phillipus

Thanks Phil,Option 1 looks super simple & intuitive - and probably sufficient in 90% of cases when there are only a few planes and the script is just adding elements to be visible on top.Option 3 gives precise control for larger tasks - such as generating a complete diagram from scratch. Not impossible with #1, but needs care with the construction sequence.So for me, #1 is fine 🙂RgdsFor the other 10%. Sent from my iPhoneOn 9 Aug 2024, at 18:58, Phil Beauvoir @.***> wrote: For this to be implemented we need to get consensus for a jArchi API. Here are some options...

  1. Implement an API like the Archi commands This would be similar to the Archi commands "Send to Back", "Send Backward", "Bring to Front" and "Bring Forward": diagramObject.sendToBack(); diagramObject.sendBackward(); diagramObject.bringToFront(); diagramObject.bringForward(); But perhaps it might be better to actually set the index ("z") position of the object as detailed in the following options...
  2. Set the object's index position from its parent This would mean getting the object's parent and setting the position from the parent. This is similar to how a Java List works. Example: // Diagram object we are interested in var diagramObject = ...;

// Get the parent of the object (might be the View or another diagram object container) var parent = $(diagramObject).parent().first();

// get current index position of child object var indexPos = parent.indexOf(diagramObject);

// set new position of child object parent.setIndex(diagramObject, newPos);

// this is equivalent to "Send to Back" parent.setIndex(diagramObject, 0);

// this is equivalent to "Bring to Front" parent.setIndex(diagramObject, -1);

// this is equivalent to "Send Backward" parent.setIndex(diagramObject, parent.indexOf(diagramObject) - 1);

// this is equivalent to "Bring Forward" parent.setIndex(diagramObject, parent.indexOf(diagramObject) + 1); Disadvantages of this approach:

First have to get the object's parent Internal code needs to check for valid parent and whether object is a child of the parent Internal code is duplicated for diagram objects and diagram view

  1. Set the index position on the object itself Get and set the object's position from itself. Example: // Diagram object we are interested in var diagramObject = ...;

// get current index position of object var indexPos = diagramObject.index;

// set new index position diagramObject.index = 1;

// this is equivalent to "Send to Back" diagramObject.index = 0;

// this is equivalent to "Bring to Front" diagramObject.index = -1;

// this is equivalent to "Send Backward" diagramObject.index--;

// this is equivalent to "Bring Forward" diagramObject.index++; I prefer this option because it's simpler and easier to implement. Feedback welcome...

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

lavenderb avatar Aug 09 '24 18:08 lavenderb