UI: Improve SCADA symbol editor function completions. Add initial help markdowns for SCADA symbol functions.

2 years ago · d58f5aca81
6 changed files with 165 additions and 9 deletions
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag-function-panel.component.ts
@ -101,13 +101,13 @@ export class ScadaSymbolMetadataTagFunctionPanelComponent implements OnInit, Aft
      this.tagFunctionArgs = ['ctx', 'element'];
      this.objectHighlightRules = scadaSymbolElementStateRenderHighlightRules;
      this.propertyHighlightRules = scadaSymbolElementStateRenderPropertiesHighlightRules;
-      this.tagFunctionHelpId = 'widget/lib/timeseries/cell_style_fn'; // TODO:
+      this.tagFunctionHelpId = 'scada/tag_state_render_fn';
    } else if (this.tagFunctionType === 'clickAction') {
      this.panelTitle = 'scada.tag.on-click-action';
      this.tagFunctionArgs = ['ctx', 'element', 'event'];
      this.objectHighlightRules = scadaSymbolClickActionHighlightRules;
      this.propertyHighlightRules = scadaSymbolClickActionPropertiesHighlightRules;
-      this.tagFunctionHelpId = 'widget/lib/timeseries/cell_style_fn';  // TODO:
+      this.tagFunctionHelpId = 'scada/tag_click_action_fn';
    }
  }

--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.html
@ -83,7 +83,7 @@
                          [objectHighlightRules]="scadaSymbolGeneralStateRenderHighlightRules"
                          [propertyHighlightRules]="scadaSymbolGeneralStateRenderPropertiesHighlightRules"
                          [functionArgs]="['ctx', 'svg']"
-                          helpId="widget/lib/timeseries/cell_style_fn">
+                          helpId="scada/symbol_state_render_fn">
              </tb-js-func>
            </ng-template>
          </mat-expansion-panel>
--- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts
+++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts
@ -1167,37 +1167,110 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags
            description: 'Set text to element(s). Only applicable for elements of type ' +
              '<a href="https://svgjs.dev/docs/3.2/shape-elements/#svg-text">SVG.Text</a> or ' +
              '<a href="https://svgjs.dev/docs/3.2/shape-elements/#svg-tspan">SVG.Tspan</a>.',
-            args: []
+            args: [
+              {
+                name: 'element',
+                description: 'SVG element or an array of SVG elements',
+                type: 'Element | Array&lt;Element&gt;'
+              },
+              {
+                name: 'text',
+                description: 'Text to be set',
+                type: 'string'
+              }
+            ]
          },
          font: {
            meta: 'function',
            description: 'Set element(s) text font and color. Only applicable for elements of type ' +
              '<a href="https://svgjs.dev/docs/3.2/shape-elements/#svg-text">SVG.Text</a> or ' +
              '<a href="https://svgjs.dev/docs/3.2/shape-elements/#svg-tspan">SVG.Tspan</a>.',
-            args: []
+            args: [
+              {
+                name: 'element',
+                description: 'SVG element or an array of SVG elements',
+                type: 'Element | Array&lt;Element&gt;'
+              },
+              {
+                name: 'font',
+                description: 'Font settings object used to apply text element font',
+                type: 'Font'
+              },
+              {
+                name: 'color',
+                description: 'Color string used to apply text color of the element',
+                type: 'string'
+              }
+            ]
          },
          disable: {
            meta: 'function',
            description: 'Disables element(s). Disabled element doesn\'t accept any user interaction. ' +
              'For ex. if disabled element has click action, no click action will be performed on user click.',
-            args: []
+            args: [
+              {
+                name: 'element',
+                description: 'SVG element or an array of SVG elements',
+                type: 'Element | Array&lt;Element&gt;'
+              }
+            ]
          },
          enable: {
            meta: 'function',
            description: 'Enables disabled element(s). Enabled element accepts user interaction. ' +
              'For ex. if element has click action, click action will be performed on user click.',
-            args: []
+            args: [
+              {
+                name: 'element',
+                description: 'SVG element or an array of SVG elements',
+                type: 'Element | Array&lt;Element&gt;'
+              }
+            ]
          },
          callAction: {
            meta: 'function',
            description: 'Invokes action specified by behavior of type <b>"Action"</b> found by <b>behaviorId</b>.',
-            args: []
+            args: [
+              {
+                name: 'event',
+                description: 'DOM event',
+                type: 'Event'
+              },
+              {
+                name: 'behaviorId',
+                description: 'Id of the <b>"Action"</b> behavior',
+                type: 'string'
+              },
+              {
+                name: 'value',
+                description: 'Optional value passed to behavior',
+                type: 'any',
+                optional: true
+              },
+              {
+                name: 'observer',
+                description: 'Optional observer callback',
+                type: 'Partial&lt;Observer&lt;void&gt;&gt;',
+                optional: true
+              }
+            ]
          },
          setValue: {
            meta: 'function',
            description: 'Updates value by <b>valueId</b>. See <code>ctx.values</code> for reference. ' +
              'Value update triggers all render functions.',
-            args: []
+            args: [
+              {
+                name: 'valueId',
+                description: 'Id of the value to be updated',
+                type: 'string'
+              },
+              {
+                name: 'value',
+                description: 'New value to be set',
+                type: 'any'
+              }
+            ]
          }
        }
      },
