Expect to be able to "distribute" elements in views besides "alignment"

Started by Xiaoqi, February 23, 2022, 18:14:48 PM

Previous topic - Next topic

Xiaoqi

Hello,

When using Archi to create views, it will be quite often you need to arrange the layout of multiple elements in the display.

From Archi itself, you can do six different types of "align" through the buttons, however, may I know any reason we don't provide "distribute horizontally or vertically" feature? In attached image is the sample in Powerpoint, but "Arrangement" including "Align" and "Distribute" are kind of common use experience in variable hands on tools beyond MS Office.

Have to manually move the element and try to make them looks "distributed" well, but would be better we can have that feature in native way.

Thanks for consideration, if there's any previous discussion already, sorry for duplicated.

Regards,
Xiaoqi

Phil Beauvoir

Quote from: xiaoqi on February 23, 2022, 18:14:48 PMmay I know any reason we don't provide "distribute horizontally or vertically" feature?

Well, I guess because no-one has implemented it.  :)  You could probably write a simple jArchi script to do it.
If you value and use Archi, please consider making a donation!
Ask your ArchiMate related questions to the ArchiMate Community's Discussion Board.

Xiaoqi

Thanks Phil, well, will investigate from scripting first as workaround, it still be good that can be as the native feature ;-P

LapizLazuli

Quote from: Phil Beauvoir on February 23, 2022, 21:41:32 PMYou could probably write a simple jArchi script to do it.

Hi,

Here is a one. Just a hack, but yet helpful as it is.

Regards

/*
 * This will align selected elements in view, based on three input parameters:
 * Line spacing / Column spacing / Number of columns
 */

// Label this script so it can be easily exited on exception, using break statement
ThisScript: {

  var x0 = 0;
  var y0 = 0;
  var x1 = 0;
  var y1 = 0;
  var xSpacing = 140;
  var ySpacing = 100;
  var nbCols = 12;
  var curCol = 1;
  var selected;
  var input = "";

  // Test empty selection or only one shape selected
  if ($(selection).size() == 1) {
    window.alert("Please select at least two shapes.");
    break ThisScript;
  };

  // Get input parameters

  xSpacing = getNumber("Horizontal Spacing: ", xSpacing);
  if (xSpacing === "Canceled") {
    break ThisScript;
  };

  ySpacing = getNumber("Vertical Spacing: ", ySpacing);
  if (ySpacing === "Canceled") {
    break ThisScript;
  };

  nbCols = getNumber("Vertical Spacing: ", nbCols);
  if (nbCols === "Canceled") {
    break ThisScript;
  };

  // Sort selection by X coordinate,
  // so that the shapes remain in the same order once aligned
  $(selection).sort(compareX);

  // Now get min X et Y
  $(selection).each(function (o) {
    // If x0 and y0 == 0, we've just entered the loop.
    // Then let's initialize x0 and y0 to the first element's coordinates
    // Otherwise, x0 and y0 set to the min value
    if (x0 == 0) {
      x0 = o.bounds.x;
    } else {
      x0 = Math.min(x0, o.bounds.x);
    };

    if (y0 == 0) {
      y0 = o.bounds.y;
    } else {
      y0 = Math.min(y0, o.bounds.y);
    };
  });

  // Initialize first position
  x1 = x0;
  y1 = y0;
  curCol = 1;

  // Now loop and position
  $(selection).each(function (o) {
    o.bounds = {
      x: x1,
      y: y1
    };

    if (curCol == nbCols) {
      curCol = 1;
      x1 = x0;
      y1 = y1 + ySpacing;
    } else {
      curCol = curCol + 1;
      x1 = x1 + xSpacing;
    };
  });

};

function getNumber(msg, defaultValue) {
  var input = "Initial Value"; // any NaN (not a number) value. Therefore can't be ""

  while (isNaN(input)) {

    input = window.prompt(msg, defaultValue);
    // Check
    if (isNaN(input)) {
      window.alert('Please enter a number or press "Cancel"');
    } else {
      if (input === null) {
        return "Canceled";
      } else {
        return Number(input);
      }
    };
  };
};

// Sort function
function compareX(a, b) {
  if (a.bounds.y < b.bounds.y) {
    return -1;
  }
  if (a.bounds.y > b.bounds.y) {
    return 1;
  }
  return 0;
};

Phil Beauvoir

If you value and use Archi, please consider making a donation!
Ask your ArchiMate related questions to the ArchiMate Community's Discussion Board.

LapizLazuli

Quote from: Phil Beauvoir on April 06, 2022, 12:36:49 PM@LapizLazuli Thanks for sharing, and welcome to the forums
Thank you for this welcome message, and for sharing not only a script, but the whole Archi software :)