@operato/scene-integration 0.0.26 → 0.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@operato/scene-integration",
   "description": "Things factory integration component for things-scene",
-  "version": "0.0.26",
+  "version": "0.1.3",
   "license": "MIT",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -27,15 +27,15 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@hatiolab/things-scene": "^2.7.31",
+    "@hatiolab/things-scene": "^2.7.33",
     "graphql-tag": "^2.12.6",
     "subscriptions-transport-ws": "^0.11.0"
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@operato/board": "^0.3.1",
-    "@things-factory/builder": "^4.0.26",
-    "@things-factory/operato-board": "^4.0.26",
+    "@operato/board": "^0.3.20",
+    "@things-factory/builder": "^4.0.38",
+    "@things-factory/operato-board": "^4.0.38",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.28",
@@ -60,5 +60,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f344a223fc2cd34a5f47e18558b20eb94ca0cea1"
+  "gitHead": "f3275af95afaf8389224e1e507df6155cbf39382"
 }

package/src/client-api.ts

@@ -0,0 +1,25 @@
+import gql from 'graphql-tag'
+
+import { getClient } from './origin-client'
+
+export const scenarios = async () => {
+  var response = await getClient().query({
+    query: gql`
+      query {
+        scenarios {
+          items {
+            name
+          }
+        }
+      }
+    `
+  })
+  if (response.errors) {
+    return ['']
+  }
+
+  const items = response.data.scenarios.items.map((item: any) => item.name)
+  const sorted = items.sort()
+
+  return [''].concat(sorted)
+}

package/src/connection-control.ts

