UI: Refactoring

This commit is contained in:
Artem Dzhereleiko 2024-09-25 16:01:33 +03:00
parent 677aaa386e
commit dd6b8c0c56
2 changed files with 14 additions and 8 deletions

View File

@ -12,9 +12,8 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
<ul> <ul>
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol. <li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol.
</li> </li>
<li><b>element:</b> <code>Element</code> - SVG element.<br> <li><b>element:</b> <code>Element</code> - <a href="https://svgjs.dev/docs/3.2/getting-started/" target="_blank">SVG.js</a> element.<br>
See <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">Manipulating</a> section to manipulate the element.<br> See the examples below to learn how to <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">manipulate</a> and <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation" target="_blank">animate</a> elements.<br>
See <a href="https://svgjs.dev/docs/3.2/animating/" target="_blank">Animating</a> section to animate the element.
</li> </li>
<li><b>event:</b> <code>Event</code> - DOM event. <li><b>event:</b> <code>Event</code> - DOM event.
</li> </li>
@ -26,15 +25,23 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
* Set new value action * Set new value action
*callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void*
*setValue: (valueId: string, value: any): void*
Avoid manually setting behavior values, as shown in the example, see <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#best-practices" target="_blank">best practice</a> for Device Interaction
```javascript ```javascript
var active = ctx.values.active; var active = ctx.values.active;
var action = active ? 'inactive' : 'active'; var action = active ? 'turnOn' : 'turnOff';
ctx.api.callAction(event, action, undefined, { ctx.api.callAction(event, action, active, {
next: () => { next: () => {
// To simplify debugging in preview mode
ctx.api.setValue('activate', !active); ctx.api.setValue('activate', !active);
}, },
error: () => { error: () => {
// To simplify debugging in preview mode
ctx.api.setValue('activate', active); ctx.api.setValue('activate', active);
} }
}); });

View File

@ -12,9 +12,8 @@ A JavaScript function used to render SCADA symbol element with specific tag.
<ul> <ul>
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol. <li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol.
</li> </li>
<li><b>element:</b> <code>Element</code> - SVG element.<br> <li><b>element:</b> <code>Element</code> - <a href="https://svgjs.dev/docs/3.2/getting-started/" target="_blank">SVG.js</a> element.<br>
See <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">Manipulating</a> section to manipulate the element.<br> See the examples below to learn how to <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">manipulate</a> and <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation" target="_blank">animate</a> elements.<br>
See <a href="https://svgjs.dev/docs/3.2/animating/" target="_blank">Animating</a> section to animate the element.
</li> </li>
</ul> </ul>