--- a/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
@ -0,0 +1,27 @@
+#### Symbol state render function
+
+<div class="divider"></div>
+<br/>
+
+*function (ctx, svg): void*
+
+A JavaScript function used to render SCADA symbol state.
+
+**Parameters:**
+
+<ul>
+  <li><b>ctx:</b> <code>ScadaSymbolContext</code> - Context of the SCADA symbol.
+  </li>
+  <li><b>svg:</b> <code><a href="https://svgjs.dev/docs/3.2/container-elements/#svg-svg">SVG.Svg</a></code> - A root svg node. Instance of <a href="https://svgjs.dev/docs/3.2/container-elements/#svg-svg">SVG.Svg</a>.
+  </li>
+</ul>
+
+<div class="divider"></div>
+
+##### Examples
+
+<br>
+
+TODO
+
+
--- a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
@ -0,0 +1,29 @@
+#### Symbol tag click action function
+
+<div class="divider"></div>
+<br/>
+
+*function (ctx, element, event): void*
+
+A JavaScript function invoked when user clicks on SVG element with specific tag.
+
+**Parameters:**
+
+<ul>
+  <li><b>ctx:</b> <code>ScadaSymbolContext</code> - Context of the SCADA symbol.
+  </li>
+  <li><b>element:</b> <code>Element</code> - SVG element.<br>
+        See <a href="https://svgjs.dev/docs/3.2/manipulating/">Manipulating</a> section to manipulate the element.<br>
+        See <a href="https://svgjs.dev/docs/3.2/animating/">Animating</a> section to animate the element.
+  </li>
+  <li><b>event:</b> <code>Event</code> - DOM event.
+  </li>
+</ul>
+
+<div class="divider"></div>
+
+##### Examples
+
+<br>
+
+TODO
--- a/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
@ -0,0 +1,27 @@
+#### Symbol tag state render function
+
+<div class="divider"></div>
+<br/>
+
+*function (ctx, element): void*
+
+A JavaScript function used to render SCADA symbol element with specific tag.
+
+**Parameters:**
+
+<ul>
+  <li><b>ctx:</b> <code>ScadaSymbolContext</code> - Context of the SCADA symbol.
+  </li>
+  <li><b>element:</b> <code>Element</code> - SVG element.<br>
+        See <a href="https://svgjs.dev/docs/3.2/manipulating/">Manipulating</a> section to manipulate the element.<br>
+        See <a href="https://svgjs.dev/docs/3.2/animating/">Animating</a> section to animate the element.
+  </li>
+</ul>
+
+<div class="divider"></div>
+
+##### Examples
+
+<br>
+
+TODO