@record-evolution/widget-scada 1.0.2

package/src/widget-scada.ts

@@ -0,0 +1,269 @@
+import { html, css, LitElement, PropertyValues, nothing } from 'lit'
+import { customElement, property, state, query } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { InputData } from './definition-schema.js'
+import {
+    SymbolMetadata,
+    ScadaContext,
+    ScadaCallbacks,
+    buildContext,
+    renderAllTags,
+    attachActions,
+    getSymbolDefaults
+} from './scada-runtime.js'
+
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
+
+@customElement('widget-scada-versionplaceholder')
+export class WidgetScada extends LitElement {
+    @property({ type: Object })
+    inputData?: InputData
+
+    @property({ type: Object })
+    theme?: Theme
+
+    @state() private svgContent: string = ''
+    @state() private metadata?: SymbolMetadata
+    @state() private themeBgColor?: string
+
+    @query('.svg-container')
+    svgContainer?: HTMLDivElement
+
+    version: string = 'versionplaceholder'
+    private currentSymbol?: string
+    private resizeObserver: ResizeObserver
+    private svgModules = new Map<string, { svg: string; metadata: SymbolMetadata }>()
+    private actionCleanups: Array<() => void> = []
+    private ctx?: ScadaContext
+
+    constructor() {
+        super()
+        this.resizeObserver = new ResizeObserver(() => this.requestUpdate())
+        this.resizeObserver.observe(this)
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        this.resizeObserver?.disconnect()
+        this.cleanupActions()
+    }
+
+    private cleanupActions() {
+        for (const cleanup of this.actionCleanups) cleanup()
+        this.actionCleanups = []
+    }
+
+    /**
+     * Returns the default property values from the currently loaded SVG metadata.
+     */
+    getDefaults(): Record<string, any> | undefined {
+        if (!this.metadata) return undefined
+        return getSymbolDefaults(this.metadata)
+    }
+
+    private dispatchDefaults() {
+        if (!this.metadata) return
+        this.dispatchEvent(
+            new CustomEvent('widget-defaults', {
+                detail: getSymbolDefaults(this.metadata),
+                bubbles: true,
+                composed: true
+            })
+        )
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+        if (changedProperties.has('inputData')) {
+            const newSymbol = this.inputData?.symbol
+            if (newSymbol && newSymbol !== this.currentSymbol) {
+                this.currentSymbol = newSymbol
+                this.loadSymbol(newSymbol)
+            } else if (newSymbol === this.currentSymbol) {
+                this.applyState()
+            }
+        }
+        if (changedProperties.has('theme')) {
+            this.registerTheme()
+        }
+    }
+
+    private registerTheme() {
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
+        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+    }
+
+    private getSymbolUrl(symbolId: string): string {
+        // Build URL at runtime without triggering Vite's static asset analysis
+        // import.meta.url points to the module's own URL
+        const base = import.meta.url
+        const segments = base.split('/')
+        segments.pop() // remove current filename
+        segments.pop() // go up from src/
+        return segments.join('/') + '/scada_symbols/' + symbolId + '.svg'
+    }
+
+    private async loadSymbol(symbolId: string) {
+        const cached = this.svgModules.get(symbolId)
+        if (cached) {
+            this.svgContent = cached.svg
+            this.metadata = cached.metadata
+            await this.updateComplete
+            this.applyState()
+            this.dispatchDefaults()
+            return
+        }
+
+        try {
+            const url = this.getSymbolUrl(symbolId)
+            const resp = await fetch(url)
+            if (!resp.ok) {
+                this.svgContent = ''
+                this.metadata = undefined
+                return
+            }
+            const text = await resp.text()
+
+            const metaMatch = text.match(/<tb:metadata[^>]*><!\[CDATA\[([\s\S]*?)\]\]>/)
+            let metadata: SymbolMetadata | undefined
+            if (metaMatch) {
+                try {
+                    metadata = JSON.parse(metaMatch[1])
+                } catch {
+                    /* skip */
+                }
+            }
+
+            const cleanSvg = text.replace(/<tb:metadata[\s\S]*?<\/tb:metadata>/, '')
+            this.svgModules.set(symbolId, { svg: cleanSvg, metadata: metadata! })
+            this.svgContent = cleanSvg
+            this.metadata = metadata
+            await this.updateComplete
+            this.applyState()
+        } catch {
+            this.svgContent = ''
+            this.metadata = undefined
+        }
+        this.dispatchDefaults()
+    }
+
+    private applyState() {
+        if (!this.metadata || !this.inputData || !this.svgContainer) return
+
+        requestAnimationFrame(() => {
+            const svgEl = this.svgContainer?.querySelector('svg')
+            if (!svgEl) return
+
+            // Build values from bindings
+            const values: Record<string, any> = {}
+            const bindings = (this.inputData as any)?.bindings ?? {}
+            for (const [key, val] of Object.entries(bindings)) {
+                values[key] = val
+            }
+
+            // Build properties: symbol defaults → top-level props → flattened styling
+            const data = this.inputData as any
+            const symbolDefaults = getSymbolDefaults(this.metadata!)
+            const { styling: defaultStyling, bindings: _defaultBindings, ...defaultProps } = symbolDefaults
+            const properties: Record<string, any> = { ...defaultProps, ...data }
+            delete properties.symbol
+            delete properties.bindings
+            delete properties.actions
+            delete properties.styling
+            Object.assign(properties, defaultStyling ?? {}, data?.styling ?? {})
+
+            // Action callbacks
+            const callbacks: ScadaCallbacks = {
+                onAction: (event, actionName, args, _opts) => {
+                    this.dispatchEvent(
+                        new CustomEvent('action-submit', {
+                            detail: {
+                                actionName,
+                                args,
+                                actionApp: data?.actions?.actionApp,
+                                actionDevice: data?.actions?.actionDevice,
+                                actionTopic: data?.actions?.actionTopic
+                            },
+                            bubbles: false,
+                            composed: false
+                        })
+                    )
+                },
+                onSetValue: (key, value) => {
+                    // Update the binding value and re-render
+                    if (this.ctx) this.ctx.values[key] = value
+                    this.applyState()
+                }
+            }
+
+            // Build context and execute all stateRenderFunctions
+            this.ctx = buildContext(svgEl, this.metadata!, values, properties, callbacks)
+
+            // Cleanup old action handlers and attach new ones
+            this.cleanupActions()
+            renderAllTags(svgEl, this.metadata!, this.ctx)
+            this.actionCleanups = attachActions(svgEl, this.metadata!, this.ctx)
+        })
+    }
+
+    static styles = css`
+        :host {
+            display: block;
+            box-sizing: border-box;
+            position: relative;
+            margin: auto;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+
+        .wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .svg-container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+        }
+
+        .svg-container svg {
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+        }
+
+        .no-symbol {
+            font-size: 16px;
+            color: #999;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            font-family: sans-serif;
+        }
+    `
+
+    render() {
+        return html`
+            <div class="wrapper" style="background-color: ${this.themeBgColor ?? ''}">
+                ${this.svgContent
+                    ? html`<div class="svg-container">${unsafeSVG(this.svgContent)}</div>`
+                    : html`<div class="no-symbol">
+                          ${this.inputData?.symbol ? 'Loading...' : 'Select a SCADA symbol'}
+                      </div>`}
+            </div>
+        `
+    }
+}