@operato/scene-integration 8.0.0-beta.0 → 8.0.0-beta.2

package/src/scenario-run.ts

@@ -1,219 +0,0 @@
-import gql from 'graphql-tag'
-
-import { Component, ComponentNature, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import { client } from '@operato/graphql'
-
-import { scenarios } from './client-api'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'scenario-name',
-      name: 'scenarioName',
-      property: {
-        options: scenarios
-      }
-    },
-    {
-      type: 'data',
-      label: 'variables',
-      name: 'variables'
-    },
-    {
-      type: 'number',
-      label: 'repeat-interval',
-      name: 'interval',
-      placeholder: 'milli-seconds'
-    },
-    {
-      type: 'checkbox',
-      label: 'run-on-start',
-      name: 'runOnStart'
-    },
-    {
-      type: 'select',
-      label: 'mask-on-error',
-      name: 'maskOnError',
-      property: {
-        options: [
-          {
-            display: 'none',
-            value: ''
-          },
-          {
-            display: 'strong-blur',
-            value: 'blur(4px)'
-          },
-          {
-            display: 'weak-blur',
-            value: 'blur(2px)'
-          },
-          {
-            display: 'grayscale',
-            value: 'grayscale(1)'
-          }
-        ]
-      }
-    }
-  ],
-  'value-property': 'variables',
-  help: 'scene/component/scenario-run'
-}
-
-export default class ScenarioRun extends DataSource(RectPath(Shape)) {
-  static _image: HTMLImageElement
-
-  static get image() {
-    if (!ScenarioRun._image) {
-      ScenarioRun._image = new Image()
-      ScenarioRun._image.src = new URL('../icons/symbol-scenario-run.png', import.meta.url).href
-    }
-    return ScenarioRun._image
-  }
-
-  private _started: boolean = false
-  private _raf: number = 0
-  private _timeout: NodeJS.Timeout | null = null
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-    context.beginPath()
-    this.drawImage(context, ScenarioRun.image, left, top, width, height)
-  }
-
-  ready() {
-    super.ready()
-
-    if (this.app.isViewMode) {
-      if (this.state.runOnStart) {
-        this.started = true
-      }
-    }
-  }
-
-  dispose(): void {
-    this.stop()
-    super.dispose()
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  onchange(after: Properties) {
-    if ('variables' in after) {
-      this.stop()
-      this.start()
-    }
-  }
-
-  set started(started: boolean) {
-    this.setState('started')
-
-    if (started) {
-      this.start()
-    } else {
-      this.stop()
-    }
-  }
-
-  get started() {
-    return this.state.started
-  }
-
-  start() {
-    if (this._started) {
-      return
-    }
-
-    this._started = true
-
-    this._raf = requestAnimationFrame(() => this.requestData())
-  }
-
-  stop() {
-    if (!this._started) {
-      return
-    }
-
-    this._started = false
-
-    if (this._raf) {
-      cancelAnimationFrame(this._raf)
-      this._raf = 0
-    }
-    if (this._timeout) {
-      clearTimeout(this._timeout)
-      this._timeout = null
-    }
-  }
-
-  get variables() {
-    return this.state.variables
-  }
-
-  set variables(variables) {
-    this.setState('variables', variables)
-  }
-
-  async requestData() {
-    let { scenarioName, variables, maskOnError } = this.state
-    if (!scenarioName || !this.app.isViewMode) {
-      return
-    }
-
-    try {
-      variables = typeof variables == 'string' ? JSON.parse(variables) : variables
-    } catch (e) {
-      console.warn('runScenario mutation variable is not an object')
-    }
-
-    if (client) {
-      try {
-        var response = await client.query({
-          query: gql`
-            mutation ($scenarioName: String!, $variables: Object) {
-              runScenario(scenarioName: $scenarioName, variables: $variables) {
-                message
-                result
-              }
-            }
-          `,
-          variables: {
-            scenarioName: scenarioName,
-            variables
-          }
-        })
-
-        this.data = response?.data?.runScenario?.result
-        this.demask()
-      } catch (e: any) {
-        console.error(`calling runScenario mutation error: ${e?.message ?? e}`)
-        this.mask()
-      } finally {
-        if (this._started && this.state.interval > 0) {
-          this._timeout = setTimeout(() => this.requestData(), this.state.interval)
-        }
-      }
-    }
-  }
-
-  mask() {
-    const { maskOnError } = this.state
-    if (maskOnError) {
-      //@ts-ignore
-      this.root?.target_element?.style.filter = maskOnError
-    }
-  }
-
-  demask() {
-    //@ts-ignore
-    this.root?.target_element?.style.filter = 'none'
-  }
-}
-
-Component.register('scenario-run', ScenarioRun)

package/src/scenario-start.ts

