@operato/scene-integration 0.0.5

package/helps/scene/component/scenario-stop.ko.md

@@ -0,0 +1,12 @@
+# scenario stop
+
+- 시나리오를 종료시킨다.
+- 현재 실행중인 동일한 이름(instance name)의 시나리오 인스턴스를 찾아서 종료한다. 주어진 이름의 인스턴스가 없으면, 아무런 동작이 일어나지 않는다.
+- value : 아무런 값이 주어져도 되며, 데이터 바인딩에 의해서 value값이 설정될 때 컴포넌트가 동작한다.
+
+## properties
+  - instance name : (선택값) 이 이름으로 존재하는 시나리오 인스턴스를 종료시킨다. 이 값을 설정하지 않으면, scenario name 속성값을 사용한다. 이 값을 설정하지 않으면, scenario name 속성 값을 시나리오 인스턴스 이름으로 한다.
+  - scenario name : (선택값) instance name 과 scenario name 둘 중 하나는 입력되어야 한다.
+
+## data
+  - scenario-stop 으로 종료된 scenario instance 의 상태값 : 'STOPPED' | 'HALTED'

package/helps/scene/component/scenario-stop.md

@@ -0,0 +1,12 @@
+# scenario stop
+
+- End the scenario.
+- Finds the currently running scenario instance with the same name and terminates it. If there is no instance of the given name, nothing happens.
+- value: Any value can be given, and the component operates when the value is set by data binding.
+
+## properties
+  - instance name: (optional value) Terminates the scenario instance that exists under this name. If this value is not set, the scenario name property value is used. If this value is not set, the scenario name property value is used as the scenario instance name.
+  - scenario name: (optional value) Either of the instance name and the scenario name must be entered.
+
+## data
+   - Status value of the scenario instance terminated with scenario-stop : 'STOPPED' | 'HALTED'

package/helps/scene/component/scenario-stop.zh.md

@@ -0,0 +1,12 @@
+# scenario stop
+
+- 结束方案。
+- 查找具有相同名称的当前正在运行的方案实例并终止它。 如果没有给定名称的实例，则什么也不会发生。
+- value：可以指定任何值，并且通过数据绑定设置该值时，组件将运行。
+
+## properties
+   - instance name ：（可选值）终止以该名称存在的方案实例。 如果未设置此值，则使用方案名称属性值。 如果未设置此值，那么方案名称属性值将用作方案实例名称。
+   - 方案名称：（可选）必须输入实例名称和方案名称。
+
+## data
+   - 方案停止时方案实例的状态值： 'STOPPED' | 'HALTED'

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@operato/scene-integration",
+  "description": "Things factory integration component for things-scene",
+  "version": "0.0.5",
+  "license": "MIT",
+  "author": "heartyoh",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/integration"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.4.17",
+    "graphql-tag": "^2.12.6",
+    "subscriptions-transport-ws": "^0.11.0"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.16",
+    "@operato/board": "^0.2.27",
+    "@things-factory/builder": "^4.0.6",
+    "@things-factory/operato-board": "^4.0.6",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "d3717e3284d88dc2831fbcf4ddbce827e2cc2940"
+}

package/src/connection-control.ts

