/*
* Copyright (C) 1998-2023 by Northwoods Software Corporation. All Rights Reserved.
*/
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsJSM folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
import * as go from '../release/go.js';
/**
* A custom {@link PanelLayout} that arranges panel elements in rows or columns.
* A typical use might be:
*
* $(go.Node,
* ...
* $(go.Panel, "Flow",
* ... the elements to be laid out in rows with no space between them ...
* )
* ...
* )
*
* A customized use might be:
*
* $(go.Node,
* ...
* $(go.Panel,
* $(PanelLayoutFlow, { spacing: new go.Size(5, 5), direction: 90 }),
* ... the elements to be laid out in columns ...
* )
* ...
* )
*
*
* The {@link #direction} property determines whether the elements are arranged in rows (if 0 or 180)
* or in columns (if 90 or 270).
*
* Use the {@link #spacing} property to control how much space there is between elements in a row or column
* as well as between rows or columns.
*
* This layout respects the {@link GraphObject#visible}, {@link GraphObject#stretch},
* and {@link GraphObject#alignment} properties on each element, along with the Panel's
* {@link Panel#defaultStretch}, {@link Panel#defaultAlignment}, and {@link Panel#padding} properties.
*
* If you want to experiment with this extension, try the Flow PanelLayout sample.
* @category Layout Extension
*/
export class PanelLayoutFlow extends go.PanelLayout {
private _direction: number = 0; // only 0 or 180 (rows) or 90 or 270 (columns)
private _spacing: go.Size = new go.Size(0, 0); // space between elements and rows/columns
// these need to go as the Panel.panelLayoutState, because they are computed by measure and later used by arrange
// lineBreadths = []; // row height or column width, excluding spacing
// lineLengths = []; // line length, excluding padding and external spacing
/**
* Constructs a PanelLayoutFlow that lays out elements in rows
* with no space between the elements or between the rows.
*/
constructor() {
super();
this.name = "Flow";
}
/**
* Gets or sets the initial direction in which elements are laid out.
* The value must be 0 or 180, which results in rows, or 90 or 270, which results in columns.
*
* The default value is 0, resulting in rows that go rightward.
* A value of 90 results in columns that go downward.
*
* Setting this property does not notify about any changed event,
* nor does a change in value automatically cause the panel layout to be performed again.
*/
get direction() { return this._direction; }
set direction(d: number) {
if (d !== 0 && d !== 90 && d !== 180 && d !== 270) throw new Error("bad direction for PanelLayoutFlow: " + d);
this._direction = d;
}
/**
* Gets or sets the space between adjacent elements in the panel and the space between adjacent rows or columns.
*
* The default value is (0, 0). The size is in the panel's coordinate system.
*
* Setting this property does not notify about any changed event,
* nor does a change in value automatically cause the panel layout to be performed again.
*/
get spacing() { return this._spacing; }
set spacing(s: go.Size) { this._spacing = s; }
public override measure(panel: go.Panel, width: number, height: number, elements: Array, union: go.Rect, minw: number, minh: number): void {
const lineBreadths = [] as Array; // attach properties on panel
const lineLengths = [] as Array;
(panel as any).panelLayoutState = { lineBreadths: lineBreadths, lineLengths: lineLengths };
const pad = panel.padding;
const wrapx = width + pad.left; // might be Infinity
const wrapy = height + pad.top;
let x = pad.left; // account for padding
let y = pad.top;
const xstart = x; // remember start
const ystart = y;
// assume that measuring is the same for either direction
if (this.direction === 0 || this.direction === 180) {
let maxx = x; // track total width
let rowh = 0; // compute row height
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
if (!elem.visible) continue;
this.measureElement(elem, Infinity, height, minw, minh);
const mb = elem.measuredBounds;
const marg = elem.margin;
const gw = marg.left + mb.width + marg.right; // gross size including margins
const gh = marg.top + mb.height + marg.bottom;
if (x + gw > wrapx && i > 0) { // next row
lineBreadths.push(rowh); // remember previous row info
lineLengths.push(x - pad.left);
y += rowh + this.spacing.height; // advance x and y
if (y + gh <= wrapy) { // next row fits???
x = xstart + gw + this.spacing.width;
rowh = gh;
} else { // clipped, assume zero size
x = xstart;
rowh = 0;
break;
}
} else { // advance x
x += gw + this.spacing.width;
rowh = Math.max(rowh, gh);
}
maxx = Math.max(maxx, x);
}
lineBreadths.push(rowh);
lineLengths.push(x - pad.left);
union.width = Math.max(0, Math.min(maxx, wrapx) - pad.left); // don't add padding to union
union.height = Math.max(0, y + rowh - pad.top);
} else if (this.direction === 90 || this.direction === 270) {
let maxy = y;
let colw = 0;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
if (!elem.visible) continue;
this.measureElement(elem, width, Infinity, minw, minh);
const mb = elem.measuredBounds;
const marg = elem.margin;
const gw = marg.left + mb.width + marg.right;
const gh = marg.top + mb.height + marg.bottom;
if (y + gh > wrapy && i > 0) {
lineBreadths.push(colw);
lineLengths.push(y - pad.top);
x += colw + this.spacing.width;
if (x + gw <= wrapx) {
y = ystart + gh + this.spacing.height;
colw = gw;
} else {
y = ystart;
colw = 0;
break;
}
} else {
y += gh + this.spacing.height;
colw = Math.max(colw, gw);
}
maxy = Math.max(maxy, y);
}
lineBreadths.push(colw);
lineLengths.push(y - pad.top);
union.width = Math.max(0, x + colw - pad.left);
union.height = Math.max(0, Math.min(maxy, wrapy) - pad.top);
}
}
private isStretched(horiz: boolean, elt: go.GraphObject, panel: go.Panel): boolean {
let s = elt.stretch;
if (s === go.GraphObject.Default) s = panel.defaultStretch;
if (s === go.GraphObject.Fill) return true;
return s === (horiz ? go.GraphObject.Vertical : go.GraphObject.Horizontal);
}
private align(elt: go.GraphObject, panel: go.Panel): go.Spot {
let a = elt.alignment;
if (a.isDefault()) a = panel.defaultAlignment;
if (!a.isSpot()) a = go.Spot.Center;
return a;
}
public override arrange(panel: go.Panel, elements: Array, union: go.Rect): void {
const lineBreadths = (panel as any).panelLayoutState.lineBreadths as Array;
const lineLengths = (panel as any).panelLayoutState.lineLengths as Array;
const pad = panel.padding;
let x = (this.direction === 180) ? union.width - pad.right : pad.left;
let y = (this.direction === 270) ? union.height - pad.bottom : pad.top;
const xstart = x;
const ystart = y;
if (this.direction === 0) {
let row = 0;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
if (!elem.visible) continue;
const mb = elem.measuredBounds;
const marg = elem.margin;
const gw = marg.left + mb.width + marg.right;
// use computed row length to decide whether to wrap, account for error accumulation
if (x - pad.left > lineLengths[row] - 0.00000005 && i > 0) {
y += lineBreadths[row++] + this.spacing.height;
x = xstart;
if (row === lineLengths.length) row--; // if on last row, stay there
}
const lastbr = lineBreadths[row]; // if row was clipped,
let h = (lastbr > 0) ? lastbr - marg.top - marg.bottom : 0; // use zero height
let ya = (lastbr > 0) ? y + marg.top : y; // and stay at same Y point
if ((lastbr > 0) && !this.isStretched(true, elem, panel)) { // if aligning...
const align = this.align(elem, panel); // compute alignment Spot
ya += align.y * (h - mb.height) + align.offsetY;
h = mb.height; // only considering Y axis
}
const xa = x + ((lastbr > 0) ? marg.left : 0);
this.arrangeElement(elem, xa, ya, mb.width, h);
x += gw + this.spacing.width;
}
} else if (this.direction === 180) {
let row = 0;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
if (!elem.visible) continue;
const mb = elem.measuredBounds;
const marg = elem.margin;
const gw = marg.left + mb.width + marg.right;
if (x - gw - pad.left < 0.00000005 && i > 0) {
y += lineBreadths[row++] + this.spacing.height;
x = xstart;
if (row === lineLengths.length) row--;
}
const lastbr = lineBreadths[row];
let h = (lastbr > 0) ? lastbr - marg.top - marg.bottom : 0;
let ya = (lastbr > 0) ? y + marg.top : y;
if ((lastbr > 0) && !this.isStretched(true, elem, panel)) {
const align = this.align(elem, panel);
ya += align.y * (h - mb.height) + align.offsetY;
h = mb.height;
}
const xa = x - gw + ((lastbr > 0) ? marg.left : 0);
this.arrangeElement(elem, xa, ya, mb.width, h);
x -= gw + this.spacing.width;
}
} else if (this.direction === 90) {
let col = 0;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
if (!elem.visible) continue;
const mb = elem.measuredBounds;
const marg = elem.margin;
const gh = marg.top + mb.height + marg.bottom;
if (y - pad.top > lineLengths[col] - 0.00000005 && i > 0) {
x += lineBreadths[col++] + this.spacing.width;
y = ystart;
if (col === lineLengths.length) col--;
}
const lastbr = lineBreadths[col];
let w = (lastbr > 0) ? lastbr - marg.left - marg.right : 0;
let xa = (lastbr > 0) ? x + marg.left : x;
if ((lastbr > 0) && !this.isStretched(false, elem, panel)) {
const align = this.align(elem, panel);
xa += align.x * (w - mb.width) + align.offsetX;
w = mb.width;
}
const ya = y + ((lastbr > 0) ? marg.top : 0);
this.arrangeElement(elem, xa, ya, w, mb.height);
y += gh + this.spacing.height;
}
} else if (this.direction === 270) {
let col = 0;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
if (!elem.visible) continue;
const mb = elem.measuredBounds;
const marg = elem.margin;
const gh = marg.top + mb.height + marg.bottom;
if (y - gh - pad.top < 0.00000005 && i > 0) {
x += lineBreadths[col++] + this.spacing.width;
y = ystart - gh;
if (col === lineLengths.length) col--;
} else {
y -= gh;
}
const lastbr = lineBreadths[col];
let w = (lastbr > 0) ? lastbr - marg.left - marg.right : 0;
let xa = (lastbr > 0) ? x + marg.left : x;
if ((lastbr > 0) && !this.isStretched(false, elem, panel)) {
const align = this.align(elem, panel);
xa += align.x * (w - mb.width) + align.offsetX;
w = mb.width;
}
const ya = y + ((lastbr > 0) ? marg.top : 0);
this.arrangeElement(elem, xa, ya, w, mb.height);
y -= this.spacing.height;
}
}
(panel as any).panelLayoutState = null; // free up the temporary Arrays
}
}
go.Panel.definePanelLayout('Flow', new PanelLayoutFlow());