Picture source always binding

GoJS
1

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);
                })
            )
        );
2

Are you concerned about the overhead of loading the file and modifying it? If so, why don’t you cache the results?

There is still the overhead of repeated Binding evaluations when the source property is the empty string, but you wouldn’t have to create the customized SVG more than once per combination of file name and color. And whenever one sets the Picture.source property to the same string value that it already has, it’s a no-op, so there’s no overhead in GoJS.

3

Untitled
Untitled.png1779×764 71.1 KB

change the currentColor and strokeColor values ​​of svg from the color palette.

How values ​​can be dynamically cached?

Does this svg structure affect performance?
Code example above

4

You have to implement the cache yourself. Just keep a Map mapping the concatenation of the file name and the color to the SVG string. Have the Binding converter look it up in the Map first and return it if it’s there, or else do what you are doing now and put the result in the Map before returning the result.