@@ -0,0 +1,163 @@
+import gql from 'graphql-tag'
+
+import { Component, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import COMPONENT_IMAGE from '../assets/symbol-connection-control.png'
+import { getClient } from './origin-client'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'connection-name',
+      name: 'connectionName',
+      property: {
+        options: async () => {
+          var response = await getClient().query({
+            query: gql`
+              query {
+                connections {
+                  items {
+                    name
+                  }
+                }
+              }
+            `
+          })
+          if (response.errors) {
+            return ['']
+          }
+
+          return [''].concat(response.data.connections.items.map((item: any) => item.name))
+        }
+      }
+    },
+    {
+      type: 'select',
+      label: 'control-type',
+      name: 'controlType',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'connect',
+            value: 'connect'
+          },
+          {
+            display: 'disconnect',
+            value: 'disconnect'
+          }
+        ]
+      }
+    }
+  ],
+  'value-property': 'controlType',
+  help: 'scene/component/connection-control'
+}
+
+export default class ConnectionControl extends RectPath(Shape) {
+  static _image: HTMLImageElement
+
+  static get image() {
+    if (!ConnectionControl._image) {
+      ConnectionControl._image = new Image()
+      ConnectionControl._image.src = COMPONENT_IMAGE
+    }
+    return ConnectionControl._image
+  }
+
+  private _client: any
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+    context.beginPath()
+    this.drawImage(context, ConnectionControl.image, left, top, width, height)
+  }
+
+  ready() {
+    super.ready()
+    this._init()
+  }
+
+  _init() {
+    if (!this.app.isViewMode) return
+
+    this._client = getClient()
+  }
+
+  dispose() {
+    super.dispose()
+
+    try {
+      if (this._client) {
+        this._client.stop()
+      }
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  get client() {
+    return this._client
+  }
+
+  get controlType() {
+    return this.getState('controlType')
+  }
+
+  set controlType(controlType: string) {
+    this.setState('controlType', controlType)
+    this.controlConnect()
+  }
+
+  async controlConnect() {
+    let { controlType, connectionName } = this.state
+
+    if (!connectionName || !this.app.isViewMode) return
+
+    switch (controlType) {
+      case 'connect':
+      case true:
+      case 1:
+        controlType = 'connect'
+        break
+      default:
+        controlType = 'disconnect'
+    }
+
+    var client = this._client
+    var query = ''
+
+    query = `mutation{
+      ${controlType}Connection(name: "${connectionName}") {
+        status
+      }
+    }`
+
+    if (client) {
+      var response = await client.query({
+        query: gql`
+          ${query}
+        `
+      })
+
+      this.data = response
+    }
+  }
+}
+
+Component.register('connection-control', ConnectionControl)

package/src/connection-state-subscription.ts

@@ -0,0 +1,113 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import gql from 'graphql-tag'
+
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+
+import COMPONENT_IMAGE from '../assets/symbol-connection-state-subscription.png'
+import { getClient, subscribe } from './origin-client'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'connection-name',
+      name: 'connectionName',
+      property: {
+        options: async () => {
+          var response = await getClient().query({
+            query: gql`
+              query {
+                connections {
+                  items {
+                    name
+                  }
+                }
+              }
+            `
+          })
+          if (response.errors) {
+            return ['']
+          }
+
+          return [''].concat(response.data.connections.items.map((item: any) => item.name))
+        }
+      }
+    }
+  ],
+  help: 'scene/component/connection-state-subscription'
+}
+
+export default class ConnectionStateSubscription extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+  static get image() {
+    if (!ConnectionStateSubscription._image) {
+      ConnectionStateSubscription._image = new Image()
+      ConnectionStateSubscription._image.src = COMPONENT_IMAGE
+    }
+
+    return ConnectionStateSubscription._image
+  }
+
+  private subscription?: {
+    unsubscribe(): void
+  }
+
+  dispose() {
+    super.dispose()
+
+    this.subscription?.unsubscribe()
+    delete this.subscription
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, ConnectionStateSubscription.image, left, top, width, height)
+  }
+
+  ready() {
+    if (!this.app.isViewMode) return
+    this._initConnectionStateSubscription()
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  _initConnectionStateSubscription() {
+    if (!this.app.isViewMode) return
+    this.startSubscribe()
+  }
+
+  async startSubscribe() {
+    var { connectionName } = this.state
+
+    this.subscription = await subscribe(
+      {
+        query: gql`subscription {
+          connectionState(name: "${connectionName}") {
+            name
+            state
+            timestamp
+          }
+        }`
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            this.data = data.connectionState
+          }
+        }
+      }
+    )
+  }
+}
+
+Component.register('connection-state-subscription', ConnectionStateSubscription)

package/src/data-subscription.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import gql from 'graphql-tag'
+
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+
+import COMPONENT_IMAGE from '../assets/symbol-data-subscription.png'
+import { subscribe } from './origin-client'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'tag',
+      name: 'tag'
+    }
+  ],
+  'value-property': 'tag',
+  help: 'scene/component/data-subscription'
+}
+
+export default class DataSubscription extends DataSource(RectPath(Shape)) {
+  static _image: HTMLImageElement
+  static get image() {
+    if (!DataSubscription._image) {
+      DataSubscription._image = new Image()
+      DataSubscription._image.src = COMPONENT_IMAGE
+    }
+
+    return DataSubscription._image
+  }
+
+  private subscription?: {
+    unsubscribe(): void
+  }
+
+  dispose() {
+    this.subscription?.unsubscribe()
+    delete this.subscription
+
+    super.dispose()
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, DataSubscription.image, left, top, width, height)
+  }
+
+  ready() {
+    this._initDataSubscription()
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  get tag() {
+    return this.state.tag
+  }
+
+  set tag(tag) {
+    this.setState('tag', tag)
+  }
+
+  _initDataSubscription() {
+    if (!this.app.isViewMode) return
+
+    this.startSubscribe()
+  }
+
+  async startSubscribe() {
+    var { tag } = this.state
+
+    this.subscription = await subscribe(
+      {
+        query: gql`
+          subscription {
+            data(tag: "${tag}") {
+              tag
+              data
+            }
+          }
+        `
+      },
+      {
+        next: async ({ data }: { data: any }) => {
+          if (data) {
+            this.data = data.data.data
+          }
+        }
+      }
+    )
+  }
+}
+
+Component.register('data-subscription', DataSubscription)

