diff --git a/packages/core/src/attributes.mjs b/packages/core/src/attributes.mjs index 1d17264a606..b40da87a802 100644 --- a/packages/core/src/attributes.mjs +++ b/packages/core/src/attributes.mjs @@ -60,15 +60,22 @@ Attributes.prototype.asPropsIfPrefixIs = function (prefix = '') { * @return {object} attributes - A plain object representing the attributes */ Attributes.prototype.asRenderProps = function () { - return { + const props = { 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-'), } + const circle = this.getAsArray('data-circle') + if (circle) { + props.circle = circle + props.circleProps = this.asPropsIfPrefixIs('data-circle-') + } + const text = this.getAsArray('data-text') + if (text) { + props.text = text + props.textProps = this.asPropsIfPrefixIs('data-text-') + } + + return props } /** diff --git a/packages/core/src/path.mjs b/packages/core/src/path.mjs index 937e06ae3c3..32d9bd1d873 100644 --- a/packages/core/src/path.mjs +++ b/packages/core/src/path.mjs @@ -111,6 +111,16 @@ Path.prototype.asPathstring = function () { return d } +// Quick helper to return a drawing op as renderProps +const opAsrenderProp = (op) => { + const props = { type: op.type } + for (const p of ['from', 'to', 'cp1', 'cp2']) { + if (op[p]) props[p] = op[p].asRenderProps() + } + + return props +} + /** * Returns a path as an object suitable for inclusion in renderprops * @@ -121,7 +131,7 @@ Path.prototype.asRenderProps = function () { attributes: this.attributes.asRenderProps(), hidden: this.hidden, name: this.name, - ops: this.ops, + ops: this.ops.map((op) => opAsrenderProp(op)), topLeft: this.topLeft, bottomRight: this.bottomRight, width: this.bottomRight.x - this.topLeft.x, diff --git a/packages/core/src/svg.mjs b/packages/core/src/svg.mjs index 712bcfb07e4..9831c92319b 100644 --- a/packages/core/src/svg.mjs +++ b/packages/core/src/svg.mjs @@ -50,7 +50,7 @@ Svg.prototype.asRenderProps = function () { layout: this.layout, body: this.body, style: this.style, - defs: this.defs, + defs: this.defs.asRenderProps(), } }