2022-09-18 15:11:10 +02:00
|
|
|
//////////////////////////////////////////////
|
|
|
|
// CONSTRUCTOR //
|
|
|
|
//////////////////////////////////////////////
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Constructor for Attributes
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @return {Attributes} this - The Attributes instance
|
|
|
|
*/
|
2022-08-28 02:14:39 +02:00
|
|
|
export function Attributes() {
|
2019-08-03 15:03:33 +02:00
|
|
|
this.list = {}
|
2022-09-18 15:11:10 +02:00
|
|
|
|
|
|
|
return this
|
2018-07-23 20:14:32 +02:00
|
|
|
}
|
2018-07-21 18:53:03 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
//////////////////////////////////////////////
|
|
|
|
// PUBLIC METHODS //
|
|
|
|
//////////////////////////////////////////////
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Add an attribute
|
|
|
|
*
|
|
|
|
* @param {string} name - Name of the attribute to add
|
|
|
|
* @param {string} value - Value of the attribute to add
|
|
|
|
* @return {Attributes} this - The Attributes instance
|
|
|
|
*/
|
2021-01-31 09:22:15 +01:00
|
|
|
Attributes.prototype.add = function (name, value) {
|
2019-08-03 15:03:33 +02:00
|
|
|
if (typeof this.list[name] === 'undefined') {
|
|
|
|
this.list[name] = []
|
2018-07-23 20:14:32 +02:00
|
|
|
}
|
2019-08-03 15:03:33 +02:00
|
|
|
this.list[name].push(value)
|
2018-07-14 16:04:39 +00:00
|
|
|
|
2019-08-03 15:03:33 +02:00
|
|
|
return this
|
|
|
|
}
|
2018-07-23 20:14:32 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
2023-04-20 05:43:05 +00:00
|
|
|
* Return a props object for attributes with a given prefix (typically used for data-text)
|
2022-09-18 15:11:10 +02:00
|
|
|
*
|
|
|
|
* @param {string} prefix - The prefix to filter attributes on
|
|
|
|
* @return {object} props - The attributes as props
|
|
|
|
*/
|
|
|
|
Attributes.prototype.asPropsIfPrefixIs = function (prefix = '') {
|
|
|
|
let props = {}
|
|
|
|
let prefixLen = prefix.length
|
|
|
|
for (let key in this.list) {
|
|
|
|
if (key.substr(0, prefixLen) === prefix) {
|
|
|
|
let propKey = key.substr(prefixLen)
|
|
|
|
if (propKey === 'class') propKey = 'className'
|
|
|
|
props[propKey] = this.get(key)
|
|
|
|
}
|
|
|
|
}
|
2021-11-21 17:18:10 +01:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
return props
|
2021-11-21 17:18:10 +01:00
|
|
|
}
|
|
|
|
|
feat(core): Added Pattern.getLogs() and updated Pattern.getRenderProps()
The data returned by `Pattern.getRenderProps()` was not serializable as
we were returning `this` all over the place, thereby including marcors,
log methods, cyclic object references, and so on.
This commit changes that by implementing a `.asRenderProp()` method on
all of the various objects (stack, part, path, point, snippet,
attributes, svg) and only including data that can be serialized.
In addition, we no longer include the logs in the renderProps because
they are not related to rendering the pattern.
Instead, the new method `Pattern.getLogs()` gives you the logs.
2023-06-01 16:45:13 +02:00
|
|
|
/**
|
|
|
|
* Returns attributes as an object suitable for inclusion in renderprops
|
|
|
|
*
|
|
|
|
* @return {object} attributes - A plain object representing the attributes
|
|
|
|
*/
|
|
|
|
Attributes.prototype.asRenderProps = function () {
|
|
|
|
return {
|
|
|
|
list: this.list,
|
|
|
|
forSvg: this.render(),
|
|
|
|
forCss: this.renderAsCss(),
|
|
|
|
circle: this.getAsArray('data-circle'),
|
|
|
|
circleProps: this.asPropsIfPrefixIs('data-circle-'),
|
|
|
|
text: this.getAsArray('data-text'),
|
|
|
|
textProps: this.asPropsIfPrefixIs('data-text-'),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Return a deep copy of this
|
|
|
|
*
|
|
|
|
* @return {object} this - The Attributes instance
|
|
|
|
*/
|
|
|
|
Attributes.prototype.clone = function () {
|
|
|
|
let clone = new Attributes()
|
|
|
|
clone.list = JSON.parse(JSON.stringify(this.list))
|
2018-08-16 11:53:32 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
return clone
|
2019-08-03 15:03:33 +02:00
|
|
|
}
|
2018-08-16 11:53:32 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Retrieve an attribute
|
|
|
|
*
|
|
|
|
* @param {string} name - Name of the attribute to get
|
|
|
|
* @return value - The value under name
|
|
|
|
*/
|
2021-01-31 09:22:15 +01:00
|
|
|
Attributes.prototype.get = function (name) {
|
2019-08-03 15:03:33 +02:00
|
|
|
if (typeof this.list[name] === 'undefined') return false
|
|
|
|
else return this.list[name].join(' ')
|
|
|
|
}
|
2018-07-23 20:14:32 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Retrieve an attribute as array
|
|
|
|
*
|
|
|
|
* @param {string} name - Name of the attribute to set
|
|
|
|
* @return {object} this - The Attributes instance
|
|
|
|
*/
|
2021-01-31 09:22:15 +01:00
|
|
|
Attributes.prototype.getAsArray = function (name) {
|
2019-08-03 15:03:33 +02:00
|
|
|
if (typeof this.list[name] === 'undefined') return false
|
|
|
|
else return this.list[name]
|
|
|
|
}
|
2018-08-28 08:53:32 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Remove an attribute
|
|
|
|
*
|
|
|
|
* @param {string} name - Name of the attribute to set
|
|
|
|
* @return {object} this - The Attributes instance
|
|
|
|
*/
|
|
|
|
Attributes.prototype.remove = function (name) {
|
|
|
|
delete this.list[name]
|
|
|
|
|
|
|
|
return this
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Return SVG code for attributes
|
|
|
|
*
|
|
|
|
* @return {string} svg - The SVG code
|
|
|
|
*/
|
2021-01-31 09:22:15 +01:00
|
|
|
Attributes.prototype.render = function () {
|
2019-08-03 15:03:33 +02:00
|
|
|
let svg = ''
|
2018-07-23 20:14:32 +02:00
|
|
|
for (let key in this.list) {
|
2019-08-03 15:03:33 +02:00
|
|
|
svg += ` ${key}="${this.list[key].join(' ')}"`
|
2018-07-23 20:14:32 +02:00
|
|
|
}
|
2018-07-21 18:53:03 +02:00
|
|
|
|
2019-08-03 15:03:33 +02:00
|
|
|
return svg
|
|
|
|
}
|
2018-07-23 20:14:32 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Return CSS code for attributes
|
|
|
|
*
|
|
|
|
* @return {string} css - The CSS code
|
|
|
|
*/
|
2021-01-31 09:22:15 +01:00
|
|
|
Attributes.prototype.renderAsCss = function () {
|
2019-08-03 15:03:33 +02:00
|
|
|
let css = ''
|
2018-09-06 12:03:18 +02:00
|
|
|
for (let key in this.list) {
|
2019-08-03 15:03:33 +02:00
|
|
|
css += ` ${key}:${this.list[key].join(' ')};`
|
2018-09-06 12:03:18 +02:00
|
|
|
}
|
|
|
|
|
2019-08-03 15:03:33 +02:00
|
|
|
return css
|
|
|
|
}
|
2018-09-06 12:03:18 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Return SVG code for attributes with a fiven prefix (typically used for data-text)
|
|
|
|
*
|
|
|
|
* @param {string} prefix - The prefix to filter attributes on
|
|
|
|
* @return {string} svg - The SVG code
|
|
|
|
*/
|
2021-01-31 09:22:15 +01:00
|
|
|
Attributes.prototype.renderIfPrefixIs = function (prefix = '') {
|
2019-08-03 15:03:33 +02:00
|
|
|
let svg = ''
|
|
|
|
let prefixLen = prefix.length
|
2018-07-23 20:14:32 +02:00
|
|
|
for (let key in this.list) {
|
|
|
|
if (key.substr(0, prefixLen) === prefix) {
|
2019-08-03 15:03:33 +02:00
|
|
|
svg += ` ${key.substr(prefixLen)}="${this.list[key].join(' ')}"`
|
2018-07-23 20:14:32 +02:00
|
|
|
}
|
|
|
|
}
|
2018-07-23 17:35:06 +00:00
|
|
|
|
2019-08-03 15:03:33 +02:00
|
|
|
return svg
|
|
|
|
}
|
2018-07-23 11:12:06 +00:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Set an attribute, overwriting existing value
|
|
|
|
*
|
|
|
|
* @param {string} name - Name of the attribute to set
|
|
|
|
* @param {string} value - Value of the attribute to set
|
|
|
|
* @return {Attributes} this - The Attributes instance
|
|
|
|
*/
|
|
|
|
Attributes.prototype.set = function (name, value) {
|
|
|
|
this.list[name] = [value]
|
2019-05-05 17:06:22 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
return this
|
2019-08-03 15:03:33 +02:00
|
|
|
}
|
2019-05-05 17:06:22 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
/**
|
|
|
|
* Sets an attribute, but only if it's not currently set
|
|
|
|
*
|
|
|
|
* @param {string} name - Name of the attribute to set
|
|
|
|
* @param {string} value - Value of the attribute to set
|
|
|
|
* @return {Attributes} this - The Attributes instance
|
|
|
|
*/
|
|
|
|
Attributes.prototype.setIfUnset = function (name, value) {
|
|
|
|
if (typeof this.list[name] === 'undefined') this.list[name] = [value]
|
2018-08-03 14:20:28 +02:00
|
|
|
|
2022-09-18 15:11:10 +02:00
|
|
|
return this
|
2019-08-03 15:03:33 +02:00
|
|
|
}
|