package/src/editors/index.js

@@ -0,0 +1 @@
+export default [];

package/src/index.ts

@@ -0,0 +1,21 @@
+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/origin-client.ts

@@ -0,0 +1,136 @@
+import { ApolloClient, HttpLink, InMemoryCache, from } from '@apollo/client/core'
+import { ErrorResponse, onError } from '@apollo/client/link/error'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { DefaultOptions } from '@apollo/client'
+import { SubscriptionClient } from 'subscriptions-transport-ws'
+
+const defaultOptions: DefaultOptions = {
+  watchQuery: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'ignore'
+  },
+  query: {
+    fetchPolicy: 'no-cache', //'network-only'
+    errorPolicy: 'all'
+  },
+  mutate: {
+    errorPolicy: 'all'
+  }
+}
+
+const ERROR_HANDLER = ({ graphQLErrors, networkError }: ErrorResponse) => {
+  if (graphQLErrors) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level: 'error',
+          message: graphQLErrors[0].message,
+          ex: graphQLErrors
+        }
+      })
+    )
+  }
+
+  if (networkError) {
+    const code = (networkError as any).statusCode || ''
+    const message = `[Response-${code}]: ${networkError.message}`
+
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level: 'error',
+          message,
+          ex: networkError
+        }
+      })
+    )
+  }
+}
+
+var client: ApolloClient<any>
+
+export function getClient() {
+  if (!client) {
+    var cache = new InMemoryCache()
+    client = new ApolloClient({
+      defaultOptions,
+      cache,
+      link: from([
+        onError(ERROR_HANDLER),
+        new HttpLink({
+          uri: '/graphql',
+          credentials: 'include'
+        })
+      ])
+    })
+  }
+
+  return client
+}
+
+/* SubscriptionClient */
+var subscriptionClient: Promise<SubscriptionClient> | null
+
+const getSubscriptionClient = async () => {
+  if (!subscriptionClient) {
+    subscriptionClient = new Promise((resolve, reject) => {
+      var client = new SubscriptionClient(location.origin.replace(/^http/, 'ws') + '/subscriptions', {
+        reconnect: true,
+        connectionParams: {
+          headers: {
+            /* 
+              특정 도메인의 데이타만 받고자 하는 경우에, referer 정보를 제공해서 서버에서 서브도메인 정보를 취득하도록 한다.
+              referer: location.href
+              또는, 이미 서브도메인 정보를 알고 있다면,
+              'x-things-factory-domain': '[subdomain]'
+              을 보낼 수 있다.
+              관련 정보를 보내지 않는다면, 사용자가 권한을 가진 모든 도메인의 데이타를 수신하게 된다.
+            */
+            referer: location.href
+          }
+        }
+      })
+
+      client.onError(err => {
+        //readyState === 3 인 경우 url을 잘 못 입력했거나, 서버에 문제가 있는 경우이므로 reconnect = false로 변경한다.
+        if (client.status === 3) {
+          // client.reconnect = false // reconnect is private property
+          client.close(true)
+        }
+        reject(err)
+      })
+
+      client.onConnected(() => {
+        resolve(client)
+      })
+    })
+  }
+
+  return await subscriptionClient
+}
+
+var subscriptions: (() => void)[] = []
+
+export const subscribe = async (request: any, subscribe: any) => {
+  var client = await getSubscriptionClient()
+  var { unsubscribe } = client.request(request).subscribe(subscribe)
+
+  subscriptions.push(unsubscribe)
+
+  return {
+    unsubscribe() {
+      subscriptions.splice(subscriptions.indexOf(unsubscribe), 1)
+      unsubscribe()
+
+      if (subscriptions.length == 0) {
+        client.unsubscribeAll()
+        client.close(true)
+
+        subscriptionClient = null
+      }
+    }
+  }
+}