@@ -1,8 +1,8 @@
+import gql from 'graphql-tag'
+
 import { Component, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-connection-control.png'
 import { getClient } from './origin-client'
-import gql from 'graphql-tag'
 
 const NATURE = {
   mutable: false,
@@ -66,7 +66,7 @@ export default class ConnectionControl extends RectPath(Shape) {
   static get image() {
     if (!ConnectionControl._image) {
       ConnectionControl._image = new Image()
-      ConnectionControl._image.src = COMPONENT_IMAGE
+      ConnectionControl._image.src = new URL('../icons/symbol-connection-control.png', import.meta.url).href
     }
     return ConnectionControl._image
   }

package/src/connection-state-subscription.ts

@@ -1,8 +1,8 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
-import { getClient, subscribe } from './origin-client'
 
-import COMPONENT_IMAGE from '../assets/symbol-connection-state-subscription.png'
-import gql from 'graphql-tag'
+import { getClient, subscribe } from './origin-client'
 
 const NATURE = {
   mutable: false,
@@ -43,7 +43,10 @@ export default class ConnectionStateSubscription extends DataSource(RectPath(Sha
   static get image() {
     if (!ConnectionStateSubscription._image) {
       ConnectionStateSubscription._image = new Image()
-      ConnectionStateSubscription._image.src = COMPONENT_IMAGE
+      ConnectionStateSubscription._image.src = new URL(
+        '../icons/symbol-connection-state-subscription.png',
+        import.meta.url
+      ).href
     }
 
     return ConnectionStateSubscription._image

package/src/data-subscription.ts

@@ -1,7 +1,7 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-data-subscription.png'
-import gql from 'graphql-tag'
 import { subscribe } from './origin-client'
 
 const NATURE = {
@@ -24,7 +24,7 @@ export default class DataSubscription extends DataSource(RectPath(Shape)) {
   static get image() {
     if (!DataSubscription._image) {
       DataSubscription._image = new Image()
-      DataSubscription._image.src = COMPONENT_IMAGE
+      DataSubscription._image.src = new URL('../icons/symbol-data-subscription.png', import.meta.url).href
     }
 
     return DataSubscription._image

package/src/scenario-control.ts

@@ -1,8 +1,9 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-scenario-control.png'
+import { scenarios } from './client-api'
 import { getClient } from './origin-client'
-import gql from 'graphql-tag'
 
 const NATURE = {
   mutable: false,
@@ -14,24 +15,7 @@ const NATURE = {
       label: 'scenario-name',
       name: 'scenarioName',
       property: {
-        options: async () => {
-          var response = await getClient().query({
-            query: gql`
-              query {
-                scenarios {
-                  items {
-                    name
-                  }
-                }
-              }
-            `
-          })
-          if (response.errors) {
-            return ['']
-          }
-
-          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
-        }
+        options: scenarios
       }
     },
     {
@@ -66,7 +50,7 @@ export default class ScenarioControl extends DataSource(RectPath(Shape)) {
   static get image() {
     if (!ScenarioControl._image) {
       ScenarioControl._image = new Image()
-      ScenarioControl._image.src = COMPONENT_IMAGE
+      ScenarioControl._image.src = new URL('../icons/symbol-scenario-control.png', import.meta.url).href
     }
     return ScenarioControl._image
   }

package/src/scenario-instance-subscription.ts

@@ -1,8 +1,9 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
-import { getClient, subscribe } from './origin-client'
 
-import COMPONENT_IMAGE from '../assets/symbol-scenario-instance-subscription.png'
-import gql from 'graphql-tag'
+import { scenarios } from './client-api'
+import { subscribe } from './origin-client'
 
 const NATURE = {
   mutable: false,
@@ -14,24 +15,7 @@ const NATURE = {
       label: 'scenario-name',
       name: 'scenarioName',
       property: {
-        options: async () => {
-          var response = await getClient().query({
-            query: gql`
-              query {
-                scenarios {
-                  items {
-                    name
-                  }
-                }
-              }
-            `
-          })
-          if (response.errors) {
-            return ['']
-          }
-
-          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
-        }
+        options: scenarios
       }
     },
     {
@@ -49,7 +33,10 @@ export default class ScenarioInstanceSubscription extends DataSource(RectPath(Sh
   static get image() {
     if (!ScenarioInstanceSubscription._image) {
       ScenarioInstanceSubscription._image = new Image()
-      ScenarioInstanceSubscription._image.src = COMPONENT_IMAGE
+      ScenarioInstanceSubscription._image.src = new URL(
+        '../icons/symbol-scenario-instance-subscription.png',
+        import.meta.url
+      ).href
     }
 
     return ScenarioInstanceSubscription._image

package/src/scenario-queue-subscription.ts

@@ -1,7 +1,7 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-scenario-queue-subscription.png'
-import gql from 'graphql-tag'
 import { subscribe } from './origin-client'
 
 const NATURE = {
@@ -18,7 +18,10 @@ export default class ScenarioQueueSubscription extends DataSource(RectPath(Shape
   static get image() {
     if (!ScenarioQueueSubscription._image) {
       ScenarioQueueSubscription._image = new Image()
-      ScenarioQueueSubscription._image.src = COMPONENT_IMAGE
+      ScenarioQueueSubscription._image.src = new URL(
+        '../icons/symbol-scenario-queue-subscription.png',
+        import.meta.url
+      ).href
     }
 
     return ScenarioQueueSubscription._image

package/src/scenario-run.ts

@@ -1,8 +1,9 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-scenario-run.png'
+import { scenarios } from './client-api'
 import { getClient } from './origin-client'
-import gql from 'graphql-tag'
 
 const NATURE = {
   mutable: false,
@@ -14,24 +15,7 @@ const NATURE = {
       label: 'scenario-name',
       name: 'scenarioName',
       property: {
-        options: async () => {
-          var response = await getClient().query({
-            query: gql`
-              query {
-                scenarios {
-                  items {
-                    name
-                  }
-                }
-              }
-            `
-          })
-          if (response.errors) {
-            return ['']
-          }
-
-          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
-        }
+        options: scenarios
       }
     },
     {
@@ -55,7 +39,7 @@ export default class ScenarioRun extends DataSource(RectPath(Shape)) {
   static get image() {
     if (!ScenarioRun._image) {
       ScenarioRun._image = new Image()
-      ScenarioRun._image.src = COMPONENT_IMAGE
+      ScenarioRun._image.src = new URL('../icons/symbol-scenario-run.png', import.meta.url).href
     }
     return ScenarioRun._image
   }

package/src/scenario-start.ts

@@ -1,8 +1,9 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-scenario-start.png'
+import { scenarios } from './client-api'
 import { getClient } from './origin-client'
-import gql from 'graphql-tag'
 
 const NATURE = {
   mutable: false,
@@ -19,24 +20,7 @@ const NATURE = {
       label: 'scenario-name',
       name: 'scenarioName',
       property: {
-        options: async () => {
-          var response = await getClient().query({
-            query: gql`
-              query {
-                scenarios {
-                  items {
-                    name
-                  }
-                }
-              }
-            `
-          })
-          if (response.errors) {
-            return ['']
-          }
-
-          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
-        }
+        options: scenarios
       }
     },
     {
@@ -55,7 +39,7 @@ export default class ScenarioStart extends DataSource(RectPath(Shape)) {
   static get image() {
     if (!ScenarioStart._image) {
       ScenarioStart._image = new Image()
-      ScenarioStart._image.src = COMPONENT_IMAGE
+      ScenarioStart._image.src = new URL('../icons/symbol-scenario-start.png', import.meta.url).href
     }
     return ScenarioStart._image
   }

package/src/scenario-stop.ts

@@ -1,8 +1,9 @@
+import gql from 'graphql-tag'
+
 import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
 
-import COMPONENT_IMAGE from '../assets/symbol-scenario-stop.png'
+import { scenarios } from './client-api'
 import { getClient } from './origin-client'
-import gql from 'graphql-tag'
 
 const NATURE = {
   mutable: false,
@@ -19,24 +20,7 @@ const NATURE = {
       label: 'scenario-name',
       name: 'scenarioName',
       property: {
-        options: async () => {
-          var response = await getClient().query({
-            query: gql`
-              query {
-                scenarios {
-                  items {
-                    name
-                  }
-                }
-              }
-            `
-          })
-          if (response.errors) {
-            return ['']
-          }
-
-          return [''].concat(response.data.scenarios.items.map((item: any) => item.name))
-        }
+        options: scenarios
       }
     }
   ],
@@ -50,7 +34,7 @@ export default class ScenarioStop extends DataSource(RectPath(Shape)) {
   static get image() {
     if (!ScenarioStop._image) {
       ScenarioStop._image = new Image()
-      ScenarioStop._image.src = COMPONENT_IMAGE
+      ScenarioStop._image.src = new URL('../icons/symbol-scenario-stop.png', import.meta.url).href
     }
     return ScenarioStop._image
   }

package/src/templates/connection-control.ts

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-connection-control.png'
+const icon = new URL('../../icons/icon-connection-control.png', import.meta.url).href
 
 export default {
   type: 'connection-control',

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

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-connection-state-subscription.png'
+const icon = new URL('../../icons/icon-connection-state-subscription.png', import.meta.url).href
 
 export default {
   type: 'connection-state-subscription',

package/src/templates/data-subscription.ts

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-data-subscription.png'
+const icon = new URL('../../icons/icon-data-subscription.png', import.meta.url).href
 
 export default {
   type: 'data-subscription',

package/src/templates/scenario-control.ts

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-scenario-control.png'
+const icon = new URL('../../icons/icon-scenario-control.png', import.meta.url).href
 
 export default {
   type: 'scenario-control',

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

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-scenario-queue-subscription.png'
+const icon = new URL('../../icons/icon-scenario-queue-subscription.png', import.meta.url).href
 
 export default {
   type: 'scenario-queue-subscription',

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

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-scenario-instance-subscription.png'
+const icon = new URL('../../icons/icon-scenario-instance-subscription.png', import.meta.url).href
 
 export default {
   type: 'scenario-instance-subscription',

package/src/templates/scenario-run.ts

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-scenario-run.png'
+const icon = new URL('../../icons/icon-scenario-run.png', import.meta.url).href
 
 export default {
   type: 'scenario-run',

package/src/templates/scenario-start.ts

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-scenario-start.png'
+const icon = new URL('../../icons/icon-scenario-start.png', import.meta.url).href
 
 export default {
   type: 'scenario-start',

package/src/templates/scenario-stop.ts

@@ -1,4 +1,4 @@
-import icon from '../../assets/icon-scenario-stop.png'
+const icon = new URL('../../icons/icon-scenario-stop.png', import.meta.url).href
 
 export default {
   type: 'scenario-stop',

package/tsconfig.json

@@ -16,7 +16,7 @@
     "rootDir": "src",
     "declaration": true,
     "incremental": true,
-    "typeRoots": ["./node_modules", "@types"],
+    "typeRoots": ["./node_modules"],
     "types": ["node"]
   },
   "include": ["**/*.ts", "*.d.ts"]