- Contract.php: 返回合约账户余额(balance_contract) - My.php: 地址管理增加BTC/ETH - AppContract.php: 一键平仓(closeall) - AppProxy.php: 代理专属注册链接 + 分级权限(L1/L2) - site.php: 手续费减半(0.018→0.009) - agent_permission_setup.sql: 代理权限SQL - crypto_news_crawler.py: 新闻自动采集脚本
27275 lines
1.2 MiB
Plaintext
Executable File
27275 lines
1.2 MiB
Plaintext
Executable File
/*
|
|
* Type definitions for GoJS v2.1.26
|
|
* Project: https://gojs.net
|
|
* Definitions by: Northwoods Software <https://github.com/NorthwoodsSoftware>
|
|
* Definitions: https://github.com/NorthwoodsSoftware/GoJS
|
|
* Copyright (C) 1998-2020 by Northwoods Software Corporation.
|
|
* This requires TypeScript v2.8 or later.
|
|
*/
|
|
|
|
|
|
// UMD. For ES6, use go-module.d.ts
|
|
|
|
export as namespace go;
|
|
|
|
/**
|
|
* The ObjectData type is the same as `{ [index: string]: any; }`.
|
|
* This is to ease writing `someDataObject.anyPropertyName`,
|
|
* when dealing with arbitrary JavaScript Objects used as model data.
|
|
* @category Type
|
|
*/
|
|
export interface ObjectData {
|
|
[index: string]: any;
|
|
}
|
|
/**
|
|
* Undocumented
|
|
* @unrestricted
|
|
*/
|
|
export class EnumValue {
|
|
/**
|
|
* @param {function()} classfunc
|
|
* @param {string} name
|
|
* @param {number} val
|
|
*/
|
|
constructor(classfunc: Function, name: string, val: number);
|
|
/**
|
|
*/
|
|
readonly classType: Function;
|
|
/**
|
|
*/
|
|
readonly name: string;
|
|
}
|
|
/**
|
|
* This interface is implemented by the List, Set, and Map
|
|
* classes; it provides the #iterator read-only property that returns an Iterator.
|
|
*
|
|
* Typical usage is:
|
|
* ```js
|
|
* var it = anIterableCollection.iterator;
|
|
* while (it.next()) {
|
|
* var item = it.value;
|
|
* }
|
|
* ```
|
|
* @interface
|
|
* @template T
|
|
* @category Collection
|
|
*/
|
|
export interface Iterable<T> {
|
|
/**
|
|
* Gets an Iterator that can iterate over the items in the collection.
|
|
*
|
|
* Typical usage is:
|
|
* ```js
|
|
* var it = anIterableCollection.iterator;
|
|
* while (it.next()) {
|
|
* var item = it.value;
|
|
* }
|
|
* ```
|
|
* @return {Iterator.<T>}
|
|
*/
|
|
iterator: Iterator<T>;
|
|
/**
|
|
* Returns the first item in the list, or null if there is none.
|
|
* @return {T|null} This returns null if there are no items in the list.
|
|
*/
|
|
first(): T | null;
|
|
/**
|
|
* This read-only property is the number of elements in the collection.
|
|
*/
|
|
readonly count: number;
|
|
}
|
|
/**
|
|
* This interface defines properties and methods for iterating over a collection;
|
|
* it provides the #next predicate and the #value read-only property.
|
|
* Some Iterators also provide `key` property values along with each `value`.
|
|
*
|
|
* Typical usage is:
|
|
* ```js
|
|
* var it = anIterableCollection.iterator;
|
|
* while (it.next()) {
|
|
* var item = it.value;
|
|
* }
|
|
* ```
|
|
*
|
|
* Many iterators will signal an error if #next is called
|
|
* after the underlying collection has been modified.
|
|
*
|
|
* To avoid confusion when dealing with Iterables,
|
|
* iterators implement the Iterable#iterator property
|
|
* by just returning themselves.
|
|
* @interface
|
|
* @template T
|
|
* @extends {Iterable.<T>}
|
|
* @category Collection
|
|
*/
|
|
export interface Iterator<T> extends Iterable<T> {
|
|
/**
|
|
* Returns itself, which is convenient for code that expects an Iterable
|
|
* instead of an Iterator.
|
|
* @return {Iterator.<T>}
|
|
*/
|
|
iterator: Iterator<T>;
|
|
/**
|
|
* Call this method to advance the iterator to the next item in the collection.
|
|
* This should be called before accessing any #value.
|
|
* @return {boolean} whether another item is available; when true the value of #value will be that item.
|
|
*/
|
|
next(): boolean;
|
|
/**
|
|
* Call this method to advance the iterator to the next item in the collection.
|
|
* This should be called before accessing any #value.
|
|
* @return {boolean} whether another item is available; when true the value of #value will be that item.
|
|
*/
|
|
hasNext(): boolean;
|
|
/**
|
|
* Advance if needed to the first item in the collection and return it, or return null if there is none.
|
|
*
|
|
* Caution: this returns a *key/value pair*, not a *value*, for Map iterators.
|
|
* @return {T|null}
|
|
* @since 1.1
|
|
*/
|
|
first(): T | null;
|
|
/**
|
|
* Start this iterator all over again.
|
|
*/
|
|
reset(): void;
|
|
/**
|
|
* This is true if any invocation of the given predicate on items in the collection is true.
|
|
*
|
|
* Call the given predicate on each item in the collection.
|
|
* As soon as a call returns true, this returns true.
|
|
* Otherwise this returns false.
|
|
* For an empty collection this returns false.
|
|
*
|
|
* This automatically #reset's itself when it is called.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {boolean} True if any predicate call is true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
any(pred: (x: T) => boolean): boolean;
|
|
/**
|
|
* This is true if all invocations of the given predicate on items in the collection are true.
|
|
*
|
|
* Call the given predicate on each item in the collection.
|
|
* As soon as a call returns false, this returns false.
|
|
* Otherwise this returns true.
|
|
* For an empty collection this returns true.
|
|
*
|
|
* This automatically #reset's itself when it is called.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {boolean} True if all predicate calls are true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
all(pred: (x: T) => boolean): boolean;
|
|
/**
|
|
* Call the given function on each item in the collection.
|
|
*
|
|
* This automatically #reset's itself when it is called.
|
|
* @expose
|
|
* @param {function(T)} func This function must not modify the collection.
|
|
* @return {Iterator} this iterator itself
|
|
* @since 1.4
|
|
*/
|
|
each(func: (x: T) => void): void;
|
|
/**
|
|
* Call the given function on each item in the collection and present the results in an iterator.
|
|
*
|
|
* This automatically #reset's itself when it is called.
|
|
* @expose
|
|
* @param {function(T)} func This function must not modify the collection.
|
|
* @return {Iterator} this
|
|
*/
|
|
map<S>(func: (x: T) => S): Iterator<S>;
|
|
/**
|
|
* Call the given predicate on each item in the collection and for each item that it returns true, present the item in an iterator.
|
|
*
|
|
* This automatically #reset's itself when it is called.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {Iterator.<T>} this
|
|
*/
|
|
filter(pred: (x: T) => boolean): Iterator<T>;
|
|
/**
|
|
* Gets the current item in the collection, assuming #next has just returned true.
|
|
*/
|
|
readonly value: T;
|
|
/**
|
|
* Gets the current index to the item in the collection, assuming #next has just returned true.
|
|
*/
|
|
readonly key: any;
|
|
/**
|
|
* This read-only property is the total number of items in the iterated collection.
|
|
*/
|
|
readonly count: number;
|
|
}
|
|
/**
|
|
* Undocumented interface used for both the SVGSurface and the CanvasSurface, which are undocumented classes.
|
|
*/
|
|
export interface ISurface {
|
|
domElement: Element;
|
|
context: IContext;
|
|
width: number;
|
|
height: number;
|
|
ownerDocument: Document;
|
|
resize(pixelWidth: number, pixelHeight: number, width: number, height: number): boolean;
|
|
elementFinished: ((a: GraphObject, b: SVGElement) => void) | null;
|
|
getBoundingClientRect(): ClientRect | DOMRect;
|
|
focus(): void;
|
|
dispose(): void;
|
|
style: CSSStyleDeclaration;
|
|
}
|
|
/**
|
|
* Undocumented interface used for both the SVGContext and the CanvasSurfaceContext, which are undocumented classes.
|
|
*/
|
|
export interface IContext {
|
|
fillStyle: string | CanvasGradient | CanvasPattern | SGradient;
|
|
font: string;
|
|
globalAlpha: number;
|
|
lineCap: string;
|
|
lineDashOffset: number;
|
|
lineJoin: string;
|
|
lineWidth: number;
|
|
miterLimit: number;
|
|
shadowBlur: number;
|
|
shadowColor: string;
|
|
shadowOffsetX: number;
|
|
shadowOffsetY: number;
|
|
strokeStyle: string | CanvasGradient | CanvasPattern | SGradient;
|
|
textAlign: string;
|
|
imageSmoothingEnabled: boolean;
|
|
clipInsteadOfFill: boolean;
|
|
setImageSmoothingEnabled(smooth: boolean): void;
|
|
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise: boolean, lx?: number, ly?: number): void;
|
|
beginPath(): void;
|
|
bezierCurveTo(a: number, b: number, c: number, d: number, e: number, f: number): void;
|
|
clearRect(x: number, y: number, w: number, h: number): void;
|
|
clip(): void;
|
|
closePath(): void;
|
|
createLinearGradient(aX0: number, aY0: number, aX1: number, aY1: number): CanvasGradient | SGradient;
|
|
createPattern(image: HTMLCanvasElement | HTMLImageElement, repetition: string): CanvasPattern | string;
|
|
createRadialGradient(aX0: number, aY0: number, aR0: number, aX1: number, aY1: number, aR1: number): CanvasGradient | SGradient;
|
|
drawImage(src: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement, sx: number, sy: number, sw?: number, sh?: number, dx?: number, dy?: number, dw?: number, dh?: number): void;
|
|
fill(): void;
|
|
fillRect(x: number, y: number, w: number, h: number): void;
|
|
fillText(str: string, x: number, y: number): void;
|
|
getImageData(x: number, y: number, w: number, h: number): ImageData;
|
|
lineTo(x: number, y: number): void;
|
|
measureText(text: string): TextMetrics;
|
|
moveTo(x: number, y: number): void;
|
|
quadraticCurveTo(a: number, b: number, c: number, d: number): void;
|
|
rect(x: number, y: number, w: number, h: number): void;
|
|
restore(): void;
|
|
rotate(angle: number): void;
|
|
save(): void;
|
|
setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
|
|
scale(x: number, y: number): void;
|
|
stroke(): void;
|
|
transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
|
|
translate(x: number, y: number): void;
|
|
fillContext(brush: BrushLike): void;
|
|
strokeContext(): void;
|
|
shadowsSet(x: number, y: number, blur: number): void;
|
|
shadowsOff(): void;
|
|
shadowsOn(): void;
|
|
enableDash(strokeDashArray: Array<number>, strokeDashOffset: number): void;
|
|
disableDash(): void;
|
|
clearContextCache(clearFont: boolean): void;
|
|
}
|
|
|
|
/**
|
|
* <span style="color: red; font-weight: bold;">NOTE: For 2.0 the #constructor argument has changed.
|
|
* List now optionally accepts a collection, and only checks types in TypeScript.</span>
|
|
*
|
|
* An ordered iterable collection.
|
|
* In TypeScript it is a generic class that enforces at compile-time the type of elements that may be added to the List.
|
|
*
|
|
* An example usage:
|
|
* ```js
|
|
* var list = new go.List(); // or in TypeScript: new go.List<go.Point>();
|
|
* list.add(new go.Point(0, 0));
|
|
* list.add(new go.Point(20, 10));
|
|
* list.add(new go.Point(10, 20));
|
|
* // now list.length === 3
|
|
* // and list.elt(1) instanceof go.Point
|
|
* ```
|
|
*
|
|
* You can iterate over the items in a List:
|
|
* ```js
|
|
* var it = aList.iterator;
|
|
* while (it.next()) {
|
|
* console.log("#" + it.key + " is " + it.value);
|
|
* }
|
|
* ```
|
|
* Or:
|
|
* ```js
|
|
* aList.each(function(val) {
|
|
* console.log(val);
|
|
* });
|
|
* ```
|
|
* The key will range from zero to #count-1.
|
|
*
|
|
* For convenience this **GoJS** List class has synonyms for the following methods and property:
|
|
* - **get(idx)**: #elt
|
|
* - **set(idx,val)**: #setElt
|
|
* - **has(val)**: #contains
|
|
* - **delete(val)**: #remove
|
|
* - **clear()**: #clear
|
|
* - **size**: #count
|
|
*
|
|
* The constructor now takes an optional Iterable or Array argument that provides the initial elements for the new List.
|
|
*
|
|
* Note that GoJS iteration is quite different than ES6 iteration, so that functionality has not been made somewhat compatible.
|
|
* These collection classes were defined in GoJS before the ES6 collection classes were proposed.
|
|
* @template T
|
|
* @implements {Iterable.<T>}
|
|
* @unrestricted
|
|
* @category Collection
|
|
*/
|
|
export class List<T> implements Iterable<T> {
|
|
/**
|
|
* There are two possible constructors:
|
|
*
|
|
* `new go.List()`, for JavaScript
|
|
*
|
|
* `new go.List<type>()` for TypeScript, to enforce type checking.
|
|
*
|
|
* Typical usage would be something like:
|
|
* ```js
|
|
* var list = new go.List(); // keep a list of GraphObjects
|
|
* ```
|
|
* @param {Iterable.<T>|Array.<T>=} coll an optional collection of items to add.
|
|
*/
|
|
constructor(coll?: Iterable<T> | Array<T>);
|
|
/**
|
|
* @return {string}
|
|
*/
|
|
toString(): string;
|
|
/**
|
|
* Adds a given value to the end of the List.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {*} val
|
|
* @return {List.<T>} This modified List.
|
|
*/
|
|
add(val: T): List<T>;
|
|
/**
|
|
* Adds a given value to the end of the List.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {*} val
|
|
*/
|
|
push(val: T): void;
|
|
/**
|
|
* Adds all of the values of a collection to the end of this List.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {Iterable.<T>|Array.<T>} coll the collection of items to add.
|
|
* @return {List.<T>} This modified List.
|
|
*/
|
|
addAll(coll: Iterable<T> | Array<T>): List<T>;
|
|
/**
|
|
* Clears the List.
|
|
* This sets the #count to zero.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* Returns whether the given value is in this List.
|
|
* @param {T} val The value to check.
|
|
* @return {boolean} Whether or not the value is contained within the List.
|
|
*/
|
|
contains(val: T): boolean;
|
|
/**
|
|
* Returns whether the given value is in this List.
|
|
* @param {T} val The value to check.
|
|
* @return {boolean} Whether or not the value is contained within the List.
|
|
*/
|
|
has(val: T): boolean;
|
|
/**
|
|
* Returns the index of the given value if it is in this List.
|
|
* @param {T} val The value to check.
|
|
* @return {number} int returns -1 if the value is not in this list.
|
|
*/
|
|
indexOf(val: T): number;
|
|
/**
|
|
* Returns the element at the given index.
|
|
* @param {number} i int The index of the element to return.
|
|
* @return {T} the value at the given index.
|
|
*/
|
|
elt(i: number): T;
|
|
/**
|
|
* Returns the element at the given index.
|
|
* @param {number} i int The index of the element to return.
|
|
* @return {T} the value at the given index.
|
|
*/
|
|
get(i: number): T;
|
|
/**
|
|
* Set the element at the given index to a given value.
|
|
* @param {number} i int The index of the element to set.
|
|
* @param {T} val The value to set at the index.
|
|
*/
|
|
setElt(i: number, val: T): void;
|
|
/**
|
|
* Set the element at the given index to a given value.
|
|
* @param {number} i int The index of the element to set.
|
|
* @param {T} val The value to set at the index.
|
|
*/
|
|
set(i: number, val: T): void;
|
|
/**
|
|
* Returns the first item in the list, or null if there is none.
|
|
* @return {T|null} This returns null if there are no items in the list.
|
|
*/
|
|
first(): T | null;
|
|
/**
|
|
* Returns the last item in the list, or null if these is none.
|
|
* @return {T|null} This returns null if there are no items in the list.
|
|
* @since 1.5
|
|
*/
|
|
last(): T | null;
|
|
/**
|
|
* Returns the last item in the list and removes it from the list, or just return null if these is none.
|
|
* Use #add to push an item onto the end of the list.
|
|
* Use #last to get the last item without reducing the length of the list.
|
|
* @return {T|null} This returns null if there are no items in the list.
|
|
* @since 1.5
|
|
*/
|
|
pop(): T | null;
|
|
/**
|
|
* This is true if any invocation of the given predicate on items in the collection is true.
|
|
*
|
|
* Call the given predicate on each item in the collection.
|
|
* As soon as a call returns true, this returns true.
|
|
* Otherwise this returns false.
|
|
* For an empty collection this returns false.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {boolean} True if any predicate call is true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
any(pred: ((a: T) => boolean)): boolean;
|
|
/**
|
|
* This is true if all invocations of the given predicate on items in the collection are true.
|
|
*
|
|
* Call the given predicate on each item in the collection.
|
|
* As soon as a call returns false, this returns false.
|
|
* Otherwise this returns true.
|
|
* For an empty collection this returns true.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {boolean} True if all predicate calls are true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
all(pred: ((a: T) => boolean)): boolean;
|
|
/**
|
|
* Call the given function on each item in the collection.
|
|
* @expose
|
|
* @param {function(T)} func This function must not modify the collection.
|
|
* @return {List.<T>} This List itself
|
|
* @since 1.4
|
|
*/
|
|
each(func: ((a: T) => void)): List<T>;
|
|
/**
|
|
* Call the given function on each item in the collection and collect the results in a new List.
|
|
*
|
|
* Unlike Iterator#map, this returns a List, not an Iterator.
|
|
* @expose
|
|
* @param {function(T):*} func This function must not modify the collection.
|
|
* @return {List.<S>}
|
|
*/
|
|
map<S>(func: ((a: T) => S)): List<S>;
|
|
/**
|
|
* Call the given predicate on each item in the collection and for each item that it returns true, collect the item in a new List.
|
|
*
|
|
* Unlike Iterator#filter, this returns a List, not an Iterator.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {List.<T>}
|
|
*/
|
|
filter(pred: ((a: T) => boolean)): List<T>;
|
|
/**
|
|
* Insert a value before the index i.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {number} i int The index to insert before.
|
|
* @param {T} val The value to insert.
|
|
*/
|
|
insertAt(i: number, val: T): void;
|
|
/**
|
|
* Removes a given value (if found) from the List.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {T} val The value to remove.
|
|
* @return {boolean} true if the value was found and removed, false otherwise.
|
|
*/
|
|
remove(val: T): boolean;
|
|
/**
|
|
* Removes a given value (if found) from the List.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {T} val The value to remove.
|
|
* @return {boolean} true if the value was found and removed, false otherwise.
|
|
*/
|
|
delete(val: T): boolean;
|
|
/**
|
|
* Removes a value at a given index from the List.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {number} i int The index to remove.
|
|
*/
|
|
removeAt(i: number): void;
|
|
/**
|
|
* Removes a range of values from the List, given both the starting and the ending zero-based indexes.
|
|
* For example,
|
|
* ```js
|
|
* list.removeRange(2, 4)
|
|
* ```
|
|
* will remove elements 2, 3, and 4 from the list.
|
|
* If there were two or fewer elements in the list to begin with, the list is unchanged.
|
|
* If *from* is greater than *to*, the list is unchanged.
|
|
* If *from* is greater than or equal to the length, the list is unchanged.
|
|
* If *to* is less than zero, the list is unchanged.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {number} from int The starting index of the range to remove, inclusive; negative values are treated as zero
|
|
* @param {number} to int The ending index of the range to remove, inclusive; values greater than the length of the list are treated as referring to the last element
|
|
* @return {List.<T>} This modified List
|
|
*/
|
|
removeRange(from: number, to: number): List<T>;
|
|
/**
|
|
* Makes a shallow copy of this List.
|
|
* The values are not copied,
|
|
* so if they are objects they may continue to be shared with the original List.
|
|
* @expose
|
|
* @return {List.<T>} The new List with the same elements.
|
|
*/
|
|
copy(): List<T>;
|
|
/**
|
|
* Produces a JavaScript Array from the contents of this List.
|
|
* @return {Array.<T>} A copy of the List in Array form.
|
|
*/
|
|
toArray(): Array<T>;
|
|
/**
|
|
* Converts the List to a Set.
|
|
* The count of the resulting Set may be less than the count of this List
|
|
* if any duplicates were removed.
|
|
* @return {Set.<T>} A copy of the contents of this List,
|
|
* but with duplicates removed and ordering lost.
|
|
*/
|
|
toSet(): Set<T>;
|
|
/**
|
|
* Sort the List according to a comparison function.
|
|
* @param {function(T,T):number} sortfunc This function is passed two items in the list.
|
|
* It should return zero if they are equal,
|
|
* less than zero if the first value should come before the second value,
|
|
* or greater than zero if the first value should come after the second value.
|
|
* @return {List.<T>} This modified List.
|
|
*/
|
|
sort(sortfunc: ((a: T, b: T) => number)): List<T>;
|
|
/**
|
|
* Undocumented
|
|
* @param {function(*,*):number} sortfunc This function is passed two elements in the list.
|
|
* It should return zero if they are equal,
|
|
* less than zero if the first value should come before the second value,
|
|
* or greater than zero if the first value should come after the second value.
|
|
* @param {number=} from int The optional index at which to start the sort, including that element;
|
|
* default to zero, the first element of the list.
|
|
* @param {number=} to int The optional index at which to end the sort, excluding that element;
|
|
* defaults to the end of the list.
|
|
* @return {List.<T>} This modified List.
|
|
*/
|
|
sortRange(sortfunc: ((a: T, b: T) => number), from?: number, to?: number): List<T>;
|
|
/**
|
|
* Reverse the order of items in this List.
|
|
* @return {List.<T>} This modified List.
|
|
*/
|
|
reverse(): List<T>;
|
|
/**
|
|
* This read-only property is the length of the List.
|
|
*/
|
|
readonly count: number;
|
|
/**
|
|
* This read-only property is the length of the List.
|
|
*/
|
|
readonly size: number;
|
|
/**
|
|
* This read-only property is the length of the List, a synonym for the #count property.
|
|
*/
|
|
readonly length: number;
|
|
/**
|
|
* Gets an object that you can use for iterating over the List.
|
|
* The key will be an integer from zero to the count-1.
|
|
* The value will be the item at that index in the list.
|
|
* Typical usage:
|
|
* ```js
|
|
* var it = aList.iterator;
|
|
* while (it.next()) {
|
|
* . . . "index: " + it.key + " value: " + it.value . . .
|
|
* }
|
|
* ```
|
|
*/
|
|
readonly iterator: Iterator<T>;
|
|
/**
|
|
* Gets an object that you can use for iterating over the List in backwards order.
|
|
* The key will be an integer from count-1 to zero.
|
|
* The value will be the item at that index in the list.
|
|
* The list is not modified by traversing in reverse order.
|
|
* Typical usage:
|
|
* ```js
|
|
* var it = aList.iteratorBackwards;
|
|
* while (it.next()) {
|
|
* . . . 'key: ' + it.key + ' value: ' + it.value . . .
|
|
* }
|
|
* ```
|
|
*/
|
|
readonly iteratorBackwards: Iterator<T>;
|
|
}
|
|
/**
|
|
* <span style="color: red; font-weight: bold;">NOTE: For 2.0 the #constructor argument has changed.
|
|
* Set now optionally accepts a collection, and only checks types in TypeScript.</span>
|
|
*
|
|
* An unordered iterable collection that cannot contain two instances of the same value.
|
|
* In TypeScript it is a generic class that enforces at compile-time the type of elements that may be added to the Set.
|
|
*
|
|
* An example usage:
|
|
* ```js
|
|
* var set = new go.Set(); // In TypeScript: new go.Set<string>();
|
|
* set.add("orange");
|
|
* set.add("apple");
|
|
* set.add("orange");
|
|
* // now set.count === 2
|
|
* // and set.contains("orange") === true
|
|
* // and set.contains("banana") === false
|
|
* ```
|
|
*
|
|
* You can iterate over the items in a Set:
|
|
* ```js
|
|
* var it = aSet.iterator;
|
|
* while (it.next()) {
|
|
* . . . it.value . . .
|
|
* }
|
|
* ```
|
|
* Or:
|
|
* ```js
|
|
* aSet.each(function(val) {
|
|
* . . . val . . .
|
|
* });
|
|
* ```
|
|
*
|
|
* Although not precisely implementing the features of the EcmaScript 6 **Set** class,
|
|
* this **GoJS** Set class has synonyms for the following methods and property:
|
|
* - **add(val)**: #add
|
|
* - **delete(val)**: #remove
|
|
* - **has(val)**: #contains
|
|
* - **clear()**: #clear
|
|
* - **size**: #count
|
|
*
|
|
* The constructor now takes an optional Iterable or Array argument that provides the initial elements for the new Set.
|
|
*
|
|
* Note that GoJS iteration is quite different than ES6 iteration, so that functionality has not been made somewhat compatible.
|
|
* These collection classes were defined in GoJS before the ES6 collection classes were proposed.
|
|
* @template T
|
|
* @implements {Iterable.<T>}
|
|
* @unrestricted
|
|
* @category Collection
|
|
*/
|
|
export class Set<T> implements Iterable<T> {
|
|
/**
|
|
* There are two possible constructors:
|
|
*
|
|
* `new go.Set()`, for JavaScript
|
|
*
|
|
* `new go.Set<T>()` for TypeScript
|
|
*
|
|
* In TypeScript, the optional generic argument describes the type of values
|
|
* that this Set may hold.
|
|
*
|
|
* For example, the expression:
|
|
* ```js
|
|
* // TypeScript:
|
|
* new go.Set<go.Point>()
|
|
* ```
|
|
*
|
|
* Creates a new Set that may only contain Points.
|
|
*
|
|
* @param {Iterable.<T>|Array.<T>=} coll an optional collection of items to add.
|
|
*/
|
|
constructor(coll?: Iterable<T> | Array<T>);
|
|
/**
|
|
* @return {string}
|
|
*/
|
|
toString(): string;
|
|
/**
|
|
* Adds a given value to the Set, if not already present.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {T} val The value to add to the Set; must not be null.
|
|
* @return {Set.<T>} This modified Set.
|
|
*/
|
|
add(val: T): Set<T>;
|
|
/**
|
|
* Adds all of the values of a collection to this Set.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {Iterable.<T>|Array.<T>} coll the collection of items to add.
|
|
* @return {Set.<T>} This modified Set.
|
|
*/
|
|
addAll(coll: Iterable<T> | Array<T>): Set<T>;
|
|
/**
|
|
* Returns whether the given value is in this Set.
|
|
* @param {T} val The value to check.
|
|
* @return {boolean} Whether or not the value is contained within the Set.
|
|
*/
|
|
contains(val: T): boolean;
|
|
/**
|
|
* Returns whether the given value is in this Set.
|
|
* @param {T} val The value to check.
|
|
* @return {boolean} Whether or not the value is contained within the Set.
|
|
*/
|
|
has(val: T): boolean;
|
|
/**
|
|
* Returns true if all of the values of a given collection are in this Set.
|
|
* @param {Iterable.<T>} coll the collection of items to check for.
|
|
* @return {boolean}
|
|
*/
|
|
containsAll(coll: Iterable<T>): boolean;
|
|
/**
|
|
* Returns true if any of the values of a given collection are in this Set.
|
|
* @param {Iterable.<T>} coll the collection of items to check for.
|
|
* @return {boolean}
|
|
*/
|
|
containsAny(coll: Iterable<T>): boolean;
|
|
/**
|
|
* Returns the first item in the collection, or null if there is none.
|
|
* @return {T|null} This returns null if there are no items in the collection.
|
|
*/
|
|
first(): T | null;
|
|
/**
|
|
* This is true if any invocation of the given predicate on items in the collection is true.
|
|
*
|
|
* Call the given predicate on each item in the collection.
|
|
* As soon as a call returns true, this returns true.
|
|
* Otherwise this returns false.
|
|
* For an empty collection this returns false.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {boolean} True if any predicate call is true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
any(pred: ((a: T) => boolean)): boolean;
|
|
/**
|
|
* This is true if all invocations of the given predicate on items in the collection are true.
|
|
*
|
|
* Call the given predicate on each item in the collection.
|
|
* As soon as a call returns false, this returns false.
|
|
* Otherwise this returns true.
|
|
* For an empty collection this returns true.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {boolean} True if all predicate calls are true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
all(pred: ((a: T) => boolean)): boolean;
|
|
/**
|
|
* Call the given function on each item in the collection.
|
|
* @expose
|
|
* @param {function(T)} func This function must not modify the collection.
|
|
* @return {Set.<T>} This Set itself.
|
|
* @since 1.4
|
|
*/
|
|
each(func: ((a: T) => void)): Set<T>;
|
|
/**
|
|
* Call the given function on each item in the collection and collect the results in a new Set.
|
|
*
|
|
* Unlike Iterator#map, this returns a Set, not an Iterator.
|
|
* @expose
|
|
* @param {function(T):*} func This function must not modify the collection.
|
|
* @return {Set.<S>}
|
|
*/
|
|
map<S>(func: ((a: T) => S)): Set<S>;
|
|
/**
|
|
* Call the given predicate on each item in the collection and for each item that it returns true, collect the item in a new Set.
|
|
*
|
|
* Unlike Iterator#filter, this returns a Set, not an Iterator.
|
|
* @expose
|
|
* @param {function(T):boolean} pred This function must not have any side-effects.
|
|
* @return {Set.<T>}
|
|
*/
|
|
filter(pred: ((a: T) => boolean)): Set<T>;
|
|
/**
|
|
* Removes a value (if found) from the Set.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {T} val The value to remove.
|
|
* @return {boolean} true if the value was found and removed, false otherwise.
|
|
*/
|
|
remove(val: T): boolean;
|
|
/**
|
|
* Removes a value (if found) from the Set.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {T} val The value to insert.
|
|
* @return {boolean} true if the value was found and removed, false otherwise.
|
|
*/
|
|
delete(val: T): boolean;
|
|
/**
|
|
* Removes all of the values of a collection from this Set.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {Iterable.<T>|Array.<T>} coll the collection of items to remove.
|
|
* @return {Set.<T>} This modified Set.
|
|
*/
|
|
removeAll(coll: Iterable<T> | Array<T>): Set<T>;
|
|
/**
|
|
* Removes from this Set all items that are not in the given collection.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {Iterable.<T>} coll the collection of items that should be kept in this Set.
|
|
* @return {Set.<T>} This modified Set.
|
|
*/
|
|
retainAll(coll: Iterable<T>): Set<T>;
|
|
/**
|
|
* Clears the Set.
|
|
* This sets the #count to zero.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* Makes a shallow copy of this Set.
|
|
* The values are not copied,
|
|
* so if they are objects they may continue to be shared with the original Set.
|
|
* @expose
|
|
* @return {Set.<T>} The new Set with the same elements.
|
|
*/
|
|
copy(): Set<T>;
|
|
/**
|
|
* Produces a JavaScript Array from the contents of this Set.
|
|
* @return {Array.<T>} A copy of the Set in Array form.
|
|
*/
|
|
toArray(): Array<T>;
|
|
/**
|
|
* Converts the Set to a List.
|
|
* Because there is no ordering within a Set,
|
|
* the values in the List may be in any order.
|
|
* @return {List.<T>} A copy of the contents of this Set in List form.
|
|
*/
|
|
toList(): List<T>;
|
|
/**
|
|
* This read-only property is the number of elements in the Set.
|
|
*/
|
|
readonly count: number;
|
|
/**
|
|
* This read-only property is the number of elements in the Set.
|
|
*/
|
|
readonly size: number;
|
|
/**
|
|
* Gets an object that you can use for iterating over the Set.
|
|
* The value will be a member of the Set.
|
|
* Typical usage:
|
|
* ```js
|
|
* var it = aSet.iterator;
|
|
* while (it.next()) {
|
|
* . . . " value: " + it.value . . .
|
|
* }
|
|
* ```
|
|
*/
|
|
readonly iterator: Iterator<T>;
|
|
/**
|
|
* Undocumented.
|
|
* Set the unique hash ID for an object.
|
|
* This should be called at the beginning of each constructor that does not inherit from another class.
|
|
*/
|
|
static uniqueHash(obj: ObjectData): void;
|
|
/**
|
|
* Undocumented.
|
|
* Get the unique hash ID for an object, making it if necessary.
|
|
*/
|
|
static hashIdUnique(obj: ObjectData): number;
|
|
/**
|
|
* Undocumented.
|
|
* Get the unique hash ID for an object; may return undefined.
|
|
*/
|
|
static hashId(obj: ObjectData): number | undefined;
|
|
}
|
|
/**
|
|
* Undocumented
|
|
* @template K,V
|
|
* @unrestricted
|
|
*/
|
|
export class KeyValuePair<K, V> {
|
|
/**
|
|
* @param {K} k
|
|
* @param {V} v
|
|
*/
|
|
constructor(k: K, v: V);
|
|
/**
|
|
* @return {string}
|
|
*/
|
|
toString(): string;
|
|
/**
|
|
* Gets a key for a value in a Map.
|
|
* @return {K} the key uniquely identifying a #value in a Map.
|
|
*/
|
|
key: K;
|
|
/**
|
|
* Gets a value in a Map.
|
|
* @return {V} a value in a Map corresponding to a #key.
|
|
*/
|
|
value: V;
|
|
}
|
|
/**
|
|
* Undocumented.
|
|
* Iterating over Maps is very similar to an Iterator<KeyValuePair<K, V>>,
|
|
* but not exactly, because the type of the value property is V, not KeyValuePair<K, V>.
|
|
*/
|
|
export interface IMapIterator<K, T> {
|
|
/** @hidden */
|
|
iterator: IMapIterator<K, T>;
|
|
/** @hidden */
|
|
next(): boolean;
|
|
/** @hidden */
|
|
hasNext(): boolean;
|
|
/** @hidden */
|
|
first(): KeyValuePair<K, T> | null;
|
|
/** @hidden */
|
|
reset(): void;
|
|
/** @hidden */
|
|
any(pred: (x: KeyValuePair<K, T>) => boolean): boolean;
|
|
/** @hidden */
|
|
all(pred: (x: KeyValuePair<K, T>) => boolean): boolean;
|
|
/** @hidden */
|
|
each(func: (x: KeyValuePair<K, T>) => void): IMapIterator<K, T>;
|
|
/** @hidden */
|
|
map<S>(func: (x: KeyValuePair<K, T>) => S): Iterator<S>;
|
|
/** @hidden */
|
|
filter(pred: (x: KeyValuePair<K, T>) => boolean): Iterator<KeyValuePair<K, T>>;
|
|
/** @hidden */
|
|
readonly key: K;
|
|
/** @hidden */
|
|
readonly value: T;
|
|
/** @hidden */
|
|
readonly count: number;
|
|
}
|
|
/**
|
|
* <span style="color: red; font-weight: bold;">NOTE: For 2.0 the #constructor arguments have changed.
|
|
* Map now optionally accepts a collection, and only checks types in TypeScript.</span>
|
|
*
|
|
* An unordered iterable collection of key/value pairs that cannot contain two instances of the same key.
|
|
* In TypeScript it is a generic class that enforces at compile-time the type of the key and the type of the associated value.
|
|
*
|
|
* To create a Map:
|
|
* ```js
|
|
* var map = new go.Map(); // In TypeScript: new go.Map<string, number>();
|
|
* map.add("one", 1);
|
|
* map.add("two", 2);
|
|
* map.add("three", 3);
|
|
* // now map.count === 3
|
|
* // and map.getValue("two") === 2
|
|
* // and map.contains("zero") === false
|
|
* ```
|
|
*
|
|
* You can iterate over the key/value pairs in a Map:
|
|
* ```js
|
|
* var it = aMap.iterator;
|
|
* while (it.next()) {
|
|
* console.log(it.key + ": " + it.value);
|
|
* }
|
|
* ```
|
|
* Or:
|
|
* ```js
|
|
* aMap.each(function(kvp) {
|
|
* console.log(kvp.key + ": " + kvp.value);
|
|
* });
|
|
* ```
|
|
* But note that there is no guaranteed ordering amongst the key/value pairs.
|
|
*
|
|
* Call #toKeySet to get a read-only Set that holds all of the keys of a Map.
|
|
* Iterating over that Set will produce values that are the keys in the Map.
|
|
*
|
|
* Although not precisely implementing the features and semantics of the EcmaScript 6 **Map** class,
|
|
* this **GoJS** Map class has synonyms for the following methods and property:
|
|
* - **get(key)**: #getValue, but returns null instead of undefined when key is not present
|
|
* - **set(key,val)**: #add
|
|
* - **has(key)**: #contains
|
|
* - **delete(key)**: #remove
|
|
* - **clear()**: #clear
|
|
* - **size**: #count
|
|
*
|
|
* The constructor now takes an optional Iterable or Array argument that provides the initial entries for the new Map.
|
|
*
|
|
* Note that GoJS iteration is quite different than ES6 iteration, so that functionality has not been made somewhat compatible.
|
|
* These collection classes were defined in GoJS before the ES6 collection classes were proposed.
|
|
* @template K, V
|
|
* @unrestricted
|
|
* @category Collection
|
|
*/
|
|
export class Map<K, V> {
|
|
/**
|
|
* There are two possible constructors:
|
|
*
|
|
* `new go.Map()`, for JavaScript
|
|
*
|
|
* `new go.Map<K, V>()` for TypeScript
|
|
*
|
|
* In TypeScript, the two optional generic arguments describe the types of keys
|
|
* and the types of values that this Map may hold.
|
|
*
|
|
* For example, the expression:
|
|
* ```js
|
|
* // TypeScript:
|
|
* new go.Map<string, go.Point>()
|
|
* ```
|
|
* produces a Map that has keys that must be strings and whose associated values
|
|
* must be Points.
|
|
* @param {Iterable.<KeyValuePair.<K,V>>|Array.<KeyValuePair.<K,V>>=} coll an optional collection of keys/values to add, or an Array of { key: ..., value: ... } objects.
|
|
* Note that the key/value pairs are objects with "key" and "value" properties, not Arrays of length 2.
|
|
*/
|
|
constructor(coll?: Iterable<KeyValuePair<K, V>> | Array<KeyValuePair<K, V>> | Map<K, V>);
|
|
/**
|
|
* @return {string}
|
|
*/
|
|
toString(): string;
|
|
/**
|
|
* Adds a key-value association to the Map, or replaces the value associated with the key
|
|
* if the key was already present in the map.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {K} key The key or index for storing the value in the Map.
|
|
* @param {V} val The value to add to the Map, associated with the key.
|
|
* @return {Map.<K,V>} This modified Map.
|
|
*/
|
|
add(key: K, val: V): Map<K, V>;
|
|
/**
|
|
* Adds a key-value association to the Map, or replaces the value associated with the key
|
|
* if the key was already present in the map.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {K} key The key or index for storing the value in the Map.
|
|
* @param {V} val The value to add to the Map, associated with the key.
|
|
* @return {Map.<K,V>} This modified Map.
|
|
*/
|
|
set(key: K, val: V): Map<K, V>;
|
|
/**
|
|
* Adds all of the key-value pairs of another Map to this Map.
|
|
* If a key is already present in this Map,
|
|
* its value is replaced with the corresponding value from the given map.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {Iterable.<KeyValuePair.<K,V>>|Array.<KeyValuePair.<K,V>>} coll the collection of keys/values to add, or an Array of { key: ..., value: ... } objects.
|
|
* @return {Map.<K,V>} This modified Map.
|
|
*/
|
|
addAll(coll: Iterable<KeyValuePair<K, V>> | Array<KeyValuePair<K, V>> | Map<K, V>): Map<K, V>;
|
|
/**
|
|
* Returns the first key/value pair in the collection, or null if there is none.
|
|
* @return {KeyValuePair.<K,V>} This returns null if there are no items in the collection.
|
|
* @since 1.4
|
|
*/
|
|
first(): KeyValuePair<K, V>;
|
|
/**
|
|
* This is true if any invocation of the given predicate on items in the collection is true.
|
|
*
|
|
* Call the given predicate on each key/value pair in the collection.
|
|
* As soon as a call returns true, this returns true.
|
|
* Otherwise this returns false.
|
|
* For an empty collection this returns false.
|
|
* @expose
|
|
* @param {function(KeyValuePair.<K,V>):boolean} pred The argument to the predicate will be an object with both "key" and "value" properties.
|
|
* This function must not have any side-effects.
|
|
* @return {boolean} True if any predicate call is true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
any(pred: ((a: KeyValuePair<K, V>) => boolean)): boolean;
|
|
/**
|
|
* This is true if all invocations of the given predicate on items in the collection are true.
|
|
*
|
|
* Call the given predicate on each key/value pair in the collection.
|
|
* As soon as a call returns false, this returns false.
|
|
* Otherwise this returns true.
|
|
* For an empty collection this returns true.
|
|
* @expose
|
|
* @param {function(KeyValuePair.<K,V>):boolean} pred The argument to the predicate will be an object with both "key" and "value" properties.
|
|
* This function must not have any side-effects.
|
|
* @return {boolean} True if all predicate calls are true; false otherwise.
|
|
* @since 1.4
|
|
*/
|
|
all(pred: ((a: KeyValuePair<K, V>) => boolean)): boolean;
|
|
/**
|
|
* Call the given function on each key/value pair in the collection.
|
|
* @expose
|
|
* @param {function(KeyValuePair.<K,V>)} func The argument to the function will be an object with both "key" and "value" properties.
|
|
* This function must not modify the collection.
|
|
* @return {Map.<K,V>} This Map itself
|
|
* @since 1.4
|
|
*/
|
|
each(func: ((a: KeyValuePair<K, V>) => void)): Map<K, V>;
|
|
/**
|
|
* Call the given function on each key-value pair in the collection and associate the key with the result of the function in a new Map.
|
|
*
|
|
* Unlike Iterator#map, this returns a Map, not an Iterator.
|
|
* @expose
|
|
* @param {function(KeyValuePair.<K,V>):*} func The argument to the function will be an object with both "key" and "value" properties.
|
|
* This function must not modify the collection.
|
|
* @return {Map.<K,S>} a new Map with the same keys but values produced by the function
|
|
*/
|
|
map<S>(func: ((a: KeyValuePair<K, V>) => S)): Map<K, S>;
|
|
/**
|
|
* Call the given predicate on each key-value pair in the collection and for each pair that it returns true, add the key-value association in a new Map.
|
|
*
|
|
* Unlike Iterator#filter, this returns a Map, not an Iterator.
|
|
* @expose
|
|
* @param {function(KeyValuePair.<K,V>):boolean} pred This function must not have any side-effects.
|
|
* @return {Map.<K,V>}
|
|
*/
|
|
filter(pred: ((a: KeyValuePair<K, V>) => boolean)): Map<K, V>;
|
|
/**
|
|
* Returns whether the given key is in this Map.
|
|
* @param {K} key The key to look up in the Map.
|
|
* @return {boolean} Whether or not the key is contained within the Map.
|
|
*/
|
|
contains(key: K): boolean;
|
|
/**
|
|
* Returns whether the given key is in this Map.
|
|
* @param {K} key The key to look up in the Map.
|
|
* @return {boolean} Whether or not the key is contained within the Map.
|
|
*/
|
|
has(key: K): boolean;
|
|
/**
|
|
* Returns the value associated with a key.
|
|
* @param {K} key The key to look up in the Map.
|
|
* @return {V|null} The value associated with the given key, or null if not present in the Map.
|
|
*/
|
|
getValue(key: K): V | null;
|
|
/**
|
|
* Returns the value associated with a key.
|
|
* @param {K} key The key to look up in the Map.
|
|
* @return {V|null} The value associated with the given key, or null if not present in the Map.
|
|
*/
|
|
get(key: K): V | null;
|
|
/**
|
|
* Removes a key (if found) from the Map.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {K} key The key to remove.
|
|
* @return {boolean} true if the key was found and removed, false otherwise.
|
|
*/
|
|
remove(key: K): boolean;
|
|
/**
|
|
* Removes a key (if found) from the Map.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
* @param {K} key The key to insert.
|
|
* @return {boolean} true if the key was found and removed, false otherwise.
|
|
*/
|
|
delete(key: K): boolean;
|
|
/**
|
|
* Clears the Map, removing all key-value associations.
|
|
* This sets the #count to zero.
|
|
*
|
|
* Be careful not to call this method while iterating over the collection.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* Makes a shallow copy of this Map.
|
|
* The keys and their values are not copied,
|
|
* so if they are objects they may continue to be shared with the original Map.
|
|
* @expose
|
|
* @return {Map.<K,V>} The new Map with copies of the same entries.
|
|
*/
|
|
copy(): Map<K, V>;
|
|
/**
|
|
* Produces a JavaScript Array of key/value pair objects from the contents of this Map.
|
|
* @return {Array.<KeyValuePair.<K,V>>} A copy of the Map in Array form,
|
|
* each element being an Object with 'key' and 'value' properties.
|
|
*/
|
|
toArray(): Array<KeyValuePair<K, V>>;
|
|
/**
|
|
* Produces a Set that provides a read-only view onto the keys of this Map.
|
|
* The collection of keys is not copied.
|
|
* @return {Set.<K>}
|
|
*/
|
|
toKeySet(): Set<K>;
|
|
/**
|
|
* This read-only property is the number of associations in the Map.
|
|
*/
|
|
readonly count: number;
|
|
/**
|
|
* This read-only property is the number of associations in the Map.
|
|
*/
|
|
readonly size: number;
|
|
/**
|
|
* Gets an object that you can use for iterating over the key-value pairs of a Map.
|
|
* Typical usage:
|
|
* ```js
|
|
* var it = aMap.iterator;
|
|
* while (it.next()) {
|
|
* console.log("the key: " + it.key + " has value: " + it.value);
|
|
* }
|
|
* ```
|
|
*/
|
|
readonly iterator: IMapIterator<K, V>;
|
|
/**
|
|
* Gets an object that you can use for iterating over the keys of a Map.
|
|
* Typical usage:
|
|
* ```js
|
|
* var it = aMap.iteratorKeys;
|
|
* while (it.next()) {
|
|
* console.log("key: " + it.value);
|
|
* }
|
|
* ```
|
|
* @since 1.4
|
|
*/
|
|
readonly iteratorKeys: Iterator<K>;
|
|
/**
|
|
* Gets an object that you can use for iterating over the values of a Map.
|
|
* Typical usage:
|
|
* ```js
|
|
* var it = aMap.iteratorValues;
|
|
* while (it.next()) {
|
|
* console.log("value: " + it.value);
|
|
* }
|
|
* ```
|
|
* @since 1.4
|
|
*/
|
|
readonly iteratorValues: Iterator<V>;
|
|
}
|
|
/**
|
|
* A Point represents an x- and y-coordinate pair in two-dimensional space.
|
|
*
|
|
* Use the static functions Point.parse and Point.stringify to convert to and from
|
|
* a standard string representation that is independent of the current locale.
|
|
*
|
|
* When an instance of this class is the value of a property of a GraphObject class or Diagram
|
|
* or CommandHandler or a Tool class, you should treat the object
|
|
* as if it were frozen or read-only -- you cannot modify its properties.
|
|
* This allows the property to return a value without allocating a new instance.
|
|
* If you need to do your own calculations with the value, call #copy to make
|
|
* a new instance with the same values that you can modify.
|
|
*
|
|
* Many methods modify the object's properties and then return a reference to "this" object.
|
|
* The only instance method to allocate a new object is the #copy method.
|
|
* The static Point.parse method also allocates a new object.
|
|
*
|
|
* The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
* mostly due to additional error checking.
|
|
*
|
|
* You cannot inherit from this class.
|
|
* @category Geometry
|
|
*/
|
|
export class Point {
|
|
/**
|
|
* The default constructor produces the Point(0,0).
|
|
* This constructor may take either zero arguments or two arguments.
|
|
* @param {number=} x The x value.
|
|
* @param {number=} y The y value.
|
|
*/
|
|
constructor(x?: number, y?: number);
|
|
/**
|
|
* Modify this Point with new X and Y values.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {Point} this.
|
|
*/
|
|
setTo(x: number, y: number): Point;
|
|
/**
|
|
* Modify this Point so that its X and Y values are the same as the given Point.
|
|
* @param {Point} p the given Point.
|
|
* @return {Point} this.
|
|
*/
|
|
set(p: Point): Point;
|
|
/**
|
|
* Create a copy of this Point, with the same values.
|
|
* @expose
|
|
* @return {Point}
|
|
*/
|
|
copy(): Point;
|
|
/**
|
|
* This static function can be used to read in a Point from a string that was produced by Point.stringify.
|
|
*
|
|
* `go.Point.parse("1 2")` produces the Point `new go.Point(1, 2)`.
|
|
* @param {string} str
|
|
* @return {Point}
|
|
*/
|
|
static parse(str: string): Point;
|
|
/**
|
|
* This static function can be used to write out a Point as a string that can be read by Point.parse.
|
|
*
|
|
* `go.Point.stringify(new go.Point(1, 2))` produces the string "1 2".
|
|
* @param {Point} val
|
|
* @return {string}
|
|
*/
|
|
static stringify(val: Point): string;
|
|
/**
|
|
* Indicates whether the given Point is equal to this Point.
|
|
* @param {Point} p The Point to compare to the current Point.
|
|
* @return {boolean} True if the two Points have identical X and Y values,
|
|
* false otherwise.
|
|
* @see #equalTo
|
|
*/
|
|
equals(p: Point): boolean;
|
|
/**
|
|
* Indicates whether the given point (x, y) is equal to this Point.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {boolean} True if the two Points have identical X and Y values,
|
|
* false otherwise.
|
|
* @see #equals
|
|
*/
|
|
equalTo(x: number, y: number): boolean;
|
|
/**
|
|
* Undocumented
|
|
* @param {Point} p The Point to compare to the current Point.
|
|
* @return {boolean} True if the two Points have X and Y values that
|
|
* are equal with a tolerance of 0.5, false otherwise.
|
|
*/
|
|
equalsApprox(p: Point): boolean;
|
|
/**
|
|
* Modify this point so that is the sum of the current Point and the
|
|
* x and y co-ordinates of the given Point.
|
|
* @param {Point} p The Point to add to this Point.
|
|
* @return {Point} this.
|
|
* @see #offset
|
|
* @see #subtract
|
|
*/
|
|
add(p: Point): Point;
|
|
/**
|
|
* Modify this point so that is the difference of this Point and the
|
|
* x and y co-ordinates of the given Point.
|
|
* @param {Point} p The Point to subtract from the current Point.
|
|
* @return {Point} this.
|
|
* @see #offset
|
|
* @see #add
|
|
*/
|
|
subtract(p: Point): Point;
|
|
/**
|
|
* Modify this point by shifting its values with the given DX and DY offsets.
|
|
* @param {number} dx
|
|
* @param {number} dy
|
|
* @return {Point} this.
|
|
* @see #add
|
|
* @see #subtract
|
|
*/
|
|
offset(dx: number, dy: number): Point;
|
|
/**
|
|
* Modify this Point so that has been rotated about the origin by the given angle.
|
|
* @param {number} angle an angle in degrees.
|
|
* @return {Point} this.
|
|
*/
|
|
rotate(angle: number): Point;
|
|
/**
|
|
* Modify this Point so that its X and Y values have been scaled by given factors along the X and Y axes.
|
|
* @param {number} sx
|
|
* @param {number} sy
|
|
* @return {Point} this.
|
|
*/
|
|
scale(sx: number, sy: number): Point;
|
|
/**
|
|
* Returns the square of the distance from this Point to a given Point.
|
|
* @param {Point} p the other Point to measure to.
|
|
* @return {number} the square of the euclidean distance.
|
|
* @see #distanceSquared
|
|
*/
|
|
distanceSquaredPoint(p: Point): number;
|
|
/**
|
|
* Returns the square of the distance from this point to a given point (px, py).
|
|
* @param {number} px
|
|
* @param {number} py
|
|
* @return {number} the square of the euclidean distance.
|
|
* @see #distanceSquaredPoint
|
|
*/
|
|
distanceSquared(px: number, py: number): number;
|
|
/**
|
|
* Modify this Point so that its X and Y values have been normalized to a unit length.
|
|
* However, if this Point is the origin (zero, zero), its length remains zero.
|
|
* @return {Point} this.
|
|
*/
|
|
normalize(): Point;
|
|
/**
|
|
* Compute the angle from this Point to a given Point.
|
|
* However, if the given Point is the same as this Point, the direction is zero.
|
|
* @param {Point} p the other Point to which to measure the relative angle.
|
|
* @return {number} the angle, in degrees, of the line from this Point to the given point.
|
|
* @see #direction
|
|
*/
|
|
directionPoint(p: Point): number;
|
|
/**
|
|
* Compute the angle from this Point to a given (px,py) point.
|
|
* However, if the point is the same as this Point, the direction is zero.
|
|
* @param {number} px
|
|
* @param {number} py
|
|
* @return {number} the angle, in degrees, of the line from this Point to the given point.
|
|
* @see #directionPoint
|
|
*/
|
|
direction(px: number, py: number): number;
|
|
/**
|
|
* Undocumented.
|
|
* This static function is true if two finite straight line segments intersect each other.
|
|
* @param {number} a1x
|
|
* @param {number} a1y
|
|
* @param {number} a2x
|
|
* @param {number} a2y
|
|
* @param {number} b1x
|
|
* @param {number} b1y
|
|
* @param {number} b2x
|
|
* @param {number} b2y
|
|
* @return {boolean} True if the two given finite line segments intersect with each other, false otherwise.
|
|
*/
|
|
static intersectingLineSegments(a1x: number, a1y: number, a2x: number, a2y: number, b1x: number, b1y: number, b2x: number, b2y: number): boolean;
|
|
/**
|
|
* Modify this point to be the closest point to this point that is on a finite line segment.
|
|
* @param {number} px one end of the finite line segment
|
|
* @param {number} py one end of the finite line segment
|
|
* @param {number} qx the other end of the finite line segment
|
|
* @param {number} qy the other end of the finite line segment
|
|
* @return {Point} this modified Point
|
|
* @since 1.3
|
|
*/
|
|
projectOntoLineSegment(px: number, py: number, qx: number, qy: number): Point;
|
|
/**
|
|
* Modify this point to be the closest point to this point that is on a finite line segment.
|
|
* @param {Point} p one end of the finite line segment
|
|
* @param {Point} q the other end of the finite line segment
|
|
* @return {Point} this modified Point
|
|
* @since 1.3
|
|
*/
|
|
projectOntoLineSegmentPoint(p: Point, q: Point): Point;
|
|
/**
|
|
* Modify this point to be at the nearest point on an infinite grid,
|
|
* given the grid's origin and size of each grid cell.
|
|
* @param {number} originx the top-left point of one of the grid cells
|
|
* @param {number} originy the top-left point of one of the grid cells
|
|
* @param {number} cellwidth the size of each grid cell -- must be a real number larger than zero
|
|
* @param {number} cellheight the size of each grid cell -- must be a real number larger than zero
|
|
* @return {Point} this modified Point
|
|
* @since 1.3
|
|
*/
|
|
snapToGrid(originx: number, originy: number, cellwidth: number, cellheight: number): Point;
|
|
/**
|
|
* Modify this point to be at the nearest point on an infinite grid,
|
|
* given the grid's origin and size of each grid cell.
|
|
* @param {Point} origin the top-left point of one of the grid cells
|
|
* @param {Size} cellsize the size of each grid cell
|
|
* @return {Point} this modified Point
|
|
* @since 1.3
|
|
*/
|
|
snapToGridPoint(origin: Point, cellsize: Size): Point;
|
|
/**
|
|
* Modify this Point so that its X and Y values correspond to a particular Spot
|
|
* in a given Rect.
|
|
*
|
|
* The result is meaningless if Spot#isNoSpot is true for the given Spot.
|
|
* @param {Rect} r the Rect for which we are finding the point.
|
|
* @param {Spot} spot the Spot; Spot#isSpot must be true for this Spot.
|
|
* @return {Point} this.
|
|
* @see #setSpot
|
|
*/
|
|
setRectSpot(r: Rect, spot: Spot): Point;
|
|
/**
|
|
* Modify this Point so that its X and Y values correspond to a particular Spot
|
|
* in a given rectangle.
|
|
*
|
|
* The result is meaningless if Spot#isNoSpot is true for the given Spot.
|
|
* @param {number} x The X coordinate of the Rect for which we are finding the point.
|
|
* @param {number} y The Y coordinate of the Rect for which we are finding the point.
|
|
* @param {number} w The Width of the Rect for which we are finding the point.
|
|
* @param {number} h The Height of the Rect for which we are finding the point.
|
|
* @param {Spot} spot the Spot; Spot#isSpot must be true for this Spot.
|
|
* @return {Point} this the point of the spot in the rectangle.
|
|
* @see #setRectSpot
|
|
*/
|
|
setSpot(x: number, y: number, w: number, h: number, spot: Spot): Point;
|
|
/**
|
|
* This static function returns the square of the distance from the point P
|
|
* to the finite line segment from point A to point B.
|
|
* @param {number} px
|
|
* @param {number} py
|
|
* @param {number} ax
|
|
* @param {number} ay
|
|
* @param {number} bx
|
|
* @param {number} by
|
|
* @return {number} the euclidean distance.
|
|
*/
|
|
static distanceLineSegmentSquared(px: number, py: number, ax: number, ay: number, bx: number, by: number): number;
|
|
/**
|
|
* This static function returns the square of the distance from the point P to the point Q.
|
|
* @param {number} px
|
|
* @param {number} py
|
|
* @param {number} qx
|
|
* @param {number} qy
|
|
* @return {number}
|
|
*/
|
|
static distanceSquared(px: number, py: number, qx: number, qy: number): number;
|
|
/**
|
|
* This static function returns the angle in degrees of the line from point P to point Q.
|
|
* @param {number} px
|
|
* @param {number} py
|
|
* @param {number} qx
|
|
* @param {number} qy
|
|
* @return {number}
|
|
*/
|
|
static direction(px: number, py: number, qx: number, qy: number): number;
|
|
/**
|
|
* Gets or sets the x value of the Point.
|
|
*/
|
|
x: number;
|
|
/**
|
|
* Gets or sets the y value of the Point.
|
|
*/
|
|
y: number;
|
|
/**
|
|
* True if this Point has X and Y values that are real numbers and not infinity.
|
|
* @return {boolean}
|
|
*/
|
|
isReal(): boolean;
|
|
/**
|
|
* @expose
|
|
* @return {Point}
|
|
*/
|
|
static alloc(): Point;
|
|
/**
|
|
* @expose
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {Point}
|
|
*/
|
|
static allocAt(x: number, y: number): Point;
|
|
/**
|
|
* @expose
|
|
* @param {Point} temp
|
|
*/
|
|
static free(temp: Point): void;
|
|
}
|
|
/**
|
|
* A Size describes a width and a height in two-dimensional coordinates.
|
|
* The width and height must both be non-negative.
|
|
*
|
|
* Use the static functions Size.parse and Size.stringify to convert to and from
|
|
* a standard string representation that is independent of the current locale.
|
|
*
|
|
* When an instance of this class is the value of a property of a GraphObject class or Diagram
|
|
* or CommandHandler or a Tool class, you should treat the object
|
|
* as if it were frozen or read-only -- you cannot modify its properties.
|
|
* This allows the property to return a value without allocating a new instance.
|
|
* If you need to do your own calculations with the value, call #copy to make
|
|
* a new instance with the same values that you can modify.
|
|
*
|
|
* Many methods modify the object's properties and then return a reference to "this" object.
|
|
* The only instance method to allocate a new object is the #copy method.
|
|
* The static Size.parse method also allocates a new object.
|
|
*
|
|
* The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
* mostly due to additional error checking.
|
|
*
|
|
* You cannot inherit from this class.
|
|
* @category Geometry
|
|
*/
|
|
export class Size {
|
|
/**
|
|
* The default constructor produces the Size(0,0).
|
|
* This constructor may take either zero arguments or two arguments.
|
|
* @param {number=} w The initial width (must be non-negative).
|
|
* @param {number=} h The initial height (must be non-negative).
|
|
*/
|
|
constructor(w?: number, h?: number);
|
|
/**
|
|
* Modify this Size with new Width and Height values.
|
|
* @param {number} w the width.
|
|
* @param {number} h the height.
|
|
* @return {Size} this.
|
|
*/
|
|
setTo(w: number, h: number): Size;
|
|
/**
|
|
* Modify this Size so that its Width and Height values are the same as the given Size.
|
|
* @param {Size} s the given Size.
|
|
* @return {Size} this.
|
|
*/
|
|
set(s: Size): Size;
|
|
/**
|
|
* Create a copy of this Size, with the same values.
|
|
* @expose
|
|
* @return {Size}
|
|
*/
|
|
copy(): Size;
|
|
/**
|
|
* This static function can be used to read in a Size from a string that was produced by Size.stringify.
|
|
*
|
|
* `go.Size.parse("1 2")` produces the Size `new go.Size(1, 2)`.
|
|
* @param {string} str
|
|
* @return {Size}
|
|
*/
|
|
static parse(str: string): Size;
|
|
/**
|
|
* This static function can be used to write out a Size as a string that can be read by Size.parse.
|
|
*
|
|
* `go.Size.stringify(new go.Size(1, 2))` produces the string "1 2".
|
|
* @param {Size} val
|
|
* @return {string}
|
|
*/
|
|
static stringify(val: Size): string;
|
|
/**
|
|
* Indicates whether the given Size is equal to the current Size.
|
|
* @param {Size} s The Size to compare to the current Size.
|
|
* @return {boolean} True if the Sizes have the same width and height,
|
|
* false otherwise.
|
|
* @see #equalTo
|
|
*/
|
|
equals(s: Size): boolean;
|
|
/**
|
|
* Indicates whether the given size is equal to this Size.
|
|
* @param {number} w the width.
|
|
* @param {number} h the height.
|
|
* @return {boolean} True if the Sizes have the same width and height,
|
|
* false otherwise.
|
|
* @see #equals
|
|
*/
|
|
equalTo(w: number, h: number): boolean;
|
|
/**
|
|
* Undocumented
|
|
* @param {Size} s The Size to compare to the current Size.
|
|
* @return {boolean} True if the two Sizes have Width and Height values that
|
|
* are equal with a tolerance of 0.5, false otherwise.
|
|
*/
|
|
equalsApprox(s: Size): boolean;
|
|
/**
|
|
* Gets or sets the width value of the Size.
|
|
* The value must not be negative.
|
|
*/
|
|
width: number;
|
|
/**
|
|
* Gets or sets the height value of the Size.
|
|
* The value must not be negative.
|
|
*/
|
|
height: number;
|
|
/**
|
|
* True if this Size has Width and Height values that are real numbers and not infinity.
|
|
* @return {boolean}
|
|
*/
|
|
isReal(): boolean;
|
|
/**
|
|
* @return {Size}
|
|
*/
|
|
static alloc(): Size;
|
|
/**
|
|
* @param {Size} temp
|
|
*/
|
|
static free(temp: Size): void;
|
|
}
|
|
/**
|
|
* A Rect describes a rectangular two-dimensional area as a top-left point (x and y values)
|
|
* and a size (width and height values).
|
|
*
|
|
* Use the static functions Rect.parse and Rect.stringify to convert to and from
|
|
* a standard string representation that is independent of the current locale.
|
|
*
|
|
* When an instance of this class is the value of a property of a GraphObject class or Diagram
|
|
* or CommandHandler or a Tool class, you should treat the object
|
|
* as if it were frozen or read-only -- you cannot modify its properties.
|
|
* This allows the property to return a value without allocating a new instance.
|
|
* If you need to do your own calculations with the value, call #copy to make
|
|
* a new instance with the same values that you can modify.
|
|
*
|
|
* Many methods modify the object's properties and then return a reference to "this" object.
|
|
* The only instance method to allocate a new object is the #copy method.
|
|
* The static Rect.parse method also allocates a new object.
|
|
* The #center, #position, and #size properties all allocate and return a new object.
|
|
*
|
|
* The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
* mostly due to additional error checking.
|
|
*
|
|
* You cannot inherit from this class.
|
|
* @category Geometry
|
|
*/
|
|
export class Rect {
|
|
/**
|
|
* There are four constructors: (), (Point, Point), (Point, Size),
|
|
* and four numbers for (x, y, width, height).
|
|
* The default constructor (no argument) results in a Rect(0,0,0,0).
|
|
* @param {Point|number=} x Top-left Point, or x value.
|
|
* @param {Point|Size|number=} y Bottom-right Point or Size or y value.
|
|
* @param {number=} w Width to be used if x,y are specified;
|
|
* must be non-negative.
|
|
* @param {number=} h Height to be used if x,y are specified;
|
|
* must be non-negative.
|
|
*/
|
|
constructor(x?: Point | number, y?: Point | Size | number, w?: number, h?: number);
|
|
/**
|
|
* Modify this Rect with new X, Y, Width, and Height values.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} w the width.
|
|
* @param {number} h the height.
|
|
* @return {Rect} this.
|
|
*/
|
|
setTo(x: number, y: number, w: number, h: number): Rect;
|
|
/**
|
|
* Modify this Rect so that its X, Y, Width, and Height values are the same as the given Rect.
|
|
* @param {Rect} r the given Rect.
|
|
* @return {Rect} this.
|
|
*/
|
|
set(r: Rect): Rect;
|
|
/**
|
|
* Modify this Rect so that its X and Y values are the same as the given Point.
|
|
* @param {Point} p the given Point.
|
|
* @return {Rect} this.
|
|
*/
|
|
setPoint(p: Point): Rect;
|
|
/**
|
|
* Modify this Rect so that its Width and Height values are the same as the given Size.
|
|
* @param {Size} s the given Size.
|
|
* @return {Rect} this.
|
|
*/
|
|
setSize(s: Size): Rect;
|
|
/**
|
|
* Create a copy of this Rect, with the same values.
|
|
* @expose
|
|
* @return {Rect}
|
|
*/
|
|
copy(): Rect;
|
|
/**
|
|
* This static function can be used to read in a Rect from a string that was produced by Rect.stringify.
|
|
*
|
|
* `go.Rect.parse("1 2 3 4")` produces the Rect `new go.Rect(1, 2, 3, 4)`.
|
|
* @param {string} str
|
|
* @return {Rect}
|
|
*/
|
|
static parse(str: string): Rect;
|
|
/**
|
|
* This static function can be used to write out a Rect as a string that can be read by Rect.parse.
|
|
*
|
|
* `go.Rect.stringify(new go.Rect(1, 2, 3, 4))` produces the string "1 2 3 4".
|
|
* @param {Rect} val
|
|
* @return {string}
|
|
*/
|
|
static stringify(val: Rect): string;
|
|
/**
|
|
* Indicates whether the given Rect is equal to the current Rect.
|
|
* @param {Rect} r The rectangle to compare to the current rectangle.
|
|
* @return {boolean} True if the Rects are equivalent in x, y, width,
|
|
* and height.
|
|
* @see #equalTo
|
|
*/
|
|
equals(r: Rect): boolean;
|
|
/**
|
|
* Indicates whether the given Rect is equal to the current Rect.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} w the width.
|
|
* @param {number} h the height.
|
|
* @return {boolean} True if the Rects are equivalent in x, y, width, and height.
|
|
* @see #equals
|
|
*/
|
|
equalTo(x: number, y: number, w: number, h: number): boolean;
|
|
/**
|
|
* Undocumented
|
|
* @param {Rect} r The Rect to compare to the current Rect.
|
|
* @return {boolean} True if the two Rects have respective X, Y, Width,
|
|
* and Height values within 0.5, false otherwise.
|
|
*/
|
|
equalsApprox(r: Rect): boolean;
|
|
/**
|
|
* Indicates whether this Rect contains the given Point.
|
|
* @param {Point} p The Point to check.
|
|
* @return {boolean} True if the Point is contained within this Rect,
|
|
* false otherwise.
|
|
* @see #containsRect
|
|
* @see #contains
|
|
*/
|
|
containsPoint(p: Point): boolean;
|
|
/**
|
|
* Indicates whether this Rect contains the given Rect.
|
|
* @param {Rect} r The Rect to check.
|
|
* @return {boolean} True if the Rect is contained within this Rect,
|
|
* false otherwise.
|
|
* @see #containsPoint
|
|
* @see #contains
|
|
*/
|
|
containsRect(r: Rect): boolean;
|
|
/**
|
|
* Indicates whether this Rect contains the given Point/Rect.
|
|
* @param {number} x The X coordinate of the Point or Rect to include in the new bounds.
|
|
* @param {number} y The Y coordinate of the Point or Rect to include in the new bounds.
|
|
* @param {number=} w The Width of the Rect to include in the new bounds, defaults to zero.
|
|
* @param {number=} h The Height of the Rect to include in the new bounds, defaults to zero.
|
|
* @return {boolean} True if the Point/Rect is contained within this Rect,
|
|
* false otherwise.
|
|
* @see #containsRect
|
|
* @see #containsPoint
|
|
*/
|
|
contains(x: number, y: number, w?: number, h?: number): boolean;
|
|
/**
|
|
* Modify this Rect by shifting its values with the given DX and DY offsets.
|
|
* @param {number} dx
|
|
* @param {number} dy
|
|
* @return {Rect} this.
|
|
*/
|
|
offset(dx: number, dy: number): Rect;
|
|
/**
|
|
* Modify this Rect so that its width and height are changed on all four sides,
|
|
* equally on the left and right sides, and equally on the top and bottom sides.
|
|
* When the arguments are negative, this operation deflates this Rect, but not beyond zero.
|
|
* @param {number} w The additional width on each side, left and right; may be negative.
|
|
* @param {number} h The additional height on each side, top and bottom; may be negative.
|
|
* @return {Rect} this.
|
|
* @see #grow
|
|
* @see #addMargin
|
|
* @see #subtractMargin
|
|
*/
|
|
inflate(w: number, h: number): Rect;
|
|
/**
|
|
* Modify this Rect by adding the given Margin to each side of the Rect.
|
|
* @param {Margin} m The Margin to add to the Rect.
|
|
* @return {Rect} this bigger Rect.
|
|
* @see #subtractMargin
|
|
* @see #grow
|
|
* @see #inflate
|
|
*/
|
|
addMargin(m: Margin): Rect;
|
|
/**
|
|
* Modify this Rect by subtracting the given Margin from each side of the Rect.
|
|
* @param {Margin} m The Margin to subtract from the Rect.
|
|
* @return {Rect} this smaller Rect.
|
|
* @see #addMargin
|
|
* @see #grow
|
|
* @see #inflate
|
|
*/
|
|
subtractMargin(m: Margin): Rect;
|
|
/**
|
|
* Modifies this Rect by adding some distance to each side of the Rect.
|
|
* @param {number} t the amount to move the top side upwards; may be negative.
|
|
* @param {number} r the amount to move the right side rightwards; may be negative.
|
|
* @param {number} b the amount to move the bottom side downwards; may be negative.
|
|
* @param {number} l the amount to move the left side leftwards; may be negative.
|
|
* @return {Rect} this modified Rect.
|
|
* @see #inflate
|
|
* @see #addMargin
|
|
* @see #subtractMargin
|
|
*/
|
|
grow(t: number, r: number, b: number, l: number): Rect;
|
|
/**
|
|
* Modify this Rect so that it is the intersection of this Rect and the given Rect.
|
|
* @param {Rect} r Rect to intersect with.
|
|
* @return {Rect} this.
|
|
* @see #intersect
|
|
* @see #intersects
|
|
*/
|
|
intersectRect(r: Rect): Rect;
|
|
/**
|
|
* Modify this Rect so that it is the intersection of this Rect and the rectangle
|
|
* defined by x, y, w, h.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} w
|
|
* @param {number} h
|
|
* @return {Rect} this.
|
|
* @see #intersectRect
|
|
* @see #intersects
|
|
*/
|
|
intersect(x: number, y: number, w: number, h: number): Rect;
|
|
/**
|
|
* Determine if a given Rect is partly or wholly inside of this Rect.
|
|
* @param {Rect} r Rect to test intersection with.
|
|
* @return {boolean} true if there is an intersection.
|
|
* @see #intersects
|
|
* @see #intersectRect
|
|
*/
|
|
intersectsRect(r: Rect): boolean;
|
|
/**
|
|
* Determine if this Rect partly or wholly overlaps the rectangle
|
|
* defined by x, y, w, h.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} w
|
|
* @param {number} h
|
|
* @return {boolean} true if there is any overlap.
|
|
* @see #intersectsRect
|
|
* @see #intersect
|
|
*/
|
|
intersects(x: number, y: number, w: number, h: number): boolean;
|
|
/**
|
|
* Modify this Rect to be exactly big enough to contain both the original Rect and the given Point.
|
|
* @param {Point} p The Point to include in the new bounds.
|
|
* @return {Rect} this.
|
|
* @see #unionRect
|
|
* @see #union
|
|
*/
|
|
unionPoint(p: Point): Rect;
|
|
/**
|
|
* Modify this Rect to be exactly big enough to contain this Rect and the given Rect.
|
|
* @param {Rect} r The Rect to include in the new bounds.
|
|
* @return {Rect} this.
|
|
* @see #unionPoint
|
|
* @see #union
|
|
*/
|
|
unionRect(r: Rect): Rect;
|
|
/**
|
|
* Modify this Rect to be exactly big enough to contain both the original Rect and the given rectangular area.
|
|
* @param {number} x The X coordinate of the Point or Rect to include in the new bounds.
|
|
* @param {number} y The Y coordinate of the Point or Rect to include in the new bounds.
|
|
* @param {number=} w The Width of the Rect to include in the new bounds, defaults to zero.
|
|
* @param {number=} h The Height of the Rect to include in the new bounds, defaults to zero.
|
|
* @return {Rect} this.
|
|
* @see #unionRect
|
|
* @see #unionPoint
|
|
*/
|
|
union(x: number, y: number, w?: number, h?: number): Rect;
|
|
/**
|
|
* Modify this Rect so that a given Spot is at a given (x,y) point using this Rect's size.
|
|
* Return this rectangle for which the spot is at that point, without modifying the size.
|
|
*
|
|
* The result is meaningless if Spot#isNoSpot is true.
|
|
* @param {number} x the point where the spot should be.
|
|
* @param {number} y the point where the spot should be.
|
|
* @param {Spot} spot a Spot; Spot#isSpot must be true.
|
|
* @return {Rect} this.
|
|
*/
|
|
setSpot(x: number, y: number, spot: Spot): Rect;
|
|
/**
|
|
* This static function indicates whether a Rect contains the given Point/Rect.
|
|
* @param {number} rx The X coordinate of a Rect.
|
|
* @param {number} ry The Y coordinate of a Rect.
|
|
* @param {number} rw The Width of a Rect.
|
|
* @param {number} rh The Height of a Rect.
|
|
* @param {number} x The X coordinate of the Point or Rect that might be in the bounds (RX, RY, RW, RH).
|
|
* @param {number} y The Y coordinate of the Point or Rect that might be in the bounds (RX, RY, RW, RH).
|
|
* @param {number=} w The Width of the Rect to include in the new bounds, defaults to zero.
|
|
* @param {number=} h The Height of the Rect to include in the new bounds, defaults to zero.
|
|
* @return {boolean} True if the Point/Rect is contained within this Rect,
|
|
* false otherwise.
|
|
*/
|
|
static contains(rx: number, ry: number, rw: number, rh: number, x: number, y: number, w?: number, h?: number): boolean;
|
|
/**
|
|
* This static function indicates whether a Rect partly or wholly overlaps the given Rect.
|
|
* @param {number} rx The X coordinate of a Rect.
|
|
* @param {number} ry The Y coordinate of a Rect.
|
|
* @param {number} rw The Width of a Rect.
|
|
* @param {number} rh The Height of a Rect.
|
|
* @param {number} x The X coordinate of the Point or Rect that might overlap the bounds (RX, RY, RW, RH).
|
|
* @param {number} y The Y coordinate of the Point or Rect that might overlap the bounds (RX, RY, RW, RH).
|
|
* @param {number} w
|
|
* @param {number} h
|
|
* @return {boolean} true if there is any overlap.
|
|
*/
|
|
static intersects(rx: number, ry: number, rw: number, rh: number, x: number, y: number, w: number, h: number): boolean;
|
|
/**
|
|
* Undocumented.
|
|
* This static function is true if a rectangular area is intersected by a finite straight line segment.
|
|
* @param {number} x The X coordinate of the rectangle to check for intersection with the line segment.
|
|
* @param {number} y The Y coordinate of the rectangle to check for intersection with the line segment.
|
|
* @param {number} w The Width of the rectangle to check for intersection with the line segment.
|
|
* @param {number} h The Height of the rectangle to check for intersection with the line segment.
|
|
* @param {number} p1x The X coordinate of one end of the line segment.
|
|
* @param {number} p1y The Y coordinate of one end of the line segment.
|
|
* @param {number} p2x The X coordinate of other end of the line segment.
|
|
* @param {number} p2y The Y coordinate of other end of the line segment.
|
|
* @return {boolean} True if the given finite line segment intersects with the given rectangular area, false otherwise.
|
|
*/
|
|
static intersectsLineSegment(x: number, y: number, w: number, h: number, p1x: number, p1y: number, p2x: number, p2y: number): boolean;
|
|
/**
|
|
* Gets or sets the top-left x coordinate of the Rect.
|
|
*/
|
|
x: number;
|
|
/**
|
|
* Gets or sets the top-left y coordinate of the Rect.
|
|
*/
|
|
y: number;
|
|
/**
|
|
* Gets or sets the width of the Rect.
|
|
* The value must not be negative.
|
|
*/
|
|
width: number;
|
|
/**
|
|
* Gets or sets the height of the Rect.
|
|
* The value must not be negative.
|
|
*/
|
|
height: number;
|
|
/**
|
|
* Gets or sets the leftmost value of the Rect.
|
|
* This is the same as the X value.
|
|
*/
|
|
left: number;
|
|
/**
|
|
* Gets or sets the topmost value of the Rect.
|
|
* This is the same as the Y value.
|
|
*/
|
|
top: number;
|
|
/**
|
|
* Gets or sets the x-axis value of the right of the Rect.
|
|
* This is equal to the sum of the x value and the width.
|
|
*/
|
|
right: number;
|
|
/**
|
|
* Gets or sets the y-axis value of the bottom of the Rect.
|
|
* This is equal to the sum of the y value and the height.
|
|
*/
|
|
bottom: number;
|
|
/**
|
|
* Gets or sets the x- and y-axis position of the Rect as a Point.
|
|
*/
|
|
position: Point;
|
|
/**
|
|
* Gets or sets the width and height of the Rect as a Size.
|
|
*/
|
|
size: Size;
|
|
/**
|
|
* Gets or sets the Point at the center of this Rect.
|
|
* Setting this property just shifts the X and Y values.
|
|
*/
|
|
center: Point;
|
|
/**
|
|
* Gets or sets the horizontal center X coordinate of the Rect.
|
|
*/
|
|
centerX: number;
|
|
/**
|
|
* Gets or sets the vertical center Y coordinate of the Rect.
|
|
*/
|
|
centerY: number;
|
|
/**
|
|
* True if this Rect has X, Y, Width, and Height values that are real numbers and not infinity.
|
|
* @return {boolean}
|
|
*/
|
|
isReal(): boolean;
|
|
/**
|
|
* True if this Rect has a Width and Height of zero.
|
|
* @return {boolean}
|
|
*/
|
|
isEmpty(): boolean;
|
|
/**
|
|
* @return {Rect}
|
|
*/
|
|
static alloc(): Rect;
|
|
/**
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} w
|
|
* @param {number} h
|
|
* @return {Rect}
|
|
*/
|
|
static allocAt(x: number, y: number, w: number, h: number): Rect;
|
|
/**
|
|
* @param {Rect} temp
|
|
*/
|
|
static free(temp: Rect): void;
|
|
}
|
|
/**
|
|
* The MarginLike type is the same as `Margin | number`.
|
|
* A number in place of a Margin object is treated as a uniform Margin with that thickness.
|
|
* @category Type
|
|
*/
|
|
export type MarginLike = Margin | number;
|
|
/**
|
|
* A Margin represents a band of space outside or inside a rectangular area,
|
|
* with possibly different values on each of the four sides.
|
|
*
|
|
* Example uses include GraphObject#margin, Panel#padding, and Diagram#padding.
|
|
*
|
|
* Use the static functions Margin.parse and Margin.stringify to convert to and from
|
|
* a standard string representation that is independent of the current locale.
|
|
*
|
|
* When an instance of this class is the value of a property of a GraphObject class or Diagram
|
|
* or CommandHandler or a Tool class, you should treat the object
|
|
* as if it were frozen or read-only -- you cannot modify its properties.
|
|
* This allows the property to return a value without allocating a new instance.
|
|
* If you need to do your own calculations with the value, call #copy to make
|
|
* a new instance with the same values that you can modify.
|
|
*
|
|
* Many methods modify the object's properties and then return a reference to "this" object.
|
|
* The only instance method to allocate a new object is the #copy method.
|
|
* The static Margin.parse method also allocates a new object.
|
|
*
|
|
* The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
* mostly due to additional error checking.
|
|
*
|
|
* You cannot inherit from this class.
|
|
* @category Geometry
|
|
*/
|
|
export class Margin {
|
|
/**
|
|
* If zero arguments are supplied, zero is used for all four sides.
|
|
* If one argument is supplied, that number is used for all four sides.
|
|
* If two arguments are supplied, the top and bottom sides get the first value,
|
|
* and the left and right sides get the second value.
|
|
* Otherwise there must be four arguments, in the order: top, right, bottom, left.
|
|
* @param {number=} t the margin for the top side;
|
|
* if not supplied, all sides are zero.
|
|
* @param {number=} r the margin for the right side;
|
|
* if not supplied, all sides have the value of the first argument.
|
|
* @param {number=} b the margin for all bottom side;
|
|
* if not supplied, the top and bottom get the value of the first argument,
|
|
* and the right and left sides get the value of the second argument.
|
|
* @param {number=} l the margin for the left side;
|
|
* must be supplied if the third argument was supplied.
|
|
*/
|
|
constructor(t?: number, r?: number, b?: number, l?: number);
|
|
/**
|
|
* Modify this Margin with new Top, Right, Bottom, and Left values.
|
|
* @param {number} t top.
|
|
* @param {number} r right.
|
|
* @param {number} b bottom.
|
|
* @param {number} l left.
|
|
* @return {Margin} this.
|
|
*/
|
|
setTo(t: number, r: number, b: number, l: number): Margin;
|
|
/**
|
|
* Modify this Margin so that its Top, Right, Bottom, and Left values
|
|
* are the same as the given Margin.
|
|
* @param {Margin} m the given Margin.
|
|
* @return {Margin} this.
|
|
*/
|
|
set(m: Margin): Margin;
|
|
/**
|
|
* Create a copy of this Margin, with the same values.
|
|
* @expose
|
|
* @return {Margin}
|
|
*/
|
|
copy(): Margin;
|
|
/**
|
|
* This static function can be used to read in a Margin from a string that was produced by Margin.stringify.
|
|
*
|
|
* `go.Margin.parse("1 2 3 4")` produces the Margin `new go.Margin(1, 2, 3, 4)`.
|
|
* @param {string} str
|
|
* @return {Margin}
|
|
*/
|
|
static parse(str: string): Margin;
|
|
/**
|
|
* This static function can be used to write out a Margin as a string that can be read by Margin.parse.
|
|
*
|
|
* `go.Margin.stringify(new go.Margin(1, 2, 3, 4))` produces the string "1 2 3 4".
|
|
* @param {Margin} val
|
|
* @return {string}
|
|
*/
|
|
static stringify(val: Margin): string;
|
|
/**
|
|
* Indicates whether the given Margin is equal to this Margin.
|
|
* @param {Margin} m The Margin to compare to this Margin.
|
|
* @return {boolean} True if the two Margins have identical Top and Right and Bottom and Left values,
|
|
* false otherwise.
|
|
* @see #equalTo
|
|
*/
|
|
equals(m: Margin): boolean;
|
|
/**
|
|
* Indicates whether the given margin is equal to this Margin.
|
|
* @param {number} t top.
|
|
* @param {number} r right.
|
|
* @param {number} b bottom.
|
|
* @param {number} l left.
|
|
* @return {boolean} True if the two Margins have identical Top and Right and Bottom and Left values,
|
|
* false otherwise.
|
|
* @see #equals
|
|
*/
|
|
equalTo(t: number, r: number, b: number, l: number): boolean;
|
|
/**
|
|
* Undocumented
|
|
* @param {Margin} m The Margin to compare to the current Margin.
|
|
* @return {boolean} True if the two Margins have Top, Right,
|
|
* Bottom and Left values within 0.5, false otherwise.
|
|
*/
|
|
equalsApprox(m: Margin): boolean;
|
|
/**
|
|
* Gets or sets the top value of this margin. Default is 0.
|
|
*/
|
|
top: number;
|
|
/**
|
|
* Gets or sets the right value of this margin. Default is 0.
|
|
*/
|
|
right: number;
|
|
/**
|
|
* Gets or sets the bottom value of this margin. Default is 0.
|
|
*/
|
|
bottom: number;
|
|
/**
|
|
* Gets or sets the left value of this margin. Default is 0.
|
|
*/
|
|
left: number;
|
|
/**
|
|
* True if this Margin has values that are real numbers and not infinity.
|
|
* @return {boolean}
|
|
*/
|
|
isReal(): boolean;
|
|
/**
|
|
* @return {Margin}
|
|
*/
|
|
static alloc(): Margin;
|
|
/**
|
|
* @param {Margin} temp
|
|
*/
|
|
static free(temp: Margin): void;
|
|
}
|
|
/**
|
|
* A Spot represents a relative point from (0,0) to (1,1) within the bounds of
|
|
* a rectangular area plus an absolute offset.
|
|
*
|
|
* Use the static functions Spot.parse and Spot.stringify to convert to and from
|
|
* a standard string representation that is independent of the current locale.
|
|
*
|
|
* When an instance of this class is the value of a property of a GraphObject class or Diagram
|
|
* or CommandHandler or a Tool class, you should treat the object
|
|
* as if it were frozen or read-only -- you cannot modify its properties.
|
|
* This allows the property to return a value without allocating a new instance.
|
|
* If you need to do your own calculations with the value, call #copy to make
|
|
* a new instance with the same values that you can modify.
|
|
*
|
|
* Many methods modify the object's properties and then return a reference to "this" object.
|
|
* The only instance method to allocate a new object is the #copy method.
|
|
* The static Spot.parse method also allocates a new object.
|
|
*
|
|
* The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
* mostly due to additional error checking.
|
|
*
|
|
* You cannot inherit from this class.
|
|
* @category Geometry
|
|
*/
|
|
export class Spot {
|
|
/**
|
|
* The default constructor produces the Spot(0, 0, 0, 0), at the top-left corner.
|
|
* @param {number=} x The x value of the Spot. Default is zero.
|
|
* @param {number=} y The y value of the Spot. Default is zero.
|
|
* @param {number=} offx (Optional) The absolute x offset. Default is zero.
|
|
* @param {number=} offy (Optional) The absolute y offset. Default is zero.
|
|
*/
|
|
constructor(x?: number, y?: number, offx?: number, offy?: number);
|
|
/**
|
|
* Modify this Spot with new X, Y, OffsetX, and OffsetY values.
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} offx
|
|
* @param {number} offy
|
|
* @return {Spot} this.
|
|
*/
|
|
setTo(x: number, y: number, offx: number, offy: number): Spot;
|
|
/**
|
|
* Modify this Spot so that its X, Y, OffsetX, and OffsetY values are the same as the given Spot.
|
|
* @param {Spot} s the given Spot.
|
|
* @return {Spot} this.
|
|
*/
|
|
set(s: Spot): Spot;
|
|
/**
|
|
* Create a copy of this Spot, with the same values.
|
|
* @expose
|
|
* @return {Spot}
|
|
*/
|
|
copy(): Spot;
|
|
/**
|
|
* This static function can be used to read in a Spot from a string that was produced by Spot.stringify.
|
|
*
|
|
* `go.Spot.parse("0 1 2 3")` produces the Spot `new go.Spot(0, 1, 2, 3)`.
|
|
* @param {string} str
|
|
* @return {Spot}
|
|
*/
|
|
static parse(str: string): Spot;
|
|
/**
|
|
* This static function can be used to write out a Spot as a string that can be read by Spot.parse.
|
|
*
|
|
* `go.Spot.stringify(new go.Spot(0, 1, 2, 3))` produces the string "0 1 2 3".
|
|
* @param {Spot} val
|
|
* @return {string}
|
|
*/
|
|
static stringify(val: Spot): string;
|
|
/**
|
|
* Two spots are equal if all four property values are the same.
|
|
* @param {Spot} spot The Spot to compare to the current Spot.
|
|
* @return {boolean} True if the two spots are equal, false otherwise.
|
|
*/
|
|
equals(spot: Spot): boolean;
|
|
/**
|
|
* Return a new spot that is opposite this spot.
|
|
* The X and Y values will be an equal distance
|
|
* away from the center on the other side of the center.
|
|
* The OffsetX and OffsetY values are also negated.
|
|
*
|
|
* The result is meaningless if #isNoSpot is true.
|
|
* @return {Spot}
|
|
*/
|
|
opposite(): Spot;
|
|
/**
|
|
* This predicate is true if this Spot is a side that
|
|
* includes the side(s) given by the argument Spot.
|
|
* @param {Spot} side
|
|
* @return {boolean} false if either this Spot or the argument Spot is not a "Side";
|
|
* true if the side(s) that this Spot represents are a superset or the same set of
|
|
* sides represented by the argument Spot.
|
|
*/
|
|
includesSide(side: Spot): boolean;
|
|
/**
|
|
* Gets or sets the x value of the Spot, a fractional value between zero and one.
|
|
*
|
|
* The Spot(0,0) of a rectangle is at the top-left corner.
|
|
* This value is commonly available as Spot.TopLeft.
|
|
* The Spot(0.5,1) would be at the middle of the bottom side.
|
|
* That value is commonly available as Spot.MiddleBottom.
|
|
*/
|
|
x: number;
|
|
/**
|
|
* Gets or sets the y value of the Spot, a fractional value between zero and one.
|
|
*
|
|
* The Spot(0,1) of a rectangle is at the bottom-left corner.
|
|
* This value is commonly available as Spot.BottomLeft.
|
|
* The Spot(1,0.5) would be at the middle of the right side.
|
|
* That value is commonly available as Spot.MiddleRight.
|
|
*/
|
|
y: number;
|
|
/**
|
|
* Gets or sets the offsetX value of the Spot.
|
|
* The value may be negative.
|
|
* If this represents a side value instead of a specific spot, this value is meaningless.
|
|
*
|
|
* A Spot(0,0,5,5) of a large rectangle is near the top-left corner, inside the rectangle.
|
|
* A Spot(1,1,5,5) would be near the bottom-right corner, outside the rectangle.
|
|
* A Spot(1,1,-5,-5) would also be near the bottom-right corner, but inside the rectangle.
|
|
*/
|
|
offsetX: number;
|
|
/**
|
|
* Gets or sets the offsetY value of the Spot.
|
|
* The value may be negative.
|
|
* If this represents a side value instead of a specific spot, this value is meaningless.
|
|
*
|
|
* A Spot(0,0,5,5) of a large rectangle is near the top-left corner, inside the rectangle.
|
|
* A Spot(1,1,5,5) would be near the bottom-right corner, outside the rectangle.
|
|
* A Spot(1,1,-5,-5) would also be near the bottom-right corner, but inside the rectangle.
|
|
*/
|
|
offsetY: number;
|
|
/**
|
|
* True if this is a specific spot, not a side nor Spot.None.
|
|
* @return {boolean}
|
|
*/
|
|
isSpot(): boolean;
|
|
/**
|
|
* True if this is an unspecific special spot, such as Spot.None
|
|
* or one of the sides.
|
|
* @return {boolean}
|
|
*/
|
|
isNoSpot(): boolean;
|
|
/**
|
|
* True if this is a special spot referring to one (or more) of the sides.
|
|
* This is false if the spot is Spot.None.
|
|
* @return {boolean}
|
|
*/
|
|
isSide(): boolean;
|
|
/**
|
|
* True if this is a special spot referring to no particular spot or side.
|
|
* @return {boolean}
|
|
*/
|
|
isNone(): boolean;
|
|
/**
|
|
* True if this is a special spot indicating that the real spot value will come from another source.
|
|
* @return {boolean}
|
|
*/
|
|
isDefault(): boolean;
|
|
/**
|
|
* Use this Spot value to indicate no particular spot --
|
|
* code looking for a particular point on an element will need to do their
|
|
* own calculations to determine the desired point depending on the
|
|
* circumstances.
|
|
* @constant
|
|
*/
|
|
static None: Spot;
|
|
/**
|
|
* Use this value to indicate that the real spot value is inherited from elsewhere.
|
|
* @constant
|
|
*/
|
|
static Default: Spot;
|
|
/**
|
|
* The specific point at the top-left corner of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopLeft: Spot;
|
|
/**
|
|
* The specific point at the center of the top side of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopCenter: Spot;
|
|
/**
|
|
* The specific point at the top-right corner of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopRight: Spot;
|
|
/**
|
|
* The specific point at the middle of the left side of bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static LeftCenter: Spot;
|
|
/**
|
|
* The specific point at the very center of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static Center: Spot;
|
|
/**
|
|
* The specific point at the middle of the right side of bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static RightCenter: Spot;
|
|
/**
|
|
* The specific point at the bottom-left corner of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static BottomLeft: Spot;
|
|
/**
|
|
* The specific point at the middle of the bottom side of bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static BottomCenter: Spot;
|
|
/**
|
|
* The specific point at the bottom-right corner of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static BottomRight: Spot;
|
|
/**
|
|
* A synonym for Spot.TopCenter.
|
|
* @constant
|
|
*/
|
|
static MiddleTop: Spot;
|
|
/**
|
|
* A synonym for Spot.LeftCenter.
|
|
* @constant
|
|
*/
|
|
static MiddleLeft: Spot;
|
|
/**
|
|
* A synonym for Spot.RightCenter.
|
|
* @constant
|
|
*/
|
|
static MiddleRight: Spot;
|
|
/**
|
|
* A synonym for Spot.BottomCenter.
|
|
* @constant
|
|
*/
|
|
static MiddleBottom: Spot;
|
|
/**
|
|
* A synonym for Spot.TopCenter.
|
|
* @constant
|
|
*/
|
|
static Top: Spot;
|
|
/**
|
|
* A synonym for Spot.LeftCenter.
|
|
* @constant
|
|
*/
|
|
static Left: Spot;
|
|
/**
|
|
* A synonym for Spot.RightCenter.
|
|
* @constant
|
|
*/
|
|
static Right: Spot;
|
|
/**
|
|
* A synonym for Spot.BottomCenter.
|
|
* @constant
|
|
*/
|
|
static Bottom: Spot;
|
|
/**
|
|
* The set of points at the top side of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopSide: Spot;
|
|
/**
|
|
* The set of points at the left side of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static LeftSide: Spot;
|
|
/**
|
|
* The set of points at the right side of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static RightSide: Spot;
|
|
/**
|
|
* The set of points at the bottom side of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static BottomSide: Spot;
|
|
/**
|
|
* The set of points at the top or bottom sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopBottomSides: Spot;
|
|
/**
|
|
* The set of points at the left or right sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static LeftRightSides: Spot;
|
|
/**
|
|
* The set of points at the top or left sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopLeftSides: Spot;
|
|
/**
|
|
* The set of points at the top or right sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static TopRightSides: Spot;
|
|
/**
|
|
* The set of points at the left or bottom sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static BottomLeftSides: Spot;
|
|
/**
|
|
* The set of points at the right or bottom sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static BottomRightSides: Spot;
|
|
/**
|
|
* The set of points on all sides of the bounding rectangle except top side.
|
|
* @constant
|
|
*/
|
|
static NotTopSide: Spot;
|
|
/**
|
|
* The set of points on all sides of the bounding rectangle except left side.
|
|
* @constant
|
|
*/
|
|
static NotLeftSide: Spot;
|
|
/**
|
|
* The set of points on all sides of the bounding rectangle except right side.
|
|
* @constant
|
|
*/
|
|
static NotRightSide: Spot;
|
|
/**
|
|
* The set of points on all sides of bounding rectangle except bottom side.
|
|
* @constant
|
|
*/
|
|
static NotBottomSide: Spot;
|
|
/**
|
|
* The set of points on all sides of the bounding rectangle.
|
|
* @constant
|
|
*/
|
|
static AllSides: Spot;
|
|
/**
|
|
* @return {Spot}
|
|
*/
|
|
static alloc(): Spot;
|
|
/**
|
|
* @param {Spot} temp
|
|
*/
|
|
static free(temp: Spot): void;
|
|
}
|
|
/**
|
|
* The Geometry class is used to define the "shape" of a Shape.
|
|
* A Geometry can be simple straight lines, rectangles, or ellipses.
|
|
* A Geometry can also be an arbitrarily complex path, consisting of a list of PathFigures.
|
|
*
|
|
* A Geometry must not be modified once it has been used by a Shape.
|
|
* However, a Geometry may be shared by multiple Shapes.
|
|
*
|
|
* It is commonplace to create Geometries using geometry path string syntax:
|
|
* <a href="../../intro/geometry.html">Geometry Path Strings</a>.
|
|
* However it is much more efficient to create Geometries programmatically.
|
|
* One way to do that is illustrated by several of the samples that evaluate JavaScript such as:
|
|
* ```js
|
|
* new go.Geometry()
|
|
* .add(new go.PathFigure(p.x, p.y)
|
|
* .add(new go.PathSegment(go.PathSegment.Arc, -sweep/2, sweep, 0, 0, radius+layerThickness, radius+layerThickness))
|
|
* .add(new go.PathSegment(go.PathSegment.Line, q.x, q.y))
|
|
* .add(new go.PathSegment(go.PathSegment.Arc, sweep/2, -sweep, 0, 0, radius, radius).close()));
|
|
* ```
|
|
* See samples that make use of Geometries in the <a href="../../samples/index.html#geometries">samples index</a>.
|
|
* @unrestricted
|
|
* @category Geometry
|
|
*/
|
|
export class Geometry {
|
|
/**
|
|
* @param {?=} type
|
|
* Construct an empty Geometry.
|
|
* The geometry type must be one of the following values:
|
|
* Geometry.Line, Geometry.Ellipse, Geometry.Rectangle, Geometry.Path.
|
|
*/
|
|
constructor(type?: EnumValue);
|
|
/**
|
|
* Create a copy of this Geometry, with the same values and figures.
|
|
* @expose
|
|
* @return {Geometry}
|
|
*/
|
|
copy(): Geometry;
|
|
/**
|
|
* For drawing a simple straight line;
|
|
* a value for Geometry#type.
|
|
* The line goes from the point
|
|
* (#startX, #startY) to the point (#endX, #endY).
|
|
* @constant
|
|
*/
|
|
static Line: EnumValue;
|
|
/**
|
|
* For drawing a rectangle;
|
|
* a value for Geometry#type.
|
|
* The rectangle goes from the point
|
|
* (#startX, #startY) to the point (#endX, #endY).
|
|
* @constant
|
|
*/
|
|
static Rectangle: EnumValue;
|
|
/**
|
|
* For drawing an ellipse fitting within a rectangle;
|
|
* a value for Geometry#type.
|
|
* The ellipse fits within the rectangle that goes from the point
|
|
* (#startX, #startY) to the point (#endX, #endY).
|
|
* @constant
|
|
*/
|
|
static Ellipse: EnumValue;
|
|
/**
|
|
* For drawing a complex path made of a list of PathFigures;
|
|
* a value for Geometry#type.
|
|
* @constant
|
|
*/
|
|
static Path: EnumValue;
|
|
/**
|
|
* Undocumented
|
|
* @param {Geometry} g
|
|
* @return {boolean}
|
|
*/
|
|
equalsApprox(g: Geometry): boolean;
|
|
/**
|
|
* This static function can be used to write out a Geometry as a string
|
|
* that can be read by Geometry.parse.
|
|
*
|
|
* The string produced by this method is a superset of the SVG path
|
|
* string rules that contains some additional GoJS-specific tokens.
|
|
* See the <a href="../../intro/pictures.html">Introduction page on Geometry Parsing</a> for more details.
|
|
* @param {Geometry} val
|
|
* @return {string}
|
|
* @since 1.1
|
|
*/
|
|
static stringify(val: Geometry): string;
|
|
/**
|
|
* Given a SVG or GoJS path string, returns a congruent path string with each pathfigure filled.
|
|
* For instance, "M0 0 L22 22 L33 0" would become "F M0 0 L22 22 L33 0".
|
|
* @param {string} str
|
|
* @return {string}
|
|
* @since 1.1
|
|
*/
|
|
static fillPath(str: string): string;
|
|
/**
|
|
* Produce a Geometry from a string that uses an SVG-like compact path geometry syntax.
|
|
* The syntax accepts all SVG Path Syntax (<a href="https://www.w3.org/TR/SVG/paths.html" target="_blank">SVG Path Syntax (w3.org)</a>),
|
|
* as well as three GoJS-specific tokens.
|
|
* Specifically, the following tokens are allowed:
|
|
* - `M (x,y)+ ` - Move commands
|
|
* - `L (x,y)+, H (x)+, V (y)+` Lines commands, including horizontal and vertical lines
|
|
* - `C (x1 y1 x2 y2 x y)+, S (x2 y2 x y)+` Cubic bezier curves
|
|
* - `Q (x1 y1 x y)+, T (x y)+` Quadratic bezier curves
|
|
* - `A (rx ry x-axis-rotation large-arc-flag clockwise-flag x y)+` Arcs (following SVG arc conventions)
|
|
* - `Z` Denotes that the previous subpath is closed
|
|
*
|
|
* Additionally there are some tokens specific to GoJS:
|
|
* - `B (startAngle, sweepAngle, centerX, centerY, radius)+` Arcs following GoJS canvas arc conventions
|
|
* - `X` Used before M-commands to denote separate PathFigures instead of a subpath
|
|
* - `F` Denotes whether the current PathFigure is filled (true if F is present)
|
|
* - `U` Denotes that the PathFigure is not shadowed
|
|
*
|
|
* See the <a href="../../intro/geometry.html">Introduction page on Geometry Parsing</a> for more details.
|
|
* @param {string} str
|
|
* @param {boolean=} filled whether figures should be filled.
|
|
* If true, all PathFigures in the string will be filled regardless of the presence
|
|
* of an "F" command or not.
|
|
* If false, all PathFigures will determine their own filled state by the presence of an "F" command or not.
|
|
* Default is false.
|
|
* @return {Geometry}
|
|
*/
|
|
static parse(str: string, filled?: boolean): Geometry;
|
|
/**
|
|
* Computes the Geometry's bounds without adding an origin point, and returns those bounds as a rect.
|
|
* This method does not modify the Geometry or its bounds.
|
|
* @return {Rect}
|
|
* @since 1.1
|
|
*/
|
|
computeBoundsWithoutOrigin(): Rect;
|
|
/**
|
|
* Normalizes the Geometry points in place by ensuring the top-left bounds of the geometry lines up with (0, 0),
|
|
* returning the Point (x, y) amount it was shifted.
|
|
* After this method is called there will be no negative X or Y value for the Geometry's bounds,
|
|
* and no empty space at the top-left of the Geometry.
|
|
* @return {Point}
|
|
* @since 1.1
|
|
*/
|
|
normalize(): Point;
|
|
/**
|
|
* Offsets the Geometry in place by a given (x, y) amount
|
|
* @param {number} x The x-axis offset factor.
|
|
* @param {number} y The y-axis offset factor.
|
|
* @return {Geometry} this
|
|
* @since 1.1
|
|
*/
|
|
offset(x: number, y: number): Geometry;
|
|
/**
|
|
* Scales the Geometry in place by a given (x, y) scale factor.
|
|
*
|
|
* If you want to flip a Geometry horizontally, call `geo.scale(-1, 1)`.
|
|
* If you want to flip a Geometry vertically, call `geo.scale(1, -1)`.
|
|
* @param {number} x The x-axis scale factor.
|
|
* @param {number} y The y-axis scale factor.
|
|
* @return {Geometry} this
|
|
* @since 1.1
|
|
*/
|
|
scale(x: number, y: number): Geometry;
|
|
/**
|
|
* Rotates the Geometry in place by a given angle, with optional x and y values to rotate the geometry about.
|
|
* If no x and y value are given, (0, 0) is used as the rotation point.
|
|
* @param {number} angle The angle to rotate by.
|
|
* @param {number=} x The optional X point to rotate the geometry about. If no point is given, this value is 0.
|
|
* @param {number=} y The optional Y point to rotate the geometry about. If no point is given, this value is 0.
|
|
* @return {Geometry} this
|
|
* @since 1.1
|
|
*/
|
|
rotate(angle: number, x?: number, y?: number): Geometry;
|
|
/**
|
|
* Undocumented.
|
|
* @param {Point} p in local geometry coordinates
|
|
* @param {number=} sw half the stroke width that a Shape has or that you want to pretend it has
|
|
* @return {boolean}
|
|
*/
|
|
containsPoint(p: Point, sw?: number): boolean;
|
|
/**
|
|
* Returns the point at the fractional distance (0-1) along this Geometry's path.
|
|
* @param {number} fraction A fractional amount between 0 and 1, inclusive.
|
|
* @param {Point=} result an optional Point that is modified and returned; otherwise it allocates and returns a new Point.
|
|
* @return {Point} the Point, in local coordinates, of the fractional distance along the path.
|
|
*/
|
|
getPointAlongPath(fraction: number, result?: Point): Point;
|
|
/**
|
|
* Returns the slope expressed as an angle at the fractional distance (0-1) along this Geometry's path, in local coordinates.
|
|
* @param {number} fraction A fractional amount between 0 and 1, inclusive.
|
|
* @return {number}
|
|
*/
|
|
getAngleAlongPath(fraction: number): number;
|
|
/**
|
|
* Returns the fractional distance (0-1) along this Geometry's path for a nearby point.
|
|
* @param {Point} pt A Point, in local coordinates, near this Geometry.
|
|
* @return {number} A fractional amount between 0 and 1, inclusive.
|
|
*/
|
|
getFractionForPoint(pt: Point): number;
|
|
/**
|
|
* Undocumented.
|
|
* Flattened segments represents a series of points making up a Geometry.
|
|
* The inner arrays consist of a sequence of PathSegment coordinates making up a PathFigure,
|
|
* while the outer array represents the whole Geometry of these PathFigures.
|
|
*/
|
|
readonly flattenedSegments: Array<Array<number>>;
|
|
/**
|
|
* Undocumented.
|
|
* Flattened lengths represents a series of lengths of the paths making up a Geometry.
|
|
* The inner arrays consist of a sequence of PathSegment lengths making up a PathFigure,
|
|
* while the outer array represents the whole Geometry of these PathFigures.
|
|
*/
|
|
readonly flattenedLengths: Array<Array<number>>;
|
|
/**
|
|
* Undocumented.
|
|
* This read-only property returns the approximate length of the path.
|
|
* This is the overall distance of all the PathSegments that make up the geometry.
|
|
*/
|
|
readonly flattenedTotalLength: number;
|
|
/**
|
|
* Gets or sets the type of the Geometry.
|
|
* The default type is Geometry.Path.
|
|
* Other permissible values are Geometry.Line, Geometry.Ellipse,
|
|
* or Geometry.Rectangle.
|
|
*/
|
|
type: EnumValue;
|
|
/**
|
|
* Gets or sets the starting X coordinate of the Geometry if it is of type
|
|
* Geometry.Line|Line, Geometry.Rectangle|Rectangle, or Geometry.Ellipse|Ellipse.
|
|
* The initial value is zero.
|
|
*/
|
|
startX: number;
|
|
/**
|
|
* Gets or sets the starting Y coordinate of the Geometry if it is of type
|
|
* Geometry.Line|Line, Geometry.Rectangle|Rectangle, or Geometry.Ellipse|Ellipse.
|
|
* The initial value is zero.
|
|
*/
|
|
startY: number;
|
|
/**
|
|
* Gets or sets the ending X coordinate of the Geometry if it is of type
|
|
* Geometry.Line|Line, Geometry.Rectangle|Rectangle, or Geometry.Ellipse|Ellipse.
|
|
* The initial value is zero.
|
|
*/
|
|
endX: number;
|
|
/**
|
|
* Gets or sets the ending Y coordinate of the Geometry if it is of type
|
|
* Geometry.Line|Line, Geometry.Rectangle|Rectangle, or Geometry.Ellipse|Ellipse.
|
|
* The initial value is zero.
|
|
*/
|
|
endY: number;
|
|
/**
|
|
* Gets or sets the List of PathFigures
|
|
* that describes the content of the
|
|
* path for Geometries of type Geometry.Path|Path.
|
|
*/
|
|
figures: List<PathFigure>;
|
|
/**
|
|
* Add a PathFigure to the #figures list.
|
|
* @param {PathFigure} figure a newly allocated unshared PathFigure that will become owned by this Geometry
|
|
* @return {Geometry} this
|
|
* @since 1.5
|
|
*/
|
|
add(figure: PathFigure): Geometry;
|
|
/**
|
|
* Undocumented
|
|
* @param {number} f1x spot1.x
|
|
* @param {number} f1y spot1.y
|
|
* @param {number} f2x spot2.x
|
|
* @param {number} f2y spot2.y
|
|
* @param {number=} o1x offset1.x, default is zero
|
|
* @param {number=} o1y offset1.y, default is zero
|
|
* @param {number=} o2x offset2.x, default is zero
|
|
* @param {number=} o2y offset2.y, default is zero
|
|
* @return {Geometry} this
|
|
*/
|
|
setSpots(f1x: number, f1y: number, f2x: number, f2y: number, o1x?: number, o1y?: number, o2x?: number, o2y?: number): Geometry;
|
|
/**
|
|
* Gets or sets the spot an "Auto" Panel will use for the top-left corner of any panel content
|
|
* when the Shape#spot1 value is Spot.Default.
|
|
* The default value is Spot.TopLeft, at the top-left point of the bounds of the Shape.
|
|
*/
|
|
spot1: Spot;
|
|
/**
|
|
* Gets or sets the spot an "Auto" Panel will use for the bottom-right corner of any panel content
|
|
* when the Shape#spot2 value is Spot.Default.
|
|
* The default value is Spot.BottomRight, at the bottom-right point of the bounds of the Shape.
|
|
*/
|
|
spot2: Spot;
|
|
/**
|
|
* Gets or sets the Shape#geometryStretch value the Shape should use by default
|
|
* when the Shape#geometryStretch value is GraphObject.None.
|
|
* The default value is GraphObject.Fill.
|
|
* Some figure generators return a Geometry with this property set to GraphObject.Uniform,
|
|
* in order to preserve its aspect ratio when used by a Shape that may have different sizes.
|
|
* @since 1.5
|
|
*/
|
|
defaultStretch: EnumValue;
|
|
/**
|
|
* This read-only property returns a rectangle that contains all points within the Geometry.
|
|
* The result will always contain the origin (0, 0).
|
|
*/
|
|
readonly bounds: Rect;
|
|
}
|
|
/**
|
|
* A PathFigure represents a section of a Geometry.
|
|
* It is a single connected series of
|
|
* two-dimensional geometric PathSegments.
|
|
*
|
|
* The Geometry#figures property is a list of PathFigures.
|
|
*
|
|
* PathFigures are drawn with the Shape#stroke and other stroke properties.
|
|
* Filled PathFigures are painted with the Shape#fill.
|
|
*
|
|
* A PathFigure must not be modified once its containing Geometry
|
|
* has been assigned to a Shape.
|
|
* @unrestricted
|
|
* @category Geometry
|
|
*/
|
|
export class PathFigure {
|
|
/**
|
|
* Constructs an empty figure.
|
|
* The optional arguments specify the starting point of the figure.
|
|
* You'll want to add a new instance of a PathFigure to the
|
|
* Geometry#figures list of a Geometry.
|
|
* @param {number=} sx optional: the X coordinate of the start point (default is zero).
|
|
* @param {number=} sy optional: the Y coordinate of the start point (default is zero).
|
|
* @param {boolean=} filled optional: whether the figure is filled (default is true).
|
|
* @param {boolean=} shadowed optional: whether the figure may be drawn with a shadow (default is true).
|
|
*/
|
|
constructor(sx?: number, sy?: number, filled?: boolean, shadowed?: boolean);
|
|
/**
|
|
* Create a copy of this PathFigure, with the same values and segments.
|
|
* @expose
|
|
* @return {PathFigure}
|
|
*/
|
|
copy(): PathFigure;
|
|
/**
|
|
* Undocumented
|
|
* @param {PathFigure} f
|
|
* @return {boolean}
|
|
*/
|
|
equalsApprox(f: PathFigure): boolean;
|
|
/**
|
|
* Gets or sets whether this PathFigure is drawn filled.
|
|
* The default value is true.
|
|
*/
|
|
isFilled: boolean;
|
|
/**
|
|
* Gets or sets whether this PathFigure will render a shadow if one is defined.
|
|
* This is used for turning off shadows on specific subpaths.
|
|
* The default value is true.
|
|
*/
|
|
isShadowed: boolean;
|
|
/**
|
|
* Gets or sets the starting point X coordinate of the PathFigure.
|
|
* The default value is zero.
|
|
*/
|
|
startX: number;
|
|
/**
|
|
* Gets or sets the starting point Y coordinate of the PathFigure.
|
|
* The default value is zero.
|
|
*/
|
|
startY: number;
|
|
/**
|
|
* Gets or sets the List of PathSegments that define this PathFigure.
|
|
*/
|
|
segments: List<PathSegment>;
|
|
/**
|
|
* Add a PathSegment to the #segments list.
|
|
* @param {PathSegment} segment a newly allocated unshared PathSegment that will become owned by this PathFigure
|
|
* @return {PathFigure}
|
|
* @since 1.5
|
|
*/
|
|
add(segment: PathSegment): PathFigure;
|
|
}
|
|
/**
|
|
* A PathSegment represents a straight line or curved segment of a path between
|
|
* two or more points that are part of a PathFigure.
|
|
* The very first point is given by the PathFigure#startX and PathFigure#startY properties.
|
|
* After the first segment the beginning point of the next segment is the same as the end point of the previous segment.
|
|
* For most types of PathSegments the end point of the segment is given by #endX and #endY.
|
|
*
|
|
* A PathSegment must not be modified once its containing PathFigure's
|
|
* Geometry has been assigned to a Shape.
|
|
* @unrestricted
|
|
* @category Geometry
|
|
*/
|
|
export class PathSegment {
|
|
/**
|
|
* Constructs a segment that goes nowhere unless you specify some Points.
|
|
*
|
|
* The very first point of a path is specified in the containing PathFigure by
|
|
* its PathFigure#startX and PathFigure#startY properties.
|
|
*
|
|
* The segment type must be one of the following values:
|
|
* PathSegment.Line, PathSegment.Bezier,
|
|
* PathSegment.QuadraticBezier, PathSegment.Arc, PathSegment.SvgArc.
|
|
* You will want to add a new instance of a PathSegment to the
|
|
* PathFigure#segments list of a PathFigure.
|
|
* @param {EnumValue=} type if not supplied, the default PathSegment type is PathSegment.Line.
|
|
* But if the type is supplied, one must also provide the endpoint X and Y values,
|
|
* either as arguments in this constructor or by setting the #endX and #endY properties.
|
|
* If the type is QuadraticBezier, the X1 and Y1 control point values must both be supplied.
|
|
* If the type is Bezier, X1, Y1, X2, and Y2 control point values must all be supplied.
|
|
*
|
|
* If the type is PathSegment.Line|Line it needs the following arguments:
|
|
*
|
|
* `(go.PathSegment.Line, ex, ey)`
|
|
* - **ex, ey** describe the end point
|
|
*
|
|
* If the type is PathSegment.QuadraticBezier|QuadraticBezier it needs the following arguments:
|
|
*
|
|
* `(go.PathSegment.QuadraticBezier, ex, ey, x1, y1)`
|
|
* - **ex, ey** describe the end point
|
|
* - **x1, y1** describe the only control point
|
|
*
|
|
* If the type is PathSegment.Bezier|Bezier it needs the following arguments:
|
|
*
|
|
* `(go.PathSegment.Bezier, ex, ey, x1, y1, x2, y2)`
|
|
* - **ex, ey** describe the end point
|
|
* - **x1, y1** describe the first control point
|
|
* - **x2, y2** describe the second control point
|
|
*
|
|
* If the type is PathSegment.Arc|Arc it needs the following arguments:
|
|
*
|
|
* `(go.PathSegment.Arc, startAngle, sweepAngle, centerX, centerY, radiusX, radiusY)`
|
|
* - **startAngle** describes the start angle, in degrees
|
|
* - **sweepAngle** describes the sweep angle, in degrees
|
|
* - **centerX, centerY** describe the center point
|
|
* - **radiusX, radiusY** describe the radiusX and radiusY
|
|
*
|
|
* If the type is PathSegment.SvgArc|SvgArc it needs the following arguments:
|
|
*
|
|
* `(go.PathSegment.SvgArc, ex, ey, radiusX, radiusY, xAxisRotation, largeArcFlag, clockwiseFlag)`
|
|
*
|
|
* They are in the same order as arcs in SVG path strings, except the endpoint x and y values come first, not last.
|
|
* - **ex, ey** describe the endpoint
|
|
* - **radiusX, radiusY** describe the radius
|
|
* - **xAxisRotation** describes the #xAxisRotation (number in degrees)
|
|
* - **largeArcFlag** describes the #isLargeArc (true or false)
|
|
* - **clockwiseFlag** describes the #isClockwiseArc (true or false).
|
|
*
|
|
* If the type is PathSegment.Move|Move it needs the following arguments:
|
|
*
|
|
* `(go.PathSegment.Move, ex, ey)`
|
|
* - **ex, ey** describe the next starting point
|
|
*
|
|
* @param {number=} ex optional: the X coordinate of the end point, or the startAngle of an Arc.
|
|
* @param {number=} ey optional: the Y coordinate of the end point, or the sweepAngle of an Arc.
|
|
* @param {number=} x1 optional: the X coordinate of the first bezier control point, or the centerX of an Arc, or the radiusX of an SvgArc.
|
|
* @param {number=} y1 optional: the Y coordinate of the first bezier control point, or the centerY of an Arc, or the radiusY of an SvgArc.
|
|
* @param {number=} x2 optional: the X coordinate of the second cubic bezier control point, or the radiusX of an Arc, or the xAxisRotation of an SvgArc.
|
|
* @param {number|boolean=} y2 optional: the Y coordinate of the second cubic bezier control point, or the radiusY of an Arc, or whether this is the larger arc of an SvgArc.
|
|
* @param {boolean=} clockwise optional: whether an SvgArc goes clockwise or counterclockwise.
|
|
*/
|
|
constructor(type?: EnumValue, ex?: number, ey?: number, x1?: number, y1?: number, x2?: number, y2?: number | boolean, clockwise?: boolean);
|
|
/**
|
|
* Create a copy of this PathSegment, of the same type and with the same point values.
|
|
* @expose
|
|
* @return {PathSegment}
|
|
*/
|
|
copy(): PathSegment;
|
|
/**
|
|
* Undocumented
|
|
* @param {PathSegment} s
|
|
* @return {boolean}
|
|
*/
|
|
equalsApprox(s: PathSegment): boolean;
|
|
/**
|
|
* For beginning a new subpath, a value for PathSegment#type.
|
|
* @constant
|
|
*/
|
|
static Move: EnumValue;
|
|
/**
|
|
* For drawing a straight line segment, a value for PathSegment#type.
|
|
* @constant
|
|
*/
|
|
static Line: EnumValue;
|
|
/**
|
|
* For drawing a cubic bezier segment, a value for PathSegment#type.
|
|
* @constant
|
|
*/
|
|
static Bezier: EnumValue;
|
|
/**
|
|
* For drawing a quadratic bezier segment, a value for PathSegment#type.
|
|
* @constant
|
|
*/
|
|
static QuadraticBezier: EnumValue;
|
|
/**
|
|
* For drawing an arc segment, a value for PathSegment#type.
|
|
* @constant
|
|
*/
|
|
static Arc: EnumValue;
|
|
/**
|
|
* For drawing an SVG arc segment, a value for PathSegment#type.
|
|
*
|
|
* See: <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">SVG Arc specification (w3.org)</a>
|
|
* @constant
|
|
* @since 1.1
|
|
*/
|
|
static SvgArc: EnumValue;
|
|
/**
|
|
* Closes the path after this PathSegment
|
|
* @return {PathSegment} returns this PathSegment.
|
|
*/
|
|
close(): PathSegment;
|
|
/**
|
|
* Gets or sets whether the path is closed after this PathSegment.
|
|
* Default value is false.
|
|
*/
|
|
isClosed: boolean;
|
|
/**
|
|
* Gets or sets the type of the PathSegment.
|
|
* The value must be one of the following:
|
|
* PathSegment.Line, PathSegment.Bezier,
|
|
* PathSegment.QuadraticBezier, PathSegment.Arc,
|
|
* PathSegment.Move, PathSegment.Arc, and PathSegment.SvgArc.
|
|
*/
|
|
type: EnumValue;
|
|
/**
|
|
* Gets or sets the X coordinate of the end point for all types of PathSegment except PathSegment.Arc|Arc.
|
|
* The default value is zero.
|
|
*/
|
|
endX: number;
|
|
/**
|
|
* Gets or sets the Y coordinate of the end point for all types of PathSegment except PathSegment.Arc|Arc.
|
|
* The default value is zero.
|
|
*/
|
|
endY: number;
|
|
/**
|
|
* Gets or sets the X value of the first control point for a PathSegment
|
|
* of type PathSegment.Bezier|Bezier or PathSegment.QuadraticBezier|QuadraticBezier.
|
|
*/
|
|
point1X: number;
|
|
/**
|
|
* Gets or sets the Y value of the first control point for a PathSegment
|
|
* of type PathSegment.Bezier|Bezier or PathSegment.QuadraticBezier|QuadraticBezier.
|
|
*/
|
|
point1Y: number;
|
|
/**
|
|
* Gets or sets the X value of the second control point for a PathSegment
|
|
* of type cubic PathSegment.Bezier|Bezier.
|
|
*/
|
|
point2X: number;
|
|
/**
|
|
* Gets or sets the Y value of the second control point for a PathSegment
|
|
* of type cubic PathSegment.Bezier|Bezier.
|
|
*/
|
|
point2Y: number;
|
|
/**
|
|
* Gets or sets the center X value of the Arc for a PathSegment of type PathSegment.Arc|Arc.
|
|
*/
|
|
centerX: number;
|
|
/**
|
|
* Gets or sets the center Y value of the Arc for a PathSegment of type PathSegment.Arc|Arc.
|
|
*/
|
|
centerY: number;
|
|
/**
|
|
* Gets or sets the X value of the radius for a PathSegment of type PathSegment.Arc|Arc or PathSegment.SvgArc|SvgArc.
|
|
* Value must be a positive number.
|
|
*/
|
|
radiusX: number;
|
|
/**
|
|
* Gets or sets the Y value of the radius for a PathSegment of type PathSegment.Arc|Arc or PathSegment.SvgArc|SvgArc.
|
|
* Value must be a positive number.
|
|
*/
|
|
radiusY: number;
|
|
/**
|
|
* Gets or sets the starting angle for a PathSegment of type PathSegment.Arc|Arc.
|
|
* Value must within the range: (0 <= value < 360).
|
|
*/
|
|
startAngle: number;
|
|
/**
|
|
* Gets or sets the length of angle in degrees, or amount of arc to "sweep" for a PathSegment of type PathSegment.Arc|Arc.
|
|
* Must be between -360 and 360, inclusive.
|
|
*/
|
|
sweepAngle: number;
|
|
/**
|
|
* Gets or sets the clockwise-flag for a PathSegment of type PathSegment.SvgArc|SvgArc.
|
|
* SVG Arcs specify a radius and an endpoint, and are always a portion of an ellipse.
|
|
* The parameters allow for two potential ellipses and four potential arcs.
|
|
* A clockwise-flag set to true will use one of the two possible positive-angle arcs,
|
|
* and false will use one of the two negative-angle arcs. Which arc is chosen (small or large)
|
|
* depends on the value of #isLargeArc.
|
|
* For more information see the visual examples in the
|
|
* <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">SVG Arc specification (w3.org)</a>
|
|
*/
|
|
isClockwiseArc: boolean;
|
|
/**
|
|
* Gets or sets the large-arc-flag for a PathSegment of type PathSegment.SvgArc|SvgArc.
|
|
* SVG Arcs specify a radius and an endpoint, and are always a portion of an ellipse.
|
|
* The parameters allow for two potential ellipses and four potential arcs.
|
|
* A large-arc-flag set to true will choose the larger of the two arc sweeps.
|
|
* Which way the arc sweeps (positive angle or negative angle) depends on the value of #isClockwiseArc
|
|
* For more information see the visual examples in the
|
|
* <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands">SVG Arc specification (w3.org)</a>
|
|
*/
|
|
isLargeArc: boolean;
|
|
/**
|
|
* Gets or sets the X-axis rotation for a PathSegment of type PathSegment.SvgArc|SvgArc.
|
|
* X-axis rotation is used to rotate the ellipse that the arc is created from,
|
|
* and must be between 0 and 360 degrees.
|
|
* Default is 0.
|
|
*/
|
|
xAxisRotation: number;
|
|
}
|
|
/**
|
|
* An InputEvent represents a mouse or keyboard or touch event.
|
|
* The principal properties hold information about a particular input event.
|
|
* These properties include the #documentPoint at which a mouse event
|
|
* occurred in document coordinates,
|
|
* the corresponding point in view/element coordinates, #viewPoint,
|
|
* the #key for keyboard events,
|
|
* and the #modifiers and #button at the time.
|
|
* Additional descriptive properties include #clickCount, #delta,
|
|
* #timestamp, and the source event #event (if available).
|
|
*
|
|
* Many of its properties are provided for convenient access to the state of the input event,
|
|
* such as asking whether the #control key was held down at the time,
|
|
* or the #targetObject (a GraphObject) that the mouse was over .
|
|
*
|
|
* When real events fire on the Diagram, InputEvents are created automatically set update the value of Diagram#lastInput.
|
|
* These events set the value of #event with the backing browser-defined Event,
|
|
* which may be a MouseEvent, KeyboardEvent, PointerEvent, TouchEvent, and so on.
|
|
*
|
|
* InputEvents backed by MouseEvents set both #button, the button that caused the action,
|
|
* and #buttons, the set of buttons currently pressed after the action has happened.
|
|
* By default a user-created InputEvent sets #button and #buttons as if the event was a left-click.
|
|
*
|
|
* You can create InputEvents and set the value of Diagram#lastInput in order to simulate user actions in tools.
|
|
* This can be useful for testing. See the <a href="../../extensions/Robot.html">Robot extension sample</a> for
|
|
* an example of creating InputEvents to simulate user input.
|
|
* @unrestricted
|
|
*/
|
|
export class InputEvent {
|
|
/**
|
|
* The InputEvent class constructor produces an empty InputEvent.
|
|
* You should never need to call this constructor.
|
|
* But if you do, you must first set #diagram to the Diagram before any other use.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Make a copy of this InputEvent.
|
|
* @expose
|
|
* @return {InputEvent}
|
|
*/
|
|
copy(): InputEvent;
|
|
/**
|
|
* Gets the source diagram associated with the event.
|
|
*/
|
|
diagram: Diagram;
|
|
/**
|
|
* Gets or sets the point at which this input event occurred.
|
|
* The Point is in view coordinates within the viewport, not in document coordinates.
|
|
* This should be valid for mouse events.
|
|
* For keyboard events, this is the last available mouse point.
|
|
* @see #documentPoint
|
|
* @see Diagram#transformViewToDoc
|
|
* @see Diagram#transformDocToView
|
|
*/
|
|
viewPoint: Point;
|
|
/**
|
|
* Gets or sets the point at which this input event occurred, in document coordinates.
|
|
* The Point is in document coordinates, the same as the GraphObject#position
|
|
* for Parts in the diagram.
|
|
* This should be valid for mouse events.
|
|
* For keyboard events, this is the last available mouse point.
|
|
* @see #viewPoint
|
|
* @see Diagram#transformViewToDoc
|
|
* @see Diagram#transformDocToView
|
|
*/
|
|
documentPoint: Point;
|
|
/**
|
|
* Gets or sets the modifier keys that were used with the mouse or keyboard event.
|
|
* The number will be a combination of flags representing Control, Shift, Alt or Meta.
|
|
* @see #control
|
|
* @see #shift
|
|
* @see #alt
|
|
* @see #meta
|
|
*/
|
|
modifiers: number;
|
|
/**
|
|
* Gets or sets the numerical value representing the mouse button that caused this event.
|
|
*
|
|
* Only one mouse button can cause an event at a time,
|
|
* but the set of all buttons currently pressed is kept in #buttons.
|
|
*
|
|
* This property describes nothing during a `mousemove` event,
|
|
* since no button press causes the event. Instead, use the convenience properties
|
|
* #left, #middle, or #right, or use the value
|
|
* of #buttons to determine which mouse buttons are
|
|
* held during `mousemove` events.
|
|
*
|
|
* Common values for this property:
|
|
* - 0: left mouse button
|
|
* - 1: middle mouse button
|
|
* - 2: right mouse button
|
|
*
|
|
* Other values are possible if the mouse has additional buttons.
|
|
*
|
|
* If there is no associated #event, setting this also
|
|
* sets the #buttons flags to only this button.
|
|
*
|
|
* This property is valid if this is a mouse event.
|
|
* @see #buttons
|
|
* @see #left
|
|
* @see #middle
|
|
* @see #right
|
|
*/
|
|
button: number;
|
|
/**
|
|
* Gets or sets the set of buttons that are currently being held down.
|
|
* If this is a `mouseup` event, this set of buttons does not include
|
|
* the button that was just released, which will be the value of #button.
|
|
*
|
|
* Common values for this property:
|
|
* - 0: not holding down any button
|
|
* - 1: left mouse button
|
|
* - 2: right mouse button
|
|
* - 3: both left and right mouse buttons
|
|
* - 4: middle mouse button
|
|
* - 5: middle and left mouse buttons
|
|
* - 6: middle and right mouse buttons
|
|
* - 7: all three common mouse buttons
|
|
*
|
|
* Other values are possible if the mouse has additional buttons.
|
|
*
|
|
* This property is valid if this is a mouse event.
|
|
* @see #button
|
|
* @see #left
|
|
* @see #middle
|
|
* @see #right
|
|
*/
|
|
buttons: number;
|
|
/**
|
|
* Gets or sets the key pressed or released as this event.
|
|
* This property is valid if this is a keyboard event.
|
|
*/
|
|
key: string;
|
|
/**
|
|
* Gets or sets whether the InputEvent represents a mouse-down or a key-down event.
|
|
* The default value is false.
|
|
* @since 1.1
|
|
*/
|
|
down: boolean;
|
|
/**
|
|
* Gets or sets whether the InputEvent represents a mouse-up or a key-up event.
|
|
* The default value is false.
|
|
* @since 1.1
|
|
*/
|
|
up: boolean;
|
|
/**
|
|
* Gets or sets whether this event represents a click or a double-click.
|
|
* It is zero if not a click; one if a single-click; two if a double-click.
|
|
* This property is valid if this is a mouse event.
|
|
*/
|
|
clickCount: number;
|
|
/**
|
|
* Gets or sets the amount of change associated with a mouse-wheel rotation.
|
|
* It is an abstract number, either positive or negative.
|
|
* This property is valid if this is a mouse-wheel event.
|
|
*/
|
|
delta: number;
|
|
/**
|
|
* This property is true when the InputEvent is caused by a touch event that registered more than one touch.
|
|
* @see #isTouchEvent
|
|
* @since 1.5
|
|
*/
|
|
isMultiTouch: boolean;
|
|
/**
|
|
* Gets or sets whether an InputEvent that applies to a GraphObject and bubbles
|
|
* up the chain of containing Panels is stopped from continuing up the chain.
|
|
*
|
|
* Some event handlers may set this to true to avoid getting any behavior from the containing Panels.
|
|
* The default value is false.
|
|
*/
|
|
handled: boolean;
|
|
/**
|
|
* Undocumented
|
|
* @see #handled
|
|
*/
|
|
bubbles: boolean;
|
|
/**
|
|
* Gets or sets the platform's user-agent-supplied event for this event.
|
|
* It may be null if no underlying event exists.
|
|
* @see #timestamp
|
|
*/
|
|
event: Event | null;
|
|
/**
|
|
* This read-only property is true when the InputEvent is caused by a touch event.
|
|
* @see #isMultiTouch
|
|
* @since 1.5
|
|
*/
|
|
readonly isTouchEvent: boolean;
|
|
/**
|
|
* Gets or sets the time at which the event occurred, in milliseconds.
|
|
*/
|
|
timestamp: number;
|
|
/**
|
|
* Gets or sets the diagram associated with the canvas that the event is currently targeting.
|
|
*/
|
|
targetDiagram: Diagram | null;
|
|
/**
|
|
* Gets or sets the GraphObject that is at the current mouse point, if any.
|
|
*
|
|
* For those events that are bubbled up the chain of parent Panels,
|
|
* this property provides access to the original GraphObject where the input event occurred.
|
|
* @see #handled
|
|
*/
|
|
targetObject: GraphObject | null;
|
|
/**
|
|
* Gets or sets whether the control key is being held down.
|
|
* This is true if the key was pressed at the time of the event.
|
|
* @see #modifiers
|
|
* @see #shift
|
|
* @see #alt
|
|
* @see #meta
|
|
*/
|
|
control: boolean;
|
|
/**
|
|
* Gets or sets whether the shift key is being held down.
|
|
* This is true if the key was pressed at the time of the event.
|
|
* @see #modifiers
|
|
* @see #control
|
|
* @see #alt
|
|
* @see #meta
|
|
*/
|
|
shift: boolean;
|
|
/**
|
|
* Gets or sets whether the alt key is being held down.
|
|
* This is true if the key was pressed at the time of the event.
|
|
* @see #modifiers
|
|
* @see #control
|
|
* @see #shift
|
|
* @see #meta
|
|
*/
|
|
alt: boolean;
|
|
/**
|
|
* Gets or sets whether the meta key is being held down.
|
|
* This is true if the key was pressed at the time of the event.
|
|
* @see #modifiers
|
|
* @see #control
|
|
* @see #shift
|
|
* @see #alt
|
|
*/
|
|
meta: boolean;
|
|
/**
|
|
* Gets or sets whether the logical left mouse button is being held down.
|
|
* This is true if the button was pressed at the time of the event.
|
|
*
|
|
* If this InputEvent has a #event of type `MouseEvent` with `e.type` of "mouseup" or "mousedown",
|
|
* this property uses the value of #button. Otherwise, it uses the value of #buttons.
|
|
*
|
|
* When setting, this sets the value of #buttons.
|
|
* @see #button
|
|
* @see #middle
|
|
* @see #right
|
|
*/
|
|
left: boolean;
|
|
/**
|
|
* Gets or sets whether the logical right mouse button is being held down.
|
|
* This is true if the button was pressed at the time of the event.
|
|
* @see #button
|
|
* @see #left
|
|
* @see #middle
|
|
*/
|
|
right: boolean;
|
|
/**
|
|
* Gets or sets whether the logical middle mouse button is being held down.
|
|
* This is true if the button was pressed at the time of the event.
|
|
* @see #button
|
|
* @see #left
|
|
* @see #right
|
|
*/
|
|
middle: boolean;
|
|
}
|
|
/**
|
|
* A DiagramEvent represents a more abstract event than an InputEvent.
|
|
* They are raised on the Diagram class.
|
|
* One can receive such events by registering a DiagramEvent listener on a Diagram
|
|
* by calling Diagram#addDiagramListener.
|
|
* The listener function, when called, will be passed an instance of a DiagramEvent.
|
|
* Use the #name property to decide what kind of diagram event it is.
|
|
* The #diagram property refers to the Diagram, and you can get additional information
|
|
* from that, such as the Diagram#lastInput, which in turn provides information
|
|
* such as InputEvent#documentPoint that may be relevant for that kind of DiagramEvent.
|
|
*
|
|
* The #subject and #parameter properties optionally provide additional information
|
|
* about the diagram event. The subject could be a collection of Parts or it could be
|
|
* an individual object such as a Link or a GraphObject within a Node.
|
|
* Everything depends on the kind of diagram event that it is.
|
|
*
|
|
* Some DiagramEvents such as "ObjectSingleClicked" or "BackgroundDoubleClicked" are normally
|
|
* associated with InputEvents.
|
|
* Some DiagramEvents such as "SelectionMoved" or "PartRotated" are associated with the
|
|
* results of Tool-handled gestures or CommandHandler actions.
|
|
* Some DiagramEvents are not necessarily associated with any input events at all,
|
|
* such as "ViewportBoundsChanged", which can happen due to programmatic
|
|
* changes to the Diagram#position and Diagram#scale properties.
|
|
*
|
|
* DiagramEvents that occur during a transaction may be called before the state of the whole diagram has settled down.
|
|
* This often means that such events occur before a layout, so nodes may not have their final positions,
|
|
* links may not have their final routes, and the Diagram#documentBounds and Diagram#viewportBounds
|
|
* may not yet have been updated.
|
|
* Such events may make additional changes to the diagram, which may in turn result in additional side-effects.
|
|
*
|
|
* DiagramEvents that occur outside of a transaction require you to start and commit a transaction around any side-effects that you want to do.
|
|
* However, some DiagramEvents do not allow you to make any changes to the Diagram or Model.
|
|
*
|
|
* Currently defined diagram event names include:
|
|
* - **"InitialAnimationStarting"**, the initial AnimationManager#defaultAnimation is about to start;<br/>
|
|
* this can be useful for customizing the initial animation, see AnimationManager#initialAnimationStyle.
|
|
* - **"AnimationStarting"**, a AnimationManager#defaultAnimation is about to start;<br/>
|
|
* do not modify the Diagram or its Model in the event listener.
|
|
* - **"AnimationFinished"**, a AnimationManager#defaultAnimation just completed;<br/>
|
|
* do not modify the Diagram or its Model in the event listener.
|
|
* - **"BackgroundSingleClicked"**, a click that was not on any Part;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"BackgroundDoubleClicked"**, a double-click that was not on any Part;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"BackgroundContextClicked"**, a context-click that was not on any Part;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"ChangingSelection"**, an operation is about to change the Diagram#selection collection,<br/>
|
|
* which is also the value of the DiagramEvent#subject;<br/>
|
|
* do not make any changes to the selection or the diagram in the event listener;
|
|
* note that just setting Part#isSelected will not raise this event, but tools and commands will.
|
|
* - **"ChangedSelection"**, an operation has just changed the Diagram#selection collection,<br/>
|
|
* which is also the value of the DiagramEvent#subject;<br/>
|
|
* do not make any changes to the selection or the diagram in the event listener;
|
|
* note that just setting Part#isSelected will not raise this event, but tools and commands will.
|
|
* - **"ClipboardChanged"**, Parts have been copied to the clipboard by CommandHandler#copySelection;<br/>
|
|
* the DiagramEvent#subject is the collection of Parts;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"ClipboardPasted"**, Parts have been copied from the clipboard into the Diagram by CommandHandler#pasteSelection;<br/>
|
|
* the DiagramEvent#subject is the Diagram#selection,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"DocumentBoundsChanged"**, the area of the diagram's Parts, Diagram#documentBounds, has changed;<br/>
|
|
* the DiagramEvent#parameter is the old Rect
|
|
* - **"ExternalObjectsDropped"**, Parts have been copied into the Diagram by drag-and-drop from outside of the Diagram;<br/>
|
|
* the DiagramEvent#subject is the set of Parts that were dropped (which is also the Diagram#selection),
|
|
* the DiagramEvent#parameter is the source Diagram,
|
|
* and this is called within a transaction. If you choose, you can cancel the drop by executing:
|
|
* <code>e.diagram.toolManager.draggingTool.transactionResult = null;</code>
|
|
* - **"GainedFocus"**, the diagram has gained keyboard focus, such as after a call to Diagram#focus.
|
|
* - **"InitialLayoutCompleted"**, the whole diagram layout has updated for the first time since a major change to the Diagram, such as replacing the Model;<br/>
|
|
* if you make any changes, you do not need to perform a transaction.
|
|
* - **"LayoutCompleted"**, the whole diagram layout has just been updated;<br/>
|
|
* if you make any changes, you do not need to perform a transaction.
|
|
* - **"LinkDrawn"**, the user has just created a new Link using LinkingTool;<br/>
|
|
* the DiagramEvent#subject is the new Link,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"LinkRelinked"**, the user has just reconnected an existing Link using RelinkingTool or DraggingTool;<br/>
|
|
* the DiagramEvent#subject is the modified Link,<br/>
|
|
* the DiagramEvent#parameter is the GraphObject port that the link was disconnected from,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"LinkReshaped"**, the user has just rerouted an existing Link using LinkReshapingTool;<br/>
|
|
* the DiagramEvent#subject is the modified Link,<br/>
|
|
* the DiagramEvent#parameter is the List of Points of the link's original route,
|
|
* and this is called within a transaction.
|
|
* - **"LostFocus"**, the diagram has lost keyboard focus, a.k.a. "blur".
|
|
* - **"Modified"**, the Diagram#isModified property has been set to a new value --
|
|
* useful for marking a window as having been modified since the last save;<br/>
|
|
* do not modify the Diagram or its Model in the event listener.
|
|
* - **"ObjectSingleClicked"**, a click that occurred on a GraphObject;<br/>
|
|
* the DiagramEvent#subject is the GraphObject;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"ObjectDoubleClicked"**, a double-click that occurred on a GraphObject;<br/>
|
|
* the DiagramEvent#subject is the GraphObject;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"ObjectContextClicked"**, a context-click that occurred on a GraphObject;<br/>
|
|
* the DiagramEvent#subject is the GraphObject;<br/>
|
|
* if you make any changes, start and commit your own transaction.
|
|
* - **"PartCreated"**, the user inserted a new Part by ClickCreatingTool;<br/>
|
|
* the DiagramEvent#subject is the new Part,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"PartResized"**, the user has changed the size of a GraphObject by ResizingTool;<br/>
|
|
* the DiagramEvent#subject is the GraphObject,<br/>
|
|
* the DiagramEvent#parameter is the original Size,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"PartRotated"**, the user has changed the angle of a GraphObject by RotatingTool;<br/>
|
|
* the DiagramEvent#subject is the GraphObject,<br/>
|
|
* the DiagramEvent#parameter is the original angle in degrees,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SelectionMoved"**, the user has moved selected Parts by DraggingTool;<br/>
|
|
* the DiagramEvent#subject is a Set of the moved Parts,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SelectionCopied"**, the user has copied selected Parts by DraggingTool;<br/>
|
|
* the DiagramEvent#subject is Set of the newly copied Parts,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SelectionDeleted"**, the user has deleted selected Parts by CommandHandler#deleteSelection;<br/>
|
|
* the DiagramEvent#subject is the collection of Parts that were deleted,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SelectionDeleting"**, the user is about to delete selected Parts by CommandHandler#deleteSelection;<br/>
|
|
* the DiagramEvent#subject is the Diagram#selection collection of Parts to be deleted,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SelectionGrouped"**, the user has made a new Group out of the selected Parts by CommandHandler#groupSelection;<br/>
|
|
* the DiagramEvent#subject is the new Group,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SelectionUngrouped"**, the user has removed a selected Group but kept its members by CommandHandler#ungroupSelection;<br/>
|
|
* the DiagramEvent#subject is the collection of Groups that were ungrouped,<br/>
|
|
* the DiagramEvent#parameter is the collection of former member Parts that were ungrouped,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SubGraphCollapsed"**, the user has collapsed selected Groups by CommandHandler#collapseSubGraph;<br/>
|
|
* the DiagramEvent#subject is the collection of Groups that were collapsed,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"SubGraphExpanded"**, the user has expanded selected Groups by CommandHandler#expandSubGraph;<br/>
|
|
* the DiagramEvent#subject is the collection of Groups that were expanded,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"TextEdited"**, the user has changed the string value of a TextBlock by TextEditingTool;<br/>
|
|
* the DiagramEvent#subject is the edited TextBlock,<br/>
|
|
* the DiagramEvent#parameter is the original string,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"TreeCollapsed"**, the user has collapsed selected Nodes with subtrees by CommandHandler#collapseTree;<br/>
|
|
* the DiagramEvent#subject is the collection of Nodes that were collapsed,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"TreeExpanded"**, the user has expanded selected Nodes with subtrees by CommandHandler#expandTree;<br/>
|
|
* the DiagramEvent#subject is the collection of Nodes that were expanded,<br/>
|
|
* and this is called within a transaction.
|
|
* - **"ViewportBoundsChanged"**, the visible area of the Diagram, Diagram#viewportBounds, has changed;<br/>
|
|
* the DiagramEvent#subject is an object whose "scale" property is the old Diagram#scale value,
|
|
* whose "position" property is the old Diagram#position value,
|
|
* and whose "bounds" property is the old Diagram#viewportBounds value;
|
|
* the DiagramEvent#parameter is also the old viewportBounds Rect.
|
|
* @unrestricted
|
|
*/
|
|
export class DiagramEvent {
|
|
/**
|
|
* The DiagramEvent class constructor produces an empty DiagramEvent.
|
|
* You should never need to call this constructor.
|
|
* But if you do, you must first set #diagram to the Diagram before any other use.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Gets the diagram associated with the event.
|
|
*/
|
|
diagram: Diagram;
|
|
/**
|
|
* Gets or sets the name of the kind of diagram event that this represents.
|
|
* This property should always be set to one of the recognized list of names,
|
|
* as listed in the documentation for DiagramEvent.
|
|
*/
|
|
name: string;
|
|
/**
|
|
* Gets or sets an optional object that is the subject of the diagram event.
|
|
* This property defaults to null.
|
|
*/
|
|
subject: any;
|
|
/**
|
|
* Gets or sets an optional object that describes the change to the subject of the diagram event.
|
|
* This property defaults to null.
|
|
*/
|
|
parameter: any;
|
|
}
|
|
/**
|
|
* The signature for a function acting as a handler for DiagramEvents.
|
|
*/
|
|
export type DiagramEventHandler = (e: DiagramEvent) => void;
|
|
/**
|
|
* (Undocumented, internal interface)
|
|
*/
|
|
export type DiagramEventName = 'InitialAnimationStarting' | 'AnimationStarting' | 'AnimationFinished' | 'BackgroundSingleClicked' | 'BackgroundDoubleClicked' | 'BackgroundContextClicked' | 'ChangingSelection' | 'ChangedSelection' | 'ClipboardChanged' | 'ClipboardPasted' | 'DocumentBoundsChanged' | 'ExternalObjectsDropped' | 'GainedFocus' | 'InitialLayoutCompleted' | 'LayoutCompleted' | 'LinkDrawn' | 'LinkRelinked' | 'LinkReshaped' | 'LostFocus' | 'Modified' | 'ObjectSingleClicked' | 'ObjectDoubleClicked' | 'ObjectContextClicked' | 'PartCreated' | 'PartResized' | 'PartRotated' | 'SelectionMoved' | 'SelectionCopied' | 'SelectionDeleted' | 'SelectionDeleting' | 'SelectionGrouped' | 'SelectionUngrouped' | 'SubGraphCollapsed' | 'SubGraphExpanded' | 'TextEdited' | 'TreeCollapsed' | 'TreeExpanded' | 'ViewportBoundsChanged' | 'InvalidateDraw';
|
|
/**
|
|
* (Undocumented, internal interface)
|
|
*/
|
|
export interface DiagramEventsInterface {
|
|
AnimationStarting?: DiagramEventHandler;
|
|
AnimationFinished?: DiagramEventHandler;
|
|
BackgroundSingleClicked?: DiagramEventHandler;
|
|
BackgroundDoubleClicked?: DiagramEventHandler;
|
|
BackgroundContextClicked?: DiagramEventHandler;
|
|
ChangingSelection?: DiagramEventHandler;
|
|
ChangedSelection?: DiagramEventHandler;
|
|
ClipboardChanged?: DiagramEventHandler;
|
|
ClipboardPasted?: DiagramEventHandler;
|
|
DocumentBoundsChanged?: DiagramEventHandler;
|
|
ExternalObjectsDropped?: DiagramEventHandler;
|
|
GainedFocus?: DiagramEventHandler;
|
|
InitialLayoutCompleted?: DiagramEventHandler;
|
|
LayoutCompleted?: DiagramEventHandler;
|
|
LinkDrawn?: DiagramEventHandler;
|
|
LinkRelinked?: DiagramEventHandler;
|
|
LinkReshaped?: DiagramEventHandler;
|
|
LostFocus?: DiagramEventHandler;
|
|
Modified?: DiagramEventHandler;
|
|
ObjectSingleClicked?: DiagramEventHandler;
|
|
ObjectDoubleClicked?: DiagramEventHandler;
|
|
ObjectContextClicked?: DiagramEventHandler;
|
|
PartCreated?: DiagramEventHandler;
|
|
PartResized?: DiagramEventHandler;
|
|
PartRotated?: DiagramEventHandler;
|
|
SelectionMoved?: DiagramEventHandler;
|
|
SelectionCopied?: DiagramEventHandler;
|
|
SelectionDeleted?: DiagramEventHandler;
|
|
SelectionDeleting?: DiagramEventHandler;
|
|
SelectionGrouped?: DiagramEventHandler;
|
|
SelectionUngrouped?: DiagramEventHandler;
|
|
SubGraphCollapsed?: DiagramEventHandler;
|
|
SubGraphExpanded?: DiagramEventHandler;
|
|
TextEdited?: DiagramEventHandler;
|
|
TreeCollapsed?: DiagramEventHandler;
|
|
TreeExpanded?: DiagramEventHandler;
|
|
ViewportBoundsChanged?: DiagramEventHandler;
|
|
}
|
|
/**
|
|
* A ChangedEvent represents a change to an object, typically a GraphObject,
|
|
* but also for model data, a Model, or a Diagram.
|
|
* The most common case is for remembering the name of a property
|
|
* and the before-and-after values for that property.
|
|
*
|
|
* You can listen for changed events on the model using Model#addChangedListener
|
|
* or Diagram#addModelChangedListener, and on the Diagram using Diagram#addChangedListener.
|
|
*
|
|
* There are four kinds of changes, represented by enumerated values:
|
|
* ChangedEvent.Property (the most common), ChangedEvent.Insert and ChangedEvent.Remove
|
|
* (to represent inserting or removing objects from collections),
|
|
* and ChangedEvent.Transaction (to notify about beginning or ending transactions or undo or redo).
|
|
*
|
|
* The most common kind of ChangedEvent is a Property change.
|
|
* The name of the property is given by #propertyName.
|
|
* The modified object is given by #object.
|
|
* Use the #oldValue and #newValue properties for the before and after property values.
|
|
*
|
|
* For an Insert ChangedEvent, the modified collection (often an Array) is a property value on the #object.
|
|
* The #propertyName helps distinguish between different collections on the object.
|
|
* Use the #newValue property to indicate the value that was inserted.
|
|
* Use the #newParam property to indicate where or how, such as an array index or dictionary key.
|
|
*
|
|
* For a Remove ChangedEvent, the modified collection is a property value on the #object.
|
|
* The #propertyName helps distinguish between different collections on the object.
|
|
* Use the #oldValue property to indicate the value that was removed.
|
|
* Use the #oldParam property to indicate where or how, such as an array index or dictionary key.
|
|
*
|
|
* Transaction ChangedEvents are generated by the UndoManager.
|
|
* The #propertyName names the nature of the ChangedEvent.
|
|
* For the very first transaction, the property name is "StartingFirstTransaction".
|
|
* This ChangedEvent precedes a ChangedEvent whose property name is "StartedTransaction",
|
|
* which occurs for every top-level transaction.
|
|
*
|
|
* When ending a transaction, there is first a ChangedEvent whose name is "ComittingTransaction".
|
|
* This is followed by one with either "CommittedTransaction" or "RolledBackTransaction",
|
|
* depending on how the transaction is ending.
|
|
* The #oldValue provides the transaction name and the #object is the Transaction being finished.
|
|
* (Note that the Transaction value may be null if no Transaction is available at that time,
|
|
* perhaps because there were no changes made during the transaction.)
|
|
* That Transaction can be scanned to look for ChangedEvents that you may wish to record in a database,
|
|
* all within a single database transaction.
|
|
*
|
|
* There are also Transaction ChangedEvents corresponding to "StartingUndo", "FinishedUndo",
|
|
* "StartingRedo", and "FinishedRedo".
|
|
* The #object property provides the Transaction that is about-to-be or just-was undone or redone.
|
|
*
|
|
* Non-Transaction ChangedEvents are remembered by the UndoManager, if UndoManager#isEnabled,
|
|
* and held in the UndoManager#history as Transactions which hold lists of ChangedEvents.
|
|
* That is why ChangedEvent implements #undo and #redo of the change that it remembers.
|
|
*
|
|
* When the ChangedEvent represents a change to a Model, the value of #model is non-null
|
|
* and the value of #diagram is meaningless.
|
|
* If the change is a structural change to the model,
|
|
* the value of #modelChange indicates the kind of change.
|
|
* Currently defined model changed event names include:
|
|
* - **"nodeDataArray"**, after the model's Model#nodeDataArray is replaced, inserted into or removed from
|
|
* (setting Model#nodeDataArray or calling Model#addNodeData or Model#removeNodeData)
|
|
* - **"nodeKey"**, after changing a node data's unique key (Model#setKeyForNodeData)
|
|
* - **"nodeCategory"**, after changing a node data's category (Model#setCategoryForNodeData)
|
|
* - **"linkDataArray"**, after the model's GraphLinksModel#linkDataArray is replaced, inserted into or removed from
|
|
* (setting GraphLinksModel#linkDataArray or calling GraphLinksModel#addLinkData
|
|
* or GraphLinksModel#removeLinkData)
|
|
* - **"linkKey"**, after changing a link data's unique key (GraphLinksModel#setKeyForLinkData)
|
|
* - **"linkCategory"**, after changing a link data's category (GraphLinksModel#setCategoryForLinkData)
|
|
* - **"linkFromKey"**, after changing a link data's "from" node key (GraphLinksModel#setFromKeyForLinkData)
|
|
* - **"linkToKey"**, after changing a link data's "to" node key (GraphLinksModel#setToKeyForLinkData)
|
|
* - **"linkFromPortId"**, after changing a link data's "from" port identifier string (GraphLinksModel#setFromPortIdForLinkData)
|
|
* - **"linkToPortId"**, after changing a link data's "to" port identifier string (GraphLinksModel#setToPortIdForLinkData)
|
|
* - **"linkLabelKeys"**, after replacing, inserting into, or removing from a link data's array of keys to label nodes
|
|
* (calling GraphLinksModel#setLabelKeysForLinkData, GraphLinksModel#addLabelKeyForLinkData,
|
|
* or GraphLinksModel#removeLabelKeyForLinkData)
|
|
* - **"nodeGroupKey"**, after changing a node data's key for a containing group data (GraphLinksModel#setGroupKeyForNodeData)
|
|
* - **"nodeParentKey"**, after changing a node data's "parent" node key (TreeModel#setParentKeyForNodeData)
|
|
* - **"parentLinkCategory"**, after changing a node data's "parent" link's category(TreeModel#setParentLinkCategoryForNodeData)
|
|
* - other names are for internal implementation use only, only on Transaction ChangedEvents
|
|
*
|
|
* The value of ChangedEvent#propertyName indicates the actual name of the property that was modified.
|
|
* ChangedEvent#modelChange is a non-empty string only when there is a known structural change to the model,
|
|
* not just the setting of some property on some object.
|
|
*
|
|
* When the ChangedEvent represents a change to a Diagram or a GraphObject within a diagram,
|
|
* the value of #diagram is non-null and
|
|
* the values of #model and #modelChange are meaningless.
|
|
*
|
|
* Please note that ChangedEvents can be raised for many different causes.
|
|
* You may not be interested in changes to temporary objects -- in that case ignore the ChangedEvent when
|
|
* Model#skipsUndoManager or Diagram#skipsUndoManager is true.
|
|
* @unrestricted
|
|
* @category Model
|
|
*/
|
|
export class ChangedEvent {
|
|
/**
|
|
* The ChangedEvent class constructor produces an empty ChangedEvent object.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* For informational events, such as transactions and undo/redo operations,
|
|
* and used as the value for ChangedEvent#change.
|
|
* The ChangedEvent#object refers to the Transaction affected, if any.
|
|
* The ChangedEvent#propertyName distinguishes the different transaction or undo or redo stages.
|
|
* The ChangedEvent#oldValue may provide the transaction name, if available, as given to UndoManager#commitTransaction.
|
|
* @constant
|
|
*/
|
|
static Transaction: EnumValue;
|
|
/**
|
|
* For simple property changes,
|
|
* and used as the value for ChangedEvent#change.
|
|
* The name of the property is given by ChangedEvent#propertyName.
|
|
* The modified object is given by ChangedEvent#object.
|
|
* Use the ChangedEvent#oldValue and ChangedEvent#newValue properties for the previous and next property values.
|
|
*
|
|
* For model changes, the ChangedEvent#modelChange may be non-empty, indicating a structural change to the model.
|
|
* @constant
|
|
*/
|
|
static Property: EnumValue;
|
|
/**
|
|
* For inserting into collections,
|
|
* and used as the value for ChangedEvent#change.
|
|
* The modified object is given by ChangedEvent#object.
|
|
* Use the optional ChangedEvent#propertyName to distinguish between different collections on the object.
|
|
* Use the ChangedEvent#newValue property to indicate the value that was inserted.
|
|
* Use the optional ChangedEvent#newParam property to indicate where or how, such as an array index or dictionary key.
|
|
* @constant
|
|
*/
|
|
static Insert: EnumValue;
|
|
/**
|
|
* For removing from collections,
|
|
* and used as the value for ChangedEvent#change.
|
|
* The modified object is given by ChangedEvent#object.
|
|
* Use the optional ChangedEvent#propertyName to distinguish between different collections on the object.
|
|
* Use the ChangedEvent#oldValue property to indicate the value that was removed.
|
|
* Use the optional ChangedEvent#oldParam property to indicate where or how, such as an array index or dictionary key.
|
|
* @constant
|
|
*/
|
|
static Remove: EnumValue;
|
|
/**
|
|
* Forget any object references that this ChangedEvent may have.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* Make a copy of this ChangedEvent.
|
|
* ChangedEvents are copied when the UndoManager adds to a Transaction.
|
|
* @return {ChangedEvent}
|
|
*/
|
|
copy(): ChangedEvent;
|
|
/**
|
|
* This is a convenient method to get the right value, depending on the value of undo,
|
|
* when implementing a state change as part of an undo or a redo.
|
|
* @param {boolean} undo If true, returns the oldValue, otherwise returns the newValue.
|
|
* @return {*} Either the oldValue or the newValue.
|
|
*/
|
|
getValue(undo: boolean): any;
|
|
/**
|
|
* This is a convenient method to get the right parameter value, depending on the value of undo,
|
|
* when implementing a state change as part of an undo or a redo.
|
|
* @param {boolean} undo If true, returns the oldParam, otherwise returns the newParam.
|
|
* @return {*} Either the oldParam or the newParam.
|
|
*/
|
|
getParam(undo: boolean): any;
|
|
/**
|
|
* This predicate returns true if you can call undo().
|
|
* @return {boolean} True if ready for undo() to be called.
|
|
*/
|
|
canUndo(): boolean;
|
|
/**
|
|
* Reverse the effects of this object change.
|
|
* canUndo() must be true for this method to have any effect.
|
|
*/
|
|
undo(): void;
|
|
/**
|
|
* This predicate returns true if you can call redo().
|
|
* @return {boolean} True if ready for redo() to be called.
|
|
*/
|
|
canRedo(): boolean;
|
|
/**
|
|
* Re-perform this object change after an undo().
|
|
* canRedo() must be true for this method to have any effect.
|
|
*/
|
|
redo(): void;
|
|
/**
|
|
* Gets or sets the Model or TreeModel or GraphLinksModel that was modified.
|
|
* When this property is non-null, the #diagram property will be null.
|
|
* However this property and the #diagram property may both be null simultaneously,
|
|
* when no particular model or diagram applies.
|
|
*/
|
|
model: Model | null;
|
|
/**
|
|
* Gets or sets the Diagram that was modified.
|
|
* When this property is non-null, the #model property will be null.
|
|
* However this property and the #model property may both be null simultaneously,
|
|
* when no particular model or diagram applies.
|
|
*/
|
|
diagram: Diagram | null;
|
|
/**
|
|
* Gets or sets the nature of change that occurred.
|
|
* The default is ChangedEvent.Property.
|
|
* Other values are ChangedEvent.Insert, ChangedEvent.Remove,
|
|
* and ChangedEvent.Transaction.
|
|
*/
|
|
change: EnumValue;
|
|
/**
|
|
* Gets or sets the name of the model change, reflecting a change to
|
|
* model data in addition to a change to the model itself.
|
|
*
|
|
* The default is an empty string, which indicates that this is just
|
|
* a regular change to some object's state, probably its property.
|
|
* For a list of possible model change names, see the documentation for ChangedEvent.
|
|
* The names are compared in a case-sensitive manner.
|
|
*/
|
|
modelChange: string;
|
|
/**
|
|
* Gets or sets the name of the property change.
|
|
* The default is an empty string, which is not a valid property name.
|
|
* This property can be useful even when the type of change is
|
|
* not ChangedEvent.Property, because it can help identify
|
|
* the collection in the #object that was modified
|
|
* (for ChangedEvent.Insert or ChangedEvent.Remove)
|
|
* or the stage of the current transaction (for ChangedEvent.Transaction).
|
|
*/
|
|
propertyName: string | ((a: ObjectData, b: any) => any);
|
|
/**
|
|
* This read-only property is true when this ChangedEvent is of type ChangedEvent.Transaction and represents the end of a transactional change.
|
|
* It is implemented as:
|
|
* ```js
|
|
* return (this.change === ChangedEvent.Transaction &&
|
|
* (this.propertyName === "CommittedTransaction" ||
|
|
* this.propertyName === "FinishedUndo" ||
|
|
* this.propertyName === "FinishedRedo"));
|
|
* ```
|
|
*/
|
|
readonly isTransactionFinished: boolean;
|
|
/**
|
|
* Gets or sets the Object that was modified.
|
|
* The default is null.
|
|
*
|
|
* For ChangedEvent.Transaction changes, this may be the Transaction.
|
|
*/
|
|
object: ObjectData | null;
|
|
/**
|
|
* Gets or sets the previous or old value that the property had.
|
|
* The default is null.
|
|
*/
|
|
oldValue: any;
|
|
/**
|
|
* Gets or sets an optional value associated with the old value.
|
|
* Most properties do not require any parameter to describe the change.
|
|
* This is typically a value that helps distinguish the old value, such as an index into an array.
|
|
* It is null if it is not used.
|
|
* The default is null.
|
|
*/
|
|
oldParam: any;
|
|
/**
|
|
* Gets or sets the next or current value that the property has.
|
|
* The default is null.
|
|
*/
|
|
newValue: any;
|
|
/**
|
|
* Gets or sets an optional value associated with the new value.
|
|
* Most properties do not require any parameter to describe the change.
|
|
* This is typically a value that helps distinguish the new value, such as an index into an array.
|
|
* It is null if it is not used.
|
|
* The default is null.
|
|
*/
|
|
newParam: any;
|
|
}
|
|
/**
|
|
* The signature for a function acting as a handler for ChangedEvents.
|
|
*/
|
|
export type ChangedEventHandler = (e: ChangedEvent) => void;
|
|
/**
|
|
* A Transaction holds a list of ChangedEvents collected during a transaction,
|
|
* as the value of the read-only #changes property.
|
|
*
|
|
* Start a transaction by calling UndoManager#startTransaction
|
|
* (or Model#startTransaction or Diagram#startTransaction, which call that method).
|
|
* Be sure to finish a transaction with a matching call to UndoManager#commitTransaction
|
|
* (or Model#commitTransaction or Diagram#commitTransaction),
|
|
* or a call to UndoManager#rollbackTransaction
|
|
* (or the same named methods on Model or Diagram).
|
|
*
|
|
* If you are performing multiple or repeated changes to a model or diagram,
|
|
* surround all of the code with calls to start and commit the transaction --
|
|
* do not perform repeated calls to start-commit-start-commit.
|
|
* Typically each change caused by the user, such as a button click or a change of focus or a mouse drag,
|
|
* should perform one transaction in which all changes are made.
|
|
* All of the predefined commands and tools perform transactions.
|
|
*
|
|
* Undoing or redoing a transaction is done by calling UndoManager#undo or UndoManager#redo.
|
|
* Those methods call the #undo or #redo methods here.
|
|
*
|
|
* The UndoManager holds a list of Transactions in its UndoManager#history.
|
|
* @unrestricted
|
|
* @category Model
|
|
*/
|
|
export class Transaction {
|
|
/**
|
|
* Construct an object holding an empty list of ChangedEvents
|
|
* and no #name.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Clear all of the saved changes.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* This predicate returns true if you can call #undo,
|
|
* namely when #isComplete is true.
|
|
* @return {boolean} true if ready for #undo to be called.
|
|
*/
|
|
canUndo(): boolean;
|
|
/**
|
|
* Undo all of the changes, in reverse order.
|
|
* This is normally called only by the UndoManager.
|
|
* #canUndo must be true for this method to have any effect.
|
|
*/
|
|
undo(): void;
|
|
/**
|
|
* This predicate returns true if you can call #redo,
|
|
* namely when #isComplete is true.
|
|
* @return {boolean} true if ready for #redo to be called.
|
|
*/
|
|
canRedo(): boolean;
|
|
/**
|
|
* Re-perform these changes after an #undo.
|
|
* This is normally called only by the UndoManager.
|
|
* #canRedo must be true for this method to have any effect.
|
|
*/
|
|
redo(): void;
|
|
/**
|
|
* This read-only property returns the list of ChangedEvents.
|
|
* The changes are stored in order of occurrence.
|
|
*
|
|
* You should not modify this list.
|
|
*/
|
|
readonly changes: List<ChangedEvent>;
|
|
/**
|
|
* Gets or sets the transaction name for this collection of changes.
|
|
* This is set by a top-level call to UndoManager#commitTransaction.
|
|
*/
|
|
name: string;
|
|
/**
|
|
* Gets or sets whether we can add more ChangedEvents to this list of changes.
|
|
* This is initially false.
|
|
* It is set to true by UndoManager#commitTransaction and UndoManager#rollbackTransaction.
|
|
*/
|
|
isComplete: boolean;
|
|
}
|
|
/**
|
|
* An UndoManager observes and records model and diagram changes in transactions and
|
|
* supports undo/redo operations.
|
|
* You will need to set the #isEnabled property to true in order for
|
|
* the UndoManager to record changes and for users to perform an undo or a redo.
|
|
*
|
|
* Typically an operation will call #startTransaction,
|
|
* make some changes to the Model and/or Diagram,
|
|
* and then call #commitTransaction.
|
|
* Any ChangedEvents that occur will be recorded in a
|
|
* Transaction object.
|
|
* If for some reason you do not wish to complete the transaction
|
|
* successfully, you can call #rollbackTransaction instead
|
|
* of #commitTransaction.
|
|
*
|
|
* For convenience the Diagram#commit and Model#commit methods
|
|
* execute a function within a transaction and then perform a commit,
|
|
* or else a rollback upon an error.
|
|
*
|
|
* The #history property is a list of Transactions.
|
|
* #commitTransaction will add the #currentTransaction
|
|
* to the #history list.
|
|
* #rollbackTransaction will undo the changes remembered in the
|
|
* #currentTransaction and then discard it, without changing the #history.
|
|
* You can limit how many transactions are remembered in the history
|
|
* by setting #maxHistoryLength.
|
|
*
|
|
* Transactions may be nested.
|
|
* Be sure to call either #commitTransaction or #rollbackTransaction
|
|
* for each call to #startTransaction.
|
|
* Avoid repeated start-commit-start-commit calls as a result of a user's actions.
|
|
* Instead, start, make all changes, and then commit.
|
|
*
|
|
* If you want to restore the diagram to the state before the latest complete
|
|
* transaction, call #undo.
|
|
* Call #redo to change the diagram to a later state.
|
|
* If after some number of undo's you start a transaction,
|
|
* all of the history after the current state is discarded,
|
|
* and a new transaction may be recorded.
|
|
* You cannot undo or redo during a transaction.
|
|
*
|
|
* Initially each Model has its own UndoManager.
|
|
* UndoManagers may be shared by multiple Models by replacing
|
|
* the standard Model#undoManager created by the model constructor.
|
|
*
|
|
* There are several informational properties:
|
|
* - #isInTransaction is true when a top-level transaction has been started that has not yet been committed or rolled-back.
|
|
* - #currentTransaction holds the flattened list of all ChangedEvents
|
|
* that have happened within the current transaction.
|
|
* - #transactionLevel indicates the current depth of nesting.
|
|
* - #nestedTransactionNames holds the stack of transaction names supplied to
|
|
* #startTransaction calls.
|
|
* - #history holds only complete top-level transactions.
|
|
* - #isUndoingRedoing is true during a call to #undo or #redo.
|
|
* - #historyIndex indicates which Transaction in the #history is the next to be "undone";
|
|
* this is decremented by each undo and incremented by each redo.
|
|
* - #transactionToUndo and #transactionToRedo indicate which Transaction may be undone or redone next, if any.
|
|
* - #models returns an iterator over all of the Models that this UndoManager is handling.
|
|
*
|
|
* A transaction may not be ongoing when replacing a Diagram#model,
|
|
* because it would not make sense to be replacing the UndoManager (the Model#undoManager)
|
|
* while changes are being recorded.
|
|
*
|
|
* Replacing a Diagram#model copies certain properties from the old UndoManager to the new one,
|
|
* including #isEnabled and #maxHistoryLength.
|
|
* @unrestricted
|
|
* @category Model
|
|
*/
|
|
export class UndoManager {
|
|
/**
|
|
* The constructor produces an empty UndoManager
|
|
* with no transaction history.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Clear all of the Transactions and clear all other state,
|
|
* including any ongoing transaction without rolling back.
|
|
* However, this maintains its references to its Models.
|
|
*
|
|
* You should not call this method during a transaction.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* @expose
|
|
* Undocumented.
|
|
* Copy persistent properties from an old UndoManager to this new one.
|
|
* This is called by the Diagram#model property setter.
|
|
* @param old
|
|
*/
|
|
copyProperties(old: UndoManager): void;
|
|
/**
|
|
* Make sure this UndoManager knows about a Model for which
|
|
* it may receive ChangedEvents when the given Model is changed.
|
|
* The model will also receive notifications about transactions and undo or redo operations.
|
|
*
|
|
* You should not call this method during a transaction.
|
|
* @param {Model} model A Model that this UndoManager is managing.
|
|
* @see #models
|
|
* @see #removeModel
|
|
*/
|
|
addModel(model: Model): void;
|
|
/**
|
|
* Inform this UndoManager that it will no longer be receiving ChangedEvents
|
|
* when the given Model is changed.
|
|
* The model will no longer receive notifications about transactions and undo or redo operations.
|
|
*
|
|
* You should not call this method during a transaction.
|
|
* If you call this method between transactions when there is a transaction history,
|
|
* you should be careful that there are no ChangedEvents referring to that model in any Transactions.
|
|
* @param {Model} model A Model that this UndoManager should no longer manage.
|
|
* @see #models
|
|
* @see #addModel
|
|
*/
|
|
removeModel(model: Model): void;
|
|
/**
|
|
* Begin a transaction, where the changes are held by a Transaction object
|
|
* as the value of #currentTransaction.
|
|
* You must call either #commitTransaction or #rollbackTransaction afterwards.
|
|
*
|
|
* For convenience, this method is called by Model#startTransaction and Diagram#startTransaction.
|
|
*
|
|
* Transactions can be nested.
|
|
* Starting or ending a nested transaction will return false.
|
|
* Nested transactions will share the same Transaction list of ChangedEvents.
|
|
*
|
|
* Starting a transaction will not necessarily cause #currentTransaction to be non-null.
|
|
* A Transaction object is usually only created by #handleChanged when a ChangedEvent first occurs.
|
|
* @param {string=} tname a short string describing the transaction, pushed onto the #nestedTransactionNames stack.
|
|
* @return {boolean} true if starting a top-level transaction.
|
|
* @see #commitTransaction
|
|
* @see #rollbackTransaction
|
|
*/
|
|
startTransaction(tname?: string): boolean;
|
|
/**
|
|
* Commit the current transaction started by a call to #startTransaction.
|
|
*
|
|
* For convenience, this method is called by Model#commitTransaction and Diagram#commitTransaction.
|
|
*
|
|
* If this call stops a top-level transaction,
|
|
* we mark the #currentTransaction as complete (Transaction#isComplete),
|
|
* we add the Transaction to the #history list,
|
|
* and we return true.
|
|
* Committing a transaction when there have been some undos without corresponding
|
|
* redos will throw away the Transactions holding changes that happened
|
|
* after the current state, before adding the new Transaction to the
|
|
* #history list.
|
|
* @param {string=} tname a short string describing the transaction;
|
|
* this is recorded as the Transaction#name and need not be the same as the string passed to #startTransaction.
|
|
* If the value is an empty string or not supplied, this will use the name given to #startTransaction.
|
|
* @return {boolean} true if ending a top-level transaction.
|
|
* @see #startTransaction
|
|
* @see #rollbackTransaction
|
|
*/
|
|
commitTransaction(tname?: string): boolean;
|
|
/**
|
|
* Rollback the current transaction started by a call to #startTransaction, undoing any changes.
|
|
*
|
|
* For convenience, this method is called by Model#rollbackTransaction and Diagram#rollbackTransaction.
|
|
*
|
|
* This undoes and then discards the changes in the #currentTransaction.
|
|
* You must have started a transaction previously.
|
|
* @return {boolean} true if ending a top-level transaction.
|
|
* @see #startTransaction
|
|
* @see #commitTransaction
|
|
*/
|
|
rollbackTransaction(): boolean;
|
|
/**
|
|
* This predicate returns true if you can call #undo.
|
|
* This will return false if #isEnabled is false (as it is by default),
|
|
* if any transaction is ongoing, or
|
|
* if there is no #transactionToUndo that can be undone.
|
|
* @return {boolean} true if ready for #undo to be called.
|
|
*/
|
|
canUndo(): boolean;
|
|
/**
|
|
* Reverse the effects of the #transactionToUndo.
|
|
* #canUndo must be true for this method to have any effect.
|
|
*
|
|
* This is called by CommandHandler#undo.
|
|
*
|
|
* This will raise a "StartingUndo" ChangedEvent of type ChangedEvent.Transaction,
|
|
* perform the Transaction#undo on the #transactionToUndo, and then
|
|
* raise a "FinishedUndo" ChangedEvent of type ChangedEvent.Transaction.
|
|
* The two ChangedEvents are to let model listeners know that an undo is about to take place
|
|
* and that it just finished.
|
|
* #isUndoingRedoing will temporarily be set to true during this operation.
|
|
*/
|
|
undo(): void;
|
|
/**
|
|
* This predicate returns true if you can call #redo.
|
|
* This will return false if #isEnabled is false (as it is by default),
|
|
* if any transaction is ongoing, or
|
|
* if there is no #transactionToRedo that can be redone.
|
|
* @return {boolean} true if ready for #redo to be called.
|
|
*/
|
|
canRedo(): boolean;
|
|
/**
|
|
* After an #undo, re-perform the changes in #transactionToRedo.
|
|
* #canRedo must be true for this method to have any effect.
|
|
*
|
|
* This is called by CommandHandler#redo.
|
|
*
|
|
* This will raise a "StartingRedo" ChangedEvent of type ChangedEvent.Transaction,
|
|
* perform the Transaction#redo on the #transactionToRedo, and then
|
|
* raise a "FinishedRedo" ChangedEvent of type ChangedEvent.Transaction.
|
|
* The two ChangedEvents are to let model listeners know that a redo is about to take place
|
|
* and that it just finished.
|
|
* #isUndoingRedoing will temporarily be set to true during this operation.
|
|
*/
|
|
redo(): void;
|
|
/**
|
|
* Maybe record a ChangedEvent in the #currentTransaction.
|
|
* This calls #skipsEvent to see if this should ignore the change.
|
|
* If #skipsEvent returns false, this creates a copy of the ChangedEvent
|
|
* and adds it to the #currentTransaction.
|
|
* If there is no #currentTransaction, this first creates and remembers it.
|
|
*
|
|
* This method always ignores all changes while performing
|
|
* an #undo or #redo.
|
|
* This method is also a no-op if #isEnabled is false.
|
|
* @param {ChangedEvent} e a ChangedEvent.
|
|
*/
|
|
handleChanged(e: ChangedEvent): void;
|
|
/**
|
|
* This predicate is called by #handleChanged to decide if a ChangedEvent
|
|
* is not interesting enough to be remembered.
|
|
*
|
|
* Transactional events (of change type ChangedEvent.Transaction) are always skipped.
|
|
* Changed events for GraphObjects that are in Layer#isTemporary layers are also skipped.
|
|
*
|
|
* Sometimes changed events do not even get to #handleChanged because
|
|
* Model#skipsUndoManager or Diagram#skipsUndoManager is true.
|
|
* @expose
|
|
* @param {ChangedEvent} e the ChangedEvent received by #handleChanged.
|
|
* @return {boolean} true to not record the change.
|
|
*/
|
|
skipsEvent(e: ChangedEvent): boolean;
|
|
/**
|
|
* This read-only property returns an iterator for all of the Models that this UndoManager is handling.
|
|
* @see #addModel
|
|
* @see #removeModel
|
|
*/
|
|
readonly models: Iterator<Model>;
|
|
/**
|
|
* Gets or sets whether this UndoManager records any changes.
|
|
* The default value is false -- you need to set this to true if
|
|
* you want the user to be able to undo or redo.
|
|
*
|
|
* You can temporarily turn off recording by setting Diagram#skipsUndoManager
|
|
* and Model#skipsUndoManager to true.
|
|
*/
|
|
isEnabled: boolean;
|
|
/**
|
|
* This read-only property returns the Transaction in the #history to be undone next.
|
|
* The value may be null if the UndoManager is not ready to perform an undo.
|
|
* @see #transactionToRedo
|
|
*/
|
|
readonly transactionToUndo: Transaction | null;
|
|
/**
|
|
* This read-only property returns the Transaction in the #history to be redone next.
|
|
* The value may be null if the UndoManager is not ready to perform a redo.
|
|
* @see #transactionToUndo
|
|
*/
|
|
readonly transactionToRedo: Transaction | null;
|
|
/**
|
|
* This read-only property is true during a call to #undo or #redo.
|
|
*/
|
|
readonly isUndoingRedoing: boolean;
|
|
/**
|
|
* This read-only property returns the whole history, a list of all of the Transactions,
|
|
* each representing a transaction with some number of ChangedEvents.
|
|
*
|
|
* You should not modify this List.
|
|
*/
|
|
readonly history: List<Transaction>;
|
|
/**
|
|
* Gets or sets the maximum number of transactions that this undo manager will remember.
|
|
* When a transaction is committed and the number exceeds this value,
|
|
* the UndoManager will discard the oldest transaction(s) in order to meet this limit.
|
|
* The initial value is 999.
|
|
* Any new value must be an integer.
|
|
* A negative value is treated as if there were no limit.
|
|
* A zero value will not remember any Transactions in the #history,
|
|
* but will allow commits and rollbacks to occur normally,
|
|
* including raising "Transaction" type ChangedEvents.
|
|
*
|
|
* This property is useful in helping limit the memory consumption of typical applications.
|
|
* But this does not limit the number of ChangedEvents that are recorded,
|
|
* because there may be an unlimited number of those within each Transaction.
|
|
* Decreasing this value will not necessarily remove any existing Transactions
|
|
* if there currently exist more in #history than the new value permits.
|
|
*/
|
|
maxHistoryLength: number;
|
|
/**
|
|
* This read-only property returns the index into #history for the current undoable Transaction.
|
|
* The value is -1 if there is no undoable Transaction to be undone.
|
|
*/
|
|
readonly historyIndex: number;
|
|
/**
|
|
* This read-only property returns the current Transaction for recording additional model change events.
|
|
* This is initialized and augmented by #handleChanged
|
|
* before it is added to #history by a top-level call
|
|
* to #commitTransaction.
|
|
* The value will be null between transactions.
|
|
*/
|
|
readonly currentTransaction: Transaction | null;
|
|
/**
|
|
* This read-only property returns the current transaction level.
|
|
* The value is zero when there is no ongoing transaction.
|
|
* The initial value is zero.
|
|
* #startTransaction will increment this value;
|
|
* #commitTransaction or #rollbackTransaction will decrement it.
|
|
* When this value is greater than zero, #canUndo
|
|
* and #canRedo will be false, because
|
|
* additional logically related model change events may occur.
|
|
*/
|
|
readonly transactionLevel: number;
|
|
/**
|
|
* This read-only property is true after the first call to #startTransaction
|
|
* and before a corresponding call to #commitTransaction or #rollbackTransaction.
|
|
*
|
|
* During a transaction #canUndo and #canRedo will be false.
|
|
* #currentTransaction may be non-null if any ChangedEvents were recorded.
|
|
*/
|
|
readonly isInTransaction: boolean;
|
|
/**
|
|
* This read-only property returns a stack of ongoing transaction names.
|
|
* The outermost transaction name will be the first item in the list.
|
|
* The last one will be the name of the most recent (nested) call
|
|
* to #startTransaction.
|
|
*
|
|
* You should not modify this List.
|
|
*/
|
|
readonly nestedTransactionNames: List<string>;
|
|
/**
|
|
* Undocumented.
|
|
*/
|
|
isPendingClear: boolean;
|
|
/**
|
|
* Undocumented.
|
|
*/
|
|
isPendingUnmodified: boolean;
|
|
/**
|
|
* Undocumented.
|
|
* Gets or sets whether the transaction should be considered nested, even if transactionLevel is zero
|
|
*/
|
|
isInternalTransaction: boolean;
|
|
/**
|
|
* Undocumented.
|
|
*/
|
|
readonly isJustDiscarded: boolean;
|
|
}
|
|
/**
|
|
* Tools handle mouse, keyboard, and touch events.
|
|
* The currently running tool, Diagram#currentTool, receives all input events from the Diagram
|
|
* via canonicalized InputEvents.
|
|
* <p class="boxrun">
|
|
* For more discussion, see <a href="../../intro/tools.html">Introduction to Tools</a>.
|
|
* See samples that make use of tools in the <a href="../../samples/index.html#tools">samples index</a>.
|
|
*
|
|
* Most tools are "mode-less" tools that are managed by the ToolManager,
|
|
* which chooses the current tool based on the kind and position of the mouse event and the parts in the diagram.
|
|
* The ToolManager has properties holding instances of most of the pre-defined Tool classes.
|
|
* These classes include:
|
|
* - In the ToolManager#mouseDownTools List:
|
|
* - ActionTool
|
|
* - RelinkingTool
|
|
* - LinkReshapingTool
|
|
* - RotatingTool
|
|
* - ResizingTool
|
|
* - In the ToolManager#mouseMoveTools List:
|
|
* - LinkingTool
|
|
* - DraggingTool
|
|
* - DragSelectingTool
|
|
* - PanningTool
|
|
* - In the ToolManager#mouseUpTools List:
|
|
* - ContextMenuTool
|
|
* - TextEditingTool
|
|
* - ClickCreatingTool
|
|
* - ClickSelectingTool
|
|
*
|
|
* The ToolManager chooses a tool to run as the diagram's current tool by finding in its lists of tools the first tool
|
|
* whose #canStart method returns true. The ToolManager then sets Diagram#currentTool to be that tool.
|
|
*
|
|
* A tool is in the "running" state when it is the value of Diagram#currentTool.
|
|
* The Diagram#currentTool property setter will call #doStop on the old tool
|
|
* and then call #doStart on the new tool.
|
|
*
|
|
* A tool can then go into the "active" state once it decides it can actually do something.
|
|
* This happens with a call to #doActivate, normally called by the ToolManager.
|
|
* Later it is deactivated (#doDeactivate) and then stopped.
|
|
* #isActive should be true when the tool is "active".
|
|
* Often tools should ignore certain common events, such as calls to #doMouseMove,
|
|
* unless the tool #isActive.
|
|
*
|
|
* You can prevent a "mode-less" tool (i.e. one managed by the ToolManager)
|
|
* from being started by the ToolManager by setting #isEnabled to false.
|
|
*
|
|
* You can also go into a particular "mode" by setting Diagram#currentTool explicitly,
|
|
* thereby circumventing the normal operation of the ToolManager.
|
|
* This ignores the #isEnabled property and does not call the #canStart predicate.
|
|
* The behavior will depend on the tool -- not all of the predefined tools support operating as a "modal" tool.
|
|
*
|
|
* Tools cannot be shared amongst multiple Diagrams.
|
|
*
|
|
* If you define a Tool subclass, you may override any of the methods whose names start with "do"
|
|
* and any other methods that are documented to be overridable, such as #canStart.
|
|
* However you must seriously consider calling the base method in order to gets its default behavior.
|
|
* There may be situations where not calling the base method may cause subtle bugs.
|
|
* But that depends on the method and the tool.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call the base method.
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export abstract class Tool {
|
|
/**
|
|
* Don't construct this directly -- this is an abstract class.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This read-only property returns the Diagram that owns this tool and
|
|
* for which this tool is handling input events.
|
|
*/
|
|
diagram: Diagram;
|
|
/**
|
|
* The diagram asks each tool to update any adornments the tool might
|
|
* use for a given part.
|
|
* If the tool uses its own tool handles,
|
|
* this should display them or hide them as appropriate.
|
|
* Typically this should only show them if the part is selected.
|
|
*
|
|
* By default this method does nothing.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Part} part
|
|
*/
|
|
updateAdornments(part: Part): void;
|
|
/**
|
|
* This predicate is used by the ToolManager to decide if this tool can be started mode-lessly
|
|
* by mouse and touch events.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* By default this method returns #isEnabled.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean} true if #isEnabled is true and
|
|
* if the Diagram#toolManager can make this tool the Diagram#currentTool and
|
|
* then call the #doStart method.
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* The Diagram calls this method when this tool becomes the current tool; you should not call this method.
|
|
* Tool implementations should perform their per-use initialization here, such
|
|
* as setting up internal data structures, or capturing the mouse.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* You should not call this method -- only the Diagram#currentTool property setter should call this method.
|
|
*
|
|
* By default this method does nothing.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* If you override this method, it is commonplace to also override #doStop to clean up whatever you set up in this method.
|
|
* @expose
|
|
*/
|
|
doStart(): void;
|
|
/**
|
|
* The Diagram calls this method after setting Diagram#currentTool,
|
|
* to make the new tool active.
|
|
* This should set #isActive to true.
|
|
* Overrides of this method might call #startTransaction,
|
|
* if this tool's activity involves modification of the model.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* You should call this method only after setting Diagram#currentTool to the Tool that you want to activate.
|
|
*
|
|
* By default this only sets #isActive to true.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* If you override this method, it is commonplace to also override #doDeactivate to clean up whatever you set up in this method.
|
|
* @expose
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* The Diagram calls this method on the old tool when
|
|
* Diagram#currentTool is set to a new tool.
|
|
* This needs to set #isActive to false.
|
|
* Overrides of this method might call #stopTransaction,
|
|
* if this tool's activity involves modification of the model.
|
|
*
|
|
* You should have no reason to call this method, because it is automatically called by the
|
|
* Diagram#currentTool property setter on the old tool.
|
|
*
|
|
* By default this only sets #isActive to false.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* It is commonplace to override this method in order to clean up whatever you have set up in an override of #doActivate.
|
|
* @expose
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* The Diagram calls this method when this tool stops being the current tool; you should not call this method.
|
|
* Tool implementations should perform their per-use cleanup here,
|
|
* such as releasing mouse capture.
|
|
*
|
|
* You should not call this method -- only the Diagram#currentTool property setter should call this method.
|
|
* If you want to stop a tool unexpectedly, you should call #doCancel.
|
|
* If your implementation of a tool wants to stop itself, you should call #stopTool.
|
|
*
|
|
* By default this method does nothing.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* It is commonplace to override this method in order to clean up whatever you have set up in an override of #doStart.
|
|
* @expose
|
|
*/
|
|
doStop(): void;
|
|
/**
|
|
* The diagram will call this method when the user wishes to cancel the
|
|
* current tool's operation.
|
|
* Typically this is called when the user hits the ESCAPE key.
|
|
* This should restore the original state of what was modified by this tool, and then it should call #stopTool.
|
|
* This method is not responsible for cleaning up any side-effects that should be performed
|
|
* by #doDeactivate and/or #doStop, which will always be called whether the tool stops normally or abnormally.
|
|
*
|
|
* By default this method just sets #transactionResult to null and calls #stopTool.
|
|
* You will want to override this method even in tools that call #startTransaction and #stopTransaction,
|
|
* because the UndoManager might not be enabled.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* If the Diagram#currentTool is this tool,
|
|
* stop this tool and start the Diagram#defaultTool
|
|
* by making it be the new current tool.
|
|
* The implementation of various tool methods can call this method to stop the current tool.
|
|
* This will call #doStop -- you should not call that method directly.
|
|
*
|
|
* If you want to stop the current tool and have it restore the original state, call #doCancel.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
stopTool(): void;
|
|
/**
|
|
* The diagram will call this method upon a mouse down event.
|
|
* This is normally overridden for mouse-down tools;
|
|
* it is not called for mouse-move or mouse-up tools.
|
|
* However it may also be called when the tool is run in a modal fashion,
|
|
* when code explicitly sets the diagram's Diagram#currentTool.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* By default this method checks #isActive; if that is false it calls #canStart.
|
|
* If that in turn is true, this calls #doActivate.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseDown(): void;
|
|
/**
|
|
* The diagram will call this method upon a mouse move event.
|
|
* This is normally overridden for mouse-move tools;
|
|
* it is not called for mouse-up tools.
|
|
* However it may also be called when the tool is run in a modal fashion,
|
|
* when code explicitly sets the diagram's Diagram#currentTool.
|
|
* An override of this method usually does nothing when #isActive is false.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* By default this method does nothing.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* The diagram will call this method upon a mouse up event.
|
|
* This is normally overridden for mouse-up tools.
|
|
* An override of this method usually does nothing when #isActive is false,
|
|
* except for calling #stopTool.
|
|
* Tools normally stop upon a mouse up, by calling #stopTool.
|
|
* If you want to handle multiple mouse down-up gestures in one tool activation,
|
|
* you will need to override this method to only stop the tool when you want.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* By default this method just calls #stopTool.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* The diagram will call this method as the mouse wheel is rotated.
|
|
* Implementations of this method can look at Diagram#lastInput to get the mouse
|
|
* event and input state.
|
|
*
|
|
* By default this method does nothing.
|
|
* (But the ToolManager#doMouseWheel override will call Tool#standardMouseWheel.)
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseWheel(): void;
|
|
/**
|
|
* Called by ToolManager#doMouseDown and ToolManager#doMouseMove,
|
|
* this method determines whether or not to allow pinch zooming from a multi-touch event.
|
|
* By default this predicate just returns true.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* @see #standardPinchZoomStart
|
|
* @see #standardPinchZoomMove
|
|
* @since 1.5
|
|
*/
|
|
canStartMultiTouch(): boolean;
|
|
/**
|
|
* Initiates pinch-zooming on multi-touch devices.
|
|
*
|
|
* This is called by ToolManager#doMouseDown if the Diagram#lastInput has InputEvent#isMultiTouch
|
|
* set to true and #canStartMultiTouch returns true.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canStartMultiTouch
|
|
* @see #standardPinchZoomMove
|
|
* @since 1.5
|
|
*/
|
|
standardPinchZoomStart(): void;
|
|
/**
|
|
* Continues pinch-zooming (started by #standardPinchZoomStart on multi-touch devices.
|
|
*
|
|
* This is called by ToolManager#doMouseMove if the Diagram#lastInput has InputEvent#isMultiTouch
|
|
* set to true and #canStartMultiTouch returns true.
|
|
* By default this calls #doCancel in order to cancel the regular tool behavior caused by the multitouch events.
|
|
* This then calculates the appropriate zoom level and calls CommandHandler#canResetZoom to decide
|
|
* whether to call CommandHandler#resetZoom to actually set Diagram#scale.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canStartMultiTouch
|
|
* @see #standardPinchZoomStart
|
|
* @since 1.5
|
|
*/
|
|
standardPinchZoomMove(): void;
|
|
/**
|
|
* The diagram will call this method upon a key down event.
|
|
* By default this just calls #doCancel if the key is the ESCAPE key.
|
|
* Implementations of this method can look at Diagram#lastInput to get the key.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doKeyDown(): void;
|
|
/**
|
|
* The diagram will call this method upon a key up event.
|
|
* Implementations of this method can look at Diagram#lastInput to get the key.
|
|
*
|
|
* By default this method does nothing.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doKeyUp(): void;
|
|
/**
|
|
* Call Diagram#startTransaction with the given transaction name.
|
|
* This always sets #transactionResult to null.
|
|
*
|
|
* This is normally called in an override of #doActivate, if the tool modifies the model,
|
|
* along with a call to #stopTransaction in an override of #doDeactivate.
|
|
* Alternatively, you can surround a block of code that sets the #transactionResult
|
|
* with calls to startTransaction and stopTransaction.
|
|
* @param {string=} tname a string describing the transaction.
|
|
* @return {boolean} the value of the call to Diagram#startTransaction.
|
|
*/
|
|
startTransaction(tname?: string): boolean;
|
|
/**
|
|
* If #transactionResult is null, call Diagram#rollbackTransaction,
|
|
* otherwise call Diagram#commitTransaction.
|
|
*
|
|
* This is normally called in an override of #doDeactivate,
|
|
* if #startTransaction was called in #doActivate.
|
|
* Alternatively, you can surround a block of code that sets the #transactionResult
|
|
* with calls to startTransaction and stopTransaction.
|
|
* @return {boolean} the result of the call to rollback or commit the transaction.
|
|
*/
|
|
stopTransaction(): boolean;
|
|
/**
|
|
* Implement the standard behavior for selecting parts with the mouse,
|
|
* depending on the control and shift modifier keys.
|
|
*
|
|
* Control-clicking on a part will select it if it wasn't already,
|
|
* and will deselect if it had been selected.
|
|
* Shift-clicking on a part will add it to the selection (if it wasn't already).
|
|
* Otherwise, clicking on a part will select it (if it wasn't already).
|
|
*
|
|
* Note that there are restrictions on selection.
|
|
* For example, a part cannot be selected in this manner if Part#selectable is false,
|
|
* or if Diagram#maxSelectionCount would be exceeded.
|
|
*
|
|
* A left click in the background of the diagram with no modifier keys clears the selection.
|
|
*
|
|
* This method does not implement any click event behavior -- that is implemented by #standardMouseClick.
|
|
*
|
|
* The ClickSelectingTool calls this method in its override of #doMouseUp in order to change the selection.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
standardMouseSelect(): void;
|
|
/**
|
|
* Implement the standard behavior for mouse clicks,
|
|
* searching for and calling click handler functions on GraphObjects
|
|
* or on Diagram,
|
|
* and raising the corresponding DiagramEvent.
|
|
*
|
|
* A click on a GraphObject of the diagram will raise one of the following DiagramEvents:
|
|
* "ObjectSingleClicked", "ObjectDoubleClicked", or "ObjectContextClicked".
|
|
* This will also look at the corresponding click property:
|
|
* GraphObject#click, GraphObject#doubleClick, or GraphObject#contextClick.
|
|
* If the value is a function, this will call it, passing the current InputEvent
|
|
* and the GraphObject.
|
|
* If the value is null, it tries looking at the parent GraphObject#panel,
|
|
* and so on, walking up the visual tree until it finds the appropriate function to call.
|
|
* After calling the click function, if the value of InputEvent#handled is false,
|
|
* this method will continue walking up the visual tree looking for more click functions
|
|
* to call.
|
|
* Once it has looked at the top-level object (a Part)
|
|
* for a click function, this method stops.
|
|
*
|
|
* A click in the background of the diagram will raise one of the following DiagramEvents:
|
|
* "BackgroundSingleClicked", "BackgroundDoubleClicked", or "BackgroundContextClicked".
|
|
* This will also look at the corresponding click property:
|
|
* Diagram#click, Diagram#doubleClick, or Diagram#contextClick.
|
|
* If the value is a function, this will call it, passing the current InputEvent.
|
|
*
|
|
* This method is not responsible for selecting or deselecting any parts.
|
|
* Call #standardMouseSelect for that functionality.
|
|
*
|
|
* Note that this calls GraphObject#isEnabledObject on the target object;
|
|
* if it returns false, no click action will occur.
|
|
*
|
|
* The ClickSelectingTool calls this method in its override of #doMouseUp in order to raise "click" events.
|
|
* Note that by default GraphObjects in Layers that are Layer#isTemporary will not be "clicked".
|
|
* To change that behavior it is easiest to set GraphObject#isActionable to true on those objects for which you wish to handle "click" events.
|
|
* Then the ActionTool's #doMouseUp override will raise the standard "click" events.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {function(GraphObject):GraphObject | null=} navig An optional custom navigation
|
|
* function to find target objects.
|
|
* @param {function(GraphObject):boolean | null=} pred An optional custom predicate
|
|
* function to find target objects. No value means that only objects in layers holding permanent objects.
|
|
* @return {boolean} true if InputEvent#handled had been set to true on the Diagram#lastInput.
|
|
*/
|
|
standardMouseClick<T extends GraphObject>(navig?: (a: GraphObject) => (T | null), pred?: (a: T) => boolean): boolean;
|
|
/**
|
|
* Implement the standard behavior for mouse enter, over, and leave events,
|
|
* where the mouse is moving but no button is pressed.
|
|
* This should be called by mouse move event handlers when wanting to
|
|
* detect and invoke mouse enter/over/leave event handlers.
|
|
*
|
|
* The GraphObject#mouseEnter property provides a function to call
|
|
* when the mouse first enters an object or any of its contained objects
|
|
* (if the object is actually a Panel).
|
|
*
|
|
* The GraphObject#mouseLeave property provides a function to call
|
|
* when the mouse leaves an object and all of its contained objects
|
|
* (if the object is actually a Panel).
|
|
*
|
|
* The GraphObject#mouseOver property and Diagram#mouseOver
|
|
* properties provide functions to call when the mouse moves but stays
|
|
* within the same GraphObject or when the mouse moves in the
|
|
* background of the Diagram.
|
|
*
|
|
* This method is also responsible for updating the Diagram#currentCursor
|
|
* according to the value of GraphObject#cursor and Diagram#defaultCursor.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
standardMouseOver(): void;
|
|
/**
|
|
* Implement the standard behavior for mouse wheel events.
|
|
* ToolManager#doMouseWheel calls this method.
|
|
*
|
|
* Turning the mouse wheel if Diagram#allowVerticalScroll is true
|
|
* causes the diagram to scroll up or down.
|
|
* If InputEvent#shift and Diagram#allowHorizontalScroll are true,
|
|
* the diagram scrolls left or right.
|
|
*
|
|
* If InputEvent#control and Diagram#allowZoom are true,
|
|
* turning the mouse wheel changes the diagram's scale,
|
|
* zooming in or out while trying to keep the point in the model
|
|
* at the same point as the mouse.
|
|
*
|
|
* The value of ToolManager#mouseWheelBehavior affects what operations might occur
|
|
* upon mouse wheel events.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
standardMouseWheel(): void;
|
|
/**
|
|
* This is called to start a new timer to call #doWaitAfter after a given delay.
|
|
* It first cancels any previously running "WaitAfter" timer, by calling #cancelWaitAfter.
|
|
*
|
|
* This is normally used to implement mouse hover and mouse hold events.
|
|
* If the mouse has moved, it must not have moved beyond the distance as determined by
|
|
* Tool#isBeyondDragSize for it be considered "stationary".
|
|
* So the regular ToolManager#doMouseMove implementation only calls
|
|
* this method when the mouse has moved beyond the drag size.
|
|
*
|
|
* This method is rarely overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number} delay The delay, in milliseconds.
|
|
* @param {InputEvent=} event An optional event that caused this timer. Defaults to Diagram#lastInput.
|
|
* This gets passed on to #doWaitAfter.
|
|
*/
|
|
standardWaitAfter(delay: number, event?: InputEvent): void;
|
|
/**
|
|
* This is called to cancel any running "WaitAfter" timer.
|
|
*
|
|
* This is called when a tool is stopped.
|
|
*
|
|
* This method is rarely overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
cancelWaitAfter(): void;
|
|
/**
|
|
* This is called a certain delay after a call to #standardWaitAfter if there
|
|
* has not been any call to #cancelWaitAfter.
|
|
* The ToolManager overrides this method in order to implement support for mouse-hover behavior and tooltips.
|
|
*
|
|
* By default this does nothing.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {InputEvent} event The event that caused #standardWaitAfter.
|
|
*/
|
|
doWaitAfter(event: InputEvent): void;
|
|
/**
|
|
* This convenience function finds the front-most GraphObject
|
|
* that is at a given point and that is an element of an Adornment
|
|
* that is of a given category.
|
|
* The tool handle must be an immediate element of the Adornment,
|
|
* not a GraphObject that is nested within Panels within the Adornment.
|
|
*
|
|
* This method is very infrequently overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} p a Point in document coordinates.
|
|
* @param {string} category the required Part#category of the Adornment.
|
|
* @return {GraphObject}
|
|
*/
|
|
findToolHandleAt(p: Point, category: string): GraphObject | null;
|
|
/**
|
|
* Return true when the last mouse point is far enough away from the first mouse down point
|
|
* to constitute a drag operation instead of just a potential click.
|
|
*
|
|
* This uses the value of ToolManager#dragSize.
|
|
* On touch devices the value is automatically increased to accommodate the unavoidable movement of fingers.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point=} first Point in view coordinates, defaults to Diagram#firstInput's InputEvent#viewPoint.
|
|
* @param {Point=} last Point in view coordinates, defaults to Diagram#lastInput's InputEvent#viewPoint.
|
|
* @return {boolean}
|
|
*/
|
|
isBeyondDragSize(first?: Point, last?: Point): boolean;
|
|
/**
|
|
* Gets or sets the name of this tool.
|
|
* The default name is an empty string,
|
|
* but the constructor for each instance of a subclass of Tool will initialize it appropriately.
|
|
* For example, the name of the DragSelectingTool is "DragSelecting".
|
|
*
|
|
* This name is sometimes used by tools that use Adornments as the Part#category for their Adornments.
|
|
* It is also sometimes used by tools that conduct transactions as the transaction name.
|
|
*/
|
|
name: string;
|
|
/**
|
|
* Gets or sets whether this tool can be started by a mouse event.
|
|
*
|
|
* Set this to false to prevent #canStart from returning true.
|
|
* Setting this property to false should prevent this tool from being used in a mode-less fashion
|
|
* by the ToolManager with a mouse down/move/up event.
|
|
* However, even when this property is false, this tool can still be used in a modal fashion:
|
|
* it can still be started by explicitly setting the
|
|
* Diagram#currentTool property to this tool.
|
|
*
|
|
* The default value is true.
|
|
*/
|
|
isEnabled: boolean;
|
|
/**
|
|
* Gets or sets whether this tool is started and is actively doing something.
|
|
*
|
|
* You can set this to true after your tool is started (i.e. when it is the
|
|
* Diagram#currentTool and #doStart
|
|
* had been called), but when it is not yet in a state
|
|
* that it is actually "doing" something, because it is waiting for the right
|
|
* circumstances. This is typically only important when the tool is used in
|
|
* a modal fashion.
|
|
*
|
|
* The default value is false.
|
|
* This is normally set by #doActivate and #doDeactivate.
|
|
*/
|
|
isActive: boolean;
|
|
/**
|
|
* Gets or sets the name of the transaction to be committed by #stopTransaction
|
|
*
|
|
* If null, the transaction will be rolled back.
|
|
*
|
|
* If this is non-null at the time of a call to #stopTransaction,
|
|
* it calls Diagram#commitTransaction with this transaction name;
|
|
* if this is null at that time, it calls Diagram#rollbackTransaction.
|
|
*
|
|
* The default value is null; #startTransaction will also set this to null.
|
|
* Because a value of null when #stopTransaction is called will rollback the transaction,
|
|
* it is important that your code sets this property to a non-null value when it thinks it has succeeded.
|
|
*
|
|
* This property exists so that no matter what execution path occurs to end the usage of a tool,
|
|
* any ongoing transaction can be properly committed or rolled-back.
|
|
* Many tools call #startTransaction and #stopTransaction; thus they set this property
|
|
* for their transaction to be committed.
|
|
* #doCancel also sets this property to null.
|
|
*/
|
|
transactionResult: string | null;
|
|
}
|
|
/**
|
|
* This special Tool is responsible for managing all of the Diagram's
|
|
* mode-less tools, which you can access as the Diagram#toolManager.
|
|
*
|
|
* Mode-less tools are tools that are present in one of the following lists:
|
|
* #mouseDownTools, #mouseMoveTools, or #mouseUpTools.
|
|
* This ToolManager tool is normally the Diagram#defaultTool,
|
|
* so it is also usually the Diagram#currentTool when the user is doing "nothing".
|
|
*
|
|
* When this tool is running as the current tool, it handles mouse-down,
|
|
* mouse-move, and mouse-up events and the corresponding touch events.
|
|
* For each event it iterates over each of the tools in the corresponding list,
|
|
* calling the tool's Tool#canStart predicate.
|
|
* If that predicate returns true, it starts that tool by making it the
|
|
* diagram's current tool.
|
|
* It then activates the tool and passes on the event to the tool by calling
|
|
* the corresponding method (either Tool#doMouseDown,
|
|
* Tool#doMouseMove, or Tool#doMouseUp).
|
|
*
|
|
* Because this tool is typically the one running as the diagram's current tool
|
|
* when the user isn't "doing" anything, this tool can also handle other events,
|
|
* such as mouse wheel events and keyboard commands.
|
|
*
|
|
* Keyboard events are just passed on to the Diagram#commandHandler's
|
|
* CommandHandler#doKeyDown or CommandHandler#doKeyUp method.
|
|
*
|
|
* This tool also is responsible for showing tooltips.
|
|
* Tooltip Adornments may be declared as any GraphObject#toolTip,
|
|
* or as the Diagram#toolTip if the mouse or finger remains motionless in the background of the diagram.
|
|
* You can set #toolTipDuration to control how long the tooltip remains visible after being motionless.
|
|
*
|
|
* This tool does not utilize any tool handles.
|
|
* This tool does not conduct any transactions.
|
|
* But of course some of the tools that the ToolManager starts can show tool handles and/or
|
|
* conduct their own transactions.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class ToolManager extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the Diagram#toolManager, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "ToolManager".
|
|
*
|
|
* The constructor produces a ToolManager that manages no tools.
|
|
* Call #initializeStandardTools to create various tools,
|
|
* initialize the tool properties such as #draggingTool,
|
|
* and initialize the three mouse tool lists with those newly created tools.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This default value for #mouseWheelBehavior indicates that mouse wheel events scroll the diagram.
|
|
* @constant
|
|
*/
|
|
static WheelScroll: EnumValue;
|
|
/**
|
|
* This value for #mouseWheelBehavior indicates that the mouse wheel events change the scale of the diagram.
|
|
* @constant
|
|
*/
|
|
static WheelZoom: EnumValue;
|
|
/**
|
|
* This value for #mouseWheelBehavior indicates that the mouse wheel events are ignored,
|
|
* although scrolling or zooming by other means may still be allowed.
|
|
* @constant
|
|
* @since 1.2
|
|
*/
|
|
static WheelNone: EnumValue;
|
|
/**
|
|
* This value for #gestureBehavior indicates that the pointer/touch pinch gestures
|
|
* on the canvas intend to zoom the Diagram.
|
|
* @constant
|
|
* @since 1.5
|
|
*/
|
|
static GestureZoom: EnumValue;
|
|
/**
|
|
* This value for #gestureBehavior indicates that the pointer/touch pinch gestures
|
|
* on the canvas intend to have no effect on the Diagram, but also no effect on the page.
|
|
* @constant
|
|
* @since 1.5
|
|
*/
|
|
static GestureCancel: EnumValue;
|
|
/**
|
|
* This value for #gestureBehavior indicates that the pointer/touch pinch gestures
|
|
* on the canvas intend to have no effect on the Diagram, but will not be prevented,
|
|
* and may bubble up the page to have other effects (such as zooming the page).
|
|
* @constant
|
|
* @since 1.5
|
|
*/
|
|
static GestureNone: EnumValue;
|
|
/**
|
|
* Gets or sets the ToolManager's mouse wheel behavior. Allowed values are ToolManager.WheelScroll and
|
|
* ToolManager.WheelZoom and ToolManager.WheelNone.
|
|
*
|
|
* The default value is ToolManager.WheelScroll.
|
|
*/
|
|
mouseWheelBehavior: EnumValue;
|
|
/**
|
|
* Gets or sets the ToolManager's default gestureBehavior behavior. Allowed values are ToolManager.GestureZoom and
|
|
* ToolManager.GestureCancel and ToolManager.GestureNone.
|
|
*
|
|
* The default value is ToolManager.GestureZoom.
|
|
* @since 1.5
|
|
*/
|
|
gestureBehavior: EnumValue;
|
|
/**
|
|
* Initialize the three mouse tool lists with instances of the standard tools.
|
|
* This adds new instances of tools to the following three mouse tool lists:
|
|
* #mouseDownTools, #mouseMoveTools, or #mouseUpTools.
|
|
* This also sets the various tool properties of this ToolManager
|
|
* to those newly created tools.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
initializeStandardTools(): void;
|
|
/**
|
|
* Iterate over the #mouseDownTools list and start the first tool
|
|
* for which its Tool#canStart predicate returns true.
|
|
*
|
|
* Starting a tool replaces the Diagram#currentTool with the new tool.
|
|
* Successfully doing so also activates the new tool by calling Tool#doActivate
|
|
* and passes on the mouse-down event to it by calling Tool#doMouseDown.
|
|
*
|
|
* Not finding any startable tools causes this tool manager to activate,
|
|
* thereby enabling the mouse-move and mouse-up behaviors and starts
|
|
* detection of a mouse-hold event after #holdDelay milliseconds.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseDown(): void;
|
|
/**
|
|
* Iterate over the #mouseMoveTools list and start the first tool
|
|
* for which its Tool#canStart predicate returns true.
|
|
*
|
|
* Starting a tool replaces the Diagram#currentTool with the new tool.
|
|
* Successfully doing so also activates the new tool by calling Tool#doActivate
|
|
* and passes on the mouse-move event to it by calling Tool#doMouseMove.
|
|
*
|
|
* If no tool is found and activated, this:
|
|
* - Calls Tool#standardMouseOver to invoke any mouse-enter, mouse-over, or mouse-leave functions.
|
|
* - if the mouse has moved sufficiently, such that Tool#isBeyondDragSize is true,
|
|
* this also calls Tool#standardWaitAfter for a possible call to
|
|
* #doWaitAfter after #hoverDelay milliseconds.
|
|
* - Sets the Diagram#lastInput to bubble.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Implement the standard behavior for when the mouse has not moved for a period of time.
|
|
* This is due to an expired timer started by calling Tool#standardWaitAfter.
|
|
*
|
|
* This calls #doMouseHover and, if not mouse-down, #doToolTip.
|
|
* Afterwards, if the event that called Tool#standardWaitAfter was a touch event,
|
|
* this simulates a right click, enabling context menu functionality and other actions on touch devices.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {InputEvent} event The event that caused #standardWaitAfter. In this override,
|
|
* if it is a touch event and the Diagram#lastInput event is not handled (InputEvent#handled set to false),
|
|
* then this method will simulate a right click.
|
|
*/
|
|
doWaitAfter(event: InputEvent): void;
|
|
/**
|
|
* Implement the standard behavior for mouse hover and mouse hold events,
|
|
* called by #doWaitAfter when the mouse has not moved for a period of time.
|
|
*
|
|
* If there has been no mouse down, the timer is set for #hoverDelay milliseconds.
|
|
* If it executes, it calls any GraphObject#mouseHover function on the object
|
|
* at the mouse or on any of its containing panels,
|
|
* or it calls any Diagram#mouseHover function for a background mouse-hover event.
|
|
*
|
|
* If there had been a mouse down, the timer is set for #holdDelay milliseconds.
|
|
* If it executes, it calls any GraphObject#mouseHold function on the object
|
|
* at the mouse or on any of its containing panels,
|
|
* or it calls any Diagram#mouseHold function for a background mouse-held-down event.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseHover(): void;
|
|
/**
|
|
* Implement the standard behavior for tooltips,
|
|
* called by #doWaitAfter when the mouse has not moved for a period of time.
|
|
*
|
|
* This looks for a GraphObject at the latest mouse point.
|
|
* If it finds an object, it checks for a GraphObject#toolTip.
|
|
* If it has none, this method searches up the visual tree for a containing
|
|
* Panel that does have a tooltip.
|
|
*
|
|
* If it didn't find any object, this looks for a Diagram#toolTip.
|
|
*
|
|
* If it eventually finds a tooltip, this calls #showToolTip.
|
|
* Otherwise this calls #hideToolTip.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doToolTip(): void;
|
|
/**
|
|
* Show a tooltip Adornment or HTMLInfo.
|
|
* This is called by #doToolTip once that method has found a tooltip to display.
|
|
*
|
|
* This calls #positionToolTip to make it easier to customize how the tooltip
|
|
* is positioned relative to the object with the tooltip.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Adornment|HTMLInfo} tooltip
|
|
* @param {GraphObject} obj The GraphObject getting the tooltip; this is null if the tooltip is being shown for the diagram background.
|
|
*/
|
|
showToolTip(tooltip: Adornment | HTMLInfo, obj: GraphObject): void;
|
|
/**
|
|
* This is called by #showToolTip to position the part within the viewport.
|
|
* It normally goes just below the cursor.
|
|
* But if the mouse is too close to the right edge or the bottom edge of the viewport,
|
|
* it is positioned left and/or above the cursor.
|
|
*
|
|
* This method only operates if the tooltip, an Adornment, does not have a Adornment#placeholder.
|
|
* When there is a Placeholder in the tooltip, that Adornment is automatically positioned
|
|
* so that the Placeholder is positioned at the adorned object, the second argument to this method.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* If you override this method to position the tooltip,
|
|
* the tooltip has already been measured but not arranged,
|
|
* so you can use its GraphObject#measuredBounds width and height
|
|
* but not its GraphObject#actualBounds.
|
|
* @expose
|
|
* @param {Adornment} tooltip
|
|
* @param {GraphObject} obj The GraphObject getting the tooltip,
|
|
* or null if the tooltip is for the diagram background.
|
|
*/
|
|
positionToolTip(tooltip: Adornment, obj: GraphObject): void;
|
|
/**
|
|
* Hide any tooltip.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
hideToolTip(): void;
|
|
/**
|
|
* This read-only property returns the currently showing tooltip, or null if there is none.
|
|
*/
|
|
currentToolTip: Adornment | HTMLInfo | null;
|
|
/**
|
|
* Iterate over the #mouseUpTools list and start the first tool
|
|
* for which its Tool#canStart predicate returns true.
|
|
*
|
|
* Starting a tool replaces the Diagram#currentTool with the new tool.
|
|
* Successfully doing so also activates the new tool by calling Tool#doActivate
|
|
* and passes on the mouse-up event to it by calling Tool#doMouseUp.
|
|
*
|
|
* If no startable tool is found it deactivates this tool manager,
|
|
* to get ready for a mouse-down and ignore mouse-move and mouse-up events.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* The diagram will call this method as the mouse wheel is rotated.
|
|
*
|
|
* By default this just calls Tool#standardMouseWheel.
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doMouseWheel(): void;
|
|
/**
|
|
* This just calls CommandHandler#doKeyDown on the diagram's Diagram#commandHandler.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doKeyDown(): void;
|
|
/**
|
|
* This just calls CommandHandler#doKeyUp on the diagram's Diagram#commandHandler.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doKeyUp(): void;
|
|
/**
|
|
* Find a mouse tool of a given name.
|
|
* This searches the #mouseDownTools, #mouseMoveTools, and #mouseUpTools lists.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {string} name the type of tool, such as "Dragging" or "ClickSelecting".
|
|
* @return {Tool} a Tool whose Tool#name exactly matches the given name,
|
|
* or null if no such tool is found in any of the three lists.
|
|
*/
|
|
findTool(name: string): Tool | null;
|
|
/**
|
|
* Replace a mouse tool of a given name with a new tool, or remove an existing tool (if the *newtool* is null).
|
|
* This searches the #mouseDownTools, #mouseMoveTools,
|
|
* and #mouseUpTools lists.
|
|
* The new tool is inserted into the same list in which the same-named tool is found,
|
|
* at the same position as the old tool.
|
|
* However, if no existing tool with the given name is present, this does **not** add the new tool to any list, since it cannot know where it should be added.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {string} name the type of tool, such as "Dragging" or "ClickSelecting".
|
|
* @param {Tool} newtool If null, any tool that the search finds will just be removed
|
|
* from the list in which it was found.
|
|
* @return {Tool} the old tool that was replaced by the new one; this is null if none was found and the new tool was not added to any mouse tool list
|
|
*/
|
|
replaceTool(name: string, newtool: Tool): Tool;
|
|
/**
|
|
* (Undocumented)
|
|
* @param {string} name
|
|
* @param {Tool} newtool
|
|
* @param {List.<Tool>} list
|
|
*/
|
|
replaceStandardTool(name: string, newtool: Tool, list: List<Tool>): void;
|
|
/**
|
|
* This read-only property returns the list of Tools that might be started upon a mouse or finger press event.
|
|
* When the ToolManager handles a mouse-down or touch-down event in #doMouseDown,
|
|
* it searches this list in order, starting the first tool for which
|
|
* Tool#canStart returns true.
|
|
*
|
|
* This list may be modified, but it must not be modified while any tool
|
|
* is handling events.
|
|
*
|
|
* #initializeStandardTools installs the following tools, in order:
|
|
* - #actionTool, an ActionTool
|
|
* - #relinkingTool, a RelinkingTool
|
|
* - #linkReshapingTool, a LinkReshapingTool
|
|
* - #rotatingTool, a RotatingTool
|
|
* - #resizingTool, a ResizingTool
|
|
*/
|
|
readonly mouseDownTools: List<Tool>;
|
|
/**
|
|
* This read-only property returns the list of Tools that might be started upon a mouse or finger move event.
|
|
* When the ToolManager handles a mouse-move or touch-move event in #doMouseMove,
|
|
* it searches this list in order, starting the first tool for which
|
|
* Tool#canStart returns true.
|
|
*
|
|
* This list may be modified, but it must not be modified while any tool
|
|
* is handling events.
|
|
*
|
|
* #initializeStandardTools installs the following tools, in order:
|
|
* - #linkingTool, a LinkingTool
|
|
* - #draggingTool, a DraggingTool
|
|
* - #dragSelectingTool, a DragSelectingTool
|
|
* - #panningTool, a PanningTool
|
|
*/
|
|
readonly mouseMoveTools: List<Tool>;
|
|
/**
|
|
* This read-only property returns the list of Tools that might be started upon a mouse or finger up event.
|
|
* When the ToolManager handles a mouse-up or touch-up event in #doMouseUp,
|
|
* it searches this list in order, starting the first tool for which
|
|
* Tool#canStart returns true.
|
|
*
|
|
* This list may be modified, but it must not be modified while any tool
|
|
* is handling events.
|
|
*
|
|
* #initializeStandardTools installs the following tools, in order:
|
|
* - #contextMenuTool, a ContextMenuTool
|
|
* - #textEditingTool, a TextEditingTool
|
|
* - #clickCreatingTool, a ClickCreatingTool
|
|
* - #clickSelectingTool, a ClickSelectingTool
|
|
*/
|
|
readonly mouseUpTools: List<Tool>;
|
|
/**
|
|
* Gets or sets the time between when the mouse stops moving and a hover event,
|
|
* in milliseconds. This value affects the delay before GraphObject#toolTips are shown.
|
|
* The default value is 850 milliseconds.
|
|
*/
|
|
hoverDelay: number;
|
|
/**
|
|
* Gets or sets the time between when the mouse stops moving and a hold event,
|
|
* in milliseconds.
|
|
* The default value is 850 milliseconds.
|
|
*/
|
|
holdDelay: number;
|
|
/**
|
|
* Gets or sets the distance in view coordinates within which a mouse down-and-up is considered a click and beyond which a mouse movement is considered a drag.
|
|
* The default value is 2 pixels horizontally and vertically for mouse events, and increases by 6 pixels for touch events.
|
|
* This value is used by Tool#isBeyondDragSize.
|
|
* @since 1.2
|
|
*/
|
|
dragSize: Size;
|
|
/**
|
|
* Gets or sets how long a tool tip is visible.
|
|
* The default value is 5000 milliseconds.
|
|
*
|
|
* This is used by #showToolTip to determine how long to wait before calling #hideToolTip.
|
|
*/
|
|
toolTipDuration: number;
|
|
/**
|
|
* Gets or sets the mode-less ActionTool, normally one of the #mouseDownTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
actionTool: ActionTool;
|
|
/**
|
|
* Gets or sets the mode-less RelinkingTool, normally one of the #mouseDownTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
relinkingTool: RelinkingTool;
|
|
/**
|
|
* Gets or sets the mode-less LinkReshapingTool, normally one of the #mouseDownTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
linkReshapingTool: LinkReshapingTool;
|
|
/**
|
|
* Gets or sets the mode-less ResizingTool, normally one of the #mouseDownTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
resizingTool: ResizingTool;
|
|
/**
|
|
* Gets or sets the mode-less RotatingTool, normally one of the #mouseDownTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
rotatingTool: Tool;
|
|
/**
|
|
* Gets or sets the mode-less LinkingTool, normally one of the #mouseMoveTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
linkingTool: LinkingTool;
|
|
/**
|
|
* Gets or sets the mode-less DraggingTool, normally one of the #mouseMoveTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
draggingTool: DraggingTool;
|
|
/**
|
|
* Gets or sets the mode-less DragSelectingTool, normally one of the #mouseMoveTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
dragSelectingTool: DragSelectingTool;
|
|
/**
|
|
* Gets or sets the mode-less PanningTool, normally one of the #mouseMoveTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
panningTool: PanningTool;
|
|
/**
|
|
* Gets or sets the mode-less ContextMenuTool, normally one of the #mouseUpTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
contextMenuTool: ContextMenuTool;
|
|
/**
|
|
* Gets or sets the mode-less TextEditingTool, normally one of the #mouseUpTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
textEditingTool: TextEditingTool;
|
|
/**
|
|
* Gets or sets the mode-less ClickCreatingTool, normally one of the #mouseUpTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
clickCreatingTool: ClickCreatingTool;
|
|
/**
|
|
* Gets or sets the mode-less ClickSelectingTool, normally one of the #mouseUpTools.
|
|
*
|
|
* You can disable this tool by setting its Tool#isEnabled property to false.
|
|
*/
|
|
clickSelectingTool: ClickSelectingTool;
|
|
}
|
|
/**
|
|
* The DraggingTool is used to move or copy selected parts with the mouse.
|
|
* This sets the Part#location property; you may want to save the location to the model
|
|
* by using a TwoWay Binding on the "location" property in your Parts/Nodes/Groups templates.
|
|
*
|
|
* Dragging the selection moves parts for which Part#canMove is true.
|
|
* If the user holds down the Control key (Option key on Mac), this tool will make a copy of the parts being dragged,
|
|
* for those parts for which Part#canCopy is true.
|
|
*
|
|
* When the drag starts it calls #computeEffectiveCollection to find the actual collection
|
|
* of Parts to be dragged.
|
|
* Normally this collection includes not only the Diagram#selection, but also parts that belong
|
|
* to those selected parts, such as members of groups.
|
|
* If #dragsTree is true, the effective collection also includes all of the nodes and links that
|
|
* constitute the subtree starting from selected nodes.
|
|
* The result of #computeEffectiveCollection is not a Set but a Map
|
|
* which remembers the original Part#location for all of the dragged parts.
|
|
* This map is saved as the value of #draggedParts.
|
|
*
|
|
* During the drag if the user holds down the Control/Option key this tool makes a copy of the #draggedParts
|
|
* and proceeds to drag it around.
|
|
* (It only copies the Diagram#selection, not the whole effective collection,
|
|
* if #copiesEffectiveCollection is false.)
|
|
* The collection of copied parts is held by #copiedParts.
|
|
* It too is a Map remembering the original locations of the parts.
|
|
* #copiedParts will be null when this tool is moving (not copying) at the moment.
|
|
*
|
|
* Each Part's movement is limited by the Diagram#computeMove method.
|
|
* By default it limits the Part#location to be within the bounds given by Part#minLocation and Part#maxLocation.
|
|
* (Those default to minus Infinity to plus Infinity.)
|
|
* As a further convenience, the value of NaN in minLocation and maxLocation cause Diagram#computeMove to use the
|
|
* part's current location.
|
|
* So, for example, an easy way to declare that the user may only drag a node horizontally is to just set:
|
|
* ```js
|
|
* $(go.Node,
|
|
* . . .
|
|
* { minLocation: new go.Point(-Infinity, NaN), maxLocation: new go.Point(Infinity, NaN) },
|
|
* . . .
|
|
* )
|
|
* ```
|
|
*
|
|
* If you set #isGridSnapEnabled to true, dragged or copied parts will be snapped to points on a grid.
|
|
* The snapping occurs continuously during a drag unless you set #isGridSnapRealtime to false.
|
|
* Normally the grid points come from the Diagram#grid, even if that grid is not GraphObject#visible.
|
|
* However you can override those grid's properties for the snapping grid cell size and offset
|
|
* by setting the properties here: #gridSnapCellSize and #gridSnapOrigin.
|
|
* This computes the point to snap to for each dragged part.
|
|
* The resulting point is used as the new Part#location.
|
|
*
|
|
* For the most general control over where a part may be dragged, either set the Part#dragComputation property
|
|
* or override Diagram#computeMove.
|
|
* For the common case of wanting to keep member nodes within the Group that they are members of,
|
|
* you can do something like:
|
|
* ```js
|
|
* // this is a Part.dragComputation function for limiting where a Node may be dragged
|
|
* function stayInGroup(part, pt, gridpt) {
|
|
* // don't constrain top-level nodes
|
|
* var grp = part.containingGroup;
|
|
* if (grp === null) return pt;
|
|
* // try to stay within the background Shape of the Group
|
|
* var back = grp.resizeObject;
|
|
* if (back === null) return pt;
|
|
* // allow dragging a Node out of a Group if the Shift key is down
|
|
* if (part.diagram.lastInput.shift) return pt;
|
|
* var p1 = back.getDocumentPoint(go.Spot.TopLeft);
|
|
* var p2 = back.getDocumentPoint(go.Spot.BottomRight);
|
|
* var b = part.actualBounds;
|
|
* var loc = part.location;
|
|
* // find the padding inside the group's placeholder that is around the member parts
|
|
* var m = grp.placeholder.padding;
|
|
* // now limit the location appropriately
|
|
* var x = Math.max(p1.x + m.left, Math.min(pt.x, p2.x - m.right - b.width - 1)) + (loc.x-b.x);
|
|
* var y = Math.max(p1.y + m.top, Math.min(pt.y, p2.y - m.bottom - b.height - 1)) + (loc.y-b.y);
|
|
* return new go.Point(x, y);
|
|
* }
|
|
* ```
|
|
* Note that this expects there to be a "SHAPE" object within the Group's visual tree that delimits
|
|
* where the part may be dragged within the group.
|
|
* This also expects that Group#computesBoundsIncludingLinks is false.
|
|
* Then in your node template(s), just set:
|
|
* ```js
|
|
* $(go.Node,
|
|
* . . .,
|
|
* { dragComputation: stayInGroup },
|
|
* . . .
|
|
* )
|
|
* ```
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles.
|
|
* If the drag is successful, it raises the "SelectionMoved" or "SelectionCopied" DiagramEvent
|
|
* and produces a "Move" or a "Copy" transaction.
|
|
*
|
|
* If you want to programmatically start a new user's dragging of a particular existing node,
|
|
* you can make sure that node is selected, set the #currentPart property, and then start and activate the tool.
|
|
* ```js
|
|
* var node = ...;
|
|
* myDiagram.select(node); // in this case the only selected node
|
|
* var tool = myDiagram.toolManager.draggingTool;
|
|
* tool.currentPart = node; // the DraggingTool will not call standardMouseSelect
|
|
* myDiagram.currentTool = tool; // starts the DraggingTool
|
|
* tool.doActivate(); // activates the DraggingTool
|
|
* ```
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class DraggingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#draggingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "Dragging".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Gets or sets whether for any internal copying operation is permitted by control-drag-and-drop.
|
|
* This property affects the behavior of #mayCopy,
|
|
* but does not affect whether copied objects may be dropped into this diagram from a different diagram.
|
|
*
|
|
* The default value is true.
|
|
* Setting this property does not raise any events.
|
|
* @since 1.4
|
|
*/
|
|
isCopyEnabled: boolean;
|
|
/**
|
|
* Gets or sets whether for a copying operation the extended selection
|
|
* is copied or only the selected parts.
|
|
* The default value is true.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* The CommandHandler#copiesConnectedLinks property serves a similar role for the CommandHandler#copySelection command,
|
|
* when the user types control-C to copy the currently selected parts.
|
|
*/
|
|
copiesEffectiveCollection: boolean;
|
|
/**
|
|
* Gets or sets the DraggingTool's DraggingOptions instance, which controls several dragging properties.
|
|
*
|
|
* Several DraggingTool properties are just convenience properties:
|
|
* - isGridSnapEnabled
|
|
* - isGridSnapRealtime
|
|
* - gridSnapCellSize
|
|
* - gridSnapCellSpot
|
|
* - gridSnapOrigin
|
|
* - dragsLink
|
|
* - dragsTree
|
|
*
|
|
* Setting any of these properties really sets the corresponding dragOptions property.
|
|
*
|
|
* Setting this property does not raise any events.
|
|
* @since 2.0
|
|
*/
|
|
dragOptions: DraggingOptions;
|
|
/**
|
|
* Gets or sets whether the DraggingTool snaps objects to grid points.
|
|
* Whether the snapping movement of the dragged parts occurs during the drag or only upon a drop
|
|
* is determined by the value of #isGridSnapRealtime.
|
|
*
|
|
* This property does not affect dragging disconnected links,
|
|
* but those links to respect the Part#dragComputation, which can be used to snap them.
|
|
*
|
|
* By default this property is false.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
*/
|
|
isGridSnapEnabled: boolean;
|
|
/**
|
|
* Gets or sets whether link routing takes some short-cuts during dragging.
|
|
* When false Links whose routing is AvoidsNodes are not routed to avoid Nodes, in order to improve dragging performance.
|
|
* The default value is true.
|
|
* @since 1.4
|
|
*/
|
|
isComplexRoutingRealtime: boolean;
|
|
/**
|
|
* Gets or sets whether the DraggingTool snaps objects to grid points during the drag.
|
|
* This property is ignored unless #isGridSnapEnabled is true.
|
|
* By default this property is true; when false parts are only snapped to grid locations upon the drop (i.e. mouse-up).
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
* @since 1.1
|
|
*/
|
|
isGridSnapRealtime: boolean;
|
|
/**
|
|
* Gets or sets the size of the grid cell used when snapping during a drag
|
|
* if the value of #isGridSnapEnabled is true.
|
|
* By default this property is the Size(NaN, NaN), which causes this tool to use the Panel#gridCellSize value of the Diagram#grid.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
*/
|
|
gridSnapCellSize: Size;
|
|
/**
|
|
* Gets or sets the Spot that specifies what point in the grid cell dragged parts snap to,
|
|
* if the value of #isGridSnapEnabled is true.
|
|
* By default this property is Spot.TopLeft:
|
|
* node locations will snap exactly to the grid point.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
*/
|
|
gridSnapCellSpot: Spot;
|
|
/**
|
|
* Gets or sets the snapping grid's origin point, in document coordinates,
|
|
* if the value of #isGridSnapEnabled is true.
|
|
* By default this property is the Point(NaN, NaN),
|
|
* which causes this tool to use the Panel#gridOrigin value from the Diagram#grid.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
*/
|
|
gridSnapOrigin: Point;
|
|
/**
|
|
* Gets or sets whether the user can drag a single Link,
|
|
* disconnecting it from its connected nodes and possibly connecting it
|
|
* to valid ports when the link is dropped.
|
|
* The default value is false.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* In order to avoid too many cases of having both ends of a dragged Link connect to the same node (if allowed),
|
|
* it is commonplace to decrease the LinkingBaseTool#portGravity to a smaller value such as 10 or 20.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
* @since 1.3
|
|
*/
|
|
dragsLink: boolean;
|
|
/**
|
|
* Gets or sets whether moving or copying a node also includes all of the
|
|
* node's tree children and their descendants, along with the links to those additional nodes.
|
|
* The default value is false.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* The CommandHandler#copiesTree property serves a similar role for the CommandHandler#copySelection command,
|
|
* when the user types control-C to copy the currently selected parts.
|
|
*
|
|
* This property is a convenience getter/setter, and sets a value on dragOptions.
|
|
*/
|
|
dragsTree: boolean;
|
|
/** @hidden
|
|
* The cursor to show when a drop is allowed and will result in a copy.
|
|
* This defaults to 'copy'.
|
|
*/
|
|
copyCursor: string;
|
|
/** @hidden
|
|
* The cursor to show when a drop is allowed and will result in a move.
|
|
* This defaults to the empty string, which refers to the Diagram#defaultCursor.
|
|
*/
|
|
moveCursor: string;
|
|
/** @hidden
|
|
* The cursor to show when a drop is not allowed.
|
|
* This defaults to 'no-drop'.
|
|
*/
|
|
nodropCursor: string;
|
|
/**
|
|
* Gets the Part found at the mouse point.
|
|
* This is normally set by a call to #standardMouseSelect.
|
|
*/
|
|
currentPart: Part | null;
|
|
/**
|
|
* Gets the collection of Parts that this tool has copied.
|
|
* The value is a Map mapping Parts to DraggingInfo Objects
|
|
* that have a "point" property remembering the original location of that Part.
|
|
* The value is null when moving instead of copying.
|
|
*
|
|
* #draggedParts provides the map of Parts that are being moved and from which this collection was copied.
|
|
*/
|
|
copiedParts: Map<Part, DraggingInfo> | null;
|
|
/**
|
|
* Gets the collection of Parts being moved.
|
|
* The value is a Map mapping Parts to DraggingInfo Objects
|
|
* that have a "point" property remembering the original location of that Part.
|
|
*
|
|
* #copiedParts provides the map of Parts that have been copied during a copying operation, if any.
|
|
*/
|
|
draggedParts: Map<Part, DraggingInfo> | null;
|
|
/**
|
|
* This read-only property returns a Set that holds all of the Parts that are currently being dragged for either copying or moving.
|
|
* @return {Set.<Part>} Returns the Map#toKeySet of either #copiedParts or #draggedParts, or else an empty Set.
|
|
*/
|
|
readonly draggingParts: Set<Part>;
|
|
/**
|
|
* Gets or sets the mouse point from which parts start to move.
|
|
* The value is a Point in document coordinates.
|
|
* This property is normally set to the diagram's mouse-down point in #doActivate,
|
|
* but may be set to a different point if parts are being copied from a different control.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
startPoint: Point;
|
|
/**
|
|
* On touch gestures only, this property gets or sets the time in milliseconds
|
|
* for which the mouse must be stationary before this tool can be started.
|
|
* The default value is 100 milliseconds.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
delay: number;
|
|
/**
|
|
* This tool can run if the diagram allows selection and moves/copies/dragging-out,
|
|
* if the mouse has moved far enough away to be a drag and not a click,
|
|
* and if #findDraggablePart has found a selectable part at the mouse-down point.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Return the selectable and movable/copyable Part at the mouse-down point.
|
|
* This is called by #canStart to decide if this tool is ready to run.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Part}
|
|
*/
|
|
findDraggablePart(): Part | null;
|
|
/**
|
|
* This override prevents the Control modifier unselecting an already selected part.
|
|
* This also remembers the selectable #currentPart at the current mouse point.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
standardMouseSelect(): void;
|
|
/**
|
|
* Start the dragging operation.
|
|
* This calls #computeEffectiveCollection and saves the result as #draggedParts.
|
|
*
|
|
* This starts a "Drag" transaction.
|
|
* Depending on what happens, the transaction may be finished as a "Move" or a "Copy"
|
|
* transaction, or it may be rolled-back if the tool is cancelled.
|
|
*
|
|
* Normally when this method is called the value of #currentPart will be null,
|
|
* in which case this will call Tool#standardMouseSelect which will set #currentPart.
|
|
* But if when this method is called the value of #currentPart has already been set
|
|
* because the programmer wants the user to start dragging that Part,
|
|
* then this method will not need to call Tool#standardMouseSelect because
|
|
* the Part(s) to be selected and dragged have already been determined by the caller.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* This just calls CommandHandler#computeEffectiveCollection. The implementation of this method was moved to CommandHandler for 2.0.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Iterable.<Part>} parts A Set or List of Parts.
|
|
* @param {DraggingOptions} options Potential options for the collection computation
|
|
* @return {Map.<Part,DraggingInfo>} a Map mapping Parts to DraggingInfo Objects
|
|
* that have a "point" property remembering the original location of that Part.
|
|
*/
|
|
computeEffectiveCollection(parts: Iterable<Part>, options: DraggingOptions): Map<Part, DraggingInfo>;
|
|
/**
|
|
* Stop the dragging operation by stopping the transaction and cleaning up any temporary state.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* Abort any dragging operation.
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* Handle switching between copying and moving modes as the Control/Option key is pressed or released.
|
|
*/
|
|
doKeyDown(): void;
|
|
/**
|
|
* Handle switching between copying and moving modes as the Control/Option key is pressed or released.
|
|
*/
|
|
doKeyUp(): void;
|
|
/**
|
|
* Move a collection Map of Parts by a given offset.
|
|
*
|
|
* If *check* is true this respects the Part#canMove predicate for Nodes or simple Parts
|
|
* when this is the Diagram#currentTool.
|
|
* It also respects #isGridSnapEnabled in order to try to automatically snap part locations to a grid.
|
|
* And it also uses the Part#dragComputation function, if any, to determine the new location for each part.
|
|
*
|
|
* The first argument is a Map as produced by #computeEffectiveCollection,
|
|
* not a List or Set or Iterator of Parts.
|
|
* Call Diagram#moveParts if you want to move a simple collection of Parts without having to create the argument Map.
|
|
* @expose
|
|
* @param {Map.<Part,DraggingInfo>} parts a Map mapping Parts to DraggingInfo Objects
|
|
* that have a "point" property remembering the original location of that Part.
|
|
* @param {Point} offset The offset, before snapping, to move parts.
|
|
* This offset reflects the total amount moved during tool operation,
|
|
* based on original Part locations remembered when the DraggingTool activated.
|
|
* @param {boolean} check Whether to check Part#canMove on each part.
|
|
* @since 1.1
|
|
*/
|
|
moveParts(parts: Map<Part, DraggingInfo>, offset: Point, check: boolean): void;
|
|
/**
|
|
* Undocumented.
|
|
* @expose
|
|
* @param pt
|
|
* @return {GraphObject|null}
|
|
*/
|
|
protected findDragOverObject(pt: Point): GraphObject | null;
|
|
/**
|
|
* Perform any additional side-effects during a drag, whether an internal move or copy or an external drag,
|
|
* that may affect the existing non-moved object(s).
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} pt a Point in document coordinates.
|
|
* @param {GraphObject} obj the GraphObject at the point,
|
|
* excluding what is being dragged or temporary objects;
|
|
* the argument may be null if the drag is occurring in the background of the diagram.
|
|
* Use GraphObject#part to get the Node or Part at the root of
|
|
* the visual tree of the stationary object.
|
|
* @since 1.1
|
|
*/
|
|
doDragOver(pt: Point, obj: GraphObject | null): void;
|
|
/**
|
|
* Perform any additional side-effects after a drop, whether an internal move or copy or an external drop,
|
|
* that may affect the existing non-moved object(s).
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} pt a Point in document coordinates.
|
|
* @param {GraphObject} obj the GraphObject where the drop occurred,
|
|
* excluding what was dropped or temporary objects;
|
|
* the argument may be null if the drop occurred in the background of the diagram.
|
|
* Use GraphObject#part to get the Node or Part at the root of
|
|
* the visual tree of the stationary object.
|
|
* @since 1.1
|
|
*/
|
|
doDropOnto(pt: Point, obj: GraphObject | null): void;
|
|
/**
|
|
* Move the #draggedParts (or if copying, the #copiedParts) to follow the current mouse point.
|
|
*
|
|
* If this creates any temporary parts, by default it adds them to the Tool layer.
|
|
*
|
|
* This calls #doDragOver for any side-effects on stationary parts.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* On a mouse-up finish moving or copying the effective selection.
|
|
*
|
|
* This calls #doDropOnto for any side-effects on stationary parts.
|
|
*
|
|
* This also updates the diagram's bounds,
|
|
* raises a "SelectionCopied" or "SelectionMoved" DiagramEvent, and stops this tool.
|
|
*
|
|
* This method also raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* Changes are performed in a "Drag" transaction, but the "ChangedSelection" event is raised outside the transaction.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {Event} e
|
|
* @param {Point} modelpt
|
|
* @param {Diagram} overdiag the diagram attached to the target of the mouse move event, if any.
|
|
* @return {boolean}
|
|
*/
|
|
simulatedMouseMove(e: Event | Touch | null, modelpt: Point, overdiag: Diagram | null): boolean;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {Event} e
|
|
* @param {Point} modelpt
|
|
* @param {Diagram} curdiag
|
|
* @return {boolean}
|
|
*/
|
|
simulatedMouseUp(e: Event | Touch | null, modelpt: Point, curdiag: Diagram | null): boolean;
|
|
/**
|
|
* This predicate is true when the diagram allows objects to be copied and inserted,
|
|
* and some object in the selection is copyable,
|
|
* and the user is holding down the Control key (Option key on Mac).
|
|
*
|
|
* This method may be overridden, although in most cases it is easiest to set Part#copyable.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
mayCopy(): boolean;
|
|
/**
|
|
* This predicate is true when the diagram allows objects to be moved,
|
|
* and some object in the selection is movable.
|
|
*
|
|
* This method may be overridden, although in most cases it is easiest to set Part#movable.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
mayMove(): boolean;
|
|
/**
|
|
* This method computes the new location for a Node or simple Part,
|
|
* given a new desired location and an optional Map of dragged parts,
|
|
* taking any grid-snapping into consideration,
|
|
* any Part#dragComputation function,
|
|
* and any Part#minLocation and Part#maxLocation.
|
|
*
|
|
* As of 2.0, this just calls Diagram#computeMove and remains for compatibility.
|
|
*
|
|
* This method may be overridden, but should usually be overridden on Diagram.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Part} n the Node or simple Part that is being moved
|
|
* @param {Point} newloc the proposed new location
|
|
* @param {Map.<Part,DraggingInfo>=} draggedparts an optional Map mapping Parts to DraggingInfo Objects
|
|
* that have a "point" property remembering the original location of that Part.
|
|
* @param {Point=} result an optional Point that is modified and returned
|
|
* @return {Point} the possibly grid-snapped computed Point that is within the minimum and maximum permitted locations
|
|
* @since 1.1
|
|
*/
|
|
computeMove(n: Part, newloc: Point, draggedparts?: Map<Part, DraggingInfo> | null, result?: Point): Point;
|
|
}
|
|
/**
|
|
* This abstract class is the base class for the LinkingTool and RelinkingTool classes.
|
|
*
|
|
* This class includes properties for defining and accessing any temporary nodes and temporary link
|
|
* that are used during any linking operation, as well as access to the existing diagram's nodes and link
|
|
* (if any) that are involved with the linking operation.
|
|
* <p class="boxread">
|
|
* For a general discussion of link routing, see:
|
|
* <a href="../../intro/links.html">Introduction to Links</a>,
|
|
* <a href="../../intro/linkLabels.html">Introduction to Link Labels</a>, and
|
|
* <a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
|
|
* For customizing the linking tools, see <a href="../../intro/tools.html#LinkingAndRelinkingTools">Introduction to the Linking Tools</a>.
|
|
* For customizing the reshaping of Links, see <a href="../../intro/tools.html#LinkReshapingTool">Introduction to the LinkReshapingTool</a>.
|
|
* For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export abstract class LinkingBaseTool extends Tool {
|
|
/**
|
|
* Don't construct this directly -- this is an abstract class.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Gets or sets the distance at which link snapping occurs.
|
|
* The default value is 100.0.
|
|
* The value must be non-negative.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
portGravity: number;
|
|
/**
|
|
* Gets or sets whether it is valid to have partly or completely unconnected links.
|
|
*
|
|
* The default value is false -- the user cannot draw or reconnect a link to "nowhere".
|
|
* Setting this property does not raise any events.
|
|
* @since 1.3
|
|
*/
|
|
isUnconnectedLinkValid: boolean;
|
|
/** @hidden
|
|
* Gets or sets the cursor used during the linking or relinking operation.
|
|
* This defaults to 'pointer'.
|
|
*/
|
|
linkingCursor: string;
|
|
/**
|
|
* Gets or sets the temporary Link that is shown while the user is drawing or reconnecting a link.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
temporaryLink: Link;
|
|
/**
|
|
* Gets or sets the temporary Node at the "from" end of the #temporaryLink
|
|
* while the user is drawing or reconnecting a link.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
temporaryFromNode: Node;
|
|
/**
|
|
* Gets or sets the GraphObject that is the port at the "from" end of the #temporaryLink
|
|
* while the user is drawing or reconnecting a link.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
temporaryFromPort: GraphObject;
|
|
/**
|
|
* Gets or sets the temporary Node at the "to" end of the #temporaryLink
|
|
* while the user is drawing or reconnecting a link.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
temporaryToNode: Node;
|
|
/**
|
|
* Gets or sets the GraphObject that is the port at the "to" end of the #temporaryLink
|
|
* while the user is drawing or reconnecting a link.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
temporaryToPort: GraphObject;
|
|
/**
|
|
* Gets or sets the original Link being reconnected by the RelinkingTool.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
originalLink: Link | null;
|
|
/**
|
|
* Gets or sets the original Node from which the new link is being drawn
|
|
* or from which the #originalLink was connected when being relinked.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
originalFromNode: Node | null;
|
|
/**
|
|
* Gets or sets the GraphObject that is the port in the #originalFromNode.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
originalFromPort: GraphObject | null;
|
|
/**
|
|
* Gets or sets the original Node to which the new link is being drawn
|
|
* or to which the #originalLink was connected when being relinked.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
originalToNode: Node | null;
|
|
/**
|
|
* Gets or sets the GraphObject that is the port in the #originalToNode.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
originalToPort: GraphObject | null;
|
|
/**
|
|
* Gets whether the linking operation is in the forwards direction,
|
|
* connecting from the "From" port to the "To" port.
|
|
*/
|
|
isForwards: boolean;
|
|
/**
|
|
* Gets or sets a proposed GraphObject port for connecting a link.
|
|
* Whether this is a "to" port or a "from" port depends on the direction
|
|
* (#isForwards) in which the link is being drawn or reconnected.
|
|
*
|
|
* This is set when the mouse is being dragged and when a mouse-up event occurs
|
|
* with the result of a call to #findTargetPort.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
targetPort: GraphObject | null;
|
|
/**
|
|
* Make a temporary port look and act like a real one.
|
|
*
|
|
* This is called by #doMouseMove as the tool finds new valid target ports.
|
|
* If #findTargetPort returns null, it calls #setNoTargetPortProperties instead.
|
|
*
|
|
* If the #portTargeted property is a function, that function is called.
|
|
* It is easier to customize the behavior by setting that functional property than it is to override
|
|
* this method and the #setNoTargetPortProperties method.
|
|
* But you may want to call this method to get the standard behavior for dynamically adapting
|
|
* the temporary node/port to "act like" the target port.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} realnode
|
|
* @param {GraphObject} realport
|
|
* @param {Node} tempnode
|
|
* @param {GraphObject} tempport
|
|
* @param {boolean} toend
|
|
* @since 1.2
|
|
*/
|
|
protected copyPortProperties(realnode: Node | null, realport: GraphObject | null, tempnode: Node, tempport: GraphObject, toend: boolean): void;
|
|
/**
|
|
* Reset a temporary port's properties to neutral values when there is no target port.
|
|
*
|
|
* This is called by #doMouseMove when the tool finds no new valid target port.
|
|
* If #findTargetPort returns non-null, it calls #copyPortProperties instead.
|
|
*
|
|
* If the #portTargeted property is a function, that function is called with null values as the first two arguments.
|
|
* It is easier to customize the behavior by setting that functional property than it is to override
|
|
* this method and the #copyPortProperties method.
|
|
* But you may want to call this method to get the standard behavior for dynamically adapting
|
|
* the temporary node/port to "act like" it is not connecting with any target port.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} tempnode
|
|
* @param {GraphObject} tempport
|
|
* @param {boolean} toend
|
|
* @since 1.2
|
|
*/
|
|
protected setNoTargetPortProperties(tempnode: Node, tempport: GraphObject, toend: boolean): void;
|
|
/**
|
|
* Mouse movement results in a temporary node moving to where a valid target port is located,
|
|
* or to where the mouse is if there is no valid target port nearby.
|
|
*
|
|
* This calls #findTargetPort to update the #targetPort
|
|
* given the new mouse point.
|
|
* If a valid target port is found this moves the temporary node/port and
|
|
* makes them appear like the target node/port by calling #copyPortProperties.
|
|
* If no valid target port is found, this moves the temporary node to
|
|
* where the mouse currently is and removes any node/port appearance,
|
|
* by calling #setNoTargetPortProperties.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Find a port with which the user could complete a valid link.
|
|
*
|
|
* This finds objects near to the current mouse point for which a valid link connection is possible.
|
|
*
|
|
* For each port element found, this calls #isValidLink to find out if a link between
|
|
* the original node/port and the found node/port would be valid.
|
|
* The result is saved in a cache for faster decisions later during operation of this tool.
|
|
* The closest valid port is returned.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {boolean} toend true if looking for a "to" port.
|
|
* @return {GraphObject} a valid port, or null if no such port is near the current mouse point
|
|
* within the #portGravity distance.
|
|
*/
|
|
findTargetPort(toend: boolean): GraphObject | null;
|
|
/**
|
|
* This predicate is true if it is permissible to connect a link from a given node/port.
|
|
* This is called by #isValidLink.
|
|
* <p class="boxread">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} fromnode
|
|
* @param {GraphObject} fromport
|
|
* @return {boolean}
|
|
* False if the node is in a Layer that does not Layer#allowLink.
|
|
* False if the port's GraphObject#fromLinkable is either false or null.
|
|
* False if the number of links connected to the port would exceed the port's GraphObject#fromMaxLinks.
|
|
* Otherwise true.
|
|
*/
|
|
isValidFrom(fromnode: Node | null, fromport: GraphObject | null): boolean;
|
|
/**
|
|
* This predicate is true if it is permissible to connect a link to a given node/port.
|
|
* This is called by #isValidLink.
|
|
* <p class="boxread">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} tonode
|
|
* @param {GraphObject} toport
|
|
* @return {boolean}
|
|
* False if the node is in a Layer that does not Layer#allowLink.
|
|
* False if the port's GraphObject#toLinkable is either false or null.
|
|
* False if the number of links connected from the port would exceed the port's GraphObject#toMaxLinks.
|
|
* Otherwise true.
|
|
*/
|
|
isValidTo(tonode: Node | null, toport: GraphObject | null): boolean;
|
|
/**
|
|
* This predicate is true if both argument ports are in the same Node.
|
|
* This is called by #isValidLink.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* It is rare that you will want to override this method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {GraphObject} fromport
|
|
* @param {GraphObject} toport
|
|
* @return {boolean}
|
|
*/
|
|
isInSameNode(fromport: GraphObject | null, toport: GraphObject | null): boolean;
|
|
/**
|
|
* This predicate is true if there is a link in the diagram going from the given port to the given port.
|
|
* This is called by #isValidLink.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* It is rare that you will want to override this method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {GraphObject} fromport
|
|
* @param {GraphObject} toport
|
|
* @return {boolean}
|
|
*/
|
|
isLinked(fromport: GraphObject | null, toport: GraphObject | null): boolean;
|
|
/**
|
|
* This predicate should be true when it is logically valid to connect a new link from
|
|
* one node/port to another node/port.
|
|
* When this is called by the RelinkingTool, that tool sets #originalLink
|
|
* to be the Link being reconnected.
|
|
* <p class="boxread">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* This method may be overridden, although it is usually much easier to just set #linkValidation
|
|
* or Node#linkValidation in order to add some application-specific link validation.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} fromnode the "from" Node.
|
|
* @param {GraphObject} fromport the "from" GraphObject port.
|
|
* @param {Node} tonode the "to" Node.
|
|
* @param {GraphObject} toport the "to" GraphObject port.
|
|
* @return {boolean}
|
|
* False if #isValidFrom is false for the "from" node/port.
|
|
* False if #isValidTo is false for the "to" node/port.
|
|
* False if #isInSameNode is true unless GraphObject#fromLinkableSelfNode
|
|
* and GraphObject#toLinkableSelfNode are true for the two ports.
|
|
* False if #isLinked is true unless GraphObject#fromLinkableDuplicates
|
|
* and GraphObject#toLinkableDuplicates are true for the two ports.
|
|
* False if trying to link to the link's own label node(s).
|
|
* If Node#linkValidation is a predicate on either or both of the "from" node and the "to" node,
|
|
* the predicate is called and if it returns false, this predicate returns false.
|
|
* If #linkValidation is a predicate and if it returns false, this predicate returns false.
|
|
* Otherwise this predicate is true.
|
|
*/
|
|
isValidLink(fromnode: Node | null, fromport: GraphObject | null, tonode: Node | null, toport: GraphObject | null): boolean;
|
|
/**
|
|
* Checks whether a proposed link would be valid according to Diagram#validCycle.
|
|
* This does not distinguish between different ports on a node, so this method does not need to take port arguments.
|
|
* This is called by #isValidLink.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* It is rare that you will want to override this method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} from
|
|
* @param {Node} to
|
|
* @param {Link} ignore may be null; this is useful during relinking to ignore the #originalLink
|
|
* @return {boolean}
|
|
* @since 1.5
|
|
*/
|
|
isValidCycle(from: Node | null, to: Node | null, ignore?: Link | null): boolean;
|
|
/**
|
|
* Gets or sets a predicate that determines whether or not a new link between two ports would be valid.
|
|
* This predicate is called in addition to the normal link checking performed by #isValidLink
|
|
* and any Node#linkValidation predicates on the "from" and "to" nodes.
|
|
* When relinking, the Link being considered for reconnection is passed as the fifth argument.
|
|
* The default predicate is null, which is equivalent to simply returning true.
|
|
* <p class="boxread">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
*/
|
|
linkValidation: ((fromNode: Node, fromPort: GraphObject, toNode: Node, toPort: GraphObject, link: Link) => boolean) | null;
|
|
/**
|
|
* Gets or sets a function that is called as the tool targets the nearest valid port.
|
|
* The first two arguments specify the port by providing the Node that it is in
|
|
* and the GraphObject that is the actual port object.
|
|
* The next two arguments are the temporary port that has been moved and styled to be like the valid port.
|
|
* These values will be either the #temporaryToNode and #temporaryToPort
|
|
* or the #temporaryFromNode and #temporaryFromPort, depending on
|
|
* which end of the temporary link is being updated.
|
|
* The fifth argument is true if the target port represents a potential "to" end of a link;
|
|
* it is false if it is for the "from" end of a link.
|
|
*
|
|
* When there is no valid port within the #portGravity, the first two arguments are null.
|
|
*
|
|
* The function, if supplied, must not add or remove any links or nodes or port objects,
|
|
* nor may it change the validity of any potential link connection.
|
|
* @since 1.2
|
|
*/
|
|
portTargeted: ((node: Node, port: GraphObject, tempNode: Node, tempPort: GraphObject, toEnd: boolean) => void) | null;
|
|
}
|
|
/**
|
|
* The LinkingTool lets a user draw a new Link between two ports,
|
|
* using a mouse-drag operation.
|
|
*
|
|
* By default an instance of this tool is installed as a mouse-move tool in the
|
|
* Diagram#toolManager as the ToolManager#linkingTool.
|
|
* However this tool may be used modally, as described below.
|
|
*
|
|
* #canStart calls #findLinkablePort to find a valid "port" element
|
|
* from which (or to which) the user may interactively draw a new link.
|
|
* #doActivate sets up a temporary link and two temporary nodes,
|
|
* one at the start port and one following the mouse.
|
|
* <p class="boxread">
|
|
* For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles.
|
|
*
|
|
* This tool conducts a transaction while the tool is active.
|
|
* A successful linking will result in a "LinkDrawn" DiagramEvent and a "Linking" transaction.
|
|
*
|
|
* If you want to programmatically start a new user mouse-gesture to draw a new link
|
|
* from a given GraphObject that either is a "port" or may be within
|
|
* the visual tree of a "port", set the #startObject property
|
|
* to let #findLinkablePort find the real "port" element.
|
|
* Then start and activate this tool:
|
|
* ```js
|
|
* var tool = myDiagram.toolManager.linkingTool;
|
|
* tool.startObject = ...;
|
|
* myDiagram.currentTool = tool;
|
|
* tool.doActivate();
|
|
* ```
|
|
* @extends LinkingBaseTool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class LinkingTool extends LinkingBaseTool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#linkingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "Linking".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This value for LinkingTool#direction indicates that users may draw new links in either direction.
|
|
* @constant
|
|
*/
|
|
static Either: EnumValue;
|
|
/**
|
|
* This value for LinkingTool#direction indicates that users may draw new links forwards only
|
|
* (i.e. from "from" node to "to" node).
|
|
* @constant
|
|
*/
|
|
static ForwardsOnly: EnumValue;
|
|
/**
|
|
* This value for LinkingTool#direction indicates that users may draw new links backwards only
|
|
* (i.e. from "to" node to "from" node).
|
|
* @constant
|
|
*/
|
|
static BackwardsOnly: EnumValue;
|
|
/**
|
|
* Gets or sets a data object that is copied by #insertLink
|
|
* and added to the GraphLinksModel when creating a new Link.
|
|
* The default value is an empty Object, which will be copied.
|
|
* The value must be an Object for the linking operation to succeed.
|
|
* A null value will cause #insertLink to fail.
|
|
*
|
|
* The copied link data's GraphLinksModel#linkFromKeyProperty
|
|
* and GraphLinksModel#linkToKeyProperty properties are set to
|
|
* the corresponding node's data's key values.
|
|
* If the ports have GraphObject#portId values that are not null,
|
|
* the link data's GraphLinksModel#linkFromPortIdProperty
|
|
* and GraphLinksModel#linkToPortIdProperty properties are also set.
|
|
*
|
|
* Setting this property does not raise any events.
|
|
* This property is ignored if the Diagram#model is not a GraphLinksModel.
|
|
*/
|
|
archetypeLinkData: ObjectData | null;
|
|
/**
|
|
* Gets or sets an optional node data object representing a link label, that is copied by #insertLink
|
|
* and added to the GraphLinksModel when creating a new Link.
|
|
*
|
|
* The default value is null, which causes no such label node data to be added to the model
|
|
* along with the new link data.
|
|
*
|
|
* #insertLink calls GraphLinksModel#addLabelKeyForLinkData
|
|
* to associate the label node data with the link data.
|
|
*
|
|
* Setting this property does not raise any events.
|
|
* This property is ignored if the Diagram#model is not a GraphLinksModel.
|
|
*/
|
|
archetypeLabelNodeData: ObjectData | null;
|
|
/**
|
|
* Gets or sets the direction in which new links may be drawn.
|
|
* Possible values are LinkingTool.ForwardsOnly, LinkingTool.BackwardsOnly, or LinkingTool.Either.
|
|
* This defaults to LinkingTool.Either.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
direction: EnumValue;
|
|
/**
|
|
* Gets or sets the GraphObject at which #findLinkablePort should start its search.
|
|
* The default value is null.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* If you want to explicitly start a new user mouse-gesture to draw a new link
|
|
* from a given GraphObject that may be a "port" object or may be within
|
|
* the visual tree of a "port" object, set this property to that object
|
|
* to let #findLinkablePort find the real "port" object.
|
|
* Then start and activate this tool:
|
|
* ```js
|
|
* var tool = myDiagram.toolManager.linkingTool;
|
|
* tool.startObject = ...;
|
|
* myDiagram.currentTool = tool;
|
|
* tool.doActivate();
|
|
* ```
|
|
*/
|
|
startObject: GraphObject | null;
|
|
/**
|
|
* This tool can run when the diagram allows linking, the model is modifiable,
|
|
* the left-button mouse drag has moved far enough away to not be a click, and
|
|
* when #findLinkablePort has returned a valid port
|
|
* or when #startObject is a valid port.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Return the GraphObject at the mouse-down point,
|
|
* if it is part of a node and if it is valid to link with it.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {GraphObject}
|
|
* If the #direction is LinkingTool.Either or LinkingTool.ForwardsOnly,
|
|
* this checks the element and its parent Node by calling LinkingBaseTool#isValidFrom.
|
|
* If the #direction is LinkingTool.Either or LinkingTool.BackwardsOnly,
|
|
* this checks the element and its parent Node by calling LinkingBaseTool#isValidTo.
|
|
* In either case finding a matching port will return that port and set LinkingBaseTool#isForwards appropriately.
|
|
* Otherwise this will return null.
|
|
*/
|
|
findLinkablePort(): GraphObject | null;
|
|
/**
|
|
* Start the linking operation.
|
|
*
|
|
* If the #startObject is already set, it uses that object to find the starting port.
|
|
* If it is not set, this calls #findLinkablePort and remembers it as the starting port.
|
|
*
|
|
* It then starts a transaction, captures the mouse, and changes the cursor.
|
|
* Next it initializes and adds the LinkingBaseTool#temporaryFromNode,
|
|
* LinkingBaseTool#temporaryToNode, and LinkingBaseTool#temporaryLink to the diagram.
|
|
* The temporary nodes that are positioned and sized to be like the real LinkingBaseTool#originalFromPort
|
|
* and LinkingBaseTool#originalToPort ports.
|
|
* The temporary link connects the two temporary ports, of course.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Finishing the linking operation stops the transaction, releases the mouse, and resets the cursor.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* A mouse-up ends the linking operation; if there is a valid #targetPort nearby,
|
|
* this adds a new Link by calling #insertLink.
|
|
*
|
|
* If there is a new link, it is selected and the "LinkDrawn" DiagramEvent is raised
|
|
* with the new link as the DiagramEvent#subject.
|
|
* If there is no new link, this calls #doNoLink.
|
|
* In any case this stops the tool.
|
|
*
|
|
* This method also raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* Changes are performed in a "Linking" transaction, but the "ChangedSelection" event is raised outside the transaction.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* It is usually easier to override #insertLink or just set #archetypeLinkData.
|
|
* It is also common to implement a "LinkDrawn" DiagramEvent listener on the Diagram.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Make a copy of the #archetypeLinkData, set its node and port properties, and add it to the GraphLinksModel.
|
|
* If the model is a TreeModel, set the parent key of the child's node data object.
|
|
*
|
|
* For GraphLinksModels, if #archetypeLabelNodeData is non-null, this method also adds that node data as an initial label node
|
|
* for the new link data.
|
|
*
|
|
* For TreeModels, if Diagram#isTreePathToChildren is false, the roles of the *fromnode* and *tonode* arguments are exchanged.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Usually though it is easiest to just set #archetypeLinkData to control what kind of link is created.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} fromnode
|
|
* @param {GraphObject} fromport the from-port, or null to use the node itself
|
|
* @param {Node} tonode
|
|
* @param {GraphObject} toport the to-port, or null to use the node itself
|
|
* @return {Link} the newly created Link, or null if it failed.
|
|
* @see #doNoLink
|
|
*/
|
|
insertLink(fromnode: Node | null, fromport: GraphObject | null, tonode: Node | null, toport: GraphObject | null): Link | null;
|
|
/**
|
|
* This method is called upon a mouse up when no new link is drawn,
|
|
* either because no valid LinkingBaseTool#targetPort was found or because
|
|
* #insertLink returned null.
|
|
*
|
|
* This method may be overridden. By default this method does nothing.
|
|
* If you want to successfully perform any side-effects, you will need to set Tool#transactionResult to a string;
|
|
* otherwise this tool's transaction will be rolled-back.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} fromnode
|
|
* @param {GraphObject} fromport the from-port, or null to use the node itself
|
|
* @param {Node} tonode
|
|
* @param {GraphObject} toport the to-port, or null to use the node itself
|
|
* @since 1.7
|
|
*/
|
|
doNoLink(fromnode: Node | null, fromport: GraphObject | null, tonode: Node | null, toport: GraphObject | null): void;
|
|
}
|
|
/**
|
|
* The RelinkingTool allows the user to reconnect an existing Link
|
|
* if the Link#relinkableTo and/or Link#relinkableFrom properties are true.
|
|
* <p class="boxread">
|
|
* For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* By default an instance of this tool is installed as a mouse-down tool in the
|
|
* Diagram#toolManager as the ToolManager#relinkingTool.
|
|
*
|
|
* This tool makes use of two Adornments,
|
|
* each including a relink handle (potentially one for each end of the link),
|
|
* shown when a link is selected.
|
|
*
|
|
* This tool conducts a transaction while the tool is active.
|
|
* A successful relinking will result in a "LinkRelinked" DiagramEvent and a "Relinking" transaction.
|
|
*
|
|
* If you want to programmatically start a new user's relinking of a Link,
|
|
* you can set the #handle property to the specific "RelinkFrom" or "RelinkTo" handle and
|
|
* then start and activate the tool.
|
|
* ```js
|
|
* var tool = myDiagram.toolManager.relinkingTool;
|
|
* tool.originalLink = ...; // specify which Link to have the user reconnect
|
|
* tool.isForwards = true; // specify which end of the Link to reconnect
|
|
* myDiagram.currentTool = tool; // starts the RelinkingTool
|
|
* tool.doActivate(); // activates the RelinkingTool
|
|
* ```
|
|
* @extends LinkingBaseTool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class RelinkingTool extends LinkingBaseTool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#relinkingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "Relinking".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Show an Adornment for each end of the Link that the user may reconnect.
|
|
* The Adornment may have a copy of #fromHandleArchetype and/or #toHandleArchetype.
|
|
*
|
|
* This method may be overridden.
|
|
* @param {Part} part
|
|
*/
|
|
updateAdornments(part: Part): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} selelt the GraphObject of the Link being relinked.
|
|
* @param {boolean} toend
|
|
* @return {Adornment}
|
|
*/
|
|
makeAdornment(selelt: GraphObject, toend: boolean): Adornment;
|
|
/**
|
|
* Gets or sets a small GraphObject that is copied as a relinking handle for the selected link path
|
|
* at the "from" end of the link.
|
|
* By default this is a Shape that is a small blue diamond.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the default handle to be larger green triangles:
|
|
* ```js
|
|
* myDiagram.toolManager.relinkingTool.toHandleArchetype =
|
|
* $(go.Shape, "Triangle",
|
|
* { width: 10, height: 10, fill: "limegreen", segmentIndex: 0 });
|
|
* ```
|
|
* @see #toHandleArchetype
|
|
*/
|
|
fromHandleArchetype: GraphObject | null;
|
|
/**
|
|
* Gets or sets a small GraphObject that is copied as a relinking handle for the selected link path
|
|
* at the "to" end of the link.
|
|
* By default this is a Shape that is a small blue diamond.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the default handle to be larger orange triangles:
|
|
* ```js
|
|
* myDiagram.toolManager.relinkingTool.toHandleArchetype =
|
|
* $(go.Shape, "Triangle",
|
|
* { width: 10, height: 10, fill: "orange", segmentIndex: -1 });
|
|
* ```
|
|
* @see #fromHandleArchetype
|
|
*/
|
|
toHandleArchetype: GraphObject | null;
|
|
/**
|
|
* Returns the GraphObject that is the tool handle being dragged by the user.
|
|
* This will be contained by an Adornment whose category is "RelinkFrom" or "RelinkTo".
|
|
* Its Adornment#adornedPart is the same as the #originalLink.
|
|
*
|
|
* This property is also settable, but should only be set either within an override of #doActivate
|
|
* or prior to calling #doActivate.
|
|
*/
|
|
handle: GraphObject | null;
|
|
/**
|
|
* This tool can run when the diagram allows relinking, the model is modifiable,
|
|
* and there is a relink handle at the mouse-down point.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Start the relinking operation.
|
|
*
|
|
* Find the relink handle by calling Tool#findToolHandleAt
|
|
* looking for either the "RelinkFrom" adornment or the "RelinkTo" adornment,
|
|
* saving the result in #handle.
|
|
*
|
|
* Normally when this method is called the value of LinkingBaseTool#originalLink and #handle will be null,
|
|
* resulting in a call to Tool#findToolHandleAt to find a "RelinkFrom" or "RelinkTo" tool handle,
|
|
* which is then remembered as the value of #handle.
|
|
* If when this method is called the value of #handle is already set,
|
|
* then there is no need to call Tool#findToolHandleAt,
|
|
* because the programmer has already set up which relinking handle they want the user to be relinking.
|
|
* Finding a handle is not necessary if LinkingBaseTool#originalLink and
|
|
* #isForwards have been set before calling this method.
|
|
*
|
|
* This starts a transaction, captures the mouse, and sets the cursor.
|
|
*
|
|
* If LinkingBaseTool#originalLink or #handle was not set beforehand,
|
|
* the value of #isForwards is set depending on the category of the relink handle found.
|
|
* The LinkingBaseTool#originalLink property and various
|
|
* "Original..." port and node properties are set too.
|
|
* The temporary nodes and temporary link are also initialized.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Make a temporary link look and act like the real Link being relinked.
|
|
* By default this method copies many of the routing-oriented properties
|
|
* from the LinkingBaseTool#originalLink to the LinkingBaseTool#temporaryLink.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Link} reallink
|
|
* @param {Link} templink
|
|
* @since 1.3
|
|
*/
|
|
protected copyLinkProperties(reallink: Link | null, templink: Link): void;
|
|
/**
|
|
* Finishing the linking operation stops the transaction, releases the mouse, and resets the cursor.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* A mouse-up ends the relinking operation; if there is a valid #targetPort nearby,
|
|
* this modifies the old link to connect with the target port.
|
|
*
|
|
* A successful relinking calls #reconnectLink to actually change the link.
|
|
* The "LinkRelinked" DiagramEvent is raised with the link as the DiagramEvent#subject
|
|
* and with the now-disconnected original port as the DiagramEvent#parameter.
|
|
* If the link was not reconnected, this calls #doNoRelink.
|
|
* In any case this stops the tool.
|
|
*
|
|
* A failure to find a valid target port results in no changes and no DiagramEvent.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* You might find it easier to override #reconnectLink.
|
|
* It is actually most common to implement a "LinkRelinked" DiagramEvent listener on the Diagram.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Modify an existing Link to connect to a new node and port.
|
|
*
|
|
* This method may be overridden, but we recommend that you call this base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Link} existinglink
|
|
* @param {Node} newnode the Node to connect to or from.
|
|
* @param {GraphObject} newport the GraphObject port to connect to or from.
|
|
* @param {boolean} toend If true, this modifies the link's "to" node and port; otherwise it modifies the "from" node and port.
|
|
* @return {boolean} true if successful.
|
|
* @see #doNoRelink
|
|
*/
|
|
reconnectLink(existinglink: Link, newnode: Node | null, newport: GraphObject | null, toend: boolean): boolean;
|
|
/**
|
|
* This method is called upon a mouse up when #reconnectLink is not called.
|
|
*
|
|
* This method may be overridden. By default this method does nothing.
|
|
* If you want to successfully perform any side-effects, you will need to set Tool#transactionResult to a string;
|
|
* otherwise this tool's transaction will be rolled-back.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Link} existinglink
|
|
* @param {boolean} toend If true, the user was trying to modify the link's "to" node and port.
|
|
* @since 1.7
|
|
*/
|
|
doNoRelink(existinglink: Link, toend: boolean): void;
|
|
}
|
|
/**
|
|
* The LinkReshapingTool is used to interactively change the route of a Link
|
|
* by setting its Link#points list.
|
|
* You may want to save the route to the model by using a TwoWay Binding on the "points" property of the Link.
|
|
*
|
|
* This tool makes use of an Adornment, shown when the adorned Link is selected,
|
|
* that includes some number of reshape handles.
|
|
* This tool conducts a transaction while the tool is active.
|
|
* A successful reshaping will result in a "LinkReshaped" DiagramEvent and a "LinkReshaping" transaction.
|
|
*
|
|
* <p class="boxread">
|
|
* For a general discussion of link routing, see:
|
|
* <a href="../../intro/links.html">Introduction to Links</a>,
|
|
* <a href="../../intro/linkLabels.html">Introduction to Link Labels</a>, and
|
|
* <a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
|
|
* For customizing the linking tools, see <a href="../../intro/tools.html#LinkingAndRelinkingTools">Introduction to the Linking Tools</a>.
|
|
* For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class LinkReshapingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#linkReshapingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "LinkReshaping".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Disallow dragging.
|
|
* @constant
|
|
*/
|
|
static None: EnumValue;
|
|
/**
|
|
* Allow only horizontal (left-and-right) dragging.
|
|
* @constant
|
|
*/
|
|
static Horizontal: EnumValue;
|
|
/**
|
|
* Allow only vertical (up-and-down) dragging.
|
|
* @constant
|
|
*/
|
|
static Vertical: EnumValue;
|
|
/**
|
|
* Allow dragging in any direction.
|
|
* @constant
|
|
*/
|
|
static All: EnumValue;
|
|
/**
|
|
* Get the permitted reshaping behavior for a particular reshape handle.
|
|
* @param {GraphObject} obj a reshape handle in the "LinkReshaping" Adornment.
|
|
* @return {EnumValue} one of LinkReshapingTool.All, .Vertical, .Horizontal, or .None
|
|
* @since 1.3
|
|
*/
|
|
protected getReshapingBehavior(obj: GraphObject): EnumValue;
|
|
/**
|
|
* Set the permitted reshaping behavior for a particular reshape handle.
|
|
* @param {GraphObject} obj a reshape handle in the "LinkReshaping" Adornment.
|
|
* @param {EnumValue} behavior one of LinkReshapingTool.All, .Vertical, .Horizontal, or .None
|
|
* @since 1.3
|
|
*/
|
|
protected setReshapingBehavior(obj: GraphObject, behavior: EnumValue): void;
|
|
/**
|
|
* Show an Adornment with reshape handles at each of the interesting points of the link's route,
|
|
* if the link is selected and visible and if Part#canReshape is true.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Part} part
|
|
*/
|
|
updateAdornments(part: Part): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} pathshape
|
|
* @return {Adornment}
|
|
*/
|
|
makeAdornment(pathshape: GraphObject): Adornment;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} pathshape the GraphObject path of the link being reshaped.
|
|
* @param {number} idx the index of the route point to be moved.
|
|
* @return {GraphObject}
|
|
*/
|
|
makeHandle(pathshape: GraphObject, idx: number): GraphObject;
|
|
/**
|
|
* Gets or sets a small GraphObject that is copied as a reshape handle at each movable point in the selected link's route.
|
|
* By default this is a Shape that is a small blue rectangle.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the default handles to be larger yellow circles:
|
|
* ```js
|
|
* myDiagram.toolManager.linkReshapingTool.handleArchetype =
|
|
* $(go.Shape, "Circle",
|
|
* { width: 10, height: 10, fill: "yellow" });
|
|
* ```
|
|
* @see #midHandleArchetype
|
|
*/
|
|
handleArchetype: GraphObject | null;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} pathshape the GraphObject path of the link being reshaped.
|
|
* @param {number} idx the index of the route point to be moved.
|
|
* @return {GraphObject}
|
|
*/
|
|
makeResegmentHandle(pathshape: GraphObject, idx: number): GraphObject;
|
|
/**
|
|
* Gets or sets a small GraphObject that is copied as a resegment handle at each mid-point in the selected Link's route.
|
|
* By default this is a Shape that is a small blue diamond.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the default handle to be larger cyan triangles:
|
|
* ```js
|
|
* myDiagram.toolManager.linkReshapingTool.midHandleArchetype =
|
|
* $(go.Shape, "Triangle", { width: 10, height: 10, fill: "cyan" });
|
|
* ```
|
|
* @see #handleArchetype
|
|
* @since 1.2
|
|
*/
|
|
midHandleArchetype: GraphObject | null;
|
|
/**
|
|
* Returns the GraphObject that is the tool handle being dragged by the user.
|
|
* This will be contained by an Adornment whose category is "LinkReshaping".
|
|
* Its Adornment#adornedPart is the same as the #adornedLink.
|
|
* This is normally set by #doActivate, remembering the result of the call to Tool#findToolHandleAt.
|
|
*/
|
|
handle: GraphObject | null;
|
|
/**
|
|
* This read-only property returns the Link that is being routed manually.
|
|
*/
|
|
readonly adornedLink: Link | null;
|
|
/**
|
|
* This tool may run when there is a mouse-down event on a reshape handle.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Start reshaping, if #findToolHandleAt finds a reshape handle at the mouse down point.
|
|
*
|
|
* If successful this sets #handle to be the reshape handle that it finds
|
|
* and #adornedLink to be the Link being routed.
|
|
* It also remembers the original link route (a list of Points) in case this tool is cancelled.
|
|
* And it starts a transaction.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* This stops the current reshaping operation with the link route shaped the way it is.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* Restore the link route to be the original points and stop this tool.
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @return {Point} the point where resegmenting begins
|
|
*/
|
|
protected getResegmentingPoint(): Point;
|
|
/**
|
|
* Call #reshape with a new point determined by the mouse
|
|
* to change the route of the #adornedLink.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Reshape the route with a point based on the most recent mouse point by calling #reshape,
|
|
* and then raise a "LinkReshaped" DiagramEvent before stopping this tool.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Change the route of the #adornedLink by moving the point corresponding to the current
|
|
* #handle to be at the given Point.
|
|
* This is called by #doMouseMove and #doMouseUp with the result of calling
|
|
* #computeReshape to constrain the input point.
|
|
*
|
|
* This method respects the orthogonality of the link, if necessary limiting movement along only one axis.
|
|
* To maintain orthogonality it may need to modify more than one point in the route.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} newPoint the value of the call to #computeReshape.
|
|
*/
|
|
reshape(newPoint: Point): void;
|
|
/**
|
|
* This is called by #doMouseMove and #doMouseUp to limit the input point
|
|
* before calling #reshape.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} p the point where the handle is being dragged.
|
|
* @return {Point} Either the same Point p or one constrained by the reshape behavior to be moved
|
|
* only vertically or only horizontally.
|
|
*/
|
|
computeReshape(p: Point): Point;
|
|
/**
|
|
* This read-only property returns the Point that was the original location of the handle that is being dragged to reshape the Link.
|
|
* @since 1.1
|
|
*/
|
|
readonly originalPoint: Point;
|
|
/**
|
|
* This read-only property returns the List of Points that was the original route of the Link that is being reshaped.
|
|
* This List should not be modified; its value is indeterminate until a reshaping has been activated.
|
|
* @since 1.1
|
|
*/
|
|
readonly originalPoints: List<Point>;
|
|
}
|
|
/**
|
|
* The ResizingTool is used to interactively change the size of a GraphObject
|
|
* in the selected Part or Node by setting its GraphObject#desiredSize property.
|
|
* You may want to save the size to the model by using a TwoWay Binding on the "desiredSize" property
|
|
* of the GraphObject that is named by Part#resizeObjectName.
|
|
* This tool does not operate on Links.
|
|
*
|
|
* You can limit the permitted minimum and maximum dimensions by setting
|
|
* #minSize and #maxSize.
|
|
* The resizing will also respect the GraphObject#minSize and
|
|
* GraphObject#maxSize properties.
|
|
* Width or height values that are NaN do not constrain the resizing.
|
|
* Override #computeMinSize and/or #computeMaxSize to change this behavior.
|
|
*
|
|
* You can also limit the width and/or height to be multiples of a particular size by
|
|
* setting Part#resizeCellSize.
|
|
* If either or both of these values are NaN, as they are by default,
|
|
* it will get the values from this tool's #cellSize.
|
|
* Finally it will consider the Diagram#grid's Panel#gridCellSize
|
|
* if #isGridSnapEnabled is true.
|
|
* Override #computeCellSize to change this behavior.
|
|
*
|
|
* Pressing the Shift key or resizing a Shape with a Shape#geometryStretch of
|
|
* GraphObject.Uniform will maintain the aspect ratio during the resize.
|
|
* Override #computeReshape to change this behavior.
|
|
*
|
|
* This tool makes use of an Adornment, shown when the Part or Node is selected,
|
|
* that includes some number of resize handles.
|
|
* The resize handles are normally copies of ResizingTool#handleArchetype,
|
|
* unless you specify a custom resize Adornment by setting Part#resizeAdornmentTemplate.
|
|
* The resize Adornment is normally a "Spot" Panel with eight resize handles,
|
|
* each with GraphObject#alignment set to one of the eight standard Spot values --
|
|
* the four corners and the four side middles.
|
|
* The GraphObject#alignment is what identifies and distinguishes each of the handles and
|
|
* the behavior when the user drags the handle.
|
|
*
|
|
* This tool conducts a transaction while the tool is active.
|
|
* A successful resizing will result in a "PartResized" DiagramEvent and a "Resizing" transaction.
|
|
* <p class="boxread">
|
|
* For a general discussion of the sizing of objects, see: <a href="../../intro/sizing.html">Introduction to the sizing of GraphObjects</a>.
|
|
* For customizing the ResizingTool, see <a href="../../intro/tools.html#ResizingTool">Introduction to the ResizingTool</a>.
|
|
*
|
|
* If you want to programmatically start a user's resizing of the Part#resizeObject of an existing selected node,
|
|
* you can set the #handle property to the specific resize handle and then start and activate the tool.
|
|
* ```js
|
|
* var node = ...;
|
|
* myDiagram.select(node);
|
|
* var adorn = node.findAdornment("Resizing");
|
|
* var tool = myDiagram.toolManager.resizingTool;
|
|
* // specify which resize handle of the "Resizing" Adornment of the selected node
|
|
* tool.handle = adorn.elt(...);
|
|
* myDiagram.currentTool = tool; // starts the ResizingTool
|
|
* tool.doActivate(); // activates the ResizingTool
|
|
* ```
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class ResizingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#resizingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "Resizing".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Show an Adornment with the resize handles at points along the edge of the bounds of the
|
|
* selected Part's Part#resizeObject.
|
|
*
|
|
* First this finds the object in the visual tree of the Part that should
|
|
* get the resize adornment and that the user will be able to resize interactively.
|
|
* It finds the object that has the Part#resizeObjectName property of the Part.
|
|
* If the Part#resizeObjectName property is an empty string, as it is by default,
|
|
* it uses the whole part.
|
|
*
|
|
* It then builds the adornment, associating it with the chosen resize object.
|
|
* If Part#resizeAdornmentTemplate is non-null, it is copied.
|
|
* Otherwise it constructs a new Adornment with a Placeholder and eight copies of #handleArchetype,
|
|
* four at the corners and four at the middle of each side.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Part} part
|
|
*/
|
|
updateAdornments(part: Part): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} resizeObj the GraphObject being resized.
|
|
* @return {Adornment}
|
|
*/
|
|
makeAdornment(resizeObj: GraphObject): Adornment;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} elt
|
|
* @param {number} angle
|
|
*/
|
|
updateResizeHandles(elt: GraphObject, angle: number): void;
|
|
/**
|
|
* Gets or sets a small GraphObject that is copied as a resizing handle for the selected part.
|
|
* By default this is a Shape that is a small blue rectangle.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the default handle to be larger yellow circles:
|
|
* ```js
|
|
* myDiagram.toolManager.resizingTool.handleArchetype =
|
|
* $(go.Shape, "Circle",
|
|
* { width: 10, height: 10, fill: "yellow" });
|
|
* ```
|
|
*
|
|
* This property is ignored when a custom resizing Adornment is specified as the Part#resizeAdornmentTemplate.
|
|
* That property is normally null, in which case this tool will automatically construct Adornments
|
|
* holding eight copies of this handle archetype, each with a GraphObject#alignment being one of the
|
|
* standard eight Spots.
|
|
*/
|
|
handleArchetype: GraphObject | null;
|
|
/**
|
|
* Returns the GraphObject that is the tool handle being dragged by the user.
|
|
* This will be contained by an Adornment whose category is "ResizingTool".
|
|
* Its Adornment#adornedObject is the same as the #adornedObject.
|
|
* This is normally set by #doActivate, remembering the result of the call to Tool#findToolHandleAt.
|
|
*
|
|
* This property is also settable, but should only be set either within an override of #doActivate
|
|
* or prior to calling #doActivate.
|
|
*/
|
|
handle: GraphObject | null;
|
|
/**
|
|
* Gets the GraphObject that is being resized.
|
|
* This may be the same object as the selected Part or it may be contained within that Part.
|
|
*
|
|
* This property is also settable, but should only be set when overriding functions
|
|
* in ResizingTool, and not during normal operation.
|
|
*/
|
|
adornedObject: GraphObject | null;
|
|
/**
|
|
* This tool may run when there is a mouse-down event on a resize handle,
|
|
* the diagram is not read-only and it allows resizing,
|
|
* the left mouse button is being used,
|
|
* and this tool's adornment's resize handle is at the current mouse point.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Find the #handle, remember the object's original bounds,
|
|
* save the results of calling #computeMinSize, #computeMaxSize, and #computeCellSize,
|
|
* capture the mouse, and start a transaction.
|
|
*
|
|
* Normally when this method is called the value of #handle will be null,
|
|
* resulting in a call to Tool#findToolHandleAt to find a "Resizing" tool handle,
|
|
* which is then remembered as the value of #handle.
|
|
* If when this method is called the value of #handle is already set,
|
|
* then there is no need to call Tool#findToolHandleAt,
|
|
* because the programmer has already set up which resize handle they want the user to be resizing.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Stop the current transaction, forget the #handle and #adornedObject, and release the mouse.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* Restore the original size of the GraphObject.
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* Call #resize with a new size determined by the current mouse point.
|
|
* This determines the new bounds by calling #computeResize.
|
|
*
|
|
* When this calls #computeResize it passes as the reshape argument the result of calling #computeReshape.
|
|
* The min, max, and cell arguments will be the saved results of #doActivate's calls to #computeMinSize, #computeMaxSize, and #computeCellSize.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Call #resize with the final bounds based on the most recent mouse point,
|
|
* commit the transaction, and raise the "PartResized" DiagramEvent.
|
|
* This determines the new bounds by calling #computeResize.
|
|
*
|
|
* When this calls #computeResize it passes as the reshape argument the result of calling #computeReshape.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Change the size of the selected part's Part#resizeObject to have the given bounds.
|
|
* This modifies its GraphObject#desiredSize and maybe its Part#location.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Rect} newr a Rectangle in the #adornedObject's local coordinates, not in document coordinates
|
|
*/
|
|
resize(newr: Rect): void;
|
|
/**
|
|
* Given a Spot in the original bounds of the object being resized and a new Point,
|
|
* compute the new Rect.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} newPoint a Point in local coordinates.
|
|
* @param {Spot} spot the alignment spot of the handle being dragged.
|
|
* @param {Size} min the result of the call to #computeMinSize.
|
|
* @param {Size} max the result of the call to #computeMaxSize.
|
|
* @param {Size} cell the result of the call to #computeCellSize.
|
|
* @param {boolean} reshape true if the new size may change the aspect ratio from that of the natural bounds of the #adornedObject.
|
|
* @return {Rect} a Rectangle in the #adornedObject's local coordinates, not in document coordinates
|
|
*/
|
|
computeResize(newPoint: Point, spot: Spot, min: Size, max: Size, cell: Size, reshape: boolean): Rect;
|
|
/**
|
|
* Decide whether to allow arbitrary reshaping or whether to keep the same aspect ratio of the object being resized.
|
|
* If the #adornedObject is a Shape,
|
|
* then if the Shape#geometryStretch is GraphObject.Uniform,
|
|
* this method will return false to restrict reshaping to maintain the object's current ratio of height to width.
|
|
* Also, if the user is holding down the Shift key, this method will return false.
|
|
*
|
|
* This is called on each mouse-move and on mouse-up; the result is passed to the call to #resize.
|
|
* This permits the user to change the behavior dynamically during resizing.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* For example, to always keep the object's original aspect ratio, override this method to return false.
|
|
* When calling GraphObject.make to initialize a Diagram:
|
|
* ```js
|
|
* $(go.Diagram, . . .,
|
|
* {
|
|
* "resizingTool.computeReshape": function() { return false; },
|
|
* . . . })
|
|
* ```
|
|
* Or when overriding the method dynamically:
|
|
* ```js
|
|
* myDiagram.toolManager.resizingTool.computeReshape = function() { return false; }
|
|
* ```
|
|
* Your override might want to look at the `this.adornedObject.part.data` properties to decide whether to allow reshaping.
|
|
* @expose
|
|
* @return {boolean} true to allow any aspect ratio; false to preserve the #adornedObject's height/width ratio
|
|
* @since 1.7
|
|
*/
|
|
computeReshape(): boolean;
|
|
/**
|
|
* The effective minimum resizing size is the maximum of #minSize and the
|
|
* #adornedObject's GraphObject#minSize.
|
|
*
|
|
* This is called once when the tool is activated.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Size}
|
|
*/
|
|
computeMinSize(): Size;
|
|
/**
|
|
* The effective maximum resizing size is the minimum of the #maxSize and the
|
|
* #adornedObject's GraphObject#maxSize.
|
|
*
|
|
* This is called once when the tool is activated.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Size}
|
|
*/
|
|
computeMaxSize(): Size;
|
|
/**
|
|
* The size should be a multiple of the value returned by this method.
|
|
*
|
|
* This is called once when the tool is activated.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Size}
|
|
*/
|
|
computeCellSize(): Size;
|
|
/**
|
|
* Gets or sets the minimum size to which the user can resize.
|
|
* The effective minimum size is the maximum of this value and the GraphObject#minSize,
|
|
* independently in each direction.
|
|
*
|
|
* The default value is `go.Size(1, 1)`.
|
|
* Any new value must be of type Size; `NaN` width or height values are treated as zero.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
minSize: Size;
|
|
/**
|
|
* Gets or sets the maximum size to which the user can resize.
|
|
* The effective maximum size is the minimum of this value and the GraphObject#maxSize,
|
|
* independently in each direction.
|
|
*
|
|
* The default value is `go.Size(9999, 9999)`.
|
|
* Any new value must be of type Size; `NaN` width or height values are treated as Infinity.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
maxSize: Size;
|
|
/**
|
|
* Gets or sets the width and height multiples with which the user must resize.
|
|
* The effective cell size is computed by first looking at the Adornment#adornedPart's Part#resizeCellSize.
|
|
* If either or both of its width and height are `NaN`, it will use this property, `cellSize`.
|
|
* If either or both of this property's width and height are `NaN`, it will
|
|
* consider the Diagram#grid's Panel#gridCellSize.
|
|
*
|
|
* The default value is `go.Size(NaN, NaN)`.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
cellSize: Size;
|
|
/**
|
|
* Gets or sets whether the ResizingTool snaps object sizes to the diagram's background grid during the resize.
|
|
* By default this property is false.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
isGridSnapEnabled: boolean;
|
|
/**
|
|
* Gets or sets whether the ResizingTool moves the member Parts of a Group that has no Group#placeholder.
|
|
* By default this property is true.
|
|
* Setting this property does not raise any events.
|
|
* @since 2.1.26
|
|
*/
|
|
dragsMembers: boolean;
|
|
/**
|
|
* Undocumented.
|
|
* Gets the Point opposite to the chosen, dragged handle of the "Resizing" Adornment.
|
|
* This property has no meaning until after #doActivate has been called.
|
|
*/
|
|
oppositePoint: Point;
|
|
/**
|
|
* This read-only property returns the Size that was the original value of the GraphObject#desiredSize
|
|
* of the element that is being resized.
|
|
* @since 1.1
|
|
*/
|
|
readonly originalDesiredSize: Size;
|
|
/**
|
|
* This read-only property returns the Point that was the original value of the Part#location
|
|
* of the Part that is being resized.
|
|
* @since 1.1
|
|
*/
|
|
readonly originalLocation: Point;
|
|
}
|
|
/**
|
|
* The RotatingTool is used to interactively change the GraphObject#angle of a GraphObject
|
|
* by setting its GraphObject#angle property.
|
|
* You may want to save the angle to the model by using a TwoWay Binding on the "angle" property
|
|
* of the GraphObject that is named by Part#rotateObjectName.
|
|
*
|
|
* This tool allows the user to rotate the Part#rotateObject of the selected Part.
|
|
* The Part must be Part#rotatable, which is false by default.
|
|
* Normally this works with Parts or Nodes; it does not make sense for whole Links
|
|
* or Link#paths, so if you want to rotate a label on a Link, make sure to name that label
|
|
* and refer to it as the Part#rotateObjectName.
|
|
*
|
|
* You can control the point about which the object is rotated by setting Part#rotationSpot.
|
|
* The rotation spot can be computed dynamically by overriding #computeRotationPoint.
|
|
* The value of that method call is saved as #rotationPoint.
|
|
*
|
|
* You can limit the permitted angles by setting #snapAngleMultiple and #snapAngleEpsilon.
|
|
* For example, if you want to permit only angles that are multiples of 90 degrees,
|
|
* set #snapAngleMultiple to 90 and #snapAngleEpsilon to 45.
|
|
* Pressing the Shift key during rotation ignores these two properties.
|
|
*
|
|
* This tool makes use of an Adornment that includes a rotation handle.
|
|
* It is shown when the selected Part is Part#rotatable.
|
|
* You can control its direction relative to the #rotationPoint
|
|
* by setting #handleAngle to a multiple of 90 degrees,
|
|
* and its distance from the rotation point by setting #handleDistance.
|
|
* The rotate handle is normally a copy of RotatingTool#handleArchetype.
|
|
* unless you specify a custom rotate Adornment by setting Part#rotateAdornmentTemplate.
|
|
*
|
|
* This tool conducts a transaction while the tool is active.
|
|
* A successful rotation will result in a "PartRotated" DiagramEvent and a "Rotating" transaction.
|
|
* <p class="boxread">
|
|
* For customizing the RotatingTool, see <a href="../../intro/tools.html#RotatingTool">Introduction to the RotatingTool</a>.
|
|
*
|
|
* If you want to programmatically start a user's rotating of the Part#rotateObject of an existing selected node,
|
|
* you can set the #handle property to the rotate handle and then start and activate the tool.
|
|
* ```js
|
|
* var node = ...;
|
|
* myDiagram.select(node);
|
|
* var adorn = node.findAdornment("Rotating");
|
|
* var tool = myDiagram.toolManager.rotatingTool;
|
|
* // specify the rotation handle of the "Rotating" Adornment of the selected node
|
|
* tool.handle = adorn.elt(0);
|
|
* myDiagram.currentTool = tool; // starts the RotatingTool
|
|
* tool.doActivate(); // activates the RotatingTool
|
|
* ```
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class RotatingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#rotatingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "Rotating".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Show an Adornment with a rotate handle at a point to the side of the adorned object
|
|
* if the part is selected and visible and if Part#canRotate() is true.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Part} part the part.
|
|
*/
|
|
updateAdornments(part: Part): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {GraphObject} rotateObj the GraphObject being rotated.
|
|
* @return {Adornment}
|
|
*/
|
|
makeAdornment(rotateObj: GraphObject): Adornment;
|
|
/**
|
|
* Gets or sets a small GraphObject that is copied as a rotation handle for the selected part.
|
|
* By default this is a Shape that is a small yellow circle.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the default handle to be green "X":
|
|
* ```js
|
|
* myDiagram.toolManager.rotatingTool.handleArchetype =
|
|
* $(go.Shape, "XLine",
|
|
* { width: 8, height: 8, stroke: "green", fill: "transparent" });
|
|
* ```
|
|
*
|
|
* This property is ignored when a custom rotating Adornment is specified as the Part#rotateAdornmentTemplate.
|
|
*/
|
|
handleArchetype: GraphObject | null;
|
|
/**
|
|
* This read-only property returns the GraphObject that is the tool handle being dragged by the user.
|
|
* This will be contained by an Adornment whose category is "RotatingTool".
|
|
* Its Adornment#adornedObject is the same as the #adornedObject.
|
|
*
|
|
* This property is also settable, but should only be set either within an override of #doActivate
|
|
* or prior to calling #doActivate.
|
|
*/
|
|
handle: GraphObject | null;
|
|
/**
|
|
* Gets the GraphObject that is being rotated.
|
|
* This may be the same object as the selected Part or it may be contained within that Part.
|
|
*
|
|
* This property is also settable, but should only be set when overriding functions
|
|
* in RotatingTool, and not during normal operation.
|
|
*/
|
|
adornedObject: GraphObject | null;
|
|
/**
|
|
* This tool may run when there is a mouse-down event on a rotate handle,
|
|
* the diagram is not read-only and it allows rotation,
|
|
* the left mouse button is being used,
|
|
* and this tool's adornment's rotate handle is at the current mouse point.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Capture the mouse, remember the original GraphObject#angle,
|
|
* and start a transaction.
|
|
*
|
|
* Normally when this method is called the value of #handle will be null,
|
|
* resulting in a call to Tool#findToolHandleAt to find a "Rotating" tool handle,
|
|
* which is then remembered as the value of #handle.
|
|
* If when this method is called the value of #handle is already set,
|
|
* then there is no need to call Tool#findToolHandleAt,
|
|
* because the programmer has already set up which rotate handle they want the user to be rotating.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Compute the Point about which things should rotate.
|
|
* This is called when this tool is activated and sometimes when updating the Adornment.
|
|
* The value of the call is remembered as #rotationPoint.
|
|
* @expose
|
|
* @param {GraphObject} obj the Part#rotateObject
|
|
* @return {Point}
|
|
*/
|
|
computeRotationPoint(obj: GraphObject): Point;
|
|
/**
|
|
* Stop the current transaction, forget the #handle and #adornedObject, and release the mouse.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* Restore the original GraphObject#angle of the adorned object.
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* Call #rotate with a new angle determined by the current mouse point.
|
|
* This determines the new angle by calling #computeRotate.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Call #rotate with an angle based on the most recent mouse point,
|
|
* commit the transaction, and raise the "PartRotated" DiagramEvent.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Change the angle of the selected part's Part#rotateObject.
|
|
* This modifies its GraphObject#angle.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number} newangle in degrees.
|
|
*/
|
|
rotate(newangle: number): void;
|
|
/**
|
|
* Compute the new angle given a point.
|
|
* If the Shift key is pressed, this method ignores the #snapAngleMultiple and #snapAngleEpsilon.
|
|
*
|
|
* If the angle is close (by #snapAngleEpsilon degrees)
|
|
* to a multiple of #snapAngleMultiple degrees,
|
|
* make it exactly that multiple.
|
|
*
|
|
* This method is called by both #doMouseMove and #doMouseUp.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} newPoint in document coordinates.
|
|
* @return {number} the new angle, in degrees.
|
|
*/
|
|
computeRotate(newPoint: Point): number;
|
|
/**
|
|
* Gets or sets the preferred angles for the selected object.
|
|
*
|
|
* The default value is 45 degrees, meaning that angles that are multiples
|
|
* of 45 degrees are automatically preferred, if the actual angle is
|
|
* close to that multiple.
|
|
* The closeness is determined by the #snapAngleEpsilon property.
|
|
* A value of zero for #snapAngleMultiple results in no snapping at all.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
snapAngleMultiple: number;
|
|
/**
|
|
* Gets or sets the the closeness to a desired angle at which the angle is "snapped to".
|
|
*
|
|
* The default value is 2 degrees, meaning that any angle within 2 degrees
|
|
* of a multiple of the #snapAngleMultiple automatically
|
|
* snaps to that multiple.
|
|
* Values are limited to half of the #snapAngleMultiple;
|
|
* such values restrict user selected angles only to exact multiples of
|
|
* #snapAngleMultiple -- no other angles between them.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
snapAngleEpsilon: number;
|
|
/**
|
|
* This read-only property returns the angle that was the original value of the GraphObject#angle
|
|
* of the GraphObject that is being rotated.
|
|
* The value is invalid when this tool is not active.
|
|
* @since 1.1
|
|
*/
|
|
readonly originalAngle: number;
|
|
/**
|
|
* This read-only property returns the value returned by the call to #computeRotationPoint.
|
|
* The value is invalid when this tool is not active.
|
|
* @since 2.0
|
|
*/
|
|
readonly rotationPoint: Point;
|
|
/**
|
|
* Gets or sets the spot to locate the Adornment for the rotation handle when it does not have a Placeholder.
|
|
* This assumes the Adornment's location will be at the center of the rotation handle.
|
|
*
|
|
* By default this is zero degrees, which locates the Adornment
|
|
* so that it is placed to the right of an un-rotated object.
|
|
* You can set this to a multiple of 90 degrees to position the rotation handle differently
|
|
* with respect to the #rotationPoint.
|
|
* @since 2.0
|
|
*/
|
|
handleAngle: number;
|
|
/**
|
|
* Gets or sets the spot to locate the Adornment at a particular distance from the #adornedObject.
|
|
* This assumes the Adornment's location will be at the center of the rotation handle.
|
|
*
|
|
* By default this is 50, which locates the Adornment
|
|
* so that it is placed to the right of an un-rotated object.
|
|
* @since 2.0
|
|
*/
|
|
handleDistance: number;
|
|
}
|
|
/**
|
|
* The ClickSelectingTool selects and deselects Parts when there is a click.
|
|
* It does this by calling Tool#standardMouseSelect.
|
|
* It is also responsible for handling and dispatching click events on GraphObjects
|
|
* by calling Tool#standardMouseClick.
|
|
*
|
|
* Note that this tool avoids raising click events on objects that are in temporary layers.
|
|
* This is to prevent parts such as selection adornments from interfering with clicking on selected nodes or links.
|
|
* (Adornments are in the "Adornment" Layer, which Layer#isTemporary.)
|
|
* However this means that if you add a GraphObject#click event handler on a GraphObject in an Adornment,
|
|
* it will not be called.
|
|
* You can get it to be called by setting GraphObject#isActionable to true on that object in the adornment.
|
|
*
|
|
* This tool is a standard mouse-up tool, the ToolManager#clickSelectingTool.
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles.
|
|
* This tool does not modify the model or conduct any transaction.
|
|
*
|
|
* An example customization of this tool is shown in the <a href="../../extensions/TreeMap.html">Tree Map</a> sample,
|
|
* where the Tool#standardMouseSelect method is overridden to permit the user to cycle through
|
|
* the chain of containing groups, changing the selection on each click to the next containing group.
|
|
*
|
|
* If you want to programmatically select a Part, you can set Part#isSelected or call Diagram#select.
|
|
* If you want to know which Part is at a particular point, you can call Diagram#findPartAt.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class ClickSelectingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#clickSelectingTool.
|
|
*
|
|
* The Tool#name of this tool is "ClickSelecting".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This tool can run whenever a click occurs.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Upon a click, this calls Tool#standardMouseSelect to change the Diagram#selection collection,
|
|
* then calls Tool#standardMouseClick to perform the normal click behaviors,
|
|
* and then stops this tool.
|
|
*/
|
|
doMouseUp(): void;
|
|
}
|
|
/**
|
|
* The ActionTool is responsible for handling and dispatching mouse events on GraphObjects
|
|
* that have GraphObject#isActionable set to true.
|
|
* This is how one implements "controls", such as buttons or sliders or knobs, as GraphObjects
|
|
* that can be inside Parts without interfering with the standard tool behaviors.
|
|
*
|
|
* This tool allows individual GraphObjects (usually Panels) to handle mouse-down-move-up events without
|
|
* having to define new Tools.
|
|
* It does this by calling GraphObject#actionDown, GraphObject#actionMove, GraphObject#actionUp,
|
|
* and GraphObject#actionCancel on objects that have GraphObject#isActionable set to true.
|
|
*
|
|
* This tool is a standard mouse-down tool, the ToolManager#actionTool.
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles.
|
|
* This tool does not modify the model or conduct any transaction, although the actions that this invokes may do so.
|
|
*
|
|
* It would be very unusual to want to customize this tool.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class ActionTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#actionTool.
|
|
*
|
|
* The Tool#name of this tool is "Action".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This tool can run when there is a mouse-down on an object with GraphObject#isActionable true
|
|
* or if the object is within a Panel that "isActionable".
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* If there is a GraphObject found with GraphObject#isActionable set to true,
|
|
* call that object's GraphObject#actionDown event, if it exists.
|
|
*/
|
|
doMouseDown(): void;
|
|
/**
|
|
* If this tool is active call GraphObject#actionMove, if it exists, on the active object.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Calls the GraphObject#actionUp event if defined, then effectively calls
|
|
* Tool#standardMouseClick to perform the normal click behaviors,
|
|
* and then stops this tool.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Call the GraphObject#actionCancel event if defined on the current object.
|
|
*/
|
|
doCancel(): void;
|
|
}
|
|
/**
|
|
* The ClickCreatingTool lets the user create a node by clicking where they want the new node to be.
|
|
* By default a double-click is required to start this tool;
|
|
* set #isDoubleClick to false if you want a single-click to create a node.
|
|
*
|
|
* This tool is a standard mouse-up tool, the ToolManager#clickCreatingTool.
|
|
* However, it will not be able to start running unless you have set the
|
|
* #archetypeNodeData property to an object that can be copied and added to the diagram's model.
|
|
*
|
|
* If you set #isGridSnapEnabled to true, newly created parts will be snapped to points on a grid.
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles.
|
|
* This tool does conduct a transaction when inserting the new node.
|
|
*
|
|
* If you want to programmatically create a Part, you can call #insertPart.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class ClickCreatingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#clickCreatingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "ClickCreating".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This tool can run when the diagram is not read-only and supports creating new nodes,
|
|
* and when there has been a click (or double-click if #isDoubleClick is true)
|
|
* in the background of the diagram (not on a Part),
|
|
* and #archetypeNodeData is an object that can be copied and added to the model.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Upon a click, call #insertPart and stop this tool.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Create a node by adding a copy of the #archetypeNodeData object
|
|
* to the diagram's model, assign its Part#location
|
|
* to be the given point, and select the new part.
|
|
*
|
|
* This starts and commits a transaction and also raises the "PartCreated" DiagramEvent.
|
|
* The actual part that is added to the diagram may be a Part, a Node,
|
|
* or even a Group, depending on the properties of the #archetypeNodeData
|
|
* and the type of the template that is copied to create the part.
|
|
*
|
|
* This method also raises the "ChangingSelection" and "ChangedSelection" diagram events outside the transaction.
|
|
*
|
|
* This method may be overridden, although it is usually much easier to just set #archetypeNodeData.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point} loc a Point in document coordinates.
|
|
* @return {Part} the newly created Part, or null if it failed.
|
|
*/
|
|
insertPart(loc: Point): Part;
|
|
/**
|
|
* Gets or sets a data object that will be copied and added to the diagram's model each time this tool executes.
|
|
* The default value is null.
|
|
* The value must be non-null for this tool to be able to run.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
archetypeNodeData: ObjectData | null;
|
|
/**
|
|
* Gets or sets whether a double click rather than a single-click is required
|
|
* to insert a new Part at the mouse-up point.
|
|
* The default value is true -- only a double-click will cause a node to be created.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
isDoubleClick: boolean;
|
|
/**
|
|
* Gets or sets whether the ClickCreatingTool snaps object sizes to the diagram's background grid during creation.
|
|
* By default this property is false.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* @since 2.0
|
|
*/
|
|
isGridSnapEnabled: boolean;
|
|
}
|
|
/**
|
|
* The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user.
|
|
* There is a temporary part, the #box,
|
|
* that shows the current area encompassed between the mouse-down
|
|
* point and the current mouse point.
|
|
* The default drag selection box is a magenta rectangle.
|
|
* You can change the #box to customize its appearance -- see its documentation for an example.
|
|
*
|
|
* This tool is a standard mouse-move tool, the ToolManager#dragSelectingTool.
|
|
* However this cannot start running unless there has been a motionless delay
|
|
* after the mouse-down event of at least #delay milliseconds.
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles,
|
|
* but it does temporarily add the #box part to the diagram.
|
|
* This tool does not modify the model or conduct any transaction.
|
|
*
|
|
* Selection occurs on a mouse-up when it calls #selectInRect
|
|
* with the value of #computeBoxBounds.
|
|
* Selectable parts are selected when their bounds fall entirely within the rectangle,
|
|
* unless #isPartialInclusion is set to true.
|
|
* <p class="boxread">
|
|
* For customizing the DragSelectingTool, see <a href="../../intro/tools.html#DragSelectingTool">Introduction to the DragSelectingTool</a>.
|
|
*
|
|
* If you implement your own drag-in-the-background-to-do-something tool, you may need to disable
|
|
* this tool or insert your new tool in the ToolManager#mouseMoveTools list before this tool,
|
|
* in order for your tool to run. There are examples of such tools defined in the extensions directory:
|
|
* <a href="../../extensions/RealtimeDragSelecting.html">Realtime Drag Selecting Tool</a>,
|
|
* <a href="../../extensions/DragCreating.html">Drag Creating Tool</a>, and
|
|
* <a href="../../extensions/DragZooming.html">Drag Zooming Tool</a>.
|
|
*
|
|
* If you want to programmatically select some Parts in a rectangular area,
|
|
* you can call #selectInRect.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class DragSelectingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#dragSelectingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "DragSelecting".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This tool can run when the diagram allows selection,
|
|
* there has been delay of at least #delay milliseconds
|
|
* after the mouse-down before a mouse-move,
|
|
* there has been a mouse-drag far enough away not to be a click,
|
|
* and there is no selectable part at the mouse-down point.
|
|
*
|
|
* The delay required to start this tool enables both this tool and
|
|
* the ToolManager#panningTool to co-exist as mode-less mouse-move tools.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Capture the mouse and show the #box.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Release the mouse and remove any #box.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* Update the #box's position and size according to the value
|
|
* of #computeBoxBounds.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Call #selectInRect with the value of a call to #computeBoxBounds.
|
|
*
|
|
* This method changes the cursor to "wait" and
|
|
* raises the "ChangingSelection" DiagramEvent before calling #selectInRect,
|
|
* and raises the "ChangedSelection" DiagramEvent afterward.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* This just returns a Rect stretching from the mouse-down point to the current mouse point.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Rect} a Rect in document coordinates.
|
|
*/
|
|
computeBoxBounds(): Rect;
|
|
/**
|
|
* This method is called to select some parts within the area of a given rectangle.
|
|
*
|
|
* The normal behavior is to set the diagram's selection collection to only those parts
|
|
* in the given rectangle according to the #isPartialInclusion policy.
|
|
* However, if the Shift key modifier is used, no parts are deselected --
|
|
* this adds to the selection the parts in the rectangle not already selected.
|
|
* If the Control key (Command on Mac) modifier is used, this toggles the selectedness of the parts in the rectangle.
|
|
* If the Control key (Command on Mac) and Shift key modifiers are both used, this deselects the parts in the rectangle.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Rect} r a rectangular bounds in document coordinates.
|
|
*/
|
|
selectInRect(r: Rect): void;
|
|
/**
|
|
* Gets or sets the time in milliseconds for which the mouse must be stationary
|
|
* before this tool can be started.
|
|
* The default value is 175 milliseconds.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
delay: number;
|
|
/**
|
|
* Gets or sets whether a selectable Part may be only partly
|
|
* or must be completely enclosed by the rectangle given to #selectInRect.
|
|
* The default value is false: parts must be completely inside the rectangle.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
isPartialInclusion: boolean;
|
|
/**
|
|
* Gets or sets the Part used as the "rubber-band selection box"
|
|
* that is stretched to follow the mouse, as feedback for what area will
|
|
* be passed to #selectInRect upon a mouse-up.
|
|
*
|
|
* Initially this is a Part containing only a simple magenta rectangular Shape.
|
|
* The object to be resized during dragging should be named "SHAPE".
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* Here is an example of changing the selection box to be a thicker bright green rectangle:
|
|
* ```js
|
|
* myDiagram.toolManager.dragSelectingTool.box =
|
|
* $(go.Part,
|
|
* { layerName: "Tool", selectable: false },
|
|
* $(go.Shape,
|
|
* { name: "SHAPE", fill: null, stroke: "chartreuse", strokeWidth: 3 }));
|
|
* ```
|
|
* Note that the Part should be put into a Layer that Layer#isTemporary.
|
|
*
|
|
* Modifying this property while this tool Tool#isActive might have no effect.
|
|
*/
|
|
box: Part | null;
|
|
}
|
|
/**
|
|
* The PanningTool supports manual panning, where the user can shift the
|
|
* Diagram#position by dragging the mouse.
|
|
*
|
|
* This tool is a standard mouse-move tool, the ToolManager#panningTool.
|
|
* Although the ToolManager#dragSelectingTool takes precedence over this tool,
|
|
* the DragSelectingTool only starts if there is a delay after a mouse-down event.
|
|
* If it does not start, then this PanningTool gets a chance to start.
|
|
*
|
|
* This tool does not utilize any Adornments or tool handles.
|
|
* This tool does not modify the model or conduct any transaction.
|
|
*
|
|
* If you want to programmatically "pan" the diagram, you can just set Diagram#position
|
|
* or call methods such as Diagram#scroll, Diagram#scrollToRect, or Diagram#centerRect.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class PanningTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#panningTool.
|
|
*
|
|
* The Tool#name of this tool is "Panning".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This tool can run when the diagram allows scrolling and
|
|
* the mouse has been dragged with the left button far enough away
|
|
* from the mouse-down point to avoid being a click.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Capture the mouse, change the diagram cursor to "move", and remember the Diagram#position.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Release the mouse and restore the default diagram cursor.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* Restore the Diagram#position to what it was when this tool activated.
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* Modify the Diagram#position according to how much the mouse has moved.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Modify the Diagram#position according to how much the mouse has moved.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Gets or sets whether panning actions will allow
|
|
* events to bubble **instead** of panning in the diagram.
|
|
*
|
|
* Set this to true to allow mobile devices to scroll the page with panning gestures on the diagram.
|
|
* Otherwise, the panning events will be captured and used to pan inside of the diagram.
|
|
*
|
|
* The default value is false.
|
|
*/
|
|
bubbles: boolean;
|
|
/**
|
|
* This read-only property returns the Point that was the original value of Diagram#position when the panning operation started.
|
|
* @since 1.1
|
|
*/
|
|
readonly originalPosition: Point;
|
|
}
|
|
/**
|
|
* HTMLInfo is used to show and hide custom HTML page elements, such as a context menu, tooltip, or text editor made of HTML.
|
|
*
|
|
* Properties that can be set to an HTMLInfo include:
|
|
* - TextEditingTool#defaultTextEditor
|
|
* - TextBlock#textEditor
|
|
* - GraphObject#contextMenu
|
|
* - Diagram#contextMenu
|
|
* - GraphObject#toolTip
|
|
* - Diagram#toolTip
|
|
*
|
|
* When a context menu is set to an instance of HTMLInfo,
|
|
* ContextMenuTool#showContextMenu and ContextMenuTool#hideContextMenu
|
|
* call #show and #hide respectively. You may define #mainElement
|
|
* instead of #hide in order to automatically use a default hide method.
|
|
*
|
|
* When a tooltip is set to an instance of HTMLInfo,
|
|
* ToolManager#showToolTip and ToolManager#hideToolTip
|
|
* call #show and #hide respectively.
|
|
*
|
|
* When a text editor is set to an instance of HTMLInfo,
|
|
* TextEditingTool#doActivate calls #show and TextEditingTool#doDeactivate calls #hide.
|
|
*
|
|
* For HTMLInfo to work, you must define #show
|
|
* and either #hide or #mainElement.
|
|
* Typical usage will also stop the ContextMenuTool once the desired context action occurs,
|
|
* typically by calling `diagram.currentTool.stopTool();`.
|
|
*
|
|
* Example usage of HTMLInfo can be found in the
|
|
* <a href="../../samples/customContextMenu.html">Custom Context Menu</a> and
|
|
* <a href="../../samples/htmlLightBoxContextMenu.html">HTML LightBox Context Menu</a> samples, the
|
|
* <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool sample</a>, and the
|
|
* <a href="../../extensions/TextEditor.html">Text Editor implementation extension</a>.
|
|
*
|
|
* Here is the outline for typical usage of HTMLInfo as a context menu:
|
|
* ```js
|
|
* // Assign an HTMLInfo to the Diagram:
|
|
* myDiagram.contextMenu = $(go.HTMLInfo, {
|
|
* show: showContextMenu,
|
|
* hide: hideContextMenu
|
|
* });
|
|
*
|
|
* function showContextMenu(obj, diagram, tool) {
|
|
* // Show the context menu HTML element:
|
|
* SomeDOMElement.style.display = "block";
|
|
*
|
|
* // Also show relevant buttons given the current state
|
|
* // and the GraphObject obj; if null, the context menu is for the whole Diagram
|
|
* }
|
|
*
|
|
* function hideContextMenu() {
|
|
* SomeDOMElement.style.display = "none";
|
|
* }
|
|
*
|
|
* function buttonClick() {
|
|
* // do some action when a context menu button is clicked
|
|
*
|
|
* // then:
|
|
* myDiagram.currentTool.stopTool();
|
|
* }
|
|
* ```
|
|
*
|
|
* By default, TextEditingTool#defaultTextEditor is an instance of HTMLInfo.
|
|
* You can see its default implementation details <a href="../../extensions/TextEditor.html">here</a>.
|
|
* @unrestricted
|
|
* @since 1.7
|
|
* @category Tool
|
|
*/
|
|
export class HTMLInfo {
|
|
/**
|
|
* A newly constructed HTMLInfo can be assigned as a value of TextEditingTool#defaultTextEditor, TextBlock#textEditor
|
|
* GraphObject#contextMenu, Diagram#contextMenu, GraphObject#toolTip, or Diagram#toolTip.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Gets or sets the primary HTML Element that represents this HTMLInfo.
|
|
* In a context menu, this would be the outermost HTML element, the one which typically
|
|
* shows and hides. If this is set and #hide is not, HTMLInfo will automatically execute:
|
|
* ```js
|
|
* tool.mainElement.style.display = "none";
|
|
* ```
|
|
*
|
|
* when #hide would typically be called.
|
|
*
|
|
* This is set only for convenience; the default value for this property is null.
|
|
* @see #hide
|
|
*/
|
|
mainElement: HTMLElement | null;
|
|
/**
|
|
* Gets or sets the function to call when an HTMLInfo is to be shown,
|
|
* such as when used as the GraphObject#contextMenu or Diagram#toolTip or TextBlock#textEditor.
|
|
*
|
|
* If this is called by:
|
|
* - ContextMenuTool#showContextMenu, the first argument is the GraphObject for which the context menu is being shown, or null for the diagram background.
|
|
* - ToolManager#showToolTip, the first argument is the GraphObject for which the tooltip is being shown, or null for the diagram background.
|
|
* - TextEditingTool#doActivate, the first argument is the TextBlock for which the text editor is being shown.
|
|
*
|
|
* If you need access to any bound data for the first argument, if it is non-null, you can get it via:
|
|
* `obj.part.data`
|
|
* and then you can look at any of the properties you have put on that data.
|
|
*
|
|
* When used as a context menu, typically shown elements, such as buttons, should call
|
|
* `diagram.currentTool.stopTool();` when their action is completed.
|
|
*/
|
|
show: ((a: GraphObject, b: Diagram, c: Tool) => void) | null;
|
|
/**
|
|
* Gets or sets the function to call when an HTMLInfo is to be hidden.
|
|
* The function should "hide" the HTMLInfo, either by removing any traces of it or otherwise
|
|
* returning the page state to one where the HTMLInfo content is no longer considered active.
|
|
*
|
|
* Setting this is not strictly necessary, if no action is to be taken when hiding the HTMLInfo.
|
|
*
|
|
* If this is called by:
|
|
* - ContextMenuTool#hideContextMenu, the second argument is the ContextMenuTool.
|
|
* - ToolManager#hideToolTip, the second argument is the ToolManager.
|
|
* - TextEditingTool#doDeactivate, the second argument is the TextEditingTool.
|
|
*
|
|
* @see #mainElement
|
|
*/
|
|
hide: ((a: Diagram, b: Tool) => void) | null;
|
|
/**
|
|
* Gets or sets a function that returns the primary value associated with this HTMLInfo,
|
|
* such as the string value of a text editor, which would be solicited by the TextEditingTool.
|
|
*
|
|
* This typically returns a string.
|
|
*/
|
|
valueFunction: (() => any) | null;
|
|
}
|
|
/**
|
|
* The ContextMenuTool is used to create and show a context menu.
|
|
* It automatically disables any browser context menu.
|
|
*
|
|
* Define context menus on individual GraphObjects by setting GraphObject#contextMenu.
|
|
* Define a context menu for the diagram background by setting Diagram#contextMenu.
|
|
*
|
|
* This tool is a standard mouse-down tool, the ToolManager#contextMenuTool.
|
|
*
|
|
* This tool does not utilize any tool handles.
|
|
* This tool does not modify the model or conduct any transaction,
|
|
* although any code invoked by context menu commands might do so.
|
|
*
|
|
* There are examples of customizing this tool in the
|
|
* <a href="../../samples/customContextMenu.html">Custom Context Menu</a> and
|
|
* <a href="../../samples/htmlLightBoxContextMenu.html">HTML LightBox Context Menu</a> samples.
|
|
*
|
|
* If you want to programmatically show a context menu for a particular GraphObject or for the
|
|
* whole diagram, call CommandHandler#showContextMenu.
|
|
* That command method is also invoked by the Menu key on the keyboard.
|
|
*
|
|
* Normally this shows a context menu (if available) on a right-mouse-up event.
|
|
* If you want it to happen on a right-mouse-down event, you'll need to move this tool
|
|
* from the ToolManager#mouseUpTools list to the ToolManager#mouseDownTools list:
|
|
* ```js
|
|
* myDiagram.toolManager.mouseDownTools.add(myDiagram.toolManager.replaceTool("ContextMenu", null));
|
|
* ```
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class ContextMenuTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#contextMenuTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "ContextMenu".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Return true if it's a mouse right click that hasn't moved Tool#isBeyondDragSize
|
|
* and that is on a GraphObject with a GraphObject#contextMenu.
|
|
* This is also true if the mouse right click is in the diagram background
|
|
* and the diagram's Diagram#contextMenu is non-null.
|
|
*
|
|
* On touch devices, a special default context menu will appear even if no object with a context menu is found.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* Find a GraphObject at the current mouse point with a GraphObject#contextMenu,
|
|
* or return the Diagram if there is a Diagram#contextMenu.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {GraphObject|Diagram=} obj Optional GraphObject with which to start searching for a context menu.
|
|
* If null, the Diagram will be used. If no argument is specified, this method will look for an object at the current mouse point.
|
|
* @return {GraphObject|Diagram|null} something with a `contextMenu`,
|
|
* or null if nothing can be found with a context menu at the current mouse point.
|
|
*/
|
|
findObjectWithContextMenu(obj?: GraphObject | Diagram): GraphObject | Diagram | null;
|
|
/**
|
|
* Do nothing, activation is special and relies on doMouseUp
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Activate this but also execute the normal behavior that would happen on a mouse-up
|
|
* if this tool is in the ToolManager#mouseDownTools list.
|
|
* Perform ActionTool#doMouseDown if a ContextMenuButton was hit.
|
|
*/
|
|
doMouseDown(): void;
|
|
/**
|
|
* If there is something found by #findObjectWithContextMenu,
|
|
* call #showContextMenu with that object's GraphObject#contextMenu
|
|
* or the Diagram#contextMenu.
|
|
*
|
|
* Once a context menu is being shown,
|
|
* if a click occurs on a part of the context menu, call Tool#standardMouseClick.
|
|
* Otherwise if the click occurs elsewhere, just stop this tool.
|
|
* Unlike most tools, the first mouse-up should not stop this tool.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* Handle mouse-enter, mouse-over, and mouse-leave events, as well as tooltips.
|
|
*/
|
|
doMouseMove(): void;
|
|
/**
|
|
* Show an Adornment or HTMLInfo as a context menu.
|
|
*
|
|
* This method is called by the context click (Tool#doMouseDown) and CommandHandler#showContextMenu.
|
|
* If you want to programmatically show a context menu for a particular GraphObject or for the
|
|
* whole diagram, do not call this method, which only does one small piece of the process of
|
|
* bringing up a context menu.
|
|
* Instead call CommandHandler#showContextMenu, which will start this tool
|
|
* and eventually call this method and handle additional input events.
|
|
*
|
|
* For Adornment context menus: If the object's containing Part is data-bound,
|
|
* this sets the contextmenu's `Part.data` to the same value.
|
|
* The Adornment#adornedObject property is set to the GraphObject for which the menu is being shown.
|
|
*
|
|
* This method sets the #currentContextMenu.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Adornment|HTMLInfo} contextmenu
|
|
* @param {GraphObject} obj the GraphObject for which the context menu is being shown;
|
|
* this is null if the contextmenu is being shown for the diagram background.
|
|
*/
|
|
showContextMenu(contextmenu: Adornment | HTMLInfo, obj: GraphObject | null): void;
|
|
/**
|
|
* This is called by #showContextMenu to position the context menu within the viewport.
|
|
* It normally goes just below the cursor.
|
|
* But if the mouse is too close to the right edge or the bottom edge of the viewport,
|
|
* it is positioned left and/or above the cursor.
|
|
*
|
|
* This method only operates if the context menu, an Adornment, does not have a Adornment#placeholder.
|
|
* When there is a Placeholder in the context menu, that Adornment is automatically positioned
|
|
* so that the Placeholder is positioned at the adorned object, the second argument to this method.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* If you override this method to position the context menu,
|
|
* the context menu has already been measured but not arranged,
|
|
* so you can use its GraphObject#measuredBounds width and height
|
|
* but not its GraphObject#actualBounds.
|
|
* @expose
|
|
* @param {Adornment} contextmenu
|
|
* @param {GraphObject} obj The GraphObject getting the context menu,
|
|
* or null if the context menu is for the diagram background.
|
|
*/
|
|
positionContextMenu(contextmenu: Adornment, obj: GraphObject | null): void;
|
|
/**
|
|
* Hide any context menu.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
hideContextMenu(): void;
|
|
/**
|
|
* This is the HTMLInfo#show method for the #defaultTouchContextMenu.
|
|
*
|
|
* If the object's containing Part is data-bound,
|
|
* set the contextmenu's `Part.data` to the same value.
|
|
* The Adornment#adornedObject property is set to the GraphObject
|
|
* for which the menu is being shown.
|
|
*
|
|
* The menu carries some default CSS styling and uses the following CSS classes:
|
|
*
|
|
* * `goCXforeground` for the DIV containing the buttons
|
|
* * `goCXbackground` for the darker DIV behind the context menu
|
|
* * `goCXul` for the HTML `ul` items
|
|
* * `goCXli` for the HTML `li` tag items
|
|
* * `goCXa` for the HTML `a` tag items
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a>
|
|
* for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
showDefaultContextMenu(): void;
|
|
/**
|
|
* This is the HTMLInfo#hide method for the #defaultTouchContextMenu.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a>
|
|
* for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
hideDefaultContextMenu(): void;
|
|
/**
|
|
* Gets or sets the currently showing context menu, or null if there is none.
|
|
* This is typically only set in #showContextMenu and not by the user.
|
|
* It is also typically set to null in #hideContextMenu.
|
|
*/
|
|
currentContextMenu: Adornment | HTMLInfo | null;
|
|
/**
|
|
* Gets or sets the HTMLInfo or Adornment that acts as the default touch context menu.
|
|
* On touch devices, this context menu will appear even there is no context menu defined.
|
|
*
|
|
* You can disable this functionality by setting this property to null.
|
|
*
|
|
* By default shows a set of HTML elements acting as a context menu.
|
|
* @since 1.7
|
|
*/
|
|
defaultTouchContextMenu: Adornment | HTMLInfo | null;
|
|
/**
|
|
* Gets or sets the GraphObject found at the mouse point that has a context menu.
|
|
* This property remembers the result returned by #findObjectWithContextMenu if it is a GraphObject.
|
|
* This value is passed to #showContextMenu as the second argument.
|
|
* The value will be null if the context menu is for the diagram rather than for a particular GraphObject.
|
|
* @since 1.4
|
|
*/
|
|
currentObject: GraphObject | null;
|
|
/**
|
|
* This read-only property returns the original mouse-down point in document coordinates.
|
|
*/
|
|
readonly mouseDownPoint: Point;
|
|
}
|
|
/**
|
|
* The TextEditingTool is used to let the user interactively edit text in place.
|
|
* This sets the TextBlock#text property; you may want to save the changed text to the model
|
|
* by using a TwoWay Binding on the "text" property of editable TextBlocks.
|
|
*
|
|
* Typically this is used by setting the TextBlock#editable property to true
|
|
* on a particular TextBlock in a part.
|
|
* When the part is selected and the user clicks on the TextBlock
|
|
* or invokes the CommandHandler#editTextBlock command,
|
|
* this tool is started and it uses an HTMLTextArea to perform in-place text editing.
|
|
* (For more details see the description for TextEditingTool#doActivate.)
|
|
*
|
|
* The TextBlock is accessible as the TextEditingTool#textBlock property.
|
|
* The text editor is accessible as the TextEditingTool#currentTextEditor property.
|
|
* From the text editor control one can access the TextBlock being edited via the
|
|
* 'textEditingTool' property to get to this tool, from which one can use
|
|
* the TextEditingTool#textBlock property.
|
|
*
|
|
* You can disable mouse clicking from starting this text editing tool
|
|
* by setting Tool#isEnabled to false.
|
|
* You can disable the F2 key from starting this text editing tool
|
|
* by making sure Part#canEdit returns false,
|
|
* by either setting Diagram#allowTextEdit to false
|
|
* or by setting Part#textEditable to false.
|
|
*
|
|
* If you want to programmatically start the user editing a particular TextBlock,
|
|
* call CommandHandler#editTextBlock.
|
|
* That command method is also invoked by the F2 key on the keyboard.
|
|
* <p class="boxread">
|
|
* For a general discussion of text editing validation, see: <a href="../../intro/validation.html#TextEditingValidation">Introduction to Text Validation</a>.
|
|
* For customizing the TextEditingTool, read about HTMLInfo and see <a href="../../intro/HTMLInteraction.html#TextEditors">Introduction to Text Editors</a>.
|
|
* @extends Tool
|
|
* @unrestricted
|
|
* @category Tool
|
|
*/
|
|
export class TextEditingTool extends Tool {
|
|
/**
|
|
* You do not normally need to create an instance of this tool
|
|
* because one already exists as the ToolManager#textEditingTool, which you can modify.
|
|
*
|
|
* The Tool#name of this tool is "TextEditing".
|
|
*/
|
|
constructor();
|
|
/**
|
|
* A possible value for TextEditingTool#acceptText, the text editing control has lost focus.
|
|
* @constant
|
|
*/
|
|
static LostFocus: EnumValue;
|
|
/**
|
|
* A possible value for TextEditingTool#acceptText, the user has clicked somewhere else in the diagram.
|
|
* @constant
|
|
*/
|
|
static MouseDown: EnumValue;
|
|
/**
|
|
* A possible value for TextEditingTool#acceptText, the user has typed TAB.
|
|
* @constant
|
|
*/
|
|
static Tab: EnumValue;
|
|
/**
|
|
* A possible value for TextEditingTool#acceptText, the user has typed ENTER.
|
|
* @constant
|
|
*/
|
|
static Enter: EnumValue;
|
|
/**
|
|
* A possible value for TextEditingTool#starting,
|
|
* A single click on a TextBlock with TextBlock#editable property set to true
|
|
* will start in-place editing.
|
|
* @constant
|
|
*/
|
|
static SingleClick: EnumValue;
|
|
/**
|
|
* A possible value for TextEditingTool#starting,
|
|
* A single click on a TextBlock with TextBlock#editable property set to true
|
|
* will start in-place editing, but only if the Part that the TextBlock is in is already selected.
|
|
* @constant
|
|
*/
|
|
static SingleClickSelected: EnumValue;
|
|
/**
|
|
* A possible value for TextEditingTool#starting,
|
|
* A double click on a TextBlock with TextBlock#editable property set to true
|
|
* will start in-place editing.
|
|
* @constant
|
|
*/
|
|
static DoubleClick: EnumValue;
|
|
/**
|
|
* A possible value for #state,
|
|
* this is the starting value before the tool is activated.
|
|
* @constant
|
|
*/
|
|
static StateNone: EnumValue;
|
|
/**
|
|
* A possible value for #state,
|
|
* TextEditingTool#doActivate sets the value of #state to this.
|
|
* @constant
|
|
*/
|
|
static StateActive: EnumValue;
|
|
/**
|
|
* A possible value for #state,
|
|
* The default text editor receiving focus sets the value of #state to this.
|
|
* @constant
|
|
*/
|
|
static StateEditing: EnumValue;
|
|
/**
|
|
* A possible value for #state,
|
|
* TextEditingTool.acceptText sets the value of #state to this.
|
|
* @constant
|
|
*/
|
|
static StateValidating: EnumValue;
|
|
/**
|
|
* A possible value for #state,
|
|
* If validation fails, TextEditingTool.acceptText sets the value of #state to this.
|
|
* @constant
|
|
*/
|
|
static StateInvalid: EnumValue;
|
|
/**
|
|
* A possible value for #state,
|
|
* Once accepted and the tool begins the "TextEditing" transaction, the value of #state is set to this.
|
|
* @constant
|
|
*/
|
|
static StateValidated: EnumValue;
|
|
/**
|
|
* Gets or sets the TextBlock that is being edited.
|
|
* This property is initially null and is set in TextEditingTool#doActivate
|
|
* as the TextBlock at the mouse click point.
|
|
* However, if you set this property beforehand, TextEditingTool#doActivate
|
|
* will not set it, and this tool will edit the given TextBlock.
|
|
*/
|
|
textBlock: TextBlock | null;
|
|
/**
|
|
* Gets or sets the HTMLInfo that is editing the text.
|
|
*/
|
|
currentTextEditor: HTMLInfo | null;
|
|
/**
|
|
* Gets or sets the default HTMLInfo that edits the text.
|
|
*
|
|
* When TextEditingTool#doActivate is called, the #currentTextEditor is set to this value by default.
|
|
* If a TextBlock#textEditor is specified on the TextBlock, that editor is used instead.
|
|
*
|
|
* This tool will call HTMLInfo#show during #doActivate,
|
|
* and HTMLInfo#hide during #doDeactivate.
|
|
*
|
|
* By default the value is an HTMLInfo, and the HTMLInfo#mainElement is an `HTMLTextArea`.
|
|
* You can see the default implementation details <a href="../../extensions/TextEditor.html">here</a>.
|
|
*
|
|
* For typical operation, HTMLInfo implementations should have a way of calling TextEditingTool#acceptText.
|
|
*/
|
|
defaultTextEditor: HTMLInfo;
|
|
/**
|
|
* Gets or sets how user gestures can start in-place editing of text.
|
|
*
|
|
* Possible values are TextEditingTool.SingleClickSelected, TextEditingTool.SingleClick, and TextEditingTool.DoubleClick.
|
|
*
|
|
* The default is TextEditingTool.SingleClickSelected
|
|
*/
|
|
starting: EnumValue;
|
|
/**
|
|
* This may run when there is a mouse-click on a TextBlock for which the
|
|
* TextBlock#editable property is true in a Part
|
|
* that Part#isSelected.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canStart(): boolean;
|
|
/**
|
|
* This calls TextEditingTool#doActivate if there is a
|
|
* #textBlock set. #doActivate attempts to set #textBlock if it is null.
|
|
*/
|
|
doStart(): void;
|
|
/**
|
|
* Start editing the text for a #textBlock.
|
|
*
|
|
* If TextEditingTool#textBlock is not already specified, this looks for one at the current
|
|
* mouse point. If none is found, this method does nothing.
|
|
*
|
|
* This method sets #currentTextEditor.
|
|
* If TextBlock#textEditor is defined on the TextBlock it will use that as the value.
|
|
* By default, it uses the value of #defaultTextEditor, which is an HTMLInfo
|
|
* showing an HTML textarea, with the CSS class `goTXarea`.
|
|
*
|
|
* If the #currentTextEditor is an HTMLInfo, this method calls HTMLInfo#show on that instance.
|
|
*
|
|
* This sets Tool#isActive to true.
|
|
* Custom text editors should call TextEditingTool#acceptText to finish the edit
|
|
* by modifying the TextBlock and committing the edit transaction.
|
|
* Or call TextEditingTool#doCancel to abort the edit.
|
|
*/
|
|
doActivate(): void;
|
|
/**
|
|
* Abort any text editing operation.
|
|
*/
|
|
doCancel(): void;
|
|
/**
|
|
* A click (mouse up) calls TextEditingTool#doActivate if this tool is not already active
|
|
* and if TextEditingTool#canStart returns true.
|
|
*/
|
|
doMouseUp(): void;
|
|
/**
|
|
* This calls #acceptText with the reason TextEditingTool.MouseDown,
|
|
* if this tool Tool#isActive.
|
|
*/
|
|
doMouseDown(): void;
|
|
/**
|
|
* Finish editing by trying to accept the new text.
|
|
*
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {EnumValue} reason The reason must be either TextEditingTool.LostFocus,
|
|
* TextEditingTool.MouseDown, TextEditingTool.Tab, or TextEditingTool.Enter.
|
|
*/
|
|
acceptText(reason: EnumValue): void;
|
|
/**
|
|
* Release the mouse.
|
|
*
|
|
* If the #currentTextEditor is an HTMLInfo, this calls HTMLInfo#hide.
|
|
*/
|
|
doDeactivate(): void;
|
|
/**
|
|
* This predicate checks any TextBlock#textValidation predicate and
|
|
* this tool's #textValidation predicate to make sure the TextBlock#text
|
|
* property may be set to the new string.
|
|
*
|
|
* This method may be overridden, although usually it is sufficient to set #textValidation.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {TextBlock} textblock the TextBlock that is being edited.
|
|
* @param {string} oldstr the previous string value.
|
|
* @param {string} newstr the proposed new string value.
|
|
* @return {boolean} true if the new string is valid for the given TextBlock.
|
|
*/
|
|
isValidText(textblock: TextBlock, oldstr: string, newstr: string): boolean;
|
|
/**
|
|
* Gets or sets the predicate that determines whether or not a string of text is valid.
|
|
* If this is non-null, this predicate is called in addition to any TextBlock#textValidation predicate.
|
|
* See #isValidText for more details.
|
|
* The default predicate is null, which is equivalent to simply returning true.
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
*/
|
|
textValidation: ((aTextBlock: TextBlock, oldString: string, newString: string) => boolean) | null;
|
|
/**
|
|
* Gets or sets whether to select (highlight) the editable text when the TextEditingTool is activated.
|
|
* The default is true.
|
|
* @since 1.5
|
|
*/
|
|
selectsTextOnActivate: boolean;
|
|
/**
|
|
* Gets or sets the state of the TextEditingTool.
|
|
* The only accepted values are listed as constant properties of TextEditingTool, including:
|
|
* - TextEditingTool.StateNone
|
|
* - TextEditingTool.StateActive
|
|
* - TextEditingTool.StateEditing
|
|
* - TextEditingTool.StateValidating
|
|
* - TextEditingTool.StateValidated
|
|
*
|
|
* The starting value value is TextEditingTool.StateNone,
|
|
* TextEditingTool#doActivate sets the value to TextEditingTool.StateActive.
|
|
* The default text editor receiving focus sets the value to TextEditingTool.StateEditing.
|
|
* TextEditingTool#acceptText sets the value to TextEditingTool.StateValidating.
|
|
* Once accepted and the tool begins the "TextEditing" transaction, the value is set to TextEditingTool.StateValidated.
|
|
* @since 1.7
|
|
*/
|
|
state: EnumValue;
|
|
/**
|
|
* This method returns a temporary TextBlock used for measuring text during editing.
|
|
* The TextBlock.text is set to the parameter's value,
|
|
* and the TextBlock is measured with the last available width of the #textBlock.
|
|
*
|
|
* Text editors can use the GraphObject#measuredBounds and TextBlock#lineCount
|
|
* to determine a reasonable size for their text areas.
|
|
* @param {string} text the text to measure
|
|
* @return {TextBlock}
|
|
* @since 1.7
|
|
*/
|
|
measureTemporaryTextBlock(text: string): TextBlock;
|
|
}
|
|
/**
|
|
* An EasingFunction describes how much to modify a scalar value based on
|
|
* the current time, the start value, the change in value, and the duration.
|
|
* @category Type
|
|
*/
|
|
export type EasingFunction = ((currentTime: number, startValue: number, byValue: number, duration: number) => number);
|
|
/**
|
|
* AnimationManager handles animations in a Diagram. Each Diagram has one, Diagram#animationManager.
|
|
* Setting the Model, performing a Layout, Group expansion and Tree expansion automatically start animations through
|
|
* the #defaultAnimation. Animations can be manually started by creating Animations, which are associated with an
|
|
* AnimationManager.
|
|
*
|
|
* Animation is enabled by default, setting the #isEnabled property to false will turn off animations for a Diagram.
|
|
*
|
|
* When the #defaultAnimation begins it raises the `"AnimationStarting"` Diagram event,
|
|
* upon completion it raises the `"AnimationFinished"` Diagram event.
|
|
*
|
|
* The #defaultAnimation, if running, will stop if a new transaction is started, if an undo or redo is called,
|
|
* if a layout is invalidated, or if a model is replaced.
|
|
* When an Animation is stopped, the Diagram immediately finishes the animation and draws the final state.
|
|
* Animations can be stopped programatically with the methods AnimationManager#stopAnimation or Animation#stop.
|
|
* @since 1.4
|
|
* @unrestricted
|
|
*/
|
|
export class AnimationManager {
|
|
/**
|
|
* You do not normally need to create an instance of this class because one already exists as the Diagram#animationManager, which you can modify.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
readonly animationReasons: Set<string>;
|
|
/**
|
|
* This method is passed the reason the animation is to begin,
|
|
* and must return true or false based on whether or not the animation is to be allowed.
|
|
* Returning true means the animation will occur, returning false will stop the animation's setup.
|
|
*
|
|
* By default, this method always returns true.
|
|
*
|
|
* These are the possible reasons GoJS will begin an animation:
|
|
* ```md
|
|
* Called by CommandHandler:
|
|
* "Collapse SubGraph"
|
|
* "Expand SubGraph"
|
|
* "Collapse Tree"
|
|
* "Expand Tree"
|
|
* "Scroll To Part"
|
|
* "Zoom To Fit"
|
|
* Called by Diagram:
|
|
* "Model"
|
|
* "Layout"
|
|
* Called by AnimationTriggers:
|
|
* "Trigger"
|
|
* ```
|
|
*
|
|
* Example usage:
|
|
*
|
|
* ```js
|
|
* // disallow expand/collapse animations, but allow all others
|
|
* myDiagram.animationManager.canStart = function(reason) {
|
|
* if (reason === "Expand Tree") return false;
|
|
* return true;
|
|
* }
|
|
* ```
|
|
* @param {string} reason Reason for starting the animation
|
|
* @return {boolean}
|
|
* @since 2.1
|
|
*/
|
|
canStart(reason: string): boolean;
|
|
/**
|
|
* Stops the #defaultAnimation and updates the Diagram to its final state.
|
|
*
|
|
* If the argument is true, this stops all running animations.
|
|
* If an Animation was about to begin, it will be cancelled.
|
|
*
|
|
* If the AnimationManager#defaultAnimation is running, this will raise the `"AnimationFinished"` Diagram event.
|
|
* @param {boolean=} stopsAllAnimations Whether to stop all animations, instead of just the #defaultAnimation. Default false.
|
|
*/
|
|
stopAnimation(stopsAllAnimations?: boolean): void;
|
|
/**
|
|
* Gets or sets whether this AnimationManager operates.
|
|
*
|
|
* The default value is true.
|
|
* Setting this to false does not stop an animation, it only stops future animations.
|
|
* To stop any ongoing animation, use #stopAnimation.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
isEnabled: boolean;
|
|
/**
|
|
* Gets or sets the default duration, in milliseconds, used as the duration for animations that have their Animation#duration set to `NaN`.
|
|
*
|
|
* Typically these values are short. The default value is 600 milliseconds.
|
|
* The value must be a number greater than or equal to 1.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* @see Animation#duration
|
|
*/
|
|
duration: number;
|
|
/**
|
|
* This read-only property is true when the animation manger is currently animating.
|
|
*
|
|
* This value cannot be set, but animation can be stopped by calling #stopAnimation,
|
|
* and it can be prevented by setting #isEnabled.
|
|
*/
|
|
readonly isAnimating: boolean;
|
|
/**
|
|
* This read-only property is true when the animation manger is in the middle of an animation tick.
|
|
* Animation only operates on GraphObjects during ticks, but code outside of AnimationManager's control may execute between ticks.
|
|
*
|
|
* isTicking can only be true when #isAnimating is also true.
|
|
*/
|
|
readonly isTicking: boolean;
|
|
/**
|
|
* Gets or sets whether an animation is performed on an initial layout.
|
|
*
|
|
* The default value is true.
|
|
* Changing the value does not affect any ongoing animation.
|
|
* Setting this property does not raise any events.
|
|
* @since 1.6
|
|
*/
|
|
isInitial: boolean;
|
|
/**
|
|
* This read-only property gets the Animation that carries out default GoJS animations.
|
|
* This animation is usually only referenced to modify default animation properties,
|
|
* such as the Animation#easing or Animation#duration.
|
|
*
|
|
* You should not add anything to or start the default animation, GoJS does so automatically, internally.
|
|
* When the default animation begins it raises the `"AnimationStarting"` Diagram event,
|
|
* upon completion it raises the `"AnimationFinished"` Diagram event.
|
|
* You should not modify the properties Animation#runCount or Animation#reversible on the default animation.
|
|
*
|
|
* See the <a href="../../intro/animation.html">Introduction Page on Animations</a> for more detail.
|
|
* @since 2.1
|
|
*/
|
|
readonly defaultAnimation: Animation;
|
|
/**
|
|
* Gets the set of currently animating Animations being managed by this AnimationManager.
|
|
* @since 2.1
|
|
*/
|
|
readonly activeAnimations: Set<Animation>;
|
|
/**
|
|
* Gets or sets the initial animation style that is set up by the #defaultAnimation.
|
|
* This can be AnimationManager.Default, AnimationManager.AnimateLocations, or AnimationManager.None.
|
|
* - If set to AnimationManager.Default, the initial animation will "fade up"
|
|
* the Diagram's contents by animating the Diagram#position and Diagram#opacity.
|
|
* - If set to AnimationManager.AnimateLocations, the initial animation will animate Part locations from `(0, 0)` to their values, as GoJS 2.0 and prior do.
|
|
* - If set to AnimationManager.None, no initial animation will happen by default,
|
|
* which this allows you to specify your own initial animation by defining a `"InitialAnimationStarting"` DiagramEvent listener with Diagram#addDiagramListener.
|
|
*
|
|
* An example custom initial animation, which zooms the Diagram into view:
|
|
*
|
|
* ```js
|
|
* myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
|
|
* myDiagram.addDiagramListener('InitialAnimationStarting', function(e) {
|
|
* var animation = e.subject.defaultAnimation;
|
|
* animation.easing = go.Animation.EaseOutExpo;
|
|
* animation.duration = 900;
|
|
* animation.add(e.diagram, 'scale', 0.1, 1);
|
|
* animation.add(e.diagram, 'opacity', 0, 1);
|
|
* });
|
|
* ```
|
|
*
|
|
*
|
|
* @since 2.1
|
|
*/
|
|
initialAnimationStyle: EnumValue;
|
|
/**
|
|
* Defines a new named effect to be used in animation, along with a function that tells the AnimationManager how to modify that property.
|
|
*
|
|
* Effect names do not need to reflect GraphObject properties, and you can define an effect with a function that modifies several properties for convenience.
|
|
*
|
|
* For example, one could define an animation effect named `"moveAndSpin"` which modifies the object's `position` and `angle`.
|
|
*
|
|
* Most commonly, an effect is defined with one GraphObject property in mind to be animated,
|
|
* and the function uses the start and end values, an easing function, and the times to determine a new value for each tick of animation.
|
|
* Here is an example for animating the fill of GraphObjects:
|
|
*
|
|
* ```js
|
|
* // This presumes the object to be animated is a Shape
|
|
* go.AnimationManager.defineAnimationEffect('fill', function(obj, startValue, endValue, easing, currentTime, duration, animation) {
|
|
* var hueValue = easing(currentTime, startValue, endValue - startValue, duration);
|
|
* obj.fill = 'hsl(' + hueValue + ', 100%, 80%)';
|
|
* });
|
|
* ```
|
|
*
|
|
* @param {string} effectName Named effect to animate
|
|
* @param {Function} animationFunction Function
|
|
* that transforms the property values. It takes the animated object, start value, end value,
|
|
* easing function (the Animation#easing), current time, duration, and animation state. It should modify one or more properties on the object.
|
|
* @since 2.1
|
|
*/
|
|
static defineAnimationEffect(effectName: string, animationFunction: (obj: Diagram | GraphObject, startValue: any, endValue: any, easing: EasingFunction, currentTime: number, duration: number, animation: Animation) => void): void;
|
|
/**
|
|
* Used as the default value for #initialAnimationStyle.
|
|
* The default initial animation style will "fade up" and in the Diagram's contents by animating the Diagram#position and Diagram#opacity.
|
|
* To make the default initial animation behave like GoJS 2.0, set #initialAnimationStyle to AnimationManager.AnimateLocations.
|
|
* To customize the default initial animation, set #initialAnimationStyle to AnimationManager.None
|
|
* and define a `"InitialAnimationStarting"` DiagramEvent listener with Diagram#addDiagramListener.
|
|
* See #initialAnimationStyle for details and examples.
|
|
* @constant
|
|
* @since 2.1
|
|
*/
|
|
static Default: EnumValue;
|
|
/**
|
|
* Used as a value for #initialAnimationStyle.
|
|
* This value will cause initial animations to capture Part locations and animate them from `(0, 0)` to those location values.
|
|
* This was the default initial animation behavior in GoJS 2.0 and prior.
|
|
* See #initialAnimationStyle for details and examples.
|
|
* @constant
|
|
* @since 2.1
|
|
*/
|
|
static AnimateLocations: EnumValue;
|
|
/**
|
|
* Used as a value for #initialAnimationStyle.
|
|
* This will turn off the initial animation, but also allows for customizing the initial animation by adding your own properties
|
|
* if you define a `"InitialAnimationStarting"` listener with Diagram#addDiagramListener.
|
|
* See #initialAnimationStyle for details and examples.
|
|
* @constant
|
|
* @since 2.1
|
|
*/
|
|
static None: EnumValue;
|
|
}
|
|
/**
|
|
* Animations are used to animate GraphObject and Diagram properties.
|
|
*
|
|
* This class is useful for creating manual animations.
|
|
* If you wish to animate particular properties on a GraphObject every time their value changes,
|
|
* you may want to use AnimationTriggers instead, which automatically create and start Animations.
|
|
*
|
|
* The AnimationManager#defaultAnimation is an instance of this class, and carries out the
|
|
* default animations in GoJS: Model load, layout, expand and collapse, and so on.
|
|
* See the <a href="../../intro/animation.html">Introduction Page on Animations</a> for more detail on the different kinds of animations.
|
|
*
|
|
* Manual animations are set up by creating an instance of this class, and calling #add at least once, then calling #start.
|
|
* The method #add specifies which objects and which animation effects/properties to animate, plus start and end values for the property.
|
|
* As objects are added to an Animation, the Animation infers which Diagram and AnimationManager is relevant.
|
|
*
|
|
* Animations are started by calling #start, and stopped when the #duration is reached, or when #stop is called,
|
|
* or stopped when AnimationManager#stopAnimation is called with `true` as its argument.
|
|
*
|
|
* Animations can continue indefinitely if #runCount is set to `Infinity`.
|
|
* Animations can act upon temporary copies of an object that will get destroyed by calling #addTemporaryPart.
|
|
* This is useful when crafting cosmetic animations of parts that are about to be deleted:
|
|
* Since the part will no longer exist, you can instead animate a temporary part disappearing.
|
|
*
|
|
* A simple example usage is this:
|
|
* ```js
|
|
* var node = myDiagram.nodes.first();
|
|
* var shape = part.findObject("SHAPE"); // assumes this Node contains a go.Shape with .name = "SHAPE"
|
|
* var animation = new go.Animation();
|
|
* // Animate this Node from its current position to (400, 500)
|
|
* animation.add(node, "position", node.position, new go.Point(400, 500));
|
|
* // Animate the fill of the Shape within the Node, from its current color to blue
|
|
* animation.add(shape, "fill", shape.fill, "blue");
|
|
* // Both of these effects will animate simultaneously when start() is called:
|
|
* animation.start();
|
|
* ```
|
|
*
|
|
* See the <a href="../../intro/animation.html">Introduction Page on Animations</a> and the <a href="../../samples/customAnimations.html">Custom Animations sample</a>
|
|
* for more example usage of the Animation class.
|
|
*
|
|
* Unlike the AnimationManager#defaultAnimation, Animations can be started any time,
|
|
* and do not stop automatically when a new transaction begins.
|
|
*
|
|
*
|
|
* @since 2.1
|
|
* @unrestricted
|
|
*/
|
|
export class Animation {
|
|
/**
|
|
* The constructor creates an Animation.
|
|
* A single Animation can animate multiple objects via multiple calls to #add.
|
|
* When you are ready to begin the animation, call #start.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* @expose
|
|
* Undocumented. Debug only.
|
|
*/
|
|
suspend(): void;
|
|
/**
|
|
* @expose
|
|
* Undocumented. Debug only.
|
|
*/
|
|
advanceTo(duration: number, resume?: boolean): void;
|
|
/**
|
|
* Start this animation.
|
|
*
|
|
* This adds the Animation to its AnimationManager's list of active animations.
|
|
* The AnimationManager is inferred from the list of objects to be animted, by inspecting their Diagram.
|
|
*
|
|
* This does nothing if there are no objects to animate.
|
|
*/
|
|
start(): void;
|
|
/**
|
|
* Add a temporary Part to this animation.
|
|
* This part will be added to the Diagram when the animation is started,
|
|
* and removed from the Diagram when the animation completes.
|
|
* This is intended to be used with #add, to animate properties of this Part or its elements.
|
|
*
|
|
* The temporary part added is typically either a GraphObject#copy of an existing Part,
|
|
* which is to be deleted and requires a copy for animated effects, or else a wholly new temporary Part,
|
|
* constructed in memory for the purpose of creating some effect.
|
|
*
|
|
*
|
|
* @param {Part} part A part to add to the Diagram at the start of the animation and remove at the end.
|
|
* This is typically either a copied Part already in the Diagram, to animate its deletion,
|
|
* or a Part created programmatically to be used for some effect.
|
|
* @param {Diagram=} diagram The Diagram to add the temporary part to, and remove it from, at the start and end of animation, respectively.
|
|
*/
|
|
addTemporaryPart(part: Part, diagram: Diagram): void;
|
|
/**
|
|
* Add an object (GraphObject or Diagram) and effect name, with specified start and end values, to this Animation.
|
|
*
|
|
* @param {GraphObject|Diagram} obj GraphObject or Diagram to animate.
|
|
* @param {string} effectName Animation effect name, such as `"scale"` to change GraphObject.scale.
|
|
* By default the supported properties are, for GraphObjects:
|
|
* * `"position"`
|
|
* * `"location"` (on Parts)
|
|
* * `"scale"`
|
|
* * `"opacity"`
|
|
* * `"angle"`
|
|
* * `"desiredSize"`
|
|
* * `"width"`
|
|
* * `"height"`
|
|
* * `"background"`
|
|
* * `"areaBackground"`
|
|
* * `"fill"` (on Shapes)
|
|
* * `"strokeWidth"` (on Shapes)
|
|
* * `"strokeDashOffset"` (on Shapes)
|
|
* * `"stroke"` (on Shapes, TextBlocks)
|
|
*
|
|
* For Diagrams:
|
|
* * `"position"`
|
|
* * `"scale"`
|
|
* * `"opacity"`
|
|
*
|
|
* More properties can be supported by defining new effects with AnimationManager.defineAnimationEffect.
|
|
* @param {*} startValue The starting value for the animated property. Often this is the current value of the property.
|
|
* @param {*} endValue The ending value for the animated property. Even if the animation is just cosmetic, this must be a valid value for the property.
|
|
* For instance, for GraphObject#scale, you cannot animate to 0, as this is an invalid scale value.
|
|
* Instead you would animate to a very small (but still valid) value, such as 0.001.
|
|
* @param {boolean=} cosmetic Determines if the animation should revert the property value to the start value at the end of animation.
|
|
* Default false. This is commonly used when animating opacity or scale of "disappearing" nodes during collapse.
|
|
* Even though the node may appear to go to scale 0.001, the programmer usually wants the scale to be reflect its prior value, once hidden.
|
|
*/
|
|
add(obj: GraphObject | Diagram, effectName: string, startValue: any, endValue: any, cosmetic?: boolean): void;
|
|
/**
|
|
* Stops a running Animation and updates the animating objects to their final state.
|
|
*
|
|
* If an animation was about to begin, it is cancelled.
|
|
*/
|
|
stop(): void;
|
|
/**
|
|
* Gets or sets the duration for animations, in milliseconds.
|
|
*
|
|
* The default value is `NaN`, which means it inherits the default value from the AnimationManager#duration,
|
|
* which defaults to 600 milliseconds.
|
|
*
|
|
* The value must be a number greater than or equal to 1, or `NaN`.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
duration: number;
|
|
/**
|
|
* Gets or sets whether this Animation will repeat its animation in reverse at the end of the duration. Default false.
|
|
*
|
|
* A reversible Animation, if stopped early, will end at its original state.
|
|
* Setting this to true doubles the effective #duration of the Animation.
|
|
*
|
|
* This property should not be set on the AnimationManager#defaultAnimation
|
|
*/
|
|
reversible: boolean;
|
|
/**
|
|
* Gets or sets whether this Animation should be repeat, and how many times. The default is 1, which means the animation does not repeat.
|
|
*
|
|
* This can be set to any non-zero positive integer, or `Infinity`. Setting this to `Infinity` will repeat an animation forever.
|
|
*
|
|
* This property should not be set on the AnimationManager#defaultAnimation
|
|
*
|
|
* @see #reversible
|
|
*/
|
|
runCount: number;
|
|
/**
|
|
* Gets or sets the function to execute when the user Animation finishes.
|
|
*
|
|
* By default this property is null.
|
|
*/
|
|
finished: ((animation: Animation) => void) | null;
|
|
/**
|
|
* Gets or sets the easing function this Animation will use to modify default properties.
|
|
*
|
|
* Pre-defined animatable values are processed by passing scalars into this easing function.
|
|
*
|
|
* The default value is Animation.EaseInOutQuad.
|
|
*
|
|
*
|
|
* The value can be an arbitrary easing function, or one of the six provided:
|
|
* Animation.EaseLinear, Animation.EaseInOutQuad, Animation.EaseInQuad,
|
|
* Animation.EaseOutQuad, Animation.EaseInExpo, Animation.EaseOutExpo.
|
|
*
|
|
*/
|
|
easing: EasingFunction;
|
|
/**
|
|
* Gets or sets whether this Animation should allow an unconstrained viewport during the runtime of the animation.
|
|
* This temporarily sets the Diagram#scrollMode to Diagram.InfiniteScroll, and restores the value at the end of the animation.
|
|
* This is done so that animating objects can move out of the viewport temporarily during the animation and not trigger scrollbars.
|
|
*
|
|
* This may be useful to set for animations that have objects or the Diagram bounds animate from outside the viewport into the view.
|
|
* The default value is true.
|
|
*/
|
|
isViewportUnconstrained: boolean;
|
|
/**
|
|
* This read-only property is true when the Animation is currently running.
|
|
*
|
|
* This value cannot be set, but Animation can be stopped by calling #stop.
|
|
*/
|
|
readonly isAnimating: boolean;
|
|
/**
|
|
* Gets the ObjectData assocaited with this GraphObject or Diagram.
|
|
* If no state exists, this creates and returns a new ObjectData.
|
|
*
|
|
* This can be used to store temporary information per animated object during the course of an animation.
|
|
* This state is cleared at the end of an animation.
|
|
*/
|
|
getTemporaryState(obj: GraphObject | Diagram): ObjectData;
|
|
/**
|
|
* Built-in static function for computing interpolated values. Can be used as a value for Animation#easing.
|
|
* @constant
|
|
*/
|
|
static EaseLinear: EasingFunction;
|
|
/**
|
|
* Built-in static function for computing interpolated values. Can be used as a value for Animation#easing.
|
|
* This is the default value for Animation#easing.
|
|
* @constant
|
|
*/
|
|
static EaseInOutQuad: EasingFunction;
|
|
/**
|
|
* Built-in static function for computing interpolated values. Can be used as a value for Animation#easing.
|
|
* @constant
|
|
*/
|
|
static EaseInQuad: EasingFunction;
|
|
/**
|
|
* Built-in static function for computing interpolated values. Can be used as a value for Animation#easing.
|
|
* @constant
|
|
*/
|
|
static EaseOutQuad: EasingFunction;
|
|
/**
|
|
* Built-in static function for computing interpolated values. Can be used as a value for Animation#easing.
|
|
* @constant
|
|
*/
|
|
static EaseInExpo: EasingFunction;
|
|
/**
|
|
* Built-in static function for computing interpolated values. Can be used as a value for Animation#easing.
|
|
* @constant
|
|
*/
|
|
static EaseOutExpo: EasingFunction;
|
|
}
|
|
/**
|
|
* An AnimationTrigger describes how to automatically animate a property on a GraphObject
|
|
* when it changes value.
|
|
* The target property name is a string, and all name matching is case-sensitive.
|
|
*
|
|
* Triggers will be shared by all copies of the template's GraphObjects.
|
|
* You can include AnimationTriggers in your templates just like Bindings are included:
|
|
*
|
|
* ```js
|
|
* $(go.Panel, "Vertical",
|
|
* // This trigger uses the default value of AnimationTrigger.startCondition:
|
|
* // If a transaction is ongoing and Panel.position is changed, this trigger will animate
|
|
* // all changes to Panel.position at the end of the next transaction, in one bundled Animation.
|
|
* // If no transaction is ongoing, then it will animate this value immediately.
|
|
* new go.AnimationTrigger("position"),
|
|
* {
|
|
* // ... Panel properties
|
|
* },
|
|
* $(go.Shape,
|
|
* // Animate all changes to Shape.opacity immediately
|
|
* new go.AnimationTrigger("opacity", null, startCondition: go.AnimationTrigger.Immediate),
|
|
* {
|
|
* // ... Shape properties
|
|
* }
|
|
* )
|
|
* ```
|
|
* When the #startCondition is AnimationTrigger.Default,
|
|
* GoJS will attempt to AnimationTrigger.Bundled or AnimationTrigger.Immediate based on the state of the transaction.
|
|
* If no transaction is ongoing, this trigger will treat the default as using AnimationTrigger.Immediate.
|
|
* Otherwise it will work as AnimationTrigger.Bundled.
|
|
*
|
|
* When the #startCondition is AnimationTrigger.Bundled,
|
|
* the AnimationManager will use the default animation to prepare a single Animation that begins when the current transaction has ended.
|
|
* This animation may be canceled if a new transaction is started.
|
|
*
|
|
* When the #startCondition is AnimationTrigger.Immediate,
|
|
* a new animation will be created for every instance of the property changed, and started immediately,
|
|
* and run until completion. This may be useful for cosmetic changes, such as animating
|
|
* the opacity or color of an object on mouseEnter or mouseLeave.
|
|
*
|
|
* You can only specify properties that exist on the GraphObject, and are also registered with AnimationManager.defineAnimationEffect.
|
|
* By default these properties are:
|
|
*
|
|
* * `"position"`
|
|
* * `"location"` (on Parts)
|
|
* * `"scale"`
|
|
* * `"opacity"`
|
|
* * `"angle"`
|
|
* * `"desiredSize"`
|
|
* * `"width"`
|
|
* * `"height"`
|
|
* * `"background"`
|
|
* * `"areaBackground"`
|
|
* * `"fill"` (on Shapes)
|
|
* * `"strokeWidth"` (on Shapes)
|
|
* * `"strokeDashOffset"` (on Shapes)
|
|
* * `"stroke"` (on Shapes, TextBlocks)
|
|
*
|
|
* Examples of defining additional animation properties are given in the <a href="../../intro/animation.html">Introduction Page on Animations</a>.
|
|
*
|
|
* @since 2.1
|
|
* @unrestricted
|
|
*/
|
|
export class AnimationTrigger {
|
|
/**
|
|
* This constructor creates an AnimationTrigger. These are typically constructed within Part templates. Using GraphObject.make it might look like:
|
|
*
|
|
* ```js
|
|
* var $ = go.GraphObject.make;
|
|
*
|
|
* // ...
|
|
* $(go.Shape,
|
|
* // Animate all changes to Shape.opacity immediately
|
|
* new go.AnimationTrigger("opacity", null, startCondition: go.AnimationTrigger.Immediate),
|
|
* {
|
|
* // ...
|
|
* }
|
|
* )
|
|
* ```
|
|
* @param {string} propertyName A string naming the target property to animate.
|
|
* This should not be the empty string.
|
|
* @param {Object=} animationSettings An optional Object describing properties to set on animations created by this AnimationTrigger.
|
|
* See the #animationSettings property for detail.
|
|
* If set this also defaults the #startCondition to AnimationTrigger.Immediate.
|
|
* @param {EnumValue=} startCondition An optional EnumValue to set the #startCondition property.
|
|
*/
|
|
constructor(propertyName: string, animationSettings?: {
|
|
duration?: number;
|
|
finished?: (animation: Animation) => void;
|
|
easing?: EasingFunction;
|
|
}, startCondition?: EnumValue);
|
|
/**
|
|
* Create a copy of this AnimationTrigger, with the same property values.
|
|
* @expose
|
|
* @return {AnimationTrigger}
|
|
*/
|
|
copy(): AnimationTrigger;
|
|
/**
|
|
* Gets or sets the name of the property to animate on the target GraphObject.
|
|
* The default value is set during constructor initalization.
|
|
*
|
|
* You can only specify properties that exist on the GraphObject, and are also registered with AnimationManager.defineAnimationEffect.
|
|
* By default these properties are the same as the list of possible Animation effects:
|
|
*
|
|
* * `"position"`
|
|
* * `"location"` (on Parts)
|
|
* * `"scale"`
|
|
* * `"opacity"`
|
|
* * `"angle"`
|
|
* * `"desiredSize"`
|
|
* * `"width"`
|
|
* * `"height"`
|
|
* * `"background"`
|
|
* * `"areaBackground"`
|
|
* * `"fill"` (on Shapes)
|
|
* * `"strokeWidth"` (on Shapes)
|
|
* * `"strokeDashOffset"` (on Shapes)
|
|
* * `"stroke"` (on Shapes, TextBlocks)
|
|
*
|
|
* Examples of defining additional properties by adding animation effects are given in the <a href="../../intro/animation.html">Introduction Page on Animations</a>.
|
|
*/
|
|
propertyName: string;
|
|
/**
|
|
* Gets or sets the settings that this trigger should set on any Animations it creates
|
|
* if the #startCondition is AnimationTrigger.Immediate. Immediate triggers create a new Animation with each triggering,
|
|
* and apply these settings to that Animation.
|
|
*
|
|
* This can be set to an object with a subset of possible Animation settings. The default value is `null`, which keeps default Animation settings.
|
|
*
|
|
* Since a #startCondition of AnimationTrigger.Bundled uses the default animation,
|
|
* you must set the properties of AnimationManager#defaultAnimation, and not this property, to modify the animation settings.
|
|
*
|
|
* To set default settings for *all* created Animations, you can modify the settings on AnimationManager instead, such as AnimationManager#duration.
|
|
*
|
|
* Possible properties to set in this object are:
|
|
*
|
|
* * **duration**: a `number`, corresponding to Animation#duration.
|
|
* * **finished**: a `Function`, corresponding to Animation#finished.
|
|
* * **easing**: an `EasingFunction`, corresponding to Animation#easing.
|
|
*/
|
|
animationSettings: {
|
|
duration?: number;
|
|
finished?: (animation: Animation) => void;
|
|
easing?: EasingFunction;
|
|
};
|
|
/**
|
|
* Gets or sets the starting condition for this trigger.
|
|
*
|
|
* AnimationTriggers can invoke an animation immediately,
|
|
* starting a new animation with each property of each GraphObject that has been modified,
|
|
* or they can (more efficiently) be bundled together into the default animation (AnimationManager#defaultAnimation)
|
|
* and begin only one animation, at the end of the next transaction.
|
|
*
|
|
* It is useful for the startCondition to be AnimationTrigger.Immediate when changing GraphObject properties
|
|
* on GraphObject#mouseEnter or GraphObject#mouseLeave.
|
|
* It is useful for the startCondition to be AnimationTrigger.Bundled when changing several GraphObject properties together,
|
|
* such as when highlighting multiple parts, on selection changes, and during transactions.
|
|
*
|
|
* These behaviors can be set with the values AnimationTrigger.Immediate and AnimationTrigger.Bundled, respectively.
|
|
* The default value, AnimationTrigger.Default, attempts to infer which is best:
|
|
* It will start immediately if there is no ongoing transaction
|
|
* or if Diagram#skipsUndoManager is true.
|
|
*/
|
|
startCondition: EnumValue;
|
|
/**
|
|
* Used as a value for #startCondition.
|
|
* GoJS will attempt to AnimationTrigger.Bundled or AnimationTrigger.Immediate based on the state of the transaction.
|
|
* If no transaction is ongoing, this trigger will be treated as using AnimationTrigger.Immediate,
|
|
* otherwise it will work as AnimationTrigger.Bundled.
|
|
* @constant
|
|
*/
|
|
static Default: EnumValue;
|
|
/**
|
|
* Used as a value for #startCondition.
|
|
* A new animation will be created for every instance of the property changed, and started immediately,
|
|
* and run until completion. This may be useful for cosmetic changes, such as animating
|
|
* the opacity or color of an object on mouseEnter or mouseLeave.
|
|
* However, using AnimationTrigger.Bundled may be more efficient, as it will create fewer
|
|
* @constant
|
|
*/
|
|
static Immediate: EnumValue;
|
|
/**
|
|
* Used as a value for #startCondition.
|
|
* The AnimationManager will use the default animation to prepare a single Animation that begins when the current transaction has ended.
|
|
* This animation may be canceled if a new transaction is started.
|
|
* @constant
|
|
*/
|
|
static Bundled: EnumValue;
|
|
}
|
|
/**
|
|
* Layers are how named collections of Parts are drawn in front or behind other collections of Parts in a Diagram.
|
|
* Layers can only contain Parts, such as Nodes and Links. They cannot hold GraphObjects directly.
|
|
*
|
|
* You put a Part into a Layer by assigning Part#layerName with the name of the Layer.
|
|
* You can use data binding to initialize and remember a Part's layer's name.
|
|
* You can change a Part's layer by modifying its Part#layerName, which changes its Part#layer.
|
|
*
|
|
* Each Diagram starts off with the following list of Layers:
|
|
* "Grid", "Background", "" (the default layer), "Foreground", "Adornment", "Tool".
|
|
* Parts are normally put in the default layer.
|
|
* The "Grid", "Adornment", and "Tool" layers are considered #isTemporary.
|
|
* Changes to objects in temporary layers are not recorded by the UndoManager.
|
|
* Parts in temporary layers are not selected and are not considered to be part of the document.
|
|
* Objects in temporary layers do not receive click events unless you set their GraphObject#isActionable to true.
|
|
* The "Grid" layer is the furthest back; it also contains "temporary" parts that cannot be selected.
|
|
* Furthermore the "Grid" layer has #pickable set to false so that mouse or touch events
|
|
* and calls to the "find..." methods do not even consider any parts in that layer.
|
|
*
|
|
* Layers have many properties that control what actions users are permitted to perform involving the parts in the layer.
|
|
* These properties are very much like the similarly named properties on Diagram.
|
|
* <h3>Z-ordering</h3>
|
|
*
|
|
* Layers are drawn and presented in order.
|
|
* You can add your own layers by calling Diagram#addLayerBefore or Diagram#addLayerAfter
|
|
* to insert a new layer at a particular place in the Z-order, or to re-order existing layers.
|
|
* Use Diagram#findLayer to get the Layer with a particular name.
|
|
* Parts can be individually z-ordered within a layer by setting Part#zOrder.
|
|
* @unrestricted
|
|
*/
|
|
export class Layer {
|
|
/**
|
|
* This constructs an empty Layer; you should set the #name before adding the Layer to a Diagram.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Find the front-most GraphObject in this layer
|
|
* at the given point in document coordinates.
|
|
*
|
|
* If #visible is false, this method will not find any objects in this layer.
|
|
* However, #opacity does not affect this method.
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @return {GraphObject} The first GraphObject in the Z-order, or else null.
|
|
*/
|
|
findObjectAt<T extends GraphObject>(p: Point, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null): (T | null);
|
|
/**
|
|
* Return a collection of the GraphObjects of this layer
|
|
* at the given point in document coordinates.
|
|
*
|
|
* If #visible is false, this method will not find any objects in this layer.
|
|
* However, #opacity does not affect this method.
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* If this function returns null, the given GraphObject will not be included in the results.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @param {List.<GraphObject>|Set.<GraphObject>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<GraphObject>} a collection of GraphObjects that will contain all GraphObjects
|
|
* located at Point p, or else an empty collection.
|
|
* If a List or Set was passed in, it is returned.
|
|
*/
|
|
findObjectsAt<T extends GraphObject, S extends List<T> | Set<T> = Set<T>>(p: Point, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null, coll?: S): S;
|
|
/**
|
|
* Returns a collection of all GraphObjects that are inside or that intersect
|
|
* a given Rect in document coordinates.
|
|
*
|
|
* If #visible is false, this method will not find any objects in this layer.
|
|
* However, #opacity does not affect this method.
|
|
* @param {Rect} r A Rect in document coordinates.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* If this function returns null, the given GraphObject will not be included in the results.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @param {boolean=} partialInclusion Whether an object can match if it merely intersects the rectangular area (true) or
|
|
* if it must be entirely inside the rectangular area (false). The default value is false.
|
|
* @param {List.<GraphObject>|Set.<GraphObject>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<GraphObject>} a collection of GraphObjects that will contain all GraphObjects
|
|
* located in or near Rect r, or else an empty collection.
|
|
* If a List or Set was passed in, it is returned.
|
|
*/
|
|
findObjectsIn<T extends GraphObject, S extends List<T> | Set<T> = Set<T>>(r: Rect, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null, partialInclusion?: boolean, coll?: S): S;
|
|
/**
|
|
* Returns a collection of all GraphObjects that are within a certain distance
|
|
* of a given point in document coordinates.
|
|
*
|
|
* If #visible is false, this method will not find any objects in this layer.
|
|
* However, #opacity does not affect this method.
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {number} dist The distance from the point.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* If this function returns null, the given GraphObject will not be included in the results.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @param {*=} partialInclusion Whether an object can match if it merely intersects the circular area (true) or
|
|
* if it must be entirely inside the circular area (false). The default value is true.
|
|
* @param {List.<GraphObject>|Set.<GraphObject>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<GraphObject>} a collection of GraphObjects that will contain all GraphObjects
|
|
* located at Point p, or else an empty collection.
|
|
* If a List or Set was passed in, it is returned.
|
|
*/
|
|
findObjectsNear<T extends GraphObject, S extends List<T> | Set<T> = Set<T>>(p: Point, dist: number, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null, partialInclusion?: boolean | S, coll?: S): S;
|
|
/**
|
|
* This read-only property returns an iterator for this Layer's Parts.
|
|
* The Parts can be Nodes, Links, Groups, Adornments, or simple Parts.
|
|
*/
|
|
readonly parts: Iterator<Part>;
|
|
/**
|
|
* This read-only property returns a backwards iterator for this Layer's Parts,
|
|
* for iterating over the parts in reverse order.
|
|
* The Parts can be Nodes, Links, Groups, Adornments, or simple Parts.
|
|
*/
|
|
readonly partsBackwards: Iterator<Part>;
|
|
/**
|
|
* This read-only property returns the Diagram that is using this Layer.
|
|
*/
|
|
readonly diagram: Diagram | null;
|
|
/**
|
|
* Gets or sets the name for this layer.
|
|
* The initial value is an empty string, which is also the name of the default layer.
|
|
* The name should be unique among the diagram's Diagram#layers.
|
|
*/
|
|
name: string;
|
|
/**
|
|
* Gets or sets the opacity for all parts in this layer.
|
|
* The value must be between 0.0 (fully transparent) and 1.0 (no additional transparency).
|
|
* This value is multiplicative with any existing transparency,
|
|
* for instance from a Brush or image transparency.
|
|
* The default value is 1.
|
|
*
|
|
* This property, unlike #visible, does not change whether any objects are found by the "find..." methods.
|
|
* @since 1.1
|
|
* @see GraphObject#opacity
|
|
* @see Diagram#opacity
|
|
*/
|
|
opacity: number;
|
|
/**
|
|
* Gets or sets whether the objects in this layer are considered temporary.
|
|
*
|
|
* Parts in temporary layers are not selectable,
|
|
* and changes to Parts in temporary layers are not recorded in the UndoManager.
|
|
* Objects in temporary layers do not receive click events unless you set their GraphObject#isActionable to true.
|
|
*
|
|
* Temporary layers are excluded from bounds calculations, with the exception of the "Tool" layer,
|
|
* so that temporary objects created while dragging are included in the bounds.
|
|
*
|
|
* Default value is false.
|
|
*/
|
|
isTemporary: boolean;
|
|
/**
|
|
* Gets or sets whether the user may view any of the objects in this layer.
|
|
*
|
|
* The default value is true -- all visible Parts are drawn.
|
|
* When this property is false, all of the "find..." methods will fail to find parts that are in this layer.
|
|
* @see GraphObject#visible
|
|
*/
|
|
visible: boolean;
|
|
/**
|
|
* Gets or sets whether methods such as #findObjectAt find any of the objects in this layer.
|
|
*
|
|
* The default value is true.
|
|
* When this property is false, all of the "find..." methods will fail to find parts that are in this layer.
|
|
*
|
|
* Note that setting pickable to false does not prevent users from selecting nodes.
|
|
* It does prevent them from selecting nodes by clicking on them,
|
|
* but does not prevent selection through other mechanisms such as the DragSelectingTool or
|
|
* CommandHandler#selectAll or calls to Diagram#select.
|
|
*
|
|
* You can control whether individual GraphObjects are "hittable" by setting GraphObject#pickable.
|
|
* @since 1.2
|
|
* @see GraphObject#pickable
|
|
*/
|
|
pickable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may copy objects in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowCopy: boolean;
|
|
/**
|
|
* Gets or sets whether the user may delete objects in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowDelete: boolean;
|
|
/**
|
|
* Gets or sets whether the user may do in-place text editing in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowTextEdit: boolean;
|
|
/**
|
|
* Gets or sets whether the user may group parts together in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowGroup: boolean;
|
|
/**
|
|
* Gets or sets whether the user may ungroup existing groups in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowUngroup: boolean;
|
|
/**
|
|
* Gets or sets whether the user may draw new links in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowLink: boolean;
|
|
/**
|
|
* Gets or sets whether the user may reconnect existing links in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowRelink: boolean;
|
|
/**
|
|
* Gets or sets whether the user may move objects in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowMove: boolean;
|
|
/**
|
|
* Gets or sets whether the user may reshape parts in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowReshape: boolean;
|
|
/**
|
|
* Gets or sets whether the user may resize parts in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowResize: boolean;
|
|
/**
|
|
* Gets or sets whether the user may rotate parts in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowRotate: boolean;
|
|
/**
|
|
* Gets or sets whether the user may select objects in this layer.
|
|
* The initial value is true.
|
|
*/
|
|
allowSelect: boolean;
|
|
}
|
|
/**
|
|
* A Diagram is associated with an HTML DIV element. Constructing a Diagram creates
|
|
* an HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs.
|
|
* **GoJS** will manage the contents of this DIV -- you should not modify the contents of the DIV,
|
|
* although you may style the given DIV (background, border, etc) and position and size it as needed.
|
|
*
|
|
* Minimal Diagram construction looks like this. HTML:
|
|
* ```html
|
|
* <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
|
|
* ```
|
|
*
|
|
* JavaScript:
|
|
* ```js
|
|
* var $ = go.GraphObject.make; // for conciseness
|
|
*
|
|
* myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
|
|
* {
|
|
* "undoManager.isEnabled": true // enable undo & redo
|
|
* });
|
|
* ```
|
|
*
|
|
* The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.
|
|
*
|
|
* Each Diagram holds a set of Layers each of which holds some number of Parts
|
|
* such as Nodes and Links.
|
|
* Each Part consists of GraphObjects such as TextBlocks and Shapes
|
|
* and Panels holding yet more GraphObjects.
|
|
*
|
|
* A Diagram and its Parts provide the visual representation of a Model that holds JavaScript
|
|
* data objects for the nodes and the links.
|
|
* The model provides the way to recognize the relationships between the data.
|
|
* <p class="boxrun">
|
|
* Two Diagrams can display and manipulate the same Model. (<a href="../../samples/updateDemo.html">Example</a>)
|
|
*
|
|
* A diagram will automatically create Nodes and Links corresponding to the model data.
|
|
* The diagram has a number of named templates it uses to create the actual parts:
|
|
* #nodeTemplateMap, #groupTemplateMap, and #linkTemplateMap.
|
|
* Each template may have some data Bindings that set the part's GraphObjects' properties
|
|
* based on the value of properties of the data.
|
|
*
|
|
* A simple Node template and Model data (both nodes and links) may look like this:
|
|
*
|
|
* ```js
|
|
* var $ = go.GraphObject.make; // for conciseness
|
|
*
|
|
* // define a simple Node template
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, "Auto", // the Shape will go around the TextBlock
|
|
* $(go.Shape, "RoundedRectangle",
|
|
* // Shape.fill is bound to Node.data.color
|
|
* new go.Binding("fill", "color")),
|
|
* $(go.TextBlock,
|
|
* { margin: 3 }, // some room around the text
|
|
* // TextBlock.text is bound to Node.data.key
|
|
* new go.Binding("text", "key"))
|
|
* );
|
|
*
|
|
* // create the model data that will be represented by Nodes and Links
|
|
* myDiagram.model = new go.GraphLinksModel(
|
|
* [
|
|
* { key: "Alpha", color: "lightblue" },
|
|
* { key: "Beta", color: "orange" },
|
|
* { key: "Gamma", color: "lightgreen" },
|
|
* { key: "Delta", color: "pink" }
|
|
* ],
|
|
* [
|
|
* { from: "Alpha", to: "Beta" },
|
|
* { from: "Alpha", to: "Gamma" },
|
|
* { from: "Beta", to: "Beta" },
|
|
* { from: "Gamma", to: "Delta" },
|
|
* { from: "Delta", to: "Alpha" }
|
|
* ]);
|
|
* ```
|
|
* <p class="boxrun">
|
|
* The above code is used to make the <a href="../../samples/minimal.html">Minimal sample</a>, a simple example of
|
|
* creating a Diagram and setting its model.
|
|
* <p class="boxread">
|
|
* Read about models on the <a href="../../intro/usingModels.html">Using Models</a> page in the introduction.
|
|
* A diagram is responsible for scrolling (#position) and zooming (#scale) all of the parts that it shows.
|
|
* Each Part occupies some area given by its GraphObject#actualBounds.
|
|
*
|
|
* The union of all of the parts' bounds constitutes the #documentBounds.
|
|
* The document bounds determines the area that the diagram can be scrolled to.
|
|
* There are several properties that you can set, such as #initialContentAlignment,
|
|
* that control the initial size and position of the diagram contents.
|
|
*
|
|
* At any later time you can also explicitly set the #position and/or #scale to
|
|
* get the appearance that you want. But you may find it easier to call methods to get the desired effect.
|
|
* For example, if you want to make a particular Node be centered in the viewport,
|
|
* call either #centerRect or #scrollToRect with the Node's GraphObject#actualBounds,
|
|
* depending on whether or not you want the view to be scrolled if the node is already in view.
|
|
* <p class="boxread">
|
|
* Read in the Introduction about <a href="../../intro/viewport.html">Viewports</a>
|
|
* and the <a href="../../intro/initialView.html">Initial Viewport</a>.
|
|
* You can have the diagram perform automatic layouts of its nodes and links by setting
|
|
* #layout to an instance of the Layout subclass of your choice.
|
|
* The default #layout is an instance of the Layout base class that ignores links and
|
|
* only positions Nodes that do not have a location.
|
|
* This default layout will allow you to programmatically position nodes (including by loading
|
|
* from a database) and will also allow the user to manually position nodes using the DraggingTool.
|
|
*
|
|
* If you do supply a particular layout as the #layout, you can control which Parts it operates
|
|
* on by setting Part#isLayoutPositioned.
|
|
* Normally, of course, it works on all top-level nodes and links.
|
|
* The layout is performed both after the model is first loaded as well as after any part is added or removed
|
|
* or changes visibility or size.
|
|
* You can disable the initial layout by setting Layout#isInitial to false.
|
|
* You can disable later automatic layouts by setting Layout#isOngoing to false.
|
|
* <p class="boxread">
|
|
* See the <a href="../../intro/layouts.html">Layouts</a> page in the Introduction for a summary of layout behavior.
|
|
*
|
|
* A diagram maintains a collection of selected parts, the Diagram#selection.
|
|
* To select a Part you set its Part#isSelected property to true.
|
|
*
|
|
* There are many properties, named "allow...", that control what operations the user
|
|
* may perform on the parts in the diagram. These correspond to the same named
|
|
* properties on Layer that govern the behavior for those parts in a particular layer.
|
|
* Furthermore for some of these properties there are corresponding properties on
|
|
* Part, named "...able", that govern the behavior for that individual part.
|
|
* For example, the #allowCopy property corresponds to Layer#allowCopy and
|
|
* to the property Part#copyable.
|
|
* The Part#canCopy predicate is false if any of these properties is false.
|
|
* <p class="boxread">
|
|
* See the <a href="../../intro/permissions.html">Permissions</a> page for a more thorough discussion.
|
|
*
|
|
* The #commandHandler implements various standard commands,
|
|
* such as the CommandHandler#deleteSelection method and the
|
|
* CommandHandler#canDeleteSelection predicate.
|
|
* <p class="boxread">
|
|
* See the <a href="../../intro/commands.html">Commands</a> page for a listing of keyboard commands and
|
|
* the use of commands in general.
|
|
*
|
|
* The diagram supports modular behavior for mouse events by implementing "tools".
|
|
* All mouse and keyboard events are represented by InputEvents and redirected
|
|
* to the #currentTool.
|
|
* The default tool is an instance of ToolManager which keeps three lists of mode-less tools:
|
|
* ToolManager#mouseDownTools, ToolManager#mouseMoveTools, and ToolManager#mouseUpTools.
|
|
* The ToolManager searches these lists when a mouse event happens to find the first tool that can run.
|
|
* It then makes that tool the new #currentTool, where it can continue to process input events.
|
|
* When the tool is done, it stops itself, causing the #defaultTool to be the new #currentTool.
|
|
*
|
|
* Mouse-down tools include:
|
|
* - ToolManager#actionTool, to support objects like "buttons"
|
|
* - ToolManager#relinkingTool, to reconnect an existing link
|
|
* - ToolManager#linkReshapingTool, to modify the route of an existing link
|
|
* - ToolManager#rotatingTool, to change the angle of an object
|
|
* - ToolManager#resizingTool, to change the size of an object
|
|
*
|
|
* Mouse-move tools include:
|
|
* - ToolManager#linkingTool, to draw a new link
|
|
* - ToolManager#draggingTool, to move or copy the selection
|
|
* - ToolManager#dragSelectingTool, to select parts within a rectangular area
|
|
* - ToolManager#panningTool, to pan the diagram
|
|
*
|
|
* Mouse-up tools include:
|
|
* - ToolManager#contextMenuTool, to manage context menus
|
|
* - ToolManager#textEditingTool, to support in-place text editing
|
|
* - ToolManager#clickCreatingTool, to create new parts where the user clicks
|
|
* - ToolManager#clickSelectingTool, to select parts
|
|
*
|
|
* You can also run a tool in a modal fashion by explicitly setting #currentTool.
|
|
* That tool will keep running until some code replaces the #currentTool.
|
|
* This normally happens when the current tool calls Tool#stopTool, such as on a mouse-up event.
|
|
* <p class="boxread">
|
|
* See the <a href="../../intro/tools.html">Tools</a> page for a listing of predefined tools and how they operate.
|
|
*
|
|
* A diagram raises various DiagramEvents when interesting things happen that may have affected the whole diagram.
|
|
* See the documentation for DiagramEvent for a complete listing.
|
|
*
|
|
* When you need to display multiple Models, but not at the same time, you can do so by using only one Diagram and setting the #model to a different one.
|
|
* You can also have two Diagrams share a DIV by swapping the #div to `null` on one Diagram and setting it on the other.
|
|
* When permanently removing a Diagram,t o clear any memory used,
|
|
* set the #div to `null` and remove all references to the Diagram. These scenarios are discussed more on the
|
|
* <a href="../../intro/replacingDeleting.html">Replacing Diagrams and Models</a> intro page.
|
|
* @unrestricted
|
|
* @category Diagram
|
|
*/
|
|
export class Diagram {
|
|
/**
|
|
* Construct an empty Diagram for a particular DIV HTML element.
|
|
*
|
|
* You will normally initialize properties of the Diagram that control its appearance and behavior.
|
|
* These properties include:
|
|
* - templates (such as #nodeTemplate or #linkSelectionAdornmentTemplate),
|
|
* - an automatic layout (if desired, #layout),
|
|
* - positioning or scaling (such as #initialContentAlignment or #initialAutoScale),
|
|
* - permissions (such as #isReadOnly or #allowDelete), or
|
|
* - Tool or CommandHandler customization (such as CommandHandler#archetypeGroupData or
|
|
* Tool#isEnabled): `diagram.toolManager.dragSelectingTool.isEnabled = false;`.
|
|
*
|
|
* Then you will need to construct a Model (usually a GraphLinksModel) for the Diagram,
|
|
* initialize its data by setting its Model#nodeDataArray and other properties,
|
|
* and then set the diagram's #model.
|
|
*
|
|
* Finally, if you want to disassociate the Diagram from the HTML Div element, set Diagram#div to null.
|
|
* If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to
|
|
* set #div to null in order for the page to recover the memory.
|
|
*
|
|
* It is commonplace to use the static function GraphObject.make to build a Diagram:
|
|
* ```js
|
|
* var $ = go.GraphObject.make;
|
|
*
|
|
* var diagram =
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* {
|
|
* allowZoom: false,
|
|
* "animationManager.isEnabled": false, // turn off automatic animations
|
|
* "grid.visible": true, // display a background grid for the whole diagram
|
|
* "grid.gridCellSize": new go.Size(20, 20),
|
|
* // allow double-click in background to create a new node
|
|
* "clickCreatingTool.archetypeNodeData": { text: "Node" },
|
|
* // allow Ctrl-G to call the groupSelection command
|
|
* "commandHandler.archetypeGroupData":
|
|
* { text: "Group", isGroup: true, color: "blue" },
|
|
* "commandHandler.copiesTree": true, // for the copy command
|
|
* "commandHandler.deletesTree": true, // for the delete command
|
|
* "toolManager.hoverDelay": 100, // how quickly tooltips are shown
|
|
* // mouse wheel zooms instead of scrolls
|
|
* "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
|
|
* "draggingTool.dragsTree": true, // dragging for both move and copy
|
|
* "draggingTool.isGridSnapEnabled": true,
|
|
* layout: $(go.TreeLayout,
|
|
* { angle: 90, sorting: go.TreeLayout.SortingAscending }),
|
|
* "undoManager.isEnabled": true, // enable undo & redo
|
|
* // a Changed listener on the Diagram.model
|
|
* "ModelChanged": function(e) { if (e.isTransactionFinished) saveModel(); }
|
|
* });
|
|
* ```
|
|
* @param {Element|string=} div A reference to a DIV HTML element or its ID as a string.
|
|
* If no DIV is supplied one will be created in memory. The Diagram's Diagram#div property
|
|
* can then be set later on.
|
|
*/
|
|
constructor(div?: Element | string);
|
|
/**
|
|
* Undocumented
|
|
* This static function returns true if Diagrams are using a DOM, false otherwise.
|
|
* This can be false if there is no root <code>document</code> in the JavaScript context,
|
|
* or if the DOM was disabled through #useDOM.
|
|
*/
|
|
static isUsingDOM(): boolean;
|
|
/**
|
|
* Undocumented
|
|
* This static function sets whether or not GoJS should use a DOM, if one exists.
|
|
* Can be set to false to simulate a DOM-less environment.
|
|
* @param {boolean} value
|
|
*/
|
|
static useDOM(value: boolean): void;
|
|
/**
|
|
* Removes all Parts from the Diagram, including unbound Parts except for the background grid,
|
|
* and also clears out the Model and UndoManager and clipboard.
|
|
* This operation is not undoable.
|
|
*
|
|
* Alternative actions are to replace the #model with a new Model
|
|
* (probably a GraphLinksModel or a TreeModel),
|
|
* or to set Model#nodeDataArray with an empty JavaScript Array
|
|
* (and GraphLinksModel#linkDataArray).
|
|
*
|
|
* This does not remove any listeners from the diagram.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
reset(): void;
|
|
/**
|
|
* @expose
|
|
* Used in Diagram constructor setup, this computes the pixel width of the scrollbars
|
|
* @param {HTMLElement=} elem
|
|
*/
|
|
setRTL(elem?: HTMLElement): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {HTMLElement=} elem
|
|
*/
|
|
setScrollWidth(elem?: HTMLElement): void;
|
|
/**
|
|
* This static function gets the Diagram that is attached to an HTML DIV element.
|
|
* @param {Element|string} div
|
|
* @return {Diagram} null if there is no Diagram associated with the given DIV,
|
|
* or if the argument is not a DIV element nor a string naming such a DIV element in the HTML document.
|
|
*/
|
|
static fromDiv(div: Element | string): Diagram | null;
|
|
/**
|
|
* Gets or sets the Diagram's HTMLDivElement, via an HTML Element ID.
|
|
* This is typically set automatically when a Div is supplied as an argument to Diagram's constructor.
|
|
*
|
|
* Setting this property to a new value will clobber any HTML and
|
|
* inner DOM elements inside of both the new and the old divs.
|
|
* It will then populate the Div with the elements
|
|
* (inner Divs, Canvases) needed for the Diagram to function.
|
|
*
|
|
* If you want to disassociate the Diagram from the HTML Div element, set Diagram#div to null.
|
|
* If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to
|
|
* set #div to null in order for the page to recover the memory.
|
|
*
|
|
* You should not attempt to manually modify the contents of this Div.
|
|
* Changing this property value does not raise a Changed event.
|
|
*/
|
|
div: HTMLDivElement | null;
|
|
/**
|
|
* Undocumented, but may be useful for change detection calls in Angular.
|
|
* @expose
|
|
*/
|
|
addEventListener(DOMElement: Element | Window | Document, name: string, listener: any, capture: boolean): void;
|
|
/**
|
|
* Undocumented, but may be useful for change detection calls in Angular.
|
|
* @expose
|
|
*/
|
|
removeEventListener(DOMElement: Element | Window | Document, name: string, listener: any, capture: boolean): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @return {number}
|
|
*/
|
|
computePixelRatio(): number;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
*/
|
|
doFocus(): void;
|
|
/**
|
|
* Explicitly bring HTML focus to the Diagram's canvas.
|
|
* This is called by tools that may create other HTML elements such as TextEditingTool.
|
|
*
|
|
* If #scrollsPageOnFocus is false, this tries to keep the page at the same scroll position
|
|
* that it had before calling #focus.
|
|
* This method is not overridable.
|
|
*/
|
|
focus(): void;
|
|
/**
|
|
* This is called during a Diagram update to determine a new value for #documentBounds.
|
|
* By default this computes the union of the bounds of all the visible
|
|
* GraphObjects in this Diagram, unless Diagram#fixedBounds is set.
|
|
*
|
|
* To compute the bounds of a collection of Parts, call #computePartsBounds.
|
|
* @expose
|
|
* @return {Rect} a Rect in document coordinates.
|
|
*/
|
|
protected computeBounds(): Rect;
|
|
/**
|
|
* Find the union of the GraphObject#actualBounds of all of the Parts in the given collection,
|
|
* excluding Links unless the second argument is true.
|
|
*
|
|
* Unlike #computeBounds, this ignores the visibility of each Part and does not add any padding to the result.
|
|
* @expose
|
|
* @param {Iterable.<Part>|Array.<Part>} coll an iterable collection or Array of Parts.
|
|
* @param {boolean=} includeLinks defaults to false
|
|
* @return {Rect} This returns the bounding area of the given Parts;
|
|
* if there are no Parts in the collection, this returns a Rect with zero width and height and an X and Y that are NaN.
|
|
* @since 1.1
|
|
*/
|
|
computePartsBounds(coll: Iterable<Part> | Array<Part>, includeLinks?: boolean): Rect;
|
|
/**
|
|
* Scales the Diagram to uniformly fit into the viewport. To have this done automatically,
|
|
* set the Diagram's #autoScale to Diagram.Uniform.
|
|
*
|
|
* To Animate zoomToFit, use CommandHandler#zoomToFit.
|
|
* @see CommandHandler#zoomToFit
|
|
*/
|
|
zoomToFit(): void;
|
|
/**
|
|
* Modifies the #scale and #position of the Diagram
|
|
* so that the viewport displays a given document-coordinates rectangle.
|
|
* @param {Rect} r rectangular bounds in document coordinates.
|
|
* @param {EnumValue=} scaling an optional value of either Diagram.Uniform (the default) or Diagram.UniformToFill.
|
|
* @since 1.1
|
|
*/
|
|
zoomToRect(r: Rect, scaling?: EnumValue): void;
|
|
/**
|
|
* Aligns the Diagram's #position based on a desired document Spot and viewport Spot.
|
|
* @param {Spot} documentspot
|
|
* @param {Spot} viewportspot
|
|
*/
|
|
alignDocument(documentspot: Spot, viewportspot: Spot): void;
|
|
/**
|
|
* Undocumented.
|
|
* Sets the GraphObject on which to focus the viewport.
|
|
* @param {GraphObject | null} obj
|
|
* @since 2.1
|
|
*/
|
|
focusObject(obj: GraphObject | null): void;
|
|
/**
|
|
* This convenience function finds the front-most Part
|
|
* that is at a given point that might be selectable and that is not in a temporary layer.
|
|
*
|
|
* This just calls #findObjectAt with appropriate arguments,
|
|
* but ignoring Layers that are Layer#isTemporary.
|
|
* @param {Point} p a Point in document coordinates.
|
|
* @param {boolean=} selectable Whether to only consider parts that are Part#selectable. The default is true.
|
|
* @return {Part}
|
|
* @see #findObjectAt
|
|
* @see #findObjectsAt
|
|
* @see #findObjectsIn
|
|
* @see #findObjectsNear
|
|
* @see #findPartsAt
|
|
* @see #findPartsIn
|
|
* @see #findPartsNear
|
|
*/
|
|
findPartAt(p: Point, selectable?: boolean): Part | null;
|
|
/**
|
|
* Find the front-most GraphObject at the given point in document coordinates.
|
|
*
|
|
* If Layer#visible is false, this method will not find any objects in that layer.
|
|
* However, Layer#opacity does not affect this method.
|
|
*
|
|
* Example usage:
|
|
* ```js
|
|
* // Returns the top-most object that is a selectable Part, or null if there isn't one
|
|
* myDiagram.findObjectAt(
|
|
* myDiagram.lastInput.documentPoint,
|
|
* // Navigation function
|
|
* function(x) { return x.part; },
|
|
* // Because of the navigation function, x will always be a Part.
|
|
* function(x) { return x.canSelect(); }
|
|
* );
|
|
* ```
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @return {GraphObject} The first GraphObject returned by the *navig* function
|
|
* and satisfying the *pred* function that is at the point *p*, in Z-order from front to back,
|
|
* or else null if nothing is found.
|
|
* @see #findObjectsAt
|
|
* @see #findObjectsIn
|
|
* @see #findObjectsNear
|
|
* @see #findPartAt
|
|
*/
|
|
findObjectAt<T extends GraphObject>(p: Point, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null): (T | null);
|
|
/**
|
|
* This convenience function finds all Parts that are at a point in document coordinates
|
|
* and that are not in temporary layers.
|
|
*
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {boolean=} selectable Whether to only consider parts that are Part#selectable. The default is true.
|
|
* @param {List.<Part>|Set.<Part>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<Part>}
|
|
* @see #findPartAt
|
|
* @see #findPartsIn
|
|
* @see #findPartsNear
|
|
* @see #findObjectsAt
|
|
* @since 2.0
|
|
*/
|
|
findPartsAt<T extends Part, S extends List<T> | Set<T> = Set<T>>(p: Point, selectable?: boolean, coll?: S): S;
|
|
/**
|
|
* Return a collection of the GraphObjects at the given point in document coordinates.
|
|
*
|
|
* If Layer#visible is false, this method will not find any objects in that layer.
|
|
* However, Layer#opacity does not affect this method.
|
|
*
|
|
* Example usage:
|
|
* ```js
|
|
* // Returns the Nodes that are at a given point, overlapping each other
|
|
* myDiagram.findObjectsAt(somePoint,
|
|
* // Navigation function -- only return Nodes
|
|
* function(x) { var p = x.part; return (p instanceof go.Node) ? p : null; }
|
|
* );
|
|
* ```
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* If this function returns null, the given GraphObject will not be included in the results.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @param {List.<GraphObject>|Set.<GraphObject>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<GraphObject>} a collection of GraphObjects returned by the *navig* function
|
|
* and satisfying the *pred* that are located at the point *p*, or else an empty collection.
|
|
* If a List or Set was passed in, it is returned.
|
|
* @see #findObjectAt
|
|
* @see #findObjectsIn
|
|
* @see #findObjectsNear
|
|
* @see #findPartsAt
|
|
*/
|
|
findObjectsAt<T extends GraphObject, S extends List<T> | Set<T> = Set<T>>(p: Point, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null, coll?: S): S;
|
|
/**
|
|
* This convenience function finds Parts that are inside or that intersect
|
|
* a given Rect in document coordinates.
|
|
*
|
|
* This just calls #findObjectsIn with appropriate arguments,
|
|
* but ignoring Layers that are Layer#isTemporary.
|
|
* @param {Rect} r a Rect in document coordinates.
|
|
* @param {boolean=} partialInclusion Whether a Part can match if it merely intersects the rectangular area (true) or
|
|
* if it must be entirely inside the rectangular area (false). The default value is false.
|
|
* @param {boolean=} selectable Whether to only consider parts that are Part#selectable. The default is true.
|
|
* @param {List.<Part>|Set.<Part>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<Part>}
|
|
* @see #findPartAt
|
|
* @see #findPartsAt
|
|
* @see #findPartsNear
|
|
* @see #findObjectsIn
|
|
* @since 2.0
|
|
*/
|
|
findPartsIn<T extends Part, S extends List<T> | Set<T> = Set<T>>(r: Rect, partialInclusion?: boolean, selectable?: boolean, coll?: S): S;
|
|
/**
|
|
* Returns a collection of all GraphObjects that are inside or that intersect
|
|
* a given Rect in document coordinates.
|
|
*
|
|
* If Layer#visible is false, this method will not find any objects in that layer.
|
|
* However, Layer#opacity does not affect this method.
|
|
*
|
|
* Example usage:
|
|
* ```js
|
|
* // Returns the Links that intersect a given rectangle and have a certain data property
|
|
* myDiagram.findObjectsIn(someRect,
|
|
* // Navigation function -- only return Links
|
|
* function(x) { var p = x.part; return (p instanceof go.Link) ? p : null; },
|
|
* // Predicate that always receives a Link, due to above navigation function
|
|
* function(link) { return link.data.someProp > 17; },
|
|
* // the links may only partly overlap the given rectangle
|
|
* true
|
|
* );
|
|
* ```
|
|
* @param {Rect} r A Rect in document coordinates.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* If this function returns null, the given GraphObject will not be included in the results.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @param {boolean=} partialInclusion Whether an object can match if it merely intersects the rectangular area (true) or
|
|
* if it must be entirely inside the rectangular area (false). The default value is false.
|
|
* @param {List.<GraphObject>|Set.<GraphObject>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<GraphObject>} a collection of GraphObjects returned by the *navig* function
|
|
* and satisfying the *pred* function that are within the rectangle *r*, or else an empty collection.
|
|
* If a List or Set was passed in, it is returned.
|
|
* @see #findObjectAt
|
|
* @see #findObjectsAt
|
|
* @see #findObjectsNear
|
|
* @see #findPartsIn
|
|
*/
|
|
findObjectsIn<T extends GraphObject, S extends List<T> | Set<T> = Set<T>>(r: Rect, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null, partialInclusion?: boolean, coll?: S): S;
|
|
/**
|
|
* This convenience function finds Parts that are within a certain distance
|
|
* of a given point in document coordinates.
|
|
*
|
|
* This just calls #findObjectsNear with appropriate arguments,
|
|
* but ignoring Layers that are Layer#isTemporary.
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {number} dist The distance from the point.
|
|
* @param {boolean=} partialInclusion Whether an object can match if it merely intersects the circular area (true) or
|
|
* if it must be entirely inside the circular area (false). The default is true.
|
|
* @param {boolean=} selectable Whether to only consider parts that are Part#selectable. The default is true.
|
|
* @param {List.<Part>|Set.<Part>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<Part>}
|
|
* @see #findPartAt
|
|
* @see #findPartsAt
|
|
* @see #findPartsIn
|
|
* @see #findObjectsNear
|
|
* @since 2.0
|
|
*/
|
|
findPartsNear<T extends Part, S extends List<T> | Set<T> = Set<T>>(p: Point, dist: number, partialInclusion?: boolean, selectable?: boolean, coll?: S): S;
|
|
/**
|
|
* Returns a collection of all GraphObjects that are within a certain distance
|
|
* of a given point in document coordinates.
|
|
*
|
|
* If Layer#visible is false, this method will not find any objects in that layer.
|
|
* However, Layer#opacity does not affect this method.
|
|
*
|
|
* Example usage:
|
|
* ```js
|
|
* // Returns the Nodes that intersect a given circular area and have a certain data property
|
|
* myDiagram.findObjectsNear(somePoint,
|
|
* // The circular area is centered at somePoint and has radius 100
|
|
* 100,
|
|
* // Navigation function -- only return Nodes
|
|
* function(x) { var p = x.part; return (p instanceof go.Node) ? p : null; },
|
|
* // Predicate that always receives a Node, due to above navigation function
|
|
* function(node) { return node.data.someProp > 17; },
|
|
* // the nodes may only partly overlap the given circular area
|
|
* true
|
|
* );
|
|
* ```
|
|
* @param {Point} p A Point in document coordinates.
|
|
* @param {number} dist The distance from the point.
|
|
* @param {function(GraphObject):GraphObject | null=} navig A function taking a GraphObject and
|
|
* returning a GraphObject, defaulting to the identity.
|
|
* If this function returns null, the given GraphObject will not be included in the results.
|
|
* @param {function(GraphObject):boolean | null=} pred A function taking the GraphObject
|
|
* returned by navig and returning true if that object should be returned,
|
|
* defaulting to a predicate that always returns true.
|
|
* @param {*=} partialInclusion Whether an object can match if it merely intersects the circular area (true) or
|
|
* if it must be entirely inside the circular area (false). The default value is true.
|
|
* The default is true.
|
|
* @param {List.<GraphObject>|Set.<GraphObject>=} coll An optional collection (List or Set) to add the results to.
|
|
* @return {Iterable.<GraphObject>} a collection of GraphObjects returned by the *navig* function
|
|
* and satisfying the *pred* that are located near the point *p*, or else an empty collection.
|
|
* If a List or Set was passed in, it is returned.
|
|
* @see #findObjectAt
|
|
* @see #findObjectsAt
|
|
* @see #findObjectsIn
|
|
* @see #findPartsNear
|
|
*/
|
|
findObjectsNear<T extends GraphObject, S extends List<T> | Set<T> = Set<T>>(p: Point, dist: number, navig?: ((a: GraphObject) => (T | null)) | null, pred?: ((a: T) => boolean) | null, partialInclusion?: boolean | S, coll?: S): S;
|
|
/**
|
|
* Requests that the Diagram updates its #documentBounds in the near-future.
|
|
*/
|
|
invalidateDocumentBounds(): void;
|
|
/**
|
|
* Undocumented
|
|
*
|
|
* Invalidates all non-layout diagram state and forces an immediate redraw.
|
|
* Because this can be very inefficent, to discourage its use, it remains an undocumented part of the API.
|
|
*/
|
|
redraw(): void;
|
|
/**
|
|
* Updates the diagram immediately, then resets initialization flags so that
|
|
* actions taken in the argument function will be considered part of Diagram initialization,
|
|
* and will participate in initial layouts, #initialAutoScale, #initialContentAlignment, etc.
|
|
*
|
|
* This is useful in situations where you do not wish for the first content added to the diagram to be considered
|
|
* the "initial" content, such as with a Node that represents a "Loading" bar.
|
|
* @param {function()|null=} func an optional function of actions to perform as part of another diagram initialization.
|
|
* @since 1.1
|
|
*/
|
|
delayInitialization(func?: (() => void) | null): void;
|
|
/**
|
|
* Usage of this method is uncommon and may affect performance,
|
|
* for efficiency do not call this method unless you have a well-defined need.
|
|
* Normally, GoJS updates the diagram automatically, and completeing a transaction ensures an immediate update.
|
|
*
|
|
* The most common reason to call this method when the HTML Div has changed size but the window has not changed size,
|
|
* and the Diagram needs to be notified of this DOM change. See an example of resizing diagrams
|
|
* <a href="../../intro/resizing.html">here</a>.
|
|
*
|
|
* Requests that in the near-future the diagram makes sure all GraphObjects are arranged,
|
|
* recomputes the document bounds, updates the scrollbars, and redraws the viewport.
|
|
*
|
|
* @param {boolean=} alwaysQueueUpdate If true the Diagram will queue another update,
|
|
* even if an update is already occurring. The default value is false.
|
|
* Side effects in an "InitialLayoutCompleted" DiagramEvent listener might necessitate setting this parameter.
|
|
* @since 1.6
|
|
*/
|
|
requestUpdate(alwaysQueueUpdate?: boolean): void;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
maybeUpdate(): void;
|
|
/**
|
|
* Undocumented
|
|
* @param {string} name
|
|
* @return {*}
|
|
*/
|
|
getRenderingHint(name: string): any;
|
|
/**
|
|
* Undocumented
|
|
* @param {string} name
|
|
* @param {*} val
|
|
*/
|
|
setRenderingHint(name: string, val: any): void;
|
|
/**
|
|
* Undocumented
|
|
* @param {string} name
|
|
* @return {*}
|
|
*/
|
|
getInputOption(name: string): any;
|
|
/**
|
|
* Undocumented
|
|
* @param {string} name
|
|
* @param {*} val
|
|
*/
|
|
setInputOption(name: string, val: any): void;
|
|
/**
|
|
* This method sets a collection of properties according to the property/value pairs that have been set on the given Object,
|
|
* in the same manner as GraphObject.make does when constructing a Diagram with an argument that is a simple JavaScript Object.
|
|
*
|
|
* You can set properties on an object that is the value of a property of the Diagram,
|
|
* or on the Diagram#toolManager, by using a *subpropname.property* syntax for the property name.
|
|
* At the current time only a single dot is permitted in the property "name".
|
|
*
|
|
* The property name may also be the name of a DiagramEvent, in which case this calls #addDiagramListener with that DiagramEvent name.
|
|
* ```js
|
|
* aDiagram.setProperties({
|
|
* allowDelete: false,
|
|
* // display a background grid for the whole diagram
|
|
* "grid.visible": true,
|
|
* "grid.gridCellSize": new go.Size(20, 20),
|
|
* "animationManager.isEnabled": false, // turn off automatic animations
|
|
* // specify a group membership validation predicate
|
|
* "commandHandler.memberValidation": function(group, part) { return ...; },
|
|
* "commandHandler.copiesTree": true, // for the copy command
|
|
* // mouse wheel zooms instead of scrolls
|
|
* "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
|
|
* "draggingTool.dragsTree": true, // dragging for both move and copy
|
|
* "draggingTool.isGridSnapEnabled": true,
|
|
* layout: $(go.TreeLayout),
|
|
* // add a DiagramEvent listener
|
|
* "ExternalObjectsDropped": function(e) { e.subject.each(function(part) { ... }); }
|
|
* });
|
|
* ```
|
|
* @param {Object} props a plain JavaScript object with various property values to be set on this Diagram or on a part of this Diagram.
|
|
* @since 1.5
|
|
*/
|
|
setProperties(props: ObjectData): void;
|
|
/**
|
|
* Adds a Part to the Layer that matches the Part's Part#layerName,
|
|
* or else the default layer, which is named with the empty string.
|
|
*
|
|
* Normally parts added to a diagram are top-level parts.
|
|
* If you want nodes to be members of a Group, in addition to calling this method
|
|
* call Group#addMembers or set each Part#containingGroup.
|
|
* @param {Part} part
|
|
* @see #remove
|
|
*/
|
|
add(part: Part): void;
|
|
/**
|
|
* Removes a Part from its Layer, provided the Layer is in this Diagram.
|
|
* Removing a Node will also remove any Links that are connected with it.
|
|
* Removing a Group will also remove all of its members.
|
|
* Removing a Link will also remove all of its label Nodes, if it has any.
|
|
* @param {Part} part
|
|
* @see #add
|
|
*/
|
|
remove(part: Part): void;
|
|
/**
|
|
* This method removes from this Diagram all of the Parts in a collection.
|
|
* Removing a Node will also remove any Links that are connected with it.
|
|
* Removing a Group will also remove all of its members.
|
|
* Removing a Link will also remove all of its label Nodes, if it has any.
|
|
*
|
|
* This does not perform a transaction nor does it raise a DiagramEvent.
|
|
* Call CommandHandler#deleteSelection, which calls this method,
|
|
* if you want to delete all selected Parts.
|
|
* The CommandHandler#deleteSelection command may delete other Parts as well, depending on CommandHandler#deletesTree.
|
|
*
|
|
* At this time there is no "addParts" method -- just call Diagram#add on each Part.
|
|
* @param {Iterable.<Part>|Array.<Part>} coll A List or Set or Iterator or Array of Parts.
|
|
* @param {boolean} check Whether to check Part#canDelete on each part.
|
|
* @since 1.3
|
|
*/
|
|
removeParts(coll: Iterable<Part> | Array<Part>, check: boolean): void;
|
|
/**
|
|
* Make a copy of a collection of Parts and return them in a Map mapping each original Part to its copy.
|
|
* It may optionally add them to a given Diagram.
|
|
* Copying a Group will also copy its member Nodes and Links.
|
|
* Copying a Link will also copy any label Nodes that it owns.
|
|
*
|
|
* This does not perform a transaction nor does it raise a DiagramEvent.
|
|
* Call CommandHandler#copySelection, which calls this method,
|
|
* if you want to copy all selected Parts into the clipboard.
|
|
* The CommandHandler#copySelection command may also copy additional Parts as well, depending on CommandHandler#copiesTree.
|
|
* @param {Iterable.<Part>|Array.<Part>} coll A List or a Set or Iterator of Parts, or an Array of Parts.
|
|
* @param {Diagram} diagram The destination diagram; if null, the copied parts are not added to this diagram.
|
|
* @param {boolean} check Whether to check Part#canCopy on each part.
|
|
* @return {Map.<Part,Part>}
|
|
* @since 1.3
|
|
*/
|
|
copyParts(coll: Iterable<Part> | Array<Part>, diagram: Diagram | null, check: boolean): Map<Part, Part>;
|
|
/**
|
|
* Move a collection of Parts in this Diagram by a given offset.
|
|
* Moving a Group will also move its member Nodes and Links.
|
|
* Moving with a zero X and a zero Y offset is potentially useful in order to snap Parts to the grid if DraggingTool#isGridSnapEnabled is true.
|
|
*
|
|
* This does not perform a transaction nor does it raise a DiagramEvent.
|
|
*
|
|
* @param {Iterable.<Part>|Array.<Part>} coll A List or a Set or Iterator of Parts, or an Array of Parts,
|
|
* or null to move all of the Parts in this Diagram.
|
|
* @param {Point} offset the amount to move each Part, in document coordinates.
|
|
* @param {boolean} check Whether to check Part#canMove on each part.
|
|
* @param {DraggingOptions=} dragOptions Optional dragging options. By default this uses the settings from the Diagram's DraggingTool.
|
|
* @since 1.3
|
|
*/
|
|
moveParts(coll: Iterable<Part> | Array<Part>, offset: Point, check: boolean, dragOptions?: DraggingOptions): void;
|
|
/**
|
|
* You do not need to call or orverride this method, but you may want to override DraggingTool#computeMove, which calls this method.
|
|
*
|
|
* This method computes the new location for a Node or simple Part,
|
|
* given a new desired location and an optional Map of dragged parts,
|
|
* taking any grid-snapping into consideration,
|
|
* any Part#dragComputation function,
|
|
* and any Part#minLocation and Part#maxLocation.
|
|
*
|
|
* @expose
|
|
* @param {Part} n the Node or simple Part that is being moved
|
|
* @param {Point} newloc the proposed new location
|
|
* @param {DraggingOptions} dragOptions the proposed new location
|
|
* @param {Point=} result an optional Point that is modified and returned
|
|
* @return {Point} the possibly grid-snapped computed Point that is within the minimum and maximum permitted locations
|
|
* @since 2.0
|
|
*/
|
|
computeMove(n: Part, newloc: Point, dragOptions: DraggingOptions, result?: Point): Point;
|
|
/**
|
|
* Adds a new Layer to the list of layers.
|
|
* If Layer#isTemporary is false, the layer is added after all existing non-temporary layers.
|
|
* If Layer#isTemporary is true, the layer is added as the very last layer.
|
|
* @param {Layer} layer The new Layer to add. It is an error if the Layer already belongs to a Diagram.
|
|
* @see #addLayerBefore
|
|
* @see #addLayerAfter
|
|
* @see #removeLayer
|
|
* @see #findLayer
|
|
*/
|
|
addLayer(layer: Layer): void;
|
|
/**
|
|
* Adds a layer to the list of layers before a specified layer.
|
|
* This method can also re-order layers.
|
|
* @param {Layer} layer the new Layer to add or existing Layer to move in Z-order.
|
|
* @param {Layer} existingLayer the other Layer in this Diagram which should come just after the new or moved layer.
|
|
* @see #addLayer
|
|
* @see #addLayerAfter
|
|
* @see #removeLayer
|
|
*/
|
|
addLayerBefore(layer: Layer, existingLayer: Layer): void;
|
|
/**
|
|
* Adds a layer to the list of layers after a specified layer.
|
|
* This method can also re-order layers.
|
|
* @param {Layer} layer the new Layer to add or existing Layer to move in Z-order.
|
|
* @param {Layer} existingLayer the other Layer in this Diagram which should come just before the new or moved layer.
|
|
* @see #addLayer
|
|
* @see #addLayerBefore
|
|
* @see #removeLayer
|
|
*/
|
|
addLayerAfter(layer: Layer, existingLayer: Layer): void;
|
|
/**
|
|
* Removes the given layer from the list of layers.
|
|
*
|
|
* Removing a layer does not remove the Parts in the layer. Instead, those Parts are placed into the default layer.
|
|
* To remove all Parts in a layer you can call Diagram#removeParts with Layer#parts as the argument.
|
|
*
|
|
* You cannot remove the default layer, the one named with the empty string.
|
|
* @param {Layer} layer
|
|
* @see #addLayer
|
|
* @see #addLayerBefore
|
|
* @see #addLayerAfter
|
|
* @see #findLayer
|
|
*/
|
|
removeLayer(layer: Layer): void;
|
|
/**
|
|
* Finds a layer with a given name.
|
|
* @param {string} name
|
|
* @return {Layer} a Layer with the given name, or null if no such layer was found.
|
|
* @see #addLayerBefore
|
|
* @see #addLayerAfter
|
|
* @see #removeLayer
|
|
*/
|
|
findLayer(name: string): Layer | null;
|
|
/**
|
|
* Register an event handler on this Diagram's Diagram#model that is called when there is a ChangedEvent
|
|
* on the Model, not in this diagram.
|
|
* Be sure to call #removeModelChangedListener when you are done with the diagram.
|
|
*
|
|
* This is convenient when the Diagram#model may be replaced.
|
|
* Using this method to register a Model Changed listener is more convenient than calling Model#addChangedListener directly
|
|
* because when this diagram's Model is replaced, one does not need to call Model#removeChangedListener on the old Model
|
|
* and then Model#addChangedListener again on the new Model.
|
|
*
|
|
* You can establish Model Changed listeners when you create a Diagram with GraphObject.make. For example:
|
|
* ```js
|
|
* $(go.Diagram, . . .,
|
|
* {
|
|
* "ModelChanged": function(e) { if (e.isTransactionFinished) saveModel(e.model); }
|
|
* . . .
|
|
* })
|
|
* ```
|
|
*
|
|
* Do not add or remove Changed listeners during the execution of a Changed listener.
|
|
* @param {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
|
|
* @see #removeModelChangedListener
|
|
* @since 1.6
|
|
*/
|
|
addModelChangedListener(listener: ((e: ChangedEvent) => void)): void;
|
|
/**
|
|
* Unregister a ChangedEvent handler from this Diagram's Diagram#model.
|
|
* @param {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
|
|
* @see #addModelChangedListener
|
|
* @since 1.6
|
|
*/
|
|
removeModelChangedListener(listener: ((e: ChangedEvent) => void)): void;
|
|
/**
|
|
* Register an event handler that is called when there is a ChangedEvent because this Diagram
|
|
* or one of its Parts has changed, but not because the Model or any model data has changed.
|
|
*
|
|
* It is unusual to listen for Diagram ChangedEvents --
|
|
* it is far more common to listen for specific DiagramEvents by calling #addDiagramListener,
|
|
* or to listen for Model ChangedEvents (i.e. changes to the model) by calling #addModelChangedListener.
|
|
*
|
|
* Do not add or remove Changed listeners during the execution of a Changed listener.
|
|
* @param {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
|
|
* @see #removeChangedListener
|
|
*/
|
|
addChangedListener(listener: ((e: ChangedEvent) => void)): void;
|
|
/**
|
|
* Unregister a ChangedEvent handler.
|
|
* @param {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
|
|
* @see #addChangedListener
|
|
*/
|
|
removeChangedListener(listener: ((e: ChangedEvent) => void)): void;
|
|
/**
|
|
* This read-only property returns the AnimationManager for this Diagram.
|
|
* @since 1.4
|
|
*/
|
|
readonly animationManager: AnimationManager;
|
|
/**
|
|
* This read-only property returns the UndoManager for this Diagram, which actually belongs to the #model.
|
|
*
|
|
* The default UndoManager has its UndoManager#isEnabled property set to false.
|
|
* If you want users to undo and redo, you should set that property to true once you have initialized the Diagram or its Model.
|
|
*
|
|
* Note that the UndoManager might be shared with other Diagrams that are showing the same Model.
|
|
* The UndoManager might also be shared with other Models too.
|
|
*/
|
|
readonly undoManager: UndoManager;
|
|
/**
|
|
* Gets or sets whether ChangedEvents are not recorded by the UndoManager.
|
|
* The initial and normal value is false.
|
|
* WARNING: while this property is true do not perform any changes that cause any previous transactions
|
|
* to become impossible to undo.
|
|
*
|
|
* While this property is true, changing the Diagram or any GraphObject does not call UndoManager#handleChanged.
|
|
* Even when this property is true,
|
|
* transactions (such as calls to #startTransaction) and
|
|
* undo/redo (such as calls to CommandHandler#undo)
|
|
* are still delegated to the #undoManager.
|
|
*
|
|
* You should set this to true only temporarily, and you should remember its previous value
|
|
* before setting this to true.
|
|
* When finishing the period for which you want the UndoManager to be disabled,
|
|
* you should set this back to the remembered value it had before it was set to true.
|
|
*
|
|
* For more permanent disabling of the UndoManager, set UndoManager#isEnabled to false.
|
|
*
|
|
* Setting this property also sets Model#skipsUndoManager to the same value.
|
|
* Setting this property does not notify about any changed event.
|
|
*/
|
|
skipsUndoManager: boolean;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
delaysLayout: boolean;
|
|
/**
|
|
* Begin a transaction, where the changes are held by a Transaction object
|
|
* in the UndoManager.
|
|
* This just calls UndoManager#startTransaction.
|
|
* @param {string=} tname a descriptive name for the transaction.
|
|
* @return {boolean} the value returned by UndoManager#startTransaction.
|
|
* @see #commit
|
|
*/
|
|
startTransaction(tname?: string): boolean;
|
|
/**
|
|
* Commit the changes of the current transaction.
|
|
* This just calls UndoManager#commitTransaction.
|
|
* @param {string=} tname a descriptive name for the transaction.
|
|
* @return {boolean} the value returned by UndoManager#commitTransaction.
|
|
*/
|
|
commitTransaction(tname?: string): boolean;
|
|
/**
|
|
* Rollback the current transaction, undoing any recorded changes.
|
|
* This just calls UndoManager#rollbackTransaction.
|
|
* @return {boolean} the value returned by UndoManager#rollbackTransaction.
|
|
*/
|
|
rollbackTransaction(): boolean;
|
|
/**
|
|
* Starts a new transaction, calls the provided function, and commits the transaction.
|
|
* Code is called within a try-finally statement.
|
|
* If the function does not return normally, this rolls back the transaction rather than committing it.
|
|
* Example usage:
|
|
* ```js
|
|
* myDiagram.commit(d => d.remove(somePart), "Remove Part");
|
|
* ```
|
|
* @param {Function} func the function to call as the transaction body
|
|
* @param {(string|null)=} tname a descriptive name for the transaction, or null to temporarily set #skipsUndoManager to true;
|
|
* if no string transaction name is given, an empty string is used as the transaction name
|
|
* @since 1.8
|
|
*/
|
|
commit(func: (d: Diagram) => void, tname?: string | null): void;
|
|
/**
|
|
* Update all of the data-bound properties of Nodes and Links in this diagram,
|
|
* without having to call Model#setDataProperty.
|
|
* This copies/converts model data properties to set properties on Parts.
|
|
* This method does not conduct a transaction, so you need to start and commit one yourself.
|
|
*
|
|
* It is better to call Model#setDataProperty to modify data properties,
|
|
* because that will both record changes for undo/redo and will update all bindings
|
|
* that make depend on that property.
|
|
* Simply modifying the data and calling an "update..." method will not be able to record
|
|
* the previous value(s) of properties in the model data to support undo.
|
|
*
|
|
* If you know which model data objects have been modified,
|
|
* it will be more efficient to update only the Parts that need it
|
|
* by calling Panel#updateTargetBindings.
|
|
*
|
|
* To update relationships between nodes, call #updateAllRelationshipsFromData.
|
|
* @param {string=} srcprop An optional source data property name:
|
|
* when provided, only evaluates those Bindings that use that particular property;
|
|
* when not provided or when it is the empty string, all bindings are evaluated.
|
|
* @see #updateAllRelationshipsFromData
|
|
*/
|
|
updateAllTargetBindings(srcprop?: string): void;
|
|
/**
|
|
* Add or remove any nodes or links according to additional or missing data objects in the model
|
|
* and update all of the references to nodes, in case they had been modified in the model without
|
|
* properly notifying the model by calling Model#addNodeData or
|
|
* GraphLinksModel#removeLinkData or
|
|
* GraphLinksModel#setGroupKeyForNodeData or
|
|
* GraphLinksModel#setToKeyForLinkData or other similar methods.
|
|
* This method does not conduct a transaction, so you need to start and commit one yourself.
|
|
*
|
|
* It is better to call Model#addNodeData, Model#removeNodeData,
|
|
* GraphLinksModel#addLinkData, GraphLinksModel#removeLinkData,
|
|
* Model#setDataProperty, and other model methods to add/remove/modify data,
|
|
* because those methods will both record changes for undo/redo and will update all bindings
|
|
* that make depend on that property.
|
|
* Simply modifying the data and calling an "update..." method will not be able to record
|
|
* the previous value(s) of properties in the model data to support undo.
|
|
*
|
|
* This only adds, removes, or updates the relationships between nodes and links,
|
|
* to have them reflect what is now declared in the model data.
|
|
* If you know which model data objects have been modified,
|
|
* it will be more efficient to update only the Parts that need it
|
|
* by calling Part#updateRelationshipsFromData.
|
|
*
|
|
* To update GraphObject properties that are data bound, call #updateAllTargetBindings.
|
|
* @see #updateAllTargetBindings
|
|
* @since 1.5
|
|
*/
|
|
updateAllRelationshipsFromData(): void;
|
|
/**
|
|
* Deselect all selected Parts.
|
|
* This removes all parts from the #selection collection.
|
|
* This method raises the "ChangingSelection" and "ChangedSelection" Diagram events.
|
|
* @expose
|
|
* @param {boolean=} skipsEvents if true, do not raise the DiagramEvents "ChangingSelection" and "ChangedSelection"; if not supplied the value is assumed to be false.
|
|
* @see #select
|
|
* @see #selectCollection
|
|
*/
|
|
clearSelection(skipsEvents?: boolean): void;
|
|
/**
|
|
* Make the given object the only selected object.
|
|
* This method raises the "ChangingSelection" and "ChangedSelection" Diagram events.
|
|
* @param {Part} part a Part that is already in a layer of this Diagram.
|
|
* If the value is null, this does nothing.
|
|
* @see #selectCollection
|
|
* @see #clearSelection
|
|
*/
|
|
select(part: Part | null): void;
|
|
/**
|
|
* Select all of the Parts supplied in the given collection, and deselect all other Parts.
|
|
* This method raises the "ChangingSelection" and "ChangedSelection" Diagram events.
|
|
* @param {Iterable.<Part>|Array.<Part>} coll a List or Set or Iterator or Array, of Parts to be selected.
|
|
* @see #select
|
|
* @see #clearSelection
|
|
*/
|
|
selectCollection(coll: Iterable<Part> | Array<Part>): void;
|
|
/**
|
|
* Remove highlights from all Parts.
|
|
* This removes all parts from the #highlighteds collection.
|
|
* @expose
|
|
* @see #highlight
|
|
* @see #highlightCollection
|
|
* @see Part#isHighlighted
|
|
* @since 1.4
|
|
*/
|
|
clearHighlighteds(): void;
|
|
/**
|
|
* Make the given part the only highlighted part.
|
|
* @param {Part} part a Part that is already in a layer of this Diagram.
|
|
* If the value is null, this does nothing.
|
|
* @see Part#isHighlighted
|
|
* @see #highlightCollection
|
|
* @see #clearHighlighteds
|
|
* @since 1.4
|
|
*/
|
|
highlight(part: Part | null): void;
|
|
/**
|
|
* Highlight all of the Parts supplied in the given collection, and clear all other highlighted Parts.
|
|
* @param {Iterable.<Part>|Array.<Part>} coll a List or Set or Iterator or Array, of Parts to be highlighted.
|
|
* @see Part#isHighlighted
|
|
* @see #highlight
|
|
* @see #clearHighlighteds
|
|
* @since 1.4
|
|
*/
|
|
highlightCollection(coll: Iterable<Part> | Array<Part>): void;
|
|
/**
|
|
* Scrolling function used by primarily by #commandHandler's CommandHandler#doKeyDown.
|
|
* @param {string} unit A string representing the unit of the scroll operation. Can only be 'pixel', 'line', 'page', or 'document'.
|
|
* @param {string} dir The direction of the scroll operation. Can only be 'up', 'down', 'left', or 'right'.
|
|
* @param {number=} dist An optional distance multiplier, for multiple pixels, lines, or pages. The default value is 1.
|
|
* This argument is ignored when the unit is 'document'.
|
|
* @see #scrollToRect
|
|
* @see #centerRect
|
|
*/
|
|
scroll(unit: ('pixel' | 'line' | 'page' | 'document'), dir: ('up' | 'down' | 'left' | 'right'), dist?: number): void;
|
|
/**
|
|
* Modifies the #position to show a given Rect of the Diagram by centering the
|
|
* viewport on that Rect. Does nothing if the Rect is already in view.
|
|
*
|
|
* See also #centerRect
|
|
* @param {Rect} r
|
|
* @see #centerRect
|
|
* @see #scroll
|
|
* @see CommandHandler#scrollToPart
|
|
*/
|
|
scrollToRect(r: Rect): void;
|
|
/**
|
|
* Modifies the #position to show a given Rect of the Diagram by centering the
|
|
* viewport on that Rect.
|
|
* @param {Rect} r
|
|
* @see #scrollToRect
|
|
* @see #scroll
|
|
*/
|
|
centerRect(r: Rect): void;
|
|
/**
|
|
* Given a Point in document coorindates, return a new Point in viewport coordinates.
|
|
* @param {Point} p
|
|
* @return {Point} The given Point converted into View coordinates.
|
|
* @see #transformViewToDoc
|
|
* @see GraphObject#getDocumentPoint
|
|
*/
|
|
transformDocToView(p: Point): Point;
|
|
/**
|
|
* Given a point in viewport coordinates, return a new Point in document coordinates.
|
|
* @param {Point} p
|
|
* @return {Point} The given point converted into Document coordinates.
|
|
* @see #transformDocToView
|
|
* @see GraphObject#getDocumentPoint
|
|
*/
|
|
transformViewToDoc(p: Point): Point;
|
|
/**
|
|
* The default autoScale type, used as the value of Diagram#autoScale:
|
|
* The Diagram does not attempt to scale so that its documentBounds would fit the view.
|
|
* @constant
|
|
*/
|
|
static None: EnumValue;
|
|
/**
|
|
* Diagrams with this autoScale type, used as the value of Diagram#autoScale,
|
|
* are scaled uniformly until the whole documentBounds fits in the view.
|
|
* @constant
|
|
*/
|
|
static Uniform: EnumValue;
|
|
/**
|
|
* Diagrams with this autoScale type, used as the value of Diagram#autoScale,
|
|
* are scaled until the documentBounds fits in the view in one direction while
|
|
* a scrollbar is still needed in the other direction.
|
|
* @constant
|
|
*/
|
|
static UniformToFill: EnumValue;
|
|
/**
|
|
* This value for Diagram#validCycle states that
|
|
* there are no restrictions on making cycles of links.
|
|
* @constant
|
|
*/
|
|
static CycleAll: EnumValue;
|
|
/**
|
|
* This value for Diagram#validCycle states that
|
|
* a valid link from a node will not produce a directed cycle in the graph.
|
|
* @constant
|
|
*/
|
|
static CycleNotDirected: EnumValue;
|
|
/**
|
|
* This value for Diagram#validCycle states that
|
|
* a valid link from a node will not produce an undirected cycle in the graph.
|
|
* @constant
|
|
*/
|
|
static CycleNotUndirected: EnumValue;
|
|
/**
|
|
* This value for Diagram#validCycle states that
|
|
* any number of destination links may go out of a node, but at most one
|
|
* source link may come into a node, and there are no directed cycles.
|
|
*
|
|
* This value assumes that the graph does not already have any cycles in it,
|
|
* or else the behavior may be indeterminate.
|
|
* @constant
|
|
*/
|
|
static CycleDestinationTree: EnumValue;
|
|
/**
|
|
* This value for Diagram#validCycle states that
|
|
* any number of source links may come into a node, but at most one
|
|
* destination link may go out of a node, and there are no directed cycles.
|
|
*
|
|
* This value assumes that the graph does not already have any cycles in it,
|
|
* or else the behavior may be indeterminate.
|
|
* @constant
|
|
*/
|
|
static CycleSourceTree: EnumValue;
|
|
/**
|
|
* This value for Diagram#scrollMode states that
|
|
* the viewport constrains scrolling to the Diagram document bounds.
|
|
* @constant
|
|
*/
|
|
static DocumentScroll: EnumValue;
|
|
/**
|
|
* This value for Diagram#scrollMode states that
|
|
* the viewport does not constrain scrolling to the Diagram document bounds.
|
|
* @constant
|
|
*/
|
|
static InfiniteScroll: EnumValue;
|
|
/**
|
|
* Gets or sets the opacity for all parts in this diagram.
|
|
* The value must be between 0.0 (fully transparent) and 1.0 (no additional transparency).
|
|
* This value is multiplicative with any existing transparency,
|
|
* for instance from a Brush or image transparency.
|
|
* The default value is 1.
|
|
* @since 2.1
|
|
* @see Layer#opacity
|
|
* @see GraphObject#opacity
|
|
*/
|
|
opacity: number;
|
|
/**
|
|
* Gets or sets what kinds of graphs this diagram allows the user to draw.
|
|
* By default this property is Diagram.CycleAll -- all kinds of cycles are permitted.
|
|
* Common values include Diagram.CycleDestinationTree and Diagram.CycleNotDirected.
|
|
*/
|
|
validCycle: EnumValue;
|
|
/**
|
|
* This read-only property returns an iterator for this Diagram's Layers.
|
|
* @see #addLayer
|
|
* @see #removeLayer
|
|
*/
|
|
readonly layers: Iterator<Layer>;
|
|
/**
|
|
* Gets or sets whether the Diagram's Diagram#model is Model#isReadOnly.
|
|
* @see #isReadOnly
|
|
* @see #isEnabled
|
|
*/
|
|
isModelReadOnly: boolean;
|
|
/**
|
|
* Gets or sets whether the Diagram may be modified by the user,
|
|
* while still allowing the user to scroll, zoom, and select.
|
|
* The initial value is false.
|
|
* @see #isModelReadOnly
|
|
* @see #isEnabled
|
|
*/
|
|
isReadOnly: boolean;
|
|
/**
|
|
* Gets or sets whether the user may interact with the Diagram.
|
|
* @see #isReadOnly
|
|
* @see #isModelReadOnly
|
|
*/
|
|
isEnabled: boolean;
|
|
/**
|
|
* Gets or sets whether the user may copy to or paste parts from the internal clipboard.
|
|
* This allows use of CommandHandler#cutSelection,
|
|
* CommandHandler#copySelection and CommandHandler#pasteSelection.
|
|
* The initial value is true.
|
|
*/
|
|
allowClipboard: boolean;
|
|
/**
|
|
* Gets or sets whether the user may copy objects.
|
|
* The initial value is true.
|
|
*/
|
|
allowCopy: boolean;
|
|
/**
|
|
* Gets or sets whether the user may delete objects from the Diagram.
|
|
* The initial value is true.
|
|
*/
|
|
allowDelete: boolean;
|
|
/**
|
|
* Gets or sets whether the user may start a drag-and-drop in this Diagram,
|
|
* possibly dropping in a different element.
|
|
* The initial value is false.
|
|
*/
|
|
allowDragOut: boolean;
|
|
/**
|
|
* Gets or sets whether the user may end a drag-and-drop operation in this Diagram.
|
|
* This is typically set to true when a Diagram is used with a Palette.
|
|
*
|
|
* The initial value is true.
|
|
*/
|
|
allowDrop: boolean;
|
|
/**
|
|
* Gets or sets whether the user may do in-place text editing.
|
|
* The initial value is true.
|
|
*/
|
|
allowTextEdit: boolean;
|
|
/**
|
|
* Gets or sets whether the user may group parts together.
|
|
* The initial value is true.
|
|
*/
|
|
allowGroup: boolean;
|
|
/**
|
|
* Gets or sets whether the user may ungroup existing groups.
|
|
* The initial value is true.
|
|
*/
|
|
allowUngroup: boolean;
|
|
/**
|
|
* Gets or sets whether the user may add parts to the Diagram.
|
|
* The initial value is true.
|
|
*/
|
|
allowInsert: boolean;
|
|
/**
|
|
* Gets or sets whether the user may draw new links.
|
|
* The initial value is true.
|
|
*/
|
|
allowLink: boolean;
|
|
/**
|
|
* Gets or sets whether the user may reconnect existing links.
|
|
* The initial value is true.
|
|
*/
|
|
allowRelink: boolean;
|
|
/**
|
|
* Gets or sets whether the user may move objects.
|
|
* The initial value is true.
|
|
*/
|
|
allowMove: boolean;
|
|
/**
|
|
* Gets or sets whether the user may reshape parts.
|
|
* The initial value is true.
|
|
*/
|
|
allowReshape: boolean;
|
|
/**
|
|
* Gets or sets whether the user may resize parts.
|
|
* The initial value is true.
|
|
*/
|
|
allowResize: boolean;
|
|
/**
|
|
* Gets or sets whether the user may rotate parts.
|
|
* The initial value is true.
|
|
*/
|
|
allowRotate: boolean;
|
|
/**
|
|
* Gets or sets whether the user may select objects.
|
|
* The initial value is true.
|
|
*/
|
|
allowSelect: boolean;
|
|
/**
|
|
* Gets or sets whether the user may undo or redo any changes.
|
|
* The initial value is true.
|
|
*/
|
|
allowUndo: boolean;
|
|
/**
|
|
* Gets or sets whether the user may zoom into or out of the Diagram.
|
|
* The initial value is true.
|
|
*/
|
|
allowZoom: boolean;
|
|
/**
|
|
* Gets or sets whether the Diagram has a vertical Scrollbar.
|
|
*
|
|
* To enable or disable scrolling itself, use #allowHorizontalScroll and #allowVerticalScroll.
|
|
*
|
|
* Adding or removing a scrollbar modifies the diagram's viewport.
|
|
*
|
|
* The initial value is true.
|
|
* @see #allowVerticalScroll
|
|
* @see #hasHorizontalScrollbar
|
|
*/
|
|
hasVerticalScrollbar: boolean;
|
|
/**
|
|
* Gets or sets whether the Diagram has a horizontal Scrollbar.
|
|
*
|
|
* To enable or disable scrolling itself, use #allowHorizontalScroll and #allowVerticalScroll.
|
|
*
|
|
* Adding or removing a scrollbar modifies the diagram's viewport.
|
|
*
|
|
* The initial value is true.
|
|
* @see #allowHorizontalScroll
|
|
* @see #hasVerticalScrollbar
|
|
*/
|
|
hasHorizontalScrollbar: boolean;
|
|
/**
|
|
* Gets or sets whether the user is allowed to use the horizontal scrollbar.
|
|
* The initial value is true.
|
|
* @see #hasHorizontalScrollbar
|
|
* @see #allowVerticalScroll
|
|
*/
|
|
allowHorizontalScroll: boolean;
|
|
/**
|
|
* Gets or sets whether the user is allowed to use the vertical scrollbar.
|
|
* The initial value is true.
|
|
* @see #hasVerticalScrollbar
|
|
* @see #allowHorizontalScroll
|
|
*/
|
|
allowVerticalScroll: boolean;
|
|
/**
|
|
* Gets or sets the distance in screen pixels that the horizontal scrollbar will scroll
|
|
* when scrolling by a line.
|
|
*
|
|
* The default value is 16.
|
|
* @see #scrollVerticalLineChange
|
|
*/
|
|
scrollHorizontalLineChange: number;
|
|
/**
|
|
* Gets or sets the distance in screen pixels that the vertical scrollbar will scroll
|
|
* when scrolling by a line.
|
|
*
|
|
* The default value is 16.
|
|
* @see #scrollHorizontalLineChange
|
|
*/
|
|
scrollVerticalLineChange: number;
|
|
/**
|
|
* Gets or sets the last InputEvent that occurred.
|
|
*
|
|
* This property is useful in tools and real-time operations for determining
|
|
* where the mouse pointer was most recently located.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* @see #firstInput
|
|
*/
|
|
lastInput: InputEvent;
|
|
/**
|
|
* Gets or sets the most recent mouse-down InputEvent that occurred.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* @see #lastInput
|
|
*/
|
|
firstInput: InputEvent;
|
|
/**
|
|
* Gets or sets the current cursor for the Diagram, overriding the #defaultCursor.
|
|
*
|
|
* Valid CSS cursors are accepted,
|
|
* such as "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", etc.
|
|
*
|
|
* It is possible to use custom cursors with the syntax "url(path_to_image), default".
|
|
* A fallback (like default here) is necessary for a custom cursor to work.
|
|
*
|
|
* To read more about cursor syntax, go to:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">CSS cursors (mozilla.org)</a>.
|
|
*
|
|
* If the specified cursor is not accepted by the platform, GoJS will append
|
|
* `-webkit-` or `-moz-` prefixes.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* Setting this value to the empty string ('') returns the Diagram's cursor to the #defaultCursor.
|
|
* @see #defaultCursor
|
|
* @see GraphObject#cursor
|
|
*/
|
|
currentCursor: string;
|
|
/**
|
|
* Gets or sets the cursor to be used for the Diagram
|
|
* when no GraphObject specifies a different cursor.
|
|
*
|
|
* Valid CSS cursors are accepted,
|
|
* such as "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", etc.
|
|
*
|
|
* It is possible to use custom cursors with the syntax "url(path_to_image), default".
|
|
* A fallback (like default here) is necessary for a custom cursor to work.
|
|
*
|
|
* To read more about cursor syntax, go to:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">CSS cursors (mozilla.org)</a>.
|
|
* The default value is "auto".
|
|
* @see #currentCursor
|
|
* @see GraphObject#cursor
|
|
*/
|
|
defaultCursor: string;
|
|
/**
|
|
* Gets or sets the function to execute when the user single-primary-clicks
|
|
* on the background of the Diagram.
|
|
* This typically involves a mouse-down followed by a prompt mouse-up
|
|
* at approximately the same position using the left (primary) mouse button.
|
|
* This property is used by the ClickSelectingTool
|
|
* when the user clicks on no object.
|
|
* The function is called in addition to the DiagramEvent
|
|
* that is raised with the name "BackgroundSingleClicked".
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see #doubleClick
|
|
* @see #contextClick
|
|
* @see GraphObject#click
|
|
*/
|
|
click: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user double-primary-clicks
|
|
* on the background of the Diagram.
|
|
* This typically involves a mouse-down/up/down/up in rapid succession
|
|
* at approximately the same position using the left (primary) mouse button.
|
|
* This property is used by the ClickSelectingTool
|
|
* when the user clicks on no object.
|
|
* The function is called in addition to the DiagramEvent
|
|
* that is raised with the name "BackgroundDoubleClicked".
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see #click
|
|
* @see #contextClick
|
|
* @see GraphObject#doubleClick
|
|
*/
|
|
doubleClick: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user single-secondary-clicks
|
|
* on the background of the Diagram.
|
|
* This typically involves a mouse-down followed by a prompt mouse-up
|
|
* at approximately the same position using the right (secondary) mouse button.
|
|
* This property is used by the ClickSelectingTool
|
|
* when the user clicks on no object.
|
|
* The function is called in addition to the DiagramEvent
|
|
* that is raised with the name "BackgroundContextClicked".
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see #click
|
|
* @see #doubleClick
|
|
* @see GraphObject#contextClick
|
|
*/
|
|
contextClick: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user moves the mouse in
|
|
* the background of the Diagram without holding down any buttons,
|
|
* not over any GraphObjects.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function.
|
|
* After calling this function the diagram will be updated immediately.
|
|
* @see #mouseHover
|
|
* @see GraphObject#mouseOver
|
|
*/
|
|
mouseOver: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user holds the mouse stationary in
|
|
* the background of the Diagram without holding down any buttons,
|
|
* not over any GraphObjects.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see #mouseOver
|
|
* @see GraphObject#mouseHover
|
|
* @see ToolManager#doMouseHover
|
|
*/
|
|
mouseHover: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user holds the mouse stationary in
|
|
* the background of the Diagram while holding down a button,
|
|
* not over any GraphObjects.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see GraphObject#mouseHold
|
|
* @seev ToolManager#doMouseHover
|
|
*/
|
|
mouseHold: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user is dragging the selection in
|
|
* the background of the Diagram during a DraggingTool drag-and-drop,
|
|
* not over any GraphObjects.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* It is called within the transaction performed by the DraggingTool.
|
|
* By default this property is null.
|
|
*
|
|
* Note that for a drag-and-drop that originates in a different diagram, the target diagram's
|
|
* selection collection will not be the parts that are being dragged.
|
|
* Instead the temporary parts being dragged can be found as the source diagram's DraggingTool#copiedParts.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function.
|
|
* After calling this function the diagram will be updated immediately.
|
|
*
|
|
* For example, if you want to prevent the user from dropping Parts into the background of the diagram,
|
|
* and want to provide feedback about that during a drag:
|
|
* ```js
|
|
* myDiagram.mouseDragOver = function(e) {
|
|
* myDiagram.currentCursor = "no-drop";
|
|
* }
|
|
* ```
|
|
* @see #mouseDrop
|
|
* @see GraphObject#mouseDragEnter
|
|
* @see GraphObject#mouseDragLeave
|
|
*/
|
|
mouseDragOver: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user drops the selection in
|
|
* the background of the Diagram at the end of a DraggingTool drag-and-drop,
|
|
* not onto any GraphObjects.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* It is called within the transaction performed by the DraggingTool.
|
|
* By default this property is null.
|
|
*
|
|
* For example, if you want to prevent the user from dropping Parts into the background of the diagram:
|
|
* ```js
|
|
* myDiagram.mouseDrop = function(e) {
|
|
* myDiagram.currentTool.doCancel();
|
|
* }
|
|
* ```
|
|
* @see #mouseDragOver
|
|
* @see GraphObject#mouseDrop
|
|
*/
|
|
mouseDrop: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets whether drag-and-drop events may be bubbled up to the diagram if not handled by a part.
|
|
* The default value is false -- each Node or Link that in the diagram needs to define
|
|
* its own GraphObject#mouseDragEnter, GraphObject#mouseDragLeave, and GraphObject#mouseDrop
|
|
* event handlers if you want dragging/dropping on a part to act as if the user were acting on the diagram.
|
|
*
|
|
* If set to true, this will call Diagram#mouseDragOver during a drag, even while dragging over top-level parts,
|
|
* and Diagram#mouseDrop will be called even when dropping onto parts.
|
|
*
|
|
* This property will have no impact while dropping on a Group.
|
|
* The Group's mouseDrop and Group#handlesDragDropForMembers should be set if desired.
|
|
*
|
|
* GraphObjects do not have a mouseDragOver property, so if this is set to true, the Diagram's mouseDragOver will
|
|
* always be called, even when dragging over a part.
|
|
* @see #mouseDragOver
|
|
* @see #mouseDrop
|
|
* @see Group#handlesDragDropForMembers
|
|
* @see GraphObject#mouseDrop
|
|
* @since 2.0
|
|
*/
|
|
handlesDragDropForTopLevelParts: boolean;
|
|
/**
|
|
* Gets or sets the function to execute when the mouse enters the Diagram.
|
|
* (When the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter">mouseEnter</a> event fires on the Diagram canvas.)
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see #mouseLeave
|
|
* @see GraphObject#mouseEnter
|
|
* @since 2.0
|
|
*/
|
|
mouseEnter: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the mouse leaves the Diagram.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call #startTransaction and #commitTransaction.
|
|
* @see #mouseEnter
|
|
* @see GraphObject#mouseLeave
|
|
* @since 2.0
|
|
*/
|
|
mouseLeave: ((e: InputEvent) => void) | null;
|
|
/**
|
|
* This Adornment or HTMLInfo is shown when the mouse stays motionless in the background.
|
|
* The default value is null, which means no tooltip is shown.
|
|
*
|
|
* Here is a simple example:
|
|
* ```js
|
|
* diagram.toolTip =
|
|
* $(go.Adornment, "Auto",
|
|
* $(go.Shape, { fill: "#CCFFCC" }),
|
|
* $(go.TextBlock, { margin: 4 },
|
|
* "This diagram lets you control the world.")
|
|
* );
|
|
* ```
|
|
* @see GraphObject#toolTip
|
|
* @see ToolManager#doToolTip
|
|
*/
|
|
toolTip: Adornment | HTMLInfo | null;
|
|
/**
|
|
* This Adornment or HTMLInfo is shown when the use context clicks in the background.
|
|
* The default value is null, which means no context menu is shown.
|
|
* On touch devices, a special default context menu will appear even there is no context menu defined.
|
|
* See ContextMenuTool#defaultTouchContextMenu for details.
|
|
*
|
|
* ```js
|
|
* diagram.contextMenu =
|
|
* $("ContextMenu",
|
|
* $("ContextMenuButton",
|
|
* $(go.TextBlock, "Undo"),
|
|
* { click: function(e, obj) { e.diagram.commandHandler.undo(); } },
|
|
* new go.Binding("visible", "", function(o) {
|
|
* return o.diagram.commandHandler.canUndo();
|
|
* }).ofObject()),
|
|
* $("ContextMenuButton",
|
|
* $(go.TextBlock, "Redo"),
|
|
* { click: function(e, obj) { e.diagram.commandHandler.redo(); } },
|
|
* new go.Binding("visible", "", function(o) {
|
|
* return o.diagram.commandHandler.canRedo();
|
|
* }).ofObject())
|
|
* );
|
|
* ```
|
|
* @see GraphObject#contextMenu
|
|
* @see ContextMenuTool
|
|
*/
|
|
contextMenu: Adornment | HTMLInfo | null;
|
|
/**
|
|
* Gets or sets the CommandHandler for this Diagram.
|
|
*
|
|
* This is set to a new instance of CommandHandler on Diagram instantiation.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* The value cannot be null and must not be shared with other Diagrams.
|
|
*/
|
|
commandHandler: CommandHandler;
|
|
/**
|
|
* Gets or sets the ToolManager for this Diagram.
|
|
* This tool is used for mode-less operation.
|
|
* It is responsible for choosing a particular tool to run as the #currentTool.
|
|
*
|
|
* This tool is normally also the #defaultTool.
|
|
* If you don't want the ToolManager to run at all,
|
|
* replace the #defaultTool with your own tool.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* The value cannot be null and must not be shared with other Diagrams.
|
|
* If you set this property, you will probably also want to set #defaultTool.
|
|
* @see #defaultTool
|
|
*/
|
|
toolManager: ToolManager;
|
|
/**
|
|
* Gets or sets the default tool for this Diagram that becomes the current tool when the current tool stops.
|
|
* Initially this value is the same tool as #toolManager, which is an instance of ToolManager.
|
|
*
|
|
* Setting this property also sets the #currentTool if the old default tool is the currently running tool.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* The value cannot be null and must not be shared with other Diagrams.
|
|
* @see #currentTool
|
|
* @see #toolManager
|
|
*/
|
|
defaultTool: Tool;
|
|
/**
|
|
* Gets or sets the current tool for this Diagram that handles all input events.
|
|
* This value is frequently replaced by the #toolManager as different tools run.
|
|
*
|
|
* Each Diagram has a number of tools that define its behavior when responding to mouse events.
|
|
* These include ClickSelectingTool, DraggingTool, DragSelectingTool, LinkingTool, and ResizingTool, among others.
|
|
*
|
|
* Initially this is set to the value of #defaultTool.
|
|
* Setting this to a null value is treated as if it were set to the #defaultTool,
|
|
* because there should always be a currently running tool, except when the diagram is being initialized.
|
|
*
|
|
* A ToolManager is the default tool used by a Diagram - it chooses to run one of the other tools
|
|
* depending on the circumstances.
|
|
*
|
|
* Setting this property to a new tool stops the previous current tool
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* @see #defaultTool
|
|
* @see #toolManager
|
|
*/
|
|
currentTool: Tool;
|
|
/**
|
|
* This read-only property returns the read-only collection of selected objects.
|
|
*
|
|
* Do not modify this collection.
|
|
* If you want to select or deselect a particular object in a Diagram,
|
|
* set the Part#isSelected property.
|
|
* If you want to deselect all objects, call #clearSelection.
|
|
* If you want to deselect all objects and select a single object, call #select.
|
|
*
|
|
* You can limit how many objects the user can select by setting #maxSelectionCount.
|
|
*/
|
|
readonly selection: Set<Part>;
|
|
/**
|
|
* Gets or sets the maximum number of selected objects.
|
|
* The default value is a large positive integer.
|
|
* Values must be non-negative.
|
|
* Decreasing this value may cause objects to be removed from #selection
|
|
* in order to meet the new lower limit.
|
|
*/
|
|
maxSelectionCount: number;
|
|
/**
|
|
* Gets or sets the default selection Adornment template, used to adorn selected Parts other than Groups or Links.
|
|
*
|
|
* Each Node or simple Part can have its own Part#selectionAdornmentTemplate,
|
|
* which if non-null will take precedence over this Diagram property.
|
|
*
|
|
* This Adornment must not be in the visual tree of any Diagram.
|
|
*/
|
|
nodeSelectionAdornmentTemplate: Adornment;
|
|
/**
|
|
* Gets or sets the default selection Adornment template, used to adorn selected Groups.
|
|
*
|
|
* Each Group can have its own Part#selectionAdornmentTemplate, which if non-null will take precedence over this Diagram property.
|
|
*
|
|
* This Adornment must not be in the visual tree of any Diagram.
|
|
*/
|
|
groupSelectionAdornmentTemplate: Adornment;
|
|
/**
|
|
* Gets or sets the default selection Adornment template, used to adorn selected Links.
|
|
*
|
|
* Each Link can have its own Part#selectionAdornmentTemplate, which if non-null will take precedence over this Diagram property.
|
|
*
|
|
* This Adornment must not be in the visual tree of any Diagram.
|
|
*/
|
|
linkSelectionAdornmentTemplate: Adornment;
|
|
/**
|
|
* This read-only property returns the read-only collection of highlighted parts.
|
|
*
|
|
* Do not modify this collection.
|
|
* If you want to highlight or remove the highlight for a particular Part in a Diagram,
|
|
* set the Part#isHighlighted property.
|
|
* If you want to remove all highlights, call #clearHighlighteds.
|
|
* If you want to removal all highlights and highlight a single object, call #highlight.
|
|
*/
|
|
readonly highlighteds: Set<Part>;
|
|
/**
|
|
* Gets or sets whether this Diagram's state has been modified.
|
|
* Setting this property does not notify about any changed event,
|
|
* but it does raise the "Modified" DiagramEvent,
|
|
* although perhaps not immediately.
|
|
*
|
|
* Returns true if the Diagram has been changed,
|
|
* if the #undoManager has recorded any changes, or
|
|
* if an undo has been performed without a corresponding redo.
|
|
*
|
|
* Replacing the #model automatically sets this property to false after the initial layout has completed.
|
|
* The "Modified" DiagramEvent is also raised when an undo or a redo has finished.
|
|
* A "Modified" DiagramEvent listener must not modify this Diagram or its Model.
|
|
*/
|
|
isModified: boolean;
|
|
/**
|
|
* Gets or sets the Model holding data corresponding to the
|
|
* data-bound nodes and links of this Diagram.
|
|
*
|
|
* Replacing this value causes all of the bound Nodes and Links to be deleted and re-created
|
|
* from the new model data.
|
|
*
|
|
* Models may be shared by multiple Diagrams. One common approach is to have two
|
|
* Diagrams displaying the same Model but using different templates
|
|
* (see #nodeTemplate, #nodeTemplateMap, and the associated link and group properties) and sometimes even different Layouts.
|
|
*
|
|
* Setting this property does not notify about any changed event; the new value must not be null.
|
|
* Typically a new Model will have its own UndoManager, thereby replacing the Diagram's
|
|
* current UndoManager.
|
|
*
|
|
* Replacing or re-setting the model will re-initialize the Diagram, taking in to account
|
|
* #initialPosition, #initialScale, #initialAutoScale, and #initialContentAlignment.
|
|
* It will also set #isModified to false.
|
|
*
|
|
* The default behavior when replacing the model is to copy a few UndoManager properties to the
|
|
* new UndoManager, including UndoManager#isEnabled and UndoManager#maxHistoryLength.
|
|
*
|
|
* It is an error to replace the Diagram.model while a transaction is in progress.
|
|
*/
|
|
model: Model;
|
|
/**
|
|
* Gets or sets the license key.
|
|
* @since 2.0
|
|
*/
|
|
static licenseKey: string;
|
|
/**
|
|
* Gets the current GoJS version.
|
|
* @since 2.0
|
|
*/
|
|
static readonly version: string;
|
|
/**
|
|
* Remove all of the Parts created from model data
|
|
* and then create them again.
|
|
* This must be called after modifying or replacing any of the template maps
|
|
* such as #nodeTemplateMap.
|
|
* This re-selects all of the new Parts that were created from data of the original selected Parts.
|
|
*
|
|
* If you modify a template Map, there is no notification that the map has changed.
|
|
* You will need to call rebuildParts explicitly.
|
|
* If you are replacing the #nodeTemplate or the #nodeTemplateMap or
|
|
* the corresponding properties for Groups or Links,
|
|
* the Diagram property setters will automatically call rebuildParts.
|
|
*
|
|
* It is extremely wasteful to call this method after making some model data changes that you want to
|
|
* be reflected in the diagram. Instead, it is better call Model#setDataProperty,
|
|
* Model#addNodeData, Model#removeNodeData, or other model methods.
|
|
* Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.
|
|
*/
|
|
rebuildParts(): void;
|
|
/**
|
|
* Look for a Part or Node or Group corresponding to a model's data object's unique key.
|
|
* This will find a Link if the model is a GraphLinksModel that is maintaining a key on the link data objects.
|
|
* @param {(string|number|undefined)} key a string or number.
|
|
* @return {Part} null if a data with that key cannot be found in the model,
|
|
* or if a corresponding Part cannot be found in the Diagram.
|
|
* This will not return a Link unless the model is a GraphLinksModel and
|
|
* GraphLinksModel#linkKeyProperty has been set.
|
|
* If the same key is used for both a node data object and a link data object, this will return a Node.
|
|
*/
|
|
findPartForKey(key: Key): Part | null;
|
|
/**
|
|
* Look for a Node or Group corresponding to a model's node data object's unique key.
|
|
* @param {(string|number|undefined)} key a string or number.
|
|
* @return {Node} null if a node data with that key cannot be found in the model,
|
|
* or if a corresponding Node or Group cannot be found in the Diagram,
|
|
* or if what is found is just a Part.
|
|
*/
|
|
findNodeForKey(key: Key): Node | null;
|
|
/**
|
|
* Look for a Link corresponding to a model's link data object's unique key.
|
|
* @param {(string|number|undefined)} key a string or number.
|
|
* @return {Link} null if a link data with that key cannot be found in the model,
|
|
* or if a corresponding Link cannot be found in the Diagram,
|
|
* or if the model is a GraphLinksModel without GraphLinksModel#linkKeyProperty set to a non-empty string.
|
|
* @since 2.1
|
|
*/
|
|
findLinkForKey(key: Key): Link | null;
|
|
/**
|
|
* Look for a Part, Node, Group, or Link corresponding to a Model's data object.
|
|
* We recommend that you call #findNodeForData or #findLinkForData if you are looking for a Node or a Link.
|
|
* @param {Object} data a JavaScript object matched by reference identity
|
|
* @return {Part} an existing Part in this Diagram that was
|
|
* created because its `Part.data` was the data in the Diagram's Model.
|
|
*/
|
|
findPartForData(data: ObjectData): Part | null;
|
|
/**
|
|
* Look for a Node or Group corresponding to a model's node data object.
|
|
* @param {Object} nodedata a JavaScript object matched by reference identity;
|
|
* use #findNodesByExample if you want to find those Nodes whose data matches an example data object
|
|
* @return {Node} an existing Node or Group in this Diagram that was
|
|
* created because its `Part.data` was the node data in the Diagram's Model.
|
|
* This will be null if there is no such part or if it's just a Part or Link.
|
|
*/
|
|
findNodeForData(nodedata: ObjectData): Node | null;
|
|
/**
|
|
* Look for a Link corresponding to a GraphLinksModel's link data object.
|
|
* @param {Object} linkdata a JavaScript object matched by reference identity;
|
|
* use #findLinksByExample if you want to find those Links whose data matches an example data object
|
|
* @return {Link} an existing Link in this Diagram that was
|
|
* created because its `Part.data` was the link data in the Diagram's Model.
|
|
*/
|
|
findLinkForData(linkdata: ObjectData): Link | null;
|
|
/**
|
|
* Search for Nodes or Groups by matching the Node data with example data holding values, RegExps, or predicates.
|
|
*
|
|
* For example, calling this method with an argument object:
|
|
* `{ sex: "M", name: /^Alex/i, age: function(n) { return n >= 18; } }`
|
|
* will return an iterator of Nodes whose `Node.data` is a JavaScript object whose:
|
|
* - sex is "M" (a case-sensitive string comparison), and
|
|
* - name starts with the string "Alex" (using a case-insensitive match), and
|
|
* - age is greater than or equal to 18
|
|
*
|
|
* Here is how an example value can match the corresponding data value:
|
|
* - A string, number, or boolean is compared with the === operator.
|
|
* - A function is treated as a predicate and applied to the data value.
|
|
* - A regular expression (RexExp) is matched against the toString() of the data value.
|
|
* Common expressions include:
|
|
* - `/abc/` matches any string that includes exactly the substring "abc"
|
|
* - `/abc/i` matches any string that includes the substring "abc", but uses a case-insensitive comparison
|
|
* - `/^no/i` matches any string that starts with "no", ignoring case
|
|
* - `/ism$` matches any string that ends with "ism" exactly
|
|
* - `/(green|red) apple/` matches any string that includes either "green apple" or "red apple"
|
|
*
|
|
* For more details read <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions (mozilla.org)</a>.
|
|
* - An Array requires the data value to also be an Array of equal or greater length.
|
|
* Each example array item that is not undefined is matched with the corresponding data array item.
|
|
* - An Object is recursively matched with the data value, which must also be an Object.
|
|
*
|
|
* All properties given by the argument example data must be present on the node data,
|
|
* unless the example property value is undefined.
|
|
* All other data properties are ignored when matching.
|
|
*
|
|
* When multiple argument objects are given, if any of the objects match the node's data,
|
|
* the node is included in the results.
|
|
* @param {...Object} examples one or more JavaScript Objects whose properties are either predicates to be
|
|
* applied or RegExps to be tested or values to be compared to the corresponding data property value
|
|
* @return {Iterator.<Node>}
|
|
* @see #findLinksByExample
|
|
* @since 1.5
|
|
*/
|
|
findNodesByExample(...examples: Array<ObjectData>): Iterator<Node>;
|
|
/**
|
|
* Search for Links by matching the Link data with example data holding values, RegExps, or predicates.
|
|
*
|
|
* See the documentation of #findNodesByExample for how the example
|
|
* data can match data of bound Parts.
|
|
* @param {...Object} examples one or more JavaScript Objects whose properties are either predicates to be
|
|
* applied or RegExps to be tested or values to be compared to the corresponding data property value
|
|
* @return {Iterator.<Link>}
|
|
* @see #findNodesByExample
|
|
* @since 1.5
|
|
*/
|
|
findLinksByExample(...examples: Array<ObjectData>): Iterator<Link>;
|
|
/**
|
|
* Gets or sets the default Node template used as the archetype
|
|
* for node data that is added to the #model.
|
|
* Setting this property just modifies the #nodeTemplateMap
|
|
* by replacing the entry named with the empty string.
|
|
*
|
|
* The value must not be null.
|
|
* The template may be either a Node or a simple Part,
|
|
* but not a Link or a Group.
|
|
*
|
|
* This Part must not be in the visual tree of any Diagram.
|
|
*/
|
|
nodeTemplate: Part;
|
|
/**
|
|
* Gets or sets a Map mapping template names to Parts.
|
|
* These nodes are copied for each node data that is added to the #model.
|
|
*
|
|
* The new value must not be null and must contain Nodes or simple Parts.
|
|
* These Parts must not be in the visual tree of any Diagram.
|
|
* Replacing this Map will automatically call #rebuildParts.
|
|
*
|
|
* If you modify this Map, by replacing a Node or by adding or
|
|
* removing a map entry, you need to explicitly call #rebuildParts afterwards.
|
|
* Any new map values must not be Links or Groups.
|
|
*
|
|
* If you want to create Groups, use #groupTemplateMap instead.
|
|
*/
|
|
nodeTemplateMap: Map<string, Part>;
|
|
/**
|
|
* Gets or sets the default Group template used as the archetype
|
|
* for group data that is added to the #model.
|
|
*
|
|
* Setting this property just modifies the #groupTemplateMap
|
|
* by replacing the entry named with the empty string.
|
|
* The value must not be null and must be a Group, not a Node or simple Part.
|
|
* This Part must not be in the visual tree of any Diagram.
|
|
*/
|
|
groupTemplate: Group;
|
|
/**
|
|
* Gets or sets a Map mapping template names to Groups.
|
|
* These groups are copied for each group data that is added to the #model.
|
|
*
|
|
* The new value must not be null, nor may it contain a Node or Link or simple Part.
|
|
* The Links must not be in the visual tree of any Diagram.
|
|
* Replacing this Map will automatically call #rebuildParts.
|
|
*
|
|
* If you modify this Map, by replacing a Group in it or by adding or
|
|
* removing a map entry, you need to explicitly call #rebuildParts afterwards.
|
|
*/
|
|
groupTemplateMap: Map<string, Group>;
|
|
/**
|
|
* Gets or sets the default Link template used as the archetype
|
|
* for link data that is added to the #model.
|
|
*
|
|
* Setting this property just modifies the #linkTemplateMap
|
|
* by replacing the entry named with the empty string.
|
|
* The value must not be null and must be a Link, not a Node or simple Part.
|
|
* This Link must not be in the visual tree of any Diagram.
|
|
*/
|
|
linkTemplate: Link;
|
|
/**
|
|
* Gets or sets a Map mapping template names to Links.
|
|
* These links are copied for each link data that is added to the #model.
|
|
*
|
|
* The new value must not be null and must contain only Links, not Nodes or simple Parts.
|
|
* The Links must not be in the visual tree of any Diagram.
|
|
* Replacing this Map will automatically call #rebuildParts.
|
|
*
|
|
* If you modify this Map, by replacing a Link in it or by adding or
|
|
* removing a map entry, you need to explicitly call #rebuildParts afterwards.
|
|
*/
|
|
linkTemplateMap: Map<string, Link>;
|
|
/**
|
|
* Gets or sets whether mouse events initiated within the Diagram will be captured.
|
|
* The initial value is true.
|
|
* Setting this property does not notify about any changed event.
|
|
*/
|
|
isMouseCaptured: boolean;
|
|
/**
|
|
* Gets or sets the coordinates of this Diagram in the viewport.
|
|
* Value must be of type Point in document coordinates.
|
|
* The default is Point(NaN, NaN), but is typically set to a real value when a Diagram is initialized.
|
|
*
|
|
* Scrolling and panning the Diagram modify the Diagram's position.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* However you can listen with #addDiagramListener for a DiagramEvent
|
|
* with the name "ViewportBoundsChanged".
|
|
*
|
|
* The #viewportBounds x and y values are always the same as the Diagram's position values.
|
|
*
|
|
* If you set this property any replacement of the #model will result in a layout
|
|
* and a computation of new #documentBounds, which in turn may cause the diagram to be scrolled
|
|
* and zoomed, depending on various Diagram properties named "initial...".
|
|
* You may want to set #initialPosition instead of setting this property around the time
|
|
* that you are loading a model.
|
|
*/
|
|
position: Point;
|
|
/**
|
|
* Gets or sets the initial coordinates of this Diagram in the viewport, eventually setting the #position.
|
|
* This value is relevant on initialization of a #model or if #delayInitialization is called.
|
|
* Value must be of type Point in document coordinates.
|
|
* The default is Point(NaN, NaN).
|
|
*
|
|
* Setting this property has the same effect as implementing
|
|
* an "InitialLayoutCompleted" DiagramEvent listener that sets #position.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* @see #initialDocumentSpot
|
|
* @see #initialViewportSpot
|
|
* @since 1.1
|
|
*/
|
|
initialPosition: Point;
|
|
/**
|
|
* Gets or sets the initial scale of this Diagram in the viewport, eventually setting the #scale.
|
|
* This value is relevant on initialization of a #model or if #delayInitialization is called.
|
|
* The default is NaN.
|
|
*
|
|
* Setting this property has the same effect as implementing
|
|
* an "InitialLayoutCompleted" DiagramEvent listener that sets #scale.
|
|
* @since 1.1
|
|
*/
|
|
initialScale: number;
|
|
/**
|
|
* Gets or sets a Panel of type Panel.Grid acting as the background grid
|
|
* extending across the whole viewport of this diagram.
|
|
*/
|
|
grid: Panel;
|
|
/**
|
|
* This read-only property returns the bounds of the portion of the Diagram in document coordinates that is viewable from its HTML Canvas.
|
|
* Typically when the viewport bounds are smaller than the #documentBounds, the user can scroll or pan the view.
|
|
*
|
|
* The x and y coordinates are equal to the #position of the Diagram,
|
|
* and the width and height are equal to the Diagram's canvas width and height,
|
|
* divided by the #scale.
|
|
*/
|
|
readonly viewportBounds: Rect;
|
|
/**
|
|
* Gets or sets a fixed bounding rectangle to be returned by #viewportBounds
|
|
* when #div is null.
|
|
* By default this is (NaN, NaN), and it is not typically set except in DOM-less environments
|
|
* where there will not be a Diagram DIV. Normally, the viewportBounds is sized by the DIV.
|
|
*
|
|
* See the intro page on <a href="../../intro/nodeScript.html">GoJS within Node</a> for a usage example.
|
|
*
|
|
* @since 2.0
|
|
*/
|
|
viewSize: Size;
|
|
/**
|
|
* Gets or sets a fixed bounding rectangle to be returned by #documentBounds
|
|
* and #computeBounds.
|
|
* By default this has NaN values, meaning that #computeBounds
|
|
* will compute the union of all of the parts in the Diagram to determine the #documentBounds.
|
|
* If all x/y/width/height values are real numbers, this value is used as the #documentBounds.
|
|
*/
|
|
fixedBounds: Rect;
|
|
/**
|
|
* Gets or sets a scrollable area in document coordinates that surrounds the document bounds, allowing the user to scroll into empty space.
|
|
*
|
|
* The margin is only effective in each direction when the document bounds plus margin is greater than the viewport bounds.
|
|
*
|
|
* The default value is a margin of 0, all around the edge of the document.
|
|
* @since 1.5
|
|
*/
|
|
scrollMargin: MarginLike;
|
|
/**
|
|
* Gets or sets the scrollMode of the Diagram, allowing the user to either
|
|
* scroll to document bound borders with Diagram.DocumentScroll,
|
|
* or scroll endlessly with Diagram.InfiniteScroll.
|
|
*
|
|
* The default value is Diagram.DocumentScroll.
|
|
* Changing this property value does not raise a Changed event.
|
|
* @since 1.5
|
|
*/
|
|
scrollMode: EnumValue;
|
|
/**
|
|
* Gets or sets whether the page may be scrolled when the diagram receives focus.
|
|
* This happens in some browsers when the top-left corner of the diagram's HTMLDivElement
|
|
* is scrolled out of view, the diagram does not have focus, and the user clicks in the diagram.
|
|
*
|
|
* The default value is false.
|
|
* @since 1.8
|
|
*/
|
|
scrollsPageOnFocus: boolean;
|
|
/**
|
|
* Gets or sets the function used to determine the position that this Diagram can be scrolled or moved to.
|
|
*
|
|
* By default this function is null and the Diagram's position is bound only by the document bounds.
|
|
*
|
|
* When this property is set the function is given a reference to the diagram and the proposed new position Point.
|
|
* The function must return a new point.
|
|
*
|
|
* An example that disallows decimal position values:
|
|
* ```js
|
|
* function computeIntegralPosition(diagram, pt) {
|
|
* return new go.Point(Math.floor(pt.x), Math.floor(pt.y));
|
|
* }
|
|
* ```
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
* @since 1.5
|
|
*/
|
|
positionComputation: ((thisDiagram: Diagram, newPosition: Point) => Point) | null;
|
|
/**
|
|
* Gets or sets the function used to determine valid scale values for this Diagram.
|
|
* @since 1.5
|
|
*/
|
|
scaleComputation: ((thisDiagram: Diagram, newScale: number) => number) | null;
|
|
/**
|
|
* This read-only property returns the bounds of the diagram's contents, in document coordinates.
|
|
*
|
|
* This is normally computed and set by #computeBounds during Diagram updates
|
|
* that can occur for any number of relevant reasons, such as a Part changing size.
|
|
*
|
|
* The Diagram's documentBounds can have an unvarying specific value
|
|
* by setting the #fixedBounds property.
|
|
*
|
|
* If the documentBounds are larger than the #viewportBounds,
|
|
* scrollbars will appear on desktop browsers. You can disable scrolling with the
|
|
* #allowHorizontalScroll and #allowVerticalScroll properties, and
|
|
* you can disable scrollbars themselves with the #hasHorizontalScrollbar
|
|
* and #hasVerticalScrollbar properties.
|
|
*/
|
|
readonly documentBounds: Rect;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
isVirtualized: boolean;
|
|
/**
|
|
* Gets or sets the scale transform of this Diagram.
|
|
* Value must be a positive number.
|
|
* The default value is 1.
|
|
* Any new value will be coerced to be between #minScale and #maxScale.
|
|
*
|
|
* Scale can automatically be set by the #autoScale property.
|
|
* There are also #initialScale and #initialAutoScale for
|
|
* setting the scale on (re)initialization of a Diagram.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* However you can listen with #addDiagramListener for a DiagramEvent
|
|
* with the name "ViewportBoundsChanged".
|
|
*
|
|
* If you set this property any replacement of the #model will result in a layout
|
|
* and a computation of new #documentBounds, which in turn may cause the diagram to be scrolled
|
|
* and zoomed, depending on various Diagram properties named "initial...".
|
|
* You may want to set #initialScale instead of setting this property around the time
|
|
* that you are loading a model.
|
|
*/
|
|
scale: number;
|
|
/**
|
|
* Gets or sets the Diagram#scale set by CommandHandler#resetZoom
|
|
* and when computing stretch values, such as when #autoScale or
|
|
* #initialAutoScale are set, or when #zoomToFit is called.
|
|
*
|
|
* The default value is 1.0.
|
|
* The value must be a number larger than 0.
|
|
* Setting this property does not raise any events.
|
|
* @since 2.0
|
|
*/
|
|
defaultScale: number;
|
|
/**
|
|
* Gets or sets the autoScale behavior of the Diagram, controlling whether or not the
|
|
* Diagram's bounds automatically scale to fit the view.
|
|
*
|
|
* The only accepted values are the constant properties of Diagram,
|
|
* Diagram.None, Diagram.Uniform, or Diagram.UniformToFill.
|
|
* Setting this will change the Diagram's Diagram#scale and Diagram#position, if appropriate.
|
|
*
|
|
* The default value is Diagram.None - the scale and position are not automatically adjusted
|
|
* according to the area covered by the document.
|
|
* When the value is not None, any value for #initialAutoScale or #initialScale is ignored.
|
|
* <p class="box">
|
|
* When autoScale is set to a non-Diagram.None value,
|
|
* the user will not be able to zoom, and setting #scale will do nothing.
|
|
* If you only want to scale automatically on initialization, use #initialAutoScale.
|
|
*
|
|
* Setting this property to Diagram.Uniform is basically the same as calling #zoomToFit
|
|
* all the time, or just disabling interactive zooming.
|
|
*
|
|
* Note that depending on the values of #maxScale and #minScale, the actual value for #scale
|
|
* might be limited.
|
|
*/
|
|
autoScale: EnumValue;
|
|
/**
|
|
* Gets or sets how the scale of the diagram is automatically
|
|
* set at the time of the "InitialLayoutCompleted" DiagramEvent, after the model has been replaced.
|
|
*
|
|
* The only accepted values are listed as constant properties of Diagram,
|
|
* such as Diagram.None, Diagram.Uniform, or Diagram.UniformToFill.
|
|
* Setting this will change the Diagram's Diagram#scale and Diagram#position, if appropriate.
|
|
*
|
|
* If you want to always automatically scale the Diagram, set #autoScale instead.
|
|
* If you want to set the scale to a specific value on initialization (each time the model is replaced),
|
|
* set #initialScale.
|
|
*
|
|
* The default value is Diagram.None -- the scale and position are not automatically adjusted
|
|
* according to the area covered by the document.
|
|
*
|
|
* Setting this property to Diagram.Uniform is basically the same as calling #zoomToFit
|
|
* in an "InitialLayoutCompleted" DiagramEvent listener.
|
|
*
|
|
* Note that depending on the values of #maxScale and #minScale, the actual value for #scale
|
|
* might be limited.
|
|
*/
|
|
initialAutoScale: EnumValue;
|
|
/**
|
|
* Gets or sets the spot in the viewport that should be coincident with the
|
|
* #initialDocumentSpot of the document when the document is first initialized.
|
|
* The default value is Spot.TopLeft.
|
|
*
|
|
* If you set this, often you will also want to set #initialDocumentSpot.
|
|
* If you set #initialPosition, it will take precedence over this property.
|
|
*
|
|
* Setting this property and #initialDocumentSpot has the same effect as implementing
|
|
* an "InitialLayoutCompleted" DiagramEvent listener that calls #alignDocument.
|
|
*
|
|
* @see #initialDocumentSpot
|
|
* @see #initialContentAlignment
|
|
*/
|
|
initialViewportSpot: Spot;
|
|
/**
|
|
* Gets or sets the spot in the document's area that should be coincident with the
|
|
* #initialViewportSpot of the viewport when the document is first initialized.
|
|
* The default value is Spot.TopLeft.
|
|
*
|
|
* If you set this, often you will also want to set #initialViewportSpot.
|
|
* If you set #initialPosition, it will take precedence over this property.
|
|
*
|
|
* Setting this property and #initialViewportSpot has the same effect as implementing
|
|
* an "InitialLayoutCompleted" DiagramEvent listener that calls #alignDocument.
|
|
*
|
|
* @see #initialViewportSpot
|
|
* @see #initialPosition
|
|
* @see #initialContentAlignment
|
|
*/
|
|
initialDocumentSpot: Spot;
|
|
/**
|
|
* Gets or sets the smallest value greater than zero that #scale may take.
|
|
* This property is only used to limit the range of new values of #scale.
|
|
*
|
|
* The default value is 0.0001.
|
|
* Values must be larger than zero and not greater than one.
|
|
* Setting this to a value that is greater than the current #scale
|
|
* will cause the current diagram scale to be set to this new value.
|
|
*/
|
|
minScale: number;
|
|
/**
|
|
* Gets or sets the largest value that #scale may take.
|
|
* This property is only used to limit the range of new values of #scale.
|
|
*
|
|
* The default value is 100.0.
|
|
* Values must be no less than one.
|
|
* Setting this to a value that is less than the current #scale
|
|
* will cause the current diagram scale to be set to this new value.
|
|
*/
|
|
maxScale: number;
|
|
/**
|
|
* Gets or sets the zoom point of this Diagram, in viewport coordinates.
|
|
* This is used by Tool#standardMouseWheel and scale-setting commands to control where to zoom in or out.
|
|
*
|
|
* Typical usage is to remember the value of this property and
|
|
* to set this property to some point within the viewport (between zero and the canvas width and height).
|
|
* This is commonly accomplished by using the InputEvent#viewPoint of Diagram#lastInput.
|
|
* Then one changes the #scale somehow, perhaps by executing one of the CommandHandler commands,
|
|
* or by rotating the mouse wheel, or just by setting the Diagram#scale property.
|
|
* Finally one restores the original value of this property.
|
|
*
|
|
* The default value is Point(NaN, NaN).
|
|
* Value must be of type Point, in element coordinates, not in document coordinates.
|
|
* Setting this property does not notify about any changed event.
|
|
* @since 1.2
|
|
*/
|
|
zoomPoint: Point;
|
|
/**
|
|
* Gets or sets the content alignment Spot of this Diagram, to be used in determining
|
|
* how parts are positioned when the #viewportBounds width or height is larger than the #documentBounds.
|
|
*
|
|
* For instance a spot of Spot.Center would ensure that the Diagram's
|
|
* contents are always centered in the viewport.
|
|
*
|
|
* If you want the content to be aligned only initially, use #initialContentAlignment instead.
|
|
*
|
|
* The default value is Spot.Default, which causes no automatic scrolling or positioning.
|
|
* When the value is not Default, any value for #initialContentAlignment or #initialPosition is ignored.
|
|
*
|
|
* Setting this property has the same effect as implementing
|
|
* a "LayoutCompleted" DiagramEvent listener that scrolls the viewport to align the content.
|
|
*
|
|
*/
|
|
contentAlignment: Spot;
|
|
/**
|
|
* Gets or sets the initial content alignment Spot of this Diagram, to be used in determining
|
|
* how parts are positioned initially relative to the viewport, when the #viewportBounds width or height is larger than the #documentBounds.
|
|
*
|
|
* For instance a spot of Spot.Center would ensure that the Diagram's contents are initially centered in the viewport.
|
|
*
|
|
* To initially align the document when the documentBounds are larger than the viewport, use #initialDocumentSpot and #initialViewportSpot.
|
|
*
|
|
* If you want the content to be constantly aligned with a spot, use #contentAlignment instead.
|
|
*
|
|
* The default value is Spot.Default, which causes no automatic scrolling or positioning.
|
|
*
|
|
* Setting this property has the same effect as implementing
|
|
* an "InitialLayoutCompleted" DiagramEvent listener that scrolls the viewport to align the content.
|
|
*
|
|
* @see #initialDocumentSpot
|
|
* @see #initialViewportSpot
|
|
*/
|
|
initialContentAlignment: Spot;
|
|
/**
|
|
* Gets or sets the Margin that describes the Diagram's padding,
|
|
* which controls how much extra space in document coordinates there is around the area occupied by the document.
|
|
* This keeps nodes from butting up against the side of the diagram (unless scrolled).
|
|
*
|
|
* The default value is a margin of 5, all around the edge of the document.
|
|
*/
|
|
padding: MarginLike;
|
|
/**
|
|
* This read-only property returns an iterator of all Nodes and Groups in the Diagram.
|
|
*
|
|
* This includes both data-bound and unbound nodes,
|
|
* and both top-level nodes and nodes inside Groups.
|
|
* All of the simple Parts are accessible via the #parts property.
|
|
* @see #findTopLevelGroups
|
|
* @see #findTreeRoots
|
|
*/
|
|
readonly nodes: Iterator<Node>;
|
|
/**
|
|
* This read-only property returns an iterator of all Links in the Diagram.
|
|
*
|
|
* This includes both data-bound and unbound links,
|
|
* and both top-level links and links inside Groups.
|
|
*/
|
|
readonly links: Iterator<Link>;
|
|
/**
|
|
* This read-only property returns an iterator of all Parts in the Diagram
|
|
* that are not Nodes or Links or Adornments.
|
|
*
|
|
* This includes both data-bound and unbound parts,
|
|
* and both top-level parts and parts inside Groups.
|
|
* Use the #nodes or #links properties for getting the
|
|
* collection of all Nodes or Links in the diagram.
|
|
*/
|
|
readonly parts: Iterator<Part>;
|
|
/**
|
|
* Returns an iterator of all Groups that are at top-level,
|
|
* in other words that are not themselves inside other Groups.
|
|
*
|
|
* This is useful for when you want to traverse the diagram's graph by recursing into Groups.
|
|
* @return {Iterator.<Group>}
|
|
* @since 1.2
|
|
*/
|
|
findTopLevelGroups(): Iterator<Group>;
|
|
/**
|
|
* Gets or sets the Layout used to position all of the top-level nodes and links in this Diagram.
|
|
* By default this property is an instance of a simple Layout
|
|
* that assigns positions to all parts that need it.
|
|
* The value cannot be null and must not be shared with other Diagrams.
|
|
*/
|
|
layout: Layout;
|
|
/**
|
|
* Perform all invalid layouts.
|
|
* If the optional argument is true,
|
|
* this will perform all of the layouts (Diagram#layout and all Group#layouts),
|
|
* not just the invalid ones.
|
|
*
|
|
* Under normal circumstances you should not need to call this method,
|
|
* because layouts will be performed automatically after they become invalid.
|
|
* However you may have disabled automatic layouts by setting Layout#isInitial
|
|
* and/or Layout#isOngoing to false, or by restricting a Part's Part#layoutConditions.
|
|
* If that is the case you might call this method
|
|
* (perhaps due to a user command) to perform the layout at a time of your choosing.
|
|
* @param {boolean=} invalidateAll If true, this will explicitly set Layout#isValidLayout to false on each Layout in the diagram.
|
|
*/
|
|
layoutDiagram(invalidateAll?: boolean): void;
|
|
/**
|
|
* Gets or sets whether the Diagram tree structure is defined by
|
|
* links going from the parent node to their children, or vice-versa.
|
|
* By default this property is true: links go from the parent node to the child node.
|
|
*/
|
|
isTreePathToChildren: boolean;
|
|
/**
|
|
* Returns an iterator of all top-level Nodes that have no tree parents.
|
|
*
|
|
* This is useful for when you want to traverse the diagram's graph by starting at the root of each tree,
|
|
* assuming that the diagram consists of one tree or a forest of trees.
|
|
* @return {Iterator.<Node>}
|
|
* @since 1.2
|
|
*/
|
|
findTreeRoots(): Iterator<Node>;
|
|
/**
|
|
* Register an event handler that is called when there is a DiagramEvent of a given name.
|
|
*
|
|
* See the DiagramEvent documentation for a complete listing of diagram event names and their purposes.
|
|
* @param {string} name the name is normally capitalized, but this method uses case-insensitive comparison.
|
|
* @param {function(DiagramEvent)} listener a function that takes a DiagramEvent as its argument.
|
|
* @see #removeDiagramListener
|
|
*/
|
|
addDiagramListener(name: DiagramEventName, listener: ((e: DiagramEvent) => void)): void;
|
|
/**
|
|
* Unregister a DiagramEvent handler.
|
|
*
|
|
* See the documentation for DiagramEvent for a complete listing of diagram event names and their purposes.
|
|
* @param {string} name the name is normally capitalized, but this method uses case-insensitive comparison.
|
|
* @param {function(DiagramEvent)} listener a function that takes a DiagramEvent as its argument.
|
|
* @see #addDiagramListener
|
|
*/
|
|
removeDiagramListener(name: DiagramEventName, listener: ((e: DiagramEvent) => void)): void;
|
|
/**
|
|
* Undocumented.
|
|
* @param {string} name the name is normally capitalized, but this method uses case-insensitive comparison.
|
|
* @param {Object=} obj an optional subject of the event.
|
|
* @param {*=} param an optional parameter describing the change to the subject of the event.
|
|
* @see #addDiagramListener
|
|
* @see #removeDiagramListener
|
|
*/
|
|
raiseDiagramEvent(name: DiagramEventName, obj?: ObjectData, param?: any): void;
|
|
/**
|
|
* Gets or sets number of milliseconds between autoscroll events.
|
|
* The default value is 250.
|
|
*/
|
|
autoScrollInterval: number;
|
|
/**
|
|
* Gets or sets the Margin that describes the area along the inside edges of the viewport,
|
|
* in viewport coordinates, where autoscrolling will occur while the mouse is held there
|
|
* during dragging or linking or drag-selecting.
|
|
*
|
|
* The default value is a Margin of 16 on all sides.
|
|
* Increase this value in order to make it easier for the user to autoscroll by having
|
|
* a larger area in which to hold the mouse down during a dragging operation.
|
|
*
|
|
* When the mouse drag point is within this region on the left or right sides,
|
|
* the view will automatically scroll horizontally in that direction.
|
|
* When the point is within the region on the top or bottom, the view will automatically scroll
|
|
* vertically in that direction.
|
|
* You can specify a Margin side of zero to disable autoscrolling in a particular direction;
|
|
* a value of Margin(0,0,0,0) turns off autoscrolling in all four directions.
|
|
*/
|
|
autoScrollRegion: MarginLike;
|
|
/**
|
|
* Undocumented
|
|
* @param {Point} viewPt
|
|
*/
|
|
doAutoScroll(viewPt: Point): void;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
stopAutoScroll(): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {Point} viewPnt in viewport coordinates
|
|
* @return {Point} in document coordinates
|
|
*/
|
|
computeAutoScrollPosition(viewPnt: Point): Point;
|
|
/**
|
|
* Create an SVGElement that contains a SVG rendering of the current Diagram.
|
|
*
|
|
* By default this method returns a snapshot of the visible diagram, but optional arguments give more options.
|
|
* <p class="boxread">
|
|
* See the page on <a href="../../intro/makingSVG.html">Making SVG</a> for usage examples.
|
|
* See the <a href="../../samples/minimalSVG.html">Minimal SVG Download sample</a>,
|
|
* which also demonstrates downloading an SVG file without involving a web server.
|
|
*
|
|
* See #makeImageData for an explanation of possible options that are shared by both methods.
|
|
* Additional SVG-specific options for this method:
|
|
* - **elementFinished:**
|
|
* A function with two arguments, GraphObject and SVGElement.
|
|
* As the SVG elements are created representing each graph object, this function is called on them,
|
|
* allowing you to modify the SVG as it is being built, to assign stylesheets, IDs, etc. Example:
|
|
* ```js
|
|
* elementFinished: function(graphObject, SVGElement) {
|
|
* // set something on every SVG element that represents a GoJS TextBlock
|
|
* if (graphObject instanceof go.TextBlock) SVGElement.setAttribute(...);
|
|
* }
|
|
* ```
|
|
*
|
|
* At the current time methods such as Diagram#makeImage,
|
|
* Diagram#makeImageData and Diagram#makeSvg do not work on Overviews.
|
|
*
|
|
* For the rendering to work, the diagram must have an HTML Div element as the #div.
|
|
* @param {any=} options a JavaScript object detailing optional arguments for SVG creation.
|
|
* @return {SVGElement}
|
|
* @see #makeImage
|
|
*/
|
|
makeSvg(options?: SvgRendererOptions): SVGElement;
|
|
/**
|
|
* Add a renderer to the Diagram. This property is only used when building GoJS from source.
|
|
*
|
|
* When building from source, to include SVG rendering functionality for Diagram#makeSvg,
|
|
* you must add the SVGSurface renderer with the name 'SVG': `myDiagram.addRenderer('SVG', new SVGSurface(myDiagram, document));`
|
|
*
|
|
* @param {string} name Name of the renderer
|
|
* @param {ISurface} surface Rendering class, either SVGSurface or CanvasSurface.
|
|
*/
|
|
addRenderer(name: string, surface: ISurface): void;
|
|
/**
|
|
*
|
|
* Create an HTMLImageElement that contains a bitmap of the current Diagram.
|
|
* This method is just a convenience function that creates an image,
|
|
* sets its source to the returned string of #makeImageData,
|
|
* and returns a reference to that Image.
|
|
*
|
|
* See #makeImageData for a complete explanation of possible options.
|
|
*
|
|
* By default this method returns a snapshot of the visible diagram, but optional arguments give more options.
|
|
*
|
|
* Note that a returned HTMLImageElement, either returned directly or passed to the callback function,
|
|
* might not yet have the <code>complete</code> property set to true.
|
|
* So if you need to draw the image immediately, you should check that property first.
|
|
* If it is false, add a "load" listener to the HTMLImageElement that does the drawing you want.
|
|
*
|
|
* At the current time methods such as Diagram#makeImage,
|
|
* Diagram#makeImageData and Diagram#makeSvg do not work on Overviews.
|
|
*
|
|
* For the rendering to work, the diagram must have an HTML Div element as the #div.
|
|
* @param {any=} options a JavaScript object detailing optional arguments for image creation, to be passed to #makeImageData.
|
|
* @return {HTMLImageElement | null} An HTML Image element, or null if a callback is specified, or null if there is no DOM.
|
|
* @see #makeImageData
|
|
* @see #makeSvg
|
|
*/
|
|
makeImage(options?: ImageRendererOptions): HTMLImageElement | null;
|
|
/**
|
|
* Create a bitmap of the current Diagram encoded as a base64 string, or returned as an ImageData object.
|
|
* This method uses the toDataURL method of the HTMLCanvasElement to create the data URL,
|
|
* or the getImageData method of the Canvas Context.
|
|
* Unlike toDataURL, this method will not throw an error if cross-domain images
|
|
* were drawn on the canvas, instead it will return a data URL of a bitmap with those images omitted.
|
|
*
|
|
* A simple example:
|
|
* ```js
|
|
* myDiagram.makeImageData({
|
|
* scale: 1.5,
|
|
* size: new go.Size(100,100)
|
|
* });
|
|
* ```
|
|
* <p class="boxread">
|
|
* See the page on <a href="../../intro/makingImages.html">Making Images</a> for more usage examples.
|
|
*
|
|
* Note that a returned HTMLImageElement, either returned directly or passed to the callback function,
|
|
* might not yet have the <code>complete</code> property set to true.
|
|
* So if you need to draw the image immediately, you should check that property first.
|
|
* If it is false, add a "load" listener to the HTMLImageElement that does the drawing you want.
|
|
*
|
|
* At the current time methods such as Diagram#makeImage,
|
|
* Diagram#makeImageData and Diagram#makeSvg do not work on Overviews.
|
|
*
|
|
* For the rendering to work, the diagram must have an HTML Div element as the #div.
|
|
* @param {any=} options a JavaScript object detailing optional arguments for image creation.
|
|
* Rendering options for both images and SVG:
|
|
* - **size:**
|
|
* The size of the created image, as a Size, limited by the **maxSize** property.
|
|
* If no **scale** or **position** is specified then the diagram will be scaled to fit the given size.
|
|
* If you set a size, you should also set a **position**. If you are scaling the diagram, you may also want to scale the size.
|
|
* - **scale:**
|
|
* The scale of the diagram. If **scale** is specified and **size** is not, the resulting image will be sized to uniformly
|
|
* fit the space needed for the given scale.
|
|
* Can be constrained by the **maxSize** property. A scale value of `NaN` will
|
|
* automatically scale to fit within the maxSize, but may be smaller, with a maximum computed scale of 1.
|
|
* - **maxSize:**
|
|
* The maximum size of the created image, as a Size.
|
|
* The default value is `(Infinity, Infinity)` for SVG and `(2000, 2000)` for images.
|
|
* This is typically used when **scale** is specified and helps prevent accidental excessive memory usage,
|
|
* which is especially needed in limited-memory environments.
|
|
* You cannot use Infinity when providing a maximum size for an image -- consider calling #makeSvg instead.
|
|
* - **position:**
|
|
* The position of the diagram, as a Point.
|
|
* By default this is the position of Diagram#documentBounds with the Diagram#padding removed.
|
|
* If a specific parts collection is used, by default this is the top-left diagram position of their collective bounds.
|
|
* If you set a `position`, you should also set a `size`.
|
|
* - **parts:**
|
|
* An iterator of GraphObjects, typically Parts, such as one from Diagram#selection or Layer#parts.
|
|
* If GraphObjects are specified their containing Part will be drawn. By default all Parts are drawn except temporary parts (see **showTemporary**).
|
|
* - **padding:**
|
|
* A Margin (or number) to pad the image with. If a size is specified,
|
|
* the padding will not increase the image size, it will only offset the Diagram contents within the image.
|
|
* The default value is a padding of `1`.
|
|
* - **background:**
|
|
* A valid CSS color to replace the default (transparent) canvas background. Any padding area is also colored.
|
|
* - **showTemporary:**
|
|
* A boolean value, defaulting to false,
|
|
* that determines whether or not temporary objects such as adornments are included in the image.
|
|
* - **showGrid:**
|
|
* A boolean value, defaulting to the value of **showTemporary**,
|
|
* that determines whether or not the Grid Layer (containing Diagram#grid) is included in the image
|
|
* regardless of the value of **showTemporary**.
|
|
* This is useful if you want to include the grid but not adornments, or vice versa.
|
|
* - **document:**
|
|
* An HTML Document, defaulting to `window.document` (or the root object in other contexts)
|
|
* This may be useful to set if you intend your Image or SVG to be opened in a new window.
|
|
* - **callback:**
|
|
* The function to call when an image is finished creation.
|
|
* It has one argument, which is of the type specified by the value of the **returnType** or SVG DOM.
|
|
* If provided, call the callback when finished instead of returning immediately. This can be useful if you need to wait for image assets to load.
|
|
* This also respects the **callbackTimeout**.
|
|
* This argument is necessary if the **returnType** is `"blob"`, however a callback can be used with any **returnType**.
|
|
* See the <a href="../../samples/minimalBlob.html">Minimal Image Blob Download sample</a> for an example usage,
|
|
* which also demonstrates downloading an image file without involving a web server.
|
|
* - **callbackTimeout:**
|
|
* If a **callback** is specified, the additional amount of time in milliseconds a call will wait before completeing. Right now, it will only wait if
|
|
* image assets in the Diagram are not yet loaded. Default is 300 (milliseconds).
|
|
*
|
|
* Additional image-specific arguments (not for SVG):
|
|
* - **type:**
|
|
* The optional MIME type of the image. Valid values are typically `"image/png"` and `"image/jpeg"`.
|
|
* Some browsers allow `"image/webp"`. The default value is `"image/png"`, and unrecognized values will defer to the default.
|
|
* - **returnType:**
|
|
* The optional return type of the image data. Valid values are `"ImageData"`, `"Image"`, `"string"`, and `"blob"`.
|
|
* The `"string"` option returns a base64 string representation of the image.
|
|
* The `"ImageData"` option returns an `ImageData` object representation of the image.
|
|
* The `"Image"` option returns an `HTMLImageElement` using `ImageData` as the `HTMLImageElement.src`.
|
|
* The `"blob"` option requires that the **callback** property is also defined.
|
|
* The default value is `"string"`, and unrecognized values will return a string.
|
|
* - **details:**
|
|
* The optional details to pass to the HTMLCanvasElement's toDataURL function.
|
|
* If the type is `"image/jpeg"` then this can be a number from `0` to `1`, inclusive, describing the desired jpeg quality.
|
|
*
|
|
* @return {ImageData|string|null} An ImageData, or a base64-encoded string describing an image, or an HTMLImageElement, or null if a callback is specified.
|
|
* @see #makeImage
|
|
*/
|
|
makeImageData(options?: ImageRendererOptions): HTMLImageElement | ImageData | string | null;
|
|
/**
|
|
* This static function declares that a class (constructor function) derives from another class --
|
|
* **_but please note that most classes do not support inheritance_**.
|
|
* Do not call this function when your class is defined using an ES2015 or TypeScript "class" declaration.
|
|
*
|
|
* Because you must not modify the prototypes for the **GoJS** classes,
|
|
* in order to override methods you need to define a new class that inherits from a predefined class.
|
|
* You can then modify the prototype of your derived class.
|
|
*
|
|
* Typical usage is:
|
|
* ```js
|
|
* function BaseClass() {
|
|
* this._total = 0;
|
|
* }
|
|
*
|
|
* public increment(x) {
|
|
* this._total += x;
|
|
* }
|
|
*
|
|
* function DerivedClass() {
|
|
* this._anotherProperty = "";
|
|
* }
|
|
* go.Diagram.inherit(DerivedClass, BaseClass);
|
|
*
|
|
* DerivedClass.prototype.someMethod = ...;
|
|
* ```
|
|
*
|
|
* **_Note that most classes do not support inheritance._**
|
|
* Currently you can only inherit from Layout, Tool, CommandHandler, and Link or their subclasses.
|
|
* When you override a method, you must strongly consider calling the base method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.
|
|
*
|
|
* The call to `Diagram.inherit` should be made immediately after defining the subclass constructor function
|
|
* and before defining any new methods or overriding any base class methods.
|
|
* You must not call this static function more than once on a derived class, or at all on a class defined using an ES2015 or TypeScript class declaration.
|
|
*
|
|
* The need for subclassing is greatly diminished by the presence of a number of properties that have functional values.
|
|
* Setting such a property to a function will cause that function to be called as if it were
|
|
* an event handler for that particular object.
|
|
* Example properties include: GraphObject#click, GraphObject#mouseEnter, Part#layerChanged,
|
|
* Node#treeExpandedChanged, LinkingBaseTool#linkValidation, CommandHandler#memberValidation,
|
|
* TextEditingTool#textValidation.
|
|
* @param {Function} derivedclass
|
|
* @param {Function} baseclass
|
|
*/
|
|
static inherit(derivedclass: Function, baseclass: Function): void;
|
|
}
|
|
/**
|
|
* This is used in dragging methods to remember initial locations, for relative positioning and for cancellation.
|
|
* You do not typically need to create these unless you are overriding tools.
|
|
*
|
|
* CommandHandler#computeEffectiveCollection returns a Map of Parts and DraggingInfo,
|
|
* which is used as an argument for methods like Diagram#computeMove.
|
|
*
|
|
* Diagram#moveParts constructs a Map of Parts and DraggingInfo to record each Part's location offset during moves.
|
|
*
|
|
* @unrestricted
|
|
* @since 2.0
|
|
*/
|
|
export class DraggingInfo {
|
|
/**
|
|
* Optionally takes a Point that sets #point.
|
|
* @param {Point=} pt
|
|
*/
|
|
constructor(pt?: Point);
|
|
/**
|
|
* Gets or sets the initial location for a dragged object.
|
|
* This is most commonly the Part.location of the dragged object, or a rounded Part.location if snapping.
|
|
*/
|
|
point: Point;
|
|
}
|
|
/**
|
|
* New in 2.0, this class contains options for dragging and moving parts.
|
|
*
|
|
* This is used by Diagram#moveParts, Diagram#computeMove, and DraggingTool#computeMove.
|
|
*
|
|
* Both the Diagram and its DraggingTool have a DraggingOptions instance.
|
|
* Typically, only the DraggingTool one is used, unless the Diagram has no DraggingTool defined.
|
|
*
|
|
* In typical DraggingTool operation you do not need to create or modify a DraggingOptions instance.
|
|
* Setting properties on the DraggingTool such as DraggingTool#isGridSnapEnabled
|
|
* sets the value on the DraggingTool#dragOptions instance for you.
|
|
*
|
|
* @unrestricted
|
|
* @see DraggingTool#dragOptions
|
|
* @since 2.0
|
|
*/
|
|
export class DraggingOptions {
|
|
/**
|
|
* Whether or not the dragged parts snap to the Diagram#grid.
|
|
* By default this property is false.
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#isGridSnapEnabled.
|
|
*/
|
|
isGridSnapEnabled: boolean;
|
|
/**
|
|
* If dragging with the DraggingTool, whether or not Parts snap to a grid (if applicable) in real-time,
|
|
* or only at the end of the dragging transaction.
|
|
* By default this property is true.
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#isGridSnapRealtime.
|
|
*/
|
|
isGridSnapRealtime: boolean;
|
|
/**
|
|
* Gets or sets the size of the grid cell used when snapping during a drag.
|
|
* By default this property is the Size(NaN, NaN), which causes this tool to use the Panel#gridCellSize value of the Diagram#grid.
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#gridSnapCellSize.
|
|
*/
|
|
gridSnapCellSize: Size;
|
|
/**
|
|
* Gets or sets the Spot that specifies what point in the grid cell dragged parts snap to,
|
|
* if the value of #isGridSnapEnabled is true. By default this property is Spot.TopLeft.
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#gridSnapCellSpot.
|
|
*/
|
|
gridSnapCellSpot: Spot;
|
|
/**
|
|
* Gets or sets the snapping grid's origin point, in document coordinates,
|
|
* if the value of #isGridSnapEnabled is true. By default this property is the Point(NaN, NaN).
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#gridSnapOrigin.
|
|
*/
|
|
gridSnapOrigin: Point;
|
|
/**
|
|
* Gets or sets whether the user can move a single Link,
|
|
* disconnecting it from connected nodes and possibly connecting it to valid ports.
|
|
* By default this property is false.
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#dragsLink.
|
|
*/
|
|
dragsLink: boolean;
|
|
/**
|
|
* Gets or sets whether moving or copying a node also includes all of the
|
|
* node's tree children and their descendants, along with the links to those additional nodes.
|
|
* By default this property is false.
|
|
*
|
|
* In typical DraggingTool operation this is set via DraggingTool#dragsTree.
|
|
*/
|
|
dragsTree: boolean;
|
|
/**
|
|
* Determines whether or not Groups will snap their member Parts in addition to themselves when moving.
|
|
* By default this property is false.
|
|
*/
|
|
groupsSnapMembers: boolean;
|
|
/**
|
|
* Determines whether or not Groups will ensure their member Parts always move,
|
|
* even if those member parts have Part#copyable and Part#movable set to false.
|
|
* By default this property is true.
|
|
*/
|
|
groupsAlwaysMove: boolean;
|
|
/**
|
|
* Determines whether dragging a Group also drags its member Parts if there is no Group.placeholder.
|
|
* By default this property is true.
|
|
*/
|
|
dragsMembers: boolean;
|
|
constructor();
|
|
}
|
|
/**
|
|
* Used for the options arguments to Diagram.makeImage, Diagram.makeImageData, and Diagram.makeSvg.
|
|
*/
|
|
export interface DiagramRendererOptions {
|
|
size?: Size;
|
|
scale?: number;
|
|
maxSize?: Size;
|
|
position?: Point;
|
|
parts?: Iterable<Part>;
|
|
padding?: MarginLike;
|
|
background?: BrushLike;
|
|
showTemporary?: boolean;
|
|
showGrid?: boolean;
|
|
document?: HTMLDocument;
|
|
}
|
|
/**
|
|
* Used for the options argument to Diagram.makeSvg.
|
|
*/
|
|
export interface SvgRendererOptions extends DiagramRendererOptions {
|
|
elementFinished?: ((graphobj: GraphObject, svgelt: SVGElement) => void) | null;
|
|
}
|
|
/**
|
|
* Used for the options argument to Diagram.makeImage and Diagram.makeImageData.
|
|
*/
|
|
export interface ImageRendererOptions extends DiagramRendererOptions {
|
|
type?: string;
|
|
returnType?: string;
|
|
callback?: ((result: any) => void) | null;
|
|
callbackTimeout?: number;
|
|
details?: ObjectData;
|
|
}
|
|
/**
|
|
* Palette extends the Diagram class to allow objects to be dragged and placed onto other Diagrams.
|
|
* Its Diagram#layout is a GridLayout.
|
|
* The Palette is Diagram#isReadOnly but to support drag-and-drop its Diagram#allowDragOut is true.
|
|
* <p class="box">
|
|
* For more discussion, see <a href="../../intro/palette.html">Introduction to Palettes</a>.
|
|
* See samples that make use of Palettes in the <a href="../../samples/index.html#palette">samples index</a>.
|
|
*
|
|
* You can control the order of Parts in the palette in several manners:
|
|
* - If you want to keep the order given by `myPalette.model.nodeDataArray`,
|
|
* just set `myPalette.layout.sorting = go.GridLayout.Forward` (GridLayout#sorting).
|
|
* - If you want to sort based on some text string associated with each Part, just bind Part#text.
|
|
* - If you want to sort more generally, set `myPalette.layout.comparer` (GridLayout#comparer).
|
|
* @extends Diagram
|
|
* @unrestricted
|
|
*/
|
|
export class Palette extends Diagram {
|
|
/**
|
|
* @param {HTMLDivElement|string} div A reference to a div or its ID as a string.
|
|
*/
|
|
constructor(div?: Element | string);
|
|
}
|
|
/**
|
|
* An Overview is a Diagram that displays all of a different diagram,
|
|
* with a rectangular box showing the viewport displayed by that other diagram.
|
|
* <p class="box">
|
|
* For more discussion, see <a href="../../intro/overview.html">Introduction to Overviews</a>.
|
|
* See samples that make use of Overviews in the <a href="../../samples/index.html#overview">samples index</a>.
|
|
*
|
|
* All you need to do is set Overview#observed.
|
|
* For example:
|
|
*
|
|
* ```js
|
|
* var myDiagram = new go.Diagram("myDiagramDIV");
|
|
* . . . other initialization . . .
|
|
*
|
|
* // create and initialize the Overview:
|
|
* new go.Overview("myOverviewDIV").observed = myDiagram;
|
|
* ```
|
|
*
|
|
* The Overview draws what the observed Diagram is displaying,
|
|
* so setting or modifying any diagram templates or template Maps has no effect.
|
|
*
|
|
* Animations are not shown in an Overview.
|
|
*
|
|
* At the current time methods such as Diagram#makeImage,
|
|
* Diagram#makeImageData and Diagram#makeSvg do not work on Overviews.
|
|
* @extends Diagram
|
|
* @unrestricted
|
|
*/
|
|
export class Overview extends Diagram {
|
|
/**
|
|
* @param {Element|string} div A reference to a div or its ID as a string.
|
|
*/
|
|
constructor(div?: Element | string);
|
|
/**
|
|
* Gets or sets the Diagram for which this Overview is
|
|
* displaying a model and showing its viewport into that model.
|
|
*
|
|
* The value must be null or another Diagram, but may not be an Overview.
|
|
*/
|
|
observed: Diagram | null;
|
|
/**
|
|
* Gets or sets the rectangular Part that represents the
|
|
* viewport of the #observed Diagram.
|
|
* By default the part contains only a magenta Shape.
|
|
* The box's Part#selectionObject is what is resized by the Overview to the apparent size of the observed diagram's viewport.
|
|
*/
|
|
box: Part;
|
|
/**
|
|
* Gets or sets whether this overview draws the temporary layers of the observed Diagram.
|
|
* The default value is true.
|
|
* Setting this property to false may improve drawing performance,
|
|
* especially if the Diagram#grid is visible.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
* @since 1.2
|
|
*/
|
|
drawsTemporaryLayers: boolean;
|
|
/**
|
|
* Gets or sets whether this overview draws the Diagram#grid of the observed Diagram,
|
|
* if it is visible. The default value is true.
|
|
*
|
|
* This property is only considered when #drawsTemporaryLayers is true.
|
|
* Setting this to false may help improve drawing performance.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
*/
|
|
drawsGrid: boolean;
|
|
/**
|
|
* Undocumented.
|
|
* Gets or sets how long it waits before updating, in milliseconds.
|
|
* The default value is zero.
|
|
* Any new value must be a non-negative number.
|
|
*
|
|
* Setting this property does not notify about any changed event.
|
|
*/
|
|
updateDelay: number;
|
|
}
|
|
/**
|
|
* The Diagram#commandHandler implements various
|
|
* commands such as CommandHandler#deleteSelection or CommandHandler#redo.
|
|
* The CommandHandler includes keyboard event handling to interpret
|
|
* key presses as commands.
|
|
*
|
|
* CommandHandlers cannot be shared amongst multiple Diagrams.
|
|
*
|
|
* You may define a CommandHandler subclass and override methods.
|
|
* However you must seriously consider calling the base method in order to get its default behavior.
|
|
* There may be situations where not calling the base method may cause subtle bugs,
|
|
* but that depends on the method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.
|
|
*
|
|
* There is an example custom CommandHandler in the extensions directory: <a href="../../extensions/DrawCommandHandler.js">DrawCommandHandler.js</a>,
|
|
* which provides alignment commands and additional behaviors for the arrow keys.
|
|
* <p class="boxread">
|
|
* For additional discussion, please read the <a href="../../intro/commands.html">Introduction page on Commands</a>.
|
|
* <h3>Keyboard Shortcuts</h3>
|
|
*
|
|
* The CommandHandler implements the following command bindings for keyboard input in #doKeyDown:
|
|
* - `Ctrl-X` & `Shift-Del` invoke #cutSelection
|
|
* - `Ctrl-C` & `Ctrl-Insert` invoke #copySelection
|
|
* - `Ctrl-V` & `Shift-Insert` invoke #pasteSelection
|
|
* - `Del` & `Backspace` invoke #deleteSelection
|
|
* - `Ctrl-A` invokes #selectAll
|
|
* - `Ctrl-Z` & `Alt-Backspace` invoke #undo
|
|
* - `Ctrl-Y` & `Alt-Shift-Backspace` invoke #redo
|
|
* - `Up` & `Down` & `Left` & `Right` (arrow keys) call Diagram#scroll
|
|
* - `PageUp` & `PageDown` call Diagram#scroll
|
|
* - `Home` & `End` call Diagram#scroll
|
|
* - `Space` invokes #scrollToPart
|
|
* - `Ctrl-- & Keypad--` (minus) invoke #decreaseZoom
|
|
* - `Ctrl-+ & Keypad-+` (plus) invoke #increaseZoom
|
|
* - `Ctrl-0` invokes #resetZoom
|
|
* - `Shift-Z` invokes #zoomToFit; repeat to return to the original scale and position
|
|
* - `Ctrl-G` invokes #groupSelection
|
|
* - `Ctrl-Shift-G` invokes #ungroupSelection
|
|
* - `F2` invokes #editTextBlock
|
|
* - `Menu Key` invokes #showContextMenu
|
|
* - `Esc` invokes #stopCommand
|
|
*
|
|
* On a Macintosh the Command key is used as the modifier instead of the Control key.
|
|
*
|
|
* On touch devices there is a default context menu that shows many commonly-used commands
|
|
* when you hold a finger down on the diagram.
|
|
* @unrestricted
|
|
*/
|
|
export class CommandHandler {
|
|
/**
|
|
* The constructor produces a CommandHandler with the default key bindings.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This read-only property returns the Diagram that is using this CommandHandler,
|
|
* after Diagram#commandHandler has been set to this object.
|
|
*/
|
|
readonly diagram: Diagram;
|
|
/**
|
|
* This is called by tools to handle keyboard commands.
|
|
* For most commands, this calls the "can..." predicate; if that returns true it calls the command method.
|
|
* If GoJS handles a key-down event as a keyboard command, the underlying event will not bubble.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* There is an example custom CommandHandler in the extensions directory: <a href="../../extensions/DrawCommandHandler.js">DrawCommandHandler.js</a>,
|
|
* which implements additional behaviors for the arrow keys by overriding this method.
|
|
* For additional discussion, please read the <a href="../../intro/commands.html">Introduction page on Commands</a>.
|
|
* @expose
|
|
*/
|
|
doKeyDown(): void;
|
|
/**
|
|
* This is called by tools to handle keyboard commands.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
doKeyUp(): void;
|
|
/**
|
|
* This command cancels the operation of the current tool.
|
|
* This is typically called when the user presses ESCAPE.
|
|
*
|
|
* If the current tool is a ToolManager, this clears the diagram's selection.
|
|
* This then calls Tool#doCancel on the current tool.
|
|
* @expose
|
|
* @see #canStopCommand
|
|
*/
|
|
stopCommand(): void;
|
|
/**
|
|
* This predicate controls whether the user may stop the current tool.
|
|
* This just returns true.
|
|
*
|
|
* This method may be overridden, but probably should not be overridden.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean} true.
|
|
* @see #stopCommand
|
|
*/
|
|
canStopCommand(): boolean;
|
|
/**
|
|
* This command selects all of the selectable Parts in the diagram by setting Part#isSelected to true on each one.
|
|
* This is normally invoked by the `Ctrl-A` keyboard shortcut.
|
|
*
|
|
* This method raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* This ignores all parts in temporary layers.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canSelectAll
|
|
*/
|
|
selectAll(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #selectAll command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean} This returns true if Diagram#allowSelect is true.
|
|
* @see #selectAll
|
|
*/
|
|
canSelectAll(): boolean;
|
|
/**
|
|
* This command deletes the currently selected parts from the diagram.
|
|
* This is normally invoked by the `Del` keyboard shortcut.
|
|
*
|
|
* This will first start a "Delete" transaction, then
|
|
* raise the "SelectionDeleting" DiagramEvent,
|
|
* call Diagram#removeParts on a perhaps extended collection of selected Parts,
|
|
* raise the "SelectionDeleted" diagram event,
|
|
* and finally commit the transaction.
|
|
*
|
|
* Because this command changes the selection,
|
|
* this method also raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* Changes are performed within a transaction, but the selection events are raised outside the transaction.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canDeleteSelection
|
|
*/
|
|
deleteSelection(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #deleteSelection command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean} This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowDelete is true, and
|
|
* if there are some selected Parts.
|
|
* @see #deleteSelection
|
|
*/
|
|
canDeleteSelection(): boolean;
|
|
/**
|
|
* This command copies the currently selected parts, Diagram#selection, from the Diagram into the clipboard.
|
|
* This is normally invoked by the `Ctrl-C` keyboard shortcut.
|
|
*
|
|
* This makes a copy of the current selection by calling #copyToClipboard.
|
|
* This also raises the "ClipboardChanged" diagram event.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canCopySelection
|
|
*/
|
|
copySelection(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #copySelection command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if Diagram#allowCopy is true,
|
|
* if Diagram#allowClipboard is true, and
|
|
* if there are some selected Parts.
|
|
* @see #copySelection
|
|
*/
|
|
canCopySelection(): boolean;
|
|
/**
|
|
* This command executes a #copySelection followed by a #deleteSelection.
|
|
* This is normally invoked by the `Ctrl-X` keyboard shortcut.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canCutSelection
|
|
*/
|
|
cutSelection(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #cutSelection command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowCopy is true,
|
|
* if Diagram#allowDelete is true,
|
|
* if Diagram#allowClipboard is true, and
|
|
* if there are some selected Parts.
|
|
* @see #cutSelection
|
|
*/
|
|
canCutSelection(): boolean;
|
|
/**
|
|
* Make a copy of the given collection of Parts
|
|
* and stores it in a static variable acting as the clipboard.
|
|
*
|
|
* The clipboard is initially null.
|
|
* It can hold a collection of copied Parts.
|
|
* It also remembers the Model#dataFormat of the diagram
|
|
* from which the parts were copied.
|
|
*
|
|
* This calls Diagram#copyParts in order to make a copy of the Parts for the clipboard.
|
|
* The values of #copiesParentKey and #copiesGroupKey affect whether
|
|
* a copied node data remembers its tree parent node (if in a TreeModel) or
|
|
* its containing group (if in a GraphLinksModel).
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Iterable.<Part>} coll A collection of Parts.
|
|
* If the value is null, the clipboard is cleared of all data.
|
|
* @see #pasteFromClipboard
|
|
*/
|
|
copyToClipboard(coll: Iterable<Part>): void;
|
|
/**
|
|
* If the clipboard holds a collection of Parts,
|
|
* and if the Model#dataFormat matches that stored in the clipboard,
|
|
* this makes a copy of the clipboard's parts and adds the copies to this Diagram.
|
|
*
|
|
* This calls Diagram#copyParts in order to make a copy of the Parts in the clipboard and add them to this diagram.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Set.<Part>} a collection of the newly pasted Parts,
|
|
* or an empty Set if there was no data in the clipboard.
|
|
* @see #copyToClipboard
|
|
*/
|
|
pasteFromClipboard(): Set<Part>;
|
|
/**
|
|
* This command copies the contents of the clipboard into this diagram and makes those new parts the new selection.
|
|
* This is normally invoked by the `Ctrl-V` keyboard shortcut.
|
|
*
|
|
* This calls #pasteFromClipboard to add copies of Parts
|
|
* into this diagram, and then selects all of the newly created parts.
|
|
* This also raises the "ClipboardPasted" diagram event.
|
|
* This method raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* Changes are performed in a transaction, but the selection events are raised outside the transaction.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point=} pos Point at which to center the newly pasted parts; if not present the parts are not moved.
|
|
* @see #canPasteSelection
|
|
*/
|
|
pasteSelection(pos?: Point): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #pasteSelection command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Point=} pos Point at which to center the newly pasted parts; if not present the parts would not be moved.
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowInsert is true,
|
|
* if Diagram#allowClipboard is true, and
|
|
* if the clipboard has parts in it.
|
|
* @see #pasteSelection
|
|
*/
|
|
canPasteSelection(pos?: Point): boolean;
|
|
/**
|
|
* This command calls UndoManager#undo.
|
|
* This is normally invoked by the `Ctrl-Z` keyboard shortcut.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canUndo
|
|
*/
|
|
undo(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #undo command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowUndo is true, and
|
|
* if the UndoManager#canUndo predicate returns true.
|
|
* @see #undo
|
|
*/
|
|
canUndo(): boolean;
|
|
/**
|
|
* This command calls UndoManager#redo.
|
|
* This is normally invoked by the `Ctrl-Y` keyboard shortcut.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canRedo
|
|
*/
|
|
redo(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #redo command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowUndo is true, and
|
|
* if the UndoManager#canRedo predicate returns true.
|
|
* @see #redo
|
|
*/
|
|
canRedo(): boolean;
|
|
/**
|
|
* This command decreases the Diagram#scale by a given factor.
|
|
* This is normally invoked by the `Ctrl--` and `Keypad--` keyboard shortcuts.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number=} factor This defaults to 1/#zoomFactor. The value should be less than one and greater than zero.
|
|
* @see #canDecreaseZoom
|
|
*/
|
|
decreaseZoom(factor?: number): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #decreaseZoom command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number=} factor This defaults to 1/#zoomFactor. The value should be less than one and greater than zero.
|
|
* @return {boolean}
|
|
* This returns true if Diagram#allowZoom is true
|
|
* and if the new scale is within the range of Diagram#minScale and Diagram#maxScale.
|
|
* @see #decreaseZoom
|
|
*/
|
|
canDecreaseZoom(factor?: number): boolean;
|
|
/**
|
|
* This command increases the Diagram#scale by a given factor.
|
|
* This is normally invoked by the `Ctrl-+` and `Keypad-+` keyboard shortcuts.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number=} factor This defaults to #zoomFactor. The value should be greater than one.
|
|
* @see #canIncreaseZoom
|
|
*/
|
|
increaseZoom(factor?: number): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #increaseZoom command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number=} factor This defaults to #zoomFactor. The value should be greater than one.
|
|
* @return {boolean}
|
|
* This returns true if Diagram#allowZoom is true
|
|
* and if the new scale is within the range of Diagram#minScale and Diagram#maxScale.
|
|
* @see #increaseZoom
|
|
*/
|
|
canIncreaseZoom(factor?: number): boolean;
|
|
/**
|
|
* This command sets the Diagram#scale to a new scale value, by default 1.
|
|
* This is normally invoked by the `Ctrl-0` keyboard shortcut.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number=} newscale This defaults to Diagram#defaultScale, which is normally 1.0. The value should be greater than zero.
|
|
* @see #canResetZoom
|
|
*/
|
|
resetZoom(newscale?: number): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #resetZoom command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number=} newscale This defaults to Diagram#defaultScale, which is normally 1.0. The value should be greater than zero.
|
|
* @return {boolean}
|
|
* This returns true if Diagram#allowZoom is true.
|
|
* and if the new scale is within the range of Diagram#minScale and Diagram#maxScale.
|
|
* @see #resetZoom
|
|
*/
|
|
canResetZoom(newscale?: number): boolean;
|
|
/**
|
|
* This command changes the Diagram#scale so that the Diagram#documentBounds fits within the viewport.
|
|
* If this command had been called before without any other zooming since then,
|
|
* the original Diagram scale and position are restored.
|
|
* This is normally invoked by the `Shift-Z` keyboard shortcut.
|
|
*
|
|
* As of 2.1, this animates zooming by default. Diagram#zoomToFit does not animate.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canZoomToFit
|
|
* @since 1.1
|
|
*/
|
|
zoomToFit(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #zoomToFit command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* This returns true if Diagram#allowZoom is true.
|
|
* @see #zoomToFit
|
|
* @since 1.1
|
|
*/
|
|
canZoomToFit(): boolean;
|
|
/**
|
|
* This command scrolls the diagram to make a highlighted or selected Part visible in the viewport.
|
|
* Call this command repeatedly to cycle through the Diagram#highlighteds collection,
|
|
* if there are any Parts in that collection, or else in the Diagram#selection collection,
|
|
* scrolling to each one in turn by calling Diagram#centerRect.
|
|
*
|
|
* This method animates to the scrolled part, and Diagram#scrollToRect does not.
|
|
*
|
|
* This is normally invoked by the `Space` keyboard shortcut.
|
|
* If there is no argument and there is no highlighted or selected Part, this command does nothing.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* @expose
|
|
* @param {Part=} part This defaults to the first highlighted Part of Diagram#highlighteds,
|
|
* or, if there are no highlighted Parts, the first selected Part.
|
|
* @see #canScrollToPart
|
|
* @see Diagram#scrollToRect
|
|
* @since 1.6
|
|
*/
|
|
scrollToPart(part?: Part): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #scrollToPart command.
|
|
* This returns false if there is no argument Part and there are no selected Parts.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Part=} part This defaults to the first selected Part of Diagram#selection
|
|
* @return {boolean}
|
|
* This returns true if Diagram#allowHorizontalScroll and Diagram#allowVerticalScroll are true.
|
|
* @see #scrollToPart
|
|
* @since 1.6
|
|
*/
|
|
canScrollToPart(part?: Part): boolean;
|
|
/**
|
|
* This command collapses all expanded selected Nodes.
|
|
* This operation is performed within a "Collapse Tree" transaction.
|
|
* Just before the end of the transaction this raises the "TreeCollapsed" DiagramEvent,
|
|
* with a collection of collapsed Nodes as the subject.
|
|
* This currently has no default keyboard shortcut.
|
|
*
|
|
* This calls Node#collapseTree to perform the collapse, which will set Node#isTreeExpanded to false.
|
|
* You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isTreeExpanded" property of your Nodes,
|
|
* and perhaps also on the Node#wasTreeExpanded property.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node=} node if supplied, ignore the selection and collapse this particular Node subtree.
|
|
* @see #canCollapseTree
|
|
*/
|
|
collapseTree(node?: Node): void;
|
|
/**
|
|
* This predicate controls whether the user can collapse expanded subtrees of Nodes.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node=} node if supplied, ignore the selection and consider collapsing this particular Node.
|
|
* @return {boolean}
|
|
* @see #collapseTree
|
|
*/
|
|
canCollapseTree(node?: Node): boolean;
|
|
/**
|
|
* This command expands all collapsed selected Nodes.
|
|
* This operation is performed within an "Expand Tree" transaction.
|
|
* Just before the end of the transaction this raises the "TreeExpanded" DiagramEvent,
|
|
* with a collection of expanded Nodes as the subject.
|
|
* This currently has no default keyboard shortcut.
|
|
*
|
|
* This calls Node#expandTree to perform the expand, which will set Node#isTreeExpanded to true.
|
|
* You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isTreeExpanded" property of your Nodes,
|
|
* and perhaps also on the Node#wasTreeExpanded property.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node=} node if supplied, ignore the selection and collapse this particular Node subtree.
|
|
* @see #canExpandTree
|
|
*/
|
|
expandTree(node?: Node): void;
|
|
/**
|
|
* This predicate controls whether the user can expand collapsed subtrees of Nodes.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node=} node if supplied, ignore the selection and consider expanding this particular Node.
|
|
* @return {boolean}
|
|
* @see #expandTree
|
|
*/
|
|
canExpandTree(node?: Node): boolean;
|
|
/**
|
|
* This command adds a copy of #archetypeGroupData to the diagram's model
|
|
* to create a new Group and then adds the selected Parts to that new group.
|
|
* This is normally invoked by the `Ctrl-G` keyboard shortcut.
|
|
*
|
|
* This creates a new Group by adding a copy of the #archetypeGroupData to the model.
|
|
* Each of the selected parts for which Part#canGroup is true
|
|
* and for which #isValidMember is true
|
|
* is made a member of that new group.
|
|
* If all of the selected groupable parts were members of a pre-existing group,
|
|
* the new group also becomes a member of that pre-existing group,
|
|
* if #isValidMember is true for that existing group with the new group.
|
|
* The new group becomes the only selected part.
|
|
* This raises the "SelectionGrouped" diagram event.
|
|
* This method also raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* Changes are performed in a "Group" transaction, but the selection events are raised outside the transaction.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @see #canGroupSelection
|
|
*/
|
|
groupSelection(): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #groupSelection command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the #archetypeGroupData is not null,
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowInsert is true,
|
|
* if Diagram#allowGroup is true,
|
|
* if Diagram#model is a GraphLinksModel, and
|
|
* if there is any selected Part that can be Part#canGrouped.
|
|
* @see #groupSelection
|
|
*/
|
|
canGroupSelection(): boolean;
|
|
/**
|
|
* This predicate is called to determine whether a Node may be added as a member of a Group.
|
|
* This always checks to make sure no group might become a member of itself, either directly or indirectly.
|
|
* If the Group has a Group#memberValidation predicate and if it returns false, this method returns false.
|
|
* If this CommandHandler has a #memberValidation predicate and if it returns false, this method returns false.
|
|
* Otherwise this will return true.
|
|
* <p class="box">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group} group this may be null if the node is being added as a top-level node.
|
|
* @param {Part} part a Part, usually a Node, possibly another Group, but not a Link or an Adornment.
|
|
* @return {boolean} true if OK to add the node to the group.
|
|
*/
|
|
isValidMember(group: Group, part: Part): boolean;
|
|
/**
|
|
* This command removes selected groups from the diagram without removing their members from the diagram.
|
|
* This is normally invoked by the `Ctrl-Shift-G` keyboard shortcut.
|
|
*
|
|
* For the given group, or if not supplied, each selected Group that is Group#ungroupable,
|
|
* expand the subgraph and change all of its member parts to be members of the group that the selected group node is in.
|
|
* (If the selected group is a top-level node, i.e. not a member of any group node, its members become top-level parts too.)
|
|
* All of those selected groups are deleted.
|
|
* All of the reparented member parts are selected.
|
|
*
|
|
* This raises the "SelectionUngrouped" diagram event.
|
|
* This method also raises the "ChangingSelection" and "ChangedSelection" diagram events.
|
|
* Changes are performed in an "Ungroup" transaction, but the selection events are raised outside the transaction.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group=} group if supplied, ignore the selection and consider ungrouping this particular Group.
|
|
* @see #canUngroupSelection
|
|
*/
|
|
ungroupSelection(group?: Group): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #ungroupSelection command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group=} group if supplied, ignore the selection and consider ungrouping this particular Group.
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowDelete is true,
|
|
* if Diagram#allowUngroup is true,
|
|
* if Diagram#model is a GraphLinksModel, and
|
|
* if there are any selected Groups that are Group#ungroupable.
|
|
* @see #ungroupSelection
|
|
*/
|
|
canUngroupSelection(group?: Group): boolean;
|
|
/**
|
|
* Make sure all of the unnested Parts in the given collection
|
|
* are removed from any containing Groups.
|
|
*
|
|
* This sets Part#containingGroup to null on each Part that is
|
|
* not a member of another Part in the argument collection.
|
|
* If the check argument to this method is supplied and true,
|
|
* this will call #isValidMember on each part, passing null as the first argument.
|
|
*
|
|
* This functionality is similar to #ungroupSelection,
|
|
* except that this is not a command (there is no transaction and this does not raise a DiagramEvent)
|
|
* and the parts are necessarily becoming top-level parts
|
|
* (whereas ungrouping would add them to the Group containing the Group being ungrouped).
|
|
*
|
|
* This function is typically called in a Diagram#mouseDrop event handler
|
|
* in order to remove the selected Parts from whatever Group they had been in.
|
|
*
|
|
* If you want to add Parts to be members of a Group, call Group#addMembers.
|
|
* If you want to remove Parts completely from a Diagram, call Diagram#removeParts.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Iterable.<Part>} coll a collection of Parts.
|
|
* @param {boolean=} check whether to call #isValidMember to confirm that changing the Part to be a top-level Part is valid.
|
|
* @return {boolean} true if all non-Links were changed to be top-level Parts in this Diagram; false if some Parts or Nodes were not able to be added.
|
|
*/
|
|
addTopLevelParts(coll: Iterable<Part>, check?: boolean): boolean;
|
|
/**
|
|
* This command collapses all expanded selected Groups.
|
|
* This operation is performed within a "Collapse SubGraph" transaction.
|
|
* Just before the end of the transaction this raises the "SubGraphCollapsed" DiagramEvent,
|
|
* with a collection of collapsed Groups as the subject.
|
|
* This currently has no default keyboard shortcut.
|
|
*
|
|
* This calls Group#collapseSubGraph to perform the collapse, which will set Group#isSubGraphExpanded to false.
|
|
* You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isSubGraphExpanded" property of your Groups,
|
|
* and perhaps also on the Group#wasSubGraphExpanded property.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group=} group if supplied, ignore the selection and collapse this particular Group.
|
|
* @see #canCollapseSubGraph
|
|
*/
|
|
collapseSubGraph(group?: Group): void;
|
|
/**
|
|
* This predicate controls whether the user can collapse expanded Groups.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group=} group if supplied, ignore the selection and consider collapsing this particular Group.
|
|
* @return {boolean}
|
|
* @see #collapseSubGraph
|
|
*/
|
|
canCollapseSubGraph(group?: Group): boolean;
|
|
/**
|
|
* This command expands all collapsed selected Groups.
|
|
* This operation is performed within an "Expand SubGraph" transaction.
|
|
* Just before the end of the transaction this raises the "SubGraphExpanded" DiagramEvent,
|
|
* with a collection of expanded Groups as the subject.
|
|
* This currently has no default keyboard shortcut.
|
|
*
|
|
* This calls Group#expandSubGraph to perform the collapse, which will set Group#isSubGraphExpanded to true.
|
|
* You may want to save the collapsed/expanded state to the model by using a TwoWay Binding on the "isSubGraphExpanded" property of your Groups,
|
|
* and perhaps also on the Group#wasSubGraphExpanded property.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group=} group if supplied, ignore the selection and expand this particular Group.
|
|
* @see #canExpandSubGraph
|
|
*/
|
|
expandSubGraph(group?: Group): void;
|
|
/**
|
|
* This predicate controls whether the user can expand collapsed Groups.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Group=} group if supplied, ignore the selection and consider expanding this particular Group.
|
|
* @return {boolean}
|
|
* @see #expandSubGraph
|
|
*/
|
|
canExpandSubGraph(group?: Group): boolean;
|
|
/**
|
|
* This command starts in-place editing of a TextBlock in the selected Part.
|
|
* This is normally invoked by the `F2` keyboard shortcut.
|
|
*
|
|
* This starts the TextEditingTool to have the user enter or modify the text string and finally set the TextBlock#text.
|
|
* You may want to save the new string to the model by using a TwoWay Binding on the "text" property of your TextBlock.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {TextBlock=} textblock the TextBlock to start editing.
|
|
* @see #canEditTextBlock
|
|
*/
|
|
editTextBlock(textblock?: TextBlock): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #editTextBlock command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {TextBlock=} textblock the TextBlock to consider editing.
|
|
* @return {boolean}
|
|
* This returns true:
|
|
* if the diagram is not Diagram#isReadOnly,
|
|
* if Diagram#allowTextEdit is true,
|
|
* if there is a ToolManager#textEditingTool, and
|
|
* if there is any selected Part for which Part#canEdit is true.
|
|
* @see #editTextBlock
|
|
*/
|
|
canEditTextBlock(textblock?: TextBlock): boolean;
|
|
/**
|
|
* This command opens the context menu for a selected Part or given GraphObject, or else for the whole Diagram.
|
|
* This is normally invoked by the `Menu` keyboard shortcut.
|
|
*
|
|
* The given GraphObject must have a GraphObject#contextMenu
|
|
* defined in order to show anything.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {GraphObject|Diagram=} obj a GraphObject or Diagram with a contextMenu defined.
|
|
* If none is given, this method will use the first selected object, or else the Diagram.
|
|
* The method will simulate a right-button click at the middle of the GraphObject or,
|
|
* if a Diagram, at the current mouse position if it is in the viewport.
|
|
* @see #canShowContextMenu
|
|
*/
|
|
showContextMenu(obj?: GraphObject | Diagram): void;
|
|
/**
|
|
* This predicate controls whether or not the user can invoke the #showContextMenu command.
|
|
*
|
|
* This method may be overridden, but you should consider calling this base method in order to get all of its functionality.
|
|
* This method must not have any side-effects.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {GraphObject|Diagram=} obj a GraphObject or Diagram with a contextMenu defined.
|
|
* If none is given, this method will use the first selected object, or else the Diagram.
|
|
* @return {boolean}
|
|
* @see #showContextMenu
|
|
*/
|
|
canShowContextMenu(obj?: GraphObject | Diagram): boolean;
|
|
/**
|
|
* Gets or sets whether #copySelection should also copy Links that connect with selected Nodes.
|
|
* The default value is true.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* The DraggingTool#copiesEffectiveCollection property serves a similar role for the DraggingTool
|
|
* when the user holds down the control key to modify the drag into a copy operation.
|
|
* @since 1.5
|
|
*/
|
|
copiesConnectedLinks: boolean;
|
|
/**
|
|
* Gets or sets whether #deleteSelection should also delete links that are connected to nodes that are deleted.
|
|
* The default value is true.
|
|
* Setting this property does not raise any events.
|
|
* @since 1.6
|
|
*/
|
|
deletesConnectedLinks: boolean;
|
|
/**
|
|
* Gets or sets whether #copySelection should also copy subtrees.
|
|
* The default value is false.
|
|
* Setting this property does not raise any events.
|
|
*
|
|
* The DraggingTool#dragsTree property serves a similar role for the DraggingTool
|
|
* for both moving and copying operations.
|
|
*/
|
|
copiesTree: boolean;
|
|
/**
|
|
* Gets or sets whether #deleteSelection should also delete subtrees.
|
|
* The default value is false.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
deletesTree: boolean;
|
|
/**
|
|
* Gets or sets whether #copySelection and #copyToClipboard copy the node data property
|
|
* whose value is the tree-parent node data's key.
|
|
*
|
|
* Set this property to true if you want a copy/paste of a node to automatically have the new node be a tree-child of the original tree-parent node.
|
|
* Caution: this only has an effect if the Diagram's Diagram#model is a TreeModel.
|
|
*
|
|
* The default value is false.
|
|
* @since 1.3
|
|
*/
|
|
copiesParentKey: boolean;
|
|
/**
|
|
* Gets or sets whether #copySelection and #copyToClipboard copy the node data property
|
|
* whose value is the containing group data's key.
|
|
*
|
|
* Set this property to true if you want a copy/paste of a node to automatically have the new node be a member of the original group.
|
|
* Caution: this only has an effect if the Diagram's Diagram#model is a GraphLinksModel.
|
|
*
|
|
* The default value is false.
|
|
* @since 1.3
|
|
*/
|
|
copiesGroupKey: boolean;
|
|
/**
|
|
* Gets or sets a data object that is copied by #groupSelection
|
|
* when creating a new Group.
|
|
*
|
|
* The default value is null.
|
|
* If you set this to an Object, be sure that GraphLinksModel#isGroupForNodeData is true for that object.
|
|
* Setting this property does not raise any events.
|
|
*/
|
|
archetypeGroupData: ObjectData;
|
|
/**
|
|
* Gets or sets the predicate that determines whether or not a node may become a member of a group.
|
|
* This predicate is called in addition to any existing group's Group#memberValidation predicate.
|
|
* The default predicate is null, which is equivalent to simply returning true.
|
|
* The predicate may be called passing null as the first argument (the Group) --
|
|
* this asks whether it is OK to make the second argument (the Part, but not a Link) a top-level Part of the diagram.
|
|
* <p class="box">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
*/
|
|
memberValidation: ((aGroup: Group, somePart: Part) => boolean) | null;
|
|
/**
|
|
* Undocumented.
|
|
* Deprecated in favor of Diagram#defaultScale.
|
|
*/
|
|
defaultScale: number;
|
|
/**
|
|
* Gets or sets the amount by which #decreaseZoom and #increaseZoom change
|
|
* the Diagram#scale.
|
|
*
|
|
* The default value is 1.05 (5%).
|
|
* The value must be a number larger than 1.0.
|
|
* Setting this property does not raise any events.
|
|
* @since 1.1
|
|
*/
|
|
zoomFactor: number;
|
|
/**
|
|
* Find the actual collection of nodes and links to be moved or copied,
|
|
* given an initial collection.
|
|
* This includes links that connected at both ends to nodes being moved or copied,
|
|
* members of Groups, and if DraggingTool#dragsTree is true,
|
|
* this includes nodes and links that are "tree" descendants from selected nodes.
|
|
*
|
|
* Note that this does not return a simple collection of Parts,
|
|
* but a Map associating a chosen Part
|
|
* with an Object holding its original location Points as the value of the "point" property.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* This was moved to CommandHandler from DraggingTool in 2.0.
|
|
* @expose
|
|
* @param {Iterable.<Part>} parts A Set or List of Parts.
|
|
* @param {DraggingOptions=} options Potential options for the collection computation. If not specified, this uses the DraggingTool's drag options.
|
|
* @return {Map.<Part,DraggingInfo>} a Map mapping Parts to DraggingInfo Objects
|
|
* that have a "point" property remembering the original location of that Part.
|
|
* @since 2.0
|
|
*/
|
|
computeEffectiveCollection(parts: Iterable<Part>, options?: DraggingOptions): Map<Part, DraggingInfo>;
|
|
}
|
|
/**
|
|
* A type that describes a constructor. Used in the declaration of GraphObject.make.
|
|
*/
|
|
export type ConstructorType<T extends new (...args: Array<any>) => InstanceType<T>> = new (...args: Array<any>) => InstanceType<T>;
|
|
/**
|
|
* A type that declares which types may be passed as arguments, depending on the type of instance being built.
|
|
* Used in the declaration of GraphObject.make.
|
|
*/
|
|
export type MakeAllow<CT extends ConstructorType<CT>, C, E> = (InstanceType<CT> extends C ? E : never);
|
|
/**
|
|
* This is the abstract base class for all graphical objects.
|
|
* Classes inheriting from GraphObject include:
|
|
* Shape, TextBlock, Picture, and Panel.
|
|
* From the Panel class the Part class is derived, from which the
|
|
* Node and Link classes derive.
|
|
*
|
|
* It is very common to make use of the static function GraphObject.make in order to build up
|
|
* a visual tree of GraphObjects. You can see many examples of this throughout the
|
|
* Introduction, starting at <a href="../../intro/buildingObjects.html">Building Objects</a>,
|
|
* and the Samples, starting with <a href="../../samples/minimal.html">Minimal Sample</a>.
|
|
*
|
|
* Since GraphObject is an abstract class, programmers do not create GraphObjects themselves,
|
|
* but this class defines many properties used by all kinds of GraphObjects.
|
|
*
|
|
* The only visual properties on GraphObject are #background and #areaBackground.
|
|
* However one can control whether the GraphObject is drawn at all by setting #visible,
|
|
* or by setting #opacity to zero if you still want the GraphObject to occupy space.
|
|
* Also, if you want to control whether any mouse or touch events "see" the GraphObject,
|
|
* you can set #pickable to false.
|
|
*
|
|
* For more information about specifying how things get drawn, see the properties on the
|
|
* Shape, TextBlock, and Picture classes.
|
|
* <h3>GraphObject Sizing</h3>
|
|
*
|
|
* GraphObject defines most of the properties that cause objects to size themselves differently.
|
|
* The most prominent ones include:
|
|
* - The #desiredSize, #minSize, and #maxSize properties are used to
|
|
* explicitly set or limit the size of visual elements. #width and #height are
|
|
* convenience properties that set the #desiredSize width and height, respectively.
|
|
* - The #angle and #scale properties are used to transform visual elements.
|
|
* - The #stretch property determines how a GraphObject will fill its visual space,
|
|
* contextually granted to it by its containing Panel. Top-level (Part)
|
|
* GraphObjects are not affected by this property because they are always granted infinite space.
|
|
*
|
|
* All GraphObjects in a Diagram are measured and then arranged by their containing Panels in a tree-like fashion.
|
|
* After measuring and arranging, a GraphObject will have valid values for the read-only
|
|
* properties #naturalBounds, #measuredBounds, and #actualBounds.
|
|
*
|
|
* - The #naturalBounds of a GraphObject describe its local size,
|
|
* without any transformations (#scale, #angle) affecting it.
|
|
* - The #measuredBounds of a GraphObject describe its size within its containing Panel.
|
|
* - The #actualBounds of a GraphObject describe its position and given size inside of its panel.
|
|
* This size may be smaller than #measuredBounds, for instance if a GraphObject with a large #desiredSize
|
|
* is placed in a Panel of a smaller #desiredSize. Smaller #actualBounds than #measuredBounds
|
|
* typically means an object will be cropped.
|
|
*
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/sizing.html">the Introduction page on sizing</a>
|
|
* for usage information and examples.
|
|
* <h3>GraphObject Size and Position within Panel</h3>
|
|
* Several GraphObject properties guide the containing Panel for how to size and position the object within the panel.
|
|
*
|
|
* - The #alignment specifies where the object should be relative to some area of the panel.
|
|
* For example, an alignment value of Spot.BottomRight means that the GraphObject should be at the bottom-right corner of the panel.
|
|
* - The #alignmentFocus specifies precisely which point of the GraphObject should be aligned at the #alignment spot.
|
|
* - The #column and #row properties are only used by Panel.Table panels, to indicate where the GraphObject should be.
|
|
* - The #columnSpan and #rowSpan properties tell the Panel.Table panel how large the GraphObject should be.
|
|
* - The #isPanelMain property indicates to some kinds of Panels that the GraphObject is the "primary" object
|
|
* that other panel children should be measured with or positioned in.
|
|
* - The #margin property tells the containing Panel how much extra space to put around this GraphObject.
|
|
* - The #position property is used to determine the relative position of GraphObjects when they are elements of a Panel.Position panel.
|
|
*
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/panels.html">the Introduction page on Panels</a>
|
|
* and <a href="../../intro/tablePanels.html">Table Panels</a> for an overview of the capabilities.
|
|
* <h3>Top-level GraphObjects are Parts</h3>
|
|
*
|
|
* A Part is a derived class of GraphObject representing a top-level object.
|
|
* All top-level GraphObjects must be Parts, and Node, Link, Group, and Adornment derive from Part.
|
|
* The position of a Part determines the point of the Part's top-left corner in document coordinates.
|
|
* See also Part#location, which supports an way to specify the position based on a different
|
|
* spot of a different element within the Part.
|
|
*
|
|
* There are several read-only properties that help navigate up the visual tree.
|
|
* - #panel returns the Panel that directly contains this GraphObject
|
|
* - #part returns the Part that this GraphObject is in, perhaps via intervening Panels;
|
|
* this is frequently used in order to get to the model data, Panel#data
|
|
* - #layer returns the Layer that this GraphObject's Part is in
|
|
* - #diagram returns the Diagram that this GraphObject's Part's Layer is in
|
|
*
|
|
* <p class="boxrun">
|
|
* See <a href="../../samples/visualTree.html">the Visual Tree sample</a>
|
|
* for a diagram displaying the visual tree of a simple diagram.
|
|
* <h3>User Interaction</h3>
|
|
*
|
|
* GraphObjects have several properties enabling dynamic customizable interaction.
|
|
* There are several definable functions that execute on input events: #mouseDragEnter,
|
|
* #mouseDragLeave, #mouseDrop, #mouseEnter, #mouseHold,
|
|
* #mouseHover, #mouseLeave, and #mouseOver.
|
|
* For example, you could define mouse enter-and-leave event handlers to modify the appearance of a link
|
|
* as the mouse passes over it:
|
|
* ```js
|
|
* myDiagram.linkTemplate =
|
|
* $(go.Link,
|
|
* $(go.Shape,
|
|
* { strokeWidth: 2, stroke: "gray" }, // default color is "gray"
|
|
* { // here E is the InputEvent and OBJ is this Shape
|
|
* mouseEnter: function(e, obj) { obj.strokeWidth = 4; obj.stroke = "dodgerblue"; },
|
|
* mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = "gray"; }
|
|
* }));
|
|
* ```
|
|
*
|
|
* There are #click, #doubleClick, and #contextClick functions
|
|
* that execute when a user appropriately clicks the GraphObject.
|
|
* These click functions are called with the InputEvent as the first argument
|
|
* and this GraphObject as the second argument.
|
|
* For example, you could define a click event handler on a Node that goes to another page:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, "Auto",
|
|
* $(go.Shape, "RoundedRectangle",
|
|
* new go.Binding("fill", "color")),
|
|
* $(go.TextBlock,
|
|
* { name: "TB", margin: 3 },
|
|
* new go.Binding("text", "key")),
|
|
* { // second arg will be this GraphObject, which in this case is the Node itself:
|
|
* click: function(e, node) {
|
|
* window.open("https://en.wikipedia.org/Wiki/" + node.data.key);
|
|
* }
|
|
* });
|
|
* ```
|
|
*
|
|
* Note: you may prefer defining DiagramEvent listeners on the Diagram
|
|
* rather than on individual GraphObjects. DiagramEvents also include more general events that
|
|
* do not necessarily correspond to input events.
|
|
*
|
|
* The properties #actionCancel, #actionDown, #actionMove,
|
|
* and #actionUp define functions to execute when the GraphObject's #isActionable property
|
|
* is set to true (default false). See the ActionTool for more detail.
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/events.html">the Introduction page on Events</a> for a more general discussion.
|
|
* <h3>GraphObjects as Ports</h3>
|
|
*
|
|
* In GoJS, Links can only connect to elements within a Node
|
|
* that are specified as "ports", and by default the only port is the Node itself.
|
|
* Setting the #portId of a GraphObject inside a Node allows that object to act as a port.
|
|
* Note: the only kind of model that can save which port a link is connected with, i.e. portIds that are not an empty string,
|
|
* is a GraphLinksModel whose GraphLinksModel#linkFromPortIdProperty and
|
|
* GraphLinksModel#linkToPortIdProperty have been set to name properties on the link data objects.
|
|
*
|
|
* GraphObjects have several properties that are only relevant when they are acting as ports.
|
|
* These port-related properties are:
|
|
* - #portId, which must be set to a string that is unique within the Node,
|
|
* in order for this GraphObject to be treated as a "port", rather than the whole node
|
|
* - #fromSpot and #toSpot, where a link should connect with this port
|
|
* - #fromEndSegmentLength and #toEndSegmentLength, the length of the link segment adjacent to this port
|
|
* - #fromShortLength and #toShortLength, the distance the link should terminate before touching this port
|
|
* - #fromLinkable and #toLinkable, whether the user may draw links connecting with this port
|
|
* - #fromLinkableDuplicates and #toLinkableDuplicates, whether the user may draw multiple links between the same pair of ports
|
|
* - #fromLinkableSelfNode and #toLinkableSelfNode, whether the user may draw a link between ports on the same node
|
|
* - #fromMaxLinks and #toMaxLinks, to limit the number of links connecting with this port in a particular direction
|
|
*
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/ports.html">the Introduction page on ports</a>
|
|
* and <a href="../../intro/links.html">link routing</a>
|
|
* and <a href="../../intro/connectionPoints.html">link connection points</a>
|
|
* for port usage information and examples.
|
|
* <h3>GraphObjects as labels on a Link</h3>
|
|
*
|
|
* GraphObjects can also be used as "labels" on a Link.
|
|
* In addition to the #alignmentFocus property, these properties direct a Link Panel
|
|
* to position a "label" at a particular point along the route of the link, in a particular manner:
|
|
* - #segmentIndex, which segment the label should be on
|
|
* - #segmentFraction, how far along the segment the label should be
|
|
* - #segmentOffset, where the label should be positioned relative to the segment
|
|
* - #segmentOrientation, how the label should be rotated relative to the angle of the segment
|
|
*
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/linkLabels.html">the Introduction page on link labels</a>
|
|
* for examples of how to make use of labels on Links.
|
|
* <h3>Interactive Behavior</h3>
|
|
*
|
|
* There are several properties that specify fairly high-level interactive behavior:
|
|
* - #cursor, a CSS string specifying a cursor
|
|
* - #contextMenu, an Adornment
|
|
* - #toolTip, an Adornment
|
|
*
|
|
* <p class="boxread">
|
|
* For more information, please read <a href="../../intro/contextMenus.html">the Introduction page about Context Menus</a>
|
|
* and <a href="../../intro/toolTips.html">the page about ToolTips</a>.
|
|
* <p class="boxrun">
|
|
* Also see <a href="../../samples/basic.html">the Basic sample</a>
|
|
* for examples of how to show context menus and tooltips.
|
|
* @unrestricted
|
|
*/
|
|
export abstract class GraphObject {
|
|
/**
|
|
* This is an abstract class, so you should not use this constructor.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Copies properties from this object to the given object, which must be of the same class.
|
|
* This is called by #copy.
|
|
* This method may be overridden.
|
|
*
|
|
* For every property that you add to a subclass of a GraphObject-inheriting class,
|
|
* in this method you should assign its value to the copied object.
|
|
* For performance reasons you should set all of the same properties to <code>this</code>
|
|
* that the constructor does, and in the same order.
|
|
*
|
|
* For example, let us define a custom Link class and add two properties:
|
|
*
|
|
* ```js
|
|
* function CustomLink() {
|
|
* go.Link.call(this);
|
|
* this._someNewProperty = 17;
|
|
* this._someNewProperty2 = []; // an Array
|
|
* }
|
|
* go.Diagram.inherit(CustomLink, go.Link);
|
|
*
|
|
* CustomLink.prototype.cloneProtected = function() {
|
|
* // Always call the base method in an override
|
|
* // In TypeScript you would use: super.cloneProtected(copy);
|
|
* go.Link.prototype.cloneProtected.call(this, copy);
|
|
* // assign every new property to the copy:
|
|
* copy._someNewProperty = this._someNewProperty;
|
|
* copy._someNewProperty2 = this._someNewProperty2.slice(0); // make a copy of the Array
|
|
* }
|
|
* ```
|
|
*
|
|
* This ensures that copies of GraphObjects and their subclasses are faithful reproductions.
|
|
* Consider for properties that are references to objects whether the reference should be shared
|
|
* or whether that object value should be copied as well, resulting in a less shallow copy.
|
|
* This is demonstrated above by making a copy of the property value that is an Array,
|
|
* so that modifications to the Array will not be shared by copies of the CustomLink.
|
|
* Further copies of the Array items might be warranted, depending on their purpose.
|
|
*
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {GraphObject} copy
|
|
*/
|
|
protected cloneProtected(copy: this): void;
|
|
/**
|
|
* Creates a deep copy of this GraphObject and returns it.
|
|
* This method is the same as a clone for simple GraphObjects
|
|
* such as Shape, TextBlock, and Picture.
|
|
* For Panel this method copies the visual tree of GraphObjects that it contains.
|
|
* @expose
|
|
* @return {GraphObject}
|
|
*/
|
|
copy(): this;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of GraphObject#stretch
|
|
* are not automatically scaled to fit in the given bounds;
|
|
* there may be clipping in one or both directions if the available dimensions are too small.
|
|
* @constant
|
|
*/
|
|
static None: EnumValue;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of GraphObject#stretch
|
|
* are stretched depending on the context they are used. For instance a 'Circle' figure might
|
|
* be uniformly stretched whereas an 'Ellipse' figure might be non-uniformly stretched.
|
|
* @constant
|
|
*/
|
|
static Default: EnumValue;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of GraphObject#stretch
|
|
* are scaled as much as possible in the y-axis. In another context, can be used as a value of PanelLayout, so type is "any".
|
|
* @constant
|
|
*/
|
|
static Vertical: any;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of GraphObject#stretch
|
|
* are scaled as much as possible in the x-axis. In another context, can be used as a value of PanelLayout, so type is "any".
|
|
* @constant
|
|
*/
|
|
static Horizontal: any;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of GraphObject#stretch
|
|
* are scaled in both directions so as to fit exactly in the given bounds;
|
|
* there is no clipping but the aspect ratio may change, causing the object to appear stretched.
|
|
* @constant
|
|
*/
|
|
static Fill: EnumValue;
|
|
/**
|
|
* Pictures with this enumeration as the value of Picture#imageStretch are drawn with equal
|
|
* scale in both directions to fit the larger side of the image bounds;
|
|
* Panels of type Viewbox with this as the value of Panel#viewboxStretch
|
|
* scale the contained element equally in both directions to fit the larger side
|
|
* of the element's bounds in the given bounds.
|
|
* @constant
|
|
*/
|
|
static Uniform: EnumValue;
|
|
/**
|
|
* Pictures with this enumeration as the value of Picture#imageStretch are drawn with equal
|
|
* scale in both directions to fit the arranged (actual) bounds;
|
|
* Panels of type Viewbox with this as the value of Panel#viewboxStretch
|
|
* scale the contained element equally in both directions to fit the smaller side
|
|
* of the element's bounds in the given bounds.
|
|
* There may be clipping in one dimension.
|
|
* @constant
|
|
*/
|
|
static UniformToFill: EnumValue;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of Picture#flip or TextBlock#flip
|
|
* are drawn upside-down, with Y coordinate points increasing upwards.
|
|
* @constant
|
|
* @since 2.0
|
|
*/
|
|
static FlipVertical: EnumValue;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of Picture#flip or TextBlock#flip
|
|
* are drawn mirror-image, with X coordinate points increasing towards the left.
|
|
* @constant
|
|
* @since 2.0
|
|
*/
|
|
static FlipHorizontal: EnumValue;
|
|
/**
|
|
* GraphObjects with this enumeration as the value of Picture#flip or TextBlock#flip
|
|
* are drawn with both X and Y coordinates reversed.
|
|
* @constant
|
|
* @since 2.0
|
|
*/
|
|
static FlipBoth: EnumValue;
|
|
/**
|
|
* Returns the Point in document coordinates for a given Spot in this object's bounds
|
|
* or for a Point in local coordinates.
|
|
*
|
|
* For example, for an instance of a Node like this:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, "Auto",
|
|
* $(go.Shape, "RoundedRectangle",
|
|
* new go.Binding("fill", "color")),
|
|
* $(go.TextBlock,
|
|
* { name: "TB", margin: 3 },
|
|
* new go.Binding("text", "key")));
|
|
* ```
|
|
* where the Node is positioned at `100, 200`,
|
|
* ```js
|
|
* node.findObject("TB").getDocumentPoint(go.Spot.Center)
|
|
* ```
|
|
* could return a Point that is approximately at `122, 213`.
|
|
* @param {Spot|Point} local a real Spot describing a relative location in or near this GraphObject, or a real Point in local coordinates.
|
|
* @param {Point=} result an optional Point that is modified and returned.
|
|
* @return {Point} in document coordinates.
|
|
* @see #getDocumentBounds
|
|
* @see #getLocalPoint
|
|
*/
|
|
getDocumentPoint(local: Spot | Point, result?: Point): Point;
|
|
/**
|
|
* Returns the Rect in document coordinates for this object's bounds.
|
|
* If this GraphObject is a Part, the rect will be identical to its #actualBounds.
|
|
* @param {Rect=} result an optional Rect that is modified and returned.
|
|
* @return {Rect} in document coordinates.
|
|
* @see #getDocumentPoint
|
|
* @since 2.0
|
|
*/
|
|
getDocumentBounds(result?: Rect): Rect;
|
|
/**
|
|
* Returns the effective angle that the object is drawn at, in document coordinates, normalized to between 0 and 360.
|
|
*
|
|
* Basically this adds together all of the rotation declared by this #angle and the angles of all of its containing Panels, including the Part.
|
|
* @return {number}
|
|
*/
|
|
getDocumentAngle(): number;
|
|
/**
|
|
* Returns the total scale that the object is drawn at, in document coordinates.
|
|
*
|
|
* Basically this multiplies together this #scale with the scales of all of its containing Panels, including the Part.
|
|
* @return {number}
|
|
*/
|
|
getDocumentScale(): number;
|
|
/**
|
|
* Given a Point in document coordinates, returns a new Point in local coordinates.
|
|
*
|
|
* For example, if you have a mouse event whose InputEvent#documentPoint is at `122, 213`,
|
|
* and if you have a Node whose #position is at `100, 200`,
|
|
* `node.getLocalPoint(e.documentPoint)` could return a Point that is at `22, 13`.
|
|
* For a GraphObject within the Node named "TB",
|
|
* ```js
|
|
* node.findObject("TB").getLocalPoint(e.documentPoint)
|
|
* ```
|
|
* could return a Point that is at `15.7, 6.7`,
|
|
* if that "TB" object is positioned somewhat inside the bounds of the Node.
|
|
* @param {Point} p a real Point in document coordinates.
|
|
* @param {Point=} result an optional Point that is modified and returned.
|
|
* @return {Point} The corresponding Point in local coordinates.
|
|
* @see #getDocumentPoint
|
|
*/
|
|
getLocalPoint(p: Point, result?: Point): Point;
|
|
/**
|
|
* Gets or sets whether or not this GraphObject will be shadowed inside a Part that has Part#isShadowed set to true.
|
|
*
|
|
* The default is null, which means this GraphObject will obey the default shadow rules (see Part#isShadowed).
|
|
*
|
|
* A value of true or false will ensure that this part is shadowed or not regardless of the default shadow rules,
|
|
* but this GraphObject's shadowed status will not affect other GraphObjects in the Part.
|
|
*
|
|
* Typically this property does not need to be set, but you may need to set this value to false
|
|
* on GraphObjects inside a Part that you do not wish to be shadowed.
|
|
* @see Part#isShadowed
|
|
* @since 1.6
|
|
*/
|
|
shadowVisible: boolean | null;
|
|
/**
|
|
* This predicate is true if this object is an element, perhaps indirectly,
|
|
* of the given panel.
|
|
*
|
|
* For example, if this GraphObject is inside a Part but is not itself the Part,
|
|
* `obj.isContainedBy(obj.part)` should be true.
|
|
* @param {GraphObject} panel
|
|
* @return {boolean} true if this object is contained by the given panel,
|
|
* or if it is contained by another panel that is contained by the given panel,
|
|
* to any depth; false if the argument is null or is not a Panel.
|
|
*/
|
|
isContainedBy(panel: GraphObject): boolean;
|
|
/**
|
|
* This predicate is true if this object is #visible
|
|
* and each of its visual containing panels are also visible.
|
|
* This ignores the actual location or appearance (except visibility)
|
|
* of the panel that this object is part of, as well as ignoring all
|
|
* properties of the Layer or Diagram.
|
|
*
|
|
* For Parts, you can call the Part#isVisible predicate to determine
|
|
* if not only the Part is visible but also any containing Group or Link or Layer.
|
|
* @return {boolean}
|
|
*/
|
|
isVisibleObject(): boolean;
|
|
/**
|
|
* This predicate is false if this object is inside any Panel that is not Panel#isEnabled,
|
|
* or if this is itself a disabled panel.
|
|
* This ignores the #visible and #pickable properties.
|
|
* @return {boolean}
|
|
* @see #enabledChanged
|
|
* @see Panel#isEnabled
|
|
* @since 1.7
|
|
*/
|
|
isEnabledObject(): boolean;
|
|
/**
|
|
* Gets or sets the function to execute when some containing Panel changes the value of Panel#isEnabled.
|
|
* It is typically used to modify the appearance of the object.
|
|
* This function must not change the value of any panel Panel#isEnabled.
|
|
*
|
|
* If this property value is a function, it is called with two arguments,
|
|
* this GraphObject and the new value.
|
|
* By default this property is null -- no function is called.
|
|
* @see #isEnabledObject
|
|
* @see Panel#isEnabled
|
|
* @since 1.7
|
|
*/
|
|
enabledChanged: ((thisObj: GraphObject, enabled: boolean) => void) | null;
|
|
/**
|
|
* Gets or sets the orientation of a GraphObject that is in a Link or Panel.Graduated.
|
|
* This controls the automatic rotation of the object by the Link Panel or Graduated Panel.
|
|
* The only accepted values are the Link "Orient..." values of Link
|
|
* and the default value: Link.None.
|
|
*
|
|
* When the value is Link.None, the #angle of this object is unchanged as the link is routed.
|
|
* Setting this to a value of Link.OrientAlong will cause routing to set the #angle
|
|
* to be the angle of the segment that this object is on.
|
|
* Other values compute the angle somewhat differently.
|
|
* If the value is changed back to Link.None, the #angle of this object is set to zero.
|
|
*
|
|
* Note that when this property is not Link.None, this property takes precedence
|
|
* over any setting or binding of the #angle property.
|
|
* Changes to the angle caused by orientation might not result in Changed events,
|
|
* and any original value for the angle may be lost.
|
|
*
|
|
* In the case of Graduated Panels, if this value is Link.None, Link.OrientAlong, or Link.OrientUpright,
|
|
* any TextBlock label #angle will be respected. Depending on this value, the effective TextBlock angle will be either
|
|
* fixed or relative to the slope of the path where it is rendered.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.
|
|
* @see #segmentFraction
|
|
* @see #segmentIndex
|
|
* @see #segmentOffset
|
|
*/
|
|
segmentOrientation: EnumValue;
|
|
/**
|
|
* Gets or sets the segment index of a GraphObject that is in a Link.
|
|
* Non-negative numbers count up from zero, which is the first segment, at the "from" end of the Link.
|
|
* Negative numbers count segments from the "to" end of the Link, where -1 means the last segment
|
|
* and -2 means the next-to-last segment.
|
|
* The default value is -Infinity. The value should be an integer or NaN.
|
|
*
|
|
* Setting this value to NaN means #segmentFraction's fractional distance will be calculated along the entire link route.
|
|
* A NaN value also means the Link#midPoint and Link#midAngle will not be used when determining label positions.
|
|
*
|
|
* If you do not set this property, the Link will choose a place that is approximately at the
|
|
* mid-point of the link's route.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.
|
|
* @see #segmentFraction
|
|
* @see #segmentOffset
|
|
* @see #segmentOrientation
|
|
*/
|
|
segmentIndex: number;
|
|
/**
|
|
* Gets or sets the fractional distance along a segment of a GraphObject that is in a Link.
|
|
* The value should be between zero and one, where zero is at the point at the start of the segment,
|
|
* and where one is at the point at the end of the segment.
|
|
* The default value is zero.
|
|
*
|
|
* If #segmentIndex is set to NaN, the fractional distance will be calculated along the entire link route.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.
|
|
* @see #segmentIndex
|
|
* @see #segmentOffset
|
|
* @see #segmentOrientation
|
|
*/
|
|
segmentFraction: number;
|
|
/**
|
|
* Gets or sets the offset of a GraphObject that is in a Link from a point on a segment
|
|
* or in a Panel.Graduated from a point along the main element.
|
|
* The X component of the Point indicates the distance along the route,
|
|
* with positive values going further toward the "to" end of the link or panel.
|
|
* The Y component of the Point indicates the distance away from the route,
|
|
* with positive values towards the right as seen when facing further towards the "to" end of the link or panel.
|
|
* The value defaults to the Point (0, 0).
|
|
* You cannot modify the x or y of the value of this property --
|
|
* if you want to change the segmentOffset you must set this property to a different Point.
|
|
*
|
|
* For labels that are near either end of a link, it may be convenient to set the segmentOffset
|
|
* to Point(NaN, NaN). This causes the offset to be half the width and half the height of the label object.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.
|
|
* @see #segmentFraction
|
|
* @see #segmentIndex
|
|
* @see #segmentOrientation
|
|
*/
|
|
segmentOffset: Point;
|
|
/**
|
|
* Gets or sets the stretch of the GraphObject.
|
|
* This controls whether the width and/or height of this object automatically adjusts to fill
|
|
* the area allotted by the containing Panel.
|
|
*
|
|
* The only accepted values are listed as constant properties of GraphObject,
|
|
* such as GraphObject.None, GraphObject.Fill, GraphObject.Horizontal, or GraphObject.Vertical.
|
|
* The default value is GraphObject.Default, which allows the Panel to decide how to treat this object, depending on the type of Panel.
|
|
*
|
|
* Objects with an #angle that are stretched may look incorrect unless the angle is a multiple of 90.
|
|
*
|
|
* Stretch will have have different effects based upon the Panel containing this object. Elements of:
|
|
* - Auto panels will not stretch, except the main element growing to fill the panel or being made uniform
|
|
* - Horizontal panels will only stretch vertically
|
|
* - Vertical panels will only stretch horizontally
|
|
* - Spot panels will stretch to the size of the main element
|
|
* - Table panels will stretch to the size of their cell, defined by their row and column, which is usually determined by other GraphObjects in that cell that are not stretching
|
|
* - Grid panels, Link panels, and Graduated panels will not stretch
|
|
* @see Panel#defaultStretch
|
|
* @see #desiredSize
|
|
* @see #minSize
|
|
* @see #maxSize
|
|
* @see #measuredBounds
|
|
* @see #actualBounds
|
|
* @see #scale
|
|
* @see Picture#imageStretch
|
|
*/
|
|
stretch: EnumValue;
|
|
/**
|
|
* Gets or sets the name for this object.
|
|
* The default value is the empty string.
|
|
* The name should be unique within a Panel, although if it isn't,
|
|
* it reduces the usefulness of methods such as Panel#findObject.
|
|
*
|
|
* You must not modify the name of a GraphObject once it is in the visual tree of a Part.
|
|
*
|
|
* This is frequently needed to identify a particular GraphObject in the visual tree of a Part,
|
|
* for example as the value of the Part#locationObjectName or
|
|
* Part#selectionObjectName properties.
|
|
*/
|
|
name: string;
|
|
/**
|
|
* Gets or sets the multiplicative opacity for this GraphObject and (if a Panel) all elements.
|
|
* The value must be between 0.0 (fully transparent) and 1.0 (no additional transparency).
|
|
*
|
|
* Unlike #visible, Opacity only affects drawing, it does not cause objects to be resized or remeasured.
|
|
* Opacity settings do not change the shape of the object or exclude it from object-picking
|
|
* (does not change whether any objects are found by the "find..." methods).
|
|
*
|
|
* This value is multiplicative with any existing transparency,
|
|
* for instance from Layer#opacity or a GraphObject's opacity higher in the visual tree,
|
|
* or from a Brush or image transparency.
|
|
* The default value is 1.
|
|
* @see #visible
|
|
* @see #pickable
|
|
* @see Layer#opacity
|
|
* @see Diagram#opacity
|
|
* @since 1.4
|
|
*/
|
|
opacity: number;
|
|
/**
|
|
* Gets or sets whether a GraphObject is visible.
|
|
* The default value is true.
|
|
* A not visible object takes no space in the Panel that it is in.
|
|
* Toggling visibility may cause elements in the visual tree to re-measure and re-arrange.
|
|
* Making a Panel not visible causes all of its elements not to be seen or receive input events.
|
|
* Changing a Panel to become visible causes all of its elements to be seen and be active,
|
|
* unless those elements are themselves not visible.
|
|
*
|
|
* This object does not get any mouse/touch events if it is not #visible
|
|
* or if it is not #pickable.
|
|
*
|
|
* One can have a visible Shape that is not drawn by setting its Shape#fill
|
|
* and Shape#stroke to null or to `"transparent"`.
|
|
* Similarly, one can set TextBlock#stroke to null or to `"transparent"`.
|
|
* It is also possible make a GraphObjects transparent by setting GraphObject#opacity to 0.
|
|
* Finally, one can make a whole Layer-full of Parts invisible by setting Layer#visible to false.
|
|
*
|
|
* Use the #isVisibleObject predicate to see if this GraphObject is visible and is inside a Panel
|
|
* that is #isVisibleObject, and so forth up the chain of panels until reaching the Part.
|
|
*
|
|
* For Parts, you can call the Part#isVisible predicate to determine
|
|
* if not only the Part is visible but also any containing Group or Link,
|
|
* and whether the Layer it is in is visible.
|
|
* @see #opacity
|
|
* @see #pickable
|
|
* @see Layer#visible
|
|
*/
|
|
visible: boolean;
|
|
/**
|
|
* Gets or sets whether or not this GraphObject can be chosen by visual "find" or "hit-test" methods such
|
|
* as Diagram#findObjectAt.
|
|
*
|
|
* This object does not get any mouse/touch events if it is not #visible
|
|
* or if it is not #pickable.
|
|
*
|
|
* The default value is true -- mouse events on this object will be noticed.
|
|
* If this value is false and this object is a Panel, not only is this Panel not "hittable",
|
|
* but all of the elements inside the Panel will be ignored.
|
|
* @see #visible
|
|
* @see #opacity
|
|
* @see Layer#pickable
|
|
* @see Panel#isEnabled
|
|
* @since 1.2
|
|
*/
|
|
pickable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may draw duplicate Links from this port.
|
|
* This property is used by LinkingBaseTool#isValidLink.
|
|
* The default value is false.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #fromLinkable
|
|
* @see #fromLinkableSelfNode
|
|
* @see #toLinkableDuplicates
|
|
*/
|
|
fromLinkableDuplicates: boolean;
|
|
/**
|
|
* Gets or sets whether the user may draw Links that connect from this port's Node.
|
|
* This property is used by LinkingBaseTool#isValidLink.
|
|
* The default value is false.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #fromLinkable
|
|
* @see #fromLinkableDuplicates
|
|
* @see #toLinkableSelfNode
|
|
*/
|
|
fromLinkableSelfNode: boolean;
|
|
/**
|
|
* Gets or sets whether the user may draw duplicate Links to this port.
|
|
* This property is used by LinkingBaseTool#isValidLink.
|
|
* The default value is false.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #toLinkable
|
|
* @see #toLinkableSelfNode
|
|
* @see #fromLinkableDuplicates
|
|
*/
|
|
toLinkableDuplicates: boolean;
|
|
/**
|
|
* Gets or sets whether the user may draw Links that connect to this port's Node.
|
|
* This property is used by LinkingBaseTool#isValidLink.
|
|
* The default value is false.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #toLinkable
|
|
* @see #toLinkableDuplicates
|
|
* @see #fromLinkableSelfNode
|
|
*/
|
|
toLinkableSelfNode: boolean;
|
|
/**
|
|
* Gets or sets whether a GraphObject is the "main" object for some types of Panel.
|
|
* Panels that use a "main" object include Panel.Auto, Panel.Spot, and Panel.Link.
|
|
*
|
|
* Panels that use a "main" object will use the first object that has this property set to true,
|
|
* or else just the first object, if none have the property set.
|
|
*
|
|
* Do not modify this property once this object is an element of a panel.
|
|
*/
|
|
isPanelMain: boolean;
|
|
/**
|
|
* This property determines whether or not this GraphObject's events occur
|
|
* before all other events, including selection. This enables the #actionDown,
|
|
* #actionMove, #actionUp, and #actionCancel events,
|
|
* which are all handled by the ActionTool.
|
|
*
|
|
* This object does not get any mouse/touch events if it is not #visible
|
|
* or if it is not #pickable.
|
|
*
|
|
* This property is infrequently used -- typically only when implementing objects
|
|
* that act as buttons or knobs or sliders.
|
|
* The default value is false.
|
|
* @see #actionDown
|
|
* @see #actionMove
|
|
* @see #actionUp
|
|
* @see #actionCancel
|
|
* @see #pickable
|
|
* @see Panel#isEnabled
|
|
*/
|
|
isActionable: boolean;
|
|
/**
|
|
* Gets or sets the areaBackground Brush of this GraphObject.
|
|
* The areaBackground fills the rectangle described by this GraphObject's containing panel's coordinates.
|
|
* If the object is rotated, the area background will expand to fill the entire measured bounds of the object,
|
|
* without rotating the brush.
|
|
*
|
|
* The value may be either a Brush object or a string that is a CSS color.
|
|
* The default value is null -- no area background is drawn.
|
|
* More information about the syntax of CSS color strings is available at:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.
|
|
* @see #background
|
|
* @see Shape#fill
|
|
*/
|
|
areaBackground: BrushLike;
|
|
/**
|
|
* Gets or sets the background Brush of this GraphObject,
|
|
* filling the rectangle of this object's local coordinate space.
|
|
* If the object is rotated, the background will rotate with it.
|
|
*
|
|
* The value may be either a Brush object or a string that is a CSS color.
|
|
* The default value is null -- no background is drawn.
|
|
* More information about the syntax of CSS color strings is available at:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.
|
|
* @see #areaBackground
|
|
* @see Shape#fill
|
|
*/
|
|
background: BrushLike;
|
|
/**
|
|
* This read-only property returns the Part containing this object, if any.
|
|
* The Part will be the root GraphObject in this GraphObject's visual tree.
|
|
*
|
|
* It is common to refer to the containing Part of a GraphObject
|
|
* in order to refer to the Panel#data to which it is bound.
|
|
*
|
|
* This property is not settable.
|
|
* If you want this GraphObject to belong to a Part, you will need to add it to a Part,
|
|
* or else add it to some visual tree structure that is added to a Part using Panel#add.
|
|
*
|
|
* Note that for objects such as buttons that are in Adornments such as tooltips or context menus,
|
|
* this property will return that Adornment, not the Node or Link that is adorned.
|
|
*
|
|
* If you want to find a Group that contains a Part, use the Part#containingGroup property:
|
|
* `someObj.part.containingGroup`
|
|
*/
|
|
readonly part: Part | null;
|
|
/**
|
|
* This read-only property returns the GraphObject's containing Panel, or null if this object is not in a Panel.
|
|
*
|
|
* Although Part inherits from this class, a Part will never belong to a Panel,
|
|
* so this property will always be null for every Node or Link.
|
|
*
|
|
* This property is not settable.
|
|
* Instead, call Panel#add in order to put a GraphObject in a Panel.
|
|
*/
|
|
readonly panel: Panel | null;
|
|
/**
|
|
* This read-only property returns the GraphObject's containing Layer, if there is any.
|
|
* A plain GraphObject cannot belong directly to a Layer -- only a Part can belong directly to a Layer.
|
|
*
|
|
* This property is not settable.
|
|
* Normally one changes which Layer that a GraphObject is in by setting Part#layerName.
|
|
* Adding a Part to a Diagram will automatically add that Part to a Layer in that Diagram based on the layerName.
|
|
*/
|
|
readonly layer: Layer | null;
|
|
/**
|
|
* This read-only property returns the Diagram that this GraphObject is in, if it is.
|
|
*
|
|
* This property is not settable.
|
|
* Although you cannot add any plain GraphObject to a Diagram, you can call Diagram#add
|
|
* to add a Part to a Diagram.
|
|
*/
|
|
readonly diagram: Diagram | null;
|
|
/**
|
|
* Gets or sets the position of this GraphObject in container coordinates
|
|
* (either a Panel or the document).
|
|
* Value must be of type Point.
|
|
* You cannot modify the x or y of the value of this property --
|
|
* if you want to change the position you must set this property to a different Point.
|
|
* Default is Point(NaN, NaN).
|
|
*
|
|
* For Parts, see also Part#location.
|
|
*/
|
|
position: Point;
|
|
/**
|
|
* This read-only property returns the bounds of this GraphObject in container coordinates. This means that
|
|
* the actualBounds are in the coordinate space of the GraphObject's Panel,
|
|
* unless this is a Part, in which case they are in
|
|
* the Diagram's coordinate system.
|
|
*
|
|
* You must not modify any of the properties of the Rect that is the value of this property.
|
|
*
|
|
* If this GraphObject is a Part,
|
|
* then the x and y values of the actualBounds are identical to that Part's #position,
|
|
* and the width and height values of the actualBounds represent the rectangular space occupied
|
|
* by the Part in Diagram#documentBounds coordinates.
|
|
*
|
|
* If this GraphObject is not a top-level object (not a Part), then the actualBounds
|
|
* x and y values represent that GraphObject's position within its Panel. In a Panel of type Panel.Position
|
|
* this is identical to the GraphObject's #position, but in other cases it is dependent on
|
|
* the unique workings of each Panel type. The actualBounds width and height
|
|
* of a GraphObject are the final size after the #scale and #angle are applied.
|
|
*
|
|
* It is possible for a GraphObject (be it an GraphObject or a Panel containing several more GraphObjects)
|
|
* to have no containing Part, in which case these GraphObjects cannot possibly be in a Diagram.
|
|
* These GraphObjects are unlikely to have real-number values for their actualBounds, as they may
|
|
* never have had the chance to be measured and arranged.
|
|
*
|
|
* As with all read-only properties, using this property as a binding source is unlikely to be useful.
|
|
* @see #measuredBounds
|
|
* @see #desiredSize
|
|
*/
|
|
readonly actualBounds: Rect;
|
|
/**
|
|
* Gets or sets the scale transform of this GraphObject.
|
|
* Value must be a number; larger values will make this object appear bigger.
|
|
* Default is 1.
|
|
* @see #angle
|
|
* @see #stretch
|
|
*/
|
|
scale: number;
|
|
/**
|
|
* Gets or sets the angle transform, in degrees, of this GraphObject.
|
|
* Value must be a number. If the value is not between (0 <= value < 360),
|
|
* it will be normalized to be in that range.
|
|
* Zero is along the positive X-axis (rightwards); 90 is along the positive Y-axis (downwards).
|
|
* Default is 0.
|
|
*
|
|
* When set on a Graduated Panel's TextBlock label, this value will be be ignored if segmentOrientation is not
|
|
* Link.None, Link.OrientAlong, or Link.OrientUpright. OrientAlong and OrientUpright will use this angle
|
|
* relative to the slope of the main path.
|
|
*
|
|
* When set on a Link label, this value will be be ignored if segmentOrientation is not Link.None.
|
|
* @see #scale
|
|
* @see #stretch
|
|
*/
|
|
angle: number;
|
|
/**
|
|
* Gets or sets the desired size of this GraphObject in local coordinates.
|
|
* Value must be of type Size.
|
|
* Default is Size(NaN, NaN).
|
|
* You cannot modify the width or height of the value of this property --
|
|
* if you want to change the desiredSize you must set this property to a different Size.
|
|
*
|
|
* Getting or setting #width or #height is equivalent to getting or setting the
|
|
* width or height of this property.
|
|
*
|
|
* The size does not include any transformation due to #scale or #angle,
|
|
* nor any pen thickness due to Shape#strokeWidth if this is a Shape.
|
|
* If there is a containing Panel the Panel will determine the actual size.
|
|
* If the desiredSize is greater than the allowed size that the GraphObject's Panel determines,
|
|
* then the GraphObject may be visually clipped. If the desiredSize does not meet the constraints
|
|
* of #minSize and #maxSize, the GraphObject will be resized to meet them.
|
|
* @see #minSize
|
|
* @see #maxSize
|
|
* @see #naturalBounds
|
|
* @see #measuredBounds
|
|
* @see #actualBounds
|
|
*/
|
|
desiredSize: Size;
|
|
/**
|
|
* Gets or sets the desired width of this GraphObject in local coordinates.
|
|
* This just gets or sets the width component of the #desiredSize.
|
|
* Default is NaN.
|
|
*
|
|
* Size can also be constrained by setting #minSize and #maxSize.
|
|
*
|
|
* The width does not include any transformation due to #scale or #angle,
|
|
* nor any pen thickness due to Shape#strokeWidth if this is a Shape.
|
|
* If there is a containing Panel the Panel will determine the actual size.
|
|
*/
|
|
width: number;
|
|
/**
|
|
* Gets or sets the desired height of this GraphObject in local coordinates.
|
|
* This just gets or sets the height component of the #desiredSize.
|
|
* Default is NaN.
|
|
*
|
|
* Size can also be constrained by setting #minSize and #maxSize.
|
|
*
|
|
* The height does not include any transformation due to #scale or #angle,
|
|
* nor any pen thickness due to Shape#strokeWidth if this is a Shape.
|
|
* If there is a containing Panel the Panel will determine the actual size.
|
|
*/
|
|
height: number;
|
|
/**
|
|
* Gets or sets the minimum size of this GraphObject in container coordinates
|
|
* (either a Panel or the document).
|
|
* Any new value must be of type Size; NaN values are treated as 0.
|
|
*
|
|
* You cannot modify the width or height of the value of this property --
|
|
* if you want to change the minSize you must set this property to a different Size.
|
|
* The default value is zero by zero.
|
|
* A containing Panel will determine the actual size of this object.
|
|
* @see #maxSize
|
|
* @see #desiredSize
|
|
*/
|
|
minSize: Size;
|
|
/**
|
|
* Gets or sets the maximum size of this GraphObject in container coordinates
|
|
* (either a Panel or the document).
|
|
* Any new value must be of type Size; NaN values are treated as Infinity. If you want no maximum width or height, use NaN or Infinity.
|
|
*
|
|
* You cannot modify the width or height of the value of this property --
|
|
* if you want to change the maxSize you must set this property to a different Size.
|
|
* The default value is Infinity by Infinity.
|
|
* A containing Panel will determine the actual size of this object.
|
|
* @see #minSize
|
|
* @see #desiredSize
|
|
*/
|
|
maxSize: Size;
|
|
/**
|
|
* This read-only property returns the measuredBounds of the GraphObject in container coordinates
|
|
* (either a Panel or the document).
|
|
* This describes the transformed bounds with margins excluded.
|
|
*
|
|
* You must not modify any of the properties of the Rect that is the value of this property.
|
|
*
|
|
* As with all read-only properties, using this property as a binding source is unlikely to be useful.
|
|
* @see #naturalBounds
|
|
* @see #desiredSize
|
|
* @see #actualBounds
|
|
*/
|
|
readonly measuredBounds: Rect;
|
|
/**
|
|
* This read-only property returns the natural bounding rectangle of this GraphObject in local coordinates,
|
|
* before any transformation by #scale or #angle,
|
|
* and before any resizing due to #minSize or #maxSize or #stretch.
|
|
* Defaults to unknown (NaN,NaN).
|
|
*
|
|
* You must not modify any of the properties of the Rect that is the value of this property.
|
|
*
|
|
* The value can only be changed by changing properties of the particular GraphObject,
|
|
* such as GraphObject#desiredSize, Shape#geometry, or TextBlock#font.
|
|
*
|
|
* As with all read-only properties, using this property as a binding source is unlikely to be useful.
|
|
* @see #desiredSize
|
|
* @see #measuredBounds
|
|
* @see #actualBounds
|
|
*/
|
|
readonly naturalBounds: Rect;
|
|
/**
|
|
* Gets or sets the size of empty area around this GraphObject, as a Margin,
|
|
* in the containing Panel coordinates.
|
|
*
|
|
* Negative values are permitted but may cause overlaps with adjacent
|
|
* objects in a Panel.
|
|
* You cannot modify the top or left or right or bottom of the value of this property --
|
|
* if you want to change the margin you must set this property to a different Margin.
|
|
* Default margin is Margin(0,0,0,0).
|
|
*
|
|
* The property setter accepts a number instead of a Margin object: providing a
|
|
* number N will result in using a Margin(N, N, N, N).
|
|
* The property getter will always return a Margin.
|
|
* @see #desiredSize
|
|
* @see #measuredBounds
|
|
* @see #actualBounds
|
|
* @see Panel#padding
|
|
*/
|
|
margin: MarginLike;
|
|
/**********************************************************
|
|
Panel-specific properties:
|
|
***********************************************************/
|
|
/**
|
|
* Gets or sets the alignment Spot of this GraphObject used in Panel layouts,
|
|
* to determine where in the area allocated by the panel this object should be placed.
|
|
*
|
|
* The default value is Spot.Default, which lets the Panel determine the Spot using
|
|
* Panel#defaultAlignment. If that property is also Spot.Default,
|
|
* then the alignment spot will be different depending on the Panel type.
|
|
*
|
|
* The #alignmentFocus is often used along with this property to specify
|
|
* where this object should be positioned in a Panel.
|
|
*
|
|
* A Spot.Default is equivalent to Spot.Center in Spot, Auto, Horizontal, and Vertical panels.
|
|
* For examples of alignments in different panels, see the <a href="../../intro/panels.html">Introduction page on Panels</a>.
|
|
*
|
|
* @see #alignmentFocus
|
|
* @see Panel#defaultAlignment
|
|
*/
|
|
alignment: Spot;
|
|
/**
|
|
* Gets or sets the column of this GraphObject if it is in a Table Panel.
|
|
* The value must be a small non-negative integer. The default is 0.
|
|
*/
|
|
column: number;
|
|
/**
|
|
* Gets or sets the number of columns spanned by this GraphObject if it is in a Table Panel.
|
|
* The value must be a small positive integer. The default is 1.
|
|
*/
|
|
columnSpan: number;
|
|
/**
|
|
* Gets or sets the row of this GraphObject if it is in a Table Panel.
|
|
* The value must be a small non-negative integer. The default is 0.
|
|
*/
|
|
row: number;
|
|
/**
|
|
* Gets or sets the number of rows spanned by this GraphObject if it is in a Table Panel.
|
|
* The value must be a small positive integer. The default is 1.
|
|
*/
|
|
rowSpan: number;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
spanAllocation: ((a: GraphObject, b: RowColumnDefinition, c: number) => number) | null;
|
|
/**
|
|
* Gets or sets the spot on this GraphObject to be used as the alignment point
|
|
* in Spot and Fixed Panels.
|
|
* Value must be of the Spot.
|
|
*
|
|
* The default value is Spot.Default, which means that the Panel type can decide the effective alignment spot.
|
|
*
|
|
* The #alignment is often used along with this property to specify
|
|
* where this object should be positioned in a Panel.
|
|
*
|
|
* For Panel.Graduated, the alignmentFocus spot determines the spot on a child element to be aligned with some
|
|
* point along the main element.
|
|
*
|
|
* When you want a link label Node to be positioned by its location spot rather than by this alignmentFocus spot,
|
|
* you can set this property to Spot.None, only on Nodes.
|
|
*
|
|
* For examples of alignments in different panels, see the <a href="../../intro/panels.html">Introduction page on Panels</a>.
|
|
*
|
|
* WARNING: Since 2.0, for Spot Panels, the offsetX/offsetY of #alignmentFocus has been reversed.
|
|
* The offsetX/Y now describes offset distance from the alignmentFocus point to the alignment point, rather than the opposite.
|
|
* This is what it has always described when using #alignmentFocus with Link Labels.
|
|
* @see Panel#alignmentFocusName
|
|
*/
|
|
alignmentFocus: Spot;
|
|
/**********************************************************
|
|
Port-specific properties:
|
|
***********************************************************/
|
|
/**
|
|
* Gets or sets an identifier for an object acting as a port on a Node.
|
|
* The default value is null -- this object is not a port.
|
|
*
|
|
* A value that is the empty string is used by convention to mean the primary
|
|
* (and usually only) port of the node.
|
|
*
|
|
* If a Node has no named ports, then the Node itself is the sole port.
|
|
*
|
|
* Note: the only kind of model that can save port information, i.e. portIds that are not an empty string,
|
|
* for links is a GraphLinksModel whose GraphLinksModel#linkFromPortIdProperty and
|
|
* GraphLinksModel#linkToPortIdProperty have been set to name properties on the link data objects.
|
|
*
|
|
* The value should be unique within the Node.
|
|
* You must not modify this property once this GraphObject is in the visual tree of a Node.
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/ports.html">the Introduction page on ports</a>
|
|
* for usage information and examples.
|
|
* @see #fromLinkable
|
|
* @see #toLinkable
|
|
* @see #fromSpot
|
|
* @see #toSpot
|
|
* @see Link#fromSpot
|
|
* @see Link#toSpot
|
|
*/
|
|
portId: string;
|
|
/**
|
|
* Gets or sets where a link should connect to this port.
|
|
* The default value is Spot.None, meaning that the link routing
|
|
* must consider the shape of the port and connect to the closest point.
|
|
*
|
|
* The value of Link#toSpot, if not Spot.Default, takes precedence over the value at this port
|
|
* when determining the route of the link.
|
|
* A number of the predefined Layouts automatically set Link#fromSpot and Link#toSpot,
|
|
* thereby causing this property and #fromSpot on the port element to be ignored.
|
|
* Depending on the layout, you may be able to disable that behavior, such as by setting ForceDirectedLayout#setsPortSpots,
|
|
* TreeLayout#setsPortSpot, TreeLayout#setsChildPortSpot, or LayeredDigraphLayout#setsPortSpots to false.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see Link#toSpot
|
|
* @see Link#computeSpot
|
|
* @see #fromSpot
|
|
* @see #portId
|
|
*/
|
|
toSpot: Spot;
|
|
/**
|
|
* Gets or sets the length of the last segment of a link going to this port.
|
|
* This value is used when the computed "to spot" is not Spot.None.
|
|
* The default value is 10.
|
|
*
|
|
* The value of Link#toEndSegmentLength, if not NaN, takes precedence over the value at this port
|
|
* when determining the route of the link.
|
|
* This value also limits how short the Link#toShortLength may be drawn.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/links.html#EndSegmentLengths">Link End Segment Lengths</a>.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see Link#toEndSegmentLength
|
|
* @see Link#computeEndSegmentLength
|
|
* @see #fromEndSegmentLength
|
|
* @see #portId
|
|
*/
|
|
toEndSegmentLength: number;
|
|
/**
|
|
* Gets or sets how far the end segment of a link going to this port stops short of the actual port.
|
|
* Positive values are limited by the #toEndSegmentLength or Link#toEndSegmentLength.
|
|
* Negative values cause the link to extend into the port.
|
|
* The default value is zero.
|
|
*
|
|
* This property is useful when you have a thick link and a pointy arrowhead.
|
|
* Normally the link Shape extends all the way to the end of the arrowhead.
|
|
* If the link Shape is wide, its edges will be seen behind the arrowhead.
|
|
* By setting this property to a small positive value, the link Shape can end within the
|
|
* body of the arrowhead, leaving only the point of the arrowhead visible at the end of the link.
|
|
*
|
|
* A negative value for this property can also be useful when you want the link Shape to continue
|
|
* into the port, perhaps because a portion of the port is transparent and you want the link to
|
|
* appear to connect visually with a different point on the node.
|
|
*
|
|
* The value of Link#toShortLength, if not NaN, takes precedence over the value at this port
|
|
* when determining the route of the link.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #fromShortLength
|
|
* @see Link#toShortLength
|
|
* @see #portId
|
|
*/
|
|
toShortLength: number;
|
|
/**
|
|
* Gets or sets whether the user may draw Links to this port.
|
|
* This property is used by LinkingBaseTool#isValidTo.
|
|
*
|
|
* The default value is null, which indicates that the real value is inherited from
|
|
* the parent Panel, or false if there is no containing panel.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node,
|
|
* or unless you are disabling the "linkability" of a particular GraphObject
|
|
* inside a Panel whose toLinkable has been set or bound to true.
|
|
* @see #fromLinkable
|
|
* @see #toMaxLinks
|
|
* @see #portId
|
|
* @see #cursor
|
|
*/
|
|
toLinkable: boolean | null;
|
|
/**
|
|
* Gets or sets the maximum number of links that may go into this port.
|
|
* This property is used by LinkingBaseTool#isValidTo.
|
|
*
|
|
* The value must be non-negative.
|
|
* The default value is Infinity.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #toLinkable
|
|
* @see #fromMaxLinks
|
|
* @see #portId
|
|
*/
|
|
toMaxLinks: number;
|
|
/**
|
|
* Gets or sets where a link should connect from this port.
|
|
* The default value is Spot.None, meaning that the link routing
|
|
* must consider the shape of the port and connect at the closest point.
|
|
*
|
|
* The value of Link#fromSpot, if not Spot.Default, takes precedence over the value at this port
|
|
* when determining the route of the link.
|
|
* A number of the predefined Layouts automatically set Link#fromSpot and Link#toSpot,
|
|
* thereby causing this property and #toSpot on the port element to be ignored.
|
|
* Depending on the layout, you may be able to disable that behavior, such as by setting ForceDirectedLayout#setsPortSpots,
|
|
* TreeLayout#setsPortSpot, TreeLayout#setsChildPortSpot, or LayeredDigraphLayout#setsPortSpots to false.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see Link#fromSpot
|
|
* @see Link#computeSpot
|
|
* @see #toSpot
|
|
* @see #portId
|
|
*/
|
|
fromSpot: Spot;
|
|
/**
|
|
* Gets or sets the length of the first segment of a link coming from this port.
|
|
* This value is used when the computed "from spot" is not Spot.None.
|
|
* The default value is 10.
|
|
* This value also limits how short the Link#fromShortLength may be drawn.
|
|
*
|
|
* The value of Link#fromEndSegmentLength, if not NaN, takes precedence over the value at this port
|
|
* when determining the route of the link.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/links.html#EndSegmentLengths">Link End Segment Lengths</a>.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see Link#fromEndSegmentLength
|
|
* @see Link#computeEndSegmentLength
|
|
* @see #toEndSegmentLength
|
|
* @see #portId
|
|
*/
|
|
fromEndSegmentLength: number;
|
|
/**
|
|
* Gets or sets how far the end segment of a link coming from this port stops short of the actual port.
|
|
* Positive values are limited by the #fromEndSegmentLength or Link#fromEndSegmentLength.
|
|
* Negative values cause the link to extend into the port.
|
|
* The default value is zero.
|
|
*
|
|
* This property is useful when you have a thick link and a pointy arrowhead.
|
|
* Normally the link Shape extends all the way to the end of the arrowhead.
|
|
* If the link Shape is wide, its edges will be seen behind the arrowhead.
|
|
* By setting this property to a small positive value, the link Shape can end within the
|
|
* body of the arrowhead, leaving only the point of the arrowhead visible at the end of the link.
|
|
*
|
|
* A negative value for this property can also be useful when you want the link Shape to continue
|
|
* into the port, perhaps because a portion of the port is transparent and you want the link to
|
|
* appear to connect visually with a different point on the node.
|
|
*
|
|
* The value of Link#fromShortLength, if not NaN, takes precedence over the value at this port
|
|
* when determining the route of the link.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #toShortLength
|
|
* @see Link#fromShortLength
|
|
* @see #portId
|
|
*/
|
|
fromShortLength: number;
|
|
/**
|
|
* Gets or sets whether the user may draw Links from this port.
|
|
* This property is used by LinkingBaseTool#isValidFrom.
|
|
*
|
|
* The default value is null, which indicates that the real value is inherited from
|
|
* the parent Panel, or false if there is no containing panel.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node,
|
|
* or unless you are disabling the "linkability" of a particular GraphObject
|
|
* inside a Panel whose fromLinkable has been set or bound to true.
|
|
* @see #toLinkable
|
|
* @see #fromMaxLinks
|
|
* @see #portId
|
|
* @see #cursor
|
|
*/
|
|
fromLinkable: boolean | null;
|
|
/**
|
|
* Gets or sets the maximum number of links that may come out of this port.
|
|
* This property is used by LinkingBaseTool#isValidFrom.
|
|
*
|
|
* The value must be non-negative.
|
|
* The default value is Infinity.
|
|
*
|
|
* You must set this property on a GraphObject whose #portId is non-null,
|
|
* unless the whole Node is acting as a single port,
|
|
* in which case this property should be set on the Node.
|
|
* @see #fromLinkable
|
|
* @see #toMaxLinks
|
|
* @see #portId
|
|
*/
|
|
fromMaxLinks: number;
|
|
/**********************************************************
|
|
Event Handling:
|
|
***********************************************************/
|
|
/**
|
|
* Gets or sets the mouse cursor to use when the mouse is over this object with no mouse buttons pressed.
|
|
* The value is null when no particular cursor is specified for this object;
|
|
* the actual cursor is determined by any containing Panel.
|
|
*
|
|
* The default value is the empty string, which means the
|
|
* current mouse cursor is determined by the Diagram.
|
|
* Other strings should be valid CSS strings that specify a cursor.
|
|
* This provides some more information about cursor syntax:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">CSS cursors (mozilla.org)</a>.
|
|
* @see Diagram#defaultCursor
|
|
* @see Diagram#currentCursor
|
|
*/
|
|
cursor: string;
|
|
/**
|
|
* Gets or sets the function to execute when the user single-primary-clicks on this object.
|
|
* This typically involves a mouse-down followed by a prompt mouse-up
|
|
* at approximately the same position using the left (primary) mouse button.
|
|
* This property is used by the ClickSelectingTool
|
|
* when the user clicks on a GraphObject.
|
|
* The function is called in addition to the DiagramEvent
|
|
* that is raised with the name `"ObjectSingleClicked"`.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent
|
|
* and this GraphObject.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
*
|
|
* From the second argument, *obj*, you can get to the Node or Link via the #part property.
|
|
* From there you can access the bound data via the Panel#data property.
|
|
* So from an event handler you can get the bound data by `obj.part.data`.
|
|
*
|
|
* By default this property is null.
|
|
*
|
|
* Objects in Layers that are Layer#isTemporary do not receive click events.
|
|
* If you do want such objects to respond to clicks, set #isActionable to true.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call Diagram#startTransaction and
|
|
* Diagram#commitTransaction.
|
|
* <p class="boxrun">
|
|
* An example of a click event handler is shown in the
|
|
* <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
|
|
* @see #doubleClick
|
|
* @see #contextClick
|
|
* @see Diagram#click
|
|
*/
|
|
click: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user double-primary-clicks on this object.
|
|
* This typically involves a mouse-down/up/down/up in rapid succession
|
|
* at approximately the same position using the left (primary) mouse button.
|
|
* This property is used by the ClickSelectingTool
|
|
* when the user clicks on a GraphObject.
|
|
* The function is called in addition to the DiagramEvent
|
|
* that is raised with the name `"ObjectDoubleClicked"`.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent
|
|
* and this GraphObject.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
*
|
|
* From the second argument, *obj*, you can get to the Node or Link via the #part property.
|
|
* From there you can access the bound data via the Panel#data property.
|
|
* So from an event handler you can get the bound data by `obj.part.data`.
|
|
*
|
|
* By default this property is null.
|
|
*
|
|
* Objects in Layers that are Layer#isTemporary do not receive click events.
|
|
* If you do want such objects to respond to clicks, set #isActionable to true.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call Diagram#startTransaction and
|
|
* Diagram#commitTransaction.
|
|
*
|
|
* The <a href="../../samples/classHierarchy.html">Class Hierarchy sample</a>
|
|
* demonstrates the definition of a double-click event handler that opens up
|
|
* a web page with the documentation for that class:
|
|
* ```js
|
|
* diagram.nodeTemplate =
|
|
* $(go.Node, . . .,
|
|
* {
|
|
* doubleClick: // here the second argument is this object, which is this Node
|
|
* function(e, node) { window.open("../api/symbols/" + node.data.key + ".html"); }
|
|
* },
|
|
* . . .
|
|
* );
|
|
* ```
|
|
* @see #click
|
|
* @see #contextClick
|
|
* @see Diagram#doubleClick
|
|
*/
|
|
doubleClick: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user single-secondary-clicks on this object.
|
|
* This typically involves a mouse-down followed by a prompt mouse-up
|
|
* at approximately the same position using the right (secondary) mouse button.
|
|
* This property is used by the ClickSelectingTool
|
|
* when the user clicks on a GraphObject.
|
|
* The function is called in addition to the DiagramEvent
|
|
* that is raised with the name `"ObjectContextClicked"`.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent
|
|
* and this GraphObject.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
*
|
|
* From the second argument, *obj*, you can get to the Node or Link via the #part property.
|
|
* From there you can access the bound data via the Panel#data property.
|
|
* So from an event handler you can get the bound data by `obj.part.data`.
|
|
*
|
|
* By default this property is null.
|
|
*
|
|
* Objects in Layers that are Layer#isTemporary do not receive click events.
|
|
* If you do want such objects to respond to clicks, set #isActionable to true.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call Diagram#startTransaction and
|
|
* Diagram#commitTransaction.
|
|
* @see #click
|
|
* @see #doubleClick
|
|
* @see Diagram#contextClick
|
|
*/
|
|
contextClick: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user moves the mouse
|
|
* into this object without holding down any buttons.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent,
|
|
* this GraphObject that the mouse is now in,
|
|
* and any previous GraphObject that the mouse was in.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
* By default this property is null.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function.
|
|
* After calling this function the diagram will be updated immediately.
|
|
*
|
|
* For example, consider the situation where one wants to display buttons that the user can click
|
|
* whenever the user passes the mouse over a node, and the buttons automatically disappear when the
|
|
* mouse leaves the node. This can be implemented by showing an Adornment holding the buttons.
|
|
* ```js
|
|
* var nodeContextMenu =
|
|
* $(go.Adornment, "Spot",
|
|
* { background: "transparent" }, // to help detect when the mouse leaves the area
|
|
* $(go.Placeholder),
|
|
* $(go.Panel, "Vertical",
|
|
* { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
|
|
* $("Button",
|
|
* $(go.TextBlock, "Command 1"),
|
|
* {
|
|
* click: function(e, obj) {
|
|
* var node = obj.part.adornedPart;
|
|
* alert("Command 1 on " + node.data.text);
|
|
* node.removeAdornment("ContextMenuOver");
|
|
* }
|
|
* }),
|
|
* $("Button",
|
|
* $(go.TextBlock, "Command 2"),
|
|
* {
|
|
* click: function(e, obj) {
|
|
* var node = obj.part.adornedPart;
|
|
* alert("Command 2 on " + node.data.text);
|
|
* node.removeAdornment("ContextMenuOver");
|
|
* }
|
|
* })
|
|
* ));
|
|
* ```
|
|
* Then in the definition of the Node we can implement a mouseEnter event handler:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node,
|
|
* . . .
|
|
* {
|
|
* mouseEnter: function(e, node) {
|
|
* nodeContextMenu.adornedObject = node;
|
|
* nodeContextMenu.mouseLeave = function(ev, cm) {
|
|
* node.removeAdornment("ContextMenuOver");
|
|
* }
|
|
* node.addAdornment("ContextMenuOver", nodeContextMenu);
|
|
* }
|
|
* });
|
|
* ```
|
|
* Note how it automatically defines a #mouseLeave event handler too.
|
|
* The context menu Adornment is removed either when the mouse leaves the area of the Adornment
|
|
* or when the user executes a button click event handler.
|
|
* @see #mouseLeave
|
|
* @see #mouseOver
|
|
* @see #mouseHover
|
|
* @see #mouseDragEnter
|
|
*/
|
|
mouseEnter: ((e: InputEvent, thisObj: GraphObject, prevObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user moves the mouse
|
|
* out of this object without holding down any buttons.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent,
|
|
* this GraphObject that the mouse has left,
|
|
* and any next GraphObject that the mouse is now in.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
* By default this property is null.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function.
|
|
* After calling this function the diagram will be updated immediately.
|
|
*
|
|
* For example, the <a href="../../samples/flowchart.html">Flow Chart sample</a>
|
|
* automatically shows and hides the ports as the mouse passes over a node.
|
|
* The node template includes the following settings:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node,
|
|
* . . .
|
|
* {
|
|
* . . .
|
|
* // handle mouse enter/leave events to show/hide the ports
|
|
* mouseEnter: function(e, obj) { showPorts(obj.part, true); },
|
|
* mouseLeave: function(e, obj) { showPorts(obj.part, false); }
|
|
* . . .
|
|
* });
|
|
* ```
|
|
* where the `showPorts` function is defined to set the #visible
|
|
* property of each of the port elements of the node.
|
|
* @see #mouseEnter
|
|
* @see #mouseOver
|
|
* @see #mouseHover
|
|
* @see #mouseDragLeave
|
|
*/
|
|
mouseLeave: ((e: InputEvent, thisObj: GraphObject, nextObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user moves the mouse
|
|
* over this object without holding down any buttons.
|
|
* This property is used by the ToolManager.
|
|
* This property is infrequently used -- it is more common to implement #mouseEnter
|
|
* and #mouseLeave functions.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent
|
|
* and this GraphObject.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
* By default this property is null.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function.
|
|
* After calling this function the diagram will be updated immediately.
|
|
* @see #mouseHover
|
|
* @see #mouseEnter
|
|
* @see #mouseLeave
|
|
*/
|
|
mouseOver: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user holds the mouse still for a while
|
|
* over this object without holding down any buttons.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call Diagram#startTransaction and
|
|
* Diagram#commitTransaction.
|
|
*
|
|
* You can control how long the user must wait with a motionless mouse before
|
|
* a "mouse hover" event occurs, by setting ToolManager#hoverDelay.
|
|
* For example:
|
|
* ```js
|
|
* myDiagram =
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* { "toolManager.hoverDelay": 500 }); // 500 milliseconds
|
|
* ```
|
|
* or:
|
|
* ```js
|
|
* myDiagram.toolManager.hoverDelay = 500; // 500 milliseconds
|
|
* ```
|
|
* @see #mouseOver
|
|
* @see #mouseEnter
|
|
* @see #mouseLeave
|
|
*/
|
|
mouseHover: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user holds the mouse still for a while
|
|
* over this object while holding down a button.
|
|
* This property is used by the ToolManager.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent.
|
|
* By default this property is null.
|
|
*
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call Diagram#startTransaction and
|
|
* Diagram#commitTransaction.
|
|
*
|
|
* You can control how long the user must wait during a drag with a motionless mouse before
|
|
* a "mouse hold" event occurs, by setting ToolManager#holdDelay.
|
|
* For example:
|
|
* ```js
|
|
* myDiagram =
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* { "toolManager.holdDelay": 500 }); // 500 milliseconds
|
|
* ```
|
|
* or:
|
|
* ```js
|
|
* myDiagram.toolManager.holdDelay = 500; // 500 milliseconds
|
|
* ```
|
|
* @see #mouseDragEnter
|
|
* @see #mouseDragLeave
|
|
* @see #mouseHover
|
|
*/
|
|
mouseHold: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user moves the mouse
|
|
* into this stationary object during a DraggingTool drag;
|
|
* this allows you to provide feedback during a drag based on where it might drop.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent,
|
|
* this GraphObject, and any previous GraphObject.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
* By default this property is null.
|
|
*
|
|
* Note that for a drag-and-drop that originates in a different diagram, the target diagram's
|
|
* selection collection will not be the parts that are being dragged.
|
|
* Instead the temporary parts being dragged can be found as the source diagram's DraggingTool#copiedParts.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function,
|
|
* because the DraggingTool will be conducting one already.
|
|
* After calling this function the diagram will be updated immediately.
|
|
*
|
|
* For an example of a mouseDragEnter event handler, see the node template in the
|
|
* <a href="../../samples/orgChartEditor.html">Org Chart Editor sample</a>.
|
|
* @see #mouseDragLeave
|
|
* @see #mouseHold
|
|
* @see #mouseDrop
|
|
* @see #mouseEnter
|
|
* @see Group#handlesDragDropForMembers
|
|
*/
|
|
mouseDragEnter: ((e: InputEvent, thisObj: GraphObject, prevObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the user moves the mouse
|
|
* out of this stationary object during a DraggingTool drag;
|
|
* this allows you to provide feedback during a drag based on where it might drop.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent,
|
|
* this GraphObject, and any new GraphObject that the mouse is in.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
* By default this property is null.
|
|
*
|
|
* Note that for a drag-and-drop that originates in a different diagram, the target diagram's
|
|
* selection collection will not be the parts that are being dragged.
|
|
* Instead the temporary parts being dragged can be found as the source diagram's DraggingTool#copiedParts.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function,
|
|
* because the DraggingTool will be conducting one already.
|
|
* After calling this function the diagram will be updated immediately.
|
|
*
|
|
* For an example of a mouseDragLeave event handler, see the node template in the
|
|
* <a href="../../samples/orgChartEditor.html">Org Chart Editor sample</a>.
|
|
* @see #mouseDragEnter
|
|
* @see #mouseHold
|
|
* @see #mouseDrop
|
|
* @see #mouseLeave
|
|
* @see Group#handlesDragDropForMembers
|
|
*/
|
|
mouseDragLeave: ((e: InputEvent, thisObj: GraphObject, nextObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when a user drops the selection on this object
|
|
* at the end of a DraggingTool drag;
|
|
* this allows you to customize the behavior when a drop occurs on an object.
|
|
*
|
|
* If this property value is a function, it is called with an InputEvent,
|
|
* this GraphObject.
|
|
* The InputEvent#targetObject provides the GraphObject that was found
|
|
* at the mouse point before looking up the visual tree of GraphObject#panels
|
|
* to get to this object.
|
|
* The function is called within the transaction performed by the DraggingTool,
|
|
* so you do not need to conduct one.
|
|
* By default this property is null.
|
|
*
|
|
* For an example of a mouseDrop event handler, see the node template in the
|
|
* <a href="../../samples/orgChartEditor.html">Org Chart Editor sample</a>.
|
|
* @see #mouseDragEnter
|
|
* @see #mouseDragLeave
|
|
* @see #mouseHold
|
|
* @see Group#handlesDragDropForMembers
|
|
*/
|
|
mouseDrop: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute on a mouse-down event when this GraphObject's #isActionable
|
|
* is set to true.
|
|
* This property is infrequently set.
|
|
* By default this property is null.
|
|
*
|
|
* This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
* in conjunction with ActionTool, pre-empting the normal tool mechanisms.
|
|
*
|
|
* The ActionTool does not conduct any transaction, so if this property has a value,
|
|
* the function will not be called within a transaction.
|
|
* @see #actionMove
|
|
* @see #actionUp
|
|
* @see #actionCancel
|
|
*/
|
|
actionDown: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute on a mouse-move event when this GraphObject's #isActionable
|
|
* is set to true.
|
|
* This property is infrequently set.
|
|
* By default this property is null.
|
|
*
|
|
* This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
* in conjunction with ActionTool, pre-empting the normal tool mechanisms.
|
|
*
|
|
* The ActionTool does not conduct any transaction, so if this property has a value,
|
|
* the function will not be called within a transaction.
|
|
* @see #actionDown
|
|
* @see #actionUp
|
|
* @see #actionCancel
|
|
*/
|
|
actionMove: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute on a mouse-up event when this GraphObject's #isActionable
|
|
* is set to true.
|
|
* This property is infrequently set.
|
|
* By default this property is null.
|
|
*
|
|
* This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
* in conjunction with ActionTool, pre-empting the normal tool mechanisms.
|
|
*
|
|
* The ActionTool does not conduct any transaction, so if this property has a value,
|
|
* the function will not be called within a transaction.
|
|
* If you do provide a function that makes changes to the diagram or to its model,
|
|
* you should do so within a transaction -- call Diagram#startTransaction and
|
|
* Diagram#commitTransaction.
|
|
* @see #actionDown
|
|
* @see #actionMove
|
|
* @see #actionCancel
|
|
*/
|
|
actionUp: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function to execute when the ActionTool is cancelled and this GraphObject's #isActionable
|
|
* is set to true.
|
|
* This property is infrequently set.
|
|
* By default this property is null.
|
|
*
|
|
* This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
* in conjunction with ActionTool, pre-empting the normal tool mechanisms.
|
|
*
|
|
* The ActionTool does not conduct any transaction, so if this property has a value,
|
|
* the function will not be called within a transaction.
|
|
* @see #actionDown
|
|
* @see #actionMove
|
|
* @see #actionUp
|
|
*/
|
|
actionCancel: ((e: InputEvent, thisObj: GraphObject) => void) | null;
|
|
/**
|
|
* This Adornment or HTMLInfo is shown when the mouse hovers over this object.
|
|
* The default value is null, which means no tooltip is shown.
|
|
*
|
|
* A typical tooltip is defined in the following manner, as taken from
|
|
* the <a href="../../samples/kittenMonitor.html">Kitten Monitor sample</a>:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node,
|
|
* . . .
|
|
* { // this tooltip shows the name and picture of the kitten
|
|
* toolTip:
|
|
* $("ToolTip",
|
|
* $(go.Panel, "Vertical",
|
|
* $(go.Picture,
|
|
* new go.Binding("source", "src", function(s) { return "images/" + s + ".png"; })),
|
|
* $(go.TextBlock, { margin: 3 },
|
|
* new go.Binding("text", "key"))))
|
|
* });
|
|
* ```
|
|
* Note that this Adornment depends on having the same data binding as the adorned Part
|
|
* (i.e. the same value for Panel#data).
|
|
*
|
|
* Tooltips are not copied by #copy, so that tooltips may be shared by all instances of a template.
|
|
*
|
|
* Tooltips are shown after a timed delay given by the ToolManager#hoverDelay.
|
|
* You can change the delay time by:
|
|
* ```js
|
|
* myDiagram =
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* { "toolManager.hoverDelay": 500 }); // 500 milliseconds
|
|
* ```
|
|
* or:
|
|
* ```js
|
|
* myDiagram.toolManager.hoverDelay = 500; // 500 milliseconds
|
|
* ```
|
|
*
|
|
* Tooltips are normally positioned by ToolManager#positionToolTip.
|
|
* However, if there is a Placeholder in the tooltip, the tooltip (i.e. an Adornment)
|
|
* will be positioned so that the Placeholder is at the same position as this adorned GraphObject.
|
|
*
|
|
* Replacing this value will not modify or remove any existing tooltip that is being shown for this object.
|
|
*
|
|
* Read more about tooltips at <a href="../../intro/toolTips.html">ToolTips</a>.
|
|
*/
|
|
toolTip: Adornment | HTMLInfo | null;
|
|
/**
|
|
* This Adornment or HTMLInfo is shown upon a context click on this object.
|
|
* The default value is null, which means no context menu is shown.
|
|
*
|
|
* Changing this value will not modify or remove any existing menu that is being shown for this object.
|
|
*
|
|
* Context menus may also depend on having the same data binding as the adorned Part
|
|
* (i.e. the same value for Panel#data).
|
|
*
|
|
* Context menus are not copied by #copy, so that context menus may be shared by all instances of a template.
|
|
*
|
|
* A typical context menu is implemented as an Adornment with several buttons in it.
|
|
* For example, this context menu is defined in the
|
|
* <a href="../../samples/dynamicPorts.html">Dynamic Port sample</a>:
|
|
* ```js
|
|
* var nodeMenu = // context menu for each Node
|
|
* $("ContextMenu",
|
|
* $("ContextMenuButton",
|
|
* $(go.TextBlock, "Add top port"),
|
|
* { click: function(e, obj) { addPort("top"); } }),
|
|
* $("ContextMenuButton",
|
|
* $(go.TextBlock, "Add left port"),
|
|
* { click: function(e, obj) { addPort("left"); } }),
|
|
* $("ContextMenuButton",
|
|
* $(go.TextBlock, "Add right port"),
|
|
* { click: function(e, obj) { addPort("right"); } }),
|
|
* $("ContextMenuButton",
|
|
* $(go.TextBlock, "Add bottom port"),
|
|
* { click: function(e, obj) { addPort("bottom"); } }));
|
|
* ```
|
|
* and is used in the node template:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, "Table",
|
|
* { . . .
|
|
* contextMenu: nodeMenu
|
|
* },
|
|
* . . .);
|
|
* ```
|
|
*
|
|
* Context menus are normally positioned by ContextMenuTool#positionContextMenu.
|
|
* However, if there is a Placeholder in the context menu, the context menu (i.e. an Adornment)
|
|
* will be positioned so that the Placeholder is at the same position as this adorned GraphObject.
|
|
*
|
|
* The <a href="../../samples/basic.html">Basic sample</a> also shows how
|
|
* to make context menu items invisible when the command is disabled.
|
|
*
|
|
* Replacing this value will not modify or remove any existing context menu that is being shown for this object.
|
|
*
|
|
* Read more about context menus at <a href="../../intro/contextMenus.html">Context Menus</a>.
|
|
*/
|
|
contextMenu: Adornment | HTMLInfo | null;
|
|
/**
|
|
* Add a data-binding of a property on this GraphObject to a property on a data object.
|
|
* It is unusual to call this method -- GraphObject.make will call this method for you
|
|
* when you pass it an instance of Binding.
|
|
*
|
|
* Do not add, modify, or remove any Bindings after this object has been copied.
|
|
*
|
|
* Read more about Bindings at <a href="../../intro/dataBinding.html">the Introduction page about Data Bindings</a>.
|
|
* @param {Binding} binding
|
|
*/
|
|
bind(binding: Binding): void;
|
|
/**
|
|
* Undocumented
|
|
* @return {Panel}
|
|
*/
|
|
findTemplateBinder(): Panel | null;
|
|
/**
|
|
* This method sets a collection of properties according to the property/value pairs that have been set on the given Object,
|
|
* in the same manner as GraphObject.make does when constructing a GraphObject with an argument that is a simple JavaScript Object.
|
|
*
|
|
* If this is a Panel, you can set properties on named elements within the panel by using a *name.property* syntax for the property name.
|
|
* For example, if a Node has a Picture that is named "ICON" (because its #name property has been set to "ICON")
|
|
* and a TextBlock whose name is "TB", one could set properties on the Node and on each of those named elements by:
|
|
* ```js
|
|
* aNode.setProperties({
|
|
* background: "red",
|
|
* "ICON.source": "https://www.example.com/images/alert.jpg",
|
|
* "TB.font": "bold 12pt sans-serif"
|
|
* });
|
|
* ```
|
|
*
|
|
* At the current time only a single dot is permitted in the property "name".
|
|
* Note that the use of all-upper-case object names is simply a convention.
|
|
*
|
|
* Calling this method is much less efficient than setting properties directly.
|
|
* @param {Object} props a plain JavaScript object with various property values to be set on this GraphObject.
|
|
* @since 1.5
|
|
*/
|
|
setProperties(props: ObjectData): void;
|
|
/**
|
|
* This static function builds an object given its class and additional arguments
|
|
* providing initial properties or GraphObjects that become Panel elements.
|
|
*
|
|
* The first argument must be the class type or the name of a class or the name of a predefined kind of Panel.
|
|
* This function will construct a new instance of that type and use the rest of the arguments to initialize the object.
|
|
* The first argument cannot be a regular Object (such as a GraphObject) that you are trying to initialize;
|
|
* for that you can call #setProperties or Diagram#setProperties, although that would
|
|
* be less efficient than setting properties directly.
|
|
*
|
|
* If an initializer argument is an enumerated value, this tries to set the property that seems most appropriate.
|
|
*
|
|
* If an initializer argument is a string, this sets a particular property depending on the type of object being built.
|
|
* - If the object is a TextBlock, it sets TextBlock#text.
|
|
* - If the object is a Shape, it sets Shape#figure.
|
|
* - If the object is a Picture, it sets Picture#source.
|
|
* - If the object is a Panel (including Part, Node, or Group), it sets Panel#type.
|
|
*
|
|
* If an initializer argument is a particular kind of object, this can add that object to the object being built.
|
|
* - GraphObjects and RowColumnDefinitions can only be added as elements of Panels.
|
|
* - Bindings can only be applied to GraphObjects and RowColumnDefinitions.
|
|
* - PathFigures can only be added to Geometry objects.
|
|
* - PathSegments can only be added to PathFigure objects.
|
|
* - Regular JavaScript Arrays provide a sequence of initializer arguments.
|
|
* - Regular JavaScript objects provide property/value pairs that are set on the object being built.
|
|
*
|
|
* When the initializer argument is a plain JavaScript Object, there are several ways that that object's properties are applied.
|
|
* If the property name is a string with a period inside it, this has a special meaning if the object is a Panel or a Diagram.
|
|
* At the current time only a single period separator is valid syntax for a property string, and it is valid only on Panels and Diagrams.
|
|
*
|
|
* For Panels, the substring before the period is used as the name passed to Panel#findObject
|
|
* to get the actual object on which to set the property, which is the substring after the period.
|
|
* This is normally useful only on the predefined Panels:
|
|
* - a **"Button"** has a Shape named "ButtonBorder" surrounding the content of the Panel.
|
|
* - a **"TreeExpanderButton"** has a "ButtonBorder" Shape and a "ButtonIcon" Shape that is the plus-or-minus sign.
|
|
* - a **"SubGraphExpanderButton"** has a "ButtonBorder" Shape and a "ButtonIcon" Shape that is the plus-or-minus sign.
|
|
* - a **"ContextMenuButton"** has a Shape named "ButtonBorder" surrounding the content of the Panel.
|
|
*
|
|
* But you can define your own names that GraphObject.make can build by calling the static function GraphObject.defineBuilder.
|
|
*
|
|
* For Diagrams, the substring before the period is used as the name of a property on the Diagram itself
|
|
* to get the actual object on which to set the property.
|
|
* As a special case, if such a property value does not exist on the Diagram, it looks on the Diagram#toolManager.
|
|
* See some examples below.
|
|
*
|
|
* Also for Diagrams, and only for Diagrams, if the property name is the name of a DiagramEvent,
|
|
* the property value must be a DiagramEvent listener function, and Diagram#addDiagramListener is called
|
|
* using that DiagramEvent name and that function.
|
|
* Note that all DiagramEvent names are capitalized and do not contain any periods,
|
|
* so there cannot be any name conflicts with any properties on Diagram or ToolManager.
|
|
* Although you can register multiple listeners for the same DiagramEvent names, due to JavaScript limitations
|
|
* those need to be declared using separate JavaScript objects, because JavaScript does not permit duplicate property names
|
|
* in an Object literal.
|
|
*
|
|
* Furthermore for Diagrams, if the property name is `"Changed"` or `"ModelChanged"`,
|
|
* the property value must be a ChangedEvent listener function, which is called with a ChangedEvent argument.
|
|
* When the property name is `"Changed"`, it calls Diagram#addChangedListener,
|
|
* notifying about changes to the Diagram or its Layers or GraphObjects.
|
|
* When the property name is `"ModelChanged"`, it calls Model#addChangedListener on the Diagram#model,
|
|
* resulting in notifications about changes to the Model or its data.
|
|
* This is handy because the Diagram#model property setter will automatically call
|
|
* Model#removeChangedListener on the old model, thereby avoiding any overhead if there are any
|
|
* more changes to the old model and also avoiding a reference to the listener which might cause garbage collection retention.
|
|
* It also will call Model#addChangedListener on the new model, helping implement the same behavior with the new model.
|
|
*
|
|
* If the property name is a number and if the object being constructed is a Brush,
|
|
* the number and value are added to the Brush by calling Brush#addColorStop.
|
|
*
|
|
* Otherwise the property name is used as a regular property name on the object being built.
|
|
* This tries to do some property name and value checking:
|
|
* when a property is not defined on the object being built, it will signal an error.
|
|
* Many typos can be found this way that would be ignored by JavaScript code.
|
|
*
|
|
* If the property name begins with an underscore, this will not complain about the property being undefined.
|
|
* Not only is that underscore property set on the object being built, but calls to #copy
|
|
* will also copy the values of such named properties to the new objects.
|
|
*
|
|
* In the samples and in the intro pages this function is called using the alias `$`.
|
|
* You can use a different short name if you would like to preserve the use of `$` for another JavaScript library.
|
|
* ```js
|
|
* var $ = go.GraphObject.make;
|
|
*
|
|
* var diagram =
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* {
|
|
* // don't initialize some properties until after a new model has been loaded
|
|
* "InitialLayoutCompleted": loadDiagramProperties,
|
|
* allowZoom: false, // don't allow the user to change the diagram's scale
|
|
* "grid.visible": true, // display a background grid for the whole diagram
|
|
* "grid.gridCellSize": new go.Size(20, 20),
|
|
* // allow double-click in background to create a new node
|
|
* "clickCreatingTool.archetypeNodeData": { text: "Node" },
|
|
* // allow Ctrl-G to call the groupSelection command
|
|
* "commandHandler.archetypeGroupData":
|
|
* { text: "Group", isGroup: true, color: "blue" },
|
|
* "toolManager.hoverDelay": 100, // how quickly tooltips are shown
|
|
* // mouse wheel zooms instead of scrolls
|
|
* "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
|
|
* "commandHandler.copiesTree": true, // for the copy command
|
|
* "commandHandler.deletesTree": true, // for the delete command
|
|
* "draggingTool.dragsTree": true, // dragging for both move and copy
|
|
* "draggingTool.isGridSnapEnabled": true,
|
|
* layout: $(go.TreeLayout,
|
|
* { angle: 90, sorting: go.TreeLayout.SortingAscending })
|
|
* });
|
|
*
|
|
* diagram.nodeTemplate =
|
|
* $(go.Node, "Auto", // or go.Panel.Auto
|
|
* new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
|
|
* $(go.Shape, "RoundedRectangle",
|
|
* {
|
|
* fill: $(go.Brush, "Linear", { 0: "#FEC901", 1: "#FEA200" }),
|
|
* stroke: "gray",
|
|
* strokeWidth: 2,
|
|
* strokeDashArray: [3, 3]
|
|
* }),
|
|
* $(go.TextBlock,
|
|
* { margin: 5, font: "bold 12pt sans-serif" },
|
|
* new go.Binding("text", "key"))
|
|
* );
|
|
* ```
|
|
* <p class="boxread">
|
|
* See <a href="../../intro/buildingObjects.html">the Introduction page on building objects</a>
|
|
* for usage information and examples of GraphObject.make.
|
|
* @param {Function|string} type a class function or the name of a class in the `go` namespace,
|
|
* or one of several predefined kinds of Panels: `"Button"`, `"TreeExpanderButton"`,
|
|
* `"SubGraphExpanderButton"`, or `"ContextMenuButton"`.
|
|
* @param {...*} initializers zero or more values that initialize the new object,
|
|
* typically an Object with properties whose values are set on the new object,
|
|
* or a JavaScript Array with additional initializer arguments,
|
|
* or a GraphObject that is added to a Panel,
|
|
* or a Binding for one of the new object's properties,
|
|
* or a constant value as the initial value of a single property of the new object that
|
|
* is recognized to take that value,
|
|
* or a string that is used as the value of a commonly set property.
|
|
* @return {Object}
|
|
*/
|
|
static make<T extends Adornment>(// for specific named builders
|
|
cls: ('ToolTip' | 'ContextMenu'), ...initializers: Array<string | (Partial<GraphObject> & {
|
|
[p: string]: any;
|
|
}) | Binding | AnimationTrigger | EnumValue | RowColumnDefinition | PanelLayout | Array<string | (Partial<GraphObject> & {
|
|
[p: string]: any;
|
|
}) | Binding | AnimationTrigger | EnumValue | RowColumnDefinition | PanelLayout>>): T;
|
|
static make<T extends Panel>(// for specific named Panel builders
|
|
cls: ('Button' | 'TreeExpanderButton' | 'SubGraphExpanderButton' | 'ContextMenuButton' | 'PanelExpanderButton' | 'CheckBoxButton' | 'CheckBox'), ...initializers: Array<string | (Partial<GraphObject> & {
|
|
[p: string]: any;
|
|
}) | Binding | AnimationTrigger | EnumValue | RowColumnDefinition | PanelLayout | Array<string | (Partial<GraphObject> & {
|
|
[p: string]: any;
|
|
}) | Binding | AnimationTrigger | EnumValue | RowColumnDefinition | PanelLayout>>): T;
|
|
static make<T extends GraphObject>(cls: string, // for named Panel builders
|
|
...initializers: Array<string | (Partial<GraphObject> & {
|
|
[p: string]: any;
|
|
}) | Binding | AnimationTrigger | EnumValue | RowColumnDefinition | PanelLayout | Array<string | (Partial<GraphObject> & {
|
|
[p: string]: any;
|
|
}) | Binding | AnimationTrigger | EnumValue | RowColumnDefinition | PanelLayout>>): T;
|
|
static make<CT extends ConstructorType<CT>>(cls: CT, ...initializers: Array<string | (Partial<InstanceType<CT>> & {
|
|
[p: string]: any;
|
|
} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & {
|
|
Changed?: ChangedEventHandler;
|
|
ModelChanged?: ChangedEventHandler;
|
|
} : {})) | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | EnumValue | HTMLDivElement | Array<string | (Partial<InstanceType<CT>> & {
|
|
[p: string]: any;
|
|
} & (InstanceType<CT> extends Diagram ? DiagramEventsInterface & {
|
|
Changed?: ChangedEventHandler;
|
|
ModelChanged?: ChangedEventHandler;
|
|
} : {})) | MakeAllow<CT, GraphObject, Binding> | MakeAllow<CT, GraphObject, AnimationTrigger> | MakeAllow<CT, Panel, GraphObject> | MakeAllow<CT, Panel, RowColumnDefinition> | MakeAllow<CT, Panel, PanelLayout> | MakeAllow<CT, RowColumnDefinition, Binding> | MakeAllow<CT, Geometry, PathFigure> | MakeAllow<CT, PathFigure, PathSegment> | EnumValue>>): InstanceType<CT>;
|
|
/**
|
|
* This static function defines a named function that GraphObject.make can use to build objects.
|
|
* Once this is called one can use the name as the first argument for GraphObject.make.
|
|
* Names are case sensitive.
|
|
*
|
|
* The second argument must be a function that returns a newly created object, typically a GraphObject.
|
|
* It is commonplace for that object to be a Panel holding a newly created visual tree of GraphObjects.
|
|
* The function receives as its only argument an Array that is holds all of the arguments that are being
|
|
* passed to GraphObject.make, which it may modify in order to change the arguments that GraphObject.make receives.
|
|
*
|
|
* Predefined builder names include: `"Button"`, `"TreeExpanderButton"`, `"SubGraphExpanderButton"`,
|
|
* `"PanelExpanderButton"`, and `"ContextMenuButton"`.
|
|
* The implementation of these builders is provided by <a href="../../extensions/Buttons.js">Buttons.js</a>
|
|
* in the Extensions directory.
|
|
* @param {string} name a capitalized name; must not be `""` or `"None"`
|
|
* @param {function(Array.<*>):Object} func that takes an Array of `GraphObject.make` arguments and returns a new object
|
|
* @since 1.5
|
|
*/
|
|
static defineBuilder(name: string, func: ((a: Array<any>) => ObjectData)): void;
|
|
/**
|
|
* This static function returns the first argument from the arguments array passed
|
|
* to a GraphObject.defineBuilder function by GraphObject.make.
|
|
* By default this requires the first argument to be a string,
|
|
* but you can provide a predicate to determine whether the argument is suitable.
|
|
* @param {Array.<*>} args the arguments Array passed to the builder function;
|
|
* this may be modified if an acceptable argument is found and returned
|
|
* @param {*=} defval the default value to return if the argument is optional and not present as the first argument;
|
|
* otherwise throw an error when the argument is not there
|
|
* @param {function(*):boolean|null=} pred a predicate to determine the acceptability of the argument;
|
|
* the default predicate checks whether the argument is a string
|
|
* @return {*}
|
|
* @since 1.5
|
|
*/
|
|
static takeBuilderArgument(args: Array<any>, defval?: any, pred?: ((a: any) => boolean) | null): any;
|
|
}
|
|
/**
|
|
* @unrestricted
|
|
*/
|
|
export class SGradient {
|
|
/**
|
|
* @param {string} aType
|
|
*/
|
|
constructor(aType: string);
|
|
}
|
|
/**
|
|
* The BrushLike type is the same as `Brush | string | null`.
|
|
* A string in place of a Brush object is treated as a Solid Brush of that color.
|
|
* @category Type
|
|
*/
|
|
export type BrushLike = Brush | string | null;
|
|
/**
|
|
* A Brush holds color information and describes how to draw the inside
|
|
* of a Shape or the stroke of a shape or a TextBlock or the
|
|
* background of any GraphObject.
|
|
*
|
|
* A Brush must not be modified once it has been assigned to a GraphObject,
|
|
* such as the Shape#fill or TextBlock#stroke
|
|
* or GraphObject#background.
|
|
* However, a Brush may be shared by multiple GraphObjects.
|
|
* @unrestricted
|
|
* @category Geometry
|
|
*/
|
|
export class Brush {
|
|
/**
|
|
* Construct a Brush class that holds the given color information.
|
|
* @param {EnumValue|string=} type Optional, one of the values Brush.Solid, Brush.Linear, Brush.Radial, Brush.Pattern,
|
|
* or a well-formed CSS string describing a solid color brush. No parameter
|
|
* defaults to a Brush.Solid with a color description of 'black'.
|
|
*/
|
|
constructor(type?: EnumValue | string);
|
|
/**
|
|
* Create a copy of this Brush with the same values.
|
|
* @return {Brush}
|
|
*/
|
|
copy(): Brush;
|
|
/**
|
|
* Specify a particular color at a particular fraction of the distance.
|
|
* If the #type is Brush.Solid, change the type to Brush.Linear.
|
|
* You should have a color stop at 0 and a color stop at 1.
|
|
* You should not have duplicate color stop values at the same fractional distance.
|
|
* @param {number} loc A number between 0 and 1 (inclusive).
|
|
* @param {string} color A valid CSS color string.
|
|
* @return {Brush} this Brush
|
|
*/
|
|
addColorStop(loc: number, color: string): Brush;
|
|
/**
|
|
* Gets or sets the type of brush.
|
|
* The default value is Brush.Solid.
|
|
* The value must be one of: Brush.Solid, Brush.Linear, Brush.Radial, Brush.Pattern.
|
|
* If the new value is a linear or radial brush type,
|
|
* and if the #start or #end spots are not specific spots,
|
|
* they are changed to be specific spots, depending on the type of brush.
|
|
*/
|
|
type: EnumValue;
|
|
/**
|
|
* Gets or sets the color of a solid Brush.
|
|
* The default value is 'black'.
|
|
* The value must be a valid CSS color string.
|
|
*/
|
|
color: string;
|
|
/**
|
|
* Gets or sets the starting location for a linear or radial gradient.
|
|
* A Spot value specifies a relative point in the object's GraphObject#naturalBounds.
|
|
* The default value is Spot.TopCenter for linear gradients and Spot.Center for radial gradients.
|
|
*/
|
|
start: Spot;
|
|
/**
|
|
* Gets or sets the ending location for a linear or radial gradient.
|
|
* A Spot value specifies a relative point in the object's GraphObject#naturalBounds.
|
|
* The default value is Spot.BottomCenter for linear gradients and Spot.Center for radial gradients.
|
|
*/
|
|
end: Spot;
|
|
/**
|
|
* Gets or sets the radius of a radial brush at the start location.
|
|
* The default value is 0.
|
|
*/
|
|
startRadius: number;
|
|
/**
|
|
* Gets or sets the radius of a radial brush at the end location.
|
|
* The default value is NaN.
|
|
*/
|
|
endRadius: number;
|
|
/**
|
|
* Gets or sets a Map holding all of the color stops used in this gradient,
|
|
* where the key is a number, the fractional distance between 0 and 1 (inclusive),
|
|
* and where the corresponding value is a color string.
|
|
*
|
|
* Call #addColorStop in order to add color stops to this brush.
|
|
* This property value may be null if no gradient stops have been defined.
|
|
*/
|
|
colorStops: Map<number, string> | null;
|
|
/**
|
|
* Gets or sets the pattern of a brush of type Brush.Pattern.
|
|
*/
|
|
pattern: HTMLCanvasElement | HTMLImageElement | null;
|
|
/**
|
|
* This static function can be used to generate a random color.
|
|
* @param {number=} min A number between 0 and 255, defaults to 128.
|
|
* @param {number=} max A number between 0 and 255, defaults to 255.
|
|
* @return {string} A color value in # hexadecimal format.
|
|
*/
|
|
static randomColor(min?: number, max?: number): string;
|
|
/**
|
|
* This static function returns true if a given color string is well-formed for drawing.
|
|
* @param {string} color A color string to validate.
|
|
* @return {boolean}
|
|
* @since 1.7
|
|
*/
|
|
static isValidColor(color: string): boolean;
|
|
/**
|
|
* This static function takes a color and lightens it by 20% in the Lab color space.
|
|
* This is a convenience function which calls Brush.lightenBy.
|
|
* @param {string} color A valid CSS color string.
|
|
* @return {string} A CSS string for the lightened color in RGBA.
|
|
* @since 1.7
|
|
*/
|
|
static lighten(color: string): string;
|
|
/**
|
|
* Modifies all colors within this Brush, lightening them by some fraction.
|
|
* @param {number=} fraction Fraction to lighten the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).
|
|
* @param {EnumValue=} mode Color space to use for adjusting. Must be Brush.Lab or Brush.HSL, defaults to Brush.Lab.
|
|
* @return {Brush} This Brush with modified color values.
|
|
* @since 1.7
|
|
*/
|
|
lightenBy(fraction?: number, mode?: EnumValue): Brush;
|
|
/**
|
|
* This static function takes a color and lightens it.
|
|
* @param {string} color A valid CSS color string.
|
|
* @param {number=} fraction Fraction to lighten the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).
|
|
* @param {EnumValue=} mode Color space to use for adjusting. Must be Brush.Lab or Brush.HSL, defaults to Brush.Lab.
|
|
* @return {string} A CSS string for the lightened color in RGBA or HSLA.
|
|
* @since 1.7
|
|
*/
|
|
static lightenBy(color: string, fraction?: number, mode?: EnumValue): string;
|
|
/**
|
|
* This static function takes a color and darkens it by 20% in the Lab color space.
|
|
* This is a convenience function which calls Brush.darkenBy.
|
|
* @param {string} color A valid CSS color string.
|
|
* @return {string} A CSS string for the darkened color in RGBA.
|
|
* @since 1.7
|
|
*/
|
|
static darken(color: string): string;
|
|
/**
|
|
* Modifies all colors within this Brush, darkening them by some fraction.
|
|
* @param {number=} fraction Fraction to darken the colors by. Defaults to 0.2, must be between 0 and 1 (inclusive).
|
|
* @param {EnumValue=} mode Color space to use for adjusting. Must be Brush.Lab or Brush.HSL, defaults to Brush.Lab.
|
|
* @return {Brush} This Brush with modified color values.
|
|
* @since 1.7
|
|
*/
|
|
darkenBy(fraction?: number, mode?: EnumValue): Brush;
|
|
/**
|
|
* This static function takes a color and darkens it.
|
|
* @param {string} color A valid CSS color string
|
|
* @param {number=} fraction Fraction to darken the color by. Defaults to 0.2, must be between 0 and 1 (inclusive).
|
|
* @param {EnumValue=} mode Color space to use for adjusting. Must be Brush.Lab or Brush.HSL, defaults to Brush.Lab.
|
|
* @return {string} A CSS string for the darkened color in RGBA or HSLA.
|
|
* @since 1.7
|
|
*/
|
|
static darkenBy(color: string, fraction?: number, mode?: EnumValue): string;
|
|
/**
|
|
* This static function takes two colors and mixes them together, using the (optionally) specified amount of the second color.
|
|
* @param {string} color1 A valid CSS color string.
|
|
* @param {string} color2 Another valid CSS color string to mix.
|
|
* @param {number=} fraction Fraction specifying how much color2 to mix into color1. Defaults to .5, must be between 0 and 1 (inclusive).
|
|
* @return {boolean}
|
|
* @since 2.0
|
|
*/
|
|
static mix(color1: string, color2: string, fraction?: number): string;
|
|
/**
|
|
* This function determines whether this Brush is "dark."
|
|
* @return {boolean}
|
|
* @since 2.0
|
|
*/
|
|
isDark(): boolean;
|
|
/**
|
|
* This static function takes a color and determines whether it is "dark." Does not account for transparency.
|
|
*
|
|
* Example usage:
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, "Auto",
|
|
* $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
|
|
* new go.Binding("fill", "color")),
|
|
* $(go.TextBlock,
|
|
* { margin: 8 },
|
|
* new go.Binding("stroke", "color", function (c) {
|
|
* // Dark nodes use white text, light nodes use black text
|
|
* return go.Brush.isDark(c) ? "white" : "black";
|
|
* }),
|
|
* new go.Binding("text", "key")
|
|
* )
|
|
* );
|
|
* ```
|
|
* @param {Brush|string} color A valid CSS color string or a Brush.
|
|
* @return {boolean}
|
|
* @since 2.0
|
|
*/
|
|
static isDark(color: BrushLike): boolean;
|
|
/**
|
|
* For simple, solid color brushes, used as the value for Brush#type.
|
|
* @constant
|
|
*/
|
|
static Solid: EnumValue;
|
|
/**
|
|
* For linear gradient brushes, used as the value for Brush#type.
|
|
* @constant
|
|
*/
|
|
static Linear: EnumValue;
|
|
/**
|
|
* For radial gradient brushes, used as the value for Brush#type.
|
|
* @constant
|
|
*/
|
|
static Radial: EnumValue;
|
|
/**
|
|
* For pattern brushes, used as the value for Brush#type.
|
|
* @constant
|
|
*/
|
|
static Pattern: EnumValue;
|
|
/**
|
|
* For lightening and darkening, used as a color-space value.
|
|
* @constant
|
|
*/
|
|
static Lab: EnumValue;
|
|
/**
|
|
* For lightening and darkening, used as a color-space value.
|
|
* @constant
|
|
*/
|
|
static HSL: EnumValue;
|
|
}
|
|
/**
|
|
* This is the abstract base class for all Panel Layouts, which inform the possible Panel types.
|
|
* It is possible to create your own Panel type by creating a subclass of PanelLayout,
|
|
* though this is not common and not recommended for beginners.
|
|
*
|
|
* By default, GoJS has 12 panel types, each corresponding to a PanelLayout subclass:
|
|
* - `'Position', PanelLayoutPosition`
|
|
* - `'Horizontal', PanelLayoutHorizontal`
|
|
* - `'Vertical', PanelLayoutVertical`
|
|
* - `'Spot', PanelLayoutSpot`
|
|
* - `'Auto', PanelLayoutAuto`
|
|
* - `'Table', PanelLayoutTable`
|
|
* - `'Viewbox', PanelLayoutViewbox`
|
|
* - `'TableRow', PanelLayoutTableRow`
|
|
* - `'TableColumn', PanelLayoutTableColumn`
|
|
* - `'Link', PanelLayoutLink`
|
|
* - `'Grid', PanelLayoutGrid`
|
|
* - `'Graduated', PanelLayoutGraduated`
|
|
*
|
|
* These are included by default in builds of `go.js` and `go-debug.js`.
|
|
* When building from source, you can optionally exclude all of them except `Position`,
|
|
* `Vertical`, `Auto`, `Link`, and `Grid`.
|
|
* This is demonstrated in `minimalSource` and `maximalSource`, in the `/projects` folder.
|
|
*
|
|
* Adding a new Layout is done by calling the static function, Panel.definePanelLayout:
|
|
*
|
|
* ```js
|
|
* Panel.definePanelLayout('Table', new PanelLayoutTable());
|
|
* ```
|
|
*
|
|
* Each PanelLayout defines a #measure and #arrange routine.
|
|
* The measure routine must call #measureElement with each element of the Panel,
|
|
* and the arrange routine must similarly call #arrangeElement with each element of the Panel.
|
|
*
|
|
* There is an example PanelLayout in the <a href="../../samples/panelLayout.html">PanelLayout sample</a>.
|
|
* @since 2.0
|
|
* @unrestricted
|
|
*/
|
|
export abstract class PanelLayout {
|
|
constructor();
|
|
/**
|
|
*/
|
|
readonly classType: Function;
|
|
/**
|
|
* Given the available size, measure the Panel and
|
|
* determine its expected drawing size. Sets the measuredBounds of the object.
|
|
*
|
|
* This must call #measureElement with each Panel element.
|
|
*
|
|
* This must also construct the union.width and union.height of the passed in union Rect argument.
|
|
* This union must reflect the measured size of the panel.
|
|
*
|
|
* @expose
|
|
* @param {Panel} panel Panel which called this layout
|
|
* @param {number} width expected width of the panel
|
|
* @param {number} height expected height of the panel
|
|
* @param {Array.<GraphObject>} elements Array of Panel elements
|
|
* @param {Rect} union rectangle to contain the expected union bounds of every element in the Panel. Useful for arrange.
|
|
* @param {number} minw minimum width of the panel
|
|
* @param {number} minh minimum height of the panel
|
|
*/
|
|
measure(panel: Panel, width: number, height: number, elements: Array<GraphObject>, union: Rect, minw: number, minh: number): void;
|
|
/**
|
|
* Given the available size, measure one element of the Panel and
|
|
* determine its expected drawing size. Sets the measuredBounds of the object.
|
|
*
|
|
* @param {GraphObject} obj Panel which called this layout
|
|
* @param {number} width expected width of the GraphObject
|
|
* @param {number} height expected height of the GraphObject
|
|
* @param {number} minw minimum width of the GraphObject
|
|
* @param {number} minh minimum height of the GraphObject
|
|
*/
|
|
protected measureElement(obj: GraphObject, width: number, height: number, minw: number, minh: number): void;
|
|
/**
|
|
* Given the panel and its list of elements, arrange each element.
|
|
*
|
|
* This must call #arrangeElement with each Panel element, which will set that element's GraphObject#actualBounds.
|
|
*
|
|
* For arranging some elements, it is useful to know the total unioned area of every element.
|
|
* This Rect can be used to right-align or center-align, etc, elements within an area.
|
|
*
|
|
* @expose
|
|
* @param {Panel} panel Panel which called this layout
|
|
* @param {Array.<GraphObject>} elements Array of Panel elements
|
|
* @param {Rect} union rectangle, if properly constructed in #measure, that contains the expected union bounds of every element in the Panel.
|
|
*/
|
|
arrange(panel: Panel, elements: Array<GraphObject>, union: Rect): void;
|
|
/**
|
|
* Arranges the GraphObject onto its parent Panel.
|
|
* The passed-in numbers typically account for GraphObject#margin and other offsets.
|
|
* This sets GraphObject#actualBounds.
|
|
*
|
|
* @param {GraphObject} obj GraphObject to be arranged.
|
|
* @param {number} fx The final x value of actualBounds that the Panel computes for the GraphObject.
|
|
* @param {number} fy The final y value of actualBounds that the Panel computes for the GraphObject.
|
|
* @param {number} fw The final width value of actualBounds that the Panel computes for the GraphObject.
|
|
* @param {number} fh The final height value of actualBounds that the Panel computes for the GraphObject.
|
|
* @param {Rect=} clipRect an optional area to constrain this actualBounds to when picking and drawing.
|
|
* By default, this is only used with Fixed/Table panels element, provided as a Rect.
|
|
*/
|
|
protected arrangeElement(obj: GraphObject, fx: number, fy: number, fw: number, fh: number, clipRect?: Rect): void;
|
|
}
|
|
/**
|
|
* A Panel is a GraphObject that holds other GraphObjects as its elements.
|
|
* A Panel is responsible for sizing and positioning its elements.
|
|
* The elements of a panel are drawn in the order in which they appear in the #elements collection.
|
|
*
|
|
* The Part class inherits from Panel; Part in turn is the base class of Node and Link.
|
|
*
|
|
* Every Panel has a #type and establishes its own coordinate system. The type of a Panel
|
|
* determines how it will size and arrange its elements:
|
|
* - Panel.Position is used to arrange elements based on their absolute positions within the Panel's local coordinate system.
|
|
* - Panel.Vertical and Panel.Horizontal are used to create linear "stacks" of elements.
|
|
* - Panel.Auto is used to size the main element to fit around other elements in the Panel.
|
|
* - Panel.Spot is used to arrange elements based on the Spot properties GraphObject#alignment
|
|
* and GraphObject#alignmentFocus, relative to a main element of the panel.
|
|
* Spot panels can align relative to other elements by using Panel#alignmentFocusName.
|
|
* - Panel.Table is used to arrange elements into rows and columns, typically employing the different
|
|
* elements' GraphObject#row, GraphObject#rowSpan, GraphObject#column,
|
|
* and GraphObject#columnSpan properties. This Panel type also makes use of RowColumnDefinition.
|
|
* - Panel.TableRow and Panel.TableColumn can only be used immediately within a Panel.Table Panel
|
|
* to organize a collection of elements as a row or as a column in a table.
|
|
* - Panel.Viewbox is used to automatically resize a single element to fit inside the panel's available area.
|
|
* - Panel.Grid is not used to house typical elements, but is used only to draw regular patterns of lines.
|
|
* The elements must be Shapes used to describe the repeating lines.
|
|
* - Panel.Link is only used by Link parts and Link Adornments.
|
|
* - Panel.Graduated is used to draw regular tick marks and text along the main Shape element.
|
|
*
|
|
* Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:
|
|
* ```js
|
|
* // Either:
|
|
* $(go.Panel, go.Panel.Horizontal, ...
|
|
* // Or:
|
|
* $(go.Panel, "Horizontal", ...
|
|
*
|
|
* // Full example:
|
|
* $(go.Panel, "Horizontal",
|
|
* { width: 60, height: 60 }, // panel properties
|
|
* // elements in the panel:
|
|
* $(go.Shape, "Rectangle", { stroke: "lime" }),
|
|
* $(go.TextBlock, "Some Text")
|
|
* ) // end of panel definition
|
|
* ```
|
|
*
|
|
* <p class="boxread">
|
|
* For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>.
|
|
*
|
|
* Panel.Vertical and Panel.Horizontal panels are frequently used to position two or more GraphObjects
|
|
* vertically above each other or horizontally next to each other. Use the GraphObject#alignment or
|
|
* GraphObject#stretch properties on the individual elements to control their position and size.
|
|
* Set #isOpposite to true if you want the elements arranged from right-to-left in Horizontal Panels
|
|
* or from bottom-to-top in Vertical Panels.
|
|
*
|
|
* Panel.Spot and Panel.Auto panels have a "main" element, signified by the Panel's first element
|
|
* with GraphObject#isPanelMain set to true. If there is no such element, it uses the first element as the "main" one.
|
|
* Use the GraphObject#alignment property to position elements with respect to the main element.
|
|
* Use the GraphObject#alignmentFocus property to further specify the position within Spot Panels.
|
|
* "Spot" and "Auto" Panels should have two or more elements in them.
|
|
*
|
|
* In Panel.Table panels you will want to set the GraphObject#row and GraphObject#column
|
|
* properties on each element. The GraphObject#alignment and GraphObject#stretch properties are also
|
|
* useful when an element's table cell is larger than that element.
|
|
* <p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a>
|
|
* for more examples and explanation.
|
|
*
|
|
* Panel.TableRow and Panel.TableColumn panels can only be used as elements within a Panel.Table Panel.
|
|
* They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model data
|
|
* provided in an #itemArray. You will still need to specify properties on the individual elements within a TableRow
|
|
* or TableColumn as if they were immediate elements of the containing Table panel.
|
|
* <p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.
|
|
*
|
|
* Panel.Grid panels are often used for the Diagram's Diagram#grid.
|
|
* ```js
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* { . . .
|
|
* grid: $(go.Panel, "Grid",
|
|
* { gridCellSize: new go.Size(40, 40) },
|
|
* $(go.Shape, "LineH", { stroke: "lightgray" }),
|
|
* $(go.Shape, "LineV", { stroke: "lightgray" })
|
|
* ),
|
|
* . . .
|
|
* });
|
|
* ```
|
|
* Or to get a green bar effect:
|
|
* ```js
|
|
* $(go.Diagram, "myDiagramDiv",
|
|
* { . . .
|
|
* grid: $(go.Panel, "Grid",
|
|
* { gridCellSize: new go.Size(100, 100) },
|
|
* $(go.Shape, "BarH", { fill: "lightgreen", height: 50 })
|
|
* ),
|
|
* . . .
|
|
* });
|
|
* ```
|
|
* But Grid Panels can also be stand alone objects:
|
|
* ```js
|
|
* $(go.Node, go.Panel.Grid,
|
|
* { gridCellSize: new go.Size(6, 6), width: 60, height: 60 },
|
|
* $(go.Shape, "LineH", { stroke: "gray" }),
|
|
* $(go.Shape, "LineV", { stroke: "gray" }))
|
|
* ```
|
|
*
|
|
* A Grid Panel's elements do not participate in object picking.
|
|
* <p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a>
|
|
* for more examples and explanation.
|
|
*
|
|
* Panel.Graduated panels, like Spot and Auto Panels have a "main" element. The other elements within a Graduated Panel
|
|
* are used to define ticks and labels to draw along the main shape's path.
|
|
* ```js
|
|
* $(go.Part, "Graduated",
|
|
* $(go.Shape, { geometryString: "M0 0 H400" }),
|
|
* $(go.Shape, { geometryString: "M0 0 V10" }),
|
|
* // offset to display below ticks
|
|
* $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
|
|
* );
|
|
* ```
|
|
*
|
|
* Only the main shape of a Graduated Panel participates in object picking, but a `background`
|
|
* can be set if the entire panel needs to be pickable.
|
|
* You cannot set or bind the Panel#itemArray of a Graduated Panel.
|
|
* Events on the tick Shapes and TextBlock labels of a Graduated Panel will be ignored.
|
|
* Graduated Panel TextBlock labels cannot be edited.
|
|
*
|
|
* Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel's main element
|
|
* won't rotate its children. Rotation should generally be done at the Panel level. Another similarity
|
|
* to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape.
|
|
* <p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a>
|
|
* for more examples and explanation.
|
|
* <h3>Changing and accessing elements of a Panel</h3>
|
|
*
|
|
* You can change the collection of #elements by calling #add, #insertAt, #remove, or #removeAt.
|
|
* You can get direct access to a particular element by calling #elt.
|
|
*
|
|
* You can search the visual tree of a Panel for GraphObjects that given a GraphObject#name using #findObject.
|
|
* <h3>Panel Size and Appearance</h3>
|
|
*
|
|
* Panels typically compute their own size based on their elements and Panel #type,
|
|
* but can also be sized by setting GraphObject#desiredSize, GraphObject#minSize, and GraphObject#maxSize.
|
|
* Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,
|
|
* especially in the cases of nested elements having a GraphObject#stretch value or TextBlock's having word wrap.
|
|
*
|
|
* Panels have no visual components of their own unless a GraphObject#background or GraphObject#areaBackground is specified
|
|
* or separators are specified either as defaults for the whole Table Panel or on individual RowColumnDefinitions.
|
|
* Panels can specify #padding, to make the Panel larger including its background. Setting a padding
|
|
* when the Panel is constrained in size will reduce the total area that it has to arrange its elements. Setting a #margin
|
|
* will not do this -- instead the Panel will expand in size.
|
|
*
|
|
* In addition to the GraphObject properties on elements that are only used by certain types of panels,
|
|
* several Panel properties only apply to specific Panel types.
|
|
* - Panels of #type Panel.Table use the #rowCount, #rowSizing, #columnCount,
|
|
* #columnSizing, #leftIndex, #topIndex, and all of the "default" separator properties.
|
|
* - Panels of #type Panel.TableRow and Panel.TableColumn do not act like regular GraphObjects,
|
|
* instead they are only to be used immediately within a Panel.Table. They are pass-through containers
|
|
* that hold elements for their parent table, and ignore their own scale and angle.
|
|
* - Panels of #type Panel.Grid use the #gridCellSize and #gridOrigin properties.
|
|
* - Panels of #type Panel.Viewbox use the #viewboxStretch property.
|
|
* - Panels of #type Panel.Graduated use the #graduatedMin, #graduatedMax,
|
|
* #graduatedTickUnit, and #graduatedTickBase properties.
|
|
*
|
|
* <p class="boxread">
|
|
* For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a>
|
|
* <h3>Data Binding</h3>
|
|
*
|
|
* Panels also provide fundamental support for data binding.
|
|
* When a diagram gets a new model or when a diagram's model is augmented with additional data,
|
|
* the diagram automatically creates a new Node or Link whose #data property refers to the corresponding
|
|
* node data or link data object.
|
|
* <p class="boxread">
|
|
* For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>
|
|
* and <a href="../../intro/dataBinding.html">Data Binding</a>.
|
|
*
|
|
* Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.
|
|
* This is achieved by setting or binding the #itemArray property, which acts in a manner similar
|
|
* to the Model#nodeDataArray property.
|
|
* You can supply an #itemTemplate, which must itself be a simple Panel, which is copied to create the element
|
|
* in this container Panel corresponding to an item in the itemArray.
|
|
* This property is analogous to the Diagram#nodeTemplate property, although for the diagram the
|
|
* template must be a Node, Group, or simple Part.
|
|
*
|
|
* Much like the Diagram#nodeTemplateMap, Panel's #itemTemplateMap supports having multiple templates,
|
|
* so that the actual structure of the element created for a data item can be chosen dynamically.
|
|
* Just as the Model#nodeCategoryProperty determines which template in the Diagram#nodeTemplateMap
|
|
* is copied to create a Node, the #itemCategoryProperty names the data property whose value
|
|
* chooses the Panel in the itemTemplateMap to copy for the item.
|
|
*
|
|
* When binding the #itemArray property, it is commonplace to set Model#copiesArrays and
|
|
* Model#copiesArrayObjects properties to true, so that when a node is copied, the item Array and its
|
|
* contents are copied, not shared. Or more generally, to customize the model's copying processes, you
|
|
* can supply a custom Model#copyNodeDataFunction.
|
|
* <p class="boxread">
|
|
* For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.
|
|
* @extends GraphObject
|
|
* @unrestricted
|
|
*/
|
|
export class Panel extends GraphObject {
|
|
/**
|
|
* Constructs an empty Panel of the given #type. Default type is Panel.Position.
|
|
* The panel type must be one of the enumerated values defined on the Panel class, including:
|
|
* Panel.Position, Panel.Vertical, Panel.Horizontal, Panel.Table,
|
|
* Panel.Auto, Panel.Spot, or Panel.Viewbox.
|
|
* @param {EnumValue=} type If not supplied, the default Panel type is Panel.Position.
|
|
*/
|
|
constructor(type?: PanelLayout);
|
|
/**
|
|
* Creates a deep copy of this Panel and returns it.
|
|
* @return {Panel}
|
|
*/
|
|
copy(): this;
|
|
/**
|
|
* Gets or sets the type of the Panel, which controls how the Panel's elements are measured and arranged.
|
|
* The only accepted values are listed as constant properties of Panel, including:
|
|
* - Panel.Position
|
|
* - Panel.Vertical
|
|
* - Panel.Horizontal
|
|
* - Panel.Auto
|
|
* - Panel.Spot
|
|
* - Panel.Table
|
|
* - Panel.Viewbox
|
|
* - Panel.Link (see also Links, which are all Panels of type Link)
|
|
* - Panel.TableRow
|
|
* - Panel.TableColumn
|
|
* - Panel.Grid
|
|
* - Panel.Graduated
|
|
*
|
|
* The default value is Panel.Position.
|
|
*
|
|
* You must not modify this property once the Panel has been measured or the Panel has been added to another Panel.
|
|
*/
|
|
type: PanelLayout;
|
|
/**
|
|
* This read-only property returns an iterator over the collection of the GraphObjects that this panel manages.
|
|
*
|
|
* You can change the collection by calling #add, #insertAt, #remove, or #removeAt.
|
|
*
|
|
* You can also get direct access to individual elements by calling #elt.
|
|
*/
|
|
readonly elements: Iterator<GraphObject>;
|
|
/**
|
|
* Gets or sets the space between this Panel's border and its content.
|
|
* Unlike GraphObject#margin, padding expands the area inside of the Panel's border.
|
|
* If this Panel's size is unconstrained, this will increase the size of the panel.
|
|
* If this Panel's size is constrained, this will decrease the total area
|
|
* for the Panel elements to arrange themselves.
|
|
*
|
|
* Unlike margin, increases in size due to padding are visually covered by the
|
|
* GraphObject#background and GraphObject#areaBackground.
|
|
*
|
|
* Padding cannot contain negative numbers.
|
|
* The default value is a Margin of zero.
|
|
* @see GraphObject#margin
|
|
*/
|
|
padding: MarginLike;
|
|
/**
|
|
* Gets or sets the default alignment spot of this Panel, used as
|
|
* the alignment for an element when its GraphObject#alignment value is Spot.Default.
|
|
* The default value is Spot.Default, which is interpreted by the Panel in whatever manner seems reasonable,
|
|
* depending on the Panel type.
|
|
*/
|
|
defaultAlignment: Spot;
|
|
/**
|
|
* Gets or sets the default stretch of this Panel, used as
|
|
* the stretch for an element when its GraphObject#stretch value is GraphObject.Default.
|
|
* The default value is GraphObject.Default, which typically resolves to GraphObject.None.
|
|
*/
|
|
defaultStretch: EnumValue;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the additional padding for rows and columns.
|
|
* Padding is applied both before and after a row or column's contents.
|
|
* @see RowColumnDefinition#separatorPadding
|
|
* @see #defaultColumnSeparatorStrokeWidth
|
|
* @see #defaultRowSeparatorStrokeWidth
|
|
* @since 1.2
|
|
*/
|
|
defaultSeparatorPadding: MarginLike;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the default stroke (color) for rows
|
|
* provided a given row has a nonzero RowColumnDefinition#separatorStrokeWidth.
|
|
* RowColumnDefinition#separatorStroke can override this default value.
|
|
* The default value is null -- no line is drawn.
|
|
* @TablePanel
|
|
* @see #defaultRowSeparatorStrokeWidth
|
|
* @see #defaultRowSeparatorDashArray
|
|
* @see RowColumnDefinition#separatorStroke
|
|
* @see #defaultColumnSeparatorStroke
|
|
* @since 1.2
|
|
*/
|
|
defaultRowSeparatorStroke: BrushLike;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the default stroke width for a row's separator.
|
|
* RowColumnDefinition#separatorStrokeWidth can override this default value.
|
|
* The default value is 1. Any new value must be a real, non-negative number.
|
|
* @see RowColumnDefinition#separatorStrokeWidth
|
|
* @see #defaultColumnSeparatorStrokeWidth
|
|
* @since 1.2
|
|
*/
|
|
defaultRowSeparatorStrokeWidth: number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the default dash array for a row's separator.
|
|
* RowColumnDefinition#separatorDashArray can override this default value.
|
|
*
|
|
* Must be an array of positive numbers and zeroes,
|
|
* or else null to indicate a solid line.
|
|
*
|
|
* For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
|
|
*
|
|
* Setting an array with all zeroes will set the value to null.
|
|
*
|
|
* Default is null.
|
|
* @see RowColumnDefinition#separatorDashArray
|
|
* @see #defaultColumnSeparatorDashArray
|
|
* @since 1.2
|
|
*/
|
|
defaultRowSeparatorDashArray: Array<number> | null;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the default stroke (color) for columns
|
|
* provided a given column has a nonzero RowColumnDefinition#separatorStrokeWidth.
|
|
* RowColumnDefinition#separatorDashArray can override this default value.
|
|
* The default value is null -- no line is drawn.
|
|
* @see #defaultColumnSeparatorStrokeWidth
|
|
* @see #defaultColumnSeparatorDashArray
|
|
* @see RowColumnDefinition#separatorStroke
|
|
* @see #defaultRowSeparatorStroke
|
|
* @since 1.2
|
|
*/
|
|
defaultColumnSeparatorStroke: BrushLike;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the default stroke width for a column's separator.
|
|
* RowColumnDefinition#separatorStrokeWidth can override this default value.
|
|
* The default value is 1. Any new value must be a real, non-negative number.
|
|
* @see RowColumnDefinition#separatorStrokeWidth
|
|
* @see #defaultRowSeparatorStrokeWidth
|
|
* @since 1.2
|
|
*/
|
|
defaultColumnSeparatorStrokeWidth: number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the default dash array for a column's separator.
|
|
* RowColumnDefinition#separatorStrokeWidth can override this default value.
|
|
*
|
|
* Must be an array of positive numbers and zeroes,
|
|
* or else null to indicate a solid line.
|
|
*
|
|
* For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
|
|
*
|
|
* Setting an array with all zeroes will set the value to null.
|
|
*
|
|
* Default is null.
|
|
* @see RowColumnDefinition#separatorDashArray
|
|
* @see #defaultRowSeparatorDashArray
|
|
* @since 1.2
|
|
*/
|
|
defaultColumnSeparatorDashArray: Array<number> | null;
|
|
/**
|
|
* For Panel.Viewbox|Viewbox Panels: Gets or sets how the panel will resize its content.
|
|
*
|
|
* Possible values are GraphObject.Uniform and GraphObject.UniformToFill.
|
|
* The default is GraphObject.Uniform.
|
|
*/
|
|
viewboxStretch: EnumValue;
|
|
/**
|
|
* For Panel.Grid|Grid Panels: Gets or sets the distance between lines.
|
|
* The units are in local coordinates.
|
|
* The default is 10x10. Any new width or height must be a positive real number.
|
|
*/
|
|
gridCellSize: Size;
|
|
/**
|
|
* For Panel.Grid|Grid Panels: Gets or sets an origin point for the grid cells.
|
|
* The units are in local coordinates.
|
|
* The default is (0,0). Any new value must use real numbers.
|
|
*/
|
|
gridOrigin: Point;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: Gets or sets the minimum value represented.
|
|
* Must be less than #graduatedMax. The default is 0.
|
|
* @since 1.7
|
|
*/
|
|
graduatedMin: number;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: Gets or sets the maximum value represented.
|
|
* Must be greater than #graduatedMin. The default is 100.
|
|
* @since 1.7
|
|
*/
|
|
graduatedMax: number;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: This read-only property returns the range of values represented by the Panel.
|
|
*
|
|
* For example, a #graduatedMin of 25 and #graduatedMax of 75 would return 50.
|
|
* @since 1.7
|
|
*/
|
|
readonly graduatedRange: number;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: Gets or sets the difference between two consecutive values marked by ticks.
|
|
* Must be positive. The default is 10.
|
|
* @since 1.7
|
|
*/
|
|
graduatedTickUnit: number;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: Gets or sets the base value which is marked with a tick.
|
|
* The default is 0.
|
|
* @since 1.7
|
|
*/
|
|
graduatedTickBase: number;
|
|
/**
|
|
* Return an immediate child element whose GraphObject#isPanelMain is true,
|
|
* or else just return the first child element.
|
|
* @return {GraphObject} this may return null if there are no child elements
|
|
* @since 1.5
|
|
*/
|
|
findMainElement(): GraphObject | null;
|
|
/**
|
|
* Search the visual tree starting at this Panel for a GraphObject
|
|
* whose GraphObject#name is the given name.
|
|
*
|
|
* This does not recurse into the elements inside a Panel that holds elements for an #itemArray.
|
|
* @param {string} name The name to search for, using a case-sensitive string comparison.
|
|
* @return {GraphObject} If no such named object can be found, this returns null.
|
|
*/
|
|
findObject(name: string): GraphObject | null;
|
|
/**
|
|
* Adds a GraphObject to the end of this Panel's list of elements, visually in front of all of the other elements.
|
|
*
|
|
* If the element to be added is already in this Panel's list of elements,
|
|
* the object is moved to the end of the list.
|
|
* You cannot add a GraphObject to a Panel if that GraphObject is already in a different Panel.
|
|
* @param {GraphObject} element A GraphObject.
|
|
*/
|
|
add(element: GraphObject): void;
|
|
/**
|
|
* Returns the GraphObject in this Panel's list of elements at the specified index.
|
|
* @param {number} idx
|
|
* @return {GraphObject}
|
|
*/
|
|
elt(idx: number): GraphObject;
|
|
/**
|
|
* Adds a GraphObject to the Panel's list of elements at the specified index.
|
|
*
|
|
* If the element to be added is already in this Panel's list of elements,
|
|
* the object is moved to the specified index.
|
|
* You cannot add a GraphObject to a Panel that if that GraphObject is already in a different Panel.
|
|
* @param {number} index
|
|
* @param {GraphObject} element A GraphObject.
|
|
*/
|
|
insertAt(index: number, element: GraphObject): void;
|
|
/**
|
|
* Removes a GraphObject from this Panel's list of elements.
|
|
* @param {GraphObject} element A GraphObject.
|
|
*/
|
|
remove(element: GraphObject): void;
|
|
/**
|
|
* Removes an GraphObject from this Panel's list of elements at the specified index.
|
|
* @param {number} idx
|
|
*/
|
|
removeAt(idx: number): void;
|
|
/**
|
|
* For Panel.Table|Table Panels: This read-only property returns the number of rows.
|
|
* This value is only valid after the Panel has been measured.
|
|
*/
|
|
readonly rowCount: number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets the RowColumnDefinition for a particular row.
|
|
* If you ask for the definition of a row at or beyond the #rowCount,
|
|
* it will automatically create one and return it.
|
|
*
|
|
* If this Panel is not a Table Panel, this method returns null.
|
|
* @expose
|
|
* @param {number} idx the non-negative zero-based integer row index.
|
|
* @return {RowColumnDefinition}
|
|
*/
|
|
getRowDefinition(idx: number): RowColumnDefinition;
|
|
/**
|
|
* For Panel.Table|Table Panels: Removes the RowColumnDefinition for a particular row.
|
|
*
|
|
* If this Panel is not a Table Panel, this method does nothing.
|
|
* @param {number} idx the non-negative zero-based integer row index.
|
|
*/
|
|
removeRowDefinition(idx: number): void;
|
|
/**
|
|
* For Panel.Table|Table Panels: This read-only property returns the number of columns.
|
|
* This value is only valid after the Panel has been measured.
|
|
*/
|
|
readonly columnCount: number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets the RowColumnDefinition for a particular column.
|
|
* If you ask for the definition of a column at or beyond the #columnCount,
|
|
* it will automatically create one and return it.
|
|
*
|
|
* If this Panel is not a Table Panel, this method returns null.
|
|
* @expose
|
|
* @param {number} idx the non-negative zero-based integer column index.
|
|
* @return {RowColumnDefinition}
|
|
*/
|
|
getColumnDefinition(idx: number): RowColumnDefinition;
|
|
/**
|
|
* For Panel.Table|Table Panels: Removes the RowColumnDefinition for a particular row.
|
|
*
|
|
* If this Panel is not a Table Panel, this method does nothing.
|
|
* @param {number} idx the non-negative zero-based integer row index.
|
|
*/
|
|
removeColumnDefinition(idx: number): void;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets how this Panel's rows deal with extra space.
|
|
* Valid values are RowColumnDefinition.ProportionalExtra and RowColumnDefinition.None.
|
|
* The default is RowColumnDefinition.ProportionalExtra.
|
|
* @see RowColumnDefinition#sizing
|
|
*/
|
|
rowSizing: EnumValue;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets how this Panel's columns deal with extra space.
|
|
* Valid values are RowColumnDefinition.ProportionalExtra and RowColumnDefinition.None.
|
|
* The default is RowColumnDefinition.ProportionalExtra.
|
|
* @see RowColumnDefinition#sizing
|
|
* @see #rowSizing
|
|
*/
|
|
columnSizing: EnumValue;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the first row that this Panel displays.
|
|
* The default value is 0.
|
|
* @see #leftIndex
|
|
*/
|
|
topIndex: number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Gets or sets the first column that this Panel displays.
|
|
* The default value is 0.
|
|
* @see #topIndex
|
|
*/
|
|
leftIndex: number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Returns the row at a given y-coordinate in local coordinates.
|
|
* Call GraphObject#getLocalPoint to convert a Point in document coordinates into
|
|
* a Point in local coordinates.
|
|
*
|
|
* @param {number} y
|
|
* @return {number} a zero-based integer
|
|
* @see #findColumnForLocalX
|
|
* @since 1.2
|
|
*/
|
|
findRowForLocalY(y: number): number;
|
|
/**
|
|
* For Panel.Table|Table Panels: Returns the cell at a given x-coordinate in local coordinates.
|
|
* Call GraphObject#getLocalPoint to convert a Point in document coordinates into
|
|
* a Point in local coordinates.
|
|
*
|
|
* @param {number} x
|
|
* @return {number} a zero-based integer
|
|
* @see #findRowForLocalY
|
|
* @since 1.2
|
|
*/
|
|
findColumnForLocalX(x: number): number;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: Returns the point that corresponds with a value, in the panel's coordinates.
|
|
*
|
|
* If the value provided is not within the #graduatedMin and #graduatedMax,
|
|
* it will be constrained to within those values.
|
|
*
|
|
* If this Panel is not a Graduated Panel, this method returns Point(NaN, NaN).
|
|
* @param {number} val a value between #graduatedMin and #graduatedMax
|
|
* @param {Point=} result an optional Point that is modified and returned
|
|
* @return {Point}
|
|
* @see #graduatedValueForPoint
|
|
* @since 1.7
|
|
*/
|
|
graduatedPointForValue(val: number, result?: Point): Point;
|
|
/**
|
|
* For Panel.Graduated|Graduated Panels: Returns the value that corresponds with the given Point.
|
|
* The Point must be in the panel's coordinates.
|
|
* The value returned will be in the Graduated Panel's range.
|
|
*
|
|
* If this Panel is not a Graduated Panel, this method returns NaN.
|
|
* @param {Point} pt a Point in the Graduated Panel's coordinates
|
|
* @return {number}
|
|
* @see #graduatedPointForValue
|
|
* @since 1.7
|
|
*/
|
|
graduatedValueForPoint(pt: Point): number;
|
|
/**
|
|
* Gets or sets the optional model data to which this panel is data-bound.
|
|
* The data must be a JavaScript Object if this is a Part.
|
|
* The data can be any JavaScript value if this is a Panel created for
|
|
* an item in an Array that was data-bound by the #itemArray property.
|
|
* The default value is null.
|
|
*
|
|
* Setting it to a new value automatically calls #updateTargetBindings
|
|
* in order to assign new values to all of the data-bound GraphObject properties.
|
|
*
|
|
* Once you set this property you cannot add, remove, or modify any data bindings
|
|
* on any of the GraphObjects in the visual tree of this Panel, including on
|
|
* this panel itself.
|
|
*
|
|
* You should not modify this property on a Part that is created automatically
|
|
* to represent model data, nor on a Panel that is created automatically for a data item
|
|
* in the containing Panel's Panel#itemArray.
|
|
* Call Model#removeNodeData and Model#addNodeData if you want to replace
|
|
* this Part with another one, or call Model#removeArrayItem and Model#insertArrayItem
|
|
* if you want to replace this Panel with another one.
|
|
*
|
|
* Although you might not be able to replace this data value if this Part was created
|
|
* automatically by the Diagram, you can still modify that data object's properties.
|
|
* Call the appropriate Model method for changing properties that affect the structure of the diagram.
|
|
* Call Model#setDataProperty for changing other properties that may be the sources
|
|
* of Bindings on GraphObject properties that are in the visual tree of this panel/part.
|
|
*/
|
|
data: any | null;
|
|
/**
|
|
* Gets the index of this Panel's data if it was created to represent an item in its containing Panel's Panel#itemArray.
|
|
* The default value is NaN.
|
|
*
|
|
* This is only set internally by code such as #rebuildItemElements or Model#insertArrayItem
|
|
* when building or shifting Panel representing items
|
|
* in the Panel whose Panel#itemArray was set or bound to an Array of value.
|
|
*
|
|
* This property can be used in data bindings within the item template to produce values
|
|
* that depend on its position in the item Array.
|
|
* For example:
|
|
* ```js
|
|
* $(go.Panel, // the item Panel
|
|
* . . .,
|
|
* new go.Binding("itemArray", "someProperty"),
|
|
* {
|
|
* itemTemplate:
|
|
* $(go.Panel,
|
|
* // set Panel.background to a color based on the Panel.itemIndex
|
|
* new go.Binding("background", "itemIndex",
|
|
* // using this conversion function
|
|
* function(i) { return (i%2 === 0) ? "lightgreen" : "lightyellow"; })
|
|
* // bound to this Panel itself, not to the Panel.data item
|
|
* .ofObject(),
|
|
* $(go.TextBlock, // a trivial item template, just showing some text
|
|
* new go.Binding("text")) // sets TextBlock.text = data.text
|
|
* )
|
|
* }
|
|
* )
|
|
* ```
|
|
*
|
|
* The main element of a Spot or Auto or Link Panel, or the first TableRow or TableColumn element of a Table Panel
|
|
* whose #isPanelMain property is true, will not have this property set to a number,
|
|
* because it will not have been created by #rebuildItemElements.
|
|
* @since 1.4
|
|
*/
|
|
itemIndex: number;
|
|
/**
|
|
* Undocumented.
|
|
* Make a deep copy of this Panel and allow it to be a template.
|
|
* This makes copies of Bindings, unlike the regular copy().
|
|
* @return {Panel}
|
|
*/
|
|
copyTemplate(): Panel;
|
|
/**
|
|
* Re-evaluate all data bindings on this panel,
|
|
* in order to assign new property values to the GraphObjects in this visual tree
|
|
* based on this object's #data property values.
|
|
*
|
|
* It is better to call Model#setDataProperty to modify data properties,
|
|
* because that will both record changes for undo/redo and will update all bindings
|
|
* that may depend on that property.
|
|
*
|
|
* This method does nothing if #data is null.
|
|
* @param {string=} srcprop An optional source data property name:
|
|
* when provided, only evaluates those Bindings that use that particular property;
|
|
* when not provided or when it is the empty string, all bindings are evaluated.
|
|
* @see Model#updateTargetBindings
|
|
*/
|
|
updateTargetBindings(srcprop?: string): void;
|
|
/**
|
|
* Gets or sets a JavaScript Array of values or objects, each of which will be represented
|
|
* by a Panel as elements in this Panel.
|
|
* Replacing this array results all of this panel's child objects being replaced with
|
|
* a copy of the Panel found in #itemTemplateMap for each particular
|
|
* item in the Array.
|
|
*
|
|
* Because the software does not receive any notifications when an Array is modified,
|
|
* any insertions or removals or replacements of data in the Array will not be noticed
|
|
* unless you call Model#insertArrayItem or Model#removeArrayItem.
|
|
* You may also reset this property to its current value (the modified Array) or
|
|
* call #updateTargetBindings, if there is a Binding whose target is this property.
|
|
*
|
|
* When binding this property, it is commonplace to set Model#copiesArrays and
|
|
* Model#copiesArrayObjects properties to true, so that when a node is copied,
|
|
* the item Array and its contents are copied, not shared.
|
|
* Or more generally, to customize the model's copying processes, you can supply a custom
|
|
* Model#copyNodeDataFunction and perhaps a GraphLinksModel#copyLinkDataFunction.
|
|
*
|
|
* Any JavaScript Object that is in this Array must only appear once in the array
|
|
* and must not appear in any other Panel#itemArrays.
|
|
* Use #findItemPanelForData to find the data-bound Panel created for an Object in this panel's item Array.
|
|
*
|
|
* Non-Object values in an item Array may appear multiple times.
|
|
* An item Array may be shared by multiple Panels.
|
|
*
|
|
* Item Arrays should not be used with Grid Panels or Graduated Panels as they may not have nested Panels.
|
|
*/
|
|
itemArray: Array<any> | null;
|
|
/**
|
|
* Create and add new GraphObjects corresponding to and bound to the data in the #itemArray,
|
|
* after removing all existing elements from this Panel.
|
|
* This method is automatically called when replacing the #itemArray value,
|
|
* or when changing the value of #itemTemplate or #itemTemplateMap.
|
|
*
|
|
* This uses #itemCategoryProperty to determine the category for an item data.
|
|
* That string is used to look up a template in #itemTemplateMap.
|
|
* The resulting template (which is also a Panel) is copied, added to this panel,
|
|
* and its #itemIndex is set to its index in that Array.
|
|
* That new child Panel is then data-bound to that Array item by setting its #data.
|
|
*
|
|
* If #itemArray is null, this method just removes all elements from this panel.
|
|
* Actually, if this Panel #type is "Spot", "Auto", or "Link", the very first element
|
|
* is always kept by this method.
|
|
* Also, if this Panel type is "Table", and if the first element is a "TableRow" or "TableColumn" Panel
|
|
* whose #isPanelMain property is set to true, that first element will be kept too.
|
|
* That is useful for defining literal TableRow headers in Table panels, when the header information
|
|
* is not kept as the first item in the itemArray.
|
|
*
|
|
* It is wasteful to call this method after making some model data changes.
|
|
* It is better to call Model#setDataProperty, Model#addArrayItem,
|
|
* Model#insertArrayItem, or Model#removeArrayItem, or other model methods.
|
|
* Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.
|
|
*/
|
|
rebuildItemElements(): void;
|
|
/**
|
|
* Return the Panel that was made for a particular data object in this panel's #itemArray.
|
|
* If this returns a Panel, its #data property will be the argument data object,
|
|
* and its containing GraphObject#panel will be this panel.
|
|
* @param {Object} data must be an Object, not a string or a number or a boolean or a function
|
|
* @return {Panel} or null if not found
|
|
* @since 1.6
|
|
*/
|
|
findItemPanelForData(data: ObjectData): Panel | null;
|
|
/**
|
|
* Gets or sets the default Panel template used as the archetype
|
|
* for item data that are in #itemArray.
|
|
*
|
|
* Setting this property just modifies the #itemTemplateMap
|
|
* by replacing the entry named with the empty string.
|
|
* Any new value must be a Panel but not a Part.
|
|
* By default this property is null.
|
|
*
|
|
* GraphObject#copy when copying a panel will share the #itemTemplateMap
|
|
* between the original panel and the copied panel.
|
|
*/
|
|
itemTemplate: Panel;
|
|
/**
|
|
* Gets or sets a Map mapping template names to Panels.
|
|
* One of these Panels is copied for each item data that is in the #itemArray.
|
|
* Replacing this map will automatically rebuild all of the elements in this Panel.
|
|
*
|
|
* By default this property is null.
|
|
* All values in the Map must be Panels but not Parts.
|
|
*
|
|
* If you modify this Map, by replacing a Panel or by adding or
|
|
* removing a map entry, you need to explicitly call #rebuildItemElements afterwards.
|
|
*
|
|
* GraphObject#copy when copying a panel will share the #itemTemplateMap
|
|
* between the original panel and the copied panel.
|
|
*/
|
|
itemTemplateMap: Map<string, Panel> | null;
|
|
/**
|
|
* Gets or sets the name of the item data property that returns a string describing that data's category,
|
|
* or a function that takes an item data object and returns that string;
|
|
* the default value is the name 'category'.
|
|
* This is used to distinguish between different
|
|
* kinds of items in the #itemArray.
|
|
*
|
|
* The name must not be null.
|
|
* If the value is an empty string, the category is assumed to be an empty string,
|
|
* the default category name, for all item data objects.
|
|
* You must not change this property when the #itemArray already has a value.
|
|
*/
|
|
itemCategoryProperty: string | ((a: any) => string);
|
|
/**
|
|
* For Spot Panels: Gets or sets whether this Panel's main element clips instead of fills.
|
|
* The main element will not paint its stroke, if it has any.
|
|
* This assumes that the main element is a Shape.
|
|
*
|
|
* When this property is `true`, the Spot panel will size itself to be the *intersection* of the main element bounds and
|
|
* all other elements' bounds, rather than the union of these bounds.
|
|
* @since 1.7
|
|
*/
|
|
isClipping: boolean;
|
|
/**
|
|
* For Panel.Horizontal|Horizontal and Panel.Vertical|Vertical Panels: gets or sets whether this Panel arranges its contents from the
|
|
* typical side (left and top, respectively), or the opposite side (right and bottom, respectively).
|
|
*
|
|
* The default value is false.
|
|
* @since 1.7
|
|
*/
|
|
isOpposite: boolean;
|
|
/**
|
|
* Gets or sets whether this Panel or any GraphObject inside the panel actually responds to user click events.
|
|
* It may be used as a Binding target.
|
|
* See how this property is used in <a href="../../extensions/Buttons.js">Buttons.js</a>.
|
|
*
|
|
* This property does not have any effect on picking ("hit-testing") -- that behavior is implemented
|
|
* by the GraphObject#pickable property.
|
|
* When this property is false, non-click events may still occur on this panel or on objects within this panel.
|
|
* This property is normally only used for Panels that are GraphObject#isActionable.
|
|
*
|
|
* Call GraphObject#isEnabledObject to decide whether a particular object can be clicked.
|
|
* @see GraphObject#isEnabledObject
|
|
* @see GraphObject#enabledChanged
|
|
* @see GraphObject#isActionable
|
|
* @see GraphObject#pickable
|
|
* @since 1.7
|
|
*/
|
|
isEnabled: boolean;
|
|
/**
|
|
* For Panels which are elements of Spot Panels: Gets or sets the name
|
|
* of this Panel's element that should be used as the alignment object instead of this Panel.
|
|
*
|
|
* This allows Spot Panels to align objects that are nested in the element tree of its own elements.
|
|
* @since 1.7
|
|
*/
|
|
alignmentFocusName: string;
|
|
/**
|
|
* Register a PanelLayout. This is called when making new Panel types.
|
|
* See the <a href="../../samples/panelLayout.html">PanelLayout sample</a> for an example.
|
|
* @param {string} layoutName Panel name
|
|
* @param {PanelLayout} layout instance of the PanelLayout
|
|
* @since 2.0
|
|
*/
|
|
static definePanelLayout(layoutName: string, layout: PanelLayout): void;
|
|
/**
|
|
* The default #type, arranges each element according to their GraphObject#position.
|
|
* @constant
|
|
*/
|
|
static readonly Position: PanelLayout;
|
|
/**
|
|
* This value for #type lays out the elements horizontally with
|
|
* their GraphObject#alignment property dictating their alignment on the Y-axis.
|
|
* @constant
|
|
*/
|
|
static readonly Horizontal: PanelLayout;
|
|
/**
|
|
* This value for #type lays out the elements vertically with
|
|
* their GraphObject#alignment property dictating their alignment on the X-axis.
|
|
* @constant
|
|
*/
|
|
static readonly Vertical: PanelLayout;
|
|
/**
|
|
* This value for #type arranges GraphObjects about a main element using the
|
|
* GraphObject#alignment and GraphObject#alignmentFocus properties;
|
|
* the main element is the first GraphObject with GraphObject#isPanelMain set to true,
|
|
* or else the first GraphObject if none have that property set to true.
|
|
* @constant
|
|
*/
|
|
static readonly Spot: PanelLayout;
|
|
/**
|
|
* This value for #type resizes the main element to fit around the other elements;
|
|
* the main element is the first GraphObject with GraphObject#isPanelMain set to true,
|
|
* or else the first GraphObject if none have that property set to true.
|
|
* @constant
|
|
*/
|
|
static readonly Auto: PanelLayout;
|
|
/**
|
|
* This value for #type arranges GraphObjects into rows and columns;
|
|
* set the GraphObject#row and GraphObject#column properties on each element.
|
|
* @constant
|
|
*/
|
|
static readonly Table: PanelLayout;
|
|
/**
|
|
* This value for #type rescales a single GraphObject to fit inside the panel
|
|
* depending on the panel's Panel#viewboxStretch property.
|
|
* @constant
|
|
*/
|
|
static readonly Viewbox: PanelLayout;
|
|
/**
|
|
* Organizational Panel type that is only valid inside of a Table panel;
|
|
* This Panel ignores its angle and scale, and does not have a meaningful size on its own,
|
|
* it is only an organizational container for other elements of a Panel.
|
|
* @constant
|
|
* @since 1.1
|
|
*/
|
|
static readonly TableRow: PanelLayout;
|
|
/**
|
|
* Organizational Panel type that is only valid inside of a Table panel;
|
|
* This Panel ignores its angle and scale, and does not have a meaningful size on its own,
|
|
* it is only an organizational container for other elements of a Panel.
|
|
* @constant
|
|
* @since 1.1
|
|
*/
|
|
static readonly TableColumn: PanelLayout;
|
|
/**
|
|
* This value for #type is used for Links and adornments that act as Links.
|
|
* @constant
|
|
*/
|
|
static readonly Link: PanelLayout;
|
|
/**
|
|
* This value for #type is used to draw regular patterns of lines.
|
|
* @constant
|
|
*/
|
|
static readonly Grid: PanelLayout;
|
|
/**
|
|
* This value for #type is used to draw regular tick marks and labels along some shape.
|
|
* The main element is the first GraphObject with GraphObject#isPanelMain set to true,
|
|
* or else the first GraphObject if none have that property set to true.
|
|
* @constant
|
|
* @since 1.7
|
|
*/
|
|
static readonly Graduated: PanelLayout;
|
|
}
|
|
/**
|
|
* The RowColumnDefinition class describes constraints on a row or a column
|
|
* in a Panel of type Panel.Table.
|
|
* It also provides information about the actual layout after the
|
|
* Table Panel has been arranged.
|
|
* @unrestricted
|
|
*/
|
|
export class RowColumnDefinition {
|
|
/**
|
|
* You should not use this constructor, because calls to
|
|
* Panel#getRowDefinition or Panel#getColumnDefinition
|
|
* will automatically create and remember a RowColumnDefinition for you.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* The default #sizing, which resolves to RowColumnDefinition.None or else
|
|
* the Table Panel's rowSizing and columnSizing if present.
|
|
* @constant
|
|
*/
|
|
static Default: EnumValue;
|
|
/**
|
|
* The default #sizing if none is specified on the Table Panel's rowSizing and columnSizing.
|
|
* @constant
|
|
*/
|
|
static None: EnumValue;
|
|
/**
|
|
* If a Table Panel is larger than all the rows then this #sizing
|
|
* grants this row and any others with the same value the extra space, apportioned proportionally between them
|
|
* @constant
|
|
*/
|
|
static ProportionalExtra: EnumValue;
|
|
/**
|
|
* Undocumented
|
|
* @return {number}
|
|
* @see #computeEffectiveSpacing
|
|
*/
|
|
computeEffectiveSpacingTop(): number;
|
|
/**
|
|
* Undocumented
|
|
* @return {number}
|
|
*/
|
|
computeEffectiveSpacing(): number;
|
|
/**
|
|
* This read-only property returns the Panel that this row or column definition is in.
|
|
*/
|
|
readonly panel: Panel | null;
|
|
/**
|
|
* This read-only property is true when this describes a row instead of a column in the #panel.
|
|
* When this is true, the #height, #minimum, and #maximum
|
|
* all describe the row height.
|
|
* Otherwise #width and the other two properties describe the column width.
|
|
*/
|
|
isRow: boolean;
|
|
/**
|
|
* This read-only property returns which row or column this RowColumnDefinition describes in the #panel.
|
|
* The value is a zero-based integer.
|
|
* @see Panel#findColumnForLocalX
|
|
* @see Panel#findRowForLocalY
|
|
* @see Panel#leftIndex
|
|
* @see Panel#topIndex
|
|
* @see #position
|
|
*/
|
|
index: number;
|
|
/**
|
|
* Gets or sets the row height, in local coordinates.
|
|
* This describes the row height if #isRow is true;
|
|
* otherwise this property is meaningless.
|
|
* The value must be non-negative and finite.
|
|
*
|
|
* The default value is NaN, which means this row will get a height
|
|
* that is just big enough to hold all of the objects in the row.
|
|
*
|
|
* Setting this value to a number will mean that all of the objects
|
|
* of this Panel in this row will be allocated that
|
|
* amount of row height.
|
|
* Whether an object in the row is actually arranged to have that height
|
|
* depends on whether the GraphObject#stretch stretches vertically.
|
|
* @see #width
|
|
* @see #minimum
|
|
* @see #maximum
|
|
* @see #sizing
|
|
*/
|
|
height: number;
|
|
/**
|
|
* Gets or sets the column width, in local coordinates.
|
|
* The size describes the column width if #isRow is false;
|
|
* otherwise this property is meaningless.
|
|
* The value must be non-negative and finite.
|
|
*
|
|
* The default value is NaN, which means this column will get a width
|
|
* that is just big enough to hold all of the objects in the column.
|
|
*
|
|
* Setting this value to a number will mean that all of the objects
|
|
* of this Panel in this column will be allocated that
|
|
* amount of column width.
|
|
* Whether an object in the column is actually arranged to have that width
|
|
* depends on whether the GraphObject#stretch stretches horizontally.
|
|
* @see #height
|
|
* @see #minimum
|
|
* @see #maximum
|
|
* @see #sizing
|
|
*/
|
|
width: number;
|
|
/**
|
|
* Gets or sets the minimum row height or column width, in local coordinates.
|
|
* The minimum describes the row height if #isRow is true;
|
|
* otherwise this describes the column width.
|
|
*
|
|
* The value must be non-negative and finite.
|
|
* The default value is zero.
|
|
* The arranged height of all objects in this row,
|
|
* or the arranged width of all objects in this column,
|
|
* will be no less than this value.
|
|
* @see #width
|
|
* @see #height
|
|
* @see #maximum
|
|
* @see #sizing
|
|
*/
|
|
minimum: number;
|
|
/**
|
|
* Gets or sets the maximum row height or column width, in local coordinates.
|
|
* The maximum describes the row height if #isRow is true;
|
|
* otherwise this describes the column width.
|
|
*
|
|
* The value must be non-negative.
|
|
* The default value is Infinity.
|
|
* The arranged height of all objects in this row,
|
|
* or the arranged width of all objects in this column,
|
|
* will be no greater than this value.
|
|
* @see #width
|
|
* @see #height
|
|
* @see #minimum
|
|
* @see #sizing
|
|
*/
|
|
maximum: number;
|
|
/**
|
|
* Gets or sets a default alignment for elements that are in this row or column.
|
|
* The value must be a Spot.
|
|
* The default value is Spot.Default, so that this RowColumnDefinition
|
|
* does not supply any alignment information for the row or column.
|
|
*
|
|
* When an element's GraphObject#alignment property is Spot.Default,
|
|
* it gets the horizontal alignment from the element's column's RowColumnDefinition
|
|
* and the vertical alignment from the element's row's RowColumnDefinition.
|
|
* When that RowColumnDefinition#alignment property is also Default,
|
|
* it takes the value from the table panel's Panel#defaultAlignment property.
|
|
* @see GraphObject#alignment
|
|
* @see Panel#defaultAlignment
|
|
*/
|
|
alignment: Spot;
|
|
/**
|
|
* Gets or sets the default stretch for elements that are in this row or column.
|
|
* The only accepted values are listed as constant properties of GraphObject:
|
|
* GraphObject.None, GraphObject.Fill, GraphObject.Horizontal, GraphObject.Vertical, or GraphObject.Default.
|
|
* The default value is GraphObject.Default, so that this RowColumnDefinition
|
|
* does not supply any stretch information for the row or column.
|
|
*
|
|
* When an element's GraphObject#stretch property is GraphObject.Default,
|
|
* it gets the horizontal stretch from the element's column's RowColumnDefinition
|
|
* and the vertical stretch from the element's row's RowColumnDefinition.
|
|
* When that RowColumnDefinition#stretch property is also Default,
|
|
* it takes the value from the table panel's Panel#defaultStretch property.
|
|
* @see GraphObject#stretch
|
|
* @see Panel#defaultStretch
|
|
* @see #sizing
|
|
* @see #width
|
|
* @see #height
|
|
*/
|
|
stretch: EnumValue;
|
|
/**
|
|
* Gets or sets the additional padding for a particular row or column, in local coordinates.
|
|
* Padding is applied on two sides - before and after a row or column's contents.
|
|
* The #separatorStrokeWidth comes before any padding Margin#top or Margin#left.
|
|
*
|
|
* The default value is null, so that this RowColumnDefinition
|
|
* does not supply any padding information for the row or column.
|
|
* There may still be some padding between rows and/or columns if Panel#defaultSeparatorPadding is non-zero.
|
|
* @see Panel#defaultSeparatorPadding
|
|
* @see #separatorStroke
|
|
* @see #separatorStrokeWidth
|
|
* @see #separatorDashArray
|
|
* @see #background
|
|
* @since 1.2
|
|
*/
|
|
separatorPadding: MarginLike;
|
|
/**
|
|
* Gets or sets the stroke (color) for the separator line that is drawn before a particular row or column,
|
|
* provided that row or column has a nonzero #separatorStrokeWidth.
|
|
*
|
|
* The default value is null, so that this RowColumnDefinition
|
|
* does not specify any brush for the separator line to draw before the row or column.
|
|
* The line may still be drawn if the value of Panel#defaultRowSeparatorStroke or
|
|
* Panel#defaultColumnSeparatorStroke is non-null.
|
|
*
|
|
* However, if no stroke color is specified, then no stroke width will be drawn,
|
|
* even if the #separatorStrokeWidth value is non-zero.
|
|
* @see Panel#defaultColumnSeparatorStroke
|
|
* @see Panel#defaultRowSeparatorStroke
|
|
* @see #separatorPadding
|
|
* @see #separatorStrokeWidth
|
|
* @see #separatorDashArray
|
|
* @see #background
|
|
* @since 1.2
|
|
*/
|
|
separatorStroke: BrushLike;
|
|
/**
|
|
* Gets or sets the stroke width for a particular row or column's separator line, in local coordinates.
|
|
*
|
|
* The default value is NaN, so that this RowColumnDefinition
|
|
* does not supply any stroke width information for what is drawn before the row or column.
|
|
* The separator line may still be drawn if Panel#defaultRowSeparatorStroke
|
|
* or Panel#defaultColumnSeparatorStroke is a real number (they default to 1).
|
|
* @see Panel#defaultColumnSeparatorStrokeWidth
|
|
* @see Panel#defaultRowSeparatorStrokeWidth
|
|
* @see #separatorPadding
|
|
* @see #separatorStroke
|
|
* @see #separatorDashArray
|
|
* @see #background
|
|
* @since 1.2
|
|
*/
|
|
separatorStrokeWidth: number;
|
|
/**
|
|
* Gets or sets the dash array for dashing the separator line, provided this
|
|
* row or column has a nonzero RowColumnDefinition#separatorStrokeWidth and non-null RowColumnDefinition#separatorStroke.
|
|
*
|
|
* Must be an array of positive numbers and zeroes,
|
|
* or else null to indicate a solid line.
|
|
*
|
|
* For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
|
|
*
|
|
* Setting an array with all zeroes will set the value to null.
|
|
*
|
|
* Default is null, so that this RowColumnDefinition
|
|
* does not supply any stroke dash array information for what is drawn before the row or column.
|
|
* The separator line may still be drawn using dashes if Panel#defaultRowSeparatorDashArray
|
|
* or Panel#defaultColumnSeparatorDashArray is non-null.
|
|
* @see Panel#defaultColumnSeparatorDashArray
|
|
* @see Panel#defaultRowSeparatorDashArray
|
|
* @see #separatorPadding
|
|
* @see #separatorStroke
|
|
* @see #separatorStrokeWidth
|
|
* @see #background
|
|
* @since 1.2
|
|
*/
|
|
separatorDashArray: Array<number>;
|
|
/**
|
|
* Gets or sets the background color for a particular row or column,
|
|
* which fills the entire span of the row or column, including any separatorPadding.
|
|
*
|
|
* The default value is null, which means nothing is drawn in the background of the row or column.
|
|
* @see GraphObject#background
|
|
* @since 1.2
|
|
*/
|
|
background: BrushLike;
|
|
/**
|
|
* Determines whether or not the #background, if there is one, is in front of or behind the separators.
|
|
*
|
|
* The default value is false -- any background is drawn behind any separator lines.
|
|
* @since 1.2
|
|
*/
|
|
coversSeparators: boolean;
|
|
/**
|
|
* Gets or sets how this row or column deals with a Table Panel's extra space.
|
|
* The value must be one of: RowColumnDefinition.None, RowColumnDefinition.ProportionalExtra,
|
|
* or RowColumnDefinition.Default.
|
|
* The default value is RowColumnDefinition.Default.
|
|
* @see Panel#columnSizing
|
|
* @see Panel#rowSizing
|
|
* @see #actual
|
|
* @see #total
|
|
* @see #height
|
|
* @see #width
|
|
*/
|
|
sizing: EnumValue;
|
|
/**
|
|
* This read-only property returns the usable row height or column width, after arrangement, in local coordinates,
|
|
* that objects in this row or column can be arranged within.
|
|
* This does not include #separatorPadding or #separatorStrokeWidth, as #total does.
|
|
*
|
|
* This value gives the row height if #isRow is true;
|
|
* otherwise this gives the column width.
|
|
* The value is meaningless until after the Table Panel using this
|
|
* RowColumnDefinition has been arranged.
|
|
* @see #total
|
|
* @see #height
|
|
* @see #width
|
|
* @see #sizing
|
|
*/
|
|
actual: number;
|
|
/**
|
|
* This read-only property returns the total arranged row height or column width, after arrangement, in local coordinates.
|
|
* This value gives the #actual size plus the #separatorPadding and #separatorStrokeWidth.
|
|
*
|
|
* This value gives the vertical space occupied by the row if #isRow is true;
|
|
* otherwise this gives the horizontal space occupied by the column.
|
|
* The value is meaningless until after the Table Panel using this
|
|
* RowColumnDefinition has been arranged.
|
|
* @see #actual
|
|
* @see #height
|
|
* @see #width
|
|
* @see #sizing
|
|
* @since 1.2
|
|
*/
|
|
total: number;
|
|
/**
|
|
* This read-only property returns the actual arranged row or column starting position, after arrangement, in local coordinates.
|
|
* This value gives the Y position if #isRow is true;
|
|
* otherwise this gives the X position.
|
|
* The value is meaningless until after the Table Panel using this
|
|
* RowColumnDefinition has been arranged.
|
|
* @see Panel#findColumnForLocalX
|
|
* @see Panel#findRowForLocalY
|
|
* @see Panel#leftIndex
|
|
* @see Panel#topIndex
|
|
* @see #index
|
|
*/
|
|
position: number;
|
|
/**
|
|
* Add a data-binding of a property on this object to a property on a data object.
|
|
* @param {Binding} binding
|
|
*/
|
|
bind(binding: Binding): void;
|
|
}
|
|
/**
|
|
* A Shape is a GraphObject that shows a geometric figure.
|
|
* The Geometry determines what is drawn;
|
|
* the properties #fill and #stroke
|
|
* (and other stroke properties) determine how it is drawn.
|
|
*
|
|
* There are generally two types of shapes: Those that use a custom Geometry by setting
|
|
* Shape#geometry, and those that receive an automatically generated Geometry using the value of
|
|
* #figure, #toArrow, or #fromArrow. An explicitly set Geometry always supersedes
|
|
* the figure and arrowhead properties.
|
|
*
|
|
* Some created Shapes:
|
|
* ```js
|
|
* var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
*
|
|
* // A shape with the figure set to RoundedRectangle:
|
|
* $(go.Shape, { figure: "RoundedRectangle", fill: "lightgreen" })
|
|
* // Alternatively:
|
|
* $(go.Shape, "RoundedRectangle", { fill: "lightgreen" })
|
|
*
|
|
* // A shape with a custom geometry, using geometryString:
|
|
* $(go.Shape,
|
|
* { geometry: go.Geometry.parse("M120 0 L80 80 0 50z") })
|
|
*
|
|
* // A shape with a custom geometry, using geometryString:
|
|
* $(go.Shape,
|
|
* { geometryString: "F M120 0 L80 80 0 50z",
|
|
* fill: "lightgreen" })
|
|
*
|
|
* // A common link template, using two shapes,
|
|
* // the first for the link path and the second for the arrowhead
|
|
* myDiagram.linkTemplate =
|
|
* $(go.Link,
|
|
* // The first shape in a link is special, its geometry is set by the Link's routing,
|
|
* // so it does not need a geometry or figure set manually
|
|
* $(go.Shape,
|
|
* { strokeWidth: 2, stroke: 'gray' }),
|
|
* $(go.Shape,
|
|
* { toArrow: "Standard", fill: 'gray', stroke: null })
|
|
* );
|
|
* ```
|
|
* <p class="box">
|
|
* You can see more custom geometry examples and read about geometryString
|
|
* on the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page.</a>
|
|
*
|
|
* When automatically generating a Shape Geometry, the value of #toArrow takes precedence,
|
|
* then #fromArrow, then #figure. If the value of #toArrow or #fromArrow is "None"
|
|
* then it is ignored, and the "None" value of #figure is identical to "Rectangle".
|
|
*
|
|
* All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.
|
|
* You can define your own named figures by calling the static function Shape.defineFigureGenerator.
|
|
* Get a Map of named figures by calling the static function Shape.getFigureGenerators.
|
|
*
|
|
* All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
|
|
* You can define your own named arrowheads by calling the static function Shape.defineArrowheadGeometry.
|
|
* Get a Map of named arrowheads by calling the static function Shape.getArrowheadGeometries.
|
|
*
|
|
* You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.
|
|
*
|
|
* The Shape properties #parameter1, and #parameter2 determine details of the
|
|
* construction of some #figure geometries.
|
|
* Specifically, they often set the #spot1, #spot2 for the Shape.
|
|
* These spots determine the "inner area" of an Auto panel when a Shape is the main object.
|
|
* See the <a href="../../intro/panels.html">Auto Panels section of the Panels Introduction page</a> for more details.
|
|
*
|
|
* Shapes use their geometric bounds when determining hit testing,
|
|
* but use rectangular bounds when participating in (panel) layouts.
|
|
* @extends GraphObject
|
|
* @unrestricted
|
|
*/
|
|
export class Shape extends GraphObject {
|
|
/**
|
|
* A newly constructed Shape has a default #figure of "None",
|
|
* which constructs a rectangular geometry, and is filled and stroked with a black brush.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Gets or sets the Shape's Geometry that defines the Shape's figure.
|
|
* Setting a geometry is not necessary if a #figure is specified,
|
|
* as that will construct a geometry instead.
|
|
*
|
|
* Setting this geometry property will freeze the supplied Geometry.
|
|
*
|
|
* Setting this geometry property always overrides any set figure.
|
|
* The default value is null.
|
|
* @see #geometryString
|
|
*/
|
|
geometry: Geometry | null;
|
|
/**
|
|
* When set, creates a Geometry and normalizes it from a given path string,
|
|
* then sets the #geometry property on this Shape and
|
|
* set the GraphObject#position to the amount computed by normalization.
|
|
* The property getter simply returns the toString value of the #geometry,
|
|
* or the empty string if there is no Geometry value.
|
|
*
|
|
* See the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page</a> for examples.
|
|
* @since 1.1
|
|
*/
|
|
geometryString: string;
|
|
/**
|
|
* Gets or sets the whether the GraphObject#position of this shape denotes
|
|
* the top-left corner of this shape in panel coordinates or the origin of this geometry's coordinate system.
|
|
* Basically, this determines whether the #strokeWidth affects the rendered location.
|
|
* A true value allows multiple shapes to be positioned precisely in a "Position" Panel independent of the stroke width.
|
|
* The default is false.
|
|
* @since 1.1
|
|
*/
|
|
isGeometryPositioned: boolean;
|
|
/**
|
|
* Gets or sets the Brush or string that describes how the geometry is filled when drawn.
|
|
*
|
|
* The default value is "black", causing the shape to be filled with solid black.
|
|
* Any valid CSS string can specify a solid color, and the Brush
|
|
* class can be used to specify a gradient or pattern.
|
|
* A null fill will mean no fill is drawn and the filled portion
|
|
* of the Shape will not be pickable.
|
|
* A "transparent" fill is useful when wanting to allow a shape to be pickable
|
|
* without obscuring any other objects behind it.
|
|
* More information about the syntax of CSS color strings is available at:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.
|
|
*
|
|
* The geometry is filled before the #stroke is drawn.
|
|
*/
|
|
fill: BrushLike;
|
|
/**
|
|
* Gets or sets the Brush or string that describes how the geometry is drawn as if by a pen.
|
|
*
|
|
* The default value is "black", causing the shape to be outlined in black.
|
|
* Any valid CSS string can specify a solid color, and the Brush
|
|
* class can be used to specify a gradient or pattern.
|
|
* A null stroke will mean no stroke is drawn.
|
|
* A "transparent" stroke is useful when wanting to allow a shape to be pickable
|
|
* without obscuring any other objects behind it.
|
|
* More information about the syntax of CSS color strings is available at:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.
|
|
*
|
|
* The stroke is drawn after the geometry is filled with the #fill Brush.
|
|
*/
|
|
stroke: BrushLike;
|
|
/**
|
|
* Gets or sets the thickness of the stroke's pen.
|
|
*
|
|
* Value must be a real number greater than or equal to zero.
|
|
* The default value is 1.0.
|
|
* A value of zero will cause the stroke not to be drawn.
|
|
*
|
|
* The stroke width will affect the GraphObject#measuredBounds and GraphObject#actualBounds of this shape.
|
|
* The stroke is drawn centered on the path of the geometry.
|
|
*/
|
|
strokeWidth: number;
|
|
/**
|
|
* Gets or sets the style for how the ends of the stroke's line are drawn.
|
|
* The value must be one of "butt", "round", or "square". The default is "butt".
|
|
*
|
|
* For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-linecap">Stroke Line Cap (w3.org)</a>.
|
|
*/
|
|
strokeCap: ('butt' | 'round' | 'square');
|
|
/**
|
|
* Gets or sets the type of corner that will be drawn for a stroke at the intersection of two straight segments of the geometry.
|
|
* The value must be one of "miter", "bevel", or "round". The default is "miter".
|
|
*
|
|
* For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-linejoin">Stroke Line Join (w3.org)</a>.
|
|
*/
|
|
strokeJoin: ('miter' | 'bevel' | 'round');
|
|
/**
|
|
* Gets or sets the style for the stroke's mitre limit ratio.
|
|
* The value must be a real number greater than or equal to one.
|
|
* The default is 10.0.
|
|
*
|
|
* For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-miterlimit">Stroke Miter Limit (w3.org)</a>.
|
|
*/
|
|
strokeMiterLimit: number;
|
|
/**
|
|
* Gets or sets the dash array for creating dashed or dotted lines.
|
|
* The value must be an array of positive numbers and zeroes,
|
|
* or else null to indicate a solid line.
|
|
* For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
|
|
* For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-setlinedash">Stroke Line Dash Array (w3.org)</a>.
|
|
*
|
|
* The default value is null, resulting in a line without dashes or dots.
|
|
* Setting an array with all zeroes will set the value to null.
|
|
* @since 1.1
|
|
*/
|
|
strokeDashArray: Array<number> | null;
|
|
/**
|
|
* Gets or sets the offset for dashed lines, used to start the drawing of the dash pattern with some space.
|
|
* The value must be a real non-negative number. The default is zero.
|
|
*
|
|
* For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-linedashoffset">Stroke Line Dash Offset (w3.org)</a>.
|
|
* @since 1.1
|
|
*/
|
|
strokeDashOffset: number;
|
|
/**
|
|
* Gets or sets the figure name, used to construct a Geometry.
|
|
* The value must be a string. The default value is "None".
|
|
*
|
|
* The name can be any case but will always be canonicalized when set. For instance,
|
|
* setting "roundedrectangle" will set the value of figure to "RoundedRectangle".
|
|
* All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.
|
|
*
|
|
* At most one of the following three properties may be set to a non-"None" value at the same time on the same shape:
|
|
* #figure, #toArrow, #fromArrow.
|
|
*
|
|
* You can define your own named figures by calling the static function Shape.defineFigureGenerator.
|
|
*/
|
|
figure: string;
|
|
/**
|
|
* Gets or sets the name of the kind of arrowhead that this shape should take
|
|
* when this shape is an element of a Link.
|
|
* Value must be a string.
|
|
*
|
|
* The default is "None", which means that this Shape is not an arrowhead, causing it to be the default Shape, a large filled Rectangle.
|
|
* If you want to have an arrowhead Shape but sometimes not show an arrowhead, you can set or bind
|
|
* the GraphObject#visible property, or you can set or bind this "toArrow" property to
|
|
* be the empty string.
|
|
* The arrowhead named "", an empty string, will display as nothing.
|
|
*
|
|
* The name can be any case but will always be canonicalized when set. For instance,
|
|
* setting "opentriangle" will set the value of the arrowhead to "OpenTriangle".
|
|
* All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
|
|
*
|
|
* Setting this property may also set the GraphObject#segmentIndex,
|
|
* GraphObject#segmentOrientation, and GraphObject#alignmentFocus properties.
|
|
* This shape should be an element of a Link.
|
|
*
|
|
* At most one of the following three properties may be set to a non-"None" value at the same time on the same shape:
|
|
* #figure, #toArrow, #fromArrow.
|
|
*
|
|
* You can define your own named arrowheads by calling the static function Shape.defineArrowheadGeometry.
|
|
*
|
|
* You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.
|
|
*/
|
|
toArrow: string;
|
|
/**
|
|
* Gets or sets the name of the kind of arrowhead that this shape should take
|
|
* when this shape is an element of a Link.
|
|
* Value must be a string.
|
|
* For bi-directional links the arrowhead name often starts with "Backward...".
|
|
*
|
|
* The default is "None", which means that this Shape is not an arrowhead, causing it to be the default Shape, a large filled Rectangle.
|
|
* If you want to have an arrowhead Shape but sometimes not show an arrowhead, you can set or bind
|
|
* the GraphObject#visible property, or you can set or bind this "toArrow" property to
|
|
* be the empty string.
|
|
* The arrowhead named "", an empty string, will display as nothing.
|
|
*
|
|
* The name can be any case but will always be canonicalized when set. For instance,
|
|
* setting "opentriangle" will set the value of the arrowhead to "OpenTriangle".
|
|
* All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
|
|
*
|
|
* Setting this property may also set the GraphObject#segmentIndex,
|
|
* GraphObject#segmentOrientation, and GraphObject#alignmentFocus properties.
|
|
* This shape should be an element of a Link.
|
|
*
|
|
* At most one of the following three properties may be set to a non-"None" value at the same time on the same shape:
|
|
* #figure, #toArrow, #fromArrow.
|
|
*
|
|
* You can define your own named arrowheads by calling the static function Shape.defineArrowheadGeometry.
|
|
*
|
|
* You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.
|
|
*/
|
|
fromArrow: string;
|
|
/**
|
|
* Gets or sets the top-left Spot used by some Panels for determining where in the shape other objects may be placed.
|
|
* The value is normally Spot.Default, but you may want to set it to override the value that many #figures use.
|
|
*/
|
|
spot1: Spot;
|
|
/**
|
|
* Gets or sets the bottom-right Spot used by some Panels for determining where in the shape other objects may be placed.
|
|
* The value is normally Spot.Default, but you may want to set it to override the value that many #figures use.
|
|
*/
|
|
spot2: Spot;
|
|
/**
|
|
* Gets or sets a property for parameterizing the construction of a Geometry from a figure.
|
|
* The meaning of this property depends on the particular figure.
|
|
* The value must be a number; the default value is NaN.
|
|
*/
|
|
parameter1: number;
|
|
/**
|
|
* Gets or sets a property for parameterizing the construction of a Geometry from a figure.
|
|
* The meaning of this property depends on the particular figure.
|
|
* The value must be a number; the default value is NaN.
|
|
*/
|
|
parameter2: number;
|
|
/**
|
|
* This read-only property returns the natural bounds of this Shape as determined by its #geometry's bounds.
|
|
* The bounds will always include the (0,0) point.
|
|
* If there is no geometry available, it returns a Rect with the #desiredSize,
|
|
* which may have NaN values for the width and height.
|
|
*/
|
|
readonly naturalBounds: Rect;
|
|
/**
|
|
* Gets or sets a GraphObject that is drawn repeatedly along the path of the stroke of this shape.
|
|
* This property may be set to a shared GraphObject; the GraphObject should not belong to any Panel.
|
|
* Note that data bindings do <em>not</em> work in such shared GraphObjects, because they are not part of the visual tree.
|
|
* The default value is null, causing no object to be drawn repeatedly.
|
|
*
|
|
* Typically the object is a small Shape or a Picture.
|
|
* The larger the object is the worse the results will be, especially if the stroke has short segments or sharp curves.
|
|
* The pathPattern object is not part of the measured bounds of the Shape, it is a cosmetic element only.
|
|
*
|
|
* The stroke is always drawn normally -- having a value for this property will draw the value along the stroke as well,
|
|
* so it is commonplace to set the #stroke to "transparent" and the #strokeWidth to be as wide as
|
|
* the height of the GraphObject being drawn along the stroke.
|
|
*
|
|
* Examples of path patterns can be seen in the <a href="../../samples/relationships.html">Relationships sample</a>.
|
|
* @since 1.6
|
|
*/
|
|
pathPattern: GraphObject | null;
|
|
/**
|
|
* Gets or sets how the shape's geometry is proportionally created given its computed size.
|
|
* Possible values are GraphObject.None, GraphObject.Fill, GraphObject.Uniform, and GraphObject.Default.
|
|
* The default is GraphObject.Default, which resolves to GraphObject.Fill for most figures, though
|
|
* some regular figures such as "Circle" and "Square" default to GraphObject.Uniform.
|
|
*/
|
|
geometryStretch: EnumValue;
|
|
/**
|
|
* Gets or sets how frequently this shape should be drawn within a "Grid" or "Graduated" Panel,
|
|
* in multiples of the Panel#gridCellSize or Panel#graduatedTickUnit.
|
|
* The default is 1. Any new value must be a positive integer.
|
|
*/
|
|
interval: number;
|
|
/**
|
|
* Gets or sets the fractional distance along the main shape of a "Graduated" Panel at which this kind of tick should start.
|
|
* The default is 0. Any new value should range from 0 to 1.
|
|
* @since 1.7
|
|
*/
|
|
graduatedStart: number;
|
|
/**
|
|
* Gets or sets the fractional distance along the main shape of a "Graduated" Panel at which this kind of tick should end.
|
|
* The default is 1. Any new value should range from 0 to 1.
|
|
* @since 1.7
|
|
*/
|
|
graduatedEnd: number;
|
|
/**
|
|
* Gets or sets the function to determine which values along a "Graduated" Panel will be skipped.
|
|
* The default is null and doesn't skip any ticks.
|
|
*
|
|
* The function takes a number argument, a value between Panel#graduatedMin and Panel#graduatedMax.
|
|
* The function will return a boolean, whether the tick will be skipped at the value of the argument.
|
|
* @since 2.0
|
|
*/
|
|
graduatedSkip: ((val: number) => boolean) | null;
|
|
/**
|
|
* This static function returns a read-only Map of named geometry generators.
|
|
* The keys are figure names.
|
|
* The values are either string synonyms for other figure names, or functions
|
|
* that take a Shape and a width and a height and return a Geometry.
|
|
*
|
|
* The predefined shape figures can be seen in the <a href="../../samples/shapes.html">Shapes sample</a>.
|
|
* @return {Map.<string,string|function(Shape, number, number):Geometry>}
|
|
* @since 1.5
|
|
*/
|
|
static getFigureGenerators(): Map<string, string | ((a: Shape, b: number, c: number) => Geometry)>;
|
|
/**
|
|
* This static function defines a named figure geometry generator for Shapes.
|
|
* Once this is called one can use the name as a value for Shape#figure.
|
|
*
|
|
* The first argument is the new figure name and must be a non-empty string that starts with a capital letter and that is not "None".
|
|
*
|
|
* If the second argument is a string this call defines a synonym for an existing figure generator.
|
|
* Do not define cycles of synonyms -- the behavior will be undefined.
|
|
*
|
|
* If the second argument is a function,
|
|
* the Geometry generator function's first argument is the Shape for which the function is producing a Geometry.
|
|
* But this Shape argument may be null in some circumstances.
|
|
* The second and third arguments are the desired width and height.
|
|
* These will always be finite non-negative numbers.
|
|
* The function may look at the Shape#parameter1 and Shape#parameter2 properties, which may be NaN,
|
|
* to decide what geometry to create for the figure given its intended width and height.
|
|
*
|
|
* The function must return a Geometry; you may want to set Geometry#spot1 and Geometry#spot2 on it
|
|
* to indicate where content should be placed within the figure when using an "Auto" Panel.
|
|
* For some figures you may also want to set Geometry#defaultStretch to GraphObject.Uniform
|
|
* in order to maintain the geometry's aspect ratio within the Shape.
|
|
*
|
|
* Generated figures must create a Geometry that is not larger than the supplied with and height. Doing so will signal an error.
|
|
* @param {string} name a capitalized figure name ("RoundedRectangle"); must not be "" or "None"
|
|
* @param {string|function(Shape,number,number):Geometry} func A function that takes (Shape,width,height) and returns a Geometry,
|
|
* or an existing figure generator name for which the new name will be a synonym.
|
|
* @since 1.5
|
|
*/
|
|
static defineFigureGenerator(name: string, func: string | ((shape: Shape, width: number, height: number) => Geometry)): void;
|
|
/**
|
|
* This static function returns a read-only Map of named arrowhead geometries.
|
|
* The keys are arrowhead names.
|
|
* The values are Geometry objects.
|
|
*
|
|
* The predefined arrowheads can be seen in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
|
|
* @return {Map.<string,Geometry>}
|
|
* @since 1.5
|
|
*/
|
|
static getArrowheadGeometries(): Map<string, Geometry>;
|
|
/**
|
|
* This static function defines a named arrowhead geometry.
|
|
* Once this is called one can use the name as a value for Shape#toArrow or Shape#fromArrow.
|
|
*
|
|
* The first argument is the new arrowhead name and must be a non-empty string that starts with a capital letter and that is not "None".
|
|
*
|
|
* If the second argument is a string, it is converted into a Geometry by calling
|
|
* `go.Geometry.parse(pathstr, false)`,
|
|
* which may throw an error if there are problems with the syntax of the string.
|
|
* @param {string} name a capitalized arrowhead name ("OpenTriangle"); must not be "" or "None"
|
|
* @param {Geometry|string} pathstr a Geometry or a Geometry path string, e.g. "m 0,0 l 8,4 -8,4"
|
|
* @since 1.5
|
|
*/
|
|
static defineArrowheadGeometry(name: string, pathstr: Geometry | string): void;
|
|
}
|
|
/**
|
|
* A TextBlock is a GraphObject that displays a #text string in a given #font.
|
|
*
|
|
* The size and appearance of the text is specified by #font,
|
|
* which takes a well-formed CSS string as its value.
|
|
* The order of the CSS properties given is important for cross-browser compatibility,
|
|
* and should be given in this order:
|
|
*
|
|
* <em>"font-style font-variant font-weight font-size font-family"</em>
|
|
*
|
|
* For example, "Italic small-caps bold 32px Georgia, Serif" is a valid font string
|
|
* using every CSS font property. Note that not all browsers may support every property.
|
|
*
|
|
* Text is drawn using the #stroke brush, which may be any CSS color string or a Brush.
|
|
*
|
|
* Some created TextBlocks:
|
|
* ```js
|
|
* var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
*
|
|
* // A TextBlock with text and stroke properties set:
|
|
* $(go.TextBlock, { text: "Hello World", stroke: "gray" })
|
|
* // Alternatively:
|
|
* $(go.TextBlock, "Hello World", { stroke: "gray" })
|
|
* ```
|
|
*
|
|
* TextBlocks typically receive a natural size based on their text and font strings,
|
|
* but often a width is given in order to cause the text to wrap at a certain place.
|
|
* In order for wrapping to occur, the #wrap property must not be TextBlock.None.
|
|
*
|
|
* TextBlocks can be edited by users using the TextEditingTool.
|
|
* The HTMLInfo that a given TextBlock uses as its text editor can be customized
|
|
* by setting the #textEditor property. For an example of custom text editing tool use,
|
|
* see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.
|
|
* <p class="boxread">
|
|
* For examples of TextBlock possibilities and functionality,
|
|
* see the <a href="../../intro/textBlocks.html">Introduction page on TextBlocks</a>.
|
|
* @extends GraphObject
|
|
* @unrestricted
|
|
*/
|
|
export class TextBlock extends GraphObject {
|
|
/**
|
|
* A newly constructed TextBlock has no string to show; if it did,
|
|
* it would draw the text, wrapping if needed, in the default font using a black stroke.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
static getEllipsis(): string;
|
|
/**
|
|
* Undocumented
|
|
* @param {string} val
|
|
*/
|
|
static setEllipsis(val: string): void;
|
|
/**
|
|
* Gets the function that, given the TextBlock and numerical text height, computes the position to draw the baseline of a line of text in all TextBlocks.
|
|
* By default this is null and default behavior returns `(textHeight * 0.75)`.
|
|
*
|
|
* Note: This affects drawing only, and does not change TextBlock measurement calculations.
|
|
* @return {(textBlock: TextBlock, textHeight: number) => number | null}
|
|
* @since 2.0
|
|
*/
|
|
static getBaseline(): ((textBlock: TextBlock, textHeight: number) => number) | null;
|
|
/**
|
|
* Sets the function that, given the TextBlock and numerical text height, computes the position to draw the baseline of a line of text in all TextBlocks.
|
|
*
|
|
* Note: This affects drawing only, and does not change TextBlock measurement calculations.
|
|
* @param {(textBlock: TextBlock, textHeight: number) => number | null} value
|
|
* @since 2.0
|
|
*/
|
|
static setBaseline(value: ((textBlock: TextBlock, textHeight: number) => number) | null): void;
|
|
/**
|
|
* Gets the function that, given the TextBlock and numerical text height, computes the position to draw the underline of a line of text in all TextBlocks.
|
|
* By default this is null and default behavior returns `(textHeight * 0.75)`.
|
|
*
|
|
* Note: This affects drawing only, and does not change TextBlock measurement calculations.
|
|
* @return {(textBlock: TextBlock, textHeight: number) => number | null}
|
|
* @since 2.0
|
|
*/
|
|
static getUnderline(): ((textBlock: TextBlock, textHeight: number) => number) | null;
|
|
/**
|
|
* Sets the function that, given the TextBlock and numerical text height, computes the position to draw the underline of a line of text in all TextBlocks.
|
|
*
|
|
* Note: This affects drawing only, and does not change TextBlock measurement calculations.
|
|
* @param {(textBlock: TextBlock, textHeight: number) => number | null} value
|
|
* @since 2.0
|
|
*/
|
|
static setUnderline(value: ((textBlock: TextBlock, textHeight: number) => number) | null): void;
|
|
/**
|
|
* Used as a value for TextBlock#wrap, the TextBlock will not wrap its text.
|
|
* @constant
|
|
*/
|
|
static None: EnumValue;
|
|
/**
|
|
* Used as a value for TextBlock#wrap, the TextBlock will wrap text, making the width of
|
|
* the TextBlock equal to the width of the longest line.
|
|
* @constant
|
|
*/
|
|
static WrapFit: EnumValue;
|
|
/**
|
|
* Used as the default value for TextBlock#wrap, the TextBlock will wrap text and the width of
|
|
* the TextBlock will be the desiredSize's width, if any.
|
|
* @constant
|
|
*/
|
|
static WrapDesiredSize: EnumValue;
|
|
/**
|
|
* Used a a value for TextBlock#wrap, the TextBlock will attempt to wrap at each character, allowing
|
|
* breaks within "words."
|
|
* @since 2.0
|
|
* @constant
|
|
*/
|
|
static WrapBreakAll: EnumValue;
|
|
/**
|
|
* Used as the default value for TextBlock#overflow: if the width is too small to display all text,
|
|
* the TextBlock will clip.
|
|
* @constant
|
|
* @since 1.4
|
|
*/
|
|
static OverflowClip: EnumValue;
|
|
/**
|
|
* Used as a value for TextBlock#overflow: if the width is too small to display all text,
|
|
* the TextBlock will display an ellipsis.
|
|
* @constant
|
|
* @since 1.4
|
|
*/
|
|
static OverflowEllipsis: EnumValue;
|
|
/**
|
|
* Gets or sets the current font settings.
|
|
* The font property must be a valid CSS string describing a font.
|
|
* The font string can accept several CSS properties but they must be
|
|
* in a specific order in order to render correctly across all browsers:
|
|
*
|
|
* `"font-style font-variant font-weight font-size font-family"`
|
|
*
|
|
* For example, `"Italic small-caps bold 32px Georgia, Serif"` is a valid font string
|
|
* using every CSS font property. Not every browser can render every font option.
|
|
* For more information about CSS font syntax, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font">CSS fonts (mozilla.org)</a>.
|
|
*
|
|
* If your Node sizes depend on TextBlocks, it is best to ensure any custom fonts you are using are finished loading before you load your Diagram.
|
|
* This will ensure nodes are sized appropriately for the initial Diagram layout.
|
|
*
|
|
* The default font is "13px sans-serif".
|
|
*/
|
|
font: string;
|
|
/**
|
|
* Undocumented
|
|
* @param {string} font
|
|
* @return {boolean}
|
|
*/
|
|
static isValidFont(font: string): boolean;
|
|
/**
|
|
* Gets or sets the TextBlock's text string. The default is an empty string.
|
|
* The text of a TextBlock, along with the values of #font, #wrap,
|
|
* #isMultiline and sizing restrictions are what naturally determine
|
|
* the size of the TextBlock.
|
|
*
|
|
* The text in textblocks can include manual line-breaks by using the character escape, `\n`.
|
|
*
|
|
* Leading and trailing whitespace is eliminated in each line of TextBlock text.
|
|
*
|
|
* If #editable is set to true, users can edit textblocks with the TextEditingTool.
|
|
*/
|
|
text: string;
|
|
/**
|
|
* Gets or sets the alignment location in the TextBlock's given space.
|
|
* The only possible values are `"start"`, `"end"`, `"left"`, `"right"`, and `"center"`.
|
|
* Any other value is invalid.
|
|
*
|
|
* This property is most pertinent when the TextBlock has multiple lines of text,
|
|
* or when the TextBlock is given a size that differs from the text's natural size (such as with #desiredSize).
|
|
*
|
|
* In left-to-right writing systems, `"start"` and `"left"` are synonymous, as are `"end"` and `"right"`.
|
|
*
|
|
* The default is `"start"`.
|
|
* @see #verticalAlignment
|
|
*/
|
|
textAlign: ('start' | 'end' | 'left' | 'right' | 'center');
|
|
/**
|
|
* Gets or sets how the TextBlock is displayed: Either normally or with a Horizontal or Vertical flip or both.
|
|
*
|
|
* Possible values are GraphObject.None, GraphObject.FlipHorizontal, GraphObject.FlipVertical, or GraphObject.FlipBoth.
|
|
* The default is GraphObject.None.
|
|
* @since 2.0
|
|
*/
|
|
flip: EnumValue;
|
|
/**
|
|
* Gets or sets the vertical alignment Spot of this TextBlock, used when
|
|
* the TextBlock has more available vertical space than it needs to draw all lines.
|
|
*
|
|
* The default value is Spot.Top, which aligns the TextBlock to the top of its available space.
|
|
*
|
|
* The #textAlign is often used along with this property to specify
|
|
* where the should be positioned in its available space.
|
|
*
|
|
* This does not affect TextBlock coordinates or bounds, it only affects where text is drawn within the given area.
|
|
* @see #textAlign
|
|
* @since 1.7
|
|
*/
|
|
verticalAlignment: Spot;
|
|
/**
|
|
* This read-only property returns the natural bounds of this TextBlock in local coordinates,
|
|
* as determined by its #font and #text string, and optionally its #desiredSize.
|
|
*/
|
|
readonly naturalBounds: Rect;
|
|
/**
|
|
* Gets or sets whether or not the text displays multiple lines or embedded newlines.
|
|
* If this is false, all characters including and after the first newline will be omitted.
|
|
* The default is true.
|
|
* @see #maxLines
|
|
*/
|
|
isMultiline: boolean;
|
|
/**
|
|
* Gets or sets whether or not the text is underlined.
|
|
* The default is false.
|
|
* @see #isStrikethrough
|
|
* @since 1.2
|
|
*/
|
|
isUnderline: boolean;
|
|
/**
|
|
* Gets or sets whether or not the text has a strikethrough line (line-through).
|
|
* The default is false.
|
|
* @see #isUnderline
|
|
* @since 1.2
|
|
*/
|
|
isStrikethrough: boolean;
|
|
/**
|
|
* Gets or sets whether the text should be wrapped if it is too long to fit on one line.
|
|
*
|
|
* Possible values are TextBlock.WrapDesiredSize, TextBlock.WrapFit, TextBlock.WrapBreakAll,
|
|
* and TextBlock.None.
|
|
*
|
|
* The default value is TextBlock.WrapDesiredSize.
|
|
* @see #overflow
|
|
*/
|
|
wrap: EnumValue;
|
|
/**
|
|
* Gets or sets how text that is too long to display should be handled.
|
|
*
|
|
* Possible values are TextBlock.OverflowClip and TextBlock.OverflowEllipsis.
|
|
* For OverflowEllipsis to work, you must constrain the available size of the TextBlock in some way,
|
|
* such as setting #wrap to TextBlock.None,
|
|
* or limiting the number of lines with #maxLines or a height constraint.
|
|
*
|
|
* The default value is TextBlock.OverflowClip.
|
|
* @see #wrap
|
|
* @since 1.4
|
|
*/
|
|
overflow: EnumValue;
|
|
/**
|
|
* Gets or sets the Brush or string that describes the stroke (color) of the text that is drawn.
|
|
*
|
|
* The default value is `"black"`.
|
|
* Any valid CSS string can specify a solid color, and the Brush
|
|
* class can be used to specify a gradient or pattern.
|
|
* More information about the syntax of CSS color strings is available at:
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.
|
|
*/
|
|
stroke: BrushLike;
|
|
/**
|
|
* This read-only property returns the total number of lines in this TextBlock, including lines created
|
|
* from embedded newlines (`\n`), #wrapping, and #maxLines.
|
|
*
|
|
* This value may be meaningless before the TextBlock is measured.
|
|
*/
|
|
readonly lineCount: number;
|
|
/**
|
|
* Gets or sets whether or not this TextBlock allows in-place editing of the #text
|
|
* string by the user with the help of the TextEditingTool.
|
|
* The default is false.
|
|
*
|
|
* See also Part#textEditable.
|
|
*/
|
|
editable: boolean;
|
|
/**
|
|
* Gets or sets the HTMLInfo that this TextBlock uses as its text editor in the TextEditingTool.
|
|
* If null, the TextBlock will use the default text editor of the TextEditingTool.
|
|
* The default is null.
|
|
* The value should be set to an instance of HTMLInfo.
|
|
*
|
|
* As of 2.0 setting this to an HTML Element is no longer supported.
|
|
*
|
|
* For example usage, see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.
|
|
*/
|
|
textEditor: HTMLInfo | null;
|
|
/**
|
|
* Gets or sets the function to call if a text edit made with the TextEditingTool is invalid.
|
|
* The default is null.
|
|
*/
|
|
errorFunction: ((tool: TextEditingTool, oldString: string, newString: string) => void) | null;
|
|
/**
|
|
* Gets or sets how frequently this text should be drawn within a "Graduated" Panel,
|
|
* in multiples of the Panel#graduatedTickUnit.
|
|
* The default is 1. Any new value must be a positive integer.
|
|
* @since 1.7
|
|
*/
|
|
interval: number;
|
|
/**
|
|
* Gets or sets the fractional distance along the main shape of a "Graduated" Panel at which this text should start.
|
|
* The default is 0; the value should range from 0 to 1.
|
|
* @since 1.7
|
|
*/
|
|
graduatedStart: number;
|
|
/**
|
|
* Gets or sets the fractional distance along the main shape of a "Graduated" Panel at which this kind of tick text should end.
|
|
* The default is 1; the value should range from 0 to 1.
|
|
* @since 1.7
|
|
*/
|
|
graduatedEnd: number;
|
|
/**
|
|
* Gets or sets the function to convert from a value along a "Graduated" Panel to a string.
|
|
* The default returns a string representing the value rounded to at most 2 decimals.
|
|
*
|
|
* The function takes a number argument, a value between Panel#graduatedMin and Panel#graduatedMax.
|
|
* The function will return a string, the text that will appear at the value of the argument.
|
|
* @since 1.7
|
|
*/
|
|
graduatedFunction: ((val: number) => string) | null;
|
|
/**
|
|
* Gets or sets the function to determine which values along a "Graduated" Panel will be skipped.
|
|
* The default is null and doesn't skip any text labels.
|
|
*
|
|
* The function takes a number argument, a value between Panel#graduatedMin and Panel#graduatedMax.
|
|
* The function will return a boolean, whether the text label will be skipped at the value of the argument.
|
|
* @since 2.0
|
|
*/
|
|
graduatedSkip: ((val: number) => boolean) | null;
|
|
/**
|
|
* Gets or sets the predicate that determines whether or not a user-edited string of text is valid.
|
|
* If this is non-null, the predicate is called in addition to any TextEditingTool#textValidation predicate.
|
|
* See TextEditingTool#isValidText for more details.
|
|
*
|
|
* ```js
|
|
* function(textBlock, oldString, newString)
|
|
* ```
|
|
*
|
|
* The default predicate is null, which is equivalent to simply returning true.
|
|
*
|
|
* The function, if supplied, must not have any side-effects, and must return true or false.
|
|
* @see TextEditingTool#textValidation
|
|
*/
|
|
textValidation: ((thisTextBlock: TextBlock, oldString: string, newString: string) => boolean) | null;
|
|
/**
|
|
* Gets or sets the function that is called after the TextBlock's text has been edited by the TextEditingTool.
|
|
* - The first argument is a reference to this TextBlock.
|
|
* - The second argument is the previous text, before editing.
|
|
* - The third argument is the current text, which is also TextBlock.text.
|
|
*
|
|
* ```js
|
|
* function(textBlock, previousText, currentText)
|
|
* ```
|
|
*
|
|
* The default value is null -- no function is called.
|
|
* @since 1.7
|
|
*/
|
|
textEdited: ((thisTextBlock: TextBlock, oldString: string, newString: string) => void) | null;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
spacingAbove: number;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
spacingBelow: number;
|
|
/**
|
|
* Gets or sets the maximum number of lines that this TextBlock can display.
|
|
* Value must be a greater than zero whole number or `Infinity`.
|
|
* The default is `Infinity`.
|
|
*
|
|
* Modifying this value may modify the computed height of the TextBlock.
|
|
* If maxLines is set, the value of #lineCount will never be larger than maxLines.
|
|
* @see #isMultiline
|
|
* @since 1.5
|
|
*/
|
|
maxLines: number;
|
|
/**
|
|
* Gets or sets the an array of possible choices for a custom TextEditingTool.
|
|
* The value must be an array of strings.
|
|
*
|
|
* The default value is null.
|
|
* For example usage, see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.
|
|
* @since 1.7
|
|
*/
|
|
choices: Array<string> | null;
|
|
}
|
|
/**
|
|
* A Picture is a GraphObject that shows an image, video-frame, or Canvas element.
|
|
*
|
|
* You can specify what to show by either setting the #source URL property
|
|
* to a URL string or the #element property to an HTMLImageElement,
|
|
* HTMLCanvasElement, or HTMLVideoElement.
|
|
*
|
|
* If a #source URL is set, the Picture will automatically create a corresponding
|
|
* HTMLImageElement and retain a reference to it in memory. If multiple Pictures specify
|
|
* the same #source URL then they will all refer to the same HTMLImageElement.
|
|
*
|
|
* Some created Pictures:
|
|
* ```js
|
|
* var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
*
|
|
* // A shape with the figure set to "example.png". It will show a gray area until the image is loaded:
|
|
* $(go.Picture, { source: "example.png", background: "gray", width: 50, height: 50 })
|
|
* // Alternatively:
|
|
* $(go.Picture, "example.png", { background: "gray", width: 50, height: 50 })
|
|
* ```
|
|
*
|
|
* If an element is not completely loaded during Diagram initialization, a redraw may occur,
|
|
* and if an image's size is not known before loading, the containing Part of this Picture
|
|
* may be resized, causing side effects such as layouts.
|
|
* This can be avoided by knowing the size of the image beforehand,
|
|
* and setting the Picture's GraphObject#desiredSize.
|
|
*
|
|
* With some images (notably sprite sheets) only a portion of the image is expected to be drawn.
|
|
* The #sourceRect property allows the programmer to specify a rectangular area of
|
|
* the source image that the Picture should display.
|
|
*
|
|
* The #imageStretch property allows an image to be resized inside of its bounding box.
|
|
* This property does not change the size of the Picture element, it only resizes or re-scales
|
|
* the image to fit (or not) in its bounds.
|
|
* <p class="boxread">
|
|
* For examples of sizing and #imageStretch,
|
|
* see the <a href="../../intro/pictures.html">Introduction page on Pictures</a>.
|
|
*
|
|
* The #errorFunction property allows one to set a function to call when a source fails to load.
|
|
* This is useful in instances where images cannot be guaranteed to work, such as with
|
|
* user specified input. The error function can set the #source to a known good value,
|
|
* but care should be taken to avoid error infinite loops when doing so.
|
|
* @extends GraphObject
|
|
* @unrestricted
|
|
*/
|
|
export class Picture extends GraphObject {
|
|
/**
|
|
* The constructor creates a picture that shows nothing until the
|
|
* #source or #element is specified. It is also common to specify the
|
|
* GraphObject#desiredSize to make sure that the picture's size is known
|
|
* before the image is loaded asynchronously, so that layouts do not need to be recomputed.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Undocumented
|
|
* @param {string=} url optional, clear only a specified URL from the image cache. If relative urls are used as Picture sources, this must be in the same format.
|
|
*/
|
|
static clearCache(url?: string): void;
|
|
/**
|
|
* Gets or sets the Picture's HTML element that provides some kind of visual image.
|
|
*
|
|
* The default value is null.
|
|
* This can be a HTMLImageElement, HTMLVideoElement, or HTMLCanvasElement.
|
|
* If an image, this element must have its source (src) attribute defined.
|
|
* Setting this does not set the Picture#source attribute and that attribute may be unknowable.
|
|
*/
|
|
element: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | null;
|
|
/**
|
|
* Gets or sets the Picture's source URL, which can be any valid image (png, jpg, gif, etc) URL.
|
|
*
|
|
* The default value is the empty string, which specifies no image source.
|
|
* Setting this attribute creates an HTMLImageElement and sets the Picture#element
|
|
* attribute to that element.
|
|
* Setting the source of multiple Pictures to the same URL will cause only one HTMLImageElement
|
|
* to be created and shared.
|
|
* It is commonplace to either specify a constant URL or to data bind this property to some data property,
|
|
* perhaps using a conversion function in order to produce a proper URL.
|
|
*
|
|
* To avoid remeasuring and rearranging Parts as images load asynchronously,
|
|
* be sure to set the GraphObject#desiredSize
|
|
* (or GraphObject#width and GraphObject#height) to fixed values
|
|
*
|
|
* For cross-browser support of SVG sources additional care is needed.
|
|
* See the final section of the <a href="../../intro/pictures.html">Introduction page on Pictures</a>.
|
|
*/
|
|
source: string;
|
|
/**
|
|
* Attempts to reload a Picture#source image. This can be useful if the content on a server has changed, or was missing before.
|
|
* If a new image is loaded, this Picture may remeasure and/or redraw.
|
|
*
|
|
* This should normally be called within a transaction.
|
|
* @since 2.1
|
|
*/
|
|
reloadSource(): void;
|
|
/**
|
|
* Redraws a Picture, which can be useful if the backing #element is an HTML Canvas or HTML Video that has changed.
|
|
* This will not attempt to *reload* any image. If you need to do that, call #reloadSource.
|
|
*
|
|
* This does not need to be called within a transaction, and will not re-measure anything.
|
|
* @since 2.1
|
|
*/
|
|
redraw(): void;
|
|
/**
|
|
* Gets or sets a function that returns a value for image.crossOrigin.
|
|
*
|
|
* The default value is null, which will not set a value for image.crossOrigin.
|
|
* Set this property to a function that returns "anonymous" or "use-credentials"
|
|
* if you want images to complete a cross-origin request.
|
|
* Example:
|
|
* ```js
|
|
* $(go.Picture,
|
|
* { width: 64, height: 64 },
|
|
* { sourceCrossOrigin: function(pict) { return "use-credentials"; } },
|
|
* new go.Binding("source", "path"))
|
|
* ```
|
|
* @since 1.5
|
|
*/
|
|
sourceCrossOrigin: ((a: Picture) => string) | null;
|
|
/**
|
|
* Gets or sets the rectangular area of the source image that this picture should display.
|
|
* This is only common with sprite maps and image tables.
|
|
*
|
|
* The value must be of type Rect.
|
|
* The default value is Rect(NaN, NaN, NaN, NaN), which means the whole source image should be used.
|
|
*/
|
|
sourceRect: Rect;
|
|
/**
|
|
* Gets or sets how the Picture's image is stretched within its bounding box.
|
|
* Some images will be a different aspect ratio than their given size or #desiredSize.
|
|
* This property will never change the size of the Picture itself,
|
|
* only the size of the image that is drawn in the Picture's #actualBounds.
|
|
*
|
|
* Possible values are GraphObject.Fill, GraphObject.Uniform,
|
|
* GraphObject.UniformToFill, and GraphObject.None.
|
|
* The default is GraphObject.Fill.
|
|
* @see #imageAlignment
|
|
*/
|
|
imageStretch: EnumValue;
|
|
/**
|
|
* Gets or sets how the Picture is displayed: Either normally or with a Horizontal or Vertical flip or both.
|
|
*
|
|
* Possible values are GraphObject.None, GraphObject.FlipHorizontal, GraphObject.FlipVertical, or GraphObject.FlipBoth.
|
|
* The default is GraphObject.None.
|
|
* @since 2.0
|
|
*/
|
|
flip: EnumValue;
|
|
/**
|
|
* Gets or sets the Spot to align the source image to, when the source image
|
|
* is smaller than the Picture. This is only relevant when
|
|
* the #imageStretch property value is not go.GraphObject.Fill.
|
|
*
|
|
* This does not affect Picture coordinates or bounds, it only affects what is drawn within the given area.
|
|
* The default value is Spot.Center.
|
|
* @see #imageStretch
|
|
* @since 1.7
|
|
*/
|
|
imageAlignment: Spot;
|
|
/**
|
|
* Gets or sets the function to call if an image fails to load.
|
|
* The arguments to this function are this Picture and the HTMLImageElement's "error" (onerror) Event.
|
|
* The default value is null, meaning that no specific action occurs when there is an error loading an image.
|
|
* @see #successFunction
|
|
*/
|
|
errorFunction: ((a: Picture, b: Event) => void) | null;
|
|
/**
|
|
* Gets or sets the function to call when an image loads successfully.
|
|
* The arguments to this function are this Picture and the HTMLImageElement's "load" Event.
|
|
* The default value is null, meaning that no specific action occurs when an image finishes loading.
|
|
* @see #errorFunction
|
|
* @since 1.7
|
|
*/
|
|
successFunction: ((a: Picture, b: Event) => void) | null;
|
|
/**
|
|
* This read-only property returns the natural size of this picture as determined by its source's width and height.
|
|
* The value is initially NaN x NaN until the picture has been measured.
|
|
* It will use the #element's `naturalWidth` and `naturalHeight` if available.
|
|
*/
|
|
readonly naturalBounds: Rect;
|
|
}
|
|
/**
|
|
* This is the base class for all user-manipulated top-level objects.
|
|
* Because it inherits from Panel, it is automatically a visual container
|
|
* of other GraphObjects.
|
|
* Because it thus also inherits from GraphObject, it also has properties such as
|
|
* GraphObject#actualBounds, GraphObject#contextMenu, and GraphObject#visible.
|
|
*
|
|
* If you just want an object that users can select and manipulate,
|
|
* you can create an instance of this class.
|
|
*
|
|
* If you want an object that also supports being connected by links to other objects,
|
|
* use the Node class, which inherits from Part.
|
|
* Create those connections by using instances of the Link class.
|
|
*
|
|
* If you want a node that logically contains a subgraph of nodes and links,
|
|
* use the Group class, which inherits from Node.
|
|
*
|
|
* If you want an object that decorates another Part, without having to modify that Part,
|
|
* use the Adornment class.
|
|
* Adornments do not support linking or grouping or being selected.
|
|
*
|
|
* You can construct a Part, add GraphObjects to it programmatically,
|
|
* and then add the part to a diagram by calling Diagram#add.
|
|
* However it is commonplace to add data to a model by setting its Model#nodeDataArray or calling Model#addNodeData,
|
|
* or for Links, setting the GraphLinksModel#linkDataArray or calling GraphLinksModel#addLinkData.
|
|
* Such actions will cause a diagram that is displaying the model to copy a template,
|
|
* which is a Part that may have data Bindings, and add the new part to the diagram.
|
|
* The Panel#data property will refer to that data object in the model.
|
|
*
|
|
* Some examples of adding Parts to a Diagram:
|
|
* ```js
|
|
* // A simple Part template
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Part, "Horizontal",
|
|
* $(go.Shape, "Circle", { width: 20, height: 20 }),
|
|
* $(go.TextBlock, "Hello World")
|
|
* );
|
|
* // Node templates can be either Nodes, or simple Parts
|
|
* // (But not Groups, Adornments, or Links)
|
|
*
|
|
* // Adds copies of the nodeTemplate bound to the specified node data:
|
|
* myDiagram.model.nodeDataArray =
|
|
* [
|
|
* { key: "Alpha" },
|
|
* { key: "Beta" }
|
|
* ];
|
|
*
|
|
* // Adds one copy of the nodeTemplate bound to the given node data:
|
|
* myDiagram.model.addNodeData( { key: "Gamma" } );
|
|
* ```
|
|
* <p class="boxread">
|
|
* See the <a href="../../intro/usingModels.html">Introduction on using Models</a>
|
|
* for examples and more information.
|
|
* <h3>Layers and Z-ordering</h3>
|
|
*
|
|
* Parts added to a Diagram exist in one of the Diagram's Layers.
|
|
* You can specify which layer the part should be in by setting #layerName.
|
|
* Parts cannot be nested in the visual tree -- they cannot be added to other Parts of Panels.
|
|
*
|
|
* Parts can be individually z-ordered within a layer by setting #zOrder.
|
|
* Parts within the same layer that have a higher zOrder number will be drawn above parts with a lower number.
|
|
* <h3>Size and Position</h3>
|
|
*
|
|
* The size and position of a part are given by its GraphObject#actualBounds.
|
|
* The size is determined by the GraphObjects that are elements inside this part.
|
|
* You can change the position by setting GraphObject#position or Part#location.
|
|
*
|
|
* The "location" of a part is commonly the same as its "position".
|
|
* The "position" is always the point that is at the top-left corner of the area occupied by the part.
|
|
* But the "location" may be different from the "position" if you want to think of the part as being "at" a different spot in the part.
|
|
* For example, you might want the "location" to be at the center of a Picture that has a TextBlock title of arbitrary size.
|
|
* In this case you would set the #locationSpot to be Spot.Center and the #locationObjectName
|
|
* to be the name of the Picture element in your Part.
|
|
*
|
|
* A part may be selected or de-selected by setting its #isSelected property.
|
|
* This may also happen due to a call to Diagram#select or other operations that change the selection.
|
|
* The user may change this property as part of the operation of the ClickSelectingTool,
|
|
* due to the user's mouse click, if the part is #selectable.
|
|
* <h3>Ability Properties (Permissions)</h3>
|
|
*
|
|
* There are many properties named "...able", that control what operations the user may perform on this part.
|
|
* These properties correspond to the similarly named properties on Diagram and Layer that govern the
|
|
* behavior for all parts in all layers or for all parts in the given layer.
|
|
* For example, the Part#copyable property corresponds to the properties Diagram#allowCopy and Layer#allowCopy.
|
|
*
|
|
* For each of these "ability" properties there is a corresponding "can..." predicate.
|
|
* For example, the Part#canCopy predicate is false if any of the three previously named properties is false.
|
|
* Commands and tools will normally call these predicates rather than just looking at Part properties.
|
|
* <p class="boxread">
|
|
* For more discussion about permissions, please read: <a href="../../intro/permissions.html">Permissions</a>.
|
|
*
|
|
* As previously mentioned, each Diagram supports the notion of selected parts.
|
|
* One way of displaying that a part is selected is by modifying the part.
|
|
* You can set the #selectionChanged property to be a function that is called when the value of #isSelected has changed;
|
|
* it is passed the Part as the first argument.
|
|
* The function can modify the color of one or more GraphObjects in the visual tree of that Part.
|
|
* Or perhaps it could toggle the GraphObject#visible property of an object that is normally hidden when the part is not selected.
|
|
*
|
|
* The Part class also supports showing separate visual objects for a part when it gets selected.
|
|
* These visuals are typically used to show that the part is selected ("selection handles")
|
|
* or are used to allow the user to manipulate or modify the part with a tool ("tool handles").
|
|
* These handles are instances of Adornments.
|
|
* The #updateAdornments method is responsible for showing or hiding adornments,
|
|
* normally depending on whether the part is selected.
|
|
*
|
|
* When the #selectionAdorned property is true, a selected part automatically gets an Adornment created for it.
|
|
* By default the selection adornment is just a simple blue box around the Part, and a blue shape following the route of a selected Link.
|
|
* However you can set the #selectionAdornmentTemplate to an arbitrarily complex Adornment.
|
|
* This way it can show more information or buttons for executing various commands when the user selects a Part.
|
|
*
|
|
* Tool handles are shown for those mode-less mouse-down tools that need it.
|
|
* The process of updating adornments for a part will call Tool#updateAdornments on each tool in ToolManager#mouseDownTools.
|
|
* Most tools might not need special tool handles.
|
|
* But, for example, ResizingTool naturally will want to create an adornment with eight resize handles
|
|
* positioned at the corners and at the middles of the sides of the selected node's visual element,
|
|
* if the node has its #canResize function returning true.
|
|
*
|
|
* One may not always want the whole Part to get the selection handle or all tool handles.
|
|
* Sometimes one wants to emphasize selection by highlighting a particular element within the part's visual tree.
|
|
* This can be achieved by setting the #selectionObjectName property,
|
|
* and making sure the desired element has the same GraphObject#name property value.
|
|
* <p class="boxread">
|
|
* For more discussion about selection, see <a href="../../intro/selection.html">Selection</a>.
|
|
*
|
|
* Similarly the #resizeObjectName and #rotateObjectName properties direct the
|
|
* corresponding ResizingTool and RotatingTool to operate on the particular GraphObject
|
|
* in the Part's visual tree with the given name.
|
|
* That includes both providing tool handles and actually modifying properties on that object.
|
|
*
|
|
* Parts are not resizable or rotatable by default: you need to set #resizable and/or #rotatable to true.
|
|
* <p class="boxread">
|
|
* For more discussion about tools, see <a href="../../intro/tools.html">Tools</a>.
|
|
*
|
|
* A Part may be positioned (or a Link may be routed) by a Layout.
|
|
* This will happen automatically if Diagram#layout or Group#layout are set.
|
|
* The default Diagram#layout will position any nodes that were not given explicit positions or location.
|
|
*
|
|
* If you set #isLayoutPositioned to false, this part will not participate in any of the standard layouts,
|
|
* so it will not be moved by a layout or affect other parts in a layout.
|
|
* In order for the part to get a #location or position you will need to supply it explicitly.
|
|
*
|
|
* As parts are added to or removed from a diagram, the Layout responsible for positioning the part is invalidated.
|
|
* This will cause the layout to be performed again in the near future, at the end of the transaction.
|
|
* This automatic layout invalidation also occurs as parts change their visibility (GraphObject#visible)
|
|
* or their size (GraphObject#actualBounds).
|
|
* If you do want there to be a Diagram#layout but you do not want an automatic layout to happen
|
|
* after removing parts (for example), you can set #layoutConditions not to include the Part.LayoutRemoved flag.
|
|
* In this particular case, you could set #layoutConditions to:
|
|
* `go.Part.LayoutStandard & ~go.Part.LayoutRemoved`.
|
|
* It may also reasonable for your application to set it to Part.LayoutNone.
|
|
* Do not forget to consider applying the same conditions to links as well as to nodes and groups.
|
|
*
|
|
* If you want to save the locations/positions of the parts in a diagram, it is commonplace to
|
|
* data bind the #location to a property on your node data with a TwoWay Binding
|
|
* (call Binding#makeTwoWay). For example:
|
|
* ```js
|
|
* $(go.Part, "Horizontal",
|
|
* new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
|
|
* ...
|
|
* ```
|
|
*
|
|
* Then as the nodes are moved, whether manually by the user or automatically by a Layout,
|
|
* the model data is automatically updated with the location.
|
|
* <p class="boxread">
|
|
* For more discussion about related topics, see <a href="../../intro/selection.html">Selection</a>,
|
|
* <a href="../../intro/tools.html">Tools</a>, and
|
|
* <a href="../../intro/permissions.html">Permissions</a>.
|
|
*
|
|
* Parts that are templates should have no relationships with other Parts.
|
|
* Only real Parts that are in a Diagram can belong to Groups or have any Adornments.
|
|
* Only real Nodes in a Diagram can be connected with Links.
|
|
* @extends Panel
|
|
* @unrestricted
|
|
*/
|
|
export class Part extends Panel {
|
|
/**
|
|
* The constructor builds an empty Part.
|
|
* @param {PanelLayout=} type if not supplied, the default Panel type is Panel.Position.
|
|
*/
|
|
constructor(type?: PanelLayout);
|
|
/**
|
|
* This value may be used as the value of the Part#layoutConditions property to indicate that
|
|
* no operation on this Part causes invalidation of the Layout responsible for this Part.
|
|
* @constant
|
|
*/
|
|
static LayoutNone: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Part is added to a Diagram or Group, it invalidates the Layout responsible for the Part.
|
|
* @constant
|
|
*/
|
|
static LayoutAdded: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Part is removed from a Diagram or Group, it invalidates the Layout responsible for the Part.
|
|
* @constant
|
|
*/
|
|
static LayoutRemoved: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Part's GraphObject#visible becomes true, it invalidates the Layout responsible for the Part.
|
|
* @constant
|
|
*/
|
|
static LayoutShown: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Part's GraphObject#visible becomes false, it invalidates the Layout responsible for the Part.
|
|
* @constant
|
|
*/
|
|
static LayoutHidden: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Node or simple Part's GraphObject#actualBounds changes size, it invalidates the Layout responsible for the Part;
|
|
* this flag is ignored for Parts that are Links.
|
|
* @constant
|
|
*/
|
|
static LayoutNodeSized: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Group has been laid out, it invalidates the Layout responsible for that Group;
|
|
* this flag is ignored for Parts that are not Groups.
|
|
* @constant
|
|
*/
|
|
static LayoutGroupLayout: number;
|
|
/**
|
|
* This flag may be combined with other "Layout" flags as the value of the Part#layoutConditions property to indicate that
|
|
* when a Node or simple Part's #category changes, it invalidates the Layout responsible for the Part;
|
|
* this flag is ignored for Parts that are Links.
|
|
* @constant
|
|
*/
|
|
static LayoutNodeReplaced: number;
|
|
/**
|
|
* This is the default value for the Part#layoutConditions property, basically a combination of all of the conditions:
|
|
* the Layout responsible for the Part is invalidated when the Part is added or removed or replaced
|
|
* from the Diagram or Group, or when it changes visibility or size, or when a Group's layout has been performed.
|
|
* @constant
|
|
*/
|
|
static LayoutStandard: number;
|
|
/**
|
|
* Re-evaluate all data bindings in this Part,
|
|
* in order to assign new property values to the GraphObjects in this visual tree
|
|
* based on this this object's #data property values.
|
|
* This method does nothing if #data is null.
|
|
*
|
|
* It is better to call Model#setDataProperty to modify data properties,
|
|
* because that will both record changes for undo/redo and will update all bindings
|
|
* that make depend on that property.
|
|
*
|
|
* To update relationships between nodes, call #updateRelationshipsFromData.
|
|
* @param {string=} srcprop An optional source data property name:
|
|
* when provided, only evaluates those Bindings that use that particular property;
|
|
* when not provided or when it is the empty string, all bindings are evaluated.
|
|
* @see #updateRelationshipsFromData
|
|
*/
|
|
updateTargetBindings(srcprop?: string): void;
|
|
/**
|
|
* Update all of the references to nodes in case they had been modified in the model without
|
|
* properly notifying the model by calling GraphLinksModel#setGroupKeyForNodeData or
|
|
* GraphLinksModel#setToKeyForLinkData or other similar methods.
|
|
* This method does not conduct a transaction, so you need to start and commit one yourself.
|
|
*
|
|
* This only updates the relationships between nodes, to have them reflect what is now declared in the model data.
|
|
* For example, in a GraphLinksModel if code has changed the value of the "to" property of a link data,
|
|
* calling this method on the corresponding Link would cause the link to connect with
|
|
* the Node whose data has the new key.
|
|
*
|
|
* To update GraphObject properties that are data bound, call #updateTargetBindings.
|
|
* @expose
|
|
* @see #updateTargetBindings
|
|
* @since 1.5
|
|
*/
|
|
updateRelationshipsFromData(): void;
|
|
/**
|
|
* This read-only property returns the Part's Model data key if it is in a Diagram and is backed by Model data.
|
|
* Otherwise this returns undefined.
|
|
* @since 1.8
|
|
* @see Model#getKeyForNodeData
|
|
*/
|
|
readonly key: Key;
|
|
/**
|
|
* This read-only property returns an iterator over all of the Adornments associated with this part.
|
|
* After each call to the iterator's next() method that returns true,
|
|
* the iterator's key will be the category and the iterator's value will
|
|
* be an Adornment.
|
|
*
|
|
* Templates should not have any adornments.
|
|
*/
|
|
readonly adornments: Iterator<Adornment>;
|
|
/**
|
|
* Find an Adornment of a given category associated with this Part.
|
|
*
|
|
* Templates should not have any adornments.
|
|
* @param {string} category
|
|
* @return {Adornment} Returns null if no such Adornment was found.
|
|
*/
|
|
findAdornment(category: string): Adornment | null;
|
|
/**
|
|
* Associate an Adornment with this Part, perhaps replacing any existing adornment of the same category.
|
|
* Don't forget to set Adornment#adornedObject before calling this method.
|
|
* This adds the Adornment to the Layer named by #layerName, normally "Adornment".
|
|
*
|
|
* Adornments are also data bound to the same data that this Part has, if any.
|
|
* If the Adornment was already associated with a Part, it is unassociated with that old Part.
|
|
*
|
|
* This method should not be called on templates.
|
|
* @param {string} category a string identifying the kind or role of the given adornment for this Part.
|
|
* @param {Adornment} ad the new Adornment.
|
|
*/
|
|
addAdornment(category: string, ad: Adornment): void;
|
|
/**
|
|
* Remove any Adornment of the given category that may be associated with this Part.
|
|
* @param {string} category a string identifying the kind or role of the given adornment for this Part.
|
|
*/
|
|
removeAdornment(category: string): void;
|
|
/**
|
|
* Remove all adornments associated with this part.
|
|
*/
|
|
clearAdornments(): void;
|
|
/**
|
|
* This is responsible for creating any selection Adornment (if this Part #isSelected) and
|
|
* any tool adornments for this part.
|
|
* @expose
|
|
*/
|
|
updateAdornments(): void;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
invalidateAdornments(): void;
|
|
/**
|
|
* This read-only property returns the Layer that this Part is in.
|
|
* The value is the Layer that is named with the value of #layerName.
|
|
* If you want to change what Layer this Part is in, change the value of #layerName to refer to a different Layer.
|
|
*
|
|
* This will be null if it has not yet been added to a Diagram,
|
|
* or if it has already been removed from a Diagram.
|
|
* @see #layerName
|
|
*/
|
|
readonly layer: Layer | null;
|
|
/**
|
|
* This read-only property returns the Diagram that this Part is in.
|
|
*
|
|
* This will be null if it is not in a Layer.
|
|
*/
|
|
readonly diagram: Diagram | null;
|
|
/**
|
|
* Gets or sets the layer name for this part.
|
|
* The initial value is an empty string, which is the name of the default layer.
|
|
* The value of this property determines the value of #layer.
|
|
*
|
|
* If this part is not yet in a Diagram,
|
|
* this value is used by Diagram#add
|
|
* to determine which Layer this part should go in.
|
|
* If no layer can be found with this name, it uses the default layer.
|
|
*
|
|
* Changing the value of this property while it is already in a layer
|
|
* causes it to change layers if needed.
|
|
* @see #layerChanged
|
|
*/
|
|
layerName: string;
|
|
/**
|
|
* Gets or sets the function to execute when this part changes layers.
|
|
* It is typically used to modify the appearance of the part.
|
|
* This function must not change the layer of this part by setting #layerName.
|
|
*
|
|
* If this property value is a function, it is called with three arguments,
|
|
* this Part, the old Layer (may be null), and the new Layer (may be null).
|
|
* By default this property is null -- no function is called.
|
|
* @see #layerName
|
|
*/
|
|
layerChanged: ((thisPart: Part, oldLayer: Layer | null, newLayer: Layer | null) => void) | null;
|
|
/**
|
|
* Gets or sets the Z-ordering position of this Part within its Layer.
|
|
*
|
|
* Within the same layer, nodes with larger zOrder values are placed in front of nodes with smaller zOrder values.
|
|
* When the value is NaN the ordering is not specified.
|
|
* The default value is NaN.
|
|
*
|
|
* When a Group has a zOrder value of NaN, it is automatically placed behind its member nodes and links
|
|
* that also have no zOrder.
|
|
* Such automatic ordering is not guaranteed if any nodes including the groups have a numeric zOrder.
|
|
* If you do want to specify the zOrder of nodes, you should also specify the zOrder of their containing groups
|
|
* unless those groups are in different layers.
|
|
* @since 1.6
|
|
*/
|
|
zOrder: number;
|
|
/**
|
|
* This read-only property returns the GraphObject that determines the location of this Part.
|
|
* The value will be in the visual tree of this Part and is usually named with
|
|
* the value of #locationObjectName.
|
|
*/
|
|
readonly locationObject: GraphObject;
|
|
/**
|
|
* Gets or sets the minimum location of this Part to which the user may drag using the DraggingTool.
|
|
*
|
|
* Value must be of type Point.
|
|
* The initial value is (-Infinity, -Infinity), which imposes no position constraint.
|
|
* A X value of NaN causes Diagram#computeMove to use the part's current location's X value as the minimum,
|
|
* and similarly for NaN as the Y value.
|
|
* @see #location
|
|
* @see #maxLocation
|
|
* @see #dragComputation
|
|
* @see #movable
|
|
*/
|
|
minLocation: Point;
|
|
/**
|
|
* Gets or sets the maximum location of this Part to which the user may drag using the DraggingTool.
|
|
*
|
|
* Value must be of type Point.
|
|
* The initial value is (Infinity, Infinity), which imposes no position constraint.
|
|
* A X value of NaN causes Diagram#computeMove to use the part's current location's X value as the maximum,
|
|
* and similarly for NaN as the Y value.
|
|
* @see #location
|
|
* @see #minLocation
|
|
* @see #dragComputation
|
|
* @see #movable
|
|
*/
|
|
maxLocation: Point;
|
|
/**
|
|
* Gets or sets the name of the GraphObject that provides the location of this Part.
|
|
* This name determines the value of #locationObject.
|
|
* The actual #location also depends on the #locationSpot.
|
|
*
|
|
* The initial value is an empty string, meaning the whole Part itself determines the location.
|
|
* If you want to use a particular GraphObject in the visual tree of this Part,
|
|
* set this property to be the GraphObject#name of the element that you want to be the #locationObject.
|
|
* @see #location
|
|
* @see #locationSpot
|
|
*/
|
|
locationObjectName: string;
|
|
/**
|
|
* Gets or sets the location Spot of this Node, the spot on the #locationObject
|
|
* that is used in positioning this part in the diagram.
|
|
*
|
|
* Value must be of the type Spot.
|
|
* The initial value is `Spot.TopLeft`.
|
|
* The value must be a specific spot -- i.e. one for which Spot#isSpot is true.
|
|
*
|
|
* It is commonplace to set this property to `Spot.Center`, so that the #location
|
|
* has a value corresponding to the point at the center of this Part's #locationObject element.
|
|
* But the GraphObject#position of a Part is always at the top-left corner
|
|
* point of the GraphObject#actualBounds.
|
|
* @see #location
|
|
* @see #locationObjectName
|
|
*/
|
|
locationSpot: Spot;
|
|
/**
|
|
* Move this part and any parts that are owned by this part to a new position.
|
|
*
|
|
* If this part is a Group, it also moves all of its members, recursively.
|
|
* If this part is a Link, it also moves all of its label nodes.
|
|
*
|
|
* This method does not perform a transaction or start any animation.
|
|
* @expose
|
|
* @param {Point} newpos a new Point in document coordinates.
|
|
* @param {boolean=} useLocation true if you want to set the #location instead of the position. False by default.
|
|
*/
|
|
move(newpos: Point, useLocation?: boolean): void;
|
|
/**
|
|
* Move this part and any parts that are owned by this part to a new position.
|
|
* This just calls #move without the caller having to allocate a new Point.
|
|
* @param {number} newx a new X value in document coordinates.
|
|
* @param {number} newy a new Y value in document coordinates.
|
|
* @param {boolean=} useLocation true if you want to set the #location instead of the position. False by default.
|
|
* @since 1.4
|
|
*/
|
|
moveTo(newx: number, newy: number, useLocation?: boolean): void;
|
|
/**
|
|
* This predicate is true if this Part can be seen.
|
|
* Parts that can be seen can be manipulated by the user, can take space in the document, or can take part in a layout,
|
|
* among many possibilities.
|
|
* Note that the value of this predicate can often be false even while GraphObject#visible is true.
|
|
*
|
|
* A Part is not seen if it is not GraphObject#visible or if it is in a Layer that is not Layer#visible.
|
|
*
|
|
* If a Part is a member of a Group and the Group is not Group#isSubGraphExpanded, the part is not seen.
|
|
* (The containing Group might still be visible.)
|
|
*
|
|
* If a Node is a "tree child" of a Node that is not Node#isTreeExpanded, the node is not seen.
|
|
* (The parent Node might still be visible.)
|
|
*
|
|
* If a Link is connected to or from a Node that is not `isVisible()`
|
|
* and is not a member of a Group that `isVisible()`, the link is not seen.
|
|
*
|
|
* If a Node is a "link label" of a Link and that Link is not `isVisible()`, the node is not seen.
|
|
*
|
|
* This is different from GraphObject#isVisibleObject,
|
|
* which ignores whether the Layer is visible and just checks GraphObject#visible
|
|
* up the chain of containing Panels.
|
|
*
|
|
* If you want to know whether a Part is in the Diagram's viewport, try:
|
|
* ```js
|
|
* diagram.viewportBounds.containsRect(part.actualBounds);
|
|
* ```
|
|
*
|
|
* or:
|
|
* ```js
|
|
* diagram.viewportBounds.intersectsRect(part.actualBounds);
|
|
* ```
|
|
* @expose
|
|
* @return {boolean} true if GraphObject#visible is true and if Layer#visible is true.
|
|
*/
|
|
isVisible(): boolean;
|
|
/**
|
|
* Undocumented
|
|
* @param {GraphObject} elt
|
|
* @param {Spot} spot
|
|
* @param {Point=} result an optional Point that is modified and returned
|
|
* @return {Point}
|
|
*/
|
|
getRelativePoint(elt: GraphObject, spot: Spot, result?: Point): Point;
|
|
/**
|
|
* Returns the Rect in document coordinates for this object's bounds.
|
|
* If this GraphObject is a Part, the rect will be identical to its #actualBounds.
|
|
* @param {Rect=} result an optional Rect that is modified and returned.
|
|
* @return {Rect} in document coordinates.
|
|
* @see #getDocumentPoint
|
|
* @since 2.0
|
|
*/
|
|
getDocumentBounds(result?: Rect): Rect;
|
|
/**
|
|
* Measures if needed to make sure the GraphObject#measuredBounds and GraphObject#naturalBounds are all real numbers,
|
|
* primarily to get the actual width and height.
|
|
* GraphObject#actualBounds will get a real width and height, but the x and y values may continue to be `NaN`
|
|
* if they were that way beforehand.
|
|
*
|
|
* This is sometimes necessary to call when defining custom layouts or implementing virtualization,
|
|
* so that it can work with the actual size of the nodes.
|
|
*
|
|
* For efficiency, do not call this method unnecessarily.
|
|
* @since 1.6
|
|
*/
|
|
ensureBounds(): void;
|
|
/**
|
|
* Gets or sets the position of this part in document coordinates,
|
|
* based on the #locationSpot in this part's #locationObject.
|
|
*
|
|
* Value must be of type Point.
|
|
* The initial value is Point(NaN, NaN).
|
|
* It is commonplace to data bind this property to some property on your model node data.
|
|
*
|
|
* The value is related to the GraphObject#position.
|
|
* For Parts, both are in document coordinates; setting one property will set the other property.
|
|
* By default both will have the same value.
|
|
* However, by setting either or both of #locationSpot and #locationObjectName,
|
|
* the location will be determined by a spot in the #locationObject,
|
|
* a GraphObject that is in the visual tree of this Part.
|
|
* The GraphObject#position will always refer to the point at the top-left corner of the whole part.
|
|
*
|
|
* The #minLocation and #maxLocation limit the location of a part, not its position.
|
|
* Grid snapping will normally locate the location to be on grid points.
|
|
* @see #locationObjectName
|
|
* @see #locationSpot
|
|
* @see #movable
|
|
* @see #maxLocation
|
|
* @see #minLocation
|
|
* @see #dragComputation
|
|
*/
|
|
location: Point;
|
|
/**
|
|
* Gets or sets the category of this part,
|
|
* typically used to distinguish different kinds of nodes or links.
|
|
*
|
|
* The initial value is an empty string, which is the default category.
|
|
* Any new value must be a string.
|
|
* This should not be set in templates.
|
|
*
|
|
* When building Parts for node data or link data in a model,
|
|
* the Diagram will call Model#getCategoryForNodeData or
|
|
* GraphLinksModel#getCategoryForLinkData to get the category string for the data object.
|
|
* The diagram uses this value to look up a template in Diagram#nodeTemplateMap,
|
|
* Diagram#linkTemplateMap or Diagram#groupTemplateMap.
|
|
* That template is copied to create the actual Part that is added to the diagram.
|
|
* The diagram will set this property to remember the category it used.
|
|
*
|
|
* Note that the class of the new Part must be the same as the class of the original Part.
|
|
* For example, a Node cannot be replaced by a simple Part or vice-versa.
|
|
* Nor can a Link be replaced by a subclass of Link or vice-versa.
|
|
*
|
|
* To change the category for a Part created for model data, call Model#setCategoryForNodeData or
|
|
* GraphLinksModel#setCategoryForLinkData.
|
|
*
|
|
* This property is also used to distinguish Adornments on a Part.
|
|
* In this scenario you create the Adornment, often indirectly by specifying a template,
|
|
* and set this property explicitly.
|
|
* For example, ResizingTool#updateAdornments creates a resizing Adornment from the
|
|
* Part#resizeAdornmentTemplate and sets its category to be "Resizing".
|
|
* Changing the category of an existing Adornment will update any adorned part's association.
|
|
*/
|
|
category: string;
|
|
/**
|
|
* This predicate returns true if #copyable is true,
|
|
* if the layer's Layer#allowCopy is true, and
|
|
* if the diagram's Diagram#allowCopy is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may copy this part.
|
|
*/
|
|
canCopy(): boolean;
|
|
/**
|
|
* This predicate returns true if #deletable is true,
|
|
* if the layer's Layer#allowDelete is true, and
|
|
* if the diagram's Diagram#allowDelete is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may delete this part.
|
|
*/
|
|
canDelete(): boolean;
|
|
/**
|
|
* This predicate returns true if #textEditable is true,
|
|
* if the layer's Layer#allowTextEdit is true, and
|
|
* if the diagram's Diagram#allowTextEdit is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may edit this part.
|
|
*/
|
|
canEdit(): boolean;
|
|
/**
|
|
* This predicate returns true if #groupable is true,
|
|
* if the layer's Layer#allowGroup is true, and
|
|
* if the diagram's Diagram#allowGroup is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may group this part.
|
|
*/
|
|
canGroup(): boolean;
|
|
/**
|
|
* This predicate returns true if #movable is true,
|
|
* if the layer's Layer#allowMove is true, and
|
|
* if the diagram's Diagram#allowMove is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may move this part.
|
|
*/
|
|
canMove(): boolean;
|
|
/**
|
|
* This predicate returns true if #reshapable is true,
|
|
* if the layer's Layer#allowReshape is true, and
|
|
* if the diagram's Diagram#allowReshape is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may reshape this part.
|
|
*/
|
|
canReshape(): boolean;
|
|
/**
|
|
* This predicate returns true if #resizable is true,
|
|
* if the layer's Layer#allowResize is true, and
|
|
* if the diagram's Diagram#allowResize is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may resize this part.
|
|
*/
|
|
canResize(): boolean;
|
|
/**
|
|
* This predicate returns true if #rotatable is true,
|
|
* if the layer's Layer#allowRotate is true, and
|
|
* if the diagram's Diagram#allowRotate is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may rotate this part.
|
|
*/
|
|
canRotate(): boolean;
|
|
/**
|
|
* This predicate returns true if #selectable is true,
|
|
* if the layer's Layer#allowSelect is true, and
|
|
* if the diagram's Diagram#allowSelect is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may select this part.
|
|
*/
|
|
canSelect(): boolean;
|
|
/**
|
|
* Gets or sets whether the user may copy this part.
|
|
* The initial value is true.
|
|
* @see #canCopy
|
|
*/
|
|
copyable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may delete this part.
|
|
* The initial value is true.
|
|
* @see #canDelete
|
|
*/
|
|
deletable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may do in-place text editing on TextBlocks in this part
|
|
* that have TextBlock#editable set to true.
|
|
* The initial value is true.
|
|
* @see #canEdit
|
|
* @see TextBlock#editable
|
|
*/
|
|
textEditable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may group this part to be a member of a new Group.
|
|
* The initial value is true.
|
|
*
|
|
* The grouping command is implemented by CommandHandler#groupSelection
|
|
* and depends on CommandHandler#archetypeGroupData having been set to a node data object.
|
|
* A Group can be ungrouped by the user if you set Group#ungroupable to true.
|
|
* @see #canGroup
|
|
*/
|
|
groupable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may move this part.
|
|
* The initial value is true.
|
|
* @see #canMove
|
|
* @see #dragComputation
|
|
* @see #maxLocation
|
|
* @see #minLocation
|
|
*/
|
|
movable: boolean;
|
|
/**
|
|
* Gets or sets whether a selection adornment is shown for this part when it is selected.
|
|
* The initial value is true.
|
|
* @see #selectionChanged
|
|
* @see #selectionAdornmentTemplate
|
|
*/
|
|
selectionAdorned: boolean;
|
|
/**
|
|
* Gets or sets whether this Part is part of the document bounds.
|
|
*
|
|
* The initial value is true.
|
|
* A value of false causes Diagram#computeBounds to ignore this part.
|
|
* If the value is false, it is possible that user will not be able to scroll far enough to see this part,
|
|
* if the part's GraphObject#actualBounds are outside of the Diagram#documentBounds.
|
|
*/
|
|
isInDocumentBounds: boolean;
|
|
/**
|
|
* Gets or sets whether a Layout positions this Node or routes this Link.
|
|
* This property affects the value of #canLayout.
|
|
*
|
|
* The initial value is true, meaning that this part is laid out by the layout responsible for this Part.
|
|
* If this part is a member of a Group, it is the Group#layout,
|
|
* otherwise it is the Diagram#layout.
|
|
*
|
|
* A value of false means that this part is not affected by and does not affect any automatic layout,
|
|
* so the #layoutConditions property is ignored.
|
|
* You will need to make sure that it has a real #location or GraphObject#position value,
|
|
* or else the Part might not be visible anywhere in the diagram.
|
|
*
|
|
* Another way of controlling when layouts are invalidated is by setting
|
|
* Part#layoutConditions or Layout#isInitial or Layout#isOngoing.
|
|
*/
|
|
isLayoutPositioned: boolean;
|
|
/**
|
|
* Gets or sets whether the user may select this part.
|
|
* The initial value is true.
|
|
*
|
|
* If you set this to true you may also want to set #selectionObjectName
|
|
* to the GraphObject#named element that you want to be adorned
|
|
* when the Part is selected.
|
|
* @see #canSelect
|
|
* @see #isSelected
|
|
* @see #selectionAdorned
|
|
* @see #selectionObjectName
|
|
* @see #selectionAdornmentTemplate
|
|
* @see #selectionChanged
|
|
*/
|
|
selectable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may reshape this part.
|
|
* The initial value is false.
|
|
* @see #canReshape
|
|
* @see LinkReshapingTool
|
|
*/
|
|
reshapable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may resize this part.
|
|
* The initial value is false.
|
|
*
|
|
* If you set this to true you may also want to set #resizeObjectName
|
|
* to the GraphObject#named element that you want the user to resize.
|
|
* It is also commonplace to add a TwoWay Binding of that named element's
|
|
* GraphObject#desiredSize in order to save to the model data the value that the user
|
|
* set via the ResizingTool.
|
|
* @see #canResize
|
|
* @see #resizeObjectName
|
|
* @see #resizeCellSize
|
|
* @see #resizeAdornmentTemplate
|
|
*/
|
|
resizable: boolean;
|
|
/**
|
|
* Gets or sets whether the user may rotate this part.
|
|
* The initial value is false.
|
|
*
|
|
* If you set this to true you may also want to set #rotateObjectName
|
|
* to the GraphObject#named element that you want the user to rotate.
|
|
* It is also commonplace to add a TwoWay Binding of that named element's
|
|
* GraphObject#angle in order to save to the model data the value that the user
|
|
* set via the RotatingTool.
|
|
* @see #canRotate
|
|
* @see #rotateObjectName
|
|
* @see #rotateAdornmentTemplate
|
|
*/
|
|
rotatable: boolean;
|
|
/**
|
|
* Gets or sets whether this Part is selected.
|
|
* The initial value is false.
|
|
*
|
|
* Selected parts typically are shown either with an Adornment
|
|
* or with a different appearance by changing the brush or visibility of one or
|
|
* more of the GraphObjects within the part.
|
|
*
|
|
* Changing this value does not by itself raise any "ChangingSelection" and "ChangedSelection" DiagramEvents.
|
|
* Tools and the CommandHandler and methods such as Diagram#select do raise those DiagramEvents
|
|
* because they want to surround changes to this property with a single "ChangingSelection" DiagramEvent beforehand and a single "ChangedSelection" afterwards.
|
|
* @see #selectable
|
|
* @see #selectionAdorned
|
|
* @see #selectionChanged
|
|
* @see #selectionObjectName
|
|
* @see #selectionAdornmentTemplate
|
|
*/
|
|
isSelected: boolean;
|
|
/**
|
|
* Gets or sets whether this Part is highlighted.
|
|
* The initial value is false.
|
|
*
|
|
* Highlighted parts may be shown with a different appearance by changing the brush or visibility of one or
|
|
* more of the GraphObjects within the part.
|
|
* One way of doing that is by using binding.
|
|
* Consider part of the definition of a Node template:
|
|
* ```js
|
|
* $(go.Shape,
|
|
* . . .,
|
|
* // Shape.fill is bound to Node.data.color
|
|
* new go.Binding("fill", "color"),
|
|
* // Shape.stroke is red when Node.isHighlighted is true, black otherwise
|
|
* new go.Binding("stroke", "isHighlighted",
|
|
* function(h) { return h ? "red" : "black"; }).ofObject()),
|
|
* ```
|
|
* @see #highlightedChanged
|
|
* @see Diagram#highlighteds
|
|
* @see Diagram#highlight
|
|
* @see Diagram#highlightCollection
|
|
* @see Diagram#clearHighlighteds
|
|
* @since 1.4
|
|
*/
|
|
isHighlighted: boolean;
|
|
/**
|
|
* Gets or sets whether this part will draw shadows.
|
|
* The initial value is false.
|
|
*
|
|
* By default, setting this property to true will attempt to draw shadows only
|
|
* on the GraphObjects in this Part that appear to act as background objects, and
|
|
* not on GraphObjects that appear to be in front of other GraphObjects in the Part.
|
|
*
|
|
* To finely control shadows, you may need to set GraphObject#shadowVisible on
|
|
* elements of this Part, so that they explicitly do or do not get shadowed accordingly.
|
|
* @see #shadowOffset
|
|
* @see #shadowColor
|
|
* @see #shadowBlur
|
|
* @see GraphObject#shadowVisible
|
|
*/
|
|
isShadowed: boolean;
|
|
/**
|
|
* Gets or sets whether this part may be animated.
|
|
* The initial value is true.
|
|
* @since 1.4
|
|
*/
|
|
isAnimated: boolean;
|
|
/**
|
|
* Gets or sets the function to execute when this #isHighlighted changes.
|
|
* It is typically used to modify the appearance of the part.
|
|
* This function must not highlight or unhighlight any parts.
|
|
*
|
|
* If this property value is a function, it is called with one argument,
|
|
* this Part that whose #isHighlighted value changed.
|
|
* By default this property is null.
|
|
* @see #isHighlighted
|
|
* @since 1.7
|
|
*/
|
|
highlightedChanged: ((thisPart: Part) => void) | null;
|
|
/**
|
|
* Gets or sets the name of the GraphObject that should get a selection handle
|
|
* when this part is selected.
|
|
* The value of this property affects the value of #selectionObject.
|
|
* The initial value is an empty string, meaning the whole Part itself gets any selection handle.
|
|
*
|
|
* If no GraphObject has a GraphObject#name that is this name, #selectionObject returns the whole Part.
|
|
* @see #selectable
|
|
* @see #selectionObject
|
|
*/
|
|
selectionObjectName: string;
|
|
/**
|
|
* Gets or sets the Adornment template used to create a selection handle for this Part.
|
|
*
|
|
* If this is null, depending on the class of this Part, the value of Diagram#nodeSelectionAdornmentTemplate, Diagram#groupSelectionAdornmentTemplate,
|
|
* or Diagram#linkSelectionAdornmentTemplate is used instead.
|
|
*
|
|
* It is commonplace to make use of a Placeholder in an Adornment for a Node, Group, or simple Part.
|
|
* The Placeholder represents the Adornment#adornedObject of the adorned Part.
|
|
* For Links, the Adornment must be of Panel#type Panel.Link.
|
|
* @see #selectable
|
|
* @see #selectionObjectName
|
|
*/
|
|
selectionAdornmentTemplate: Adornment | null;
|
|
/**
|
|
* This read-only property returns the GraphObject that should get a selection handle when this part is selected.
|
|
* The value will be in the visual tree of this Part and is usually named with
|
|
* the value of #selectionObjectName.
|
|
* When the #selectionObjectName is unspecified, this whole Part is used as the "selection object".
|
|
* @see #selectable
|
|
* @see #selectionObjectName
|
|
*/
|
|
readonly selectionObject: GraphObject;
|
|
/**
|
|
* Gets or sets the function to execute when this part is selected or deselected.
|
|
* It is typically used to modify the appearance of the part.
|
|
* This function must not select or deselect any parts.
|
|
*
|
|
* If this property value is a function, it is called with one argument,
|
|
* this Part that was selected or that became unselected.
|
|
* When it is called, the value of Diagram#skipsUndoManager is temporarily set to true.
|
|
* By default this property is null.
|
|
*
|
|
* This function is called with Diagram#skipsUndoManager temporarily set to true,
|
|
* so that any changes to GraphObjects are not recorded in the UndoManager.
|
|
* You do not need to start and commit any transaction in this function.
|
|
* @see #isSelected
|
|
* @see #selectionAdorned
|
|
* @see #selectionAdornmentTemplate
|
|
*/
|
|
selectionChanged: ((thisPart: Part) => void) | null;
|
|
/**
|
|
* Gets or sets the adornment template used to create a resize handle Adornment for this part.
|
|
* This is used by the ResizingTool, ToolManager#resizingTool.
|
|
*
|
|
* If an Adornment is supplied, it is normally a Panel.Spot panel that contains a Placeholder
|
|
* with some number of resize handles at the four corners or at the four side midpoints.
|
|
* @see #resizable
|
|
* @see #resizeObjectName
|
|
* @see ResizingTool
|
|
*/
|
|
resizeAdornmentTemplate: Adornment | null;
|
|
/**
|
|
* Gets or sets the name of the GraphObject that should get a resize handle
|
|
* when this part is selected.
|
|
* The value of this property affects the value of #resizeObject.
|
|
* The initial value is an empty string, meaning the whole Part itself gets any resize handle.
|
|
* @see #resizable
|
|
* @see #resizeObject
|
|
* @see ResizingTool
|
|
*/
|
|
resizeObjectName: string;
|
|
/**
|
|
* This read-only property returns the GraphObject that should get resize handles when this part is selected.
|
|
* The value will be in the visual tree of this Part and is usually named with
|
|
* the value of #resizeObjectName.
|
|
* @see #resizable
|
|
* @see #resizeObjectName
|
|
* @see ResizingTool
|
|
*/
|
|
readonly resizeObject: GraphObject;
|
|
/**
|
|
* Gets or sets the width and height multiples used when resizing.
|
|
* By default this property is the Size(NaN, NaN).
|
|
* @see #resizable
|
|
* @see #resizeObjectName
|
|
* @see ResizingTool
|
|
*/
|
|
resizeCellSize: Size;
|
|
/**
|
|
* Gets or sets the adornment template used to create a rotation handle Adornment for this part.
|
|
* This is used by the RotatingTool, ToolManager#rotatingTool.
|
|
*
|
|
* This Adornment should not have a Placeholder in it, because the RotatingTool will position it away from the
|
|
* #rotateObject at its GraphObject#angle.
|
|
* @see #rotatable
|
|
* @see #rotateObjectName
|
|
* @see RotatingTool
|
|
*/
|
|
rotateAdornmentTemplate: Adornment | null;
|
|
/**
|
|
* Gets or sets the name of the GraphObject that should get a rotate handle
|
|
* when this part is selected.
|
|
* The value of this property affects the value of #rotateObject.
|
|
* The initial value is an empty string, meaning the whole Part itself gets any rotate handle.
|
|
* @see #rotatable
|
|
* @see #rotateObject
|
|
* @see RotatingTool
|
|
*/
|
|
rotateObjectName: string;
|
|
/**
|
|
* This read-only property returns the GraphObject that should get rotate handles when this part is selected.
|
|
* The value will be in the visual tree of this Part and is usually named with
|
|
* the value of #rotateObjectName.
|
|
* @see #rotatable
|
|
* @see #rotateObjectName
|
|
* @see RotatingTool
|
|
*/
|
|
readonly rotateObject: GraphObject;
|
|
/**
|
|
* Gets or sets the spot on the #rotateObject
|
|
* that is used in rotating this part with the RotatingTool.
|
|
*
|
|
* Value must be of the type Spot.
|
|
* The value must be a specific spot -- i.e. one for which Spot#isSpot is true, or else `Spot.Default`.
|
|
*
|
|
* If the value is `Spot.Default`, the RotatingTool uses
|
|
* the locationSpot if the #rotateObject is equal to the #locationObject, otherwise
|
|
* it uses `Spot.Center`.
|
|
*
|
|
* The initial value is `Spot.Default`.
|
|
*
|
|
* @see #rotateObjectName
|
|
* @since 2.0
|
|
*/
|
|
rotationSpot: Spot;
|
|
/**
|
|
* Gets or sets a text string that is associated with this part.
|
|
*
|
|
* The initial value is an empty string.
|
|
* This value is often used for sorting.
|
|
*/
|
|
text: string;
|
|
/**
|
|
* Gets or sets the Group of which this Part or Node is a member.
|
|
* This will be null if this is a top-level part.
|
|
*
|
|
* You cannot set this property on a Link; it is set for you automatically
|
|
* based on the group memberships of the connected nodes.
|
|
* You cannot set this property on an Adornment at all.
|
|
*
|
|
* A template should not be a member of any group.
|
|
* @see Group#memberParts
|
|
* @see #findTopLevelPart
|
|
* @see #isTopLevel
|
|
*/
|
|
containingGroup: Group | null;
|
|
/**
|
|
* Gets or sets the function that is called after this Part has changed which Group it belongs to, if any.
|
|
* It is typically used to modify the appearance of the part.
|
|
* The first argument will be this Part.
|
|
* The second argument will be the old Group, or null if it had been a top-level part.
|
|
* The third argument will be the new Group, or null if it is now a top-level part.
|
|
*
|
|
* If the value is a function, that function must not modify the part's containing Group.
|
|
* The containing Group has already been changed -- trying to change it again may produce undefined behavior.
|
|
*
|
|
* The initial value is null -- no function is called.
|
|
*/
|
|
containingGroupChanged: ((thisPart: Part, oldGroup: Group | null, newGroup: Group | null) => void) | null;
|
|
/**
|
|
* Return how deep this part is in the hierarchy of nested Groups.
|
|
* For parts that have no #containingGroup this returns zero.
|
|
*
|
|
* If you want to know how deep a Node is in a tree structure, call Node#findTreeLevel.
|
|
* @return {number}
|
|
* @since 1.5
|
|
*/
|
|
findSubGraphLevel(): number;
|
|
/**
|
|
* Gets the top-level Part for this part, which is itself when #isTopLevel is true.
|
|
* If this Part is a member of a Group, this returns the top-level Part for that Group.
|
|
* If this is a Node that is a label node for a labeled Link, this returns the top-level Part for that Link.
|
|
*
|
|
* If this is a Node and you are searching for the root of the tree that this node is in, use Node#findTreeRoot.
|
|
* @return {Part} This will not return null.
|
|
* @since 1.1
|
|
*/
|
|
findTopLevelPart(): Part;
|
|
/**
|
|
* This read-only property is true when this part is not member of any Group node
|
|
* nor is it a label node for a Link.
|
|
* @see #containingGroup
|
|
* @see Node#labeledLink
|
|
*/
|
|
readonly isTopLevel: boolean;
|
|
/**
|
|
* This predicate is true if this part is a member of the given Part, perhaps indirectly.
|
|
*
|
|
* If the given part is a Group and this part is a member of the given group, this returns true.
|
|
* If this part is a Node and it is a label node for a link that is a member of the given group, this returns true.
|
|
* Otherwise this searches recursively any Part#containingGroup of the given part.
|
|
*
|
|
* A part cannot be contained by itself.
|
|
* A template should not be a member of any group.
|
|
*
|
|
* If this is a Node and you want to find whether it is in a subtree whose root is a given Node, use Node#isInTreeOf.
|
|
* @param {Part} part
|
|
* @return {boolean}
|
|
*/
|
|
isMemberOf(part: Part): boolean;
|
|
/**
|
|
* Find the Group that perhaps indirectly contains both this part and another one.
|
|
* If this is a Group and it contains the OTHER Part, return this.
|
|
* If the OTHER Part is a Group and it contains this Part, return that OTHER Part.
|
|
*
|
|
* This returns null if the two parts are unrelated in the hierarchy of part membership.
|
|
* If non-null, the result is a Group.
|
|
*
|
|
* If you want to find the Node that is the tree parent of two Nodes,
|
|
* call Node#findCommonTreeParent.
|
|
* @param {Part} other
|
|
* @return {Group} may be null
|
|
*/
|
|
findCommonContainingGroup(other: Part): Group | null;
|
|
/**
|
|
* Gets or sets flags that control when the Layout that is responsible for this Part is invalidated.
|
|
* The initial value is Part.LayoutStandard,
|
|
* which causes the layout for this part to be invalidated when the part is added or removed or changes visibility or size.
|
|
*
|
|
* Individual layout conditions include: Part.LayoutAdded, Part.LayoutRemoved,
|
|
* Part.LayoutShown, Part.LayoutHidden, and Part.LayoutNodeSized.
|
|
*
|
|
* This property is ignored when #isLayoutPositioned is false -- no operation on this Part
|
|
* will by itself cause the responsible Layout to be invalidated.
|
|
*
|
|
* You can also control when layouts are invalidated is by setting Layout#isInitial or Layout#isOngoing.
|
|
*/
|
|
layoutConditions: number;
|
|
/**
|
|
* This predicate is called by Layout implementations to decide whether this Part
|
|
* should be positioned and might affect the positioning of other Parts.
|
|
*
|
|
* This is false if #isLayoutPositioned is false, if #isVisible returns false,
|
|
* or if the part is in a temporary Layer.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean}
|
|
*/
|
|
canLayout(): boolean;
|
|
/**
|
|
* Invalidate the Layout that is responsible for positioning this Part.
|
|
* If this part is in a Group, invalidate its Group#layout, if it has one.
|
|
* Otherwise invalidate the Diagram#layout.
|
|
*
|
|
* But note that if #isLayoutPositioned is false, or if it is in a temporary Layer,
|
|
* or if it is not in a diagram or group, no layout is invalidated.
|
|
* @param {number=} condition the reason that the layout should be invalidated;
|
|
* if this argument is not supplied, any value of #layoutConditions other than Part.LayoutNone
|
|
* will allow the layout to be invalidated.
|
|
*/
|
|
invalidateLayout(condition?: number): void;
|
|
/**
|
|
* Gets or sets the function used to determine the location that this Part can be dragged to.
|
|
* The first argument is a reference to the Part being dragged, the second argument is a Point describing
|
|
* the proposed location, and the third argument is a snapped location, if one was determined during dragging.
|
|
* It should return a Point that is the proposed new location.
|
|
*
|
|
* By default this function is null and the DraggingTool uses the snapped location,
|
|
* if one was determined and if DraggingTool#isGridSnapEnabled is true,
|
|
* or the proposed location (the second argument) if not snapping to a grid.
|
|
*
|
|
* In either case the DraggingTool will limit the proposed new location by #minLocation and #maxLocation.
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
*
|
|
* An example that limits moving a Node to the current viewport:
|
|
* ```js
|
|
* function stayInViewport(part, pt, gridpt) {
|
|
* var diagram = part.diagram;
|
|
* if (diagram === null) return pt;
|
|
* // compute the area inside the viewport
|
|
* var v = diagram.viewportBounds.copy();
|
|
* v.subtractMargin(diagram.padding);
|
|
* // get the bounds of the part being dragged
|
|
* var b = part.actualBounds;
|
|
* var loc = part.location;
|
|
* // now limit the location appropriately
|
|
* var x = Math.max(v.x+1, Math.min(pt.x, v.right-b.width-2)) + (loc.x-b.x);
|
|
* var y = Math.max(v.y+1, Math.min(pt.y, v.bottom-b.height-2)) + (loc.y-b.y);
|
|
* return new go.Point(x, y);
|
|
* }
|
|
* ```
|
|
* Note that for this functionality you will also probably want to set Diagram#autoScrollRegion to be a zero margin.
|
|
* ```js
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, . . .,
|
|
* { dragComputation: stayInViewport },
|
|
* . . .
|
|
* );
|
|
* ```
|
|
* @see #maxLocation
|
|
* @see #minLocation
|
|
*/
|
|
dragComputation: ((thisPart: Part, newLoc: Point, snappedLoc: Point) => Point) | null;
|
|
/**
|
|
* Gets or sets the X and Y offset of this part's shadow. This is only relevant if #isShadowed is true.
|
|
* The initial value is (6, 6).
|
|
* @see #isShadowed
|
|
* @see #shadowColor
|
|
* @see #shadowBlur
|
|
*/
|
|
shadowOffset: Point;
|
|
/**
|
|
* Gets or sets the CSS string that describes a shadow color. Default is 'gray'.
|
|
* Brushes cannot be used for this property -- only strings.
|
|
* @see #isShadowed
|
|
* @see #shadowOffset
|
|
* @see #shadowBlur
|
|
*/
|
|
shadowColor: string;
|
|
/**
|
|
* Gets or sets the numerical value that describes the shadow's blur. Number must be a non-negative non-infinity float.
|
|
* A value of 0 would mean the shadow does not blur and larger numbers represent increasingly more blur.
|
|
* The total blur area is independent of the Part's area and can become quite large as this number is increased.
|
|
*
|
|
* This value is not affected by scale. Default value is 4.
|
|
* @see #isShadowed
|
|
* @see #shadowOffset
|
|
* @see #shadowColor
|
|
*/
|
|
shadowBlur: number;
|
|
}
|
|
/**
|
|
* An Adornment is a special kind of Part that is associated with another Part,
|
|
* the Adornment#adornedPart.
|
|
*
|
|
* Adornments are normally associated with a particular GraphObject in the adorned Part --
|
|
* that is the value of #adornedObject.
|
|
* However, the #adornedObject may be null, in which case the #adornedPart will also be null.
|
|
*
|
|
* The area occupied by the adorned object is represented in the Adornment's visual tree by a Placeholder.
|
|
* The placeholder is always the Part#locationObject,
|
|
* although you may specify any Spot as the Part#locationSpot.
|
|
* An adornment need not have a placeholder, but it may have at most one.
|
|
*
|
|
* Adornments can be distinguished by their Part#category.
|
|
* This property can be an arbitrary string value determined by the code creating the adornment,
|
|
* typically a tool that wants to be able to tell various adornments apart from each other.
|
|
* Use the Part#findAdornment method to find an adornment for a part of a given category.
|
|
*
|
|
* For example, one of the Adornments created by Part#updateAdornments when the part
|
|
* Part#isSelected has the Part#category of "Selection".
|
|
* Those created by ResizingTool#updateAdornments have a category of "Resize"
|
|
* and normally contain eight resize handles.
|
|
*
|
|
* Besides the selection Adornment and tool Adornments, Adornments are also used for
|
|
* context menus and tooltips.
|
|
* The #adornedObject in such cases refers to the GraphObject to which the
|
|
* the context menu or tooltip applies.
|
|
*
|
|
* There cannot be any links connected to an Adornment,
|
|
* nor can an Adornment have members or be a member of a group.
|
|
*
|
|
* An Adornment cannot have its own Adornments.
|
|
* An Adornment cannot be selected.
|
|
*
|
|
* Adornments are not positioned by a Layout because they are normally positioned
|
|
* according to the Part that they adorn.
|
|
*
|
|
* For more discussion and examples, see <a href="../../intro/selection.html">Selection</a>,
|
|
* <a href="../../intro/toolTips.html">ToolTips</a>,
|
|
* <a href="../../intro/contextMenus.html">Context Menus</a>, and
|
|
* <a href="../../intro/tools.html">Tools</a>.
|
|
* @extends Part
|
|
* @unrestricted
|
|
*/
|
|
export class Adornment extends Part {
|
|
/**
|
|
* @param {PanelLayout=} type if not supplied, the default Panel type is Panel.Position.
|
|
*/
|
|
constructor(type?: PanelLayout);
|
|
/**
|
|
* This read-only property returns a Placeholder that this Adornment may contain in its visual tree.
|
|
* This may be null if there is no such placeholder object.
|
|
*/
|
|
readonly placeholder: Placeholder | null;
|
|
/**
|
|
* Gets or sets the GraphObject that is adorned.
|
|
* Setting this property updates the adorned object's Part by calling Part#addAdornment.
|
|
* This may be null if the Adornment does not adorn a particular object.
|
|
*/
|
|
adornedObject: GraphObject | null;
|
|
/**
|
|
* This read-only property returns the Part that contains the adorned object.
|
|
* This will be null if the #adornedObject is null.
|
|
*/
|
|
readonly adornedPart: Part | null;
|
|
}
|
|
/**
|
|
* A Node is a Part that may connect to other nodes with Links,
|
|
* or that may be a member of a Group.
|
|
*
|
|
* Group inherits from Node,
|
|
* enabling nodes to logically contain other nodes and links.
|
|
* <p class="boxread">
|
|
* For a more general discussion of how to define nodes, see <a href="../../intro/nodes.html">Introduction to Nodes</a>.
|
|
*
|
|
* Although you can create a Node and Diagram#add it to a Diagram, this does not update the Model.
|
|
* It is more common to create a node by adding a node data object to the model
|
|
* by calling Model#addNodeData. For example:
|
|
* ```js
|
|
* myDiagram.startTransaction("make new node");
|
|
* myDiagram.model.addNodeData({ key: "Omega" });
|
|
* myDiagram.commitTransaction("make new node");
|
|
* ```
|
|
*
|
|
* This will cause a Node or simple Part to be created (copying the template found in Diagram#nodeTemplateMap),
|
|
* added to the Diagram in some Layer (based on Part#layerName), and bound to the node data
|
|
* (resulting in Panel#data referring to that node data object).
|
|
* If you do not keep a reference to that JavaScript object, as the above code does not,
|
|
* you can retrieve it later by calling Model#findNodeDataForKey.
|
|
*
|
|
* It is very common to initialize a Diagram by setting Model#nodeDataArray to a JavaScript Array
|
|
* of JavaScript objects holding the properties that you need in your model.
|
|
* Nearly all of the samples do this kind of initialization.
|
|
*
|
|
* You can delete a Node by either calling Diagram#remove or by calling Model#removeNodeData.
|
|
* The latter obviously will modify the Model; the former does so if the Node was created from model data.
|
|
* Commands such as CommandHandler#deleteSelection call these methods within a transaction.
|
|
*
|
|
* You can find all of the Links that are connected with a Node by calling #findLinksConnected.
|
|
* Because links normally have a direction, you can find all of the links that have their Link#toNode
|
|
* be a given Node by calling #findLinksInto.
|
|
* Similarly, you can call #findLinksOutOf to find all of the links coming out from a node;
|
|
* such links have their Link#fromNode be that node.
|
|
* For tree-structured graphs, use #findTreeChildrenLinks or #findTreeParentLink.
|
|
*
|
|
* If you are not so interested in the links but are interested in the nodes at the other end of the links
|
|
* connecting with a node, there are other methods that you can call.
|
|
* #findNodesConnected returns all of the nodes that are at the other end of the links that
|
|
* connect with a given node.
|
|
* #findNodesInto and #findNodesOutOf return the subsets of those nodes considering
|
|
* only those links that go into or come out of the given node.
|
|
* For tree-structured graphs, use #findTreeChildrenNodes or #findTreeParentNode.
|
|
*
|
|
* For example, to operate on the data of all of the destination nodes:
|
|
* ```js
|
|
* var it = somenode.findNodesOutOf();
|
|
* while (it.next()) {
|
|
* var child = it.value;
|
|
* if (child.data.text.indexOf("special") >= 0) { ... }
|
|
* }
|
|
* ```
|
|
*
|
|
* You can link two nodes by creating a new Link, setting its Link#toNode and Link#fromNode
|
|
* (in either order), and Diagram#adding it to the diagram.
|
|
* But it is more common to add a link data object to the Diagram#model by calling GraphLinksModel#addLinkData.
|
|
* Just creating and adding a Link will not update the model.
|
|
*
|
|
* Thus to add a link when using a GraphLinksModel you should do something like:
|
|
* ```js
|
|
* myDiagram.startTransaction("make new link");
|
|
* myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
|
|
* myDiagram.commitTransaction("make new link");
|
|
* ```
|
|
*
|
|
* Where you would substitute the keys of the actual nodes that you want to connect with a link.
|
|
* If you are using a TreeModel, there are no link data objects, so you just need to call
|
|
* TreeModel#setParentKeyForNodeData to specify the "parent" node's key for a "child" node data.
|
|
*
|
|
* To find a Link given a link data object in the GraphLinksModel,
|
|
* call Diagram#findLinkForData. When using a TreeModel, call either Diagram#findNodeForData
|
|
* or Diagram#findNodeForKey to get a Node, and then call #findTreeParentLink to get the Link, if any exists.
|
|
*
|
|
* To find a link that connects two nodes, call #findLinksTo or #findLinksBetween.
|
|
* With the former method, the direction matters; with the latter method it returns links in either direction.
|
|
*
|
|
* As links connect with a node or are disconnected, you may want to update the appearance of the node.
|
|
* You can set the #linkConnected and #linkDisconnected properties to be functions that are called.
|
|
* These functions must not modify any link relationships -- the properties just exist to update the appearance of the node.
|
|
* A typical usage would be to change the color or figure of a shape.
|
|
*
|
|
* You can control whether the user may draw a new link or reconnect a link between a pair of Nodes
|
|
* by affecting the result of LinkingBaseTool#isValidLink.
|
|
* You can override that predicate on LinkingTool and RelinkingTool,
|
|
* but it is easier to set the #linkValidation or
|
|
* LinkingBaseTool#linkValidation functional property.
|
|
* <p class="boxread">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* Nodes also support the ability to provide logical and physical distinctions in the connection points
|
|
* that links use at a node. These connection objects are called "ports".
|
|
* By default the port object will be the whole Node.
|
|
* However, you can set the GraphObject#portId property on any GraphObject in the visual tree of a node
|
|
* to cause that element to be treated as a "port".
|
|
* The "port id" is just a string that ought to be unique amongst all of the port elements in the node.
|
|
*
|
|
* In the case of a node only having a single port, you should set the GraphObject#portId as an empty string.
|
|
* When there is no such element declared as the default port, it uses the whole node.
|
|
* You can use the #port property to get the only port element.
|
|
*
|
|
* When a node should have multiple ports,
|
|
* i.e. multiple GraphObjects acting as separate connection points for links,
|
|
* you should set each port's GraphObject#portId to a string value that is unique for the node.
|
|
* When there may be multiple ports on a node, you can get a collection of elements representing ports
|
|
* by using the #ports property.
|
|
* Use the #findPort method to find a particular port element by name.
|
|
*
|
|
* Note: the only kind of model that can save port information, i.e. portIds that are not an empty string,
|
|
* for links is a GraphLinksModel whose GraphLinksModel#linkFromPortIdProperty and
|
|
* GraphLinksModel#linkToPortIdProperty have been set to name properties on the link data objects.
|
|
* <p class="boxread">
|
|
* For a more general discussion of ports, see <a href="../../intro/ports.html">Introduction to Ports</a>.
|
|
*
|
|
* All of the "findLinks..." and "findNodes..." methods mentioned above take an optional port id argument.
|
|
* When no argument is passed, these methods consider all links connecting with the node.
|
|
* When a port id argument is provided, these methods only consider links that connect with that port
|
|
* in the given node.
|
|
* Thus when navigating through the diagram, you can easily look at all of the nodes that links coming out of
|
|
* a given node go to. Or you can just look at those nodes at the ends of links coming out of a particular port.
|
|
*
|
|
* You can also control the default connecting behavior of Links at each port.
|
|
* Because a port can be any GraphObject, they are all properties on GraphObject.
|
|
* The properties are duplicated so that you can guide the "from" ends of links differently from the "to" ends of links.
|
|
* The properties include:
|
|
* - GraphObject#fromSpot, GraphObject#toSpot
|
|
* - GraphObject#fromEndSegmentLength, GraphObject#toEndSegmentLength
|
|
* - GraphObject#fromShortLength, GraphObject#toShortLength
|
|
* - GraphObject#fromLinkable, GraphObject#toLinkable
|
|
* - GraphObject#fromLinkableDuplicates, GraphObject#toLinkableDuplicates
|
|
* - GraphObject#fromLinkableSelfNode, GraphObject#toLinkableSelfNode
|
|
* - GraphObject#fromMaxLinks, GraphObject#toMaxLinks
|
|
*
|
|
* The "...Spot" and "...Length" and "...Direction" properties control the position and routing of links at a port.
|
|
* The "...Linkable..." and "...MaxLinks" properties control whether or not users can draw a new link
|
|
* or reconnect an existing link from or to a port.
|
|
* (The "...Spot" and "...Length" and "...Direction" properties also exist on Link, to override for a particular
|
|
* link the default values that come from a port element.)
|
|
* <p class="boxread">
|
|
* For a more general discussion of link points, see <a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
|
|
*
|
|
* When the graph is tree-structured, you can use several functions for traversing the tree:
|
|
* - #findTreeParentNode
|
|
* - #findTreeChildrenNodes
|
|
* - #findTreeParentLink
|
|
* - #findTreeChildrenLinks
|
|
* - #findTreeRoot
|
|
* - #findTreeParentChain
|
|
* - #findTreeParts
|
|
* - #findCommonTreeParent
|
|
* - #isInTreeOf
|
|
* - #findTreeLevel
|
|
*
|
|
* Determining whether a tree grows from the root via links that go out to the children or vice-versa
|
|
* is controlled for the whole diagram by the Diagram#isTreePathToChildren property.
|
|
* However an individual link will be ignored by the above functions if Link#isTreeLink is false.
|
|
*
|
|
* The Node class also supports the notion of expanding and collapsing a subtree of nodes and links,
|
|
* causing those nodes and links to be shown or hidden.
|
|
* Principally this is a matter of setting Node#isTreeExpanded.
|
|
* Of course if the diagram's graph is not tree-structured, these concepts and properties might not apply.
|
|
*
|
|
* If you want to change the appearance of the node you can do so in a function that you assign to
|
|
* the #treeExpandedChanged property.
|
|
* This function must not modify any link relationships or expand or collapse any subtrees -- the property just exists
|
|
* to update the appearance of the node.
|
|
*
|
|
* There is an option for link routing to try to avoid crossing over nodes:
|
|
* Link#routing = Link.AvoidsNodes.
|
|
* You can control whether such links should avoid or ignore a node by setting #avoidable.
|
|
* Set #avoidableMargin to control the area beyond the GraphObject#actualBounds
|
|
* where AvoidsNodes links should not go.
|
|
* <p class="boxread">
|
|
* For more discussion and examples, see <a href="../../intro/nodes.html">Nodes</a>,
|
|
* <a href="../../intro/ports.html">Ports</a>, and
|
|
* <a href="../../intro/connectionPoints.html">Link Points</a>.
|
|
* <p class="boxread">
|
|
* For more about trees, see <a href="../../intro/trees.html">Trees</a>, and
|
|
* <a href="../../intro/subtrees.html">SubTrees</a>.
|
|
* <p class="boxread">
|
|
* To customize user-resizing behavior, please read
|
|
* <a href="../../intro/tools.html#ResizingTool">Introduction to the ResizingTool</a>.
|
|
* To customize user-rotating behavior, please read
|
|
* <a href="../../intro/tools.html#RotatingTool">Introduction to the RotatingTool</a>.
|
|
*
|
|
* Only Nodes that are in Diagrams can have connections via Links.
|
|
* Templates should not be connected with Links, be labels of Links, be members of Groups, or have any Adornments.
|
|
* @extends Part
|
|
* @unrestricted
|
|
*/
|
|
export class Node extends Part {
|
|
/**
|
|
* Constructs an empty Node.
|
|
* The panel type must be one of the values permitted by Panel#type.
|
|
* @param {PanelLayout=} type if not supplied, the default Panel type is Panel.Position.
|
|
*/
|
|
constructor(type?: PanelLayout);
|
|
/**
|
|
* This value for Node#portSpreading indicates that links connecting with a port
|
|
* should all connect at a single point on the side(s) indicated by a Spot that is Spot#isSide.
|
|
* @constant
|
|
*/
|
|
static SpreadingNone: EnumValue;
|
|
/**
|
|
* This default value for Node#portSpreading indicates that links connecting with a port
|
|
* should be distributed evenly along the side(s) indicated by a Spot that is Spot#isSide.
|
|
* @constant
|
|
*/
|
|
static SpreadingEvenly: EnumValue;
|
|
/**
|
|
* This value for Node#portSpreading indicates that links connecting with a port
|
|
* should packed together based on the link's shape's width
|
|
* on the side(s) indicated by a Spot that is Spot#isSide.
|
|
* @constant
|
|
*/
|
|
static SpreadingPacked: EnumValue;
|
|
/**
|
|
* Undocumented
|
|
* @param {Node} other
|
|
* @param {string=} thisportid
|
|
* @param {string=} otherportid
|
|
*/
|
|
invalidateLinkBundle(other: Node, thisportid?: string, otherportid?: string): void;
|
|
/**
|
|
* Undocumented
|
|
* @param {Set.<Part>=} ignore An optional set of Links to ignore.
|
|
*/
|
|
invalidateConnectedLinks(ignore?: Set<Part>): void;
|
|
/**
|
|
* Gets or sets how link points are computed when the port spot is a "side" spot.
|
|
* The default value is Node.SpreadingEvenly.
|
|
* @since 1.5
|
|
*/
|
|
portSpreading: EnumValue;
|
|
/**
|
|
* Gets or sets whether this Node is to be avoided by Links
|
|
* whose Link#routing is Link.AvoidsNodes.
|
|
*
|
|
* The default value is true.
|
|
*/
|
|
avoidable: boolean;
|
|
/**
|
|
* Gets or sets the margin around this Node in which avoidable links will not be routed.
|
|
*
|
|
* You may need to increase the #fromEndSegmentLength and #toEndSegmentLength in
|
|
* order to prevent link routes from turning within the avoidable area around the Node.
|
|
*
|
|
* Value must be of type Margin.
|
|
* The default margin is Margin(2,2,2,2)
|
|
*/
|
|
avoidableMargin: MarginLike;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {Rect} result a Rect to be modified and returned.
|
|
* @return {Rect} the area in document coordinates.
|
|
*/
|
|
getAvoidableRect(result: Rect): Rect;
|
|
/**
|
|
* Undocumented
|
|
* Starting with this node, walk up the chain of containingGroups to find a node that is visible.
|
|
* This can be overridden to find a tree-parent/ancestor if the reason that this node
|
|
* is not visible is because of a collapsed tree rather than a collapsed group.
|
|
* @expose
|
|
* @return {Node}
|
|
*/
|
|
findVisibleNode(): Node | null;
|
|
/**
|
|
* This read-only property returns an iterator over all of the Links that are connected with this node.
|
|
* This includes both links that are coming out of this node as well as links that are going into this node.
|
|
* Setting Link#fromNode or Link#toNode to refer to this Node
|
|
* will add that Link to this collection.
|
|
*
|
|
* Use the #findLinksConnected, #findLinksOutOf, or #findLinksInto methods
|
|
* to get different subsets of the links, depending on direction or depending on connecting to a particular port.
|
|
*
|
|
* A template should not have any links connected with it.
|
|
*/
|
|
readonly linksConnected: Iterator<Link>;
|
|
/**
|
|
* Undocumented.
|
|
* Return a collection of Links that connect with this Node or any in its subtree, excluding any isTreeLink Links.
|
|
* For trees this is the analog of Group#findExternalLinksConnected for Groups.
|
|
* @return {Iterator.<Link>}
|
|
*/
|
|
findExternalTreeLinksConnected(): Iterator<Link>;
|
|
/**
|
|
* Returns an iterator over all of the Links that connect with this node in either direction,
|
|
* perhaps limited to the given port id on this node.
|
|
* @expose
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Link>}
|
|
*/
|
|
findLinksConnected(pid?: string | null): Iterator<Link>;
|
|
/**
|
|
* Returns an iterator over all of the Links that come out of this node,
|
|
* perhaps limited to the given port id on this node.
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Link>}
|
|
*/
|
|
findLinksOutOf(pid?: string | null): Iterator<Link>;
|
|
/**
|
|
* Returns an iterator over all of the Links that go into this node,
|
|
* perhaps limited to the given port id on this node.
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Link>}
|
|
*/
|
|
findLinksInto(pid?: string | null): Iterator<Link>;
|
|
/**
|
|
* Returns an iterator over the Nodes that are connected with this node
|
|
* in either direction, perhaps limited to the given port id on this node.
|
|
*
|
|
* The results may include this node itself if there is a reflexive link connecting this node with itself.
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Node>}
|
|
*/
|
|
findNodesConnected(pid?: string | null): Iterator<Node>;
|
|
/**
|
|
* Returns an iterator over the Nodes that are connected with this node
|
|
* by links coming out of this node, perhaps limited to the given port id on this node.
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Node>}
|
|
*/
|
|
findNodesOutOf(pid?: string | null): Iterator<Node>;
|
|
/**
|
|
* Returns an iterator over the Nodes that are connected with this node
|
|
* by links going into this node, perhaps limited to the given port id on this node.
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Node>}
|
|
*/
|
|
findNodesInto(pid?: string | null): Iterator<Node>;
|
|
/**
|
|
* Returns an iterator over all of the Links that go from this node to another node or vice-versa,
|
|
* perhaps limited to a given port id on this node and a port id on the other node.
|
|
*
|
|
* If you want all of the links between two nodes in just one direction, use #findLinksTo.
|
|
* @param {Node} othernode
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @param {string|null=} otherpid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Link>}
|
|
* @since 1.2
|
|
*/
|
|
findLinksBetween(othernode: Node, pid?: string | null, otherpid?: string | null): Iterator<Link>;
|
|
/**
|
|
* Returns an iterator over all of the Links that go from this node to another node,
|
|
* perhaps limited to a given port id on this node and a port id on the other node.
|
|
*
|
|
* If you want all of the links between two nodes in both directions, use #findLinksBetween.
|
|
* @param {Node} othernode
|
|
* @param {string|null=} pid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @param {string|null=} otherpid A port identifier string; if null the link's portId is ignored and all links are included in the search.
|
|
* @return {Iterator.<Link>}
|
|
* @since 1.2
|
|
*/
|
|
findLinksTo(othernode: Node, pid?: string | null, otherpid?: string | null): Iterator<Link>;
|
|
/**
|
|
* Gets or sets the function that is called after a Link has been connected with this Node.
|
|
* It is typically used to modify the appearance of the node.
|
|
* The first argument will be this Node.
|
|
* The second argument will be a Link that is now connected with this node.
|
|
* The third argument will be a GraphObject port indicating which port the link was connected with.
|
|
*
|
|
* If the value is a function, that function must not modify what this Node is connected with.
|
|
* The Link has already been added -- trying to remove it or another link may produce undefined behavior.
|
|
* However, the other end of the link may not yet have been connected with a node (and might never be),
|
|
* so you cannot depend on looking at what the link connects with.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
linkConnected: ((thisNode: Node, newLink: Link, thisPort: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the function that is called after a Link has been disconnected from this Node.
|
|
* It is typically used to modify the appearance of the node.
|
|
* The first argument will be this Node.
|
|
* The second argument will be a Link that had been connected with this node.
|
|
* The third argument will be a GraphObject port indicating which port the link had been connected with.
|
|
*
|
|
* If the value is a function, that function must not modify what this Node is connected with.
|
|
* The Link has already been removed -- trying to add it or another link may produce undefined behavior.
|
|
* The other end of the link may not yet have been disconnected from a node (and might never be),
|
|
* so you cannot depend on looking at what the link connects with.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
linkDisconnected: ((thisNode: Node, oldLink: Link, thisPort: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets a predicate that determines whether or not a Link may be connected with this node.
|
|
* If this is non-null, the predicate is called in addition to the predicate that is LinkingBaseTool#linkValidation
|
|
* on the LinkingTool and RelinkingTool.
|
|
* See LinkingBaseTool#isValidLink for more details.
|
|
*
|
|
* The default predicate is null, which is equivalent to simply returning true.
|
|
* The first argument will be the proposed "from" Node (may be null).
|
|
* The second argument will be the proposed "from" GraphObject port (may be null).
|
|
* The third argument will be the proposed "to" Node (may be null).
|
|
* The fourth argument will be the proposed "to" GraphObject port (may be null).
|
|
* The fifth argument may be null when asking about creating a new link,
|
|
* or may be a Link when asking about reconnecting an existing link.
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
* @since 1.3
|
|
*/
|
|
linkValidation: ((fromNode: Node, fromPort: GraphObject, toNode: Node, toPort: GraphObject, link: Link) => boolean) | null;
|
|
/**
|
|
* This read-only property is true when this Node is a label node for a Link.
|
|
*
|
|
* If this is true, then `n.labeledLink` will be a Link and `n.labeledLink.isLabeledLink` will be true.
|
|
* @see #labeledLink
|
|
*/
|
|
readonly isLinkLabel: boolean;
|
|
/**
|
|
* Gets or sets the Link for which this Node is acting as a smart label.
|
|
* Most nodes do not act as link labels, so this property will be null.
|
|
*
|
|
* A template should not be a label node for a link.
|
|
* @see #isLinkLabel
|
|
*/
|
|
labeledLink: Link | null;
|
|
/**
|
|
* Find a GraphObject with a given GraphObject#portId.
|
|
* If no such GraphObject is found, search for one with the empty string as its port identifier.
|
|
* Finally, when failing to find a port with either the given name or the empty string,
|
|
* this method returns this whole node itself.
|
|
* @param {string} pid
|
|
* @return {GraphObject}
|
|
*/
|
|
findPort(pid: string): GraphObject;
|
|
/**
|
|
* This read-only property returns the primary GraphObject representing a port in this node.
|
|
* If there is a GraphObject whose GraphObject#portId is the empty string, return it.
|
|
* If there is no such element, just return this whole Node.
|
|
*/
|
|
readonly port: GraphObject;
|
|
/**
|
|
* This read-only property returns an iterator over all of the GraphObjects in this node that act as ports.
|
|
*/
|
|
readonly ports: Iterator<GraphObject>;
|
|
/**
|
|
* This predicate is true if this node is a child of the given Node, perhaps indirectly as a descendant.
|
|
*
|
|
* If this node is a child of the given node according to Diagram#isTreePathToChildren, this returns true.
|
|
* Otherwise this searches recursively the chain of tree parents of this node,
|
|
* ignoring links for which Link#isTreeLink is false.
|
|
* A node cannot be in its own subtree.
|
|
*
|
|
* If you what to find out whether this Node is (perhaps indirectly) contained by a Group, use Part#isMemberOf.
|
|
* @param {Node} node the Node that might be a parent or ancestor of this node.
|
|
* @return {boolean} true if the given node is an ancestor of this node, but false otherwise, including false if it is the same node.
|
|
* @see #findTreeRoot
|
|
* @see #findTreeParentChain
|
|
*/
|
|
isInTreeOf(node: Node): boolean;
|
|
/**
|
|
* Return the Node that is at the root of the tree that this node is in, perhaps this node itself.
|
|
*
|
|
* This node will be #isInTreeOf the resulting node, unless the resulting node is this node itself.
|
|
* The graph traversal will ignore links for which Link#isTreeLink is false.
|
|
*
|
|
* If you want to search up the containment hierarchy of Groups, use Part#findTopLevelPart.
|
|
* @return {Node} If this Node has no "tree parent", this returns itself.
|
|
* @see Diagram#isTreePathToChildren
|
|
* @see #findTreeParentChain
|
|
* @since 1.2
|
|
*/
|
|
findTreeRoot(): Node;
|
|
/**
|
|
* Find the Node that is the perhaps indirect tree parent of both this node and another one,
|
|
* or this node if it is an ancestor of the other node, or vice-versa.
|
|
*
|
|
* If you want to find the Group that contains two Parts, call Part#findCommonContainingGroup.
|
|
* @param {Node} other
|
|
* @return {Node} may be null if in different trees,
|
|
* or may be itself if the OTHER argument is THIS node,
|
|
* or may be itself if the OTHER node is a descendant of THIS node,
|
|
* or may be the OTHER node if THIS node is in the tree of the OTHER node.
|
|
* @see #findTreeRoot
|
|
* @see #findTreeParentChain
|
|
* @since 1.5
|
|
*/
|
|
findCommonTreeParent(other: Node): Node | null;
|
|
/**
|
|
* Returns the Link that connects with the tree parent Node of this node if the graph is tree-structured,
|
|
* if there is such a link and Link#isTreeLink is true.
|
|
* @return {Link} The Link to the parent Node, or null if there is no parent node.
|
|
* @see #findTreeParentNode
|
|
* @see #findTreeChildrenLinks
|
|
* @see Diagram#isTreePathToChildren
|
|
* @see #findTreeRoot
|
|
* @see #findTreeParentChain
|
|
* @since 1.1
|
|
*/
|
|
findTreeParentLink(): Link | null;
|
|
/**
|
|
* Returns the Node that is the tree parent of this node if the graph is tree-structured, if there is a parent.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
* @return {Node} The parent Node, or null if there is no parent node.
|
|
* @see #findTreeParentLink
|
|
* @see #findTreeChildrenNodes
|
|
* @see Diagram#isTreePathToChildren
|
|
* @see #findTreeRoot
|
|
* @see #findTreeParentChain
|
|
* @since 1.1
|
|
*/
|
|
findTreeParentNode(): Node | null;
|
|
/**
|
|
* Return a collection of Parts including this Node,
|
|
* its tree parent link and node, and so on up the chain to the root node.
|
|
*
|
|
* This calls #findTreeParentLink and #findTreeParentNode.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
*
|
|
* This may result in undefined behavior if there are cycles of Links that are Link#isTreeLink.
|
|
*
|
|
* The result will include this node and the "root" node and all nodes and links in between.
|
|
* The root node is also accessible directly via #findTreeRoot.
|
|
* If any of the nodes are Groups, their member parts are not included.
|
|
* @return {Set.<Part>} A Set of Nodes and Links.
|
|
* @see #findTreeRoot
|
|
* @see #findTreeParts
|
|
* @since 1.7
|
|
*/
|
|
findTreeParentChain(): Set<Part>;
|
|
/**
|
|
* Return how deep this node is in a tree structure.
|
|
* For tree root nodes, this returns zero.
|
|
* This calls #findTreeParentNode to find any tree parent node,
|
|
* so this respects Diagram#isTreePathToChildren and Link#isTreeLink
|
|
* to know which way to traverse links and to know to ignore non-tree links.
|
|
*
|
|
* This may result in undefined behavior if there are cycles of Links that are Link#isTreeLink.
|
|
*
|
|
* If you want to know how deep a Part is nested inside Groups, call Part#findSubGraphLevel.
|
|
* @return {number}
|
|
* @see #findTreeRoot
|
|
* @see #findTreeParentChain
|
|
* @since 1.5
|
|
*/
|
|
findTreeLevel(): number;
|
|
/**
|
|
* Returns an Iterator for the collection of Links that connect with the immediate tree children of this node.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
*
|
|
* This basically returns either #findLinksOutOf or #findLinksInto,
|
|
* depending on Diagram#isTreePathToChildren,
|
|
* but the results excludes links for which Link#isTreeLink is false.
|
|
* @return {Iterator.<Link>}
|
|
* @see #findTreeParentLink
|
|
* @see #findTreeChildrenNodes
|
|
* @see #findTreeParts
|
|
* @since 1.1
|
|
*/
|
|
findTreeChildrenLinks(): Iterator<Link>;
|
|
/**
|
|
* Returns an Iterator for the collection of Nodes that are the immediate tree children of this node.
|
|
* Nodes only connected by links for which Link#isTreeLink is false are ignored.
|
|
*
|
|
* This basically returns either #findNodesOutOf or #findNodesInto,
|
|
* depending on Diagram#isTreePathToChildren.
|
|
* @return {Iterator.<Node>}
|
|
* @see #findTreeParentNode
|
|
* @see #findTreeChildrenLinks
|
|
* @see #findTreeParts
|
|
* @since 1.1
|
|
*/
|
|
findTreeChildrenNodes(): Iterator<Node>;
|
|
/**
|
|
* Return a collection of Parts including this Node,
|
|
* all of the Links going to child Nodes, and all of their
|
|
* tree child nodes and links.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
*
|
|
* Whether child nodes are found for a parent node by following links out of the parent node or
|
|
* by links coming into the parent node is determined by the value of Diagram#isTreePathToChildren.
|
|
*
|
|
* The result will include this, the "root" node.
|
|
* If any of the nodes are Groups, their member parts are not included.
|
|
*
|
|
* If you want to find the collection of Parts that are contained by a Group, use Group#findSubGraphParts.
|
|
* @param {number=} level How many levels of the tree, starting at this node, to include;
|
|
* the default is Infinity, including all tree children of this node. Values less than 1 are treated as 1.
|
|
* @return {Set.<Part>} A Set of Nodes and Links.
|
|
* @see #findTreeChildrenNodes
|
|
* @see #findTreeChildrenLinks
|
|
* @see #findTreeParentChain
|
|
*/
|
|
findTreeParts(level?: number): Set<Part>;
|
|
/**
|
|
* Hide each child node and the connecting link,
|
|
* and recursively collapse each child node.
|
|
* This changes the value of Part#isVisible of the whole subtree and the parts owned by
|
|
* those nodes and links.
|
|
* However, this root node's visibility is unchanged.
|
|
*
|
|
* Links are assumed to go from the parent node to the children nodes,
|
|
* unless Diagram#isTreePathToChildren is false.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
*
|
|
* This sets #isTreeExpanded to false on this node and on all of the children nodes.
|
|
* For those child nodes that were expanded when they were collapsed,
|
|
* #wasTreeExpanded is set to true.
|
|
*
|
|
* You can also pass in a number of levels to hide nodes beyond a certain level starting at this node.
|
|
* If you want to make sure that all nodes are expanded up to a particular level, call #expandTree.
|
|
* If you want to do both, call `expandTree` before calling `collapseTree` to
|
|
* collapse nodes expanded due to the #wasTreeExpanded flag.
|
|
*
|
|
* This method does not perform a transaction or start any animation.
|
|
* You may want to call the CommandHandler#collapseTree command, which does perform a transaction
|
|
* and raise a DiagramEvent.
|
|
*
|
|
* To collapse a Group's subgraph of Nodes and Links, use Group#collapseSubGraph.
|
|
* @param {number=} level How many levels of the tree, starting at this node, to keep expanded if already expanded;
|
|
* the default is 1, hiding all tree children of this node. Values less than 1 are treated as 1.
|
|
* @see #expandTree
|
|
* @see #findTreeParts
|
|
*/
|
|
collapseTree(level?: number): void;
|
|
/**
|
|
* Show each child node and the connecting link,
|
|
* and perhaps recursively expand their child nodes.
|
|
* This may change the value of Part#isVisible of the whole subtree and the parts owned by
|
|
* those nodes and links.
|
|
* However, this root node's visibility is unchanged.
|
|
*
|
|
* This sets #isTreeExpanded to true on this node and on all of the children nodes.
|
|
* Links are assumed to go from the parent node to the children nodes,
|
|
* unless Diagram#isTreePathToChildren is false.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
*
|
|
* This will expand a tree child node only if its #wasTreeExpanded property was true.
|
|
*
|
|
* You can also pass in a number of levels in order to be sure that all nodes
|
|
* starting at this node and up through that number of levels are visible.
|
|
* If you want to make sure that there are no nodes expanded after a particular level, call #collapseTree.
|
|
* If you want to do both, call `expandTree` before calling `collapseTree` to
|
|
* collapse nodes expanded due to the #wasTreeExpanded flag.
|
|
*
|
|
* This method does not perform a transaction or start any animation.
|
|
* You may want to call the CommandHandler#expandTree command, which does perform a transaction
|
|
* and raise a DiagramEvent.
|
|
*
|
|
* To expand a Group's subgraph of Nodes and Links, use Group#expandSubGraph.
|
|
* @param {number=} level How many levels of the tree should be expanded;
|
|
* the default is 2, showing all tree children of this node and potentially more.
|
|
* Values less than 2 are treated as 2.
|
|
* @see #collapseTree
|
|
* @see #findTreeParts
|
|
*/
|
|
expandTree(level?: number): void;
|
|
/**
|
|
* Gets or sets whether the subtree graph starting at this node is expanded.
|
|
* Changing this property's value will call #collapseTree or #expandTree,
|
|
* and also will call the value of #treeExpandedChanged if it is a function.
|
|
*
|
|
* The initial value is true -- "tree-child" nodes, and the links to them, are shown.
|
|
*
|
|
* There is an analogous property for expanded/collapsed Groups: Group#isSubGraphExpanded.
|
|
*/
|
|
isTreeExpanded: boolean;
|
|
/**
|
|
* Gets or sets whether the subtree graph starting at this node
|
|
* had been collapsed by a call to #expandTree on the parent node.
|
|
* The initial value is false.
|
|
* @see #isTreeExpanded
|
|
*/
|
|
wasTreeExpanded: boolean;
|
|
/**
|
|
* Gets or sets the function that is called when #isTreeExpanded has changed value.
|
|
* The argument to that function will be this Node.
|
|
*
|
|
* If the value is a function, that function must not expand or collapse any trees of nodes and links.
|
|
* The Node has already been expanded or collapsed -- trying to change it again may produce undefined behavior.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
treeExpandedChanged: ((thisNode: Node) => void) | null;
|
|
/**
|
|
* Gets whether this node has no tree children.
|
|
*
|
|
* The initial value is true, meaning that there are no links connected with child nodes
|
|
* in the direction given by Diagram#isTreePathToChildren.
|
|
* This value changes automatically as link connections are added to or removed from this node.
|
|
* Links for which Link#isTreeLink is false are ignored.
|
|
*/
|
|
isTreeLeaf: boolean;
|
|
}
|
|
/**
|
|
* A Group is a Node that can contain a subgraph of Nodes and Links,
|
|
* which are members of the group.
|
|
* <p class="box">
|
|
* For more discussion, see <a href="../../intro/groups.html">Introduction to Groups</a>.
|
|
* See samples that make use of Groups in the <a href="../../samples/index.html#groups">samples index</a>.
|
|
*
|
|
* Although you can create a Group and Diagram#add it to a Diagram, this does not update the Model.
|
|
* It is more common to create a group by adding a node data object to the model
|
|
* by calling Model#addNodeData. For example:
|
|
* ```js
|
|
* myDiagram.startTransaction("make new group");
|
|
* myDiagram.model.addNodeData({ key: "Omega", isGroup: true });
|
|
* myDiagram.commitTransaction("make new group");
|
|
* ```
|
|
*
|
|
* This will cause a Group to be created (copying the template found in Diagram#groupTemplateMap),
|
|
* added to the Diagram in some Layer (based on Part#layerName), and bound to the group data
|
|
* (resulting in Panel#data referring to that group data object).
|
|
* Note that the JavaScript object includes setting `isGroup` to true,
|
|
* to indicate that the object represents a Group rather than a regular Node or simple Part.
|
|
*
|
|
* The member Parts of a Group, which you can access as the #memberParts collection,
|
|
* belong to the group but are not in the visual tree of the group.
|
|
* All Parts are directly in Layers -- they cannot be inside a Panel.
|
|
* This allows group member parts to be in layers different from the group's layer.
|
|
*
|
|
* You can change the membership of a Node or a simple Part in a Group by setting
|
|
* its Part#containingGroup property.
|
|
* This is done automatically for you by the diagram if you initialize the `group` property on the node data
|
|
* in the model to be the key of the containing group node data.
|
|
* Thus you should do something like:
|
|
* ```js
|
|
* myDiagram.startTransaction("add new member");
|
|
* myDiagram.model.addNodeData({ group: someexistinggroup.data.key, ... });
|
|
* myDiagram.commitTransaction("add new member");
|
|
* ```
|
|
*
|
|
* where you would make sure the node data object included all of the properties you need.
|
|
* You can also change the relationship dynamically by calling GraphLinksModel#setGroupKeyForNodeData.
|
|
*
|
|
* The membership of Links is computed automatically for you by the diagram based on the membership of
|
|
* the connected Nodes.
|
|
* For example, if the Link#fromNode is a top-level node but the Link#toNode is a member of a group,
|
|
* the link is a top-level link.
|
|
* If the two connected nodes both belong to the same group, the link is a member of that group.
|
|
* If the two connected nodes belong to different groups, the link belongs to the common container group, if there is any.
|
|
* Note that if a link connects a member of a group with the group itself, the link is a member of that group.
|
|
*
|
|
* All of the group-member relationships effectively form a tree structure.
|
|
* These properties and methods are useful in navigating these relationships:
|
|
* - Part#containingGroup
|
|
* - Part#isTopLevel
|
|
* - Part#findTopLevelPart
|
|
* - Part#findSubGraphLevel
|
|
* - Part#findCommonContainingGroup
|
|
* - #memberParts
|
|
* - #findSubGraphParts
|
|
* - #findExternalLinksConnected
|
|
* - #findExternalNodesConnected
|
|
*
|
|
* As the membership of a group changes, you may want to update the appearance of the group.
|
|
* You can set the #memberAdded and #memberRemoved properties to be functions that are called.
|
|
* These functions must not modify any membership relationships -- these function properties just exist to update the appearance of the Group.
|
|
*
|
|
* You can control whether certain Nodes are added to a Group by CommandHandler#groupSelection or
|
|
* #addMembers or CommandHandler#addTopLevelParts by affecting the result of CommandHandler#isValidMember,
|
|
* which is responsible for deciding whether it is OK to add a Node to a Group or to remove a Node from a Group to be a top-level node.
|
|
* You can override that predicate on CommandHandler, but it is easier to set the #memberValidation or
|
|
* CommandHandler#memberValidation functional property.
|
|
* <p class="box">
|
|
* For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
*
|
|
* The area occupied by the subgraph is represented in the group's visual tree by a Placeholder.
|
|
* As the group #placeholder grows and shrinks based on the sizes and positions of the member nodes and links,
|
|
* the group will grow and shrink accordingly.
|
|
* The placeholder is always the Part#locationObject,
|
|
* although you may specify any Spot as the Part#locationSpot.
|
|
* A Group need not have a placeholder, but it may have at most one.
|
|
*
|
|
* A group has its own #layout property that is used to position the member nodes and route the member links.
|
|
*
|
|
* The Group class also supports the notion of expanding and collapsing the subgraph,
|
|
* causing the member nodes and links to be shown or hidden.
|
|
* Principally this is a matter of setting #isSubGraphExpanded.
|
|
* Changes to this property will result in calls to #collapseSubGraph or #expandSubGraph, as appropriate.
|
|
*
|
|
* If you want to change the appearance of the group you can do so in a function that you assign to
|
|
* the #subGraphExpandedChanged property.
|
|
* This function must not modify any member relationships or expand or collapse any groups -- the functional property just exists
|
|
* to update the appearance of the Group.
|
|
* <p class="box">
|
|
* For more discussion and examples, see <a href="../../intro/subgraphs.html">SubGraphs</a>.
|
|
*
|
|
* If you want the user to be able to create a Group out of the currently
|
|
* selected Parts using the CommandHandler#groupSelection command,
|
|
* you need to first set the CommandHandler#archetypeGroupData property
|
|
* to a data object with `isGroup` set to true.
|
|
* If you want the user to be able to ungroup a Group,
|
|
* using the CommandHandler#ungroupSelection command,
|
|
* you need to set #ungroupable to true.
|
|
* <p class="box">
|
|
* For more discussion and examples, see <a href="../../intro/groups.html">Groups</a>,
|
|
* <a href="../../intro/subgraphs.html">SubGraphs</a>, and
|
|
* <a href="../../intro/sizedGroups.html">Sized Groups</a>.
|
|
*
|
|
* Only Groups that are in Diagrams can have member Parts or connections via Links.
|
|
* Templates should not be connected with Links, be labels of Links, be members of Groups, have any member Parts, or have any Adornments.
|
|
* @extends Node
|
|
* @unrestricted
|
|
*/
|
|
export class Group extends Node {
|
|
/**
|
|
* Constructs an empty Group with no visual elements and no member parts;
|
|
* normally a Group will have some visual elements surrounding a Placeholder.
|
|
* @param {PanelLayout=} type if not supplied, the default Panel type is Panel.Position.
|
|
*/
|
|
constructor(type?: PanelLayout);
|
|
/**
|
|
* Measures if needed to make sure the GraphObject#measuredBounds and GraphObject#naturalBounds are all real numbers,
|
|
* primarily to get the actual width and height.
|
|
* GraphObject#actualBounds will get a real width and height, but the x and y values may continue to be `NaN`
|
|
* if they were that way beforehand.
|
|
*
|
|
* This is sometimes necessary to call when defining custom layouts or implementing virtualization,
|
|
* so that it can work with the actual size of the nodes.
|
|
*
|
|
* For efficiency, do not call this method unnecessarily.
|
|
* @since 1.6
|
|
*/
|
|
ensureBounds(): void;
|
|
/**
|
|
* This read-only property returns a Placeholder that this group may contain in its visual tree.
|
|
*/
|
|
readonly placeholder: Placeholder | null;
|
|
/**
|
|
* Gets or sets whether the size of the area of the Group's #placeholder
|
|
* should remain the same during a DraggingTool move until a drop occurs.
|
|
* Groups within temporary layers (such as new Groups during a drag-copy) are unaffected by this property.
|
|
*
|
|
* In other words, when the value is true, re-computing the bounds of the
|
|
* members is suspended until a drop occurs, at which time the border is recomputed,
|
|
* perhaps not including some members that had been dragged out and reparented.
|
|
* The initial value is false.
|
|
*/
|
|
computesBoundsAfterDrag: boolean;
|
|
/**
|
|
* Gets or sets whether a #placeholder's bounds includes the bounds of member Links.
|
|
* The default value is true.
|
|
* If this is false, only non-Link member Parts are used to compute the Placeholder's bounds in document coordinates.
|
|
*/
|
|
computesBoundsIncludingLinks: boolean;
|
|
/**
|
|
* Gets or sets whether a #placeholder's bounds includes the previous Group.location.
|
|
* The default value is false.
|
|
*/
|
|
computesBoundsIncludingLocation: boolean;
|
|
/**
|
|
* Gets or sets whether drag-and-drop events may be bubbled up to this Group if not handled by member Parts.
|
|
* The default value is false -- each Node or Link that is a member of the Group needs to define
|
|
* its own GraphObject#mouseDragEnter, GraphObject#mouseDragLeave, and GraphObject#mouseDrop
|
|
* event handlers if you want dragging/dropping on a member part to act as if the user were acting on the group.
|
|
*
|
|
* This is currently restricted to only call the mouseDragEnter, mouseDragLeave, and mouseDrop event handlers
|
|
* defined on the whole Group, not on any element inside the Group's visual tree.
|
|
* @since 1.5
|
|
*/
|
|
handlesDragDropForMembers: boolean;
|
|
/**
|
|
* This read-only property returns an iterator over the member Parts of this Group.
|
|
* Setting Part#containingGroup to refer to this Group
|
|
* will add that part to this collection.
|
|
* The Parts can be Nodes, Links, Groups, or simple Parts.
|
|
*
|
|
* A template should not have any member parts.
|
|
*/
|
|
readonly memberParts: Iterator<Part>;
|
|
/**
|
|
* Gets or sets the Layout used to position all of the immediate member nodes and links in this group.
|
|
* By default this property is an instance of Layout -- no special layout is used, which just makes
|
|
* sure each member node has a valid location.
|
|
*/
|
|
layout: Layout | null;
|
|
/**
|
|
* Gets or sets the function that is called after a member Part has been added to this Group.
|
|
* It is typically used to modify the appearance of the group.
|
|
* The first argument will be this Group.
|
|
* The second argument will be a Part, typically a Node, but may be a simple Part or a Link.
|
|
*
|
|
* If the value is a function, that function must not modify any membership relationships.
|
|
* The member Part has already been added -- trying to remove it or adding or removing another member or the Group itself may produce undefined behavior.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
memberAdded: ((thisGroup: Group, newPart: Part) => void) | null;
|
|
/**
|
|
* Gets or sets the function that is called after a member Part has been removed from this Group.
|
|
* It is typically used to modify the appearance of the group.
|
|
* The first argument will be this Group.
|
|
* The second argument will be a Part, typically a Node, but may be a simple Part or a Link.
|
|
*
|
|
* If the value is a function, that function must not modify any membership relationships.
|
|
* The member Part has already been removed -- trying to add it or adding or removing another member or the Group itself may produce undefined behavior.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
memberRemoved: ((thisGroup: Group, oldPart: Part) => void) | null;
|
|
/**
|
|
* Gets or sets the predicate that determines whether or not a Part may become a member of this group.
|
|
* If this is non-null, the predicate is called in addition to any CommandHandler#memberValidation predicate.
|
|
*
|
|
* The default predicate is null, which is equivalent to simply returning true.
|
|
* The first argument will be this Group.
|
|
* The second argument will be a Part, typically a Node, but will not be a Link or an Adornment.
|
|
*
|
|
* The function, if supplied, must not have any side-effects.
|
|
*/
|
|
memberValidation: ((thisGroup: Group, part: Part) => boolean) | null;
|
|
/**
|
|
* See if the given collection of Parts contains non-Links all for which
|
|
* CommandHandler#isValidMember returns true.
|
|
*
|
|
* The CommandHandler predicate will use CommandHandler#memberValidation
|
|
* and #memberValidation, if either or both are defined.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @param {Iterable.<Part>} coll
|
|
* @return {boolean} true.
|
|
*/
|
|
canAddMembers(coll: Iterable<Part>): boolean;
|
|
/**
|
|
* Add the Parts in the given collection as members of this Group
|
|
* for those Parts for which CommandHandler#isValidMember returns true.
|
|
* If the check argument to this method is not supplied or false,
|
|
* this will set Part#containingGroup on each part unconditionally, not calling CommandHandler#isValidMember.
|
|
*
|
|
* The CommandHandler predicate will use CommandHandler#memberValidation
|
|
* and #memberValidation, if either or both are defined.
|
|
*
|
|
* At this time there is no "removeMembers" method.
|
|
* If you want to make a collection of Parts to be top-level parts, not members of any Group but still in the Diagram, call CommandHandler#addTopLevelParts.
|
|
* If you want to remove a collection of Parts not only from a Group but from the whole Diagram, call Diagram#removeParts.
|
|
* @expose
|
|
* @param {Iterable.<Part>} coll
|
|
* @param {boolean=} check whether to call CommandHandler#isValidMember to confirm that it is valid to add the Part to be a member of this Group.
|
|
* @return {boolean} true if all non-Links were added to this Group; false if some Parts or Nodes were not able to be added.
|
|
*/
|
|
addMembers(coll: Iterable<Part>, check?: boolean): boolean;
|
|
/**
|
|
* Gets or sets whether the user may ungroup this group.
|
|
* The initial value is false.
|
|
* @see #canUngroup
|
|
*/
|
|
ungroupable: boolean;
|
|
/**
|
|
* This predicate returns true if #ungroupable is true,
|
|
* if the layer's Layer#allowUngroup is true, and
|
|
* if the diagram's Diagram#allowUngroup is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may ungroup this object.
|
|
*/
|
|
canUngroup(): boolean;
|
|
/**
|
|
* Returns an iterator over all of the Links that connect with this group or any node contained by this group,
|
|
* in either direction, but that are not internal to this group.
|
|
*
|
|
* Links that are contained by this group (even in nested groups) are not included in the result collection.
|
|
* @return {Iterator.<Link>}
|
|
* @see Node#findLinksConnected
|
|
* @since 1.3
|
|
*/
|
|
findExternalLinksConnected(): Iterator<Link>;
|
|
/**
|
|
* Returns an iterator over all of the Nodes that are connected with this group or any node contained by this group,
|
|
* by a link in either direction, but that are not internal to this group.
|
|
*
|
|
* Nodes that are contained by this group (even in nested groups) are not included in the result collection.
|
|
* However this group itself might be in the results if there is a reflexive link connected to this group.
|
|
* @return {Iterator.<Node>}
|
|
* @see Node#findNodesConnected
|
|
* @since 1.3
|
|
*/
|
|
findExternalNodesConnected(): Iterator<Node>;
|
|
/**
|
|
* Return a collection of Parts that are all of the nodes and links
|
|
* that are members of this group, including inside nested groups and label nodes,
|
|
* but excluding this group itself.
|
|
*
|
|
* For member nodes that are Groups, this will include its members recursively.
|
|
*
|
|
* If you want only the immediate members of this group, use the #memberParts property.
|
|
*
|
|
* If you want to find the collection of Nodes and Links that are in the subtree of a given Node, use Node#findTreeParts.
|
|
* @return {Set.<Part>}
|
|
*/
|
|
findSubGraphParts(): Set<Part>;
|
|
/**
|
|
* Hide each of the member nodes and links of this group,
|
|
* and recursively collapse any member groups.
|
|
* This changes the value of Part#isVisible of the whole subgraph and the parts owned by
|
|
* those member nodes and links.
|
|
* However, this group's visibility is unchanged.
|
|
*
|
|
* This sets #isSubGraphExpanded to false on this group and on all of the nested Groups.
|
|
* For those nested Groups that were expanded,
|
|
* #wasSubGraphExpanded is set to true.
|
|
*
|
|
* This method does not perform a transaction or start any animation.
|
|
*
|
|
* To collapse trees made of Nodes and Links, use Node#collapseTree.
|
|
*/
|
|
collapseSubGraph(): void;
|
|
/**
|
|
* Show each member node and link,
|
|
* and perhaps recursively expand nested subgraphs.
|
|
* This may change the value of Part#isVisible of the whole subgraph and the parts owned by
|
|
* those member nodes and links.
|
|
* However, this group's visibility is unchanged.
|
|
*
|
|
* This sets #isSubGraphExpanded to true on this group and on all of the nested Groups.
|
|
* This will expand a nested group only if its #wasSubGraphExpanded property was true.
|
|
*
|
|
* This method does not perform a transaction or start any animation.
|
|
*
|
|
* To expand trees made of Nodes and Links, use Node#expandTree.
|
|
*/
|
|
expandSubGraph(): void;
|
|
/**
|
|
* Gets or sets whether the subgraph contained by this group is expanded.
|
|
* Changing this property's value will call #collapseSubGraph or #expandSubGraph,
|
|
* and also will call the value of #subGraphExpandedChanged if it is a function.
|
|
*
|
|
* The initial value is true -- this group's member parts are shown.
|
|
*
|
|
* There is an analogous property for expanded/collapsed trees of Nodes and Links: Node#isTreeExpanded.
|
|
*/
|
|
isSubGraphExpanded: boolean;
|
|
/**
|
|
* Gets or sets whether the subgraph starting at this group
|
|
* had been collapsed by a call to #expandSubGraph on the containing Group.
|
|
* The initial value is false.
|
|
* @see #isSubGraphExpanded
|
|
*/
|
|
wasSubGraphExpanded: boolean;
|
|
/**
|
|
* Gets or sets the function that is called when #isSubGraphExpanded has changed value.
|
|
* The argument to that function will be this Group.
|
|
*
|
|
* If the value is a function, that function must not expand or collapse any groups.
|
|
* The Group has already been expanded or collapsed -- trying to change it again may produce undefined behavior.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
subGraphExpandedChanged: ((thisGroup: Group) => void) | null;
|
|
/**
|
|
* Move this Group and all of its member parts, recursively.
|
|
*
|
|
* This method does not perform a transaction or start any animation.
|
|
* @param {Point} newpos a new Point in document coordinates.
|
|
* @param {boolean=} useLocation true if you want to set the #location instead of the position. False by default.
|
|
*/
|
|
move(newpos: Point, useLocation?: boolean): void;
|
|
}
|
|
/**
|
|
* If a Placeholder is in the visual tree of a Group, it represents the area of all of the member Parts of that Group.
|
|
* If a Placeholder is in the visual tree of an Adornment, it represents the area of the Adornment#adornedObject.
|
|
* Unlike other GraphObjects, the Placeholder measures itself based on these criteria, and not on its own #desiredSize or #scale.
|
|
* It will set its own natural bounds and scale, and in the case of Groups will set the Group's location.
|
|
*
|
|
* It can only be used in the visual tree of a Group node or an Adornment.
|
|
* There can be at most one Placeholder in a Group or an Adornment.
|
|
*
|
|
* See the documentation for Group and Adornment for descriptions of the Placeholder roles in each.
|
|
* @extends GraphObject
|
|
* @unrestricted
|
|
*/
|
|
export class Placeholder extends GraphObject {
|
|
/**
|
|
* This normally does not need any initialization,
|
|
* except for maybe setting #padding.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* This is only called when the Placeholder is inside a Group.
|
|
* Normally this just returns the result of #computeMemberBounds expanded by the #padding.
|
|
* However, if Group#computesBoundsAfterDrag is true,
|
|
* and if the Diagram#currentTool is the DraggingTool,
|
|
* and if this Group is not being dragged,
|
|
* this method returns the last value of #computeBorder before dragging began.
|
|
* @expose
|
|
* @param {Rect} result
|
|
* @return {Rect} in document coordinates.
|
|
*/
|
|
protected computeBorder(result: Rect): Rect;
|
|
/**
|
|
* Compute the union of the Bounds of this Placeholder's parent's Group.memberParts.
|
|
* If there are no members, this returns a Rect with Width and Height of zero
|
|
* and an X and Y that are this panel's original location in document coordinates.
|
|
* This is only called when the Placeholder is inside a Group.
|
|
* @expose
|
|
* @param {Rect} result
|
|
* @return {Rect} in document coordinates.
|
|
*/
|
|
protected computeMemberBounds(result: Rect): Rect;
|
|
/**
|
|
* Gets or sets the padding around the members of the Group or around the Adornment#adornedObject GraphObject.
|
|
* The initial value is a Margin of zero on all sides.
|
|
*/
|
|
padding: MarginLike;
|
|
}
|
|
/**
|
|
* A Link is a Part that connects Nodes.
|
|
* The link relationship is directional, going from Link#fromNode to Link#toNode.
|
|
* A link can connect to a specific port element in a node, as named by the Link#fromPortId
|
|
* and Link#toPortId properties.
|
|
* <p class="boxread">
|
|
* For more discussion, see <a href="../../intro/links.html">Introduction to Links</a>.
|
|
*
|
|
* To add a Link to a Diagram when using a GraphLinksModel you should do something like:
|
|
* ```js
|
|
* myDiagram.startTransaction("make new link");
|
|
* myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
|
|
* myDiagram.commitTransaction("make new link");
|
|
* ```
|
|
*
|
|
* where you would substitute the keys of the actual nodes that you want to connect with a link.
|
|
* This will cause a Link to be created (copying the template found in Diagram#linkTemplateMap),
|
|
* added to the Diagram in some Layer (based on Part#layerName), and bound to the link data
|
|
* (resulting in Panel#data referring to that link data object).
|
|
* Note that link data objects, unlike Node data, do not have their own unique keys or identifiers,
|
|
* because other Parts do not refer to them.
|
|
*
|
|
* If you are using a TreeModel, there are no link data objects, so you just need to call
|
|
* TreeModel#setParentKeyForNodeData to specify the "parent" node's key for a "child" node data.
|
|
*
|
|
* To find a Link given a link data object in the GraphLinksModel,
|
|
* call Diagram#findLinkForData. When using a TreeModel, call either Diagram#findNodeForData
|
|
* or Diagram#findNodeForKey to get a Node, and then call Node#findTreeParentLink to get the Link, if any exists.
|
|
*
|
|
* To find a link that connects two nodes, call Node#findLinksTo or Node#findLinksBetween.
|
|
* With the former method, the direction matters; with the latter method it returns links in either direction.
|
|
*
|
|
* A link's position and size are determined by the two nodes that it connects.
|
|
* Normally there should be a Shape as the main element in this Link.
|
|
* This shape is what users will see as the "line" or "wire" --
|
|
* you can set its Shape#stroke and other "stroke..." properties to control its appearance.
|
|
*
|
|
* The link will compute a route (a sequence of points) going from the #fromNode's port element
|
|
* to the #toNode's port element.
|
|
* That route is used to generate the path of the main shape.
|
|
* Properties that affect the nature of the route and the geometry of the path include:
|
|
* - #curve
|
|
* - #curviness
|
|
* - #corner
|
|
* - #routing
|
|
* - #smoothness
|
|
* - #adjusting
|
|
*
|
|
* <p class="boxread">
|
|
* For more discussion and examples, see <a href="../../intro/links.html">Links</a>.
|
|
*
|
|
* There are additional properties that affect how the end of the link connects to a port element of a node.
|
|
* There are duplicate properties, ones for the "to" end and ones for the "from" end:
|
|
* - #fromSpot, #toSpot
|
|
* - #fromEndSegmentLength, #toEndSegmentLength
|
|
* - #fromShortLength, #toShortLength
|
|
*
|
|
* These properties normally have "default" values, causing the link's routing and path-geometry generating
|
|
* to get the corresponding values from the connected port element.
|
|
* This scheme permits an individual link to have its own specific connection to a port,
|
|
* taking precedence over how the port normally expects links to connect to it.
|
|
* For example, several of the Layout classes sets these properties on each Link
|
|
* as part of their route computation for links.
|
|
* <p class="boxread">
|
|
* For more discussion and examples, see <a href="../../intro/connectionPoints.html">Link Points</a>.
|
|
*
|
|
* Elements other than the main Shape in the Link may act as decorations on the link, including arrowheads and labels.
|
|
* You can control where they are located along the link route and how they are oriented.
|
|
* Because these decorations may be any GraphObject, they are all properties of that class.
|
|
* The properties include:
|
|
* - GraphObject#segmentIndex
|
|
* - GraphObject#segmentFraction
|
|
* - GraphObject#segmentOffset
|
|
* - GraphObject#segmentOrientation
|
|
*
|
|
* If you do not set the GraphObject#segmentIndex property, the object is positioned
|
|
* to be at the middle of the link.
|
|
* <p class="boxread">
|
|
* For more discussion and examples, see <a href="../../intro/linkLabels.html">Link Labels</a>.
|
|
*
|
|
* **GoJS** makes it easy to add arrowheads to your link template.
|
|
* Just add a Shape with the appearance properties that you want,
|
|
* and also set the Shape#toArrow or Shape#fromArrow property
|
|
* to the name of the kind of arrowhead that you want.
|
|
* Doing so automatically sets the "segment..." properties that are appropriate for the chosen arrowhead.
|
|
*
|
|
* More than one shape may automatically get the route geometry.
|
|
* This is useful when you want to have multiple link shapes with different thicknesses
|
|
* to create a gradient effect across the path of the link or to produce parallel lines along the path.
|
|
* Just set GraphObject#isPanelMain to true on each such Shape.
|
|
*
|
|
* If you want the user to be able to reconnect a link, using the RelinkingTool,
|
|
* you need to set one or both of #relinkableFrom and #relinkableTo to true.
|
|
* The RelinkingTool shows a RelinkingTool#fromHandleArchetype and/or a
|
|
* RelinkingTool#toHandleArchetype when the link is selected.
|
|
* Such a relink handle can be dragged by the user to start a relinking operation.
|
|
*
|
|
* If you want the user to be able to change the path of the link, using the LinkReshapingTool,
|
|
* set Part#reshapable to true.
|
|
* The LinkReshapingTool shows reshape handles that the user can drag to shift the position
|
|
* of a point in the link's route.
|
|
* The LinkReshapingTool#handleArchetype is copied for each reshape handle.
|
|
*
|
|
* Often if a Link is reshapable, you will want to save the route in the model so that it can be restored
|
|
* upon load. To save the route automatically, add a TwoWay Binding on the #points property:
|
|
* `new go.Binding("points").makeTwoWay()`. Model#toJson will automatically
|
|
* convert the List of Points into an Array of numbers in the JSON representation,
|
|
* if the property is named "points".
|
|
*
|
|
* If a Link is Part#reshapable, it is also possible to allow the user to add and remove segments
|
|
* from the link's route by setting #resegmentable to true.
|
|
* This causes the LinkReshapingTool to add resegmenting handles at the midpoints of each segment.
|
|
* The LinkReshapingTool#midHandleArchetype is copied for each resegment handle.
|
|
* When the user drags such a resegmenting handle, a new segment is inserted into the route.
|
|
* Also, when the user drags a reshape handle such that two adjacent segments end up in a straight line,
|
|
* a segment is removed from the route.
|
|
* <p class="boxread">
|
|
* For more discussion and examples, see <a href="../../intro/links.html">Links</a>,
|
|
* <a href="../../intro/linkLabels.html">Link Labels</a>, and
|
|
* <a href="../../intro/connectionPoints.html">Link Points</a>.
|
|
* <p class="boxread">
|
|
* To control what links a user may draw or reconnect, please read about
|
|
* <a href="../../intro/validation.html">Validation</a>.
|
|
* <p class="boxread">
|
|
* To customize linking and relinking behavior, please read
|
|
* <a href="../../intro/tools.html#LinkingToolAndRelinkingTool">Introduction to the Linking Tools</a>
|
|
* and <a href="../../intro/tools.html#RelinkingTool">Introduction to the RelinkingTool</a>.
|
|
* For customizing the reshaping of Links,
|
|
* see <a href="../../intro/tools.html#LinkReshapingTool">Introduction to the LinkReshapingTool</a>.
|
|
*
|
|
* Only Links that are in Diagrams can have connections with Nodes.
|
|
* Templates should not be connected with Nodes, be members of Groups, or have any Adornments.
|
|
* @extends Part
|
|
* @unrestricted
|
|
*/
|
|
export class Link extends Part {
|
|
/**
|
|
* Constructs an empty link that does not connect any nodes.
|
|
* If you want the link to be seen, you must provide a Shape as an element
|
|
* to be used as the visual path for the link.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Used as the default value for Link#routing:
|
|
* the route goes fairly straight between ports.
|
|
* @constant
|
|
*/
|
|
static Normal: EnumValue;
|
|
/**
|
|
* Used as a value for Link#routing:
|
|
* each segment is horizontal or vertical.
|
|
* @constant
|
|
*/
|
|
static Orthogonal: EnumValue;
|
|
/**
|
|
* Used as a value for Link#routing:
|
|
* each segment is horizontal or vertical, but the route tries to avoid crossing over nodes.
|
|
* @constant
|
|
*/
|
|
static AvoidsNodes: EnumValue;
|
|
/**
|
|
* This is the default value for Link#curve and Link#adjusting,
|
|
* to indicate that the path geometry consists of straight line segments and
|
|
* to indicate that the link route computation does not depend on any previous route points;
|
|
* this can also be used as a value for GraphObject#segmentOrientation
|
|
* to indicate that the object is never rotated along the link route -- its angle is unchanged.
|
|
* @constant
|
|
*/
|
|
static None: EnumValue;
|
|
/**
|
|
* Used as a value for Link#curve, to indicate that
|
|
* the link path uses Bezier curve segments.
|
|
* @constant
|
|
*/
|
|
static Bezier: EnumValue;
|
|
/**
|
|
* Used as a value for Link#curve, to indicate that
|
|
* orthogonal link segments will be discontinuous where they cross over
|
|
* other orthogonal link segments that have a Link#curve of JumpOver or JumpGap.
|
|
* @constant
|
|
*/
|
|
static JumpGap: EnumValue;
|
|
/**
|
|
* Used as a value for Link#curve, to indicate that
|
|
* orthogonal link segments will veer around where they cross over
|
|
* other orthogonal link segments that have a Link#curve of JumpOver or JumpGap.
|
|
* @constant
|
|
*/
|
|
static JumpOver: EnumValue;
|
|
/**
|
|
* Used as a value for Link#adjusting,
|
|
* to indicate that the link route computation should keep the
|
|
* intermediate points of the previous route, just modifying the first and/or last points;
|
|
* if the routing is orthogonal, it will only modify the first two and/or last two points.
|
|
* @constant
|
|
*/
|
|
static End: EnumValue;
|
|
/**
|
|
* Used as a value for Link#adjusting,
|
|
* to indicate that the link route computation should scale and rotate the intermediate points
|
|
* so that the link's shape looks approximately the same;
|
|
* if the routing is orthogonal, this value is treated as if it were Link.End.
|
|
* @constant
|
|
*/
|
|
static Scale: EnumValue;
|
|
/**
|
|
* Used as a value for Link#adjusting,
|
|
* to indicate that the link route computation should linearly interpolate the intermediate points
|
|
* so that the link's shape looks stretched;
|
|
* if the routing is orthogonal, this value is treated as if it were Link.End.
|
|
* @constant
|
|
*/
|
|
static Stretch: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject turned to have the same angle as the route:
|
|
* the GraphObject's angle is always the same as the angle of the link's route
|
|
* at the segment where the GraphObject is attached;
|
|
* use this orientation for arrow heads.
|
|
* @constant
|
|
*/
|
|
static OrientAlong: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject is turned clockwise to be perpendicular to the route:
|
|
* the GraphObject's angle is always 90 degrees more than the angle of the link's route
|
|
* at the segment where the GraphObject is attached.
|
|
* @constant
|
|
*/
|
|
static OrientPlus90: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject being turned counter-clockwise to be perpendicular to the route:
|
|
* the GraphObject's angle is always 90 degrees less than the angle of the link's route
|
|
* at the segment where the GraphObject is attached.
|
|
* @constant
|
|
*/
|
|
static OrientMinus90: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject's angle always being 180 degrees opposite from the angle of the link's route
|
|
* at the segment where the GraphObject is attached.
|
|
* @constant
|
|
*/
|
|
static OrientOpposite: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject turned to have the same angle as the route, just like Link.OrientAlong, but is never upside down:
|
|
* the GraphObject's angle always following the angle of the link's route
|
|
* at the segment where the GraphObject is attached;
|
|
* this is typically only used for TextBlocks or Panels that contain text.
|
|
* @constant
|
|
*/
|
|
static OrientUpright: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject turned clockwise to be perpendicular to the route, just like Link.OrientPlus90, but is never upside down:
|
|
* the GraphObject's angle always being 90 degrees more than the angle of the link's route
|
|
* at the segment where the GraphObject is attached;
|
|
* this is typically only used for TextBlocks or Panels that contain text.
|
|
* @constant
|
|
*/
|
|
static OrientPlus90Upright: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject turned counter-clockwise to be perpendicular to the route, just like Link.OrientMinus90, but is never upside down:
|
|
* the GraphObject's angle always being 90 degrees less than the angle of the link's route
|
|
* at the segment where the GraphObject is attached;
|
|
* this is typically only used for TextBlocks or Panels that contain text.
|
|
* @constant
|
|
*/
|
|
static OrientMinus90Upright: EnumValue;
|
|
/**
|
|
* This value for GraphObject#segmentOrientation results in
|
|
* the GraphObject's angle always following the angle of the link's route
|
|
* at the segment where the GraphObject is attached, but never upside down
|
|
* and never angled more than +/- 45 degrees:
|
|
* when the route's angle is within 45 degrees of vertical (90 or 270 degrees),
|
|
* the GraphObject's angle is set to zero;
|
|
* this is typically only used for TextBlocks or Panels that contain text.
|
|
* @constant
|
|
*/
|
|
static OrientUpright45: EnumValue;
|
|
/**
|
|
* Gets or sets the Node that this link comes from.
|
|
* The #fromPortId specifies which port the link comes from.
|
|
* The default value is null -- this link is not coming from any node.
|
|
*
|
|
* A template should not be connected with any node.
|
|
*/
|
|
fromNode: Node | null;
|
|
/**
|
|
* Gets or sets the identifier of the port that this link comes from.
|
|
* The default value is the empty string.
|
|
*/
|
|
fromPortId: string;
|
|
/**
|
|
* This read-only property returns a GraphObject that is the "from" port that this link is connected from.
|
|
* The #fromNode provides the node that the link is coming from.
|
|
* The #fromPortId provides the identifier for which port this link is coming from;
|
|
* you can set that property in order to change the value of this property.
|
|
* This method may return null.
|
|
*/
|
|
readonly fromPort: GraphObject | null;
|
|
/**
|
|
* Gets or sets the function that is called after this Link changes which Node or port it connects from.
|
|
* The first argument will be this Link.
|
|
* The second argument will be the old GraphObject port.
|
|
* The third argument will be the new GraphObject port.
|
|
*
|
|
* If the value is a function, that function must not modify which nodes or links this link connects with.
|
|
* The "from" node and/or port has already been changed -- trying to change it again may produce undefined behavior.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
fromPortChanged: ((thisLink: Link, oldPort: GraphObject, newPort: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets the Node that this link goes to.
|
|
* The #toPortId specifies which port the link goes to.
|
|
* The default value is null -- this link is not going to any node.
|
|
*
|
|
* A template should not be connected with any node.
|
|
*/
|
|
toNode: Node | null;
|
|
/**
|
|
* Gets or sets the identifier of the port that this link goes to.
|
|
* The default value is the empty string.
|
|
*/
|
|
toPortId: string;
|
|
/**
|
|
* This read-only property returns a GraphObject that is the "to" port that this link is connected to.
|
|
* The #toNode provides the node that the link is going to.
|
|
* The #toPortId provides the identifier for which port this link is going to;
|
|
* you can set that property in order to change the value of this property.
|
|
* This method may return null.
|
|
*/
|
|
readonly toPort: GraphObject | null;
|
|
/**
|
|
* Gets or sets the function that is called after this Link changes which Node or port it connects to.
|
|
* The first argument will be this Link.
|
|
* The second argument will be the old GraphObject port.
|
|
* The third argument will be the new GraphObject port.
|
|
*
|
|
* If the value is a function, that function must not modify which nodes or links this link connects with.
|
|
* The "to" node and/or port has already been changed -- trying to change it again may produce undefined behavior.
|
|
*
|
|
* The default value is null -- no function is called.
|
|
*/
|
|
toPortChanged: ((thisLink: Link, oldPort: GraphObject, newPort: GraphObject) => void) | null;
|
|
/**
|
|
* Gets or sets where this link should connect at the #fromPort.
|
|
* The default value is Spot.Default, meaning that the value
|
|
* actually comes from the GraphObject#fromSpot property of the #fromPort.
|
|
*
|
|
* This property is set by some layouts, if ForceDirectedLayout#setsPortSpots or
|
|
* LayeredDigraphLayout#setsPortSpots or TreeLayout#setsPortSpot or
|
|
* TreeLayout#setsChildPortSpot is true.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
* @see #toSpot
|
|
* @see GraphObject#fromSpot
|
|
* @see #computeSpot
|
|
*/
|
|
fromSpot: Spot;
|
|
/**
|
|
* Gets or sets the length of the first segment, when the computed "from spot" at the #fromPort is not Spot.None.
|
|
* The default value is NaN, meaning that the value
|
|
* actually comes from the GraphObject#fromEndSegmentLength property of the #fromPort.
|
|
* This value also limits how short the #fromShortLength may be drawn.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
* @see #toEndSegmentLength
|
|
* @see #computeEndSegmentLength
|
|
* @see GraphObject#fromEndSegmentLength
|
|
* @see #fromShortLength
|
|
*/
|
|
fromEndSegmentLength: number;
|
|
/**
|
|
* Gets or sets how far the end segment stops short of the actual port.
|
|
* Positive values are limited by the #fromEndSegmentLength or GraphObject#fromEndSegmentLength.
|
|
* Negative values cause the link to extend into the port.
|
|
* The default value is NaN -- the value actually comes from the
|
|
* GraphObject#fromShortLength property of the #fromPort.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
* If you want to move an arrowhead away from the start of the link route,
|
|
* set the arrowhead Shape's GraphObject#segmentOffset.
|
|
* @see #toShortLength
|
|
* @see GraphObject#fromShortLength
|
|
* @see #fromEndSegmentLength
|
|
*/
|
|
fromShortLength: number;
|
|
/**
|
|
* Gets or sets where this link should connect at the #toPort.
|
|
* The default value is Spot.Default, meaning that the value
|
|
* actually comes from the GraphObject#toSpot property of the #toPort.
|
|
*
|
|
* This property is set by some layouts, if ForceDirectedLayout#setsPortSpots or
|
|
* LayeredDigraphLayout#setsPortSpots or TreeLayout#setsPortSpot or
|
|
* TreeLayout#setsChildPortSpot is true.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
* @see #fromSpot
|
|
* @see GraphObject#toSpot
|
|
* @see #computeSpot
|
|
*/
|
|
toSpot: Spot;
|
|
/**
|
|
* Gets or sets the length of the last segment.
|
|
* The default value is NaN, meaning that the value
|
|
* actually comes from the GraphObject#toEndSegmentLength property of the #toPort.
|
|
* This value also limits how short the #toShortLength may be drawn.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
* @see #fromEndSegmentLength
|
|
* @see #computeEndSegmentLength
|
|
* @see GraphObject#toEndSegmentLength
|
|
* @see #toShortLength
|
|
*/
|
|
toEndSegmentLength: number;
|
|
/**
|
|
* Gets or sets how far the end segment stops short of the actual port.
|
|
* Positive values are limited by the #toEndSegmentLength or GraphObject#toEndSegmentLength.
|
|
* Negative values cause the link to extend into the port.
|
|
* The default value is NaN -- the value actually comes from the
|
|
* GraphObject#toShortLength property of the #toPort.
|
|
*
|
|
* For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
* If you want to move an arrowhead away from the end of the link route,
|
|
* set the arrowhead Shape's GraphObject#segmentOffset.
|
|
* @see #fromShortLength
|
|
* @see GraphObject#toShortLength
|
|
* @see #toEndSegmentLength
|
|
*/
|
|
toShortLength: number;
|
|
/**
|
|
* Given a Node, return the node at the other end of this link.
|
|
* @param {Node} node
|
|
* @return {Node} This may return the same node, if the link is reflexive.
|
|
*/
|
|
getOtherNode(node: Node): Node | null;
|
|
/**
|
|
* Given a GraphObject that is a "port", return the port at the other end of this link.
|
|
* @param {GraphObject} port
|
|
* @return {GraphObject} This may return the same object, if the link is reflexive.
|
|
*/
|
|
getOtherPort(port: GraphObject): GraphObject | null;
|
|
/**
|
|
* This read-only property is true when this Link has any label Nodes, Nodes that are owned by this Link
|
|
* and are arranged along its path in the same manner as elements of the Link Panel.
|
|
* @see #labelNodes
|
|
* @since 1.1
|
|
*/
|
|
readonly isLabeledLink: boolean;
|
|
/**
|
|
* This read-only property returns an iterator over the Nodes that act as labels on this Link.
|
|
* Setting Node#labeledLink to refer to this Link
|
|
* will add that Node to this collection.
|
|
*
|
|
* Do not confuse these Nodes with the GraphObjects that
|
|
* are part of this Link Panel.
|
|
* Those objects can also be used as "labels", but not as objects to which
|
|
* there can be link connections, because those panel elements cannot be Nodes.
|
|
* Those panel objects can be used for other purposes too, such as arrowheads.
|
|
*
|
|
* A template should not have any label nodes.
|
|
* @see #isLabeledLink
|
|
*/
|
|
readonly labelNodes: Iterator<Node>;
|
|
/**
|
|
* Move this link to a new position.
|
|
* This also shifts all of the Points in the route accordingly.
|
|
* This also moves any #labelNodes.
|
|
* @param {Point} newpos a new Point in document coordinates.
|
|
* @param {boolean=} useLocation true if you want to set the #location instead of the position. False by default.
|
|
*/
|
|
move(newpos: Point, useLocation?: boolean): void;
|
|
/**
|
|
* Gets or sets whether the user may reconnect an existing link at the "from" end.
|
|
* This affects the behavior of the RelinkingTool.
|
|
*
|
|
* The initial value is false.
|
|
*/
|
|
relinkableFrom: boolean;
|
|
/**
|
|
* Gets or sets whether the user may reconnect an existing link at the "to" end.
|
|
* This affects the behavior of the RelinkingTool.
|
|
*
|
|
* The initial value is false.
|
|
*/
|
|
relinkableTo: boolean;
|
|
/**
|
|
* This predicate returns true if #relinkableFrom is true,
|
|
* if the layer's Layer#allowRelink is true, and
|
|
* if the diagram's Diagram#allowRelink is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may relink the From end of this link.
|
|
*/
|
|
canRelinkFrom(): boolean;
|
|
/**
|
|
* This predicate returns true if #relinkableTo is true,
|
|
* if the layer's Layer#allowRelink is true, and
|
|
* if the diagram's Diagram#allowRelink is true.
|
|
*
|
|
* This does not check Diagram#isReadOnly or Model#isReadOnly,
|
|
* but commands and tools should check those properties.
|
|
* @expose
|
|
* @return {boolean} true if the user may relink the To end of this link.
|
|
*/
|
|
canRelinkTo(): boolean;
|
|
/**
|
|
* Gets or sets whether the user may change the number of segments in this Link,
|
|
* if the link has straight segments.
|
|
* This affects the behavior of the LinkReshapingTool when #curve is not Link.Bezier.
|
|
*
|
|
* The initial value is false.
|
|
* @since 1.2
|
|
*/
|
|
resegmentable: boolean;
|
|
/**
|
|
* Gets or sets whether this Link is part of the tree for tree operations
|
|
* such as Node#findTreeChildrenNodes or Node#collapseTree.
|
|
*
|
|
* The initial value is true.
|
|
* @since 1.2
|
|
*/
|
|
isTreeLink: boolean;
|
|
/**
|
|
* This read-only property returns the main Shape representing the path of this Link.
|
|
*
|
|
* The value depends on there being an element in this Link that is
|
|
* a Shape and that has GraphObject#isPanelMain set to true.
|
|
* This shape is what displays the stroke going from one node to another node.
|
|
*
|
|
* This path shape's geometry is automatically generated based on the #points
|
|
* of this link's route, depending on other properties such as #curve.
|
|
* Note that the points are in document coordinates, but the path's Shape#geometry
|
|
* will have points that are in local Shape coordinates.
|
|
* This Shape's GraphObject#scale should be one and GraphObject#angle should be zero.
|
|
*
|
|
* If there is no Shape with GraphObject#isPanelMain set to true,
|
|
* the Link will use the first Shape for its path.
|
|
*/
|
|
readonly path: Shape | null;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
readonly routeBounds: Rect;
|
|
/**
|
|
* This read-only property returns the point at the middle of the path, in document coordinates.
|
|
*/
|
|
readonly midPoint: Point;
|
|
/**
|
|
* This read-only property returns the angle of the path at the #midPoint.
|
|
*/
|
|
readonly midAngle: number;
|
|
/**
|
|
* Gets or sets the List of Points in the route.
|
|
* All of the Points must be Point#isReal -- no NaN or infinite values --
|
|
* and all of the points are in document coordinates.
|
|
* Although this list may be replaced by setting this property,
|
|
* one must not modify the contents of the List directly.
|
|
*
|
|
* The setter also accepts an Array of alternating X,Y point values [1, 2, 3, 4, 5, 6],
|
|
* or an Array of Objects each of which has (lowercase) 'x' and 'y' properties that are numbers
|
|
* [{"x":1,"y":2}, {"x":3,"y":4}, {"x":5,"y":6}].
|
|
*
|
|
* Ownership of the List and all of its Points that is provided to the setter
|
|
* is transferred to this Link.
|
|
*/
|
|
points: List<Point>;
|
|
/**
|
|
* This read-only property returns the number of points in the route.
|
|
*/
|
|
readonly pointsCount: number;
|
|
/**
|
|
* Gets a particular point of the route.
|
|
* @param {number} i int The zero-based index of the desired point.
|
|
* @return {Point} in document coordinates
|
|
*/
|
|
getPoint(i: number): Point;
|
|
/**
|
|
* Sets a particular point of the route; this may only be called within an override of #computePoints.
|
|
* @param {number} i int The zero-based index of the desired point.
|
|
* @param {Point} p The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.
|
|
* @see #getPoint
|
|
* @see #insertPoint
|
|
* @see #addPoint
|
|
* @see #removePoint
|
|
* @since 1.6
|
|
*/
|
|
setPoint(i: number, p: Point): void;
|
|
/**
|
|
* Undocumented
|
|
* @param {number} i int The zero-based index of the desired point.
|
|
* @param {number} x The new X, which should not be infinite or NaN, in document coordinates.
|
|
* @param {number} y The new Y, which should not be infinite or NaN, in document coordinates.
|
|
*/
|
|
setPointAt(i: number, x: number, y: number): void;
|
|
/**
|
|
* Insert a point at a particular position in the route, without replacing an existing point; this may only be called within an override of #computePoints.
|
|
* @param {number} i int The zero-based index of the new point.
|
|
* @param {Point} p The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.
|
|
* @see #getPoint
|
|
* @see #setPoint
|
|
* @see #addPoint
|
|
* @see #removePoint
|
|
* @since 1.6
|
|
*/
|
|
insertPoint(i: number, p: Point): void;
|
|
/**
|
|
* Undocumented
|
|
* @param {number} i int The zero-based index of the new point.
|
|
* @param {number} x The new X, which should not be infinite or NaN, in document coordinates.
|
|
* @param {number} y The new Y, which should not be infinite or NaN, in document coordinates.
|
|
*/
|
|
insertPointAt(i: number, x: number, y: number): void;
|
|
/**
|
|
* Add a point at the end of the route; this may only be called within an override of #computePoints.
|
|
* @param {Point} p The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.
|
|
* @see #getPoint
|
|
* @see #setPoint
|
|
* @see #insertPoint
|
|
* @see #removePoint
|
|
* @since 1.6
|
|
*/
|
|
addPoint(p: Point): void;
|
|
/**
|
|
* Undocumented
|
|
* @param {number} x The new X, which should not be infinite or NaN, in document coordinates.
|
|
* @param {number} y The new Y, which should not be infinite or NaN, in document coordinates.
|
|
*/
|
|
addPointAt(x: number, y: number): void;
|
|
/**
|
|
* Remove a particular point from the route; this may only be called within an override of #computePoints.
|
|
* @param {number} i int The zero-based index of the point to extract.
|
|
* @see #getPoint
|
|
* @see #setPoint
|
|
* @see #insertPoint
|
|
* @see #addPoint
|
|
* @see #clearPoints
|
|
* @since 1.6
|
|
*/
|
|
removePoint(i: number): void;
|
|
/**
|
|
* Remove all of the points from this link's route; this may only be called within an override of #computePoints.
|
|
* @see #getPoint
|
|
* @see #setPoint
|
|
* @see #insertPoint
|
|
* @see #addPoint
|
|
* @see #removePoint
|
|
* @since 1.6
|
|
*/
|
|
clearPoints(): void;
|
|
/**
|
|
* Allow calls to #setPoint, #addPoint, #insertPoint,
|
|
* #removePoint, and #clearPoints.
|
|
* You must call #commitRoute when you are done modifying the route.
|
|
*/
|
|
startRoute(): void;
|
|
/**
|
|
* Call this method after a call to #startRoute and calls to methods that modify the route.
|
|
*/
|
|
commitRoute(): void;
|
|
/**
|
|
* Call this method instead of #commitRoute if you need to cancel changes to the route.
|
|
*/
|
|
rollbackRoute(): void;
|
|
/**
|
|
* Declare that the route (the #points) of this Link need to be recomputed soon.
|
|
* This causes #updateRoute to be called, which will call #computePoints
|
|
* to perform the actual determination of the route.
|
|
* @since 1.6
|
|
*/
|
|
invalidateRoute(): void;
|
|
/**
|
|
* Undocumented.
|
|
*/
|
|
defaultFromPoint: Point;
|
|
/**
|
|
* Undocumented.
|
|
*/
|
|
defaultToPoint: Point;
|
|
/**
|
|
* This method recomputes the route if the route is invalid,
|
|
* to make sure the #points are up-to-date.
|
|
* This method calls #computePoints in order to calculate a new route.
|
|
*
|
|
* The route may become invalid if either connected node is moved,
|
|
* or if various properties are modified, such as #routing.
|
|
* Such changes will call #invalidateRoute.
|
|
*
|
|
* It is unusual for you to have to call this method.
|
|
* @since 1.6
|
|
*/
|
|
updateRoute(): void;
|
|
/**
|
|
* The code that constructs a new route by modifying the #points.
|
|
* It is only called by #updateRoute, when needed.
|
|
* All route points are always in document coordinates.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* Overrides of this method may call a number of "protected" methods in order to build the route:
|
|
* #clearPoints, #addPoint, #insertPoint, #removePoint, #setPoint.
|
|
* Overrides of this method must not set #points.
|
|
*
|
|
* Other methods that are commonly called and may be overridden are:
|
|
* #computeEndSegmentLength, #computeSpot, #computeOtherPoint,
|
|
* #computeCurve, #computeCurviness, #hasCurviness,
|
|
* #computeThickness,
|
|
* #makeGeometry.
|
|
* @expose
|
|
* @return {boolean} true if it computed a route of points
|
|
* @since 1.6
|
|
*/
|
|
computePoints(): boolean;
|
|
/**
|
|
* Compute the intersection point in document coordinates for the edge of a particular port GraphObject, given a point,
|
|
* when no particular spot or side has been specified.
|
|
* @expose
|
|
* @param {Node} node
|
|
* @param {GraphObject} port the GraphObject representing a port on the node.
|
|
* @param {Point} focus the point in document coordinates to/from which the link should point,
|
|
* normally the center of the port.
|
|
* @param {Point} p often this point is far away from the node, to give a general direction,
|
|
* particularly an orthogonal one.
|
|
* @param {boolean} from true if the link is coming out of the port; false if going to the port.
|
|
* @param {Point=} result an optional Point that is modified and returned; otherwise it allocates and returns a new Point
|
|
* @return {Point} the point in document coordinates of the intersection point on the edge of the port.
|
|
* @since 1.2
|
|
*/
|
|
getLinkPointFromPoint(node: Node | null, port: GraphObject | null, focus: Point, p: Point, from: boolean, result?: Point): Point;
|
|
/**
|
|
* Compute the point on a node/port in document coordinates at which the route of a link should end.
|
|
* @expose
|
|
* @param {Node} node
|
|
* @param {GraphObject} port the GraphObject representing a port on the node.
|
|
* @param {Spot} spot a Spot value describing where the link should connect.
|
|
* @param {boolean} from true if the link is coming out of the port; false if going to the port.
|
|
* @param {boolean} ortho whether the link should have orthogonal segments.
|
|
* @param {Node} othernode the node at the other end of the link.
|
|
* @param {GraphObject} otherport the GraphObject port at the other end of the link.
|
|
* @param {Point=} result an optional Point that is modified and returned; otherwise it allocates and returns a new Point
|
|
* @return {Point} in document coordinates.
|
|
* @since 1.2
|
|
*/
|
|
getLinkPoint(node: Node | null, port: GraphObject | null, spot: Spot, from: boolean, ortho: boolean, othernode: Node | null, otherport: GraphObject | null, result?: Point): Point;
|
|
/**
|
|
* Compute the direction in which a link should go from a given connection point.
|
|
* @expose
|
|
* @param {Node} node
|
|
* @param {GraphObject} port the GraphObject representing a port on the node.
|
|
* @param {Point} linkpoint the connection point, in document coordinates.
|
|
* @param {Spot} spot a Spot value describing where the link should connect.
|
|
* @param {boolean} from true if the link is coming out of the port; false if going to the port.
|
|
* @param {boolean} ortho whether the link should have orthogonal segments.
|
|
* @param {Node} othernode the node at the other end of the link.
|
|
* @param {GraphObject} otherport the GraphObject port at the other end of the link.
|
|
* @return {number} the absolute angle, in degrees.
|
|
* @since 1.2
|
|
*/
|
|
getLinkDirection(node: Node | null, port: GraphObject | null, linkpoint: Point, spot: Spot, from: boolean, ortho: boolean, othernode: Node | null, otherport: GraphObject | null): number;
|
|
/**
|
|
* Get the length of the end segment in document coordinates, typically a short distance, in document units.
|
|
* For spot values that are Spot#isSide, this returns a computed value.
|
|
* Depending on the `from` argument, this will return #fromEndSegmentLength or #toEndSegmentLength.
|
|
* If the value is `NaN`, this will return the #fromPort's GraphObject#fromEndSegmentLength
|
|
* or the #toPort's GraphObject#toEndSegmentLength.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} node
|
|
* @param {GraphObject} port the GraphObject representing a port on the node.
|
|
* @param {Spot} spot a Spot value describing where the link should connect.
|
|
* @param {boolean} from true if the link is coming out of the port; false if going to the port.
|
|
* @return {number} a distance in document coordinates; must be a real number, not NaN or infinity.
|
|
* @since 1.6
|
|
*/
|
|
computeEndSegmentLength(node: Node | null, port: GraphObject | null, spot: Spot, from: boolean): number;
|
|
/**
|
|
* Get the Spot that describes how the end of the link should connect with the port.
|
|
* Depending on the `from` argument, this will return #fromSpot or #toSpot.
|
|
* If the value is Spot#isDefault, this will return the #fromPort's GraphObject#fromSpot
|
|
* or the #toPort's GraphObject#toSpot.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {boolean} from
|
|
* @param {GraphObject=} port
|
|
* @return {Spot} must not be Spot.Default, but may be Spot.None
|
|
* @since 1.6
|
|
*/
|
|
computeSpot(from: boolean, port?: GraphObject | null): Spot;
|
|
/**
|
|
* Find the approximate point of the other end of the link in document coordinates.
|
|
* This is useful when computing the connection point when there is no specific spot, to have an idea of which general direction the link should be going.
|
|
* By default this will return the center of the other port.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Node} othernode
|
|
* @param {GraphObject} otherport
|
|
* @return {Point} approximately where the other end of this link might end, in document coordinates
|
|
* @since 1.6
|
|
*/
|
|
computeOtherPoint(othernode: Node, otherport: GraphObject): Point;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {boolean} from
|
|
* @return {number} must be a real number, not NaN or infinity.
|
|
*/
|
|
protected computeShortLength(from: boolean): number;
|
|
/**
|
|
* This read-only property is true if #routing is a value that implies that the points
|
|
* of the route should be orthogonal, such that each point shares a common X or a common Y value
|
|
* with the immediately previous and next points.
|
|
* This property is completely dependent on the #routing property.
|
|
* Values of Link.Orthogonal and Link.AvoidsNodes causes this property to be true.
|
|
*
|
|
* The points in the route might not actually form an orthogonal route, but when the route is computed
|
|
* the intent is to maintain orthogonality.
|
|
* @since 1.2
|
|
*/
|
|
readonly isOrthogonal: boolean;
|
|
/**
|
|
* This read-only property is true when the routing tries to be smart about not overlapping other parts.
|
|
*/
|
|
readonly isAvoiding: boolean;
|
|
/**
|
|
* Returns the #curve, unless this link is supposed to pretend to be curved, as with reflexive links.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {EnumValue}
|
|
* @since 1.6
|
|
*/
|
|
computeCurve(): EnumValue;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @return {number} must be a real number, not NaN or infinity
|
|
*/
|
|
protected computeCorner(): number;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @return {GraphObject}
|
|
*/
|
|
findMidLabel(): GraphObject | null;
|
|
/**
|
|
* Returns the expected spacing between this link and others that connect this link's fromPort and toPort.
|
|
* This calls #computeThickness and also takes any "mid label"'s breadth into account.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {number} must be a real number, not NaN or infinity
|
|
* @see #computeCurviness
|
|
* @since 1.6
|
|
*/
|
|
computeSpacing(): number;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {Array.<Link>} links
|
|
* @param {boolean} reroute
|
|
*/
|
|
arrangeBundledLinks(links: Array<Link>, reroute: boolean): void;
|
|
/**
|
|
* Returns the #curviness, if it's a number,
|
|
* or else a computed value based on how many links connect this pair of nodes/ports,
|
|
* by calling #computeSpacing on each link.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {number} must be a real number, not NaN or infinity
|
|
* @see #computeSpacing
|
|
* @since 1.6
|
|
*/
|
|
computeCurviness(): number;
|
|
/**
|
|
* Returns the thickness of this link.
|
|
* By default it uses the strokeWidth of the main element, assuming it's a Shape.
|
|
* This is called by #computeSpacing.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {number} a non-negative real number
|
|
* @since 1.6
|
|
*/
|
|
computeThickness(): number;
|
|
/**
|
|
* Returns true if an extra or a different point is needed based on #curviness.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {boolean}
|
|
* @since 1.6
|
|
*/
|
|
hasCurviness(): boolean;
|
|
/**
|
|
* This method is called by #computePoints when the link is orthogonal
|
|
* and at least one port has a link spot that is not Spot#isNoSpot.
|
|
*
|
|
* #computePoints is responsible for adding the first two
|
|
* and the last two points of the stroke, including the startFrom and endTo values.
|
|
* This method is responsible for adding any additional points in the middle of the stroke.
|
|
* This method calls #computeMidOrthoPosition to determine the
|
|
* distance of the middle segment between the two ports.
|
|
* It also tries to avoid the source node and the destination node.
|
|
* When the #routing property is not Normal,
|
|
* this method uses another, more computationally expensive,
|
|
* method for determining the proper path of the link, which may have many segments.
|
|
* @expose
|
|
* @param {Point} startFrom this Point will already have been added to the stroke by #computePoints before calling this method.
|
|
* @param {number} fromDir Normally 0, 90, 180, or 270 degrees.
|
|
* @param {Point} endTo #computePoints will add this Point after calling this method.
|
|
* @param {number} toDir Normally 0, 90, 180, or 270 degrees.
|
|
* @param {Node} fromnode the Node that the link is coming from.
|
|
* @param {Node} tonode the Node that the link is going to.
|
|
*/
|
|
addOrthoPoints(startFrom: Point, fromDir: number, endTo: Point, toDir: number, fromnode: Node, tonode: Node): void;
|
|
/**
|
|
* Undocumented
|
|
* @expose
|
|
* @param {number} fromX The first point's X coordinate.
|
|
* @param {number} fromY The first point's Y coordinate.
|
|
* @param {number} toX The last point's X coordinate.
|
|
* @param {number} toY The last point's Y coordinate.
|
|
* @param {boolean} vertical Whether the mid-position is along the vertical axis or horizontal axis.
|
|
* @return {number} must be a real number, not NaN or infinity
|
|
*/
|
|
protected computeMidOrthoPosition(fromX: number, fromY: number, toX: number, toY: number, vertical: boolean): number;
|
|
/**
|
|
* Find the index of the segment that is closest to a given point.
|
|
* This assumes the route only has straight line segments.
|
|
* It ignores any jump-overs or jump-gaps.
|
|
* @param {Point} p the Point, in document coordinates.
|
|
* @return {number} int the index of the segment, from zero to the number of points minus 2.
|
|
*/
|
|
findClosestSegment(p: Point): number;
|
|
/**
|
|
* This read-only property returns the Geometry that is used by the #path, the link Shape based on the route points.
|
|
*
|
|
* This geometry is automatically generated using the route points and other properties
|
|
* such as the #curve.
|
|
* The points of the Geometry are in local coordinates, whereas the #points of the link route are in document coordinates.
|
|
*
|
|
* More than one Shape may share this geometry as its Shape#geometry,
|
|
* if there is more than one shape element in the Link with GraphObject#isPanelMain set to true.
|
|
*/
|
|
readonly geometry: Geometry;
|
|
/**
|
|
* Produce a Geometry given the points of this route,
|
|
* depending on the value of #curve and #corner and perhaps other properties.
|
|
* The points of the Geometry are in local coordinates, whereas the #points of the link route are in document coordinates.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {Geometry}
|
|
* @since 1.6
|
|
*/
|
|
makeGeometry(): Geometry;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
readonly firstPickIndex: number;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
readonly lastPickIndex: number;
|
|
/**
|
|
* Undocumented
|
|
* @param {Rect} prevbounds
|
|
*/
|
|
invalidateOtherJumpOvers(prevbounds: Rect): void;
|
|
/**
|
|
* Gets or sets how the route is computed, including whether it uses the points of its old route to determine the new route.
|
|
* The value must be one of Link.None|None, Link.End|End, Link.Scale|Scale, or Link.Stretch|Stretch.
|
|
*
|
|
* The default value is Link.None|None -- the route is completely recalculated each time.
|
|
* @see #computeAdjusting
|
|
*/
|
|
adjusting: EnumValue;
|
|
/**
|
|
* Returns the #adjusting value, unless this Link's Diagram is animating, then it will return Link.End|End
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* @expose
|
|
* @return {EnumValue}
|
|
* @since 2.1
|
|
* @see #adjusting
|
|
*/
|
|
computeAdjusting(): EnumValue;
|
|
/**
|
|
* Gets or sets how rounded the corners are for adjacent line segments when the #curve
|
|
* is Link.None|None, Link.JumpGap|JumpGap, or Link.JumpOver|JumpOver and
|
|
* the two line segments are orthogonal to each other.
|
|
*
|
|
* The default value is zero -- there is no curve at a corner.
|
|
*/
|
|
corner: number;
|
|
/**
|
|
* Gets or sets the way the path is generated from the route's points.
|
|
* The value must be one of Link.None|None, Link.Bezier|Bezier, Link.JumpGap|JumpGap, or Link.JumpOver|JumpOver.
|
|
*
|
|
* Setting this property to Link.JumpOver|JumpOver or Link.JumpGap|JumpGap requires the Diagram to do
|
|
* considerable computation when calculating Link routes. Consider not using
|
|
* a Jump... value with Diagrams that contain large numbers of Links
|
|
* if you are targeting slow devices.
|
|
*
|
|
* The default value is Link.None|None -- each link segment is a straight line.
|
|
* @see #computeCurve
|
|
*/
|
|
curve: EnumValue;
|
|
/**
|
|
* Gets or sets how far the control points are offset when the #curve is Link.Bezier|Bezier
|
|
* or when there are multiple links between the same two ports.
|
|
*
|
|
* The default value is NaN -- the actual curviness is computed based on how many links connect the same pair of ports.
|
|
* @see #computeCurviness
|
|
*/
|
|
curviness: number;
|
|
/**
|
|
* Gets or sets whether the link's path tries to avoid other nodes.
|
|
* The value must be one of Link.Normal|Normal, Link.Orthogonal|Orthogonal, or Link.AvoidsNodes|AvoidsNodes.
|
|
*
|
|
* Setting this property to Link.AvoidsNodes|AvoidsNodes requires the Diagram to do
|
|
* considerable computation when calculating Link routes. Consider not using
|
|
* the Link.AvoidsNodes|AvoidsNodes with Diagrams that contain large numbers of Nodes and Links
|
|
* if you are targeting slow devices.
|
|
* When using Link.AvoidsNodes|AvoidsNodes, dragging performance can be improved by setting DraggingTool#isComplexRoutingRealtime to false.
|
|
*
|
|
* The default value is Link.Normal|Normal -- the route is primarily a single straight segment,
|
|
* with possible short end segments when connecting with ports that have a "spot" value
|
|
* as the #fromSpot or GraphObject#fromSpot or #toSpot or GraphObject#toSpot.
|
|
*/
|
|
routing: EnumValue;
|
|
/**
|
|
* Gets or sets how far the control points are from the points of the route
|
|
* when #routing is Link.Orthogonal|Orthogonal and #curve is Link.Bezier|Bezier.
|
|
*
|
|
* The default value is 0.5.
|
|
* Values of this property typically fall in the range of 0.0 to 1.0.
|
|
* A value of 0.0 indicates that the control points of the curve are at the end points,
|
|
* which will result in straight line segments.
|
|
* A value of 1.0 indicates that the control points are one-third of the link's
|
|
* length away from the end point along the direction of the link,
|
|
* and the same distance away in a perpendicular direction.
|
|
* The distance scales linearly with the value of this property,
|
|
* even with negative values and values greater than 1.0.
|
|
*/
|
|
smoothness: number;
|
|
/**
|
|
* This read-only property returns the Links's Model data key if it is in a Diagram and is backed by Model data.
|
|
* Otherwise this returns undefined.
|
|
*
|
|
* If the link data is in a GraphLinksModel, the GraphLinksModel#linkKeyProperty must not be an empty string.
|
|
* @since 1.8
|
|
* @see GraphLinksModel#getKeyForLinkData
|
|
*/
|
|
readonly key: Key;
|
|
}
|
|
/**
|
|
* This is the base class for all of the predefined diagram layout implementations.
|
|
* They only arrange Parts (primarily Nodes and Links) in a Diagram,
|
|
* not to GraphObjects in Panels (i.e. panel layout).
|
|
*
|
|
* The layout classes include TreeLayout, ForceDirectedLayout,
|
|
* LayeredDigraphLayout, CircularLayout, and GridLayout.
|
|
* This base class is not abstract -- in fact an instance of this base class is the default
|
|
* value for Diagram#layout and for Group#layout.
|
|
*
|
|
* An instance of a Layout class will be the value of Diagram#layout.
|
|
* That layout positions the graph of top-level nodes and links.
|
|
* Nodes and links that belong to a Group are laid out by that group's Group#layout.
|
|
* The Diagram will automatically perform all nested group layouts before laying out the whole diagram.
|
|
*
|
|
* If you have position information for all of the nodes when you load a model,
|
|
* you will typically have data bound the Part#location to some property on your node data.
|
|
* In order to avoid an initial layout causing those saved node positions to be discarded,
|
|
* you can either not set the Diagram#layout to a predefined layout or you can
|
|
* set #isInitial to false.
|
|
*
|
|
* Because performing layouts can be expensive in space and time, automatic layouts
|
|
* are performed only on "invalid" layouts, and only well after a layout has been invalidated.
|
|
* This state is held by the #isValidLayout property.
|
|
* Many standard operations, such as adding or removing nodes or links, will cause
|
|
* the layout that is responsible for positioning those nodes or routing those links
|
|
* to be invalidated.
|
|
* Such invalidation is performed by calling #invalidateLayout,
|
|
* which not only clears the #isValidLayout state but also requests that the diagram
|
|
* do an automatic layout soon.
|
|
* You can avoid such invalidations by setting #isOngoing to false.
|
|
*
|
|
* Layouts will ignore parts that have Part#isLayoutPositioned set to false
|
|
* or parts that are not GraphObject#visible.
|
|
* Layouts will also ignore parts that are in layers that are Layer#isTemporary.
|
|
*
|
|
* Various operations on Parts will cause the responsible Layout to be invalidated.
|
|
* This includes adding or removing parts, changing their visibility, and changing their size.
|
|
* You can disable such automatic layout invalidations by setting Part#layoutConditions
|
|
* to the combination of Part flags named "Layout..." that you want.
|
|
*
|
|
* But operations on parts are not the only way in which layouts become invalidated.
|
|
* Setting most properties on the layouts, thereby changing their behavior, will invalidate that layout.
|
|
* Replacing the Diagram#layout or Group#layout will automatically invalidate the new layout.
|
|
* If #isViewportSized is true, when a diagram's Diagram#viewportBounds changes size,
|
|
* the Diagram#layout is invalidated.
|
|
* (This is normally only true for GridLayouts when its GridLayout#wrappingWidth is `NaN`.
|
|
* Most layouts do not care about the size of the viewport.)
|
|
*
|
|
* You can also explicitly call Diagram#layoutDiagram, which can invalidate all layouts and
|
|
* then perform them all.
|
|
* But we recommend that you avoid doing so, to allow the normal updating process perform layouts as needed.
|
|
*
|
|
* If an automatic layout is the first time that a layout has been performed for the model,
|
|
* the diagram first raises the DiagramEvent named "InitialLayoutCompleted".
|
|
* Whenever a Diagram finishes an automatic layout, it raises the DiagramEvent named "LayoutCompleted".
|
|
*
|
|
* It is also possible to call #doLayout explicitly, but this is uncommon and only used with
|
|
* instances of Layout that are not the Diagram#layout or Group#layout.
|
|
* It should only be needed when you want to layout a collection of nodes and links that is not
|
|
* the normal graph of top-level parts of a Diagram or a subgraph of a Group.
|
|
*
|
|
* More complicated layouts make use of a separate LayoutNetwork, consisting of LayoutVertexes and LayoutEdges,
|
|
* that normally holds a graph that is isomorphic to the graph consisting of Nodes and Links in the Diagram or Group.
|
|
* The implementation of #doLayout will call #makeNetwork and remember the result as the #network.
|
|
* #makeNetwork will call #createNetwork and initialize it by adding new instances of LayoutVertexes and LayoutEdges
|
|
* corresponding to the given collection of Nodes and Links.
|
|
*
|
|
* When #doLayout is finished with its work it will call #updateParts, which will call #commitLayout
|
|
* to set new node locations and route links. It then normally discards the #network.
|
|
*
|
|
* The LayoutVertex and LayoutEdge instances allow the layout to work with more information about each Node and Link without
|
|
* actually modifying those Nodes and Links until #commitLayout is called to actually set the Node locations and route the Links.
|
|
* The use of a LayoutNetwork also allows the Layout to work with a graph that is not isomorphic to the given collection of Nodes and Links.
|
|
* This is useful when needing to use dummy vertexes and/or edges to achieve certain layout behaviors,
|
|
* or when one wants to ignore certain vertexes or edges, without actually modifying or adding or removing the diagram's nodes or links.
|
|
*
|
|
* An instance of this base class provides a rudimentary default layout that will position
|
|
* all of the parts that have no position (i.e. the Part#location is (NaN,NaN).
|
|
* Parts that already have a position are ignored.
|
|
* This primitive layout class does not make use of a LayoutNetwork because
|
|
* it ignores all links.
|
|
*
|
|
* To implement your own custom layouts, you can inherit from either this class or
|
|
* from one of the other predefined layout classes.
|
|
* If you inherit from this base class, you will want to override the #doLayout method.
|
|
* You can call the Part#move method to re-position a part, including whole groups.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.
|
|
* @category Layout
|
|
*/
|
|
export class Layout {
|
|
/**
|
|
* Create a minimal layout that only positions Nodes that do not have a location.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Copies properties from this object to the given object, which is of the same class.
|
|
* This is called by #copy and should be overridden for each class that adds properties.
|
|
* There are examples of such overrides in the samples.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {?} copy
|
|
* @since 1.6
|
|
*/
|
|
protected cloneProtected(copy: this): void;
|
|
/**
|
|
* Creates a copy of this Layout and returns it.
|
|
* When a Group is copied that has a Group#layout, the Layout must also be copied.
|
|
* This calls #cloneProtected on a newly constructed Layout.
|
|
* @expose
|
|
* @return {Layout}
|
|
*/
|
|
copy(): this;
|
|
/**
|
|
* Gets the Diagram that owns this layout, if it is the value of Diagram#layout.
|
|
*
|
|
* If this property and #group are non-null, the Group should be in this Diagram.
|
|
* @see #group
|
|
*/
|
|
diagram: Diagram | null;
|
|
/**
|
|
* Gets the Group that uses this layout, if it is the value of a group's Group#layout.
|
|
*
|
|
* If this property is set to a Group, the #diagram is automatically set to be the Group's Diagram.
|
|
* @see #diagram
|
|
*/
|
|
group: Group | null;
|
|
/**
|
|
* Gets or sets whether this layout can be invalidated by #invalidateLayout.
|
|
* Set this to false to prevent actions such as adding or removing Parts from invalidating this layout.
|
|
* The default value is true.
|
|
* Setting this property does not invalidate this layout.
|
|
*
|
|
* If you set both #isInitial and #isOngoing to false,
|
|
* there will be no automatic layout invalidation, because #invalidateLayout
|
|
* will not set #isValidLayout to false.
|
|
* To get your nodes to appear, you will need to explicitly set or data-bind their Part#location
|
|
* or GraphObject#position to real Point values, because automatic layout will not assign any positions.
|
|
*
|
|
* Another way of controlling when layouts are invalidated is by setting
|
|
* Part#isLayoutPositioned or Part#layoutConditions.
|
|
*/
|
|
isOngoing: boolean;
|
|
/**
|
|
* Gets or sets whether this layout is performed on an initial layout.
|
|
* The default value is true.
|
|
* Setting this property to false causes #isValidLayout to be set to true
|
|
* so that the diagram does not perform this layout.
|
|
*
|
|
* If you set both #isInitial and #isOngoing to false,
|
|
* there will be no automatic layout invalidation, because #invalidateLayout
|
|
* will not set #isValidLayout to false.
|
|
* To get your nodes to appear, you will need to explicitly set or data-bind their Part#location
|
|
* or GraphObject#position to real Point values, because automatic layout will not assign any positions.
|
|
*
|
|
* Another way of controlling when layouts are invalidated is by setting
|
|
* Part#isLayoutPositioned or Part#layoutConditions.
|
|
*/
|
|
isInitial: boolean;
|
|
/**
|
|
* Gets or sets whether this layout depends on the Diagram#viewportBounds's size.
|
|
* If set to true, the layout will invalidate when the Diagram's viewport changes size.
|
|
* This only applies to diagram layouts, not to group layouts,
|
|
* and only when Diagram#autoScale is set to Diagram.None.
|
|
* The default value is false.
|
|
* Setting this property to true will invalidate this layout.
|
|
*/
|
|
isViewportSized: boolean;
|
|
/**
|
|
* Gets or sets whether this layout routes Links.
|
|
* The default value is true.
|
|
* When false, this layout will not explicitly set the Link#points,
|
|
* and the default routing of each individual Link will take place after the Nodes are moved by #commitLayout.
|
|
* Setting this property does not invalidate this layout.
|
|
*
|
|
* Some layouts ignore links, in which case this property is ignored.
|
|
* @since 1.1
|
|
*/
|
|
isRouting: boolean;
|
|
/**
|
|
* Gets or sets whether this layout be performed in real-time, before the end of a transaction.
|
|
* All layouts that are invalidated will be performed at the end of a transaction.
|
|
* The default value is null.
|
|
* A null value is treated as true for a Diagram#layout but false for a Group#layout.
|
|
* Setting this property does not invalidate this layout.
|
|
* @since 1.2
|
|
*/
|
|
isRealtime: boolean | null;
|
|
/**
|
|
* Gets or sets whether this layout needs to be performed again (if false).
|
|
* Instead of setting this property directly, it is normal to set it to false by calling #invalidateLayout,
|
|
* since that also requests performing a layout in the near future.
|
|
*/
|
|
isValidLayout: boolean;
|
|
/**
|
|
* If #isOngoing is true and if an initial layout has not yet been performed,
|
|
* set the #isValidLayout property to false, and ask to perform another layout in the near future.
|
|
* If #isInitial is true, this layout is invalidated only when the Diagram#model is replaced,
|
|
* not under the normal circumstances such as when parts are added or removed or
|
|
* due to other calls to Layout#invalidateLayout.
|
|
*
|
|
* If you set both #isInitial and #isOngoing to false,
|
|
* there will be no automatic layout invalidation, because this method
|
|
* will not set #isValidLayout to false.
|
|
* However you can still set #isValidLayout explicitly.
|
|
*
|
|
* This is typically called when a layout property value has changed,
|
|
* or when a Part is added or removed or changes visibility, if Part#layoutConditions includes the pertinent flags.
|
|
*/
|
|
invalidateLayout(): void;
|
|
/**
|
|
* Gets or sets the LayoutNetwork used by this Layout, if any.
|
|
* The default value is null.
|
|
* Setting this property does not invalidate this layout.
|
|
* Not all kinds of layout make use of a LayoutNetwork.
|
|
* Call #createNetwork or #makeNetwork to create a network.
|
|
*/
|
|
network: LayoutNetwork | null;
|
|
/**
|
|
* Create a new LayoutNetwork of LayoutVertexes and LayoutEdges.
|
|
* This may be overridden in Layout subclasses to create instances of subclasses of
|
|
* LayoutNetwork.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {LayoutNetwork} a new LayoutNetwork.
|
|
*/
|
|
createNetwork(): LayoutNetwork;
|
|
/**
|
|
* Create and initialize a LayoutNetwork with the given nodes and links.
|
|
* This should be called by #doLayout when this layout uses a #network.
|
|
* This method calls #createNetwork to allocate the network.
|
|
* This may be overridden in Layout subclasses to customize the initialization.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
* @return {LayoutNetwork} normally the value of a call to #createNetwork initialized by vertexes and edges corresponding to the *coll* argument.
|
|
*/
|
|
makeNetwork(coll: Diagram | Group | Iterable<Part>): LayoutNetwork;
|
|
/**
|
|
* When using a LayoutNetwork, update the "physical" node positionings and link routings.
|
|
* This should be called by #doLayout when this layout uses a #network.
|
|
* This calls #commitLayout to actually set Node positions and route Links.
|
|
* This performs the changes within a transaction.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
updateParts(): void;
|
|
/**
|
|
* When using a LayoutNetwork, commit changes to the diagram
|
|
* by setting Node positions and by routing the Links.
|
|
* This is called by #updateParts within a transaction.
|
|
*
|
|
* You should not call this method -- it is a "protected virtual" method.
|
|
* This may be overridden by subclasses of Layout.
|
|
* By default this method is implemented as follows:
|
|
* ```js
|
|
* protected commitLayout() {
|
|
* if (this.network === null) return;
|
|
* var vit = this.network.vertexes.iterator;
|
|
* while (vit.next()) {
|
|
* var vert = vit.value;
|
|
* vert.commit();
|
|
* }
|
|
* if (this.isRouting) {
|
|
* var eit = this.network.edges.iterator;
|
|
* while (eit.next()) {
|
|
* var edge = eit.value;
|
|
* edge.commit();
|
|
* }
|
|
* }
|
|
* }
|
|
* ```
|
|
*
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitLayout(): void;
|
|
/**
|
|
* Position all of the nodes that do not have an assigned Part#location
|
|
* in the manner of a simple rectangular array.
|
|
* The default implementation ignores all Groups and Links;
|
|
* many subclasses of Layout ignore all instances of Parts
|
|
* that are not Nodes or Links.
|
|
*
|
|
* You can override this method to do whatever node positioning and link routing
|
|
* that you wish.
|
|
*
|
|
* When the layout makes use of a LayoutNetwork,
|
|
* this method should call #makeNetwork and #updateParts.
|
|
* The #updateParts method will call #commitLayout within a transaction.
|
|
* The outline of such an override should be like:
|
|
* ```js
|
|
* public doLayout(coll) {
|
|
* if (this.network === null) this.network = this.makeNetwork(coll);
|
|
* // assign LayoutVertex.bounds to all vertexes in the network:
|
|
* var vit = this.network.vertexes.iterator;
|
|
* while (vit.next()) {
|
|
* var v = vit.value;
|
|
* v.centerX = ...
|
|
* v.centerY = ...
|
|
* }
|
|
* this.updateParts();
|
|
* this.network = null;
|
|
* }
|
|
* ```
|
|
* Override #commitLayout to actually position nodes and route links.
|
|
*
|
|
* When the layout does <em>not</em> make use of a LayoutNetwork,
|
|
* this method should make direct changes to Nodes and Links
|
|
* within a transaction, and it should call #collectParts on the argument *coll* in order
|
|
* to get the proper set of Nodes and Links to work on.
|
|
* Examples are provided in the Extensions directory.
|
|
*
|
|
* If this Layout belongs to a Diagram, the argument must be either the same Diagram or must denote Parts that belong to the Diagram.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
*/
|
|
doLayout(coll: Diagram | Group | Iterable<Part>): void;
|
|
/**
|
|
* This method is called by layouts to determine the size and initial position of the nodes that it is laying out.
|
|
* Normally this just returns the part's GraphObject#actualBounds.
|
|
* However, if #boundsComputation has been set to a function, that function will be called
|
|
* in order to return the bounds of the given Part in document coordinates that the layout should pretend it has.
|
|
* @param {Part} part the Part being laid out
|
|
* @param {Rect=} rect an optional Rect that will be modified and returned
|
|
* @return {Rect} a Rect in document coordinates
|
|
* @since 2.0
|
|
*/
|
|
getLayoutBounds(part: Part, rect?: Rect): Rect;
|
|
/**
|
|
* Gets or sets a function that determines the initial size and position in document coordinates of a LayoutVertex corresponding to a Node.
|
|
* This function is called by #getLayoutBounds.
|
|
* The default value for this property is null, in which case the GraphObject#actualBounds of the Node is used.
|
|
* Setting this property to a new value invalidates this layout.
|
|
*
|
|
* The non-null value must be a function that takes 3 arguments.
|
|
* The first argument will be the Part whose bounds the Layout should use.
|
|
* The second argument will be this Layout.
|
|
* The third argument will be a Rect that must be modified and returned
|
|
* The return value must be in document coordinates. You may find it convenient to call GraphObject#getDocumentBounds
|
|
* to get the bounds in document coordinates of an object within the node.
|
|
* @since 2.0
|
|
*/
|
|
boundsComputation: ((part: Part, lay: Layout, rect: Rect) => Rect) | null;
|
|
/**
|
|
* A convenient way of converting the Diagram|Group|Iterable argument to doLayout to an actual collection of eligible Parts.
|
|
* The resulting Set will not include any Nodes or Links for which Part#canLayout is false.
|
|
* If the argument includes a Group for which Group#layout is null, the resulting Set
|
|
* will include the member parts of that group rather than that group itself.
|
|
* You will not need to call collectParts if you call #makeNetwork,
|
|
* because that method does effectively the same thing when building the LayoutNetwork.
|
|
*
|
|
* Typical usage:
|
|
* ```js
|
|
* public doLayout(coll) {
|
|
* // COLL might be a Diagram or a Group or some Iterable<Part>
|
|
* var it = this.collectParts(coll).iterator;
|
|
* while (it.next()) {
|
|
* var node = it.value;
|
|
* if (node instanceof go.Node) {
|
|
* . . . position the node . . .
|
|
* }
|
|
* }
|
|
* }
|
|
* ```
|
|
* @param {Diagram|Group|Iterable.<Part>} coll
|
|
* @return {Set.<Part>}
|
|
* @since 1.7
|
|
*/
|
|
protected collectParts(coll: Diagram | Group | Iterable<Part>): Set<Part>;
|
|
/**
|
|
* Gets or sets the top-left point for where the graph should be positioned when laid out.
|
|
* The default value for this property is the Point(0, 0).
|
|
* Setting this property to a new value invalidates this layout.
|
|
* This property is likely to be set by many Layouts that belong to a Group when the layout is performed.
|
|
*/
|
|
arrangementOrigin: Point;
|
|
/**
|
|
* Compute the desired value of #arrangementOrigin if this Layout is being performed for a Group.
|
|
* This is typically called near the beginning of the implementation of #doLayout:
|
|
* `this.arrangementOrigin = this.initialOrigin(this.arrangementOrigin);`
|
|
* if the layout wants to respect the pre-layout location of the Group when deciding where to position its member nodes.
|
|
* @expose
|
|
* @param {Point} origin
|
|
* @return {Point}
|
|
*/
|
|
protected initialOrigin(origin: Point): Point;
|
|
}
|
|
/**
|
|
* This provides an abstract view of a diagram as a
|
|
* network (graph) of vertexes and directed edges.
|
|
* The network contains vertexes and edges corresponding to Nodes and Links.
|
|
*
|
|
* This class provides a framework for manipulating the
|
|
* state of nodes and links without modifying the structure of the diagram.
|
|
* Having a separate representation also permits adding or removing vertexes or edges
|
|
* from the network so that the graph that is laid out is not isomorphic to the diagram's graph.
|
|
*
|
|
* For each kind of layout that uses a LayoutNetwork there is a subclass of LayoutVertex and a subclass of LayoutEdge:
|
|
* - CircularLayout: CircularVertex and CircularEdge
|
|
* - ForceDirectedLayout: ForceDirectedVertex and ForceDirectedEdge
|
|
* - LayeredDigraphLayout: LayeredDigraphVertex and LayeredDigraphEdge
|
|
* - TreeLayout: TreeVertex and TreeEdge
|
|
*
|
|
* Modifying a LayoutNetwork or a LayoutVertex or a LayoutEdge does not
|
|
* invalidate the Layout or raise any changed events.
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class LayoutNetwork {
|
|
/**
|
|
* This constructs an empty network.
|
|
* It is commonplace to call #addParts to build up the network
|
|
* to have the same structure as a Diagram's or Group's nodes and links.
|
|
*/
|
|
constructor(layout: Layout);
|
|
/**
|
|
* Gets the Layout that uses this network
|
|
* of LayoutVertexes and LayoutEdges.
|
|
* The default value is null.
|
|
* It is set automatically for you when this setting Layout#network.
|
|
*/
|
|
layout: Layout;
|
|
/**
|
|
* Gets a collection of all of the LayoutVertexes in this network.
|
|
* Do not modify this collection directly.
|
|
* Instead, call #addVertex, #deleteVertex, #addNode, or #deleteNode.
|
|
*/
|
|
readonly vertexes: Set<LayoutVertex>;
|
|
/**
|
|
* Gets a collection of all of the LayoutEdges in this network.
|
|
* Do not modify this collection directly.
|
|
* Instead, call #addEdge, #deleteEdge, #addLink, or #deleteLink.
|
|
*/
|
|
readonly edges: Set<LayoutEdge>;
|
|
/**
|
|
* Allocate a new instance of LayoutVertex.
|
|
* This is overridden in LayoutNetwork subclasses to create instances of subclasses of LayoutVertex.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {LayoutVertex}
|
|
*/
|
|
createVertex(): LayoutVertex;
|
|
/**
|
|
* Allocate a new instance of LayoutEdge.
|
|
* This is overridden in LayoutNetwork subclasses to create instances of subclasses of LayoutEdge.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @return {LayoutEdge}
|
|
*/
|
|
createEdge(): LayoutEdge;
|
|
/**
|
|
* Creates a network of LayoutVertexes and LayoutEdges
|
|
* corresponding to the given Nodes and Links.
|
|
* This is usually more convenient than repeatedly calling #addNode and #addLink.
|
|
* This method ignores all instances of Parts that are not Nodes or Links.
|
|
* This will recurse through Groups that have no Group#layout.
|
|
* @param {Iterable.<Part>} parts A collection of Nodes or Links.
|
|
* @param {boolean=} toplevelonly whether to skip Parts in the given collection that are contained by Groups; default is false
|
|
* @param {function(Part):boolean|null=} pred optional predicate to apply to each Part --
|
|
* if it returns false do not include Vertex or Edge in the network;
|
|
* default ignores link label nodes or links connecting with them
|
|
*/
|
|
addParts(parts: Iterable<Part>, toplevelonly?: boolean, pred?: ((a: Part) => boolean) | null): void;
|
|
/**
|
|
* Adds a LayoutVertex to the network.
|
|
* @param {LayoutVertex} vertex
|
|
*/
|
|
addVertex(vertex: LayoutVertex): void;
|
|
/**
|
|
* This convenience method makes sure there is a LayoutVertex
|
|
* in this network corresponding to a Node.
|
|
* @param {Node} node
|
|
* @return {LayoutVertex} a vertex in this network.
|
|
*/
|
|
addNode(node: Node): LayoutVertex;
|
|
/**
|
|
* Removes a LayoutVertex from the network.
|
|
* This function also deletes all edges to or from the vertex.
|
|
* @param {LayoutVertex} vertex
|
|
*/
|
|
deleteVertex(vertex: LayoutVertex): void;
|
|
/**
|
|
* This convenience method deletes any LayoutVertex
|
|
* corresponding to a Node.
|
|
* @param {Node} node
|
|
*/
|
|
deleteNode(node: Node): void;
|
|
/**
|
|
* Returns the LayoutVertex that was constructed for the Node.
|
|
* @param {Node} node
|
|
* @return {LayoutVertex} a vertex in this network, or null if no such vertex exists.
|
|
*/
|
|
findVertex(node: Node): LayoutVertex | null;
|
|
/**
|
|
* Adds a LayoutEdge to the network.
|
|
* Although this method is provided for completeness,
|
|
* #linkVertexes provides a more efficient manner of linking
|
|
* vertexes already in the network.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
addEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* This convenience method makes sure there is a LayoutEdge
|
|
* in this network corresponding to a Link.
|
|
* If #findEdge returns null, this method creates a new LayoutEdge,
|
|
* makes sure the Link#fromNode and Link#toNode have
|
|
* corresponding LayoutVertexes in the network, and adds the edge itself
|
|
* to the network.
|
|
* @param {Link} link
|
|
* @return {LayoutEdge} an edge in this network.
|
|
*/
|
|
addLink(link: Link): LayoutEdge;
|
|
/**
|
|
* Removes a LayoutEdge from the network.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
deleteEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* This convenience method deletes from this network any LayoutEdge
|
|
* corresponding to a Link.
|
|
* @param {Link} link
|
|
*/
|
|
deleteLink(link: Link): void;
|
|
/**
|
|
* Returns the LayoutEdge that was constructed for the Link.
|
|
* @param {Link} link
|
|
* @return {LayoutEdge} an edge in this network, or null if no such edge exists.
|
|
*/
|
|
findEdge(link: Link): LayoutEdge | null;
|
|
/**
|
|
* Links two vertexes already in the network and returns the created LayoutEdge.
|
|
* @param {LayoutVertex} fromVertex
|
|
* @param {LayoutVertex} toVertex
|
|
* @param {Link} link
|
|
* @return {LayoutEdge} an edge in this network, or null if both vertexes don't exist.
|
|
*/
|
|
linkVertexes(fromVertex: LayoutVertex, toVertex: LayoutVertex, link: Link | null): LayoutEdge;
|
|
/**
|
|
* Reverses the direction of a LayoutEdge in the network.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
reverseEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* Deletes all LayoutEdges whose "to vertex" and "from vertex" are the same vertex.
|
|
*/
|
|
deleteSelfEdges(): void;
|
|
/**
|
|
* Deletes all vertexes and edges that have no Part associated with them.
|
|
* @expose
|
|
*/
|
|
deleteArtificialVertexes(): void;
|
|
/**
|
|
* Modify this network by splitting it up into separate subnetworks,
|
|
* each of which has all of its vertexes connected to each other, but not
|
|
* to any vertexes in any other subnetworks.
|
|
*
|
|
* This method will first delete from this network all artificial vertexes and
|
|
* all edges that do not connect two different vertexes.
|
|
* Afterwards, this original network may be empty or may contain all of the
|
|
* singleton vertexes, each of which had no edges connecting it to any other vertexes.
|
|
* @param {boolean=} clean whether to delete artificial vertexes and edges, disconnected edges, and reflexive edges; default is true
|
|
* @return {List.<LayoutNetwork>} a collection of LayoutNetworks,
|
|
* sorted in order of decreasing vertex count.
|
|
*/
|
|
splitIntoSubNetworks(clean?: boolean): List<LayoutNetwork>;
|
|
/**
|
|
* Retrieve all of the Nodes and Links from the
|
|
* LayoutVertexes and LayoutEdges that are in this network.
|
|
* @return {Set.<Part>} A collection of Parts.
|
|
* @since 1.1
|
|
*/
|
|
findAllParts(): Set<Part>;
|
|
}
|
|
/**
|
|
* A vertex represents a Node in a LayoutNetwork,
|
|
* along with its #bounds and #focus and collections of LayoutEdges that come into and go out of the vertex.
|
|
* The #node property may be null for vertexes that represent "dummy" nodes,
|
|
* when the layout wants to work with a network that is not isomorphic with the collection of Nodes and Links being laid out.
|
|
*
|
|
* This holds layout-specific data for the node.
|
|
* For each kind of layout that uses a LayoutNetwork there is a subclass of LayoutVertex and a subclass of LayoutEdge:
|
|
* - CircularLayout: CircularVertex and CircularEdge
|
|
* - ForceDirectedLayout: ForceDirectedVertex and ForceDirectedEdge
|
|
* - LayeredDigraphLayout: LayeredDigraphVertex and LayeredDigraphEdge
|
|
* - TreeLayout: TreeVertex and TreeEdge
|
|
*
|
|
* Modifying a LayoutNetwork or a LayoutVertex or a LayoutEdge does not
|
|
* invalidate the Layout or raise any changed events.
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class LayoutVertex {
|
|
/**
|
|
* This constructs a vertex that does not know about any Node.
|
|
*/
|
|
constructor(network: LayoutNetwork);
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
readonly sourceEdgesArrayAccess: Array<LayoutEdge>;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
readonly destinationEdgesArrayAccess: Array<LayoutEdge>;
|
|
/**
|
|
* Gets or sets the data object in the model that should be associated with this vertex, if any.
|
|
* The value will be non-null if this vertex is virtualized,
|
|
* not represented by a real Node in the Diagram.
|
|
* Each data object should have a 'bounds' property that is a Rect
|
|
* or any JavaScript Object with 'x', 'y', 'width', and 'height' properties that are real numbers,
|
|
* and non-negative numbers for the width and the height.
|
|
* Setting this data property will also set the #bounds and #focus properties.
|
|
* @since 1.6
|
|
*/
|
|
data: ObjectData | null;
|
|
/**
|
|
* Gets or sets the Node associated with this vertex, if any.
|
|
* The value may be null if this vertex is a "dummy" vertex,
|
|
* not represented by a real Node in the Diagram.
|
|
*
|
|
* This property setter also sets the #bounds and #focus properties
|
|
* according to the value of the Node's actualBounds and its Part#locationObject's center point.
|
|
*/
|
|
node: Node | null;
|
|
/**
|
|
* Gets or sets the bounds of this vertex, in document coordinates.
|
|
* Setting this property does not directly modify the position of any Node,
|
|
* but it will modify the value of #centerX and #centerY,
|
|
* as well as the subsidiary convenience properties #x, #y, #width, and #height.
|
|
*/
|
|
bounds: Rect;
|
|
/**
|
|
* Gets or sets the offset of the #focusX and #focusY
|
|
* from the #bounds position.
|
|
* Setting this property does not directly modify the position of any Node,
|
|
* but it does affect the value of #centerX and #centerY.
|
|
*
|
|
* The "focus" is normally the center of the Node's Part#locationObject.
|
|
*/
|
|
focus: Point;
|
|
/**
|
|
* Gets or sets the center Point#x of this vertex, in document coordinates.
|
|
* This property depends on both #bounds and #focus.
|
|
* Setting this property does not modify the position of any Node,
|
|
* but it will modify the value of #bounds.
|
|
*/
|
|
centerX: number;
|
|
/**
|
|
* Gets or sets the center Point#y of this vertex, in document coordinates.
|
|
* This property depends on both #bounds and #focus.
|
|
* Setting this property does not modify the position of any Node,
|
|
* but it will modify the value of #bounds.
|
|
*/
|
|
centerY: number;
|
|
/**
|
|
* Gets or sets the relative X position of the "center" point, the focus.
|
|
*/
|
|
focusX: number;
|
|
/**
|
|
* Gets or sets the relative Y position of the "center" point, the focus.
|
|
*/
|
|
focusY: number;
|
|
/**
|
|
* Gets or sets the left point of this vertex.
|
|
*/
|
|
x: number;
|
|
/**
|
|
* Gets or sets the top point of this vertex.
|
|
*/
|
|
y: number;
|
|
/**
|
|
* Gets or sets the width of this vertex.
|
|
* This is always the horizontal distance reserved for the node.
|
|
*/
|
|
width: number;
|
|
/**
|
|
* Gets or sets the height of this vertex.
|
|
* This is always the vertical distance reserved for the node.
|
|
*/
|
|
height: number;
|
|
/**
|
|
* Moves the Node corresponding to this vertex
|
|
* so that its position is at the current #bounds point.
|
|
*
|
|
* To make the most common cases look right, the Node's Part#locationObject
|
|
* is centered. Thus iconic nodes will have the center of the icon be positioned
|
|
* according to the center of this vertex, ignoring any labels.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
commit(): void;
|
|
/**
|
|
* Adds a LayoutEdge to the list of predecessors
|
|
* (the edge will be coming into this vertex).
|
|
* Calling this method does not modify the LayoutEdge#toVertex of the LayoutEdge.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
addSourceEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* Deletes a LayoutEdge from the list of predecessors
|
|
* (the edge was coming into this vertex).
|
|
* Calling this method does not modify the LayoutEdge#toVertex of the LayoutEdge.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
deleteSourceEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* Adds a LayoutEdge to the list of successors
|
|
* (the edge will be going out from this vertex).
|
|
* Calling this method does not modify the LayoutEdge#fromVertex of the LayoutEdge.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
addDestinationEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* Deletes a LayoutEdge from the list of successors
|
|
* (the edge was going out from this vertex).
|
|
* Calling this method does not modify the LayoutEdge#fromVertex of the LayoutEdge.
|
|
* @param {LayoutEdge} edge
|
|
*/
|
|
deleteDestinationEdge(edge: LayoutEdge): void;
|
|
/**
|
|
* Gets the LayoutNetwork that owns this vertex.
|
|
* The default value is null.
|
|
* It is set automatically for you in LayoutNetwork#createVertex.
|
|
*/
|
|
network: LayoutNetwork;
|
|
/**
|
|
* This read-only property returns an iterator for all of the vertexes that are connected with edges coming into this vertex.
|
|
*/
|
|
readonly sourceVertexes: Iterator<LayoutVertex>;
|
|
/**
|
|
* This read-only property returns an iterator for all of the vertexes that are connected with edges going out of this vertex.
|
|
*/
|
|
readonly destinationVertexes: Iterator<LayoutVertex>;
|
|
/**
|
|
* This read-only property returns an iterator for all of the vertexes that are connected in either direction with this vertex.
|
|
*/
|
|
readonly vertexes: Iterator<LayoutVertex>;
|
|
/**
|
|
* This read-only property returns an iterator for all of the edges that come into this vertex.
|
|
*/
|
|
readonly sourceEdges: Iterator<LayoutEdge>;
|
|
/**
|
|
* This read-only property returns an iterator for all of the edges that go out of this vertex.
|
|
*/
|
|
readonly destinationEdges: Iterator<LayoutEdge>;
|
|
/**
|
|
* This read-only property returns an iterator for all of the edges that are connected with this vertex in either direction.
|
|
*/
|
|
readonly edges: Iterator<LayoutEdge>;
|
|
/**
|
|
* This read-only property returns the total number of edges that are connected with this vertex in either direction.
|
|
*/
|
|
readonly edgesCount: number;
|
|
/**
|
|
* This static function is used to compare the Part#text values of the #nodes of
|
|
* the argument LayoutVertexes.
|
|
* This just does a simple case-sensitive string comparison.
|
|
* Alternatively you may wish to use LayoutVertex.smartComparer or write your own comparison function.
|
|
* @param {LayoutVertex} m
|
|
* @param {LayoutVertex} n
|
|
* @return {number} int -1, 0, or 1, depending on whether the comparison between M and N is less than, equal, or greater than.
|
|
*/
|
|
static standardComparer(m: LayoutVertex, n: LayoutVertex): number;
|
|
/**
|
|
* This static function is used to compare the Part#text values of the #nodes of
|
|
* the argument LayoutVertexes.
|
|
* If the text ends in a number, the values are compared as numbers rather than lexicographically.
|
|
* Naturally this comparison is significantly slower than LayoutVertex.standardComparer.
|
|
* @param {LayoutVertex} m
|
|
* @param {LayoutVertex} n
|
|
* @return {number} int -1, 0, or 1, depending on whether the comparison between M and N is less than, equal, or greater than.
|
|
*/
|
|
static smartComparer(m: LayoutVertex, n: LayoutVertex): number;
|
|
}
|
|
/**
|
|
* An edge represents a Link in a LayoutNetwork,
|
|
* along with its #fromVertex and #toVertex.
|
|
* The #link property may be null for edges that represent "dummy" links,
|
|
* when the layout wants to work with a network that is not isomorphic with the collection of Nodes and Links being laid out.
|
|
*
|
|
* It holds layout-specific data for the link.
|
|
* For each kind of layout that uses a LayoutNetwork there is a subclass of LayoutVertex and a subclass of LayoutEdge:
|
|
* - CircularLayout: CircularVertex and CircularEdge
|
|
* - ForceDirectedLayout: ForceDirectedVertex and ForceDirectedEdge
|
|
* - LayeredDigraphLayout: LayeredDigraphVertex and LayeredDigraphEdge
|
|
* - TreeLayout: TreeVertex and TreeEdge
|
|
*
|
|
* Modifying a LayoutNetwork or a LayoutVertex or a LayoutEdge does not
|
|
* invalidate the Layout or raise any changed events.
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class LayoutEdge {
|
|
/**
|
|
* This constructs an edge that does not know about any Link.
|
|
*/
|
|
constructor(network: LayoutNetwork);
|
|
/**
|
|
* Commits the route of this edge to the corresponding Link, if any.
|
|
* By default this does nothing.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
commit(): void;
|
|
/**
|
|
* Returns the edge's vertex at the other of this edge from the given vertex.
|
|
* @param {LayoutVertex} v
|
|
*/
|
|
getOtherVertex(v: LayoutVertex): LayoutVertex | null;
|
|
/**
|
|
* Gets the LayoutNetwork that owns this edge.
|
|
* The default value is null.
|
|
* It is set automatically for you in LayoutNetwork#createEdge.
|
|
*/
|
|
network: LayoutNetwork;
|
|
/**
|
|
* For virtualized layouts working on model data instead of a Link.
|
|
* @since 1.6
|
|
*/
|
|
data: ObjectData | null;
|
|
/**
|
|
* Gets or sets the Link associated with this edge, if any.
|
|
* The value may be null if this edge is a "dummy" edge,
|
|
* not represented by a real Link in the Diagram.
|
|
*/
|
|
link: Link | null;
|
|
/**
|
|
* Gets or sets the LayoutVertex that this edge comes from.
|
|
* Setting this property does not change any LayoutVertex#destinationEdges collection.
|
|
*/
|
|
fromVertex: LayoutVertex | null;
|
|
/**
|
|
* Gets or sets the LayoutVertex that this edge goes to.
|
|
* Setting this property does not change any LayoutVertex#sourceEdges collection.
|
|
*/
|
|
toVertex: LayoutVertex | null;
|
|
}
|
|
/**
|
|
* This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,
|
|
* and wrapping as needed. It ignores any Links connecting the Nodes being laid out.
|
|
* There are many samples that use GridLayout.
|
|
* Every Palette uses a GridLayout by default.
|
|
* <p class="box">
|
|
* If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.
|
|
* See samples that make use of GridLayout in the <a href="../../samples/index.html#gridlayout">samples index</a>.
|
|
*
|
|
* By default this layout will sort all of the Parts alphabetically
|
|
* (comparing Part#text values, respecting case)
|
|
* and position them left-to-right, separated by #spacing`.width`,
|
|
* until they do not fit in the current row.
|
|
* At that time it starts a new row, separated from the previous row by #spacing`.height`.
|
|
* There is a uniform cell size equal to the maximum Part width (plus spacing width)
|
|
* and the maximum part height (plus spacing height).
|
|
* At least one part is placed in each row, even if the part by itself is wider than the wrapping width.
|
|
*
|
|
* You can specify values for the #cellSize `width` and `height`.
|
|
* If a part is wider than the cell size, it spans more than one cell in the row.
|
|
* You can also specify a value for the #wrappingWidth,
|
|
* which will be used instead of the diagram's viewport width, to control when each row is considered "full".
|
|
* The value of Layout#isViewportSized will be true when
|
|
* the value of #wrappingWidth is `NaN`.
|
|
* This causes the layout to be performed again automatically as the viewport changes size.
|
|
*
|
|
* You can also set #wrappingColumn to limit the number of items in each row.
|
|
* Both the #wrappingWidth and the #wrappingColumn are respected when deciding when to wrap to the next row.
|
|
*
|
|
* This layout is sufficiently simple that it does not use a LayoutNetwork.
|
|
* @extends Layout
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class GridLayout extends Layout {
|
|
constructor();
|
|
/**
|
|
* Assign the positions of the parts, ignoring any links.
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
*/
|
|
doLayout(coll: Diagram | Group | Iterable<Part>): void;
|
|
/**
|
|
* Gets or sets the wrapping width.
|
|
*
|
|
* The default is NaN, meaning to use the width of the diagram's panel's viewport.
|
|
* Must be a value greater than 0.
|
|
*/
|
|
wrappingWidth: number;
|
|
/**
|
|
* Gets or sets the maximum number of columns.
|
|
*
|
|
* The default is NaN, meaning not to limit the number of columns.
|
|
* 1 is a common value to produce a single column of parts.
|
|
*/
|
|
wrappingColumn: number;
|
|
/**
|
|
* Gets or sets the minimum part size by which each part is positioned in the grid.
|
|
*
|
|
* The default value is NaN x NaN.
|
|
* The units are in document coordinates.
|
|
*
|
|
* When the cell size is smaller than a part, the part will occupy more than one cell.
|
|
* This allows parts to be positioned closer to each other, but then variations in part
|
|
* sizes may cause them not to be aligned in perfect rows or columns.
|
|
*/
|
|
cellSize: Size;
|
|
/**
|
|
* Gets or sets the minimum horizontal and vertical space between parts.
|
|
*
|
|
* The default value is 10 x 10.
|
|
* The units are in document coordinates.
|
|
*/
|
|
spacing: Size;
|
|
/**
|
|
* Gets or sets whether the Part#location or the position should be used
|
|
* to arrange each part.
|
|
*
|
|
* The default value is GridLayout.Location -- the Part#locations will
|
|
* be aligned in a grid.
|
|
*/
|
|
alignment: EnumValue;
|
|
/**
|
|
* Gets or sets how to arrange the parts.
|
|
* Must be GridLayout.LeftToRight or GridLayout.RightToLeft.
|
|
*
|
|
* The default value is GridLayout.LeftToRight.
|
|
*/
|
|
arrangement: EnumValue;
|
|
/**
|
|
* Gets or sets what order to place the parts.
|
|
* Must be GridLayout.Forward, GridLayout.Reverse,
|
|
* GridLayout.Ascending, or GridLayout.Descending.
|
|
*
|
|
* The default value is GridLayout.Ascending.
|
|
*/
|
|
sorting: EnumValue;
|
|
/**
|
|
* Gets or sets the comparison function used to sort the parts.
|
|
*
|
|
* The default value is a case-insensitive alphabetic comparison
|
|
* using the Part#text property of each part.
|
|
* ```js
|
|
* $(go.GridLayout,
|
|
* {
|
|
* sorting: go.GridLayout.Ascending,
|
|
* comparer: function(pa, pb) {
|
|
* var da = pa.data;
|
|
* var db = pb.data;
|
|
* if (da.someProperty < db.someProperty) return -1;
|
|
* if (da.someProperty > db.someProperty) return 1;
|
|
* return 0;
|
|
* }
|
|
* }
|
|
* )
|
|
* ```
|
|
*/
|
|
comparer: ((a: Part, b: Part) => number);
|
|
/**
|
|
* Position the top-left corner of each part at a grid point;
|
|
* This value is used for GridLayout#alignment.
|
|
* @constant
|
|
*/
|
|
static Position: EnumValue;
|
|
/**
|
|
* Position the part's Part#location at a grid point;
|
|
* This value is used for GridLayout#alignment.
|
|
* @constant
|
|
*/
|
|
static Location: EnumValue;
|
|
/**
|
|
* Fill each row from left to right;
|
|
* This value is used for GridLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static LeftToRight: EnumValue;
|
|
/**
|
|
* Fill each row from right to left;
|
|
* This value is used for GridLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static RightToLeft: EnumValue;
|
|
/**
|
|
* Lay out each child in the order in which they were found;
|
|
* This value is used for GridLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Forward: EnumValue;
|
|
/**
|
|
* Lay out each child in reverse order from which they were found;
|
|
* This value is used for GridLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Reverse: EnumValue;
|
|
/**
|
|
* Lay out each child according to the sort order given by GridLayout#comparer
|
|
* This value is used for GridLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Ascending: EnumValue;
|
|
/**
|
|
* Lay out each child in reverse sort order given by GridLayout#comparer
|
|
* This value is used for GridLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Descending: EnumValue;
|
|
}
|
|
/**
|
|
* The Key type is the same as `string | number | undefined`.
|
|
* @category Type
|
|
*/
|
|
export type Key = string | number | undefined;
|
|
/**
|
|
* Interface for the output object of Model#toIncrementalData.
|
|
*
|
|
* All properties of this object are optional, as they are only included if changes occurred.
|
|
* For instance, if a transaction didn't include any changes to modelData, the modelData property of this interface won't be included on the output object.
|
|
*
|
|
* Any shared or cyclic references within the model data will be maintained on the data included on this output object.
|
|
* @category Model
|
|
* @since 2.1
|
|
*/
|
|
export interface IncrementalData {
|
|
/**
|
|
* Object containing the modified Model#modelData.
|
|
*/
|
|
modelData?: ObjectData;
|
|
/**
|
|
* Array of node keys added. Any key included will also be included in the modifiedNodeData array.
|
|
*/
|
|
insertedNodeKeys?: Array<Key>;
|
|
/**
|
|
* Array of node data objects modified.
|
|
*/
|
|
modifiedNodeData?: Array<ObjectData>;
|
|
/**
|
|
* Array of node keys deleted.
|
|
*/
|
|
removedNodeKeys?: Array<Key>;
|
|
/**
|
|
* Array of link keys added. Any key included will also be included in the modifiedLinkData array.
|
|
*/
|
|
insertedLinkKeys?: Array<Key>;
|
|
/**
|
|
* Array of link data objects modified.
|
|
*/
|
|
modifiedLinkData?: Array<ObjectData>;
|
|
/**
|
|
* Array of link keys deleted.
|
|
*/
|
|
removedLinkKeys?: Array<Key>;
|
|
}
|
|
/**
|
|
* Models hold the essential data of a diagram, describing the basic entities and their properties and relationships
|
|
* without specifying the appearance and behavior of the Nodes and Links and Groups that represent them visually.
|
|
* Models tend to hold only relatively simple data, making them easy to persist by serialization as JSON or XML formatted text.
|
|
*
|
|
* Models hold simple data objects, not Parts such as Nodes or Links.
|
|
* Node data is normally represented in a Diagram by instances of Node,
|
|
* but they could be represented by simple Parts or by Groups.
|
|
* A Diagram constructs Parts for its Diagram#model's data by copying templates.
|
|
* Templates are Panels of GraphObjects that get some property values from the model data,
|
|
* accessible via the Panel#data property, using data Binding.
|
|
* See <a href="../../intro/usingModels.html">Using Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a> for an introduction.
|
|
*
|
|
* This Model class only supports holding an array of node data
|
|
* and interpreting properties on that data to be able to refer to them
|
|
* using unique key values.
|
|
* To support simple tree-structured graphs, use a TreeModel, which inherits from this class.
|
|
* To support links and grouping, use a GraphLinksModel.
|
|
*
|
|
* Each node data object is assumed to have a unique key value.
|
|
* The #nodeKeyProperty property names the property on the node data whose value
|
|
* is the unique key for that node data object.
|
|
* The default value for this property is "key".
|
|
* You should not have a TwoWay data binding on the node key property,
|
|
* because that might cause the property value to be set to a duplicate key value.
|
|
*
|
|
* The key values must be either strings or numbers or undefined.
|
|
* If the key is undefined, or if there are duplicate key values,
|
|
* the model will automatically try to assign a new unique key value.
|
|
* Caution: if your keys are numbers, do not try to use string representations of those numbers as keys.
|
|
* Conversely, if your keys are strings that happen to have number syntax, do not try to use those number values.
|
|
* Sometimes JavaScript will automatically convert from string to number or vice-versa, but sometimes it won't.
|
|
*
|
|
* For example, one can define a graph consisting of just two nodes:
|
|
* ```js
|
|
* model.nodeDataArray = [
|
|
* { key: "Alpha" },
|
|
* { key: "Beta" }
|
|
* ];
|
|
* ```
|
|
*
|
|
* This model cannot detect the modification of the #nodeDataArray array
|
|
* or the modification of any node data object.
|
|
* If you want to add or remove node data from the #nodeDataArray,
|
|
* call the #addNodeData or #removeNodeData methods.
|
|
*
|
|
* If you want to modify a node data object, it depends on whether the property you want to change
|
|
* is a structural property that the model needs to know about, or whether it is a property
|
|
* that is only used for data binding or other application-specific purposes.
|
|
*
|
|
* For the former case, call the appropriate method, such as
|
|
* #setKeyForNodeData, #setCategoryForNodeData,
|
|
* GraphLinksModel#setToKeyForLinkData, or GraphLinksModel#setGroupKeyForNodeData.
|
|
* These methods have names that start with "set", "add", "insert", or "remove".
|
|
*
|
|
* For the latter case, when setting an application-specific property, typically for data binding,
|
|
* and to support undo/redo, call #setDataProperty.
|
|
*
|
|
* The #copyNodeData method can be called to make a shallow copy of a node data object.
|
|
* However, if some of those property values are Arrays that want not to be shared but to be copied,
|
|
* you can set #copiesArrays to true. This is typically very useful when dealing
|
|
* with data bound item arrays.
|
|
* Furthermore if the items in those copied Arrays are in fact Objects that need to be copied,
|
|
* you can also set #copiesArrayObjects to true, causing a copied Array to refer to
|
|
* newly shallow-copied objects of the original array.
|
|
*
|
|
* Each model raises ChangedEvents that you can follow by registering a listener via #addChangedListener.
|
|
* Read more at the Introduction page: <a href="../../intro/changedEvents.html">Changed Events</a>.
|
|
*
|
|
* Each model comes with its own UndoManager that is initially not enabled.
|
|
* You will need to set UndoManager#isEnabled to true in order for the
|
|
* UndoManager to record model changes and for your users to perform undo and redo.
|
|
*
|
|
* You can temporarily turn off the recording of changes by setting #skipsUndoManager to true.
|
|
* A number of places within the system do that routinely in order to avoid recording temporary changes,
|
|
* so be sure to remember the original value beforehand and restore it afterwards.
|
|
* Note that in a ChangedEvent listener you may want to ignore events that happen when #skipsUndoManager is true.
|
|
*
|
|
* One normally saves a diagram by just saving its model.
|
|
* If you can use JSON-formatted text, this is easy to do -- just call #toJson
|
|
* to get the string representation of the model, and save that string.
|
|
* Load the diagram by replacing the Diagram#model with one created by calling
|
|
* the static function Model.fromJson:
|
|
* ```js
|
|
* myDiagram.model = go.Model.fromJson(loadedString);
|
|
* ```
|
|
* Note that JSON and other textual data formats cannot faithfully store all JavaScript functions.
|
|
* #toJson and Model.fromJson do not try to save and load functional property values.
|
|
* You should arrange that all such functions, including event handlers, are established by your app.
|
|
* #toJson and Model.fromJson also cannot handle circular references; any sharing of
|
|
* references will be lost too.
|
|
* They also skip properties that are not enumerable, those whose names start with an underscore, and those whose values are undefined.
|
|
*
|
|
* Note that models also do not store the templates used by diagrams,
|
|
* nor any transient or temporary parts such as Adornments, nor any tools,
|
|
* nor any UndoManager state, nor any event listeners.
|
|
* These objects and all other properties of diagrams must be established by your app.
|
|
*
|
|
* You can add any number of properties to the #modelData object, which is serialized and deserialized
|
|
* into JSON just like any other model data for nodes or links.
|
|
* However #modelData is associated with the model as a whole and does not depend on the existence
|
|
* of any node data or link data.
|
|
*
|
|
* It is also easy to save the changes that were recorded in the most recent transaction.
|
|
* Call #toIncrementalJson to generate a JSON-format string that holds the current state of modified data
|
|
* plus the keys of inserted or removed data.
|
|
* That method requires as an argument a ChangedEvent that represents a transaction that completed or
|
|
* an undo or a redo that just finished.
|
|
*
|
|
* It is also possible to use such "incremental" JSON to modify an existing model.
|
|
* Call #applyIncrementalJson, giving it a string generated by #toIncrementalJson,
|
|
* to modify this model by making all of the changes recorded in the JSON text.
|
|
* Note how this method is a regular instance method, whereas Model.fromJson is a static function.
|
|
* @unrestricted
|
|
* @category Model
|
|
*/
|
|
export class Model {
|
|
/**
|
|
* You probably don't want to call this constructor, because this class
|
|
* does not support links (relationships between nodes) or groups (nodes and links and subgraphs as nodes):
|
|
* instead, create instances of a subclass such as GraphLinksModel or TreeModel.
|
|
* @param {Array.<Object>=} nodedataarray an optional Array containing JavaScript objects to be represented by Parts.
|
|
*/
|
|
constructor(nodedataarray?: Array<ObjectData>);
|
|
/**
|
|
* Copies properties from this model to the given model, which must be of the same class.
|
|
* This is called by #copy.
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {Model} copy
|
|
* @since 1.6
|
|
*/
|
|
protected cloneProtected(copy: this): void;
|
|
/**
|
|
* Creates a shallow copy of this Model and returns it.
|
|
* <em>The data are not copied:</em> #nodeDataArray, #modelData,
|
|
* GraphLinksModel#linkDataArray, GraphLinksModel#archetypeNodeData are left empty.
|
|
* Nor are any Changed listeners or the UndoManager copied.
|
|
* @expose
|
|
* @return {Model} an empty copy of the model with the same properties, other than data
|
|
* @since 1.6
|
|
*/
|
|
copy(): Model;
|
|
/**
|
|
* Clear out all references to any model data.
|
|
* This also clears out the UndoManager, so this operation is not undoable.
|
|
* This method is called by Diagram#clear; it does not notify any Diagrams or other listeners.
|
|
* This method does not unregister any Changed event listeners.
|
|
*
|
|
* Instead of calling this method, you may prefer to set #nodeDataArray to an empty JavaScript Array.
|
|
* If this model is a GraphLinksModel, you would also want to set GraphLinksModel#linkDataArray to a separate empty JavaScript Array.
|
|
*/
|
|
clear(): void;
|
|
/**
|
|
* Produce an object representing the changes in the most recent Transaction.
|
|
* The structure of the object follows the same format as the JSON output from #toIncrementalJson.
|
|
*
|
|
* Note that these incremental changes include the results of undo and redo operations.
|
|
*
|
|
* For GraphLinksModels, this method requires that GraphLinksModel#linkKeyProperty is not an empty string.
|
|
*
|
|
* Any node or link data objects contained in the "modified..." properties will be deep copies of the data in the model.
|
|
* The objects will contain proper copies of certain GoJS classes, and some common built-in objects such as Dates and RegExps.
|
|
* Other classes will just be copied as plain Javascript objects, so it is best to avoid using special classes in one's data.
|
|
*
|
|
* This method is most commonly used when GoJS must communicate with some external data source
|
|
* and maintain integrity between the two while avoiding serialization/deserialization.
|
|
*
|
|
* ```js
|
|
* myDiagram.addModelChangedListener(function(e) {
|
|
* if (e.isTransactionFinished) {
|
|
* var dataChanges = e.model.toIncrementalData(e);
|
|
* ... update React state/save to database ...
|
|
* }
|
|
* });
|
|
* ```
|
|
* @param {ChangedEvent} e a Transaction ChangedEvent for which ChangedEvent#isTransactionFinished is true
|
|
* @return {IncrementalData} returns either null if no changes occured, or an object containing incremental model changes for the given Transaction
|
|
* @see #toIncrementalJson
|
|
* @since 2.1
|
|
*/
|
|
toIncrementalData(e: ChangedEvent): IncrementalData;
|
|
/**
|
|
* Deeply copy an object or array and return the new object.
|
|
* This is typically called on a #nodeDataArray or GraphLinksModel#linkDataArray or data objects within them.
|
|
*
|
|
* By default, this method will make deep clones of arrays and JavaScript objects and maintain any shared or cyclic references.
|
|
* It will properly copy any `Date` or `RegExp` object, and will call a `copy` function on any object where one exists.
|
|
* It also handles certain GoJS classes: `Point`, `Size`, `Rect`, `Margin`, `Spot`, `List`, `Set`, and `Map`.
|
|
*
|
|
* This method may be overridden.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* Only override this method when the default behavior doesn't suit the data.
|
|
* When cloning objects, we suggest skipping the `__gohashid` property.
|
|
* @expose
|
|
* @param {T} obj
|
|
* @return {T}
|
|
*/
|
|
cloneDeep<T>(obj: T): T;
|
|
/**
|
|
* Produce a JSON-format string representing the changes in the most recent Transaction.
|
|
* This writes out JSON for a model, but recording only changes in the given Transaction,
|
|
* with the addition of the "incremental" property to mark it as different from a complete model.
|
|
* Instead of the "nodeDataArray" property (and "linkDataArray" property for GraphLinksModels),
|
|
* this will have "inserted...", "modified...", and "removed..." properties that are non-empty Arrays.
|
|
*
|
|
* The "modifiedNodeData" Array holds JavaScript objects.
|
|
* The "insertedNodeKeys" and "removedNodeKeys" Arrays hold keys (numbers or strings) of data,
|
|
* not whole objects, that have been added and/or deleted.
|
|
* The "modelData" property holds the Model#modelData object, if it was modified.
|
|
*
|
|
* Note that it is entirely plausible for the same object be in or referenced by all three Arrays,
|
|
* because a single Transaction can include adding a node, modifying it, and removing it.
|
|
*
|
|
* The purpose of this method is to make it easier to send incremental changes to the server/database,
|
|
* instead of sending the whole model.
|
|
* Whereas it has always been easy to perform "batch" updates or "file saves":
|
|
* ```js
|
|
* myDiagram.addModelChangedListener(function(e) {
|
|
* if (e.isTransactionFinished) {
|
|
* var json = e.model.toJson();
|
|
* // save the whole model upon each transaction completion or undo/redo
|
|
* ... send to server/database ...
|
|
* }
|
|
* });
|
|
* ```
|
|
* You can now easily send "incremental" updates:
|
|
* ```js
|
|
* myDiagram.addModelChangedListener(function(e) {
|
|
* if (e.isTransactionFinished) {
|
|
* var json = e.model.toIncrementalJson(e);
|
|
* // record each Transaction as a JSON-format string
|
|
* ... send to server/database ...
|
|
* }
|
|
* });
|
|
* ```
|
|
* Note that these incremental changes include the results of undo and redo operations.
|
|
* Also, when you might call #applyIncrementalJson, you will need to disable your Changed listener,
|
|
* so that it does not send spurious changes to your database during the process of apply incremental changes from the database.
|
|
*
|
|
* For GraphLinksModels, this method requires that GraphLinksModel#linkKeyProperty is not an empty string.
|
|
* The incremental JSON for GraphLinksModels will include "modifiedLinkData", "insertedLinkKeys", and "removedLinkKeys"
|
|
* properties that are non-empty Arrays.
|
|
*
|
|
* The same restrictions on data property names and data property values applies to this method as it does to #toJson.
|
|
* @param {ChangedEvent} e a Transaction ChangedEvent for which ChangedEvent#isTransactionFinished is true
|
|
* @param {string=} classname for the written model, defaults to the name of the class of the model
|
|
* @return {string}
|
|
* @since 1.6
|
|
*/
|
|
toIncrementalJson(e: ChangedEvent, classname?: string): string;
|
|
/**
|
|
* Generate a string representation of the persistent data in this model, in JSON format,
|
|
* that can be read in later with a call to Model.fromJson.
|
|
*
|
|
* Object properties that are not enumerable or whose names start with "_" are not written out.
|
|
*
|
|
* Functions are not able to be written in JSON format, so any properties that have function values
|
|
* will not be saved in the JSON string.
|
|
*
|
|
* There must not be any circular references within the model data.
|
|
* Any sharing of object references will be lost in the written JSON.
|
|
*
|
|
* Most object classes cannot be serialized into JSON without special knowledge and processing at both ends.
|
|
* The #toJson and Model.fromJson methods automatically do such processing for numbers that are NaN
|
|
* and for objects that are of class Point, Size, Rect, Margin, Spot,
|
|
* Brush (but not for brush patterns), and for Geometry.
|
|
* However, we recommend that you use Binding converters (static functions named "parse" and "stringify")
|
|
* to represent Points, Sizes, Rects, Margins, Spots, and Geometries as string values in your data, rather than as Objects.
|
|
* This makes the JSON text smaller and simpler and easier to read.
|
|
*
|
|
* As a special case when serializing an object, if the property is named "points" and the
|
|
* property value is a List of Points, it will write an Array of numbers.
|
|
*
|
|
* Note that this is a method on the Model class.
|
|
* It cannot render unmodeled Parts such as the background grid or any Parts that you have added directly to a Diagram.
|
|
*
|
|
* Typical usage:
|
|
* ```js
|
|
* var modelAsText = myDiagram.model.toJson();
|
|
* // now save this text string by sending it to your database
|
|
* ```
|
|
* @param {string=} classname The optional name of the model class to use in the output;
|
|
* for the standard models, this is their class name prefixed with "go.".
|
|
* @return {string} a String in JSON format containing all of the persistent properties of the model.
|
|
*/
|
|
toJson(classname?: string): string;
|
|
/**
|
|
* Modify this model by applying the changes given in an "incremental" model change in JSON format
|
|
* generated by #toIncrementalJson.
|
|
* The expected properties of the argument are described at #toIncrementalJson.
|
|
* Incremental changes must be applied in the same order that the changes occurred in the original model.
|
|
*
|
|
* This requires the "incremental" property to be present and to be a number, as specified by #toIncrementalJson.
|
|
* All of the top-level properties in the JSON, such as #nodeKeyProperty, must be the same as for this model.
|
|
* Note that if the model is a GraphLinksModel, you will have to have set GraphLinksModel#linkKeyProperty
|
|
* to the name of a property, the same both in the Diagram#model as well as in the data that you pass to this method.
|
|
*
|
|
* This conducts a transaction.
|
|
* @param {string|ObjectData} s a String in JSON format containing modifications to be performed to the model,
|
|
* or a JavaScript Object parsed from such a string
|
|
* @since 1.6
|
|
*/
|
|
applyIncrementalJson(s: string | ObjectData): void;
|
|
/**
|
|
* This static function parses a string in JSON format that was written by Model#toJson,
|
|
* and then constructs, initializes, and returns a model with that information.
|
|
*
|
|
* Note that properties with values that are functions are not written out by #toJson,
|
|
* so reading in such a model will require constructing such a model, initializing its functional property values,
|
|
* and explicitly passing it in as the second argument.
|
|
*
|
|
* As a special case when deserializing an object, if the property is named "points" and the
|
|
* property value is an Array with an even number of numbers, it will substitute a List of Points.
|
|
*
|
|
* Typical usage:
|
|
* ```js
|
|
* var modelAsText = ...; // fetch the model in textual format from a database
|
|
* myDiagram.model = go.Model.fromJson(modelAsText);
|
|
* ```
|
|
* @param {string|ObjectData} s a String in JSON format containing all of the persistent properties of the model, or an Object already read from JSON text.
|
|
* @param {Model=} model an optional model to be modified; if not supplied, it constructs and returns a new model whose name is specified by the "class" property.
|
|
* @return {Model} the supplied or created model loaded with data from the given string.
|
|
*/
|
|
static fromJson(s: string | ObjectData, model?: Model): Model;
|
|
/**
|
|
* Gets or sets the name of this model.
|
|
* The initial name is an empty string.
|
|
* The value must not be null.
|
|
*/
|
|
name: string;
|
|
/**
|
|
* Gets or sets the name of the format of the diagram data.
|
|
* The default value is the empty string.
|
|
* The value must not be null.
|
|
* Use different values to prevent parts from one model to be copy/pasted or drag-and-dropped into another diagram/model.
|
|
*/
|
|
dataFormat: string;
|
|
/**
|
|
* Gets or sets whether this model may be modified, such as adding nodes.
|
|
* By default this value is false.
|
|
* Setting the #nodeDataArray to something that is not a true Array of Objects
|
|
* will cause this to be set to true.
|
|
*
|
|
* Model methods and property setters do not heed this property.
|
|
* It is up to code that uses a model to check this property when it might want to
|
|
* prevent changes to the model.
|
|
*/
|
|
isReadOnly: boolean;
|
|
/**
|
|
* Gets a JavaScript Object that can hold programmer-defined property values for the model as a whole,
|
|
* rather than just for one node or one link.
|
|
*
|
|
* By default this an object with no properties.
|
|
* Any properties that you add to this object will be written out by #toJson
|
|
* and will be restored by Model.fromJson, if the following conditions are true:
|
|
* - the property is enumerable and its name does not start with an underscore ('_')
|
|
* - the property value is not undefined and is not a function
|
|
* - the model knows how to convert the property value to JSON format
|
|
* - property values that are Objects or Arrays form a tree structure -- no shared or cyclical references
|
|
*
|
|
* Most object classes cannot be serialized into JSON without special knowledge and processing at both ends.
|
|
* The #toJson and Model.fromJson methods automatically do such processing for numbers that are NaN
|
|
* and for objects that are of class Point, Size, Rect, Margin, Spot,
|
|
* Brush (but not for brush patterns), and for Geometry.
|
|
*
|
|
* At the current time one cannot have a Diagram as a binding target.
|
|
* Calling #setDataProperty will work to change a property value, but there are no target bindings in any Diagrams to be updated.
|
|
* Because the binding mechanism is unavailable for this object, we recommend that when you want to save a model
|
|
* that you explicitly set properties on this object just before calling #toJson.
|
|
* When loading a model, call Model.fromJson and explicitly get the properties that you want to set on a Diagram.
|
|
*/
|
|
modelData: ObjectData;
|
|
/**
|
|
* Register an event handler that is called when there is a ChangedEvent.
|
|
*
|
|
* This registration does not raise a ChangedEvent.
|
|
* In case a Diagram's Model may be replaced, you may prefer calling Diagram#addModelChangedListener instead of this method.
|
|
*
|
|
* Event listeners are not written out by #toJson.
|
|
*
|
|
* Do not add or remove Changed listeners during the execution of a Changed listener.
|
|
* @param {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
|
|
* @see #removeChangedListener
|
|
* @see Diagram#addModelChangedListener
|
|
*/
|
|
addChangedListener(listener: ((e: ChangedEvent) => void)): void;
|
|
/**
|
|
* Unregister an event handler listener.
|
|
*
|
|
* This deregistration does not raise a ChangedEvent.
|
|
* In case a Diagram's Model may be replaced, you may prefer calling Diagram#removeModelChangedListener instead of this method.
|
|
* @param {function(ChangedEvent)} listener a function that takes a ChangedEvent as its argument.
|
|
* @see #addChangedListener
|
|
* @see Diagram#removeModelChangedListener
|
|
*/
|
|
removeChangedListener(listener: ((e: ChangedEvent) => void)): void;
|
|
/**
|
|
* Call this method to notify that the model or its objects have changed.
|
|
* This constructs a ChangedEvent and calls all Changed listeners.
|
|
* @param {EnumValue} change specifies the general nature of the change; typically the value is ChangedEvent.Property.
|
|
* @param {string|function(ObjectData,?=):?} propertyname names the property that was modified, or a function that takes an Object and returns the property value.
|
|
* @param {Object} obj the object that was modified, typically a GraphObject, Diagram, or a Model.
|
|
* @param {*} oldval the previous or older value.
|
|
* @param {*} newval the next or newer value.
|
|
* @param {*=} oldparam an optional value that helps describe the older value.
|
|
* @param {*=} newparam an optional value that helps describe the newer value.
|
|
*/
|
|
raiseChangedEvent(change: EnumValue, propertyname: string | ((obj: ObjectData, val: any) => any), obj: ObjectData, oldval: any, newval: any, oldparam?: any, newparam?: any): void;
|
|
/**
|
|
* Call this method to notify about a data property having changed value.
|
|
* This constructs a ChangedEvent and calls all Changed listeners.
|
|
*
|
|
* You should call this method only if the property value actually changed.
|
|
* This method is called by #setDataProperty.
|
|
* @param {Object} data the data object whose property changed value.
|
|
* @param {string|function(ObjectData,?=):?} propertyname the name of the property, or a function that takes an Object and returns the property value.
|
|
* @param {*} oldval the previous or old value for the property.
|
|
* @param {*} newval the next or new value for the property.
|
|
* @param {*=} oldparam an optional value additionally describing the old value.
|
|
* @param {*=} newparam an optional value additionally describing the new value.
|
|
*/
|
|
raiseDataChanged(data: ObjectData, propertyname: string | ((obj: ObjectData, val: any) => any), oldval: any, newval: any, oldparam?: any, newparam?: any): void;
|
|
/**
|
|
* Gets or sets the UndoManager for this Model.
|
|
*
|
|
* The default UndoManager has its UndoManager#isEnabled property set to false.
|
|
* If you want users to undo and redo, you should set that property to true once you have initialized the Diagram or its Model.
|
|
*
|
|
* This property setter does not raise a ChangedEvent.
|
|
*/
|
|
undoManager: UndoManager;
|
|
/**
|
|
* Gets or sets whether ChangedEvents are not recorded by the UndoManager.
|
|
* The initial and normal value is false.
|
|
* WARNING: while this property is true do not perform any changes that cause any previous transactions
|
|
* to become impossible to undo.
|
|
*
|
|
* When this property is true, changing the Model or any data object does not call UndoManager#handleChanged.
|
|
* Even when this property is true,
|
|
* transactions (such as calls to #startTransaction) and undo/redo (such as calls to CommandHandler#undo)
|
|
* are still delegated to the #undoManager.
|
|
*
|
|
* You should set this to true only temporarily, and you should remember its previous value before setting this to true.
|
|
* When finishing the period for which you want the UndoManager to be disabled,
|
|
* do not blindly set this property to false.
|
|
* You should set this back to the value it had before you set it to true.
|
|
* For more permanent disabling of the UndoManager, set UndoManager#isEnabled to false.
|
|
*
|
|
* This property is also set when setting Diagram#skipsUndoManager.
|
|
* Setting this property does not raise a ChangedEvent.
|
|
*/
|
|
skipsUndoManager: boolean;
|
|
/**
|
|
* Undocumented.
|
|
* This is called during an undo or redo to modify the model or its objects.
|
|
*
|
|
* This does not raise a ChangedEvent.
|
|
* @expose
|
|
* @param {ChangedEvent} e This describes the change that needs to be done.
|
|
* @param {boolean} undo If true, this method should restore the older state, otherwise the newer state.
|
|
*/
|
|
changeState(e: ChangedEvent, undo: boolean): void;
|
|
/**
|
|
* Begin a transaction, where the changes are held by a Transaction object
|
|
* in the UndoManager.
|
|
* This just calls UndoManager#startTransaction.
|
|
* @param {string=} tname a descriptive name for the transaction.
|
|
* @return {boolean} the value returned by UndoManager#startTransaction.
|
|
* @see #commit
|
|
*/
|
|
startTransaction(tname?: string): boolean;
|
|
/**
|
|
* Commit the changes of the current transaction.
|
|
* This just calls UndoManager#commitTransaction.
|
|
* @param {string=} tname a descriptive name for the transaction.
|
|
* @return {boolean} the value returned by UndoManager#commitTransaction.
|
|
*/
|
|
commitTransaction(tname?: string): boolean;
|
|
/**
|
|
* Rollback the current transaction, undoing any recorded changes.
|
|
* This just calls UndoManager#rollbackTransaction.
|
|
* @return {boolean} the value returned by UndoManager#rollbackTransaction.
|
|
*/
|
|
rollbackTransaction(): boolean;
|
|
/**
|
|
* Starts a new transaction, calls the provided function, and commits the transaction.
|
|
* Code is called within a try-finally loop.
|
|
* If the function does not return normally, this rolls back the transaction rather than committing it.
|
|
* Example usage:
|
|
* ```js
|
|
* model.commit(m => m.addNodeData({ counter: myCounter++ }), "Added Node");
|
|
* ```
|
|
* @param {Function} func the function to call as the transaction body
|
|
* @param {(string|null)=} tname a descriptive name for the transaction, or null to temporarily set #skipsUndoManager to true;
|
|
* if no string transaction name is given, an empty string is used as the transaction name
|
|
* @since 1.8
|
|
*/
|
|
commit(func: (m: Model) => void, tname?: string | null): void;
|
|
/**
|
|
* Find a Part corresponding to the given data and
|
|
* call its Panel#updateTargetBindings method, in each Diagram
|
|
* that uses this Model.
|
|
*
|
|
* Caution: setting a data property without calling #setDataProperty
|
|
* and then calling this updateTargetBindings method will update GraphObjects that are bound to the property,
|
|
* but such data settings will not be recorded in the UndoManager and therefore will not be undone/redone,
|
|
* causing an inconsistency between the GraphObjects and the part data.
|
|
* @param {Object} data The data object in this model that was modified.
|
|
* @param {string=} srcpropname If not present or the empty string,
|
|
* update all bindings on the target Part or item Panel
|
|
* otherwise update only those bindings using this source property name.
|
|
*/
|
|
updateTargetBindings(data: ObjectData, srcpropname?: string): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns a unique id number or string for each node data object.
|
|
* The value may also be a function taking two arguments, where the first argument will be a node data object.
|
|
* If the second argument is not supplied, the function should return the unique key value;
|
|
* if the second argument is supplied, the function should modify the node data object so that it has that new value as its unique key value.
|
|
* The default value is the name 'key', meaning that it expects the data to have a property named 'key' if it has a key value.
|
|
* The name must not be null or the empty string.
|
|
* You must set this property before assigning the #nodeDataArray.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getKeyForNodeData
|
|
*/
|
|
nodeKeyProperty: string | ((a: ObjectData, b?: Key) => Key);
|
|
/**
|
|
* Given a node data object return its unique key: a number or a string.
|
|
* This returns undefined if there is no key value.
|
|
*
|
|
* It is possible to change the key for a node data object by calling #setKeyForNodeData.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {string|number|undefined}
|
|
* @see #nodeKeyProperty
|
|
* @see #setKeyForNodeData
|
|
* @see #findNodeDataForKey
|
|
*/
|
|
getKeyForNodeData(nodedata: ObjectData): Key;
|
|
/**
|
|
* Change the unique key of a given node data that is already in this model.
|
|
* The new key value must be unique -- i.e. not in use by another node data object.
|
|
* You can call #findNodeDataForKey to check if a proposed new key is already in use.
|
|
*
|
|
* This operation will check all data objects in the model and replace all references
|
|
* using the old key value with the new one.
|
|
*
|
|
* If this is called on a node data object that is not (yet) in this model,
|
|
* this unconditionally modifies the property to the new key value.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @param {string|number} key
|
|
* @see #nodeKeyProperty
|
|
* @see #getKeyForNodeData
|
|
* @since 1.1
|
|
*/
|
|
setKeyForNodeData(nodedata: ObjectData, key: Key): void;
|
|
/**
|
|
* Gets or sets a function that returns a unique id number or string for a node data object.
|
|
* This function is called by #makeNodeDataKeyUnique
|
|
* when a node data object is added to the model, either as part of a new
|
|
* #nodeDataArray or by a call to #addNodeData, to make sure the value of
|
|
* #getKeyForNodeData is unique within the model.
|
|
*
|
|
* The value may be null in order to cause #makeNodeDataKeyUnique behave in the standard manner.
|
|
* (The default value is null.)
|
|
* You may want to supply a function here in order to make sure all of the automatically generated keys
|
|
* are in a particular format.
|
|
* Setting this property after setting #nodeDataArray has no real effect until there is a call
|
|
* to #addNodeData.
|
|
*
|
|
* If you want to ensure that this function is called when copying data that already has a key,
|
|
* set #copiesKey to false.
|
|
* This is typically useful when copying a node from a Palette, where the key it has in the Palette's Model
|
|
* happens to be unique within the target Diagram's Model.
|
|
* Unless you set #copiesKey to false, the original key value will be copied and retained
|
|
* if it is already unique within the target model.
|
|
*
|
|
* If a node data object is already in the model and you want to change its key value,
|
|
* call #setKeyForNodeData with a new and unique key.
|
|
*/
|
|
makeUniqueKeyFunction: ((model: Model, data: ObjectData) => Key) | null;
|
|
/**
|
|
* Decide if a given node data object is in this model, using reference equality.
|
|
*
|
|
* If you do not have a reference to the particular data object that is in the #nodeDataArray,
|
|
* you may need to search for it by iterating through that Array,
|
|
* or by finding the desired Node or simple Part in a Diagram and getting that node's Panel#data,
|
|
* or most likely by calling #findNodeDataForKey.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {boolean} true if it is a node data object in this model; false otherwise.
|
|
*/
|
|
containsNodeData(nodedata: ObjectData): boolean;
|
|
/**
|
|
* Given a number or string, find the node data object in this model
|
|
* that uses the given value as its unique key.
|
|
* @param {(string|number|undefined)} key a string or a number.
|
|
* @return {Object} null if the key is not present in the model,
|
|
* or if the key is null or undefined or not a string or number.
|
|
* @see #containsNodeData
|
|
* @see #getKeyForNodeData
|
|
*/
|
|
findNodeDataForKey(key: Key): ObjectData | null;
|
|
/**
|
|
* Gets or sets the array of node data objects that correspond to Nodes,
|
|
* Groups, or non-Link Parts in the Diagram.
|
|
* The initial value is an empty Array.
|
|
*
|
|
* For each Object in the Array, #getKeyForNodeData should return a number or string
|
|
* uniquely identifying the node data within the model.
|
|
* If it returns undefined, this calls #makeNodeDataKeyUnique,
|
|
* to make sure the node data has a unique key.
|
|
* These key values may be used by other objects to refer to that particular node data object.
|
|
* If more than one node data object has the same key,
|
|
* there may be some confusion about which object to reference.
|
|
*
|
|
* If you want to use a custom data property for holding the unique key value on a node data object,
|
|
* you should set #nodeKeyProperty before you set this `nodeDataArray` property.
|
|
*
|
|
* Adding or removing data from this Array will not notify this model or the diagram
|
|
* that there are any new nodes or that any nodes have been deleted.
|
|
* Instead you should call #addNodeData or #removeNodeData.
|
|
*/
|
|
nodeDataArray: Array<ObjectData>;
|
|
/**
|
|
* This method is called when a node data object is added to the model to make sure that
|
|
* #getKeyForNodeData returns a unique key value.
|
|
*
|
|
* The key value should be unique within the set of data managed by this model:
|
|
* #nodeDataArray.
|
|
* If the key is already in use, this will assign an unused number to the
|
|
* #nodeKeyProperty property on the data.
|
|
*
|
|
* If you want to customize the way in which node data gets a unique key,
|
|
* you can set the #makeUniqueKeyFunction functional property.
|
|
*
|
|
* If the node data object is already in the model and you want to change its key value,
|
|
* call #setKeyForNodeData and give it a new unique key value.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
*/
|
|
makeNodeDataKeyUnique(nodedata: ObjectData): void;
|
|
/**
|
|
* When you want to add a node or group to the diagram,
|
|
* call this method with a new data object.
|
|
* This will add that data to the #nodeDataArray and
|
|
* notify all listeners that a new node data object has been inserted into the collection.
|
|
*
|
|
* To remove a node from the diagram, you can remove its data object by calling #removeNodeData.
|
|
*
|
|
* To add or remove an object or value from an item array, call #insertArrayItem or #removeArrayItem.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
*/
|
|
addNodeData(nodedata: ObjectData): void;
|
|
/**
|
|
* Add to this model all of the node data held in an Array or in an Iterable of node data objects.
|
|
* @param {Iterable.<Object>|Array.<Object>} coll a collection of node data objects to add to the #nodeDataArray
|
|
* @since 1.3
|
|
*/
|
|
addNodeDataCollection(coll: Iterable<ObjectData> | Array<ObjectData>): void;
|
|
/**
|
|
* When you want to remove a node or group from the diagram,
|
|
* call this method with an existing data object.
|
|
* This will remove that data from the #nodeDataArray and
|
|
* notify all listeners that a node data object has been removed from the collection.
|
|
*
|
|
* If you do not have a reference to the particular data object that is in the #nodeDataArray,
|
|
* you may need to search for it by iterating through that Array,
|
|
* or by finding the desired Node or simple Part in a Diagram and getting that node's Panel#data,
|
|
* or most likely by calling #findNodeDataForKey.
|
|
*
|
|
* Removing a node data from a model does not automatically remove
|
|
* any connected link data from the model.
|
|
* Removing a node data that represents a group does not automatically remove
|
|
* any member node data or link data from the model.
|
|
*
|
|
* To add a node to the diagram, you can add its data object by calling #addNodeData.
|
|
*
|
|
* To add or remove an object or value from an item array, call #insertArrayItem or #removeArrayItem.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
*/
|
|
removeNodeData(nodedata: ObjectData): void;
|
|
/**
|
|
* Remove from this model all of the node data held in an Array or in an Iterable of node data objects.
|
|
* @param {Iterable.<Object>|Array.<Object>} coll a collection of node data objects to remove from the #nodeDataArray
|
|
* @since 1.3
|
|
*/
|
|
removeNodeDataCollection(coll: Iterable<ObjectData> | Array<ObjectData>): void;
|
|
/**
|
|
* Take an Array of node data objects and update #nodeDataArray without replacing
|
|
* the Array and without replacing any existing node data objects that are identified by key.
|
|
*
|
|
* For node data objects that have the same key value, this makes calls to #setDataProperty
|
|
* to update the existing node data object.
|
|
* For new keys, this calls #cloneDeep to copy the data and then #addNodeData to add a new node to the model.
|
|
* For existing nodes that have keys that are not present in the given Array,
|
|
* this calls #removeNodeData to remove the existing node from the model.
|
|
*
|
|
* This method is typically used when GoJS is being used within an application that is maintaining state
|
|
* related to the diagram model. When state is updated, this method can be called to keep the GoJS model synchronized.
|
|
* Any updates to the data should use new references since this method will use reference equality to check
|
|
* if a node data object needs to be updated.
|
|
*
|
|
* This method does not conduct a transaction.
|
|
* @param {Array.<ObjectData>} arr
|
|
* @since 2.1
|
|
*/
|
|
mergeNodeDataArray(arr: Array<ObjectData>): void;
|
|
/**
|
|
* Gets or sets a function that makes a copy of a node data object.
|
|
*
|
|
* You may need to set this property in order to ensure that a copied Node is bound
|
|
* to data that does not share certain data structures between the original node data and the copied node data.
|
|
* This property value may be null in order to cause #copyNodeData to make a shallow copy of a JavaScript Object.
|
|
* The default value is null.
|
|
*
|
|
* The first argument to the function will be a node data object (potentially a Part's Panel#data).
|
|
* The second argument to the function will be this Model itself.
|
|
*
|
|
* It is common to implement a copying function when the node data has an Array of data
|
|
* and that Array needs to be copied rather than shared.
|
|
* Often the objects that are in the Array also need to be copied.
|
|
*/
|
|
copyNodeDataFunction: ((data: ObjectData, model: Model) => ObjectData) | null;
|
|
/**
|
|
* Gets or sets whether the default behavior for #copyNodeData or GraphLinksModel#copyLinkData
|
|
* makes copies of property values that are Arrays.
|
|
* This only copies Arrays that are top-level property values in data objects, not for Arrays that are in nested objects.
|
|
* Copying Arrays will also copy any array items that are Objects when #copiesArrayObjects is true.
|
|
*
|
|
* The default value is false.
|
|
* It is commonplace to set #copiesArrayObjects to true when setting this property to true.
|
|
* This property does not affect any behavior when the value of #copyNodeDataFunction
|
|
* or GraphLinksModel#copyLinkDataFunction has been set to a function.
|
|
*
|
|
* Caution: if you want a copied data object to share some Arrays but not others,
|
|
* you will need to provide your own copying function as #copyNodeDataFunction rather than setting
|
|
* this property to true.
|
|
*
|
|
* Warning: there should not be any cyclical references within the model data.
|
|
* @see #copiesArrayObjects
|
|
* @see #copyNodeDataFunction
|
|
* @since 1.5
|
|
*/
|
|
copiesArrays: boolean;
|
|
/**
|
|
* Gets or sets whether the default behavior for #copyNodeData or GraphLinksModel#copyLinkData
|
|
* when copying Arrays also copies array items that are Objects.
|
|
* This only covers copying Objects that are items in Arrays that are copied when #copiesArrays is true.
|
|
* Copying an Object when this property is true also recursively copies any Arrays that are property values.
|
|
* It also assumes that the object's constructor can be called with no arguments.
|
|
*
|
|
* The default value is false.
|
|
* This property does not affect any behavior when the value of #copyNodeDataFunction
|
|
* or GraphLinksModel#copyLinkDataFunction has been set to a function.
|
|
* This property has no effect unless #copiesArrays is true.
|
|
*
|
|
* Caution: if you want a copied data object to share some references but not others,
|
|
* you will need to provide your own copying function as #copyNodeDataFunction rather than setting
|
|
* this property and #copiesArrays to true.
|
|
*
|
|
* Warning: there should not be any cyclical references within the model data.
|
|
* @see #copiesArrays
|
|
* @see #copyNodeDataFunction
|
|
* @since 1.5
|
|
*/
|
|
copiesArrayObjects: boolean;
|
|
/**
|
|
* Gets or sets whether the default behavior for #copyNodeData or GraphLinksModel#copyLinkData
|
|
* when copying properties of a data object also copies the key property value.
|
|
* Set this to false in order to force a unique key generation for data copied from another Diagram, such as a Palette.
|
|
*
|
|
* The default value is true.
|
|
* This property does not affect any behavior when the value of #copyNodeDataFunction has been set to a function.
|
|
*
|
|
* @see #copiesArrays
|
|
* @see #copyNodeDataFunction
|
|
* @since 2.0
|
|
*/
|
|
copiesKey: boolean;
|
|
/**
|
|
* Make a copy of a node data object.
|
|
* This uses the value of #copyNodeDataFunction to actually perform the copy, unless that property is null.
|
|
* When it is null the default behavior is to just make a shallow copy of the JavaScript Object.
|
|
*
|
|
* However when #copiesArrays is true, this will make a copy of property values that are JavaScript Arrays.
|
|
* This is useful when you do not want the Arrays to be shared between the node data objects.
|
|
* Note that if you want to copy some property values that are Arrays but not other properties that are Arrays,
|
|
* you cannot use #copiesArrays but must implement your own #copyNodeDataFunction.
|
|
*
|
|
* In addition when #copiesArrayObjects is true, if items in the Array being copied are JavaScript Objects,
|
|
* those objects are copied, recursively.
|
|
* This is useful when the items in copied Arrays are themselves objects that need to be copied.
|
|
* Note that if you want to share references to some but not all of the objects in copied Arrays you cannot use
|
|
* #copiesArrayObjects but must implement your own #copyNodeDataFunction.
|
|
*
|
|
* This does not modify the model -- the returned data object is not added to this model.
|
|
* This assumes that the data's constructor can be called with no arguments.
|
|
*
|
|
* Models should not have any references to Diagrams or GraphObjects or Tools or Layouts or other objects
|
|
* that form a Diagram.
|
|
*
|
|
* Warning: there should not be any cyclical references within the model data, unless you
|
|
* either do not turn on #copiesArrays or #copiesArrayObjects or unless you have
|
|
* supplied your own #copyNodeDataFunction that can handle cyclical references.
|
|
* @expose
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {Object}
|
|
* @see #addNodeData
|
|
*/
|
|
copyNodeData(nodedata: ObjectData): ObjectData | null;
|
|
/**
|
|
* (Undocumented)
|
|
* This function (if not null) is called towards the end of Diagram#copyParts
|
|
* in order to support custom data copying operations that depend on references between the parts.
|
|
*
|
|
* The first argument to the function is a Map mapping original data objects to copied data objects.
|
|
* The second argument to the function is this Model, the destination model for the copied parts.
|
|
* The third argument to the function is the source Model, of the original data objects.
|
|
*/
|
|
afterCopyFunction: ((map: Map<ObjectData, ObjectData>, destModel: Model, srcModel: Model) => void) | null;
|
|
/**
|
|
* Change the value of some property of a node data, a link data, an item data, or the Model#modelData,
|
|
* given a string naming the property and the new value,
|
|
* in a manner that can be undone/redone and that automatically updates any bindings.
|
|
*
|
|
* This gets the old value of the property; if the value is the same as the new value, no side-effects occur.
|
|
* This calls #raiseDataChanged to notify about the change.
|
|
*
|
|
* Note that it is insufficient to modify an item Array (for example by pushing a new item onto the Array) and
|
|
* then calling `setDataProperty(data, "items", data.items)` because the value of
|
|
* `data.items` is still the same reference.
|
|
* Instead you will want to call #insertArrayItem, #addArrayItem, or #removeArrayItem.
|
|
*
|
|
* If you modify the property that is the #nodeKeyProperty, this will call #setKeyForNodeData.
|
|
*
|
|
* If you modify the property that is the #nodeCategoryProperty or the GraphLinksModel#linkCategoryProperty,
|
|
* this will call #setCategoryForNodeData or GraphLinksModel#setCategoryForLinkData.
|
|
* But if the category might change, Binding sources should not be (or depend in a conversion function on) the category of the data,
|
|
* because then some bindings might be evaluated before or after the category has been changed.
|
|
* @expose
|
|
* @param {Object} data a JavaScript object typically the value of a Panel#data and represented by a Node, Link, Group, simple Part,
|
|
* or item in a Panel#itemArray; or this model's #modelData.
|
|
* @param {string} propname a string that is not null or the empty string.
|
|
* @param {*} val the new value for the property.
|
|
* @see #set
|
|
*/
|
|
setDataProperty(data: ObjectData, propname: string, val: any): void;
|
|
/**
|
|
* A synonym for #setDataProperty
|
|
* @param {Object} data a JavaScript object typically the value of a Panel#data and represented by a Node, Link, Group, simple Part,
|
|
* or item in a Panel#itemArray; or this model's #modelData.
|
|
* @param {string} propname a string that is not null or the empty string.
|
|
* @param {*} val the new value for the property.
|
|
* @see #setDataProperty
|
|
* @since 1.8
|
|
*/
|
|
set(data: ObjectData, propname: string, val: any): void;
|
|
/**
|
|
* This is similar to <code>Object.assign</code>,
|
|
* but safely calls #setDataProperty for each property other than a key property.
|
|
* This does not delete any properties on the DATA object,
|
|
* although properties may be set to undefined if they are set that way on the PROPS object.
|
|
* @param data a data object
|
|
* @param props an Object holding various properties whose values are to be assigned to the DATA object
|
|
*/
|
|
assignAllDataProperties(data: ObjectData, props: ObjectData): void;
|
|
/**
|
|
* Add an item at the end of a data array that may be data bound by a Panel as its Panel#itemArray,
|
|
* in a manner that can be undone/redone and that automatically updates any bindings.
|
|
*
|
|
* This also calls #raiseChangedEvent to notify all listeners about the ChangedEvent.Insert.
|
|
*
|
|
* If you want to add a new node or part to the diagram, call #addNodeData.
|
|
* @param {Array.<*>} arr an Array that is the value of some Panel's Panel#itemArray.
|
|
* @param {*} val the new value to be pushed onto the array.
|
|
* @see #insertArrayItem
|
|
* @since 1.1
|
|
*/
|
|
addArrayItem(arr: Array<any>, val: any): void;
|
|
/**
|
|
* Add an item to a data array that may be data bound by a Panel as its Panel#itemArray,
|
|
* given a new data value and the index at which to insert the new value, in a manner that can be undone/redone and that automatically updates any bindings.
|
|
*
|
|
* This also calls #raiseChangedEvent to notify all listeners about the ChangedEvent.Insert.
|
|
*
|
|
* If you want to add a new node or part to the diagram, call #addNodeData.
|
|
* @param {Array.<*>} arr an Array that is the value of some Panel's Panel#itemArray.
|
|
* @param {number} idx the zero-based array index where the new value will be inserted; use -1 to push the new value on the end of the array.
|
|
* @param {*} val the new value to be inserted into the array.
|
|
* @see #removeArrayItem
|
|
*/
|
|
insertArrayItem(arr: Array<any>, idx: number, val: any): void;
|
|
/**
|
|
* Remove an item from a data array that may be data bound by a Panel as its Panel#itemArray,
|
|
* given the index at which to remove a data value, in a manner that can be undone/redone and that automatically updates any bindings.
|
|
*
|
|
* This also calls #raiseChangedEvent to notify all listeners about the ChangedEvent.Remove.
|
|
*
|
|
* If you want to remove a node from the diagram, call #removeNodeData.
|
|
*
|
|
* Note that there is no version of this method that takes an item value instead of an index into the array.
|
|
* Because item arrays may hold any JavaScript value, including numbers and strings, there may be duplicate entries with that value in the array.
|
|
* To avoid ambiguity, removing an item from an array requires an index.
|
|
* @param {Array.<*>} arr an Array that is the value of some Panel's Panel#itemArray.
|
|
* @param {number=} idx the zero-based array index of the data item to be removed from the array;
|
|
* if not supplied it will remove the last item of the array.
|
|
* @see #insertArrayItem
|
|
*/
|
|
removeArrayItem(arr: Array<any>, idx?: number): void;
|
|
/**
|
|
* Gets or sets the name of the node data property that returns a string naming that data's category.
|
|
* The value may also be a function taking two arguments, where the first argument will be a node data object.
|
|
* If the second argument is not supplied, the function should return the category name;
|
|
* if the second argument is supplied, the function should modify the node data object so that it has that new category name.
|
|
* The default value is the string 'category', meaning that it expects the data to have a property named 'category' if it cares to name a category.
|
|
* This is used by the diagram to distinguish between different kinds of nodes.
|
|
* The name must not be null.
|
|
* If the value is an empty string,
|
|
* #getCategoryForNodeData will return an empty string for all node data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getCategoryForNodeData
|
|
* @see #setCategoryForNodeData
|
|
*/
|
|
nodeCategoryProperty: string | ((a: ObjectData, b?: string) => string);
|
|
/**
|
|
* Find the category of a given node data, a string naming the node template
|
|
* or group template or part template
|
|
* that the Diagram should use to represent the node data.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {string}
|
|
* @see #nodeCategoryProperty
|
|
* @see #setCategoryForNodeData
|
|
*/
|
|
getCategoryForNodeData(nodedata: ObjectData): string;
|
|
/**
|
|
* Change the category of a given node data, a string naming the node template
|
|
* or group template or part template
|
|
* that the Diagram should use to represent the node data.
|
|
*
|
|
* Changing the node template for a node data will cause the existing Node, Group, or Part
|
|
* to be replaced with a new instance of the same class
|
|
* created by copying the new node template and applying any data-bindings.
|
|
* That means that the templates in the Diagram#nodeTemplateMap or Diagram#groupTemplateMap
|
|
* must be instances of the same class -- one cannot convert a Node into a Group or vice-versa
|
|
* by setting the category.
|
|
*
|
|
* Binding sources should not be (or depend in a conversion function on) the category of the data
|
|
* if you might be modifying the category, because then some bindings might be evaluated
|
|
* before or after the category has been changed.
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @param {string} cat Must not be null.
|
|
* @see #nodeCategoryProperty
|
|
* @see #getCategoryForNodeData
|
|
*/
|
|
setCategoryForNodeData(nodedata: ObjectData, cat: string): void;
|
|
}
|
|
/**
|
|
* A Binding describes how to automatically set a property on a GraphObject
|
|
* to a value of a property of data in the model.
|
|
* The target property name and the data source property name are strings.
|
|
* All name matching is case-sensitive.
|
|
*
|
|
* Register bindings by calling GraphObject#bind with a new Binding.
|
|
* Existing bindings become read-only, and no new bindings may be added,
|
|
* when a template (a Part) is copied.
|
|
* Bindings will be shared by all copies of the template's GraphObjects.
|
|
*
|
|
* For example, your node data might be like:
|
|
* ```js
|
|
* { key: 23, say: "hello!" }
|
|
* ```
|
|
*
|
|
* Your simple node template might be like:
|
|
* ```js
|
|
* var template = new go.Node(go.Panel.Auto);
|
|
* // . . . define the rest of the Node's visual tree . . .
|
|
* var txt = new go.TextBlock();
|
|
* txt.bind(new go.Binding("text", "say"));
|
|
* template.add(txt);
|
|
* myDiagram.nodeTemplate = template;
|
|
* ```
|
|
* Using GraphObject.make it might look like:
|
|
* ```js
|
|
* var $ = go.GraphObject.make;
|
|
* myDiagram.nodeTemplate =
|
|
* $(go.Node, "Auto",
|
|
* . . .
|
|
* $(go.TextBlock, new go.Binding("text", "say"))
|
|
* )
|
|
* ```
|
|
*
|
|
* The data binding causes the TextBlock#text property of
|
|
* the TextBlock to be set to the value of the data's "say" property.
|
|
* If the value of the "say" property of a particular data object is undefined,
|
|
* the binding is not evaluated: the target property is not set.
|
|
* If there is an error with the binding, you may see a message in the console log.
|
|
* For this reason you may want to explicitly set the initial value for a property
|
|
* when defining the GraphObject, since that value will remain as the default value
|
|
* if the Binding is not evaluated.
|
|
*
|
|
* Bindings are not necessarily evaluated in any particular order.
|
|
* Binding sources should not be (or depend in a conversion function on) the category of the data
|
|
* if you might be modifying the category (e.g. by calling Model#setCategoryForNodeData),
|
|
* because then some bindings might be evaluated before or after the category has been changed.
|
|
* <h4>Conversions</h4>
|
|
* Sometimes the data value needs to be modified or converted in order
|
|
* to be used as the new value of a GraphObject property.
|
|
* The most common conversion functions are provided for you --
|
|
* they convert a string to a geometric class:
|
|
* Point.parse, Size.parse, Rect.parse,
|
|
* Margin.parse, Spot.parse, and Geometry.parse.
|
|
* But you can easily define your own conversion function.
|
|
*
|
|
* As an example of a conversion function, let's use a function that adds some
|
|
* text prefixing the data property value:
|
|
* ```js
|
|
* new go.Binding("text", "say", function(v) { return "I say: " + v; })
|
|
* ```
|
|
* Although simple conversions cover almost all binding cases, there are some infrequent uses
|
|
* that are covered by "Advanced Conversions", discussed below.
|
|
* Conversion functions must not have any side-effects.
|
|
* Conversion functions may be called frequently, so they should be fast and avoid allocating memory.
|
|
* The order in which conversion functions are called is not specified and may vary.
|
|
* <h4>OneWay and TwoWay Bindings</h4>
|
|
* By default bindings are Binding.OneWay.
|
|
* OneWay bindings are evaluated when the Panel#data property is set
|
|
* or when you call Panel#updateTargetBindings or Model#setDataProperty.
|
|
* OneWay bindings only transfer values from the source to the target.
|
|
*
|
|
* TwoWay bindings are evaluated in the source-to-target direction just as OneWay
|
|
* bindings are evaluated.
|
|
* However when the GraphObject target property is set, the TwoWay
|
|
* bindings are evaluated in the target-to-source direction.
|
|
* There is no point in having a TwoWay binding on a GraphObject property that cannot be set.
|
|
* For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
*
|
|
* You should not have a TwoWay binding with a source that is a node data object's key property,
|
|
* i.e. on the data property whose name is the same as the value of Model#nodeKeyProperty.
|
|
* Unintentionally changing the node key value to be the same as another node data's key value
|
|
* may cause indeterminate behavior.
|
|
* Furthermore, changing a node data key without changing any references to that node
|
|
* using the key value will result in "dangling" references and inconsistent relationships.
|
|
* You can make that change safely by calling Model#setKeyForNodeData,
|
|
* but not via a data binding.
|
|
*
|
|
* The target-to-source update can also go through a conversion function.
|
|
* The most common back-conversion functions are provided for you.
|
|
* They convert a geometric class to a string:
|
|
* Point.stringify, Size.stringify, Rect.stringify,
|
|
* Margin.stringify, Spot.stringify, and Geometry.stringify.
|
|
*
|
|
* It is common to want to update some data properties based on changes to the diagram.
|
|
* For example, as the user changes the Part#location by dragging a Node,
|
|
* you can automatically keep the node's model data in sync using a TwoWay binding.
|
|
* ```js
|
|
* new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
|
|
* ```
|
|
* The call to Binding#makeTwoWay changes the Binding#mode
|
|
* to be Binding.TwoWay and specifies the Binding#backConverter
|
|
* function to be the Point.stringify static function.
|
|
*
|
|
* Because the Binding is on the whole node (`template`),
|
|
* the target object is the whole Node and the target property is "location".
|
|
* The value of `data.loc` will be a string representation of the `Node.location` value.
|
|
* <h4>Binding Sources</h4>
|
|
* The target of a Binding is always a property of a GraphObject or a RowColumnDefinition.
|
|
* The source of a Binding is normally a property of a data object in the model.
|
|
* But it is also possible to have the source of a Binding be the shared JavaScript object that is the value of Model#modelData.
|
|
* You can specify such a binding by calling Binding#ofModel, meaning "a binding of a source that is a property of the Model.modelData".
|
|
*
|
|
* As an example, you might want all Nodes to use the same color.
|
|
* It would be possible but not natural to bind to a property on the node data object, because that property would have to be
|
|
* duplicated on all of the node data objects in the model, and updating the property would mean calling Model#setDataProperty
|
|
* on each node data object with the same new value. Furthermore if there happened to be no nodes at all in the model,
|
|
* there would be no place to save the data. Hence using the shared Model#modelData object
|
|
* would be the sensible place for that shared information.
|
|
* ```js
|
|
* new go.Binding("stroke", "strokeColor").ofModel()
|
|
* ```
|
|
* and to set or modify that color one would just call, within a transaction:
|
|
* ```js
|
|
* model.setDataProperty(model.modelData, "strokeColor", "red");
|
|
* ```
|
|
* That would cause all nodes with that model data binding to be re-evaluated.
|
|
* It is not commonplace to have a TwoWay Binding on "ofModel" Bindings, but that should work.
|
|
* Converters also work with "ofModel" Bindings.
|
|
*
|
|
* And it is also possible to have the source of a Binding be another GraphObject that is in the same Part.
|
|
* You can enable such a binding by calling Binding#ofObject, meaning "a binding of a source that is a property of a GraphObject".
|
|
* You just have to make sure that object has a unique GraphObject#name or is the Part itself.
|
|
* The source property on the GraphObject has to be settable, and the Part must have a value for Panel#data.
|
|
* (If the source property setter does not notify about property value changes, the binding mechanism will not be invoked.
|
|
* Similarly, if there is no Panel.data, the binding mechanism is not active.)
|
|
*
|
|
* As a common kind of example of data binding between two properties of GraphObjects,
|
|
* consider this Binding on a Shape which changes the color of the Shape#stroke
|
|
* depending on whether the Node is selected (Part#isSelected):
|
|
* ```js
|
|
* new go.Binding("stroke", "isSelected", function(s) { return s ? "dodgerblue" : "gray"; }).ofObject()
|
|
* ```
|
|
* Note the call to Binding#ofObject, which tells the Binding that it should use as the source
|
|
* a GraphObject with a particular name. However that name argument is optional -- supplying no name
|
|
* (or supplying an empty string) will cause the binding to operate with the root GraphObject.
|
|
* In this case that would be the Node itself.
|
|
* Now with this binding whenever the value of Part#isSelected changes, this Shape's stroke changes color.
|
|
* The conversion function is what changes the boolean "isSelected" value to a brush color specifier.
|
|
* <h4>Advanced Conversions</h4>
|
|
* The binding functionality also has more advanced features for less common situations.
|
|
* The source property name may be an empty string, to convert the object as a whole.
|
|
* Conversion functions may take a second argument that takes the object that is bound.
|
|
* For source-to-target conversions, the second argument will be the GraphObject whose property is bound.
|
|
* For target-to-source (back-)conversions, the second argument will be the source data object and
|
|
* the third argument will be the Model.
|
|
*
|
|
* Here's an example of a two-way data-binding using two custom conversion functions working with two separate data properties.
|
|
* First we define the two conversion functions.
|
|
* ```js
|
|
* function toLocation(data, node) {
|
|
* return new go.Point(data.x, data.y);
|
|
* }
|
|
*
|
|
* function fromLocation(loc, data, model) {
|
|
* model.setDataProperty(data, "x", loc.x);
|
|
* model.setDataProperty(data, "y", loc.y);
|
|
* }
|
|
*
|
|
* ```
|
|
*
|
|
* Then to data-bind the default template's Part#location property
|
|
* to two separate data properties, "x" and "y":
|
|
* ```js
|
|
* new go.Binding("location", "", toLocation).makeTwoWay(fromLocation)
|
|
* ```
|
|
*
|
|
* An empty string argument for the *sourceprop* parameter indicates
|
|
* that the whole data object should be passed to the `toLocation` function,
|
|
* rather than the value of some property of that data.
|
|
* The return value is used as the new value for the Part#location property.
|
|
* In almost all cases the second argument is not used.
|
|
* Caution: for efficiency reasons you should try to avoid using an empty source property name.
|
|
* Such bindings will be evaluated much more frequently than ones whose source is a particular property name.
|
|
*
|
|
* The binding works normally for the source-to-target direction.
|
|
* But when the target property is modified it is the source property that is
|
|
* set with the back-converted property value from the target object.
|
|
* Because in this example the source property name is the empty string,
|
|
* and because one cannot replace the whole source data object,
|
|
* any return value from the conversion function is ignored.
|
|
* Instead the conversion function has to modify the data object directly,
|
|
* as this example `fromLocation` function does.
|
|
*
|
|
* Note that because the source property name is the empty string, the binding system will not know
|
|
* which properties are modified in the call to `fromLocation`.
|
|
* Hence to support undo and redo, in order to make the data changes we have to call
|
|
* Model#setDataProperty so that the UndoManager can record the change,
|
|
* including the previous value.
|
|
* <h4>Replacing Items in Arrays</h4>
|
|
* However, although a TwoWay Binding cannot replace the node data object in the Model#nodeDataArray,
|
|
* it is possible to replace an item in an Panel#itemArray.
|
|
* So if your node data were:
|
|
*
|
|
* ```js
|
|
* { key: 1, items: ["one", "two", "three"] }
|
|
* ```
|
|
*
|
|
* And if your node template included something like:
|
|
* ```js
|
|
* $(go.Panel, "Vertical",
|
|
* new go.Binding("itemArray", "items"),
|
|
* {
|
|
* itemTemplate:
|
|
* $(go.Panel,
|
|
* $(go.TextBlock, { editable: true },
|
|
* new go.Binding("text", "").makeTwoWay())
|
|
* )
|
|
* }
|
|
* )
|
|
* ```
|
|
*
|
|
* Then the user would be able to edit any of the TextBlocks, causing the item Array to be modified,
|
|
* for example resulting in this node data:
|
|
* ```js
|
|
* { key: 1, items: ["one", "SOME NEW TEXT HERE", "three"] }
|
|
* ```
|
|
*
|
|
* @unrestricted
|
|
* @category Model
|
|
*/
|
|
export class Binding {
|
|
/**
|
|
* The constructor creates a one-way binding.
|
|
* @param {string=} targetprop A string naming the target property on the target object.
|
|
* This should not be the empty string.
|
|
* @param {string=} sourceprop A string naming the source property on the bound data object.
|
|
* If this is the empty string, the whole Panel#data object is used.
|
|
* If this argument is not supplied, the source property is assumed to be the same as the target property.
|
|
* @param {function(*,*)|null=} conv A side-effect-free function converting the data property value to the value to set the target property.
|
|
* If the function is null or not supplied, no conversion takes place.
|
|
*/
|
|
constructor(targetprop?: string, sourceprop?: string, conv?: ((val: any, targetObj: any) => any) | null);
|
|
/**
|
|
* Create a copy of this Binding, with the same property values.
|
|
* @expose
|
|
* @return {Binding}
|
|
*/
|
|
copy(): Binding;
|
|
/**
|
|
* This value for Binding#mode uses data source values and sets GraphObject properties.
|
|
* Bindings are evaluated when Panel#updateTargetBindings is called.
|
|
* @constant
|
|
*/
|
|
static OneWay: EnumValue;
|
|
/**
|
|
* This value for Binding#mode uses data source values and GraphObject properties and keeps them in sync.
|
|
* When Panel#updateTargetBindings is called, the GraphObject properties are set.
|
|
* When GraphObject properties are modified, the Panel#data properties are set.
|
|
* @constant
|
|
*/
|
|
static TwoWay: EnumValue;
|
|
/**
|
|
* This static function can be used to create a function that parses
|
|
* a string into an enumerated value, given the class that the enumeration values
|
|
* are defined on and a default value if the string cannot be parsed successfully.
|
|
*
|
|
* The normal usage is to pass the result of this function as the conversion function of a Binding.
|
|
* ```js
|
|
* linktemplate.bind(new go.Binding('routing', 'dataPropName', go.Binding.parseEnum(go.Link, go.Link.Normal)));
|
|
* ```
|
|
* This binding will try to parse the string that is the value of the bound data's "dataPropName" property.
|
|
* If it is a legitimate enumerated value defined on the Link class, the conversion
|
|
* function will return that value.
|
|
* If the bound data's "dataPropName" property is not present or has an unrecognized value,
|
|
* the Link#routing property gets the default value, Link.Normal.
|
|
* @param {function()} ctor the class constructor that defines the enumerated values that are being parsed.
|
|
* @param {EnumValue} defval the default enumerated value to return if it fails to parse the given string.
|
|
* @return {function(string):EnumValue} a function that takes a string and returns an enumerated value.
|
|
*/
|
|
static parseEnum(ctor: any, defval: EnumValue): ((name: string) => EnumValue);
|
|
/**
|
|
* This static function can be used to convert an object to a string,
|
|
* looking for commonly defined data properties, such as "text", "name", "key", or "id".
|
|
* If none are found, this just calls toString() on it.
|
|
* @param {*=} val
|
|
* @return {string}
|
|
*/
|
|
static toString(val?: any): string;
|
|
/**
|
|
* Gets or sets the name of the property to be set on the target GraphObject.
|
|
* The default value is the empty string; you should set this to be the name of a property.
|
|
*/
|
|
targetProperty: string;
|
|
/**
|
|
* Gets or sets the name of the GraphObject that should act as a source object
|
|
* whose property should be gotten by this data binding.
|
|
* The default value is null, which uses the bound Panel#data as the source.
|
|
* If the value is a string, it should be the name of a GraphObject in the
|
|
* visual tree of the Panel that is bound to the data.
|
|
* Use the empty string to refer to the root panel, which is typically the whole Node or Link,
|
|
* but will be a Panel if used in a Panel#itemTemplate.
|
|
* The name must not contain a period.
|
|
*
|
|
* Binding only works if the source property is settable, not on computed or read-only properties,
|
|
* and if it supports notification.
|
|
* The documentation for the GraphObject (or subclass of GraphObject) property will indicate if the property is settable
|
|
* and if it does not notify.
|
|
*/
|
|
sourceName: string | null;
|
|
/**
|
|
* Gets or sets whether the source data is Model#modelData rather than a node data or link data object in the model.
|
|
* The default value is false -- the source data object will not be the shared Model.modelData object.
|
|
* @see #ofModel
|
|
* @since 1.7
|
|
*/
|
|
isToModel: boolean;
|
|
/**
|
|
* Gets or sets the name of the property to get from the bound data object,
|
|
* the value of Panel#data.
|
|
* The default value is the empty string, which results in setting the target
|
|
* property to the whole data object, rather than to a property value of the data object.
|
|
* If #sourceName is not null, then this property names the settable
|
|
* property on the GraphObject or RowColumnDefinition
|
|
* that acts as the source.
|
|
*/
|
|
sourceProperty: string;
|
|
/**
|
|
* Gets or sets a converter function to apply to the data property value
|
|
* in order to produce the value to set to the target property.
|
|
* This conversion function is used in both OneWay and TwoWay bindings,
|
|
* when transferring a value from the source to the target.
|
|
* The default value is null -- no conversion takes place.
|
|
* Otherwise the value should be a function that takes one or two arguments
|
|
* and returns the desired value.
|
|
* However, the return value is ignored when the #targetProperty
|
|
* is the empty string.
|
|
*
|
|
* Conversion functions must not have any side-effects other than setting
|
|
* the target property. In particular you should not try to modify the
|
|
* structure of the visual tree in the target GraphObject's Part's visual tree.
|
|
*
|
|
* The function is passed the value from the source
|
|
* (the first argument) and the target GraphObject (the second argument).
|
|
* If the #targetProperty is a property name, that property is set to
|
|
* the function's return value.
|
|
* If the #targetProperty is the empty string, the function should
|
|
* set a property on the second argument, which will be the target GraphObject.
|
|
*/
|
|
converter: ((val: any, targetObj: any) => any) | null;
|
|
/**
|
|
* Gets or sets a converter function to apply to the GraphObject property value
|
|
* in order to produce the value to set to a data property.
|
|
* This conversion function is only used in a TwoWay binding,
|
|
* when transferring a value from the target to the source.
|
|
* The default value is null -- no conversion takes place.
|
|
* Otherwise the value should be a function that takes one or two arguments
|
|
* and returns the desired value.
|
|
* However, the return value is ignored when the #sourceProperty
|
|
* is the empty string.
|
|
*
|
|
* Conversion functions must not have any side-effects other than setting
|
|
* the source property.
|
|
*
|
|
* The function is passed the value from the target
|
|
* (the first argument), the source Panel#data object (the second argument),
|
|
* and the Model (the third argument).
|
|
* If the #sourceProperty is a property name, that property is set to
|
|
* the function's return value.
|
|
* If the #sourceProperty is the empty string, the function should
|
|
* modify the second argument, which will be the source data object.
|
|
*/
|
|
backConverter: ((val: any, srcData: any, model: any) => any) | null;
|
|
/**
|
|
* Gets or sets the directions and frequency in which the binding may be evaluated.
|
|
* The default value is Binding.OneWay.
|
|
* Binding.TwoWay is the other choice.
|
|
*
|
|
* Use OneWay bindings to initialize GraphObject properties based on model data,
|
|
* or to modify GraphObject properties when the model data changes with a call to Model#setDataProperty.
|
|
* Use TwoWay bindings to keep model data in sync with changes to GraphObject properties.
|
|
* For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
*
|
|
* You should not have a TwoWay binding on a node data object's key property.
|
|
*/
|
|
mode: EnumValue;
|
|
/**
|
|
* Modify this Binding to set its #mode to be Binding.TwoWay, and
|
|
* provide an optional conversion function to convert GraphObject property
|
|
* values back to data values, as the value of #backConverter.
|
|
*
|
|
* Use TwoWay bindings to keep model data in sync with changes to GraphObject properties.
|
|
* For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
* It is typical only to use TwoWay bindings on properties that are modified by tools or commands.
|
|
* Examples include Part#location by DraggingTool and
|
|
* TextBlock#text by TextEditingTool (only if TextBlock#editable is true).
|
|
*
|
|
* You should not have a TwoWay binding on a node data object's key property.
|
|
* @param {function(*,*,*) | null=} backconv
|
|
* @return {Binding} this two-way Binding.
|
|
*/
|
|
makeTwoWay(backconv?: ((val: any, srcData: any, model: any) => any) | null): Binding;
|
|
/**
|
|
* Modify this Binding to set its #sourceName property so as to identify
|
|
* a GraphObject in the visual tree of the bound Panel as the data source,
|
|
* instead of the Panel#data as the data source.
|
|
*
|
|
* This permits data binding on GraphObject properties, such as Part#isSelected.
|
|
* Remember that you can reliably data bind only on settable properties, not on read-only or computed properties.
|
|
* @param {string=} srcname the GraphObject#name of an element in the visual tree of the bound Panel;
|
|
* use an empty string to refer to the root panel of that visual tree, whose Panel#data is the bound data.
|
|
* @return {Binding} this Binding to another GraphObject.
|
|
* @see #sourceName
|
|
* @see #ofModel
|
|
*/
|
|
ofObject(srcname?: string): Binding;
|
|
/**
|
|
* Modify this Binding so that the source is the Model#modelData object,
|
|
* not a regular node data object or another GraphObject in the Part.
|
|
* @return {Binding} this Binding to the Model#modelData object.
|
|
* @see #isToModel
|
|
* @see #ofObject
|
|
* @since 1.7
|
|
*/
|
|
ofModel(): Binding;
|
|
}
|
|
/**
|
|
* GraphLinksModels support links between nodes and grouping nodes and links into subgraphs.
|
|
* GraphLinksModels hold node data and link data in separate arrays.
|
|
* Node data is normally represented in a Diagram by instances of Node,
|
|
* but they could be represented by simple Parts or by Groups.
|
|
* Link data should be represented by instances of Link.
|
|
*
|
|
* Each link data object is assumed to have two values, one referring to the node that the
|
|
* link is coming from and one that the link is going to.
|
|
* The #linkFromKeyProperty property names the property on the link data whose value
|
|
* is the key of the "from" node.
|
|
* The #linkToKeyProperty property names the property on the link data whose value
|
|
* is the key of the "to" node.
|
|
* The default values for these properties are "from" and "to" respectively.
|
|
*
|
|
* For example, one can define a graph consisting of two nodes with one link connecting them:
|
|
* ```js
|
|
* model.nodeDataArray = [
|
|
* { key: "Alpha" },
|
|
* { key: "Beta" }
|
|
* ];
|
|
* model.linkDataArray = [
|
|
* { from: "Alpha", to: "Beta" }
|
|
* ];
|
|
* ```
|
|
*
|
|
* If you want to have subgraphs in your diagram, where a group node contains some number of nodes and links,
|
|
* you need to declare that some node data actually represent groups,
|
|
* and you need to provide a reference from a member node data to its containing group node data.
|
|
* The #nodeIsGroupProperty property names the property on a node data that is true
|
|
* if that node data represents a group.
|
|
* The #nodeGroupKeyProperty property names the property on a node data whose value
|
|
* is the key of the containing group's node data.
|
|
* The default values for these properties are "isGroup" and "group" respectively.
|
|
*
|
|
* For example, one can define a graph consisting of one group containing a subgraph of
|
|
* two nodes connected by a link, with a second link from that group to a third node
|
|
* that is not a member of that group:
|
|
* ```js
|
|
* model.nodeDataArray = [
|
|
* { key: "Group1", isGroup: true},
|
|
* { key: "Alpha", group: "Group1" },
|
|
* { key: "Beta", group: "Group1" },
|
|
* { key: "Gamma" }
|
|
* ];
|
|
* model.linkDataArray = [
|
|
* { from: "Alpha", to: "Beta" },
|
|
* { from: "Group1", to: "Gamma" }
|
|
* ];
|
|
* ```
|
|
*
|
|
* GraphLinksModels also support distinguishing the "port" element of a node to which
|
|
* a link can connect, at either end of the link.
|
|
* This identification is a string that names the "port" element in the node.
|
|
* However, you need to set the #linkFromPortIdProperty and/or
|
|
* #linkToPortIdProperty properties before the model is able to
|
|
* get the "port id" information from the link data.
|
|
*
|
|
* For example, one can define a graph consisting of a "subtraction" node and two inputs and one output.
|
|
* The "subtraction" node has two distinct inputs called "subtrahend" and "minuend";
|
|
* the output is called "difference".
|
|
* ```js
|
|
* model.linkFromPortIdProperty = "fromPort"; // necessary to remember portIds
|
|
* model.linkToPortIdProperty = "toPort";
|
|
* model.nodeDataArray = [
|
|
* { key: 1, constant: 5 }, // a constant input node
|
|
* { key: 2, constant: 2 }, // another constant node
|
|
* { key: 3, operation: "subtract" },
|
|
* { key: 4, value: 3 } // the output node
|
|
* ];
|
|
* model.linkDataArray = [
|
|
* { from: 1, to: 3, toPort: "subtrahend" },
|
|
* { from: 2, to: 3, toPort: "minuend" },
|
|
* { from: 3, to: 4, fromPort: "difference" }
|
|
* ];
|
|
* ```
|
|
* In this case links connected to node 3 (which is the subtraction operation)
|
|
* are distinguished by port id.
|
|
* The connections to the other nodes do not have any port identification,
|
|
* presumably because there is only one port on those nodes, representing the node value.
|
|
*
|
|
* Note that there is no requirement that the link data objects have any kind of unique identifier, unlike for node data.
|
|
* There is no expectation that there be references to link data in the model, so there is no need for such an identifier.
|
|
* When there are multiple links connecting two ports, the only way to distinguish the links in the model
|
|
* is by reference to the particular link data object.
|
|
* This is why there are two methods on the Diagram class for Nodes, Diagram#findNodeForKey and Diagram#findNodeForData,
|
|
* but there is only the one method for Links, Diagram#findLinkForData.
|
|
*
|
|
* However you may wish to have the model maintain string or number identifiers on the link data just as all models do for node data.
|
|
* To get that behavior, so that you can call #findLinkDataForKey, you need to set #linkKeyProperty to be a non-empty string.
|
|
* Just as with the assignment of node keys, you can customize the assignment of link keys by setting
|
|
* #makeUniqueLinkKeyFunction to a function that returns a unique identifier.
|
|
*
|
|
* This model does not support the modification of whether a node data object is a group.
|
|
*
|
|
* This model cannot detect the modification of the #linkDataArray array
|
|
* or the modification of any link data object.
|
|
* If you want to add or remove link data from the #linkDataArray,
|
|
* call the #addLinkData or #removeLinkData methods.
|
|
* If you want to modify the node a link connects to, call the
|
|
* #setFromKeyForLinkData and/or #setToKeyForLinkData methods.
|
|
* If you want to change the membership of a node data in a group,
|
|
* call the #setGroupKeyForNodeData method.
|
|
* @extends Model
|
|
* @unrestricted
|
|
* @category Model
|
|
*/
|
|
export class GraphLinksModel extends Model {
|
|
/**
|
|
* This constructs an empty GraphLinksModel unless one provides arguments as the initial data array values
|
|
* for the Model#nodeDataArray and GraphLinksModel#linkDataArray properties.
|
|
* @param {Array.<Object>=} nodedataarray an optional Array containing JavaScript objects to be represented by Nodes.
|
|
* @param {Array.<Object>=} linkdataarray an optional Array containing JavaScript objects to be represented by Links.
|
|
*/
|
|
constructor(nodedataarray?: Array<ObjectData>, linkdataarray?: Array<ObjectData>);
|
|
/**
|
|
* Gets or sets a data object that will be copied and added to the model as a new node data each time there
|
|
* is a link reference (either the "to" or the "from" of a link data) to a node key that does not yet exist in the model.
|
|
*
|
|
* The default value is null -- node data is not automatically copied and added to the model
|
|
* when there is an unresolved reference in a link data.
|
|
* When adding or modifying a link data if there is a "from" or "to" key value for which Model#findNodeDataForKey returns null,
|
|
* it will call Model#copyNodeData on this property value and Model#addNodeData on the result.
|
|
* @since 1.1
|
|
*/
|
|
archetypeNodeData: ObjectData | null;
|
|
/**
|
|
* Gets or sets the name of the data property that returns
|
|
* the key of the node data that the link data is coming from.
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the key of the link's source node;
|
|
* if the second argument is supplied, the function should modify the link data object so that it has that new key
|
|
* (which may be undefined to refer to no node) as the identifier to the "from" node.
|
|
* The default value is the name 'from', meaning that it expects the data to have a property named 'from' to refer to the link's source node.
|
|
* The name must not be null.
|
|
* If the value is an empty string,
|
|
* #getFromKeyForLinkData will return undefined for all link data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getFromKeyForLinkData
|
|
* @see #setFromKeyForLinkData
|
|
*/
|
|
linkFromKeyProperty: string | ((a: ObjectData, b?: Key) => Key);
|
|
/**
|
|
* From a link data retrieve a value uniquely identifying the node data
|
|
* from which this link is connected.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {string|number|undefined} This may return undefined if
|
|
* the link is not coming from any node.
|
|
* @see #linkFromKeyProperty
|
|
* @see #setFromKeyForLinkData
|
|
*/
|
|
getFromKeyForLinkData(linkdata: ObjectData): Key;
|
|
/**
|
|
* Change the node key that the given link data references as the
|
|
* source of the link.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {string|number|undefined} key This may be undefined if
|
|
* the link should no longer come from any node.
|
|
* @see #linkFromKeyProperty
|
|
* @see #getFromKeyForLinkData
|
|
*/
|
|
setFromKeyForLinkData(linkdata: ObjectData, key: Key): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns
|
|
* the key of the node data that the link data is going to,
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the key of the link's destination node;
|
|
* if the second argument is supplied, the function should modify the link data object so that it has that new key
|
|
* (which may be undefined to refer to no node) as the identifier to the "to" node.
|
|
* The default value is the name 'to', meaning that it expects the data to have a property named 'to' to refer to the link's destination node.
|
|
* The name must not be null.
|
|
* If the value is an empty string,
|
|
* #getToKeyForLinkData will return undefined for all link data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getToKeyForLinkData
|
|
* @see #setToKeyForLinkData
|
|
*/
|
|
linkToKeyProperty: string | ((a: ObjectData, b?: Key) => Key);
|
|
/**
|
|
* From a link data retrieve a value uniquely identifying the node data
|
|
* to which this link is connected.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {string|number|undefined} This may return undefined if
|
|
* the link is not going to any node.
|
|
* @see #linkToKeyProperty
|
|
* @see #setToKeyForLinkData
|
|
*/
|
|
getToKeyForLinkData(linkdata: ObjectData): Key;
|
|
/**
|
|
* Change the node key that the given link data references as the
|
|
* destination of the link.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {string|number|undefined} key This may be undefined if
|
|
* the link should no longer go to any node.
|
|
* @see #linkToKeyProperty
|
|
* @see #getToKeyForLinkData
|
|
*/
|
|
setToKeyForLinkData(linkdata: ObjectData, key: Key): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns
|
|
* the optional parameter naming a "port" element on the node that the link data is connected from.
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the string identifier of the link's source port;
|
|
* if the second argument is supplied, the function should modify the link data object so that it has that string as the identifier to the "from" port.
|
|
* The default value is the empty string indicating that one cannot distinguish
|
|
* different logical connection points for any links.
|
|
* The name must not be null nor the value of #linkFromKeyProperty or #linkToKeyProperty.
|
|
* If the value is an empty string,
|
|
* #getFromPortIdForLinkData will return an empty string for all link data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getFromPortIdForLinkData
|
|
* @see #setFromPortIdForLinkData
|
|
*/
|
|
linkFromPortIdProperty: string | ((a: ObjectData, b?: string) => string);
|
|
/**
|
|
* From a link data retrieve a value identifying the port object of the node
|
|
* from which this link is connected.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {string} This may return the empty string if
|
|
* there is no particular port parameter information.
|
|
* @see #linkFromPortIdProperty
|
|
* @see #setFromPortIdForLinkData
|
|
*/
|
|
getFromPortIdForLinkData(linkdata: ObjectData): string;
|
|
/**
|
|
* Change the information that the given link data uses to identify the
|
|
* particular "port" that the link is coming from.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {string} portname This may be the empty string if
|
|
* the link should no longer be associated with any particular "port".
|
|
* @see #linkFromPortIdProperty
|
|
* @see #getFromPortIdForLinkData
|
|
*/
|
|
setFromPortIdForLinkData(linkdata: ObjectData, portname: string): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns
|
|
* the optional parameter naming a "port" element on the node that the link data is connected to.
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the string identifier of the link's destination port;
|
|
* if the second argument is supplied, the function should modify the link data object so that it has that string as the identifier to the "to" port.
|
|
* The default value is the empty string indicating that one cannot distinguish
|
|
* different logical connection points for any links.
|
|
* The name must not be null nor the value of #linkFromKeyProperty or #linkToKeyProperty.
|
|
* If the value is an empty string,
|
|
* #getToPortIdForLinkData will return an empty string for all link data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getToPortIdForLinkData
|
|
* @see #setToPortIdForLinkData
|
|
*/
|
|
linkToPortIdProperty: string | ((a: ObjectData, b?: string) => string);
|
|
/**
|
|
* From a link data retrieve a value identifying the port object of the node
|
|
* to which this link is connected.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {string} This may return the empty string if
|
|
* there is no particular port parameter information.
|
|
* @see #linkToPortIdProperty
|
|
* @see #setToPortIdForLinkData
|
|
*/
|
|
getToPortIdForLinkData(linkdata: ObjectData): string;
|
|
/**
|
|
* Change the information that the given link data uses to identify the
|
|
* particular "port" that the link is going to.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {string} portname This may be the empty string if
|
|
* the link should no longer be associated with any particular "port".
|
|
* @see #linkToPortIdProperty
|
|
* @see #getToPortIdForLinkData
|
|
*/
|
|
setToPortIdForLinkData(linkdata: ObjectData, portname: string): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns
|
|
* an array of keys of node data that are labels on that link data.
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the array of label node keys for the link;
|
|
* if the second argument is supplied, the function should modify the link data object so that it holds that Array of node keys as references to label nodes.
|
|
* The default value is the empty string: '', meaning that the model does not support links owning label nodes.
|
|
*
|
|
* The name must not be null.
|
|
* If the value is an empty string,
|
|
* #getLabelKeysForLinkData will return an empty array for all link data objects.
|
|
* You will need to set this property in order to support nodes as link labels.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getLabelKeysForLinkData
|
|
* @see #setLabelKeysForLinkData
|
|
*/
|
|
linkLabelKeysProperty: string | ((a: ObjectData, b?: Array<Key>) => Array<Key>);
|
|
/**
|
|
* Gets an Array of node key values that identify node data acting as labels on the given link data.
|
|
*
|
|
* This method only works if #linkLabelKeysProperty has been set to something other than an empty string.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {Array.<(string|number)>} an Array of node keys; an empty Array if the property was not present.
|
|
* @see #linkLabelKeysProperty
|
|
* @see #setLabelKeysForLinkData
|
|
* @see #addLabelKeyForLinkData
|
|
* @see #removeLabelKeyForLinkData
|
|
*/
|
|
getLabelKeysForLinkData(linkdata: ObjectData): Array<Key>;
|
|
/**
|
|
* Replaces an Array of node key values that identify node data acting as labels on the given link data.
|
|
*
|
|
* This method only works if #linkLabelKeysProperty has been set to something other than an empty string.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {Array.<(string|number)>} arr an Array of node keys; an empty Array if the property was not present.
|
|
* @see #linkLabelKeysProperty
|
|
* @see #getLabelKeysForLinkData
|
|
* @see #addLabelKeyForLinkData
|
|
* @see #removeLabelKeyForLinkData
|
|
*/
|
|
setLabelKeysForLinkData(linkdata: ObjectData, arr: Array<Key>): void;
|
|
/**
|
|
* Adds a node key value that identifies a node data acting as a new label node on the given link data.
|
|
*
|
|
* This method only works if #linkLabelKeysProperty has been set to something other than an empty string.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {string|number} key a number or string that is the key of the new label node.
|
|
* @see #removeLabelKeyForLinkData
|
|
* @see #setLabelKeysForLinkData
|
|
*/
|
|
addLabelKeyForLinkData(linkdata: ObjectData, key: Key): void;
|
|
/**
|
|
* Removes a node key value that identifies a node data acting as a former label node on the given link data.
|
|
*
|
|
* Removing a reference to a node data from the collection of link label keys
|
|
* does not automatically remove any node data from the model.
|
|
*
|
|
* This method only works if #linkLabelKeysProperty has been set to something other than an empty string.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @param {string|number} key a number or string that is the key of the label node being removed from the link.
|
|
* @see #addLabelKeyForLinkData
|
|
* @see #setLabelKeysForLinkData
|
|
*/
|
|
removeLabelKeyForLinkData(linkdata: ObjectData, key: Key): void;
|
|
/**
|
|
* Gets or sets the array of link data objects that correspond to Links in the Diagram.
|
|
* The initial value is an empty Array.
|
|
*/
|
|
linkDataArray: Array<ObjectData>;
|
|
/**
|
|
* Gets or sets the name of the data property that returns a unique id number or string for each link data object.
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the unique string or number key for that link data object;
|
|
* if the second argument is supplied, the function should modify the link data object so that it has that string or number as the unique key for that link.
|
|
* The default value is the empty string, which means the model will not maintain a key property value on link data objects.
|
|
* The name must not be null.
|
|
*
|
|
* When this property has a value of an empty string (the default value),
|
|
* #getKeyForLinkData will return undefined, and #findLinkDataForKey will always return null.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getKeyForLinkData
|
|
* @since 1.6
|
|
*/
|
|
linkKeyProperty: string | ((a: ObjectData, b?: Key) => Key);
|
|
/**
|
|
* Given a link data object return its unique key: a number or a string.
|
|
* This returns undefined if there is no key value.
|
|
* Unless #linkKeyProperty is set to a non-empty string, this model
|
|
* will not automatically assign unique key values for link data objects.
|
|
*
|
|
* It is possible to change the key for a link data object by calling #setKeyForLinkData.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link
|
|
* @return {string|number|undefined}
|
|
* @see #linkKeyProperty
|
|
* @see #setKeyForLinkData
|
|
* @see #findLinkDataForKey
|
|
* @since 1.6
|
|
*/
|
|
getKeyForLinkData(linkdata: ObjectData): Key;
|
|
/**
|
|
* Change the unique key of a given link data that is already in this model.
|
|
* The new key value must be unique -- i.e. not in use by another link data object.
|
|
* You can call #findLinkDataForKey to check if a proposed new key is already in use.
|
|
*
|
|
* If this is called when #linkKeyProperty is the empty string (i.e. its default value),
|
|
* this method has no effect.
|
|
* If this is called on a link data object that is not (yet) in this model,
|
|
* this unconditionally modifies the property to the new key value.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link
|
|
* @param {string|number} key
|
|
* @see #linkKeyProperty
|
|
* @see #getKeyForLinkData
|
|
* @since 1.6
|
|
*/
|
|
setKeyForLinkData(linkdata: ObjectData, key: Key): void;
|
|
/**
|
|
* Gets or sets a function that returns a unique id number or string for a link data object.
|
|
* This function is called by #makeLinkDataKeyUnique
|
|
* when a link data object is added to the model, either as part of a new
|
|
* #linkDataArray or by a call to #addLinkData, to make sure the value of
|
|
* #getKeyForLinkData is unique within the model.
|
|
* However it will not be called when #linkKeyProperty is the default value, an empty string.
|
|
*
|
|
* The value may be null in order to cause #makeLinkDataKeyUnique behave in the standard manner.
|
|
* (The default value is null.)
|
|
* You may want to supply a function here in order to make sure all of the automatically generated keys
|
|
* are in a particular format.
|
|
* Setting this property after setting #linkDataArray has no real effect until there is a call
|
|
* to #addLinkData.
|
|
*
|
|
* If a link data object is already in the model and you want to change its key value,
|
|
* call #setKeyForLinkData with a new and unique key.
|
|
* @since 1.6
|
|
*/
|
|
makeUniqueLinkKeyFunction: ((a: GraphLinksModel, b: ObjectData) => Key) | null;
|
|
/**
|
|
* Given a number or string, find the link data object in this model
|
|
* that uses the given value as its unique key.
|
|
*
|
|
* Unless #linkKeyProperty is set to a non-empty string, this model
|
|
* will not automatically assign unique key values for link data objects,
|
|
* and thus this method will always return null.
|
|
* @param {(string|number|undefined)} key a string or a number.
|
|
* @return {ObjectData} null if the key is not present in the model,
|
|
* or if the key is null or undefined or not a string or number.
|
|
* @see #containsLinkData
|
|
* @see #getKeyForLinkData
|
|
* @since 1.6
|
|
*/
|
|
findLinkDataForKey(key: Key): ObjectData | null;
|
|
/**
|
|
* This method is called when a link data object is added to the model to make sure that
|
|
* #getKeyForLinkData returns a unique key value.
|
|
*
|
|
* The key value should be unique within the set of data managed by this model:
|
|
* #linkDataArray.
|
|
* If the key is already in use, this will assign an unused number to the
|
|
* #linkKeyProperty property on the data.
|
|
*
|
|
* If you want to customize the way in which link data gets a unique key,
|
|
* you can set the #makeUniqueKeyFunction functional property.
|
|
*
|
|
* If the link data object is already in the model and you want to change its key value,
|
|
* call #setKeyForLinkData and give it a new unique key value.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link
|
|
* @since 1.6
|
|
*/
|
|
makeLinkDataKeyUnique(linkdata: ObjectData): void;
|
|
/**
|
|
* Decide if a given link data object is in this model, using reference equality.
|
|
*
|
|
* If you do not have a reference to the particular data object that is in the #linkDataArray,
|
|
* you may need to search for it by iterating through that Array, or (more likely),
|
|
* by finding the desired Link in a Diagram and getting that link's Panel#data.
|
|
*
|
|
* Note that because link data are not assumed to be have a unique key property
|
|
* they cannot be found using an index that this model would maintain.
|
|
* However you may choose to provide such a property on the link data objects
|
|
* and maintain your own index.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {boolean}
|
|
* @see #addLinkData
|
|
* @see #removeLinkData
|
|
*/
|
|
containsLinkData(linkdata: ObjectData): boolean;
|
|
/**
|
|
* When you want to add a link to the diagram, call this method with a new data object.
|
|
* This will add that data to the #linkDataArray and
|
|
* notify all listeners that a new link data object has been inserted into the collection.
|
|
*
|
|
* Presumably the link data object will already have its "from" and "to" node key references set,
|
|
* but it is also possible to set them after the link data is in the model
|
|
* by calling #setFromKeyForLinkData and #setToKeyForLinkData.
|
|
*
|
|
* This operation does nothing if the link data is already part of this model's #linkDataArray.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @see #removeLinkData
|
|
*/
|
|
addLinkData(linkdata: ObjectData): void;
|
|
/**
|
|
* Add to this model all of the link data held in an Array or in an Iterable of link data objects.
|
|
* @param {Iterable.<Object>|Array.<Object>} coll a collection of link data objects to add to the #linkDataArray
|
|
* @since 1.3
|
|
*/
|
|
addLinkDataCollection(coll: Iterable<ObjectData> | Array<ObjectData>): void;
|
|
/**
|
|
* When you want to remove a link from the diagram, call this method with an existing link data object.
|
|
* This will remove that data object from the #linkDataArray and
|
|
* notify all listeners that a link data object has been removed from the collection.
|
|
*
|
|
* If you do not have a reference to the particular data object that is in the #linkDataArray,
|
|
* you may need to search for it by iterating through that Array, or (more likely),
|
|
* by finding the desired Link in a Diagram and getting that link's Panel#data.
|
|
*
|
|
* Removing a link data from a model does not automatically remove
|
|
* any associated label node data from the model.
|
|
*
|
|
* This operation does nothing if the link data is not present in the #linkDataArray.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @see #addLinkData
|
|
*/
|
|
removeLinkData(linkdata: ObjectData): void;
|
|
/**
|
|
* Remove from this model all of the link data held in an Array or in an Iterable of link data objects.
|
|
* @param {Iterable.<Object>|Array.<Object>} coll a collection of link data objects to remove from the #linkDataArray
|
|
* @since 1.3
|
|
*/
|
|
removeLinkDataCollection(coll: Iterable<ObjectData> | Array<ObjectData>): void;
|
|
/**
|
|
* Take an Array of link data objects and update #linkDataArray without replacing
|
|
* the Array and without replacing any existing link data objects that are identified by key.
|
|
* This depends on #linkKeyProperty being a non-empty string.
|
|
*
|
|
* For link data objects that have the same key value, this makes calls to #setDataProperty
|
|
* to update the existing link data object.
|
|
* For new keys, this calls #cloneDeep to copy the data and then #addLinkData to add a new link to the model.
|
|
* For existing links that have keys that are not present in the given Array,
|
|
* this calls #removeLinkData to remove the existing link from the model.
|
|
*
|
|
* This method is typically used when GoJS is being used within an application that is maintaining state
|
|
* related to the diagram model. When state is updated, this method can be called to keep the GoJS model synchronized.
|
|
* Any updates to the data should use new references since this method will use reference equality to check
|
|
* if a link data object needs to be updated.
|
|
*
|
|
* This method does not conduct a transaction.
|
|
* @param {Array.<ObjectData>} arr
|
|
* @since 2.1
|
|
*/
|
|
mergeLinkDataArray(arr: Array<ObjectData>): void;
|
|
/**
|
|
* Gets or sets a function that makes a copy of a link data object.
|
|
*
|
|
* You may need to set this property in order to ensure that a copied Link is bound
|
|
* to data that does not share certain data structures between the original link data and the copied link data.
|
|
* This property value may be null in order to cause #copyLinkData to make a shallow copy of a JavaScript Object.
|
|
* The default value is null.
|
|
*/
|
|
copyLinkDataFunction: ((a: ObjectData, b: GraphLinksModel) => ObjectData) | null;
|
|
/**
|
|
* Make a copy of a link data object.
|
|
* This uses the value of #copyLinkDataFunction to actually perform the copy,
|
|
* unless it is null, in which case this method just makes a shallow copy of the JavaScript Object.
|
|
*
|
|
* This does not modify the model -- the returned data object is not added to this model.
|
|
* This assumes that the data's constructor can be called with no arguments.
|
|
* This also makes sure there is no reference to either the "from" or the "to" node of the original data.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {ObjectData}
|
|
* @see #addLinkData
|
|
*/
|
|
copyLinkData(linkdata: ObjectData): ObjectData;
|
|
/**
|
|
* Gets or sets the name of the boolean property on node data that indicates
|
|
* whether the data should be represented as a group of nodes and links or as a simple node.
|
|
* The value may also be a function taking two arguments, where the first argument will be a node data object.
|
|
* If the second argument is not supplied, the function should return true if the node data object should be represented by a Group and false otherwise.
|
|
* At the current time the function will not be called to change whether the node is a group or not.
|
|
* The default value is the name 'isGroup', meaning that it expects the data to have a property named 'isGroup' on those node data objects that should be represented by Groups.
|
|
*
|
|
* The value must not be null.
|
|
* If the value is an empty string,
|
|
* #isGroupForNodeData will return false for all node data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
*/
|
|
nodeIsGroupProperty: string | ((a: ObjectData, b?: boolean) => boolean);
|
|
/**
|
|
* See if the given node data should be represented as a group or as a simple node.
|
|
*
|
|
* This value must not change as long as the node data is part of the model.
|
|
* At the current time there is no `setIsGroupForNodeData` method.
|
|
* @param {ObjectData} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {boolean}
|
|
* @see #nodeIsGroupProperty
|
|
*/
|
|
isGroupForNodeData(nodedata: ObjectData): boolean;
|
|
/**
|
|
* Gets or sets the name of the property on node data that specifies
|
|
* the string or number key of the group data that "owns" that node data.
|
|
* The value may also be a function taking two arguments, where the first argument will be a node data object.
|
|
* If the second argument is not supplied, the function should return the string or number key for the group data object of which the given data object is a member;
|
|
* if the second argument is supplied, the function should modify the node data object so that it has that new key
|
|
* (which may be undefined to refer to no node) as the containing group key for that node.
|
|
* The default value is the name 'group', meaning that it expects the data to have a property named 'group' to refer to any containing group.
|
|
*
|
|
* The value must not be null.
|
|
* If the value is an empty string,
|
|
* #getGroupKeyForNodeData will return undefined for all node data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getGroupKeyForNodeData
|
|
* @see #setGroupKeyForNodeData
|
|
*/
|
|
nodeGroupKeyProperty: string | ((a: ObjectData, b?: Key) => Key);
|
|
/**
|
|
* If there is a container group for the given node data, return the group's key.
|
|
* @param {ObjectData} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {string|number|undefined} This returns undefined if there is no containing group data.
|
|
* @see #nodeGroupKeyProperty
|
|
* @see #setGroupKeyForNodeData
|
|
*/
|
|
getGroupKeyForNodeData(nodedata: ObjectData): Key;
|
|
/**
|
|
* Change the container group for the given node data, given a key for the new group.
|
|
* @param {ObjectData} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @param {string|number|undefined} key This may be undefined if there should be no containing group data.
|
|
* @see #nodeGroupKeyProperty
|
|
* @see #getGroupKeyForNodeData
|
|
*/
|
|
setGroupKeyForNodeData(nodedata: ObjectData, key: Key): void;
|
|
/**
|
|
* This override also makes sure any copied node data does not have a reference to the containing group.
|
|
* @expose
|
|
* @param {ObjectData} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {ObjectData}
|
|
* @see Model#copyNodeData
|
|
*/
|
|
copyNodeData(nodedata: ObjectData): ObjectData | null;
|
|
/**
|
|
* This override changes the value of some property of a node data, a link data, or an item data, given a string naming the property
|
|
* and the new value, in a manner that can be undone/redone and that automatically updates any bindings.
|
|
* This override handles link data as well as node data.
|
|
*
|
|
* This gets the old value of the property; if the value is the same as the new value, no side-effects occur.
|
|
* @expose
|
|
* @param {ObjectData} data a JavaScript object typically the value of a Panel#data and represented by a Node, Link, Group, simple Part,
|
|
* or item in a Panel#itemArray; or this model's #modelData.
|
|
* @param {string} propname a string that is not null or the empty string.
|
|
* @param {*} val the new value for the property.
|
|
* @see Model#setDataProperty
|
|
*/
|
|
setDataProperty(data: ObjectData, propname: string, val: any): void;
|
|
/**
|
|
* This override is similar to <code>Object.assign</code>,
|
|
* but safely calls #setDataProperty for each property other than a key property.
|
|
* @param data a data object
|
|
* @param props an Object holding various properties whose values are to be assigned to the DATA object
|
|
*/
|
|
assignAllDataProperties(data: ObjectData, props: ObjectData): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns a string naming that data's category,
|
|
* The value may also be a function taking two arguments, where the first argument will be a link data object.
|
|
* If the second argument is not supplied, the function should return the category name;
|
|
* if the second argument is supplied, the function should modify the link data object so that it has that new category name.
|
|
* The default value is the name 'category', meaning that it expects the data to have a property named 'category' if it cares to name the category for the Link.
|
|
* This is used by the diagram to distinguish between different kinds of links.
|
|
* The name must not be null.
|
|
* If the value is an empty string,
|
|
* #getCategoryForLinkData will return an empty string for all link data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getCategoryForLinkData
|
|
* @see #setCategoryForLinkData
|
|
*/
|
|
linkCategoryProperty: string | ((a: ObjectData, b?: string) => string);
|
|
/**
|
|
* Find the category of a given link data, a string naming the link template
|
|
* that the Diagram should use to represent the link data.
|
|
* @param {ObjectData} linkdata a JavaScript object represented by a link.
|
|
* @return {string}
|
|
* @see #linkCategoryProperty
|
|
* @see #setCategoryForLinkData
|
|
*/
|
|
getCategoryForLinkData(linkdata: ObjectData): string;
|
|
/**
|
|
* Change the category of a given link data, a string naming the link template
|
|
* that the Diagram should use to represent the link data.
|
|
*
|
|
* Changing the link template for a link data will cause the existing Link
|
|
* to be removed from the Diagram and be replaced with a new Link
|
|
* created by copying the new link template and applying any data-bindings.
|
|
* Note that the new template must be an instance of the same class as the original link.
|
|
* Thus one cannot change the category of a link from an instance of Link
|
|
* to an instance of a subclass of Link, nor vice-versa.
|
|
* @param {Object} linkdata a JavaScript object represented by a link.
|
|
* @param {string} cat Must not be null.
|
|
* @see #linkCategoryProperty
|
|
* @see #getCategoryForLinkData
|
|
*/
|
|
setCategoryForLinkData(linkdata: ObjectData, cat: string): void;
|
|
}
|
|
/**
|
|
* TreeModels support tree-structured graphs of nodes and links.
|
|
* Each node can have at most one "tree parent"; cycles are not permitted.
|
|
* The reference to the parent node's key is a property of the child node data.
|
|
*
|
|
* TreeModels, unlike GraphLinksModels, do not support arbitrary link relationships between nodes,
|
|
* nor is there a separate link data object for each parent-child relationship.
|
|
* Furthermore there is no support for grouping or label nodes.
|
|
*
|
|
* The #nodeParentKeyProperty property names the property on the node data whose value
|
|
* is the key of the "tree parent" node.
|
|
* The default value for this property is "parent".
|
|
*
|
|
* For example, one can define a graph consisting of one parent node with two child nodes:
|
|
* ```js
|
|
* model.nodeDataArray = [
|
|
* { key: "Alpha" },
|
|
* { key: "Beta", parent: "Alpha" },
|
|
* { key: "Gamma", parent: "Alpha" }
|
|
* ];
|
|
* ```
|
|
*
|
|
* If you need to show a more complicated graph structure than a tree, use a GraphLinksModel.
|
|
* If you want to have multiple links between the same pair of nodes,
|
|
* or if you want to associate more information with each link and cannot put the information on the child node,
|
|
* you will need to have a separate link data object for each link,
|
|
* and that would require the use of GraphLinksModel.
|
|
* @extends Model
|
|
* @unrestricted
|
|
* @since 1.1
|
|
* @category Model
|
|
*/
|
|
export class TreeModel extends Model {
|
|
/**
|
|
* This constructs an empty TreeModel unless one provides arguments as the initial data array values
|
|
* for the Model#nodeDataArray property.
|
|
* @param {Array.<Object>=} nodedataarray an optional Array containing JavaScript objects to be represented by Nodes.
|
|
*/
|
|
constructor(nodedataarray?: Array<ObjectData>);
|
|
/**
|
|
* Gets or sets the name of the property on node data that specifies
|
|
* the string or number key of the node data that acts as the "parent" for this "child" node data.
|
|
* The value may also be a function taking two arguments, where the first argument will be a node data object.
|
|
* If the second argument is not supplied, the function should return the string or number key for the parent node data object of which the given data object is a child;
|
|
* if the second argument is supplied, the function should modify the node data object so that it has that new key
|
|
* (which may be undefined to refer to no node) as the parent key for that node..
|
|
* The default value is the name 'parent', meaning that it expects the data to have a property named 'parent' if the node wants to refer to the parent node by its key.
|
|
* The value must not be null nor an empty string.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getParentKeyForNodeData
|
|
* @see #setParentKeyForNodeData
|
|
*/
|
|
nodeParentKeyProperty: string | ((a: ObjectData, b?: Key) => Key);
|
|
/**
|
|
* If there is a parent node for the given node data, return the parent's key.
|
|
* @param {Object} nodedata a JavaScript object represented by a node.
|
|
* @return {string|number|undefined} This returns undefined if there is no parent node data object.
|
|
* @see #nodeParentKeyProperty
|
|
* @see #setParentKeyForNodeData
|
|
*/
|
|
getParentKeyForNodeData(nodedata: ObjectData): Key;
|
|
/**
|
|
* Change the parent node for the given node data, given a key for the new parent, or undefined if there should be no parent.
|
|
* @param {Object} nodedata a JavaScript object represented by a node.
|
|
* @param {string|number|undefined} key This may be undefined if there should be no parent node data.
|
|
* @see #nodeParentKeyProperty
|
|
* @see #getParentKeyForNodeData
|
|
*/
|
|
setParentKeyForNodeData(nodedata: ObjectData, key: Key): void;
|
|
/**
|
|
* Gets or sets the name of the data property that returns a string describing that node data's parent link's category.
|
|
* The value may also be a function taking two arguments, where the first argument will be a node data object.
|
|
* If the second argument is not supplied, the function should return the category name for any parent link;
|
|
* if the second argument is supplied, the function should modify the node data object so that its parent link has that new category name.
|
|
* The default value is the name 'parentLinkCategory'.
|
|
* This is used by the diagram to distinguish between different kinds of links.
|
|
* The name must not be null.
|
|
* If the value is an empty string,
|
|
* #getParentLinkCategoryForNodeData will return an empty string for all node data objects.
|
|
*
|
|
* If you want to set this property you must do so before using the model, and especially before you assign Diagram#model.
|
|
* Note that functions cannot be serialized into JSON-formatted text, so if you are using #toJson and Model.fromJson,
|
|
* and if you want this property to be a function, you will need to assign this property to your desired function
|
|
* immediately after creating the model, including when it is created by Model.fromJson.
|
|
* @see #getParentLinkCategoryForNodeData
|
|
* @see #setParentLinkCategoryForNodeData
|
|
*/
|
|
parentLinkCategoryProperty: string | ((a: ObjectData, b?: string) => string);
|
|
/**
|
|
* Find the category for the parent link of a given child node data, a string naming the link template
|
|
* that the Diagram should use to represent the link.
|
|
* @param {Object} childdata a JavaScript object represented by a node data.
|
|
* @return {string}
|
|
* @see #parentLinkCategoryProperty
|
|
* @see #setParentLinkCategoryForNodeData
|
|
*/
|
|
getParentLinkCategoryForNodeData(childdata: ObjectData): string;
|
|
/**
|
|
* Change the category for the parent link of a given child node data, a string naming the link template
|
|
* that the Diagram should use to represent the link.
|
|
*
|
|
* Changing the link template will cause any existing Link
|
|
* to be removed from the Diagram and replaced with a new Link
|
|
* created by copying the new link template and applying any data-bindings.
|
|
* Note that the new template must be an instance of the same class as the original link.
|
|
* Thus one cannot change the category of a link from an instance of Link
|
|
* to an instance of a subclass of Link, nor vice-versa.
|
|
* @param {Object} childdata a JavaScript object represented by a node data.
|
|
* @param {string} cat Must not be null.
|
|
* @see #parentLinkCategoryProperty
|
|
* @see #getParentLinkCategoryForNodeData
|
|
*/
|
|
setParentLinkCategoryForNodeData(childdata: ObjectData, cat: string): void;
|
|
/**
|
|
* This override also makes sure any copied node data does not have a reference to a parent node.
|
|
* @expose
|
|
* @param {Object} nodedata a JavaScript object represented by a node, group, or non-link.
|
|
* @return {Object}
|
|
* @see Model#copyNodeData
|
|
*/
|
|
copyNodeData(nodedata: ObjectData): ObjectData | null;
|
|
/**
|
|
* This override changes the value of some property of a node data or an item data, given a string naming the property
|
|
* and the new value, in a manner that can be undone/redone and that automatically updates any bindings.
|
|
*
|
|
* This gets the old value of the property; if the value is the same as the new value, no side-effects occur.
|
|
* @expose
|
|
* @param {Object} data a JavaScript object typically the value of a Panel#data and represented by a Node, Link, Group, simple Part,
|
|
* or item in a Panel#itemArray; or this model's #modelData.
|
|
* @param {string} propname a string that is not null or the empty string.
|
|
* @param {*} val the new value for the property.
|
|
* @see Model#setDataProperty
|
|
*/
|
|
setDataProperty(data: ObjectData, propname: string, val: any): void;
|
|
}
|
|
/**
|
|
* This layout positions nodes in a circular arrangement.
|
|
* There are several samples that use CircularLayout.
|
|
* The layout cannot guarantee that it provides optimal positioning of nodes when trying to minimize link crossings.
|
|
* <p class="boxrun">
|
|
* If you want to experiment interactively with most of the properties, try the <a href="../../samples/cLayout.html">Circular Layout</a> sample.
|
|
* See samples that make use of CircularLayout in the <a href="../../samples/index.html#circularlayout">samples index</a>.
|
|
*
|
|
* This layout makes use of a LayoutNetwork of
|
|
* CircularVertexes and CircularEdges that normally
|
|
* correspond to the Nodes and Links of the Diagram.
|
|
* @extends Layout
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class CircularLayout extends Layout {
|
|
/**
|
|
* Constructs a CircularLayout with no Layout#network
|
|
* and with no owning Layout#diagram.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Create a new LayoutNetwork of CircularVertexes and CircularEdges.
|
|
* @return {CircularNetwork} a new LayoutNetwork.
|
|
*/
|
|
createNetwork(): CircularNetwork;
|
|
/**
|
|
* Assign the positions of the vertexes in the network.
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
*/
|
|
doLayout(coll: Diagram | Group | Iterable<Part>): void;
|
|
/**
|
|
* Position each Node according to the Vertex position, and then position the Links.
|
|
*
|
|
* You should not call this method -- it is a "protected virtual" method.
|
|
*/
|
|
protected commitLayout(): void;
|
|
/**
|
|
* Commit the position of all vertex nodes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitNodes(): void;
|
|
/**
|
|
* Commit the position and routing of all edge links.
|
|
* This is called by #commitLayout.
|
|
* This is only called if Layout#isRouting is true.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitLinks(): void;
|
|
/**
|
|
* Gets or sets the horizontal radius of the elliptical arrangement.
|
|
*
|
|
* The default value is NaN.
|
|
* NaN indicates that the #spacing will determine the size of the ring.
|
|
* If #spacing is also NaN, the effective spacing will be 6.
|
|
* If #spacing is a number, the effective radius will be > radius if and only if
|
|
* the spacing between elements would otherwise be less than spacing.
|
|
* The specified value for #radius will be ignored if #arrangement === CircularLayout.Packed.
|
|
* This property must always be positive or NaN.
|
|
*/
|
|
radius: number;
|
|
/**
|
|
* Gets or sets the ratio of the arrangement's height to its width
|
|
* (1 for a circle, >1 for a vertically elongated ellipse).
|
|
*
|
|
* This is 1 by default.
|
|
* The value must be a positive number.
|
|
*
|
|
* Modifying this value changes the height, but keeps the width and the #radius constant.
|
|
*/
|
|
aspectRatio: number;
|
|
/**
|
|
* Gets or sets the angle (in degrees, clockwise from the positive side of the X axis) of the first element.
|
|
*
|
|
* The default value is 0.
|
|
*/
|
|
startAngle: number;
|
|
/**
|
|
* Gets or sets the absolute angle (in degrees) between the first and last node.
|
|
*
|
|
* The default value is 360.
|
|
* The value must be greater than zero and less than or equal to 360.
|
|
* If it is not in this range, it will be automatically set to 360.
|
|
*
|
|
* Whether the arrangement is clockwise or counterclockwise does not depend on the sign of this value.
|
|
* The direction can be controlled by setting #direction.
|
|
* If 360 is the specified value, the actual value will be less to keep the first and last
|
|
* elements from overlapping, and the spacing between the first and last nodes will be determined
|
|
* the same way as for all other adjacent nodes.
|
|
*/
|
|
sweepAngle: number;
|
|
/**
|
|
* Gets or sets how the nodes are spaced.
|
|
* If #arrangement === CircularLayout.Packed,
|
|
* the specified #radius will be ignored.
|
|
*
|
|
* The default value is CircularLayout.ConstantSpacing.
|
|
*/
|
|
arrangement: EnumValue;
|
|
/**
|
|
* Gets or sets whether the nodes are arranged clockwise or counterclockwise.
|
|
*
|
|
* The default value is CircularLayout.Clockwise.
|
|
*/
|
|
direction: EnumValue;
|
|
/**
|
|
* Gets or sets if and how the nodes are sorted.
|
|
*
|
|
* CircularLayout.Forwards indicates that the nodes are arranged in the order the layout gets them.
|
|
* CircularLayout.Reverse indicates that the nodes are arranged in the reverse order that the layout gets them.
|
|
* CircularLayout.Ascending and CircularLayout.Descending indicate that the nodes
|
|
* will be sorted using the #comparer.
|
|
* CircularLayout.Optimized indicates that the nodes will be arranged to minimize link crossings.
|
|
*
|
|
* The default value is CircularLayout.Optimized.
|
|
*/
|
|
sorting: EnumValue;
|
|
/**
|
|
* Gets or sets the comparer which sorts the data when #sorting is
|
|
* set to CircularLayout.Ascending or CircularLayout.Descending.
|
|
*
|
|
* The default function compares the Part#text values of the vertexes' LayoutVertex#nodes.
|
|
*/
|
|
comparer: ((a: CircularVertex, b: CircularVertex) => number);
|
|
/**
|
|
* Gets or sets the distance between nodes (if #radius is NaN)
|
|
* or the minimum distance between nodes (if #radius is a number).
|
|
*
|
|
* The default value is 6.
|
|
* The value may be NaN.
|
|
*
|
|
* If #spacing is NaN, there is no minimum spacing, allowing nodes to overlap,
|
|
* unless #radius is NaN,
|
|
* in which case the effective spacing will be 6 to determine an effective radius.
|
|
* If #spacing is a number but #radius isn't,
|
|
* the effective spacing will be spacing, and this will determine the effective radius.
|
|
* If both #spacing and #radius are numbers,
|
|
* the effective radius will be at least #radius,
|
|
* but may be larger so that the minimum spacing between nodes is #spacing.
|
|
*/
|
|
spacing: number;
|
|
/**
|
|
* Specifies how the diameter of nodes will be calculated.
|
|
* When a node is not circular, it is not clear what its diameter is.
|
|
*
|
|
* The default is CircularLayout.Pythagorean.
|
|
*/
|
|
nodeDiameterFormula: EnumValue;
|
|
/**
|
|
* This read-only property is the effective X radius that may have been calculated by the layout.
|
|
*/
|
|
readonly actualXRadius: number;
|
|
/**
|
|
* This read-only property is the effective Y radius that may have been calculated by the layout.
|
|
*/
|
|
readonly actualYRadius: number;
|
|
/**
|
|
* This read-only property is the effective spacing that may have been calculated by the layout.
|
|
*/
|
|
readonly actualSpacing: number;
|
|
/**
|
|
* This read-only property is the coordinates of the center of the laid-out ellipse immediately after the layout.
|
|
*/
|
|
readonly actualCenter: Point;
|
|
/**
|
|
* The spacing between the idealized boundaries of the nodes is constant;
|
|
* This value is used for CircularLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static ConstantSpacing: EnumValue;
|
|
/**
|
|
* The distance between the centers of the nodes is constant;
|
|
* This value is used for CircularLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static ConstantDistance: EnumValue;
|
|
/**
|
|
* The angular distance between the nodes is constant;
|
|
* This value is used for CircularLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static ConstantAngle: EnumValue;
|
|
/**
|
|
* The vertices are arranged as close together as possible considering the CircularLayout#spacing,
|
|
* assuming the nodes are rectangular;
|
|
* This value is used for CircularLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static Packed: EnumValue;
|
|
/**
|
|
* Rings are filled clockwise;
|
|
* This value is used for CircularLayout#direction.
|
|
* @constant
|
|
*/
|
|
static Clockwise: EnumValue;
|
|
/**
|
|
* Rings are filled counterclockwise;
|
|
* This value is used for CircularLayout#direction.
|
|
* @constant
|
|
*/
|
|
static Counterclockwise: EnumValue;
|
|
/**
|
|
* The ring is filled by alternating sides; the second node is counterclockwise from the first node;
|
|
* This value is used for CircularLayout#direction.
|
|
* @constant
|
|
*/
|
|
static BidirectionalLeft: EnumValue;
|
|
/**
|
|
* The ring is filled by alternating sides; the second node is clockwise from the first node;
|
|
* This value is used for CircularLayout#direction.
|
|
* @constant
|
|
*/
|
|
static BidirectionalRight: EnumValue;
|
|
/**
|
|
* Nodes are arranged in the order given;
|
|
* This value is used for CircularLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Forwards: EnumValue;
|
|
/**
|
|
* Nodes are arranged in the reverse of the order given;
|
|
* This value is used for CircularLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Reverse: EnumValue;
|
|
/**
|
|
* Nodes are sorted using the #comparer, in ascending order;
|
|
* This value is used for CircularLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Ascending: EnumValue;
|
|
/**
|
|
* Nodes are sorted using the #comparer, in reverse ascending (descending) order;
|
|
* This value is used for CircularLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Descending: EnumValue;
|
|
/**
|
|
* Nodes are ordered to reduce link crossings;
|
|
* This value is used for CircularLayout#sorting.
|
|
* @constant
|
|
*/
|
|
static Optimized: EnumValue;
|
|
/**
|
|
* The effective diameter is sqrt(width^2+height^2);
|
|
* The corners of square nodes will touch at 45 degrees when CircularLayout#spacing is 0;
|
|
* This value is used for CircularLayout#nodeDiameterFormula.
|
|
* @constant
|
|
*/
|
|
static Pythagorean: EnumValue;
|
|
/**
|
|
* The effective diameter is either the width or height of the node, whichever is larger;
|
|
* This will cause circular nodes to touch when CircularLayout#spacing is 0;
|
|
* This is ideal when the nodes are circular.
|
|
* This value is used for CircularLayout#nodeDiameterFormula.
|
|
* @constant
|
|
*/
|
|
static Circular: EnumValue;
|
|
}
|
|
/**
|
|
* This class represents an abstract graph of CircularVertexes and CircularEdges
|
|
* that can be constructed based on the Nodes and Links of a Diagram
|
|
* so that the CircularLayout can operate independently of the diagram until it
|
|
* is time to commit any node positioning or link routing.
|
|
*
|
|
* This class inherits from LayoutNetwork.
|
|
* @extends LayoutNetwork
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class CircularNetwork extends LayoutNetwork {
|
|
constructor(layout: CircularLayout);
|
|
}
|
|
/**
|
|
* This holds CircularLayout-specific information about Nodes.
|
|
*
|
|
* This class inherits from LayoutVertex.
|
|
* @extends LayoutVertex
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class CircularVertex extends LayoutVertex {
|
|
constructor(network: CircularNetwork);
|
|
/**
|
|
* Gets or sets the value used as the vertex's diameter.
|
|
*
|
|
* By default the value depends on the CircularLayout#arrangement property.
|
|
* Any computed value is cached, to avoid unnecessary expensive computations.
|
|
*/
|
|
diameter: number;
|
|
/**
|
|
* Gets or sets the value used as the vertex's angle.
|
|
*/
|
|
actualAngle: number;
|
|
}
|
|
/**
|
|
* This holds CircularLayout-specific information about Links.
|
|
*
|
|
* This class inherits from LayoutEdge.
|
|
* @extends LayoutEdge
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class CircularEdge extends LayoutEdge {
|
|
constructor(network: CircularNetwork);
|
|
}
|
|
/**
|
|
* Force-directed layout treats the graph as if it were a system of physical bodies
|
|
* with repulsive electrical, attractional gravitational, and spring forces acting on them and between them.
|
|
*
|
|
* Electrical forces come both from the field at the vertex's location as well as from neighboring vertexes and are quadratic by distance.
|
|
* Gravitational forces come from the field at the vertex's location and are constant.
|
|
* Spring forces are only exerted between two different vertexes that are connected by an edge and are linear by distance.
|
|
*
|
|
* The electrical forces on a vertex are the sum of the electrical charge times the electrical field at that location
|
|
* (#electricalCharge, #electricalFieldX, #electricalFieldY)
|
|
* and the electrical forces of all nearby vertexes divided by the square of the distance between them.
|
|
* You can easily assign the electrical charge for all vertexes by assigning #defaultElectricalCharge.
|
|
* By default there is no electrical field, so all forces are due to nearby charged vertexes.
|
|
* For efficiency, #infinityDistance determines a cut-off distance between vertexes for which to consider any influence.
|
|
*
|
|
* The gravitational forces on a vertex are the sum of the gravitational mass times the gravitational field at that location
|
|
* (#gravitationalMass, #gravitationalFieldX, #gravitationalFieldY).
|
|
* You can easily assign the gravitational mass for all vertexes by assigning #defaultGravitationalMass.
|
|
* By default there is no gravitational field.
|
|
*
|
|
* The spring forces on a vertex are only exerted by the edges connecting it with other vertexes.
|
|
* The force along an edge is the stiffness of the spring times the difference of the distance between the vertexes and the nominal length of the spring
|
|
* (#springStiffness, #springLength) divided by the distance between the vertexes.
|
|
* When the distance is less than the nominal length, the force pushes the vertexes apart; when the distance is greater, the force pulls them together.
|
|
* You can easily assign the spring length and stiffness for all edges by assigning #defaultSpringLength and #defaultSpringStiffness.
|
|
*
|
|
* When the distance between two vertexes is less than one unit, this uses a random number generator to decide which direction the forces should go.
|
|
* For layouts that start with all of the vertexes at the same location, this results in potentially dramatically different results.
|
|
* Set #randomNumberGenerator to null in order to produce reproducible results given the same initial vertex locations.
|
|
*
|
|
* The algorithm seeks a configuration of the bodies with locally minimal energy,
|
|
* i.e. vertex positions such that the sum of the forces on each vertex is zero.
|
|
* This is achieved by repeatedly computing the forces on each vertex, moving them, and repeating.
|
|
* Computations stop when no vertex moves more than #epsilonDistance or when #maxIterations have happened.
|
|
*
|
|
* The layout cannot guarantee that it provides optimal positioning of nodes.
|
|
* Nodes will normally not overlap each other, but when there is a dense interconnectivity overlaps might not be avoidable.
|
|
* <p class="boxrun">
|
|
* If you want to experiment interactively with most of the properties, try the <a href="../../samples/fdLayout.html">Force Directed Layout</a> sample.
|
|
* See samples that make use of ForceDirectedLayout in the <a href="../../samples/index.html#forcedirectedlayout">samples index</a>.
|
|
*
|
|
* This layout makes use of a LayoutNetwork of
|
|
* ForceDirectedVertexes and ForceDirectedEdges that normally
|
|
* correspond to the Nodes and Links of the Diagram.
|
|
* @extends Layout
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class ForceDirectedLayout extends Layout {
|
|
/**
|
|
* Constructs a ForceDirectedLayout with no Layout#network
|
|
* and with no owning Layout#diagram.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Create a new LayoutNetwork of ForceDirectedVertexes and ForceDirectedEdges.
|
|
* @return {ForceDirectedNetwork} a new LayoutNetwork.
|
|
*/
|
|
createNetwork(): ForceDirectedNetwork;
|
|
/**
|
|
* Perform the force-directed layout.
|
|
*
|
|
* If there is no Layout#network, this calls #makeNetwork to create a LayoutNetwork from the given collection of Parts.
|
|
* This removes any reflexive edges in the network, since they should be ignored.
|
|
*
|
|
* For each vertex this calls and remembers the result of #electricalCharge as the ForceDirectedVertex#charge
|
|
* and the result of #gravitationalMass as the ForceDirectedVertex#mass.
|
|
*
|
|
* For each edge this calls and remembers the result of #springStiffness as the ForceDirectedEdge#stiffness
|
|
* and the result of #springLength as the ForceDirectedEdge#length.
|
|
*
|
|
* This then iterates, updating the position of each vertex according to the forces upon it,
|
|
* until reaching #maxIterations or until no vertex moves more than about #epsilonDistance.
|
|
*
|
|
* Finally this calls Layout#updateParts to commit the Node positions from the vertex positions.
|
|
* Layout#updateParts calls #commitLayout within a transaction.
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts
|
|
*/
|
|
doLayout(coll: Diagram | Group | Iterable<Part>): void;
|
|
/**
|
|
* Find any associated objects to be positioned along with the LayoutVertex#node.
|
|
*
|
|
* This method is called for each vertex in the network, when #comments is true.
|
|
* The standard behavior is to look for Nodes whose Part#category
|
|
* is "Comment" and that refer to the LayoutVertex#node.
|
|
* By default this method will not be called unless you set #comments to true.
|
|
*
|
|
* You may want to override this method in order to customize how any
|
|
* associated objects are found and how a new ForceDirectedVertex
|
|
* and ForceDirectedEdge
|
|
* may be added to the network to represent the (balloon?) comment.
|
|
* This method sets the new vertex's ForceDirectedVertex#charge
|
|
* to the value of #defaultCommentElectricalCharge,
|
|
* and sets the new edge's ForceDirectedEdge#length
|
|
* to the value of #defaultCommentSpringLength.
|
|
* @expose
|
|
* @param {ForceDirectedVertex} v
|
|
* @since 1.3
|
|
*/
|
|
addComments(v: ForceDirectedVertex): void;
|
|
/**
|
|
* Move the vertex by its ForceDirectedVertex.forceX and ForceDirectedVertex.forceY.
|
|
* Return the square of the distance moved.
|
|
* This can be overridden in order to constrain the vertex's actual movement.
|
|
* @expose
|
|
* @param {ForceDirectedVertex} v
|
|
* @return {number} square of distance moved
|
|
*/
|
|
moveVertex(v: ForceDirectedVertex): number;
|
|
/**
|
|
* Maybe move a vertex that #isFixed.
|
|
* This is called each iteration on each such vertex.
|
|
* By default this does nothing.
|
|
* @expose
|
|
* @param {ForceDirectedVertex} v
|
|
*/
|
|
moveFixedVertex(v: ForceDirectedVertex): void;
|
|
/**
|
|
* Set the fromSpot and toSpot on each Link, position each Node according
|
|
* to the vertex position, and then position/route the Links.
|
|
*
|
|
* This calls the #commitNodes and #commitLinks methods, the latter only if #isRouting is true.
|
|
* You should not call this method -- it is a "protected virtual" method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*/
|
|
protected commitLayout(): void;
|
|
/**
|
|
* Commit the position of all nodes.
|
|
*
|
|
* This is called by #commitLayout.
|
|
* See also #commitLinks.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitNodes(): void;
|
|
/**
|
|
* Routes the links.
|
|
*
|
|
* This is called by #commitLayout.
|
|
* This is only called if Layout#isRouting is true.
|
|
* See also #commitNodes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitLinks(): void;
|
|
/**
|
|
* Returns the stiffness of the spring representing an edge.
|
|
*
|
|
* The spring force between two vertexes connected by an edge is linearly proportional by distance
|
|
* to the difference between the #springLength and the distance.
|
|
* When the distance is greater than the length, the force pulls the vertexes closer to each other.
|
|
* When the distance is less than the length, the force pushes them apart.
|
|
*
|
|
* The two vertexes connected by the edge E are acted upon by a force of proportional to
|
|
* `springStiffness(E) * (getNodeDistance(E.fromVertex, E.toVertex) - springLength(E))` divided by the distance between the vertexes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {ForceDirectedEdge} e
|
|
* @return {number}
|
|
* Returns the stiffness of the edge representing a link,
|
|
* the value of ForceDirectedEdge#stiffness if it's a number,
|
|
* or else the value of #defaultSpringStiffness.
|
|
*/
|
|
springStiffness(e: ForceDirectedEdge): number;
|
|
/**
|
|
* Returns the length of the spring representing an edge.
|
|
* The two vertexes connected by the edge E are acted upon by a force of proportional to
|
|
* `springStiffness(E) * (getNodeDistance(E.fromVertex, E.toVertex) - springLength(E))` divided by the distance between the vertexes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {ForceDirectedEdge} e
|
|
* @return {number}
|
|
* Returns the length of the edge representing a link,
|
|
* the value of ForceDirectedEdge#length if it's a number,
|
|
* or else the value of #defaultSpringLength.
|
|
*/
|
|
springLength(e: ForceDirectedEdge): number;
|
|
/**
|
|
* Returns the charge of the vertex,
|
|
* the value of ForceDirectedVertex#charge if it's a number,
|
|
* or else the value of #defaultElectricalCharge.
|
|
*
|
|
* The electrical forces between two vertexes decrease by the square of the distance between them.
|
|
* Vertexes that are more than #infinityDistance apart are assumed to have no electrical charge effect on each other.
|
|
*
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {ForceDirectedVertex} v
|
|
* @return {number}
|
|
*/
|
|
electricalCharge(v: ForceDirectedVertex): number;
|
|
/**
|
|
* Returns the electrical field in the X direction acting on a vertex at the given point.
|
|
* By default there is no electrical field at any location.
|
|
*
|
|
* Used to define an external electrical field at a point independent of the vertex charges.
|
|
* A vertex L is acted upon by a force in the X direction of proportional to
|
|
* `electricalFieldX(L.center.x, L.center.y) * electricalCharge(L)`.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {number} the default implementation returns zero.
|
|
*/
|
|
electricalFieldX(x: number, y: number): number;
|
|
/**
|
|
* Returns the electrical field in the Y direction acting on a vertex at the given point.
|
|
* By default there is no electrical field at any location.
|
|
*
|
|
* Used to define an external electrical field at a point independent of the vertex charges.
|
|
* A vertex L is acted upon by a force in the Y direction of proportional to
|
|
* `electricalFieldY(L.center.x, L.center.y) * electricalCharge(L)`.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {number} the default implementation returns zero.
|
|
*/
|
|
electricalFieldY(x: number, y: number): number;
|
|
/**
|
|
* Returns the mass of the vertex,
|
|
* the value of ForceDirectedVertex#mass if it's a number,
|
|
* or else the value of #defaultGravitationalMass.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {ForceDirectedVertex} v
|
|
* @return {number}
|
|
*/
|
|
gravitationalMass(v: ForceDirectedVertex): number;
|
|
/**
|
|
* This returns the gravitational field in the X direction acting on a vertex at the given point.
|
|
* By default there is no gravitational field at any location.
|
|
*
|
|
* Used to define an external gravitational field at a point independent of the vertex masses.
|
|
* A vertex L is acted upon by a force in the X direction of proportional to
|
|
* `gravitationalFieldX(L.center.x, L.center.y) * gravitationalMass(L)`.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {number} the default implementation returns zero.
|
|
*/
|
|
gravitationalFieldX(x: number, y: number): number;
|
|
/**
|
|
* This returns the gravitational field in the Y direction acting on a vertex at the given point.
|
|
* By default there is no gravitational field at any location.
|
|
*
|
|
* Used to define an external gravitational field at a point independent of the vertex masses.
|
|
* A vertex L is acted upon by a force in the Y direction of proportional to
|
|
* `gravitationalFieldY(L.center.x, L.center.y) * gravitationalMass(L)`.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @return {number} the default implementation returns zero.
|
|
*/
|
|
gravitationalFieldY(x: number, y: number): number;
|
|
/**
|
|
* This predicate returns true if the vertex should not be moved
|
|
* by the layout algorithm but still have an effect on nearby and connected vertexes.
|
|
* The default implementation returns ForceDirectedVertex#isFixed.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {ForceDirectedVertex} v
|
|
* @return {boolean} returns true if the node should not be moved by the layout algorithm.
|
|
*/
|
|
isFixed(v: ForceDirectedVertex): boolean;
|
|
/**
|
|
* This read-only property returns the current iteration count, valid during a call to #doLayout.
|
|
*/
|
|
readonly currentIteration: number;
|
|
/**
|
|
* Gets or sets the space between which the layout
|
|
* will position the connected graphs that together compose the network.
|
|
* This defaults to Size(100, 100).
|
|
* These distances are used during a clustered layout;
|
|
* afterwards the normal force-directed layout
|
|
* will likely cause the size of any space between connected graphs to change,
|
|
* perhaps considerably.
|
|
*/
|
|
arrangementSpacing: Size;
|
|
/**
|
|
* Gets or sets whether #commitNodes should move all of the
|
|
* nodes so that the nodes all fit with the top-left corner at the
|
|
* Layout#arrangementOrigin.
|
|
* By default this is false -- the Layout#arrangementOrigin is ignored.
|
|
* When this is true, nodes are moved even though #isFixed was true.
|
|
*/
|
|
arrangesToOrigin: boolean;
|
|
/**
|
|
* Gets or sets whether the fromSpot and the toSpot of every Link
|
|
* should be set to Spot.Default.
|
|
* The default value is true.
|
|
*/
|
|
setsPortSpots: boolean;
|
|
/**
|
|
* Gets or sets whether this layout should find all Nodes
|
|
* whose category is "Comment" and
|
|
* whose anchors are nodes represented in the network,
|
|
* and add ForceDirectedVertexes representing those balloon comments
|
|
* as nodes in the network.
|
|
* The default value is false.
|
|
*/
|
|
comments: boolean;
|
|
/**
|
|
* Gets or sets the maximum number of iterations to perform when doing the
|
|
* force-directed auto layout.
|
|
* The value must be non-negative.
|
|
* The default value is 100.
|
|
*/
|
|
maxIterations: number;
|
|
/**
|
|
* Gets or sets approximately how far a node must move in order for the iterations to continue.
|
|
* The default value is 1.
|
|
* The value must be larger than zero.
|
|
*/
|
|
epsilonDistance: number;
|
|
/**
|
|
* Gets or sets a threshold for the distance beyond which the electrical charge forces may be ignored.
|
|
* The default value is 1000.
|
|
* The value must be larger than 1.
|
|
*/
|
|
infinityDistance: number;
|
|
/**
|
|
* Gets or sets how far a vertex may be moved in an iteration.
|
|
* The default value is 10.
|
|
* The value must be larger than 1.
|
|
* @since 1.8
|
|
*/
|
|
moveLimit: number;
|
|
/**
|
|
* Gets or sets a random number generator.
|
|
* The default value is Math, which results in calling Math.random().
|
|
* Change this to null in order to use an instance of an internal repeatable pseudo-random number generator,
|
|
* which will become the new value of this property.
|
|
*
|
|
* The new value must be either null or an Object with a method named "random" taking zero arguments
|
|
* and returning a random number between zero (inclusive) and one (exclusive).
|
|
* @since 1.5
|
|
*/
|
|
randomNumberGenerator: ({
|
|
random: () => number;
|
|
} | null);
|
|
/**
|
|
* Gets or sets the default value computed by #springStiffness.
|
|
* The initial value is 0.05.
|
|
*/
|
|
defaultSpringStiffness: number;
|
|
/**
|
|
* Gets or sets the default value computed by #springLength.
|
|
* The initial value is 50.
|
|
*/
|
|
defaultSpringLength: number;
|
|
/**
|
|
* Gets or sets the default value computed by #electricalCharge.
|
|
* The initial value is 150.
|
|
*/
|
|
defaultElectricalCharge: number;
|
|
/**
|
|
* Gets or sets the default value computed by #gravitationalMass.
|
|
* The initial value is zero.
|
|
*/
|
|
defaultGravitationalMass: number;
|
|
/**
|
|
* Gets or sets the default value computed by #springLength.
|
|
* The initial value is 10.
|
|
*/
|
|
defaultCommentSpringLength: number;
|
|
/**
|
|
* Gets or sets the default value computed by #electricalCharge.
|
|
* The initial value is 5.
|
|
*/
|
|
defaultCommentElectricalCharge: number;
|
|
}
|
|
/**
|
|
* This class represents an abstract graph of ForceDirectedVertexes and ForceDirectedEdges
|
|
* that can be constructed based on the Nodes and Links of a Diagram
|
|
* so that the ForceDirectedLayout can operate independently of the diagram until it
|
|
* is time to commit any node positioning or link routing.
|
|
*
|
|
* This class inherits from LayoutNetwork.
|
|
* @extends LayoutNetwork
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class ForceDirectedNetwork extends LayoutNetwork {
|
|
constructor(layout: ForceDirectedLayout);
|
|
}
|
|
/**
|
|
* This holds ForceDirectedLayout-specific information about Nodes.
|
|
*
|
|
* This class inherits from LayoutVertex.
|
|
* @extends LayoutVertex
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class ForceDirectedVertex extends LayoutVertex {
|
|
constructor(network: ForceDirectedNetwork);
|
|
/**
|
|
* Gets or sets whether the vertex may be moved by any forces.
|
|
* The default value is false.
|
|
*/
|
|
isFixed: boolean;
|
|
/**
|
|
* Gets or sets the electrical charge for this vertex.
|
|
* The default value is NaN.
|
|
*/
|
|
charge: number;
|
|
/**
|
|
* Gets or sets the gravitational mass for this vertex.
|
|
* The default value is NaN.
|
|
*/
|
|
mass: number;
|
|
/**
|
|
* Gets or sets the cumulative force on the vertex in the X direction.
|
|
* The default value is zero.
|
|
*/
|
|
forceX: number;
|
|
/**
|
|
* Gets or sets the cumulative force on the vertex in the Y direction.
|
|
* The default value is zero.
|
|
*/
|
|
forceY: number;
|
|
}
|
|
/**
|
|
* This holds ForceDirectedLayout-specific information about Links.
|
|
*
|
|
* This class inherits from LayoutEdge.
|
|
* @extends LayoutEdge
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class ForceDirectedEdge extends LayoutEdge {
|
|
constructor(network: ForceDirectedNetwork);
|
|
/**
|
|
* Gets or sets this edge's stiffness or resistance to compression or stretching.
|
|
* The default value is NaN.
|
|
*/
|
|
stiffness: number;
|
|
/**
|
|
* Gets or sets the length of this edge.
|
|
* The default value is NaN.
|
|
*/
|
|
length: number;
|
|
}
|
|
/**
|
|
* This arranges nodes of directed graphs into layers (rows or columns).
|
|
* There are many samples that use LayeredDigraphLayout.
|
|
* <p class="boxrun">
|
|
* If you want to experiment interactively with most of the properties, try the <a href="../../samples/ldLayout.html">Layered Digraph Layout</a> sample.
|
|
* See samples that make use of LayeredDigraphLayout in the <a href="../../samples/index.html#layereddigraphlayout">samples index</a>.
|
|
*
|
|
* The #layerSpacing property controls the distance between layers.
|
|
* The #columnSpacing property controls the breadth of each "column" --
|
|
* this affects the distance between nodes within a layer, although the exact distance also depends on the breadth of each node.
|
|
* The #layeringOption property determines whether nodes without links coming in or without links going out are
|
|
* lined up at the edge of the graph, or whether they are positioned close to their connected nodes.
|
|
*
|
|
* By default the layout will route the links in a manner that is consistent with the #direction.
|
|
* So, for example, if the #direction is 90 degrees (i.e. downward), the links are expected to go from the top towards the bottom.
|
|
* That means the links should come out from the bottom of the ports and should go into the top of the ports.
|
|
* Basically the layout will set Link#fromSpot to `Spot.Bottom` and Link#toSpot to `Spot.Top`.
|
|
*
|
|
* If you want to the links to use the spots that are given by the ports or by the links themselves, you will need to set
|
|
* #setsPortSpots to false to prevent this layout from setting the spots on the links.
|
|
* For example, if each node only has one port that is the whole node, and if you want the links to be spread out along the sides
|
|
* of the nodes, then you should set #setsPortSpots to false and set the node's GraphObject#fromSpot to
|
|
* `Spot.BottomSide` and GraphObject#toSpot to `Spot.TopSide`.
|
|
*
|
|
* This layout handles links that form cycles better than TreeLayout does.
|
|
* The normal routing behavior for "backwards" links is to route them "around" the source node and "around" the destination node,
|
|
* so that all links come in one side and go out the other side.
|
|
* However if you want "backwards" links to go more directly between nodes, set #setsPortSpots to false and
|
|
* the node's GraphObject#fromSpot and GraphObject#toSpot both to `Spot.TopBottomSides`.
|
|
* (Of course if the #direction is zero or 180, you'll want to use `Spot.LeftRightSides`.
|
|
*
|
|
* If the diagram is structured in a tree-like fashion,
|
|
* it may be better to use TreeLayout,
|
|
* which has more options specific to trees.
|
|
* TreeLayout is much faster than LayeredDigraphLayout,
|
|
* and can handle a limited number of links that would prevent the
|
|
* graph structure from being a true tree (i.e. some nodes having multiple parents).
|
|
*
|
|
* This layout makes use of a LayoutNetwork of
|
|
* LayeredDigraphVertexes and LayeredDigraphEdges that normally
|
|
* correspond to the Nodes and Links of the Diagram.
|
|
*
|
|
* The layout algorithm consists of four-major steps: Cycle Removal,
|
|
* Layer Assignment, Crossing Reduction, and Straightening and Packing.
|
|
* The layout cannot guarantee that it provides optimal positioning of nodes or routing of links.
|
|
* @extends Layout
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class LayeredDigraphLayout extends Layout {
|
|
/**
|
|
* Constructs a LayeredDigraphLayout with no Layout#network
|
|
* and with no owning Layout#diagram.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Create a new LayoutNetwork of LayeredDigraphVertexes and LayeredDigraphEdges.
|
|
* @return {LayeredDigraphNetwork} a new LayoutNetwork.
|
|
*/
|
|
createNetwork(): LayeredDigraphNetwork;
|
|
/**
|
|
* Perform the layered digraph layout.
|
|
*
|
|
* If there is no Layout#network, this calls #makeNetwork to create a LayoutNetwork from the given collection of Parts.
|
|
* This removes any reflexive edges in the network, since they should be ignored.
|
|
*
|
|
* In order to influence a vertex's layer, you can override #assignLayers.
|
|
*
|
|
* Finally this calls Layout#updateParts to commit the Node positions from the vertex positions.
|
|
* Layout#updateParts calls #commitLayout within a transaction.
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
*/
|
|
doLayout(coll: Diagram | Group | Iterable<Part>): void;
|
|
/**
|
|
* (Undocumented)
|
|
* The function LinkMinLength returns the minimum length of the
|
|
* link represented by the LayeredDigraphEdge link.
|
|
* The default implementation gives links a minimum length of 1.
|
|
* This function can be overridden to provide "fine-tuning" of the layout.
|
|
* @expose
|
|
* @param {LayeredDigraphEdge} edge
|
|
* @return {number} Returns the minimum length of the link represented by link.
|
|
*/
|
|
protected linkMinLength(edge: LayeredDigraphEdge): number;
|
|
/**
|
|
* (Undocumented)
|
|
* This function returns the minimum space reserved for this node from the center point
|
|
* for the "depth" of the layer that it is in.
|
|
*
|
|
* The default implementation returns 0 for nodes that do not
|
|
* correspond to top-level Go objects. For nodes that do correspond
|
|
* to top-level Go objects, the layer space is determined by the
|
|
* width or height of the object depending on the #direction.
|
|
* By default this adds 10 to the space, to account for port end segment lengths.
|
|
*
|
|
* @expose
|
|
* @param {LayeredDigraphVertex} v
|
|
* @param {boolean} topleft whether to return the distance from the vertex's position
|
|
* @return {number} Returns the minimum space reserved above and below this node, in document coordinates.
|
|
*/
|
|
protected nodeMinLayerSpace(v: LayeredDigraphVertex, topleft: boolean): number;
|
|
/**
|
|
* (Undocumented)
|
|
* The function nodeMinColumnSpace returns the minimum space
|
|
* reserved to either side of this node.
|
|
*
|
|
* The default implementation returns 0 for nodes that do not
|
|
* correspond to top-level Go objects. For nodes that do correspond
|
|
* to top-level Go objects, the column space is determined by the
|
|
* width and height of the object divided by the #columnSpcacing.
|
|
* Note: all sub-classes that override this method should ensure that
|
|
* nodes that do not correspond to top-level Go objects have a minimum
|
|
* column space of 0.
|
|
* This function can be overridden to provide "fine-tuning" of the layout.
|
|
* @expose
|
|
* @param {LayeredDigraphVertex} v
|
|
* @param {boolean} topleft whether to return the distance from the vertex's position
|
|
* @return {number} Returns the minimum space reserved to either side of the center of this node, in units of #columnSpacing.
|
|
*/
|
|
protected nodeMinColumnSpace(v: LayeredDigraphVertex, topleft: boolean): number;
|
|
/**
|
|
* (Undocumented)
|
|
* Removes cycles from the input network by reversing some number of links.
|
|
* By default, this just calls #greedyCycleRemoval or #depthFirstCycleRemoval,
|
|
* as appropriate, give the value of #cycleRemoveOption.
|
|
* @expose
|
|
*/
|
|
protected removeCycles(): void;
|
|
/**
|
|
* Assigns every vertex in the input network to a layer.
|
|
* The layer is a non-negative integer describing which row of vertexes each vertex belongs in.
|
|
* (Do not confuse this concept of "layer" with Layers that control the Z-ordering of Parts.)
|
|
*
|
|
* The layering satisfies the following relationship:
|
|
* if L is a link from node U to node V, then U.layer > V.layer.
|
|
*
|
|
* This method can be overridden to customize how nodes are assigned layers.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* By default, this does the appropriate assignments given the value of #layeringOption.
|
|
* @expose
|
|
* @since 1.1
|
|
*/
|
|
protected assignLayers(): void;
|
|
/**
|
|
* (Undocumented)
|
|
* Assigns every node in the input network an index number,
|
|
* such that nodes in the same layer will be labeled with
|
|
* consecutive indices in left to right order.
|
|
* All consecutive layout operations will preserve or update
|
|
* the indices.
|
|
*
|
|
* In addition, the indices array is initialized such that
|
|
* indices[layer] indicates the number of nodes in the layer.
|
|
* Finally, the variables minIndexLayer and maxIndexLayer record
|
|
* the layers that correspond to the minimum and maximum nodes
|
|
* in a layer.
|
|
* By default this will just call #naiveInitializeIndices,
|
|
* #depthfirstOutInitializeIndices, or
|
|
* #depthfirstInInitializeIndices, as appropriate
|
|
* given the value of #initializeOption.
|
|
* This method must not change the layer of any existing node, nor add or remove any layers.
|
|
* @expose
|
|
*/
|
|
protected initializeIndices(): void;
|
|
/**
|
|
* (Undocumented)
|
|
* Reorders nodes within layers to reduce the total number of link
|
|
* crossings in the network.
|
|
*
|
|
* There are many, many possible implementations of this function.
|
|
* Basically, some iteration of MedianBarycenterCrossingReduction
|
|
* and AdjacentExchangeCrossingReductionBendStraighten
|
|
* sweeping back and forth over the layers is needed.
|
|
* The default implementation has performed favorably on a large number
|
|
* of networks, but other options are available.
|
|
* @expose
|
|
*/
|
|
protected reduceCrossings(): void;
|
|
/**
|
|
* (Undocumented)
|
|
* Adjusts the columns of nodes in the network to produce a layout which reduces
|
|
* the number of bends and is tightly packed.
|
|
* @expose
|
|
*/
|
|
protected straightenAndPack(): void;
|
|
/**
|
|
* Set the fromSpot and toSpot on each Link, position each Node according
|
|
* to the vertex position, and then position/route the Links.
|
|
*
|
|
* This calls the #commitNodes and #commitLinks methods, the latter only if #isRouting is true.
|
|
* You should not call this method -- it is a "protected virtual" method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*/
|
|
protected commitLayout(): void;
|
|
/**
|
|
* Commit the position of all nodes.
|
|
*
|
|
* This is called by #commitLayout.
|
|
* See also #commitLinks.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitNodes(): void;
|
|
/**
|
|
* This overridable method is called by #commitLayout
|
|
* to support custom arrangement of bands or labels across each layout layer.
|
|
* By default this method does nothing.
|
|
*
|
|
* The coordinates used in the resulting Rects may need to be offset by the Layout#arrangementOrigin.
|
|
* @expose
|
|
* @param {Array.<Rect>} layerRects an Array of Rects with the bounds of each of the "layers"
|
|
* @param {Point} offset the position of the top-left corner of the banded area relative to the coordinates given by the layerRects
|
|
* @since 1.4
|
|
*/
|
|
protected commitLayers(layerRects: Array<Rect>, offset: Point): void;
|
|
/**
|
|
* Routes the links.
|
|
*
|
|
* This is called by #commitLayout.
|
|
* This is only called if Layout#isRouting is true.
|
|
* See also #commitNodes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitLinks(): void;
|
|
/**
|
|
* Gets or sets the space between each layer.
|
|
* This value must be positive and it defaults to 25.
|
|
*/
|
|
layerSpacing: number;
|
|
/**
|
|
* Gets or sets the size of each column.
|
|
* This value must be positive and it defaults to 25.
|
|
*/
|
|
columnSpacing: number;
|
|
/**
|
|
* Gets or sets the direction the graph grows towards.
|
|
* 0 is towards the right, 90 is downwards, 180 is towards the left, and 270 is upwards.
|
|
* The default value is 0.
|
|
*/
|
|
direction: number;
|
|
/**
|
|
* Gets or set which cycle removal option is used.
|
|
* The default value is LayeredDigraphLayout.CycleDepthFirst.
|
|
*/
|
|
cycleRemoveOption: EnumValue;
|
|
/**
|
|
* Gets or sets which layering option is being used.
|
|
* The default value is LayeredDigraphLayout.LayerOptimalLinkLength.
|
|
*/
|
|
layeringOption: EnumValue;
|
|
/**
|
|
* Gets or sets which indices initialization option is being used.
|
|
* The default value is LayeredDigraphLayout.InitDepthFirstOut.
|
|
*/
|
|
initializeOption: EnumValue;
|
|
/**
|
|
* Gets or sets the number of iterations to be done.
|
|
* The value must be non-negative. The default value is 4.
|
|
*/
|
|
iterations: number;
|
|
/**
|
|
* Gets or sets which aggressive option is being used to look for link crossings.
|
|
* The default value is LayeredDigraphLayout.AggressiveLess.
|
|
*/
|
|
aggressiveOption: EnumValue;
|
|
/**
|
|
* Gets or sets the options used by the straighten and pack function,
|
|
* The default value is LayeredDigraphLayout.PackAll.
|
|
*/
|
|
packOption: number;
|
|
/**
|
|
* Gets or sets whether the FromSpot and ToSpot of each link should be set
|
|
* to values appropriate for the given value of LayeredDigraphLayout#direction.
|
|
* The default value is true.
|
|
*
|
|
* If you set this to false, the spot values of the links and port objects will be used.
|
|
* If you do not set the spot values to sensible values matching the #direction,
|
|
* the routing results may be poor and they may cross over nodes.
|
|
*/
|
|
setsPortSpots: boolean;
|
|
/**
|
|
* Undocumented
|
|
*/
|
|
linkSpacing: number;
|
|
/**
|
|
* This read-only property returns the largest layer value.
|
|
*/
|
|
readonly maxLayer: number;
|
|
/**
|
|
* This read-only property returns the largest index value.
|
|
*/
|
|
readonly maxIndex: number;
|
|
/**
|
|
* This read-only property returns the largest column value.
|
|
*/
|
|
readonly maxColumn: number;
|
|
/**
|
|
* This read-only property returns the smallest index layer.
|
|
*/
|
|
readonly minIndexLayer: number;
|
|
/**
|
|
* This read-only property returns the larges index layer.
|
|
*/
|
|
readonly maxIndexLayer: number;
|
|
/**
|
|
* Remove cycles using depth first cycle removal;
|
|
* a valid value of LayeredDigraphLayout#cycleRemoveOption.
|
|
* @constant
|
|
*/
|
|
static CycleDepthFirst: EnumValue;
|
|
/**
|
|
* Remove cycles using greedy cycle removal;
|
|
* a valid value of LayeredDigraphLayout#cycleRemoveOption.
|
|
* @constant
|
|
*/
|
|
static CycleGreedy: EnumValue;
|
|
/**
|
|
* Remove cycles depending on #assignLayers determining entirely which links are backwards links;
|
|
* a valid value of LayeredDigraphLayout#cycleRemoveOption.
|
|
* @constant
|
|
*/
|
|
static CycleFromLayers: EnumValue;
|
|
/**
|
|
* Assign layers using optimal link length layering;
|
|
* A valid value for LayeredDigraphLayout#layeringOption.
|
|
* @constant
|
|
*/
|
|
static LayerOptimalLinkLength: EnumValue;
|
|
/**
|
|
* Assign layers using longest path sink layering;
|
|
* a valid value for LayeredDigraphLayout#layeringOption.
|
|
* @constant
|
|
*/
|
|
static LayerLongestPathSink: EnumValue;
|
|
/**
|
|
* Assign layers using longest path source layering;
|
|
* a valid value for LayeredDigraphLayout#layeringOption.
|
|
* @constant
|
|
*/
|
|
static LayerLongestPathSource: EnumValue;
|
|
/**
|
|
* Initialize using depth first out initialization;
|
|
* a valid value for LayeredDigraphLayout#initializeOption.
|
|
* @constant
|
|
*/
|
|
static InitDepthFirstOut: EnumValue;
|
|
/**
|
|
* Initialize using depth first in initialization;
|
|
* a valid value for LayeredDigraphLayout#initializeOption.
|
|
* @constant
|
|
*/
|
|
static InitDepthFirstIn: EnumValue;
|
|
/**
|
|
* Initialize using naive initialization;
|
|
* a valid value for LayeredDigraphLayout#initializeOption.
|
|
* @constant
|
|
*/
|
|
static InitNaive: EnumValue;
|
|
/**
|
|
* The fastest, but poorest, crossing reduction algorithm;
|
|
* a valid value for LayeredDigraphLayout#aggressiveOption.
|
|
* @constant
|
|
*/
|
|
static AggressiveNone: EnumValue;
|
|
/**
|
|
* The faster, less aggressive, crossing reduction algorithm;
|
|
* a valid value for LayeredDigraphLayout#aggressiveOption.
|
|
* @constant
|
|
*/
|
|
static AggressiveLess: EnumValue;
|
|
/**
|
|
* The slower, more aggressive, crossing reduction algorithm,
|
|
* a valid value for LayeredDigraphLayout#aggressiveOption.
|
|
* @constant
|
|
*/
|
|
static AggressiveMore: EnumValue;
|
|
/**
|
|
* Does minimal work in packing the nodes;
|
|
* a valid value for LayeredDigraphLayout#packOption.
|
|
* @constant
|
|
*/
|
|
static PackNone: number;
|
|
/**
|
|
* This option gives more chances for the packing algorithm to improve the network,
|
|
* but is very expensive in time for large networks;
|
|
* a valid value for LayeredDigraphLayout#packOption.
|
|
* @constant
|
|
*/
|
|
static PackExpand: number;
|
|
/**
|
|
* This option tries to have the packing algorithm straighten many of the
|
|
* links that cross layers,
|
|
* a valid value for LayeredDigraphLayout#packOption.
|
|
* @constant
|
|
*/
|
|
static PackStraighten: number;
|
|
/**
|
|
* This option tries to have the packing algorithm center groups of nodes
|
|
* based on their relationships with nodes in other layers,
|
|
* a valid value for LayeredDigraphLayout#packOption.
|
|
* @constant
|
|
*/
|
|
static PackMedian: number;
|
|
/**
|
|
* Enable all options for the LayeredDigraphLayout#packOption property;
|
|
* See also LayeredDigraphLayout.PackExpand, LayeredDigraphLayout.PackStraighten,
|
|
* and LayeredDigraphLayout.PackMedian.
|
|
* @constant
|
|
*/
|
|
static PackAll: number;
|
|
}
|
|
/**
|
|
* This class represents an abstract graph of LayeredDigraphVertexes and LayeredDigraphEdges
|
|
* that can be constructed based on the Nodes and Links of a Diagram
|
|
* so that the LayeredDigraphLayout can operate independently of the diagram until it
|
|
* is time to commit any node positioning or link routing.
|
|
*
|
|
* This class inherits from LayoutNetwork.
|
|
* @extends LayoutNetwork
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class LayeredDigraphNetwork extends LayoutNetwork {
|
|
constructor(layout: LayeredDigraphLayout);
|
|
}
|
|
/**
|
|
* This holds LayeredDigraphLayout-specific information about Nodes.
|
|
*
|
|
* This class inherits from LayoutVertex.
|
|
* @extends LayoutVertex
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class LayeredDigraphVertex extends LayoutVertex {
|
|
/**
|
|
* Gets or sets the layer to which the node is assigned.
|
|
* The default value is -1.
|
|
*/
|
|
layer: number;
|
|
/**
|
|
* Gets or sets the column to which the node is assigned.
|
|
* The default value is -1.
|
|
*/
|
|
column: number;
|
|
/**
|
|
* Gets or sets the index to which the node is assigned.
|
|
* The default value is -1.
|
|
*/
|
|
index: number;
|
|
/**
|
|
* Gets or sets the connected component to which the node is assigned.
|
|
* The default value is NaN.
|
|
*/
|
|
component: number;
|
|
/**
|
|
* Gets or sets another LayeredDigraphVertex in the same layer that this node should be near.
|
|
* The default value is null.
|
|
*/
|
|
near: LayeredDigraphVertex;
|
|
}
|
|
/**
|
|
* This holds LayeredDigraphLayout-specific information about Links.
|
|
*
|
|
* This class inherits from LayoutEdge.
|
|
* @extends LayoutEdge
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class LayeredDigraphEdge extends LayoutEdge {
|
|
constructor(network: LayeredDigraphNetwork);
|
|
/**
|
|
* True if the link is part of the proper digraph.
|
|
* The default value is false.
|
|
*/
|
|
valid: boolean;
|
|
/**
|
|
* True if the link was reversed during cycle removal.
|
|
* The default value is false.
|
|
*/
|
|
rev: boolean;
|
|
/**
|
|
* True if the link is part of the depth first forest.
|
|
* The default value is false.
|
|
*/
|
|
forest: boolean;
|
|
/**
|
|
* Location of the port at the from node of the link.
|
|
* Allows the crossing matrix to correctly calculate the crossings for nodes with multiple ports.
|
|
* The default value is NaN.
|
|
*/
|
|
portFromPos: number;
|
|
/**
|
|
* Location of the port at the to node of the link.
|
|
* Allows the crossing matrix to correctly calculate the crossings for nodes with multiple ports.
|
|
* The default value is NaN.
|
|
*/
|
|
portToPos: number;
|
|
/**
|
|
* Approximate column offset of the from port of the link from the from node column used in straightening.
|
|
* The default value is 0.
|
|
*/
|
|
portFromColOffset: number;
|
|
/**
|
|
* Approximate column offset of the to port of the link from the to node column used in straightening.
|
|
* The default value is 0.
|
|
*/
|
|
portToColOffset: number;
|
|
}
|
|
/**
|
|
* This layout positions nodes of a tree-structured graph in layers (rows or columns).
|
|
* <p class="boxrun">
|
|
* For a discussion and examples of the most commonly used properties, see <a href="../../intro/trees.html">Trees</a> page in the Introduction.
|
|
* If you want to experiment interactively with most of the properties, try the <a href="../../samples/tLayout.html">Tree Layout</a> sample.
|
|
* See samples that make use of TreeLayout in the <a href="../../samples/index.html#treelayout">samples index</a>.
|
|
*
|
|
* This layout makes use of a LayoutNetwork of
|
|
* TreeVertexes and TreeEdges that normally
|
|
* correspond to the Nodes and Links of the Diagram.
|
|
*
|
|
* The most commonly set properties for controlling the results of a TreeLayout are:
|
|
* - #angle: the direction in which the tree grows, from parent to child;
|
|
* the default value of zero means that the tree grows towards the right, with the children of a node arranged in a layer that is a column.
|
|
* An angle of 0 or 180 means that children form vertical layers -- breadth is height and depth is width;
|
|
* an angle of 90 or 270 means that children form horizontal layers -- breadth is width and depth is height.
|
|
* - #layerSpacing: the distance between layers -- between a parent node and its child nodes.
|
|
* - #nodeSpacing: the distance between nodes within a layer -- between siblings.
|
|
* - #alignment: the relative position of a parent node with its children.
|
|
* - #sorting and #comparer: specify the order of the immediate children of a parent node.
|
|
* - #compaction: whether subtrees should be packed closer together if there is room.
|
|
* - #layerStyle: whether the children of one node are aligned with the children of a sibling node.
|
|
* - #setsPortSpot, #portSpot, #setsChildPortSpot, and #childPortSpot: this controls whether to set the Link#fromSpot and
|
|
* Link#toSpot to be sensible for the #angle.
|
|
* - #nodeIndent and #nodeIndentPastParent: if the #alignment is TreeLayout.AlignmentStart or TreeLayout.AlignmentEnd,
|
|
* control how much extra space the first child is given when positioned.
|
|
* - #breadthLimit, #rowSpacing: try to limit the total breadth of a subtree to a certain distance;
|
|
* when there are too many children or when they are too broad, this puts children into additional rows (or columns, depending on the angle)
|
|
* thereby limiting the breadth while increasing the depth of the tree.
|
|
*
|
|
* When you set one of the TreeLayout properties listed above, that property normally applies to all of the nodes in the tree.
|
|
* What if you want #alignment to be TreeLayout.AlignmentCenterChildren for the root node but TreeLayout.AlignmentBus for the other nodes in the tree?
|
|
* Or what if you want want #layerSpacing to be 50 for all layers except for the layer separating "leaf" nodes from their parent?
|
|
*
|
|
* One common solution is to set #treeStyle.
|
|
* For the former scenario, you could set #treeStyle to TreeLayout.StyleRootOnly; the value of #alignment would only apply to the root node.
|
|
* For the latter scenario, you could set it to TreeLayout.StyleLastParents;
|
|
* the value of #layerSpacing would apply to all nodes except those that have children but that do not have grandchildren.
|
|
* How do you then set the alignment or layerSpacing for the other nodes?
|
|
* By setting the TreeLayout properties whose names start with "alternate...".
|
|
* In these cases that would mean setting #alternateAlignment or #alternateLayerSpacing.
|
|
*
|
|
* These TreeLayout properties actually apply to the TreeVertex that the TreeLayout uses to represent a Node within the LayoutNetwork.
|
|
* All of those TreeLayout properties are actually stored in #rootDefaults; all of the "alternate..." properties are stored in #alternateDefaults.
|
|
* Depending on the value of #treeStyle, the actual TreeVertex properties for each Node are copied appropriately from either rootDefaults or alternateDefaults.
|
|
* In the default case where treeStyle is TreeLayout.StyleLayered, the alternateDefaults are ignored.
|
|
* (Note that treeStyle, and a few other properties such as #path and #arrangement, apply to the whole layout, not to an individual node/vertex.)
|
|
*
|
|
* The use of #treeStyle and "alternate..." TreeLayout properties will cover a lot of common needs for tree layout customization.
|
|
* However, there may be times when that is not enough.
|
|
* Imagine a situation where you want a special TreeVertex property value for a particular Node.
|
|
* The solution is to override #assignTreeVertexValues, where you can examine the given TreeVertex,
|
|
* including its corresponding LayoutVertex#node, to decide what TreeVertex property values should apply.
|
|
* @extends Layout
|
|
* @unrestricted
|
|
* @category Layout
|
|
*/
|
|
export class TreeLayout extends Layout {
|
|
/**
|
|
* Constructs a TreeLayout with no Layout#network
|
|
* and with no owning Layout#diagram.
|
|
*/
|
|
constructor();
|
|
/**
|
|
* Create a new LayoutNetwork of TreeVertexes and TreeEdges.
|
|
* @return {TreeNetwork} a new LayoutNetwork.
|
|
*/
|
|
createNetwork(): TreeNetwork;
|
|
/**
|
|
* Create and initialize a LayoutNetwork with the given nodes and links.
|
|
*
|
|
* This does not include any nodes of category "Comment".
|
|
* Comment nodes are added by the #addComments method.
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
* @return {LayoutNetwork}
|
|
*/
|
|
makeNetwork(coll: Diagram | Group | Iterable<Part>): LayoutNetwork;
|
|
/**
|
|
* Perform the tree layout.
|
|
*
|
|
* If there is no Layout#network, this calls #makeNetwork to create a LayoutNetwork from the given collection of Parts.
|
|
*
|
|
* If there are no TreeVertex #roots specified, this finds all roots in the Layout#network.
|
|
*
|
|
* This initializes all of the TreeVertexes and TreeEdges, calling #initializeTreeVertexValues on each vertex,
|
|
* supporting inheritance of vertex values.
|
|
* Then it calls #assignTreeVertexValues on each one, to allow for node/vertex-specific customizations.
|
|
* Next it sorts all of the child vertexes for each parent vertex, if needed.
|
|
*
|
|
* This also calls #addComments of each vertex, in order to find any comment nodes associated with each vertex,
|
|
* so that they can be accommodated by the layout.
|
|
*
|
|
* This then actually does the "layout" of the vertexes and optionally the routing of the edges of each tree in the network.
|
|
* To deal with multiple roots/trees this also calls #arrangeTrees to position each separate tree relative to each other.
|
|
*
|
|
* Finally this calls Layout#updateParts to commit the Node positions from the vertex positions and the Link routes from the edges.
|
|
* Layout#updateParts calls #commitLayout within a transaction.
|
|
* @param {Diagram|Group|Iterable.<Part>} coll A Diagram or a Group or a collection of Parts.
|
|
*/
|
|
doLayout(coll: Diagram | Group | Iterable<Part>): void;
|
|
/**
|
|
* Assign initial property values for a TreeVertex.
|
|
*
|
|
* The values may be inherited, so this method is called while
|
|
* propagating values from the root nodes.
|
|
* This method should not walk the tree, since it is called for each
|
|
* TreeVertex in a depth-first manner starting at a root.
|
|
*
|
|
* You probably do not need to override this method,
|
|
* but if you do you should call first either the base method
|
|
* or TreeVertex#copyInheritedPropertiesFrom, since they
|
|
* assign most of the TreeVertex property values
|
|
* used to influence the layout.
|
|
* Informational properties such as TreeVertex#descendantCount
|
|
* and TreeVertex#maxGenerationCount will not yet have been initialized
|
|
* by the time this method is called.
|
|
* It is more common to override #assignTreeVertexValues in order to
|
|
* modify a property or two to customize the layout at that node.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* When the TreeVertex#alignment is TreeLayout.AlignmentBusBranching,
|
|
* this will modify the TreeVertex#angle appropriately depending on which
|
|
* side of the bus the vertex is on.
|
|
* @expose
|
|
* @param {TreeVertex} v
|
|
* @since 1.2
|
|
*/
|
|
initializeTreeVertexValues(v: TreeVertex): void;
|
|
/**
|
|
* Assign final property values for a TreeVertex.
|
|
*
|
|
* This method is commonly overridden in order to provide
|
|
* tree layout properties for particular nodes.
|
|
* This method is called after values have been inherited from other
|
|
* TreeVertexes, so you can examine and modify the
|
|
* values of related tree nodes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*
|
|
* However, when TreeVertex#alignment is TreeLayout.AlignmentBusBranching,
|
|
* changing the TreeVertex#sorting or
|
|
* TreeVertex#comparer properties in this method will have no effect.
|
|
*
|
|
* This method should not walk the tree, since it is called for each
|
|
* TreeVertex in a depth-first manner starting at a root.
|
|
*
|
|
* Here is an example where the children are squeezed together if there are many of them,
|
|
* but only on nodes that have no grandchildren. This makes use of two TreeVertex
|
|
* properties that are automatically computed for you, TreeVertex#childrenCount and TreeVertex#descendantCount.
|
|
* ```js
|
|
* function SqueezingTreeLayout() {
|
|
* go.TreeLayout.call(this);
|
|
* }
|
|
* go.Diagram.inherit(SqueezingTreeLayout, go.TreeLayout);
|
|
*
|
|
* public assignTreeVertexValues(v) {
|
|
* if (v.childrenCount > 6 && v.childrenCount === v.descendantCount) {
|
|
* v.alignment = go.TreeLayout.AlignmentBottomRightBus;
|
|
* v.layerSpacing = 10;
|
|
* v.rowSpacing = 0;
|
|
* }
|
|
* }
|
|
* ```
|
|
*
|
|
* If you need to assign TreeVertex values and also have them be "inherited" by the child vertexes,
|
|
* you should override #initializeTreeVertexValues instead.
|
|
* However at the time that method is called, the computed properties of TreeVertex will not be available.
|
|
* @expose
|
|
* @param {TreeVertex} v
|
|
* @since 1.1
|
|
*/
|
|
assignTreeVertexValues(v: TreeVertex): void;
|
|
/**
|
|
* Find any associated objects to be positioned along with the LayoutVertex#node.
|
|
*
|
|
* This looks for visible Node's whose category is "Comment" and
|
|
* that refer to the tree vertex's Node.
|
|
* This method is only called when #comments is true.
|
|
*
|
|
* You may want to override this method in order to customize how
|
|
* any associated objects are found and how the node's LayoutVertex#bounds
|
|
* are set to reserve space for those associated objects.
|
|
* This method should not walk the tree, since it is called for each
|
|
* TreeVertex in an indeterminate order.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {TreeVertex} v
|
|
* @since 1.2
|
|
*/
|
|
addComments(v: TreeVertex): void;
|
|
/**
|
|
* Position and TreeVertex#comments around the vertex.
|
|
*
|
|
* This method should not walk the tree, since it is called for each
|
|
* TreeVertex in an indeterminate order.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @param {TreeVertex} v
|
|
* @since 1.2
|
|
*/
|
|
layoutComments(v: TreeVertex): void;
|
|
/**
|
|
* Position each separate tree.
|
|
*
|
|
* This is called after each tree has been laid out and thus each subtree
|
|
* bounds are known.
|
|
* The #arrangement and #arrangementSpacing and Layout#arrangementOrigin
|
|
* properties affect this method's behavior.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
* @since 1.2
|
|
*/
|
|
arrangeTrees(): void;
|
|
/**
|
|
* Set the fromSpot and toSpot on each Link, position each Node according
|
|
* to the vertex position, and then position/route the Links.
|
|
*
|
|
* This calls the #commitNodes and #commitLinks methods, the latter only if #isRouting is true.
|
|
* You should not call this method -- it is a "protected virtual" method.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
*/
|
|
protected commitLayout(): void;
|
|
/**
|
|
* Commit the position of all nodes.
|
|
*
|
|
* This is called by #commitLayout.
|
|
* See also #commitLinks.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitNodes(): void;
|
|
/**
|
|
* This overridable method is called by #commitLayout
|
|
* if #layerStyle is LayerUniform
|
|
* to support custom arrangement of bands or labels across each layout layer.
|
|
* By default this method does nothing.
|
|
*
|
|
* The coordinates used in the resulting Rects may need to be offset by the Layout#arrangementOrigin
|
|
* and/or by the arrangement of subtrees done by #arrangeTrees.
|
|
* @expose
|
|
* @param {Array.<Rect>} layerRects an Array of Rects with the bounds of each of the "layers"
|
|
* @param {Point} offset the position of the top-left corner of the banded area relative to the coordinates given by the layerRects
|
|
* @since 1.4
|
|
*/
|
|
protected commitLayers(layerRects: Array<Rect>, offset: Point): void;
|
|
/**
|
|
* Routes the links.
|
|
*
|
|
* This is called by #commitLayout.
|
|
* This is only called if Layout#isRouting is true.
|
|
* See also #commitNodes.
|
|
* Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.
|
|
* @expose
|
|
*/
|
|
protected commitLinks(): void;
|
|
/**
|
|
* Gets or sets the collection of root vertexes.
|
|
*
|
|
* Initially this will be an empty Set.
|
|
*
|
|
* If the #path is either TreeLayout.PathDestination|PathDestination or
|
|
* TreeLayout.PathSource|PathSource, this layout can easily
|
|
* determine all of the tree roots by searching the whole network.
|
|
* Otherwise, you should explicitly initialize this collection
|
|
* with one or more TreeVertexes.
|
|
*/
|
|
roots: Set<(TreeVertex | Node)>;
|
|
/**
|
|
* Gets or sets how the tree should be constructed from the
|
|
* TreeEdges connecting TreeVertexes.
|
|
* Must be TreeLayout.PathDestination or TreeLayout.PathSource or TreeLayout.PathDefault.
|
|
*
|
|
* The default value is TreeLayout.PathDefault,
|
|
* where the value of Diagram#isTreePathToChildren determines the effective value of this property.
|
|
*/
|
|
path: EnumValue;
|
|
/**
|
|
* Gets or sets the Style for the resulting trees.
|
|
* Must be TreeLayout.StyleLayered, TreeLayout.StyleAlternating,
|
|
* TreeLayout.StyleLastParents, or TreeLayout.StyleRootOnly.
|
|
*
|
|
* The default value is TreeLayout.StyleLayered.
|
|
*/
|
|
treeStyle: EnumValue;
|
|
/**
|
|
* Gets or sets the manner in which the nodes are aligned in layers.
|
|
* Must be TreeLayout.LayerIndividual, TreeLayout.LayerSiblings,
|
|
* or TreeLayout.LayerUniform.
|
|
*
|
|
* The default value is TreeLayout.LayerIndividual.
|
|
* @since 1.4
|
|
*/
|
|
layerStyle: EnumValue;
|
|
/**
|
|
* Gets or sets whether this layout should find all Nodes
|
|
* whose category is "Comment" and
|
|
* whose anchors are nodes represented in the network,
|
|
* and increase the size of the corresponding TreeVertex to make room for the comment nodes.
|
|
* The default value is true.
|
|
* @since 1.3
|
|
*/
|
|
comments: boolean;
|
|
/**
|
|
* Gets or sets how #arrangeTrees should lay out the separate trees.
|
|
* Must be TreeLayout.ArrangementVertical, TreeLayout.ArrangementHorizontal,
|
|
* or TreeLayout.ArrangementFixedRoots.
|
|
*
|
|
* The default value is TreeLayout.ArrangementVertical
|
|
*/
|
|
arrangement: EnumValue;
|
|
/**
|
|
* Gets or sets the space between which #arrangeTrees will position the trees.
|
|
*
|
|
* This defaults to the Size(10, 10).
|
|
*
|
|
* This property is ignored if #arrangement is TreeLayout.ArrangementFixedRoots.
|
|
*/
|
|
arrangementSpacing: Size;
|
|
/**
|
|
* Gets or sets the object holding the default values for root TreeVertexes.
|
|
*
|
|
* The values for the following inheritable properties are actually stored in this object:
|
|
* #sorting, #comparer, #angle,
|
|
* #alignment, #nodeIndent, #nodeIndentPastParent,
|
|
* #nodeSpacing, #layerSpacing, #layerSpacingParentOverlap,
|
|
* #compaction, #breadthLimit, #rowSpacing, #rowIndent,
|
|
* #commentSpacing, #commentMargin,
|
|
* #setsPortSpot, #portSpot, #setsChildPortSpot, #childPortSpot.
|
|
* The other properties of this TreeVertex are ignored.
|
|
*/
|
|
rootDefaults: TreeVertex;
|
|
/**
|
|
* Gets or sets the object holding the default values for alternate layer TreeVertexes,
|
|
* used when the #treeStyle is TreeLayout.StyleAlternating|StyleAlternating or TreeLayout.StyleLastParents|StyleLastParents.
|
|
*
|
|
* See the list of inheritable properties in the documentation for #rootDefaults.
|
|
* The other properties of this TreeVertex are ignored.
|
|
*/
|
|
alternateDefaults: TreeVertex;
|
|
/**
|
|
* Gets or sets the default sorting policy for ordering the immediate children of a vertex.
|
|
* Must be TreeLayout.SortingForwards, TreeLayout.SortingReverse,
|
|
* TreeLayout.SortingAscending, or TreeLayout.SortingDescending.
|
|
*
|
|
* The default value is TreeLayout.SortingForwards.
|
|
*
|
|
* This sets the #rootDefaults' property of the same name.
|
|
* The sort order is determined by #comparer.
|
|
*/
|
|
sorting: EnumValue;
|
|
/**
|
|
* Gets or sets the default comparison function used for sorting the immediate children of a vertex.
|
|
*
|
|
* The default comparer compares the LayoutVertex#node Text values.
|
|
*
|
|
* This sets the #rootDefaults' property of the same name.
|
|
* Whether this comparison function is used is determined by the value of #sorting.
|
|
* ```js
|
|
* $(go.TreeLayout,
|
|
* {
|
|
* sorting: go.TreeLayout.SortingAscending,
|
|
* comparer: function(va, vb) {
|
|
* var da = va.node.data;
|
|
* var db = vb.node.data;
|
|
* if (da.someProperty < db.someProperty) return -1;
|
|
* if (da.someProperty > db.someProperty) return 1;
|
|
* return 0;
|
|
* }
|
|
* }
|
|
* )
|
|
* ```
|
|
*/
|
|
comparer: ((a: TreeVertex, b: TreeVertex) => number);
|
|
/**
|
|
* Gets or sets the default direction for tree growth.
|
|
*
|
|
* The default value is 0; the value must be one of: 0, 90, 180, 270.
|
|
*
|
|
* These values are in degrees, where 0 is along the positive X axis,
|
|
* and where 90 is along the positive Y axis.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
angle: number;
|
|
/**
|
|
* Gets or sets the default alignment of parents relative to their children.
|
|
* Must be a static constant of TreeLayout whose name starts with "Alignment".
|
|
*
|
|
* The default value is TreeLayout.AlignmentCenterChildren.
|
|
*
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
alignment: EnumValue;
|
|
/**
|
|
* Gets or sets the default indentation of the first child.
|
|
*
|
|
* The default value is zero. The value should be non-negative.
|
|
*
|
|
* This property is only sensible when the #alignment
|
|
* is TreeLayout.AlignmentStart|AlignmentStart or TreeLayout.AlignmentEnd|AlignmentEnd.
|
|
* Having a positive value is useful if you want to reserve space
|
|
* at the start of the row of children for some reason.
|
|
* For example, if you want to pretend the parent node is infinitely deep,
|
|
* you can set this to be the breadth of the parent node.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
nodeIndent: number;
|
|
/**
|
|
* Gets or sets the fraction of this node's breadth is added to #nodeIndent
|
|
* to determine any spacing at the start of the children.
|
|
*
|
|
* The default value is 0.0 -- the only indentation is specified by #nodeIndent.
|
|
* When the value is 1.0, the children will be indented past the breadth of the parent node.
|
|
*
|
|
* This property is only sensible when the #alignment
|
|
* is TreeLayout.AlignmentStart|AlignmentStart or TreeLayout.AlignmentEnd|AlignmentEnd.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
nodeIndentPastParent: number;
|
|
/**
|
|
* Gets or sets the distance between child nodes.
|
|
*
|
|
* The default value is 20.
|
|
*
|
|
* A negative value causes sibling nodes to overlap.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
nodeSpacing: number;
|
|
/**
|
|
* Gets or sets the distance between a parent node and its children.
|
|
*
|
|
* The default value is 50.
|
|
*
|
|
* This is the distance between a parent node and its first row
|
|
* of children, in case there are multiple rows of its children.
|
|
* The #rowSpacing property determines the distance
|
|
* between rows of children.
|
|
* Negative values may cause children to overlap with the parent.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
layerSpacing: number;
|
|
/**
|
|
* Gets or sets the fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.
|
|
*
|
|
* The default value is 0.0 -- there is overlap between layers only if #layerSpacing is negative.
|
|
* A value of 1.0 and a zero #layerSpacing will cause child nodes to completely overlap the parent.
|
|
*
|
|
* A value greater than zero may still cause overlap between layers,
|
|
* unless the value of #layerSpacing is large enough.
|
|
* A value of zero might still allow overlap between layers,
|
|
* if #layerSpacing is negative.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
layerSpacingParentOverlap: number;
|
|
/**
|
|
* Gets or sets how closely to pack the child nodes of a subtree.
|
|
* Must be either TreeLayout.CompactionBlock or TreeLayout.CompactionNone.
|
|
*
|
|
* The default value is TreeLayout.CompactionBlock|CompactionBlock.
|
|
*
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
compaction: EnumValue;
|
|
/**
|
|
* Gets or sets a limit on how broad a tree should be.
|
|
*
|
|
* A value of zero (the default) means there is no limit;
|
|
* a positive value specifies a limit.
|
|
* The default value is zero.
|
|
*
|
|
* This property is just a suggested constraint on how
|
|
* broadly the tree will be laid out.
|
|
* When there isn't enough breadth for all of the children of a node,
|
|
* the children are placed in as many rows as needed to try to stay
|
|
* within the given breadth limit.
|
|
* If the value is too small, since this layout algorithm
|
|
* does not modify the size or shape of any node, the nodes will
|
|
* just be laid out in a line, one per row, and the breadth is
|
|
* determined by the broadest node.
|
|
* The distance between rows is specified by #rowSpacing.
|
|
* To make room for the links that go around earlier rows to get to
|
|
* later rows, when the alignment is not a "center" alignment, the
|
|
* #rowIndent property specifies that space at the
|
|
* start of each row.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
breadthLimit: number;
|
|
/**
|
|
* Gets or sets the distance between rows of children.
|
|
*
|
|
* The default value is 25.
|
|
*
|
|
* This property is only used when there is more than one
|
|
* row of children for a given parent node.
|
|
* #layerSpacing determines the distance between
|
|
* the parent node and its first row of child nodes.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
rowSpacing: number;
|
|
/**
|
|
* Gets or sets the default indentation of the first child of each row,
|
|
* if the #alignment is not a "Center" alignment.
|
|
*
|
|
* The default value is 10. The value should be non-negative.
|
|
*
|
|
* This is used to leave room for the links that connect a parent node
|
|
* with the child nodes that are in additional rows.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
rowIndent: number;
|
|
/**
|
|
* Gets or sets the distance between comments.
|
|
*
|
|
* The default value is 10.
|
|
*
|
|
* This is used by #addComments and #layoutComments.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
commentSpacing: number;
|
|
/**
|
|
* Gets or sets the distance between a node and its comments.
|
|
*
|
|
* The default value is 20.
|
|
*
|
|
* This is used by #addComments and #layoutComments.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
commentMargin: number;
|
|
/**
|
|
* Gets or sets whether the TreeLayout should set the
|
|
* FromSpot for this parent node port.
|
|
*
|
|
* The default value is true -- this may modify the spot of the port of this node, the parent,
|
|
* if the node has only a single port.
|
|
*
|
|
* The spot used depends on the value of #portSpot.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
setsPortSpot: boolean;
|
|
/**
|
|
* Gets or sets the spot that this node's port gets as its FromSpot.
|
|
*
|
|
* The default value is Spot.Default.
|
|
*
|
|
* A value of Spot.Default will cause the TreeLayout
|
|
* to assign a FromSpot based on the parent node's TreeVertex#angle.
|
|
* If the value is other than NoSpot, it is just assigned.
|
|
* When #path is TreeLayout.PathSource|PathSource,
|
|
* the port's ToSpot is set instead of the FromSpot.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
portSpot: Spot;
|
|
/**
|
|
* Gets or sets whether the TreeLayout should set the
|
|
* ToSpot for each child node port.
|
|
*
|
|
* The default value is true -- this may modify the spot of the ports of the children nodes,
|
|
* if the node has only a single port.
|
|
*
|
|
* The spot used depends on the value of #childPortSpot.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
setsChildPortSpot: boolean;
|
|
/**
|
|
* Gets or sets the spot that children nodes' ports get as their ToSpot.
|
|
*
|
|
* The default value is Spot.Default.
|
|
*
|
|
* A value of Spot.Default will cause the TreeLayout
|
|
* to assign a ToSpot based on the parent node's TreeVertex#angle.
|
|
* If the value is other than NoSpot, it is just assigned.
|
|
* When #path is TreeLayout.PathSource|PathSource,
|
|
* the port's FromSpot is set instead of the ToSpot.
|
|
* This sets the #rootDefaults' property of the same name.
|
|
*/
|
|
childPortSpot: Spot;
|
|
/**
|
|
* Gets or sets the alternate sorting policy for ordering the immediate children of a vertex.
|
|
* Must be TreeLayout.SortingForwards, TreeLayout.SortingReverse,
|
|
* TreeLayout.SortingAscending, or TreeLayout.SortingDescending.
|
|
*
|
|
* The default value is TreeLayout.SortingForwards|SortingForwards.
|
|
*
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
* The sort order is determined by #alternateComparer.
|
|
*/
|
|
alternateSorting: EnumValue;
|
|
/**
|
|
* Gets or sets the alternate comparison function used for sorting the immediate children of a vertex.
|
|
*
|
|
* The default comparer compares the LayoutVertex#node Text values.
|
|
*
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
* Whether this comparison function is used is determined by the value of #alternateSorting.
|
|
*/
|
|
alternateComparer: ((a: TreeVertex, b: TreeVertex) => number);
|
|
/**
|
|
* Gets or sets the alternate direction for tree growth.
|
|
*
|
|
* The default value is 0; the value must be one of: 0, 90, 180, 270.
|
|
*
|
|
* These values are in degrees, where 0 is along the positive X axis,
|
|
* and where 90 is along the positive Y axis.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateAngle: number;
|
|
/**
|
|
* Gets or sets the alternate alignment of parents relative to their children.
|
|
* Must be a static constant of TreeLayout whose name starts with "Alignment".
|
|
*
|
|
* The default value is TreeLayout.AlignmentCenterChildren.
|
|
*
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateAlignment: EnumValue;
|
|
/**
|
|
* Gets or sets the alternate indentation of the first child.
|
|
*
|
|
* The default value is zero. The value should be non-negative.
|
|
*
|
|
* This property is only sensible when the #alignment
|
|
* is TreeLayout.AlignmentStart|AlignmentStart or TreeLayout.AlignmentEnd|AlignmentEnd.
|
|
* Having a positive value is useful if you want to reserve space
|
|
* at the start of the row of children for some reason.
|
|
* For example, if you want to pretend the parent node is infinitely deep,
|
|
* you can set this to be the breadth of the parent node.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateNodeIndent: number;
|
|
/**
|
|
* Gets or sets the fraction of this node's breadth is added to #nodeIndent
|
|
* to determine any spacing at the start of the children.
|
|
*
|
|
* The default value is 0.0 -- the only indentation is specified by #nodeIndent.
|
|
* When the value is 1.0, the children will be indented past the breadth of the parent node.
|
|
*
|
|
* This property is only sensible when the #alignment
|
|
* is TreeLayout.AlignmentStart|AlignmentStart or TreeLayout.AlignmentEnd|AlignmentEnd.
|
|
*/
|
|
alternateNodeIndentPastParent: number;
|
|
/**
|
|
* Gets or sets the alternate distance between child nodes.
|
|
*
|
|
* The default value is 20.
|
|
*
|
|
* A negative value causes sibling nodes to overlap.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateNodeSpacing: number;
|
|
/**
|
|
* Gets or sets the alternate distance between a parent node and its children.
|
|
*
|
|
* The default value is 50.
|
|
*
|
|
* This is the distance between a parent node and its first row
|
|
* of children, in case there are multiple rows of its children.
|
|
* The #rowSpacing property determines the distance
|
|
* between rows of children.
|
|
* Negative values may cause children to overlap with the parent.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateLayerSpacing: number;
|
|
/**
|
|
* Gets or sets the alternate fraction of the node's depth for which the children's layer starts overlapped with the parent's layer.
|
|
*
|
|
* The default value is 0.0 -- there is overlap between layers only if #layerSpacing is negative.
|
|
* A value of 1.0 and a zero #layerSpacing will cause child nodes to completely overlap the parent.
|
|
*
|
|
* A value greater than zero may still cause overlap between layers,
|
|
* unless the value of #layerSpacing is large enough.
|
|
* A value of zero might still allow overlap between layers,
|
|
* if #layerSpacing is negative.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateLayerSpacingParentOverlap: number;
|
|
/**
|
|
* Gets or sets how closely to pack the child nodes of a subtree.
|
|
* Must be either TreeLayout.CompactionBlock or TreeLayout.CompactionNone.
|
|
*
|
|
* The default value is TreeLayout.CompactionBlock.
|
|
*
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateCompaction: EnumValue;
|
|
/**
|
|
* Gets or sets an alternate limit on how broad a tree should be.
|
|
*
|
|
* A value of zero (the default) means there is no limit;
|
|
* a positive value specifies a limit.
|
|
* The default value is zero.
|
|
*
|
|
* This property is just a suggested constraint on how
|
|
* broadly the tree will be laid out.
|
|
* When there isn't enough breadth for all of the children of a node,
|
|
* the children are placed in as many rows as needed to try to stay
|
|
* within the given breadth limit.
|
|
* If the value is too small, since this layout algorithm
|
|
* does not modify the size or shape of any node, the nodes will
|
|
* just be laid out in a line, one per row, and the breadth is
|
|
* determined by the broadest node.
|
|
* The distance between rows is specified by #rowSpacing.
|
|
* To make room for the links that go around earlier rows to get to
|
|
* later rows, when the alignment is not a "center" alignment, the
|
|
* #rowIndent property specifies that space at the
|
|
* start of each row.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateBreadthLimit: number;
|
|
/**
|
|
* Gets or sets the alternate distance between rows of children.
|
|
*
|
|
* The default value is 25.
|
|
*
|
|
* This property is only used when there is more than one
|
|
* row of children for a given parent node.
|
|
* #layerSpacing determines the distance between
|
|
* the parent node and its first row of child nodes.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateRowSpacing: number;
|
|
/**
|
|
* Gets or sets the alternate indentation of the first child of each row,
|
|
* if the #alignment is not a "Center" alignment.
|
|
*
|
|
* The default value is 10. The value should be non-negative.
|
|
*
|
|
* This is used to leave room for the links that connect a parent node
|
|
* with the child nodes that are in additional rows.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateRowIndent: number;
|
|
/**
|
|
* Gets or sets the alternate distance between comments.
|
|
*
|
|
* The default value is 10.
|
|
*
|
|
* This is used by #addComments and #layoutComments.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateCommentSpacing: number;
|
|
/**
|
|
* Gets or sets the alternate distance between a node and its comments.
|
|
*
|
|
* The default value is 20.
|
|
*
|
|
* This is used by #addComments and #layoutComments.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateCommentMargin: number;
|
|
/**
|
|
* Gets or sets whether the TreeLayout should set the
|
|
* FromSpot for this parent node port.
|
|
*
|
|
* The default value is true -- this may modify the spot of the port of this node, the parent,
|
|
* if the node has only a single port.
|
|
*
|
|
* The spot used depends on the value of #portSpot.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateSetsPortSpot: boolean;
|
|
/**
|
|
* Gets or sets the alternate spot that this node's port gets as its FromSpot.
|
|
*
|
|
* The default value is Spot.Default.
|
|
*
|
|
* A value of Spot.Default will cause the TreeLayout
|
|
* to assign a FromSpot based on the parent node's TreeVertex#angle.
|
|
* If the value is other than NoSpot, it is just assigned.
|
|
* When #path is TreeLayout.PathSource|PathSource,
|
|
* the port's ToSpot is set instead of the FromSpot.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternatePortSpot: Spot;
|
|
/**
|
|
* Gets or sets whether the TreeLayout should set the
|
|
* ToSpot for each child node port.
|
|
*
|
|
* The default value is true -- this may modify the spot of the ports of the children nodes,
|
|
* if the node has only a single port.
|
|
*
|
|
* The spot used depends on the value of #childPortSpot.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateSetsChildPortSpot: boolean;
|
|
/**
|
|
* Gets or sets the alternate spot that children nodes' ports get as their ToSpot
|
|
* The default value is Spot.Default.
|
|
*
|
|
* A value of Spot.Default will cause the TreeLayout
|
|
* to assign a ToSpot based on the parent node's TreeVertex#angle.
|
|
*
|
|
* If the value is other than NoSpot, it is just assigned.
|
|
* When #path is TreeLayout.PathSource|PathSource,
|
|
* the port's FromSpot is set instead of the ToSpot.
|
|
* This sets the #alternateDefaults' property of the same name.
|
|
*/
|
|
alternateChildPortSpot: Spot;
|
|
/**
|
|
* This value for TreeLayout#path causes the value of Diagram#isTreePathToChildren
|
|
* to effectively choose either TreeLayout.PathDestination (if true) or TreeLayout.PathSource (if false).
|
|
* @constant
|
|
*/
|
|
static PathDefault: EnumValue;
|
|
/**
|
|
* The children of a TreeVertex are its LayoutVertex#destinationVertexes,
|
|
* the collection of connected LayoutEdge#toVertexes;
|
|
* this value is used for TreeLayout#path.
|
|
*
|
|
* The tree roots are those TreeVertexes that have zero source edges.
|
|
* @constant
|
|
*/
|
|
static PathDestination: EnumValue;
|
|
/**
|
|
* The children of a TreeVertex are its LayoutVertex#sourceVertexes,
|
|
* the collection of connected LayoutEdge#fromVertexes;
|
|
* this value is used for TreeLayout#path.
|
|
*
|
|
* The tree roots are those TreeVertexes that have zero destination edges.
|
|
* @constant
|
|
*/
|
|
static PathSource: EnumValue;
|
|
/**
|
|
* Lay out each child in the order in which they were found;
|
|
* this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
|
|
* @constant
|
|
*/
|
|
static SortingForwards: EnumValue;
|
|
/**
|
|
* Lay out each child in reverse order from which they were found;
|
|
* this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
|
|
* @constant
|
|
*/
|
|
static SortingReverse: EnumValue;
|
|
/**
|
|
* Lay out each child according to the sort order given by TreeVertex#comparer;
|
|
* this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
|
|
* @constant
|
|
*/
|
|
static SortingAscending: EnumValue;
|
|
/**
|
|
* Lay out each child in reverse sort order given by TreeVertex#comparer;
|
|
* this value is used for TreeLayout#sorting or TreeLayout#alternateSorting.
|
|
* @constant
|
|
*/
|
|
static SortingDescending: EnumValue;
|
|
/**
|
|
* The parent is centered at the middle of the range of its child subtrees;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
*
|
|
* When there is a breadth limit that causes there to be multiple rows,
|
|
* the links that extend from the parent to those children in rows past
|
|
* the first one may cross over the nodes that are in earlier rows.
|
|
* @constant
|
|
*/
|
|
static AlignmentCenterSubtrees: EnumValue;
|
|
/**
|
|
* The parent is centered at the middle of the range of its immediate child nodes;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
*
|
|
* When there is a breadth limit that causes there to be multiple rows,
|
|
* the links that extend from the parent to those children in rows past
|
|
* the first one may cross over the nodes that are in earlier rows.
|
|
* @constant
|
|
*/
|
|
static AlignmentCenterChildren: EnumValue;
|
|
/**
|
|
* The parent is positioned near the first of its children;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
* @constant
|
|
*/
|
|
static AlignmentStart: EnumValue;
|
|
/**
|
|
* The parent is positioned near the last of its children;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
* @constant
|
|
*/
|
|
static AlignmentEnd: EnumValue;
|
|
/**
|
|
* The children are positioned in a bus on both sides of an "aisle" where the links to them go,
|
|
* with the last odd child (if any) placed at the end of the aisle in the middle;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
*
|
|
* The children, if they are themselves parents, continue at the same inherited angle;
|
|
* use TreeLayout.AlignmentBusBranching if you want grandchildren to proceed growing in
|
|
* the different angle as determined by the side.
|
|
*
|
|
* A bus does not take TreeVertex#breadthLimit into account.
|
|
* @constant
|
|
*/
|
|
static AlignmentBus: EnumValue;
|
|
/**
|
|
* Like TreeLayout.AlignmentBus with the children arranged on both sides of an "aisle"
|
|
* with any last odd child placed at the end of the aisle,
|
|
* but the children get an TreeVertex#angle that depends on which side of the aisle
|
|
* they were placed;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
*
|
|
* This only works well when the TreeLayout#treeStyle is TreeLayout.StyleLayered.
|
|
*
|
|
* A bus does not take TreeVertex#breadthLimit into account.
|
|
* @constant
|
|
*/
|
|
static AlignmentBusBranching: EnumValue;
|
|
/**
|
|
* The children are positioned in a bus, only on the top or left side of the parent;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
*
|
|
* A bus does not take TreeVertex#breadthLimit into account.
|
|
* @constant
|
|
*/
|
|
static AlignmentTopLeftBus: EnumValue;
|
|
/**
|
|
* The children are positioned in a bus, only on the bottom or right side of the parent;
|
|
* this value is used for TreeLayout#alignment or TreeLayout#alternateAlignment.
|
|
*
|
|
* A bus does not take TreeVertex#breadthLimit into account.
|
|
* @constant
|
|
*/
|
|
static AlignmentBottomRightBus: EnumValue;
|
|
/**
|
|
* Only simple placement of children next to each other, as determined by their subtree breadth;
|
|
* this value is used for TreeLayout#compaction or TreeLayout#alternateCompaction.
|
|
*
|
|
* For any node, there will not be another node at any depth occupying the same breadth position,
|
|
* unless there are multiple rows; In other words, if there is no breadth limit resulting in
|
|
* multiple rows, with this compaction mode it is as if every node were infinitely deep.
|
|
* @constant
|
|
*/
|
|
static CompactionNone: EnumValue;
|
|
/**
|
|
* A simple fitting of subtrees;
|
|
* this value is used for TreeLayout#compaction or TreeLayout#alternateCompaction.
|
|
*
|
|
* This mode produces more compact trees -- often nicer looking too;
|
|
* Nodes will not overlap each other, unless you have negative values
|
|
* for some of the spacing properties;
|
|
* However it is possible when the links are orthogonally styled that
|
|
* occasionally the subtrees will be placed so close together that some
|
|
* links may overlap the links or even the nodes of other subtrees.
|
|
* @constant
|
|
*/
|
|
static CompactionBlock: EnumValue;
|
|
/**
|
|
* The normal tree style, where all of the children of each TreeVertex are lined up
|
|
* horizontally or vertically;
|
|
* this value is used for TreeLayout#treeStyle.
|
|
*
|
|
* Each TreeVertex gets its properties from its parent node;
|
|
* TreeLayout#rootDefaults is used for all default TreeVertex property values;
|
|
* TreeLayout#alternateDefaults is ignored.
|
|
* @constant
|
|
*/
|
|
static StyleLayered: EnumValue;
|
|
/**
|
|
* Just like the standard layered tree style, except that the nodes with children but no grandchildren
|
|
* have alternate properties;
|
|
* this value is used for TreeLayout#treeStyle.
|
|
*
|
|
* Each TreeVertex gets its properties from its parent node;
|
|
* However, for those nodes whose TreeVertex#maxGenerationCount is 1,
|
|
* in other words when it has children but no grandchildren,
|
|
* the properties are copied from TreeLayout#alternateDefaults.
|
|
*
|
|
* If the tree only has two levels, the root node gets the TreeLayout#rootDefaults.
|
|
* @constant
|
|
*/
|
|
static StyleLastParents: EnumValue;
|
|
/**
|
|
* Alternate layers of the tree have different properties, typically including the angle;
|
|
* this value is used for TreeLayout#treeStyle.
|
|
*
|
|
* Each TreeVertex gets its properties from its grandparent node;
|
|
* The root nodes get their defaults from TreeLayout#rootDefaults.
|
|
*
|
|
* The immediate children of root nodes get their defaults from TreeLayout#alternateDefaults.
|
|
*
|
|
* Depending on the properties used, it is possible for some link routes to cross over nodes.
|
|
* @constant
|
|
*/
|
|
static StyleAlternating: EnumValue;
|
|
/**
|
|
* All of the nodes get the alternate properties, except the root node gets the default properties;
|
|
* this value is used for TreeLayout#treeStyle.
|
|
*
|
|
* The root node gets the TreeLayout#rootDefaults properties,
|
|
* the root node's children get the TreeLayout#alternateDefaults properties,
|
|
* and all the rest of the TreeVertexes get their properties from their parent node.
|
|
* @constant
|
|
*/
|
|
static StyleRootOnly: EnumValue;
|
|
/**
|
|
* Position each tree in a non-overlapping fashion by increasing Y coordinates,
|
|
* starting at the Layout#arrangementOrigin;
|
|
* this value is used for TreeLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static ArrangementVertical: EnumValue;
|
|
/**
|
|
* Position each tree in a non-overlapping fashion by increasing X coordinates,
|
|
* starting at the Layout#arrangementOrigin;
|
|
* this value is used for TreeLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static ArrangementHorizontal: EnumValue;
|
|
/**
|
|
* Do not move each root node, but position all of their descendants relative to their root;
|
|
* this value is used for TreeLayout#arrangement.
|
|
* @constant
|
|
*/
|
|
static ArrangementFixedRoots: EnumValue;
|
|
/**
|
|
* The normal layer style, where each node takes up only the depth that it needs;
|
|
* this value is used for TreeLayout#layerStyle.
|
|
* @constant
|
|
* @since 1.4
|
|
*/
|
|
static LayerIndividual: EnumValue;
|
|
/**
|
|
* A layer style where all of the children of a parent node take up the same amount of depth --
|
|
* this typically causes all cousins to be aligned;
|
|
* this value is used for TreeLayout#layerStyle.
|
|
* @constant
|
|
* @since 1.4
|
|
*/
|
|
static LayerSiblings: EnumValue;
|
|
/**
|
|
* A layer style where all nodes with the same TreeVertex#level throughout the tree take up the same amount of depth --
|
|
* if the TreeVertex#angle is the same for all nodes, this will result in all nodes in the same layer to be aligned;
|
|
* this value is used for TreeLayout#layerStyle.
|
|
* @constant
|
|
* @since 1.4
|
|
*/
|
|
static LayerUniform: EnumValue;
|
|
}
|
|
/**
|
|
* This class represents an abstract graph of TreeVertexes and TreeEdges
|
|
* that can be constructed based on the Nodes and Links of a Diagram
|
|
* so that the TreeLayout can operate independently of the diagram until it
|
|
* is time to commit any node positioning or link routing.
|
|
*
|
|
* This class inherits from LayoutNetwork.
|
|
* @extends LayoutNetwork
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class TreeNetwork extends LayoutNetwork {
|
|
constructor(layout: TreeLayout);
|
|
}
|
|
/**
|
|
* This holds TreeLayout-specific information about Nodes.
|
|
*
|
|
* This class inherits from LayoutVertex.
|
|
* @extends LayoutVertex
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class TreeVertex extends LayoutVertex {
|
|
constructor(network: TreeNetwork);
|
|
/**
|
|
* Copy inherited properties from another TreeVertex to this one.
|
|
* @expose
|
|
* @param {TreeVertex} copy
|
|
*/
|
|
copyInheritedPropertiesFrom(copy: TreeVertex): void;
|
|
/**
|
|
* Gets or sets whether this node has been initialized as part of TreeLayout#doLayout when building the tree structures.
|
|
*
|
|
* The default value is false.
|
|
*/
|
|
initialized: boolean;
|
|
/**
|
|
* Gets or sets the logical parent for this node.
|
|
*
|
|
* The default value is null.
|
|
*
|
|
* This structural property is computed in TreeLayout#doLayout when building the tree structures.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
parent: TreeVertex;
|
|
/**
|
|
* Gets or sets the logical children for this node.
|
|
*
|
|
* The default value is an empty array.
|
|
*
|
|
* This structural property is computed in TreeLayout#doLayout when building the tree structures.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
children: Array<TreeVertex>;
|
|
/**
|
|
* Gets or sets the number of single-parent ancestors this node has.
|
|
*
|
|
* This could also be interpreted as which layer this node is in.
|
|
* A root node will have a value of zero.
|
|
*
|
|
* This informational property is computed in TreeLayout#doLayout when building the tree structures.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
level: number;
|
|
/**
|
|
* Gets or sets the number of descendants this node has.
|
|
*
|
|
* For a leaf node, this will be zero.
|
|
*
|
|
* This informational property is computed as part of the TreeLayout#initializeTreeVertexValues pass.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
descendantCount: number;
|
|
/**
|
|
* Gets or sets the maximum number of children of any descendant of this node.
|
|
*
|
|
* For a leaf node, this will be zero.
|
|
*
|
|
* This informational property is computed as part of the TreeLayout#initializeTreeVertexValues pass.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
maxChildrenCount: number;
|
|
/**
|
|
* Gets or sets the maximum depth of the subtrees below this node.
|
|
*
|
|
* For a leaf node, this will be zero.
|
|
*
|
|
* This informational property is computed as part of the TreeLayout#initializeTreeVertexValues pass.
|
|
* You should probably not be setting this value.
|
|
*/
|
|
maxGenerationCount: number;
|
|
/**
|
|
* Gets or sets an array of Nodes that will be positioned near this node.
|
|
*
|
|
* The default value is null.
|
|
*
|
|
* These objects should not have their own TreeVertexes to be laid out.
|
|
* Typically these will be Nodes whose Category is "Comment".
|
|
* This array should be allocated and initialized in TreeLayout#addComments.
|
|
*/
|
|
comments: Array<Node>;
|
|
/**
|
|
* Gets or sets whether and in what order the children should be sorted.
|
|
*
|
|
* The default value is TreeLayout.SortingForwards.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
sorting: EnumValue;
|
|
/**
|
|
* Gets or sets how the children should be sorted.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
comparer: ((a: TreeVertex, b: TreeVertex) => number);
|
|
/**
|
|
* Gets or sets the absolute angle at which this subtree should grow from this vertex.
|
|
*
|
|
* The default value is zero, meaning that general tree growth should proceed rightwards along the X axis.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* By default this is the same as the Angle of the parent TreeVertex.
|
|
* However, after the initial propagation of property values, perhaps in
|
|
* an override of TreeLayout#assignTreeVertexValues,
|
|
* you could just set this property to specify the angle at which this node grows its subtrees.
|
|
*/
|
|
angle: number;
|
|
/**
|
|
* Gets or sets how this parent node should be aligned relative to its children.
|
|
*
|
|
* The default value is TreeLayout.AlignmentCenterChildren.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
alignment: EnumValue;
|
|
/**
|
|
* Gets or sets the distance the first child should be indented.
|
|
*
|
|
* The default value is zero. The value should be non-negative.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* This property is only sensible when the #alignment is
|
|
* TreeLayout.AlignmentStart or TreeLayout.AlignmentEnd.
|
|
*/
|
|
nodeIndent: number;
|
|
/**
|
|
* Gets or sets whether the first child should be indented past the parent node's breadth.
|
|
*
|
|
* The default value is 0.0 -- the only start or end spacing is provided by #nodeIndent.
|
|
* Values must range from 0.0 to 1.0, where 1.0 means the full breadth of this node.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* This property is only sensible when the #alignment is
|
|
* TreeLayout.AlignmentStart or TreeLayout.AlignmentEnd.
|
|
*/
|
|
nodeIndentPastParent: number;
|
|
/**
|
|
* Gets or sets the distance between child nodes.
|
|
*
|
|
* The default value is 20.
|
|
*
|
|
* A negative value will cause sibling nodes to overlap.
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
nodeSpacing: number;
|
|
/**
|
|
* Gets or sets the distance between this node and its children.
|
|
*
|
|
* The default value is 50.
|
|
*
|
|
* Negative values may cause children to overlap with the parent.
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
layerSpacing: number;
|
|
/**
|
|
* Gets or sets the fraction of this node's depth that may overlap with the children's layer.
|
|
*
|
|
* The default value is 0.0 -- there is overlap only if #layerSpacing is negative.
|
|
* Values must range from 0.0 to 1.0, where 1.0 means the full depth of this node.
|
|
*
|
|
* When this value is greater than 0.0, there might not be overlap if #layerSpacing
|
|
* is larger than the depth of this node times this fraction.
|
|
* Even when this value is 0.0, there may be overlap when #layerSpacing is negative.
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
layerSpacingParentOverlap: number;
|
|
/**
|
|
* Gets or sets how the children of this node should be packed together.
|
|
*
|
|
* The default value is TreeLayout.CompactionBlock.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
compaction: EnumValue;
|
|
/**
|
|
* Gets or sets how broad a node and its descendants should be.
|
|
*
|
|
* By default this is zero. A value of zero imposes no limit;
|
|
* a positive value will specify a limit for the total width of this subtree.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
breadthLimit: number;
|
|
/**
|
|
* Gets or sets the distance between rows within one layer, all sharing the same parent.
|
|
*
|
|
* The default value is 25.
|
|
*
|
|
* Negative values may cause nodes to overlap.
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
rowSpacing: number;
|
|
/**
|
|
* Gets or sets the distance the first child of each row should be indented.
|
|
*
|
|
* The default value is 10. The value should be non-negative.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* This property is only used when the #breadthLimit is positive,
|
|
* and some initial space needs to be reserved in each row of nodes for the links
|
|
* that are routed around those rows.
|
|
*/
|
|
rowIndent: number;
|
|
/**
|
|
* Gets or sets the space to leave between consecutive comments.
|
|
*
|
|
* The default value is 10.
|
|
*
|
|
* Negative values may cause comments to overlap.
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
commentSpacing: number;
|
|
/**
|
|
* Gets or sets the space to leave between the node and the comments.
|
|
*
|
|
* The default value is 20.
|
|
*
|
|
* Negative values may cause comments to overlap with the node.
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
*/
|
|
commentMargin: number;
|
|
/**
|
|
* Gets or sets whether the TreeLayout should set the FromSpot for this parent node port.
|
|
*
|
|
* The default value is true -- this may modify the spot of the port of this node, the parent,
|
|
* if the node has only a single port.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* The spot used depends on the value of #portSpot.
|
|
*/
|
|
setsPortSpot: boolean;
|
|
/**
|
|
* Gets or sets the spot that this node's port gets as its FromSpot,
|
|
* if #setsPortSpot is true and the node has only a single port.
|
|
*
|
|
* The default value is Spot.Default.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* A value of Spot.Default will cause the TreeLayout
|
|
* to assign a FromSpot based on the parent node's TreeVertex#angle.
|
|
* If the value is other than NoSpot, it is just assigned.
|
|
* When TreeLayout#path is TreeLayout.PathSource, the port's ToSpot is set instead of the FromSpot.
|
|
*/
|
|
portSpot: Spot;
|
|
/**
|
|
* Gets or sets whether the TreeLayout should set the ToSpot for each child node port.
|
|
*
|
|
* The default value is true -- this may modify the spots of the ports of the children nodes,
|
|
* if the node has only a single port.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* The spot used depends on the value of #childPortSpot.
|
|
*/
|
|
setsChildPortSpot: boolean;
|
|
/**
|
|
* Gets or sets the spot that children nodes' ports get as their ToSpot,
|
|
* if #setsChildPortSpot is true and the node has only a single port.
|
|
*
|
|
* The default value is Spot.Default.
|
|
*
|
|
* This inherited property is initialized in the TreeLayout#initializeTreeVertexValues pass.
|
|
* A value of Spot.Default will cause the TreeLayout
|
|
* to assign a ToSpot based on the parent node's TreeVertex#angle.
|
|
* If the value is other than NoSpot, it is just assigned.
|
|
* When TreeLayout#path is TreeLayout.PathSource, the port's FromSpot is set instead of the ToSpot.
|
|
*/
|
|
childPortSpot: Spot;
|
|
/**
|
|
* This read-only property returns the number of immediate children this node has.
|
|
*
|
|
* The default value is zero.
|
|
*/
|
|
readonly childrenCount: number;
|
|
/**
|
|
* Gets or sets the position of this node relative to its parent node.
|
|
*
|
|
* This informational property is computed during TreeLayout#doLayout.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
relativePosition: Point;
|
|
/**
|
|
* Gets or sets the size of the subtree (including all descendants) parented by this node.
|
|
*
|
|
* This informational property is computed during TreeLayout#doLayout.
|
|
* Of course if there are no children, this is just the same as Size.
|
|
* You should probably not be setting this property.
|
|
*/
|
|
subtreeSize: Size;
|
|
/**
|
|
* Gets or sets the offset of this parent node relative to its whole subtree.
|
|
*
|
|
* This informational property is computed during TreeLayout#doLayout.
|
|
* Of course if there are no children, this is just (0, 0).
|
|
* You should probably not be setting this property.
|
|
*/
|
|
subtreeOffset: Point;
|
|
}
|
|
/**
|
|
* This holds TreeLayout-specific information about Links.
|
|
*
|
|
* This class inherits from LayoutEdge.
|
|
* @extends LayoutEdge
|
|
* @unrestricted
|
|
* @category Layout
|
|
* @unindexed
|
|
*/
|
|
export class TreeEdge extends LayoutEdge {
|
|
constructor(network: TreeNetwork);
|
|
/**
|
|
* Commits the position of the Link and routes it.
|
|
*/
|
|
commit(): void;
|
|
/**
|
|
* Gets or sets a Point, relative to the parent node,
|
|
* that may be useful in routing this link.
|
|
*/
|
|
relativePoint: Point;
|
|
}
|
|
|
|
|