@@ -1,102 +0,0 @@
-import gql from 'graphql-tag'
-
-import { Component, ComponentNature, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import { client } from '@operato/graphql'
-
-import { scenarios } from './client-api'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'instance-name',
-      name: 'instanceName'
-    },
-    {
-      type: 'select',
-      label: 'scenario-name',
-      name: 'scenarioName',
-      property: {
-        options: scenarios
-      }
-    },
-    {
-      type: 'data',
-      label: 'variables',
-      name: 'variables'
-    }
-  ],
-  'value-property': 'variables',
-  help: 'scene/component/scenario-start'
-}
-
-export default class ScenarioStart extends DataSource(RectPath(Shape)) {
-  static _image: HTMLImageElement
-
-  static get image() {
-    if (!ScenarioStart._image) {
-      ScenarioStart._image = new Image()
-      ScenarioStart._image.src = new URL('../icons/symbol-scenario-start.png', import.meta.url).href
-    }
-    return ScenarioStart._image
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-    context.beginPath()
-    this.drawImage(context, ScenarioStart.image, left, top, width, height)
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  async onchange(after: Properties) {
-    if ('variables' in after) {
-      this.requestData()
-    }
-  }
-
-  get variables() {
-    return this.state.variables
-  }
-
-  set variables(variables) {
-    this.setState('variables', variables)
-  }
-
-  async requestData() {
-    let { instanceName, scenarioName, variables } = this.state
-    if (!scenarioName || !this.app.isViewMode) return
-
-    try {
-      variables = typeof variables == 'string' ? JSON.parse(variables) : variables
-    } catch (e) {
-      console.error(e)
-    }
-
-    if (client) {
-      var response = await client.query({
-        query: gql`
-          mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {
-            startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {
-              state
-            }
-          }
-        `,
-        variables: {
-          instanceName: instanceName,
-          scenarioName: scenarioName,
-          variables
-        }
-      })
-
-      this.data = response?.data?.startScenario?.state
-    }
-  }
-}
-
-Component.register('scenario-start', ScenarioStart)

package/src/scenario-stop.ts

@@ -1,90 +0,0 @@
-import gql from 'graphql-tag'
-
-import { Component, ComponentNature, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import { client } from '@operato/graphql'
-
-import { scenarios } from './client-api'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'instance-name',
-      name: 'instanceName'
-    },
-    {
-      type: 'select',
-      label: 'scenario-name',
-      name: 'scenarioName',
-      property: {
-        options: scenarios
-      }
-    }
-  ],
-  'value-property': 'nothing',
-  help: 'scene/component/scenario-stop'
-}
-
-export default class ScenarioStop extends DataSource(RectPath(Shape)) {
-  static _image: HTMLImageElement
-
-  static get image() {
-    if (!ScenarioStop._image) {
-      ScenarioStop._image = new Image()
-      ScenarioStop._image.src = new URL('../icons/symbol-scenario-stop.png', import.meta.url).href
-    }
-    return ScenarioStop._image
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-    context.beginPath()
-    this.drawImage(context, ScenarioStop.image, left, top, width, height)
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  onchange(after: Properties) {
-    if ('nothing' in after) {
-      this.requestData()
-    }
-  }
-
-  get nothing() {
-    return this.state.nothing
-  }
-
-  set nothing(nothing) {
-    this.setState('nothing', nothing)
-  }
-
-  async requestData() {
-    let { instanceName, scenarioName } = this.state
-    instanceName = instanceName || scenarioName
-    if (!instanceName || !this.app.isViewMode) return
-
-    if (client) {
-      var response = await client.query({
-        query: gql`
-          mutation ($instanceName: String!) {
-            stopScenario(instanceName: $instanceName) {
-              state
-            }
-          }
-        `,
-        variables: {
-          instanceName: instanceName
-        }
-      })
-
-      this.data = response?.data?.stopScenario?.state
-    }
-  }
-}
-
-Component.register('scenario-stop', ScenarioStop)

package/src/templates/connection-control.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-connection-control.png', import.meta.url).href
-
-export default {
-  type: 'connection-control',
-  description: 'connection-control',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'connection-control',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/connection-state-subscription.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-connection-state-subscription.png', import.meta.url).href
-
-export default {
-  type: 'connection-state-subscription',
-  description: 'connection-state-subscription',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'connection-state-subscription',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/data-subscription.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-data-subscription.png', import.meta.url).href
-
-export default {
-  type: 'data-subscription',
-  description: 'data-subscription',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'data-subscription',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/index.ts

@@ -1,21 +0,0 @@
-import dataSubscription from './data-subscription'
-import scenarioControl from './scenario-control'
-import scenarioRun from './scenario-run'
-import scenarioStart from './scenario-start'
-import scenarioStop from './scenario-stop'
-import scenarioInstanceSubscription from './scenario-instance-subscription'
-import scenarioQueueSubscription from './scenario-queue-subscription'
-import connectionStateSubscription from './connection-state-subscription'
-import connectionControl from './connection-control'
-
-export default [
-  dataSubscription,
-  scenarioControl,
-  scenarioRun,
-  scenarioStart,
-  scenarioStop,
-  scenarioInstanceSubscription,
-  scenarioQueueSubscription,
-  connectionStateSubscription,
-  connectionControl
-]

package/src/templates/scenario-control.ts

@@ -1,18 +0,0 @@
-const icon = new URL('../../icons/icon-scenario-control.png', import.meta.url).href
-
-export default {
-  type: 'scenario-control',
-  description: 'scenario-control',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'scenario-control',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    controlType: '',
-    hidden: true
-  }
-}

package/src/templates/scenario-instance-subscription.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-scenario-queue-subscription.png', import.meta.url).href
-
-export default {
-  type: 'scenario-queue-subscription',
-  description: 'scenario-queue-subscription',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'scenario-queue-subscription',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/scenario-queue-subscription.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-scenario-instance-subscription.png', import.meta.url).href
-
-export default {
-  type: 'scenario-instance-subscription',
-  description: 'scenario-instance-subscription',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'scenario-instance-subscription',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/scenario-run.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-scenario-run.png', import.meta.url).href
-
-export default {
-  type: 'scenario-run',
-  description: 'scenario-run',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'scenario-run',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/scenario-start.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-scenario-start.png', import.meta.url).href
-
-export default {
-  type: 'scenario-start',
-  description: 'scenario-start',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'scenario-start',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/src/templates/scenario-stop.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/icon-scenario-stop.png', import.meta.url).href
-
-export default {
-  type: 'scenario-stop',
-  description: 'scenario-stop',
-  group: 'dataSource',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'scenario-stop',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    hidden: true
-  }
-}

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2019", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "src",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}