Picture source always binding

@ahmetgundogdu wrote:

I create my own objects with svg. I’m doing this using gojs picture

I’m bind to the source of the gojs picture.

but here the source is always bind

i think this will cause performance loss

i just want it to be called when picture source is change to color and border Color values ​​under node Config

Please check the svg and code I sent

Example of a svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" width="58" height="58" xml:space="preserve">
<g id="flw_x5F_and_x5F_Operator">
	<g>
		<path style="fill:strokeColor;" d="M24,47c-0.552,0-1-0.447-1-1s0.448-1,1-1c1.558,0,3-0.484,3-4v-8
			c0.075-1.146,0.601-2.902,1.961-3.999c-1.36-1.091-1.885-2.831-1.958-3.935L27,17c0-3.516-1.442-4-3-4c-0.552,0-1-0.448-1-1
			s0.448-1,1-1c3.271,0,5,2.075,5,6v8c0.021,0.243,0.311,3,3,3c0.553,0,1,0.448,1,1s-0.447,1-1,1c-2.689,0-2.979,2.757-3.002,3.071
			L29,41C29,44.925,27.271,47,24,47z"/>
	</g>
	<g>
		<path style="fill:currentColor;" d="M47,35c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414L50.586,29l-4.293-4.293
			c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l5,5c0.391,0.391,0.391,1.023,0,1.414l-5,5C47.512,34.902,47.256,35,47,35z
			"/>
	</g>
	<g>
		<path style="fill:currentColor;" d="M52,30H38c-0.553,0-1-0.448-1-1s0.447-1,1-1h14c0.553,0,1,0.448,1,1S52.553,30,52,30z"/>
	</g>
	<g>
		<path style="fill:currentColor;" d="M12,18c-0.263,0-0.518-0.104-0.707-0.293l-3-3c-0.391-0.391-0.391-1.023,0-1.414
			s1.023-0.391,1.414,0l2.063,2.063l4.356-7.841c0.268-0.481,0.876-0.657,1.36-0.388c0.482,0.268,0.657,0.877,0.388,1.36l-5,9
			c-0.152,0.274-0.425,0.461-0.735,0.504C12.092,17.997,12.046,18,12,18z"/>
	</g>
	<g>
		<path style="fill:currentColor;" d="M12,51c-0.263,0-0.518-0.104-0.707-0.293l-3-3c-0.391-0.391-0.391-1.023,0-1.414
			s1.023-0.391,1.414,0l2.063,2.063l4.356-7.841c0.268-0.482,0.876-0.659,1.36-0.389c0.482,0.269,0.657,0.877,0.388,1.359l-5,9
			c-0.152,0.274-0.425,0.462-0.735,0.505C12.092,50.997,12.046,51,12,51z"/>
	</g>
</g>
<g id="Layer_1">
</g>
</svg>

---

goMake(go.Panel, "Viewbox",
            {
                cursor: "move",
                background: "transparent",
                padding: 5
            },
            goMake(go.Picture, { desiredSize: new go.Size(58, 58) },
                new go.Binding("source", "", (sourceData, target) => {
                    let fileSvg = require('../assets/svg/' + sourceData.typeName + '.svg');
                    let color = target.part.data.nodeConfig.color;
                    let borderColor = target.part.data.nodeConfig.borderColor;

                    if (!color) {
                        color = (this.diagram.model.modelData as IFlowDiagram).configs.nodeConfig.color;
                    }
                    if (!color) {
                        color = this.props.config.nodeConfig.color;
                    }

                    if (!borderColor) {
                        borderColor = (this.diagram.model.modelData as IFlowDiagram).configs.nodeConfig.borderColor;
                    }
                    if (!borderColor) {
                        borderColor = this.props.config.nodeConfig.borderColor;
                    }

                    fileSvg = fileSvg.replace(new RegExp("fill:currentColor", 'g'), "fill: " + color).replace(new RegExp("fill:strokeColor", 'g'), "fill: " + borderColor);

                    return "data:image/svg+xml;base64," + btoa(fileSvg);
                })
            )
        );

Posts: 4

Participants: 2

Read full topic