util
Functionsβ
assign()β
util.assign(destinationObject, [...sourceObjects])
Assigns own enumerable string keyed properties of source objects to the destination object. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.
| destinationObject | Object | The destination object |
|---|---|---|
| [sourceObjects] | Object[] | The source objects |
bindAll()β
util.bindAll(object, methodNames)
Binds methods of an object to the object itself, overwriting the existing method.
| object | Object | The object to bind and assign the bound methods to |
|---|---|---|
| methodNames | string|string[] | The object method names to bind |
breakText()β
util.breakText(text, size [, attrs, opt])
Break the provided text into lines so that it can fit into the bounding box defined by size.width and (optionally) size.height.
The function creates a temporary SVG <text> element and adds words to it one by one, measuring the element's actual rendered width and height at every step. If a word causes a line to overflow size.width, a newline character ('\n') is generated. If a newline causes the text to overflow size.height, the string is cut off.
The returned string is a (possibly truncated) copy of text with newline characters at appropriate locations.
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100 })
// 'lorem ipsum\ndolor sit amet\nconsectetur\nadipiscing elit'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 })
// 'lorem ipsum\ndolor sit amet'
The attrs parameter is an object with SVG attributes that should be set on the temporary SVG text element while it is being measured (such as 'font-weight', 'font-size', 'font-family', etc.). For example, an area of fixed size can obviously fit more words of font size 12px than it can fit words of font size 36px. If nothing can fit, an empty string is returned. (If an attrs object is not provided, the browser's default style is used.)
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 12 })
// 'lorem ipsum dolor\nsit amet consectetur\nadipiscing elit'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 16 })
// 'lorem ipsum\ndolor sit amet'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 36 })
// 'lorem'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 72 })
// ''
The method also accepts the following additional options:
opt.separator- a string or a regular expression which denotes how to split the text into words. Defaults to' 'opt.eol- a string representing the end-of-line symbol. Defaults to'\n'.opt.ellipsis- a boolean that specifies whether the ellipsis symbol ('β¦',U+2026 HORIZONTAL ELLIPSIS) should be displayed when the text overflows. Defaults tofalse. If you provide a string, that string will be used as the ellipsis symbol instead.opt.svgDocument- an SVG document to which the temporary SVG text element should be added. By default, an SVG document is created automatically for you.opt.hyphen- a string or regex representing the hyphen symbol. If required, the method tries to break long words at hyphens first.opt.maxLineCount- a number to limit the maximum number of lines.opt.preserveSpaces- preserve the text spaces (avoid all consecutive spaces being deleted and replaced by one space, and preserve a space at the beginning and the end of the text).
Examples of text with the ellipsis option specified:
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 12 }, { ellipsis: true })
// 'lorem ipsum dolor\nsit amet consectetur\nadipiscing elit'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 16 }, { ellipsis: true })
// 'lorem ipsum\ndolor sit ameβ¦'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 16 }, { ellipsis: '...!?' })
// 'lorem ipsum\ndolor sit a...!?'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 36 }, { ellipsis: true })
// 'loreβ¦'
joint.util.breakText('lorem ipsum dolor sit amet consectetur adipiscing elit', { width: 100, height: 50 }, { 'font-size': 36 }, { ellipsis: true })
// ''
If you need to wrap text inside a text attribute of an Element, you should use the textWrap attribute instead. It does not require you to provide explicit size measurements, and it automatically responds to element resizing.
camelCase()β
util.camelCase([string=''])
Converts string to camel case.
| [string=''] | string | The string to convert |
|---|
cancelFrame()β
util.cancelFrame(requestId)
Cancels an animation frame request identified by requestId previously scheduled through a call to joint.util.nextFrame.
clone()β
util.clone(value)
Creates a shallow clone of value.
| value | any | The value to clone |
|---|
cloneDeep()β
util.cloneDeep(value)
This method is like util.clone except that it recursively clones value.
| value | any | The value to recursively clone |
|---|
cloneCells()β
util.cloneCells(cells: dia.Cell[]): { [id: string]: dia.Cell }
Clone the provided cells (elements and links) and return an object mapping the original cell IDs to their corresponding clones.
Returning this object, instead of an array of clones, is particularly useful for identifying which original cell each clone corresponds to:
const cloneMap = util.cloneCells([cell1, cell2]);
cloneMap[cell1.id]; // clone of cell1
cloneMap[cell2.id]; // clone of cell2
This function not only clones the cells but also reconstructs all source/target and parent/embed references within the cloned cells.
For instance, in a graph A --- L ---> B, the source and target of the clone of L are updated to reference the clones of A and B, respectively:
// el1 --> link --> el2
const cloneMap = util.cloneCells([el1, link, el2]);
const el1Clone = cloneMap[el1.id];
const el2Clone = cloneMap[el2.id];
const linkClone = cloneMap[link.id];
// el1Clone --> linkClone --> el2Clone
linkClone.source().id === el1Clone.id; // true
linkClone.target().id === el2Clone.id; // true
dataUriToBlob()β
util.dataUriToBlob(dataUri)
Convert a Data URI string into a Blob object.
debounce()β
util.debounce(func, [wait=0], [options={}])
Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel method to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout. The func is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last func invocation.
| func | Function | The function to debounce |
|---|---|---|
| [wait=0] | number | The number of milliseconds to delay |
| [options=] | Object | The options object |
| [options.leading=false] | boolean | Specify invoking on the leading edge of the timeout |
| [options.maxWait] | number | The maximum time func is allowed to be delayed before it's invoked |
| [options.trailing=true] | boolean | Specify invoking on the trailing edge of the timeout |
deepMixin()β
util.deepMixin(destinationObject, [...sourceObjects])
(deprecated) An alias for util.assign, use it instead.
deepSupplement()β
util.deepSupplement(destinationObject [...sourceObjects])
(deprecated) An alias for util.defaultsDeep, use it instead.
defaults()β
util.defaults(destinationObject [...sourceObjects])
Assigns own and inherited enumerable string keyed properties of source objects to the destination object for all destination properties that resolve to undefined. Source objects are applied from left to right. Once a property is set, additional values of the same property are ignored.
| destinationObject | Object | The destination object |
|---|---|---|
| [sourceObjects] | Object[] | The source objects |
defaultsDeep()β
util.defaultsDeep(destinationObject [...sourceObjects])
This method is like util.defaults except that it recursively assigns default properties.
| destinationObject | Object | The destination object |
|---|---|---|
| [sourceObjects] | Object[] | The source objects |
difference()β
util.difference(array, [...values])
Creates an array of array values not included in the other given arrays using SameValueZero for equality comparisons. The order and references of result values are determined by the first array.
| array | any[] | The array to inspect |
|---|---|---|
| [values] | any[] | The values to exclude |
downloadBlob()β
util.downloadBlob(blob, fileName)
Download provided Blob object as a file with given fileName.
downloadDataUri()β
util.downloadDataUri(dataUri, fileName)
Download provided Data URI string as a file with given fileName.
flattenDeep()β
util.flattenDeep(array)
Recursively flattens array.
| array | any[] | The array to flatten |
|---|
flattenObject()β
util.flattenObject(object, delim, stop)
Flatten a nested object up until the stop function returns true. The stop function takes the value of the node currently traversed. delim is a delimiter for the combined keys in the resulting object. Example:
joint.util.flattenObject({
a: {
a1: 1,
a2: 2,
a3: {
a31: 5,
a32: {
a321: { a3211: 5 }
}
}
},
b: 6
}, '/', function(v) { return !!v.a321; });
/*
{
"a/a1": 1,
"a/a2": 2,
"a/a3/a31": 5,
"a/a3/a32": {
"a321": {
"a3211": 5
}
},
"b": 6
}
*/
forIn()β
util.forIn(object, [iteratee])
Iterates over elements of collection and invokes iteratee for each element. The iteratee is invoked with three arguments: (value, index|key, collection). Iteratee functions may exit iteration early by explicitly returning false.
| collection | any[]|Object | The collection to iterate over |
|---|---|---|
| [iteratee] | Function | The function invoked per iteration |