@operato/process 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.2](https://github.com/heartyoh/ioperato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/heartyoh/ioperato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/heartyoh/ioperato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/heartyoh/ioperato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/heartyoh/ioperato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -74,18 +74,18 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^8.0.0-beta.0",
-    "@operato/board": "^8.0.0-beta.0",
-    "@operato/data-grist": "^8.0.0-beta.0",
-    "@operato/font": "^8.0.0-beta.0",
-    "@operato/graphql": "^8.0.0-beta.0",
-    "@operato/i18n": "^8.0.0-beta.0",
-    "@operato/input": "^8.0.0-beta.0",
-    "@operato/markdown": "^8.0.0-beta.0",
-    "@operato/popup": "^8.0.0-beta.0",
-    "@operato/property-editor": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/app": "^8.0.0-beta.2",
+    "@operato/board": "^8.0.0-beta.2",
+    "@operato/data-grist": "^8.0.0-beta.2",
+    "@operato/font": "^8.0.0-beta.2",
+    "@operato/graphql": "^8.0.0-beta.2",
+    "@operato/i18n": "^8.0.0-beta.2",
+    "@operato/input": "^8.0.0-beta.2",
+    "@operato/markdown": "^8.0.0-beta.2",
+    "@operato/popup": "^8.0.0-beta.2",
+    "@operato/property-editor": "^8.0.0-beta.2",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -134,5 +134,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
-}

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook'
-import baseConfig from '../web-dev-server.config.mjs'
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
-})

package/demo/index-modeller.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-
-      ox-process-modeller {
-        width: 100vw;
-        height: 100dvh;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-process-modeller.js'
-      import { ReferenceMap, create, error } from '@hatiolab/things-scene'
-
-      const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
-      const processes = colors.map((color, idx) => {
-        var to = colors[(idx + 1) % colors.length]
-        return {
-          id: color,
-          model: {
-            width: 400,
-            height: 300,
-            fillStyle: color,
-            components: [
-              {
-                type: 'text',
-                left: 100,
-                top: 100,
-                width: 200,
-                height: 30,
-                text: `Click to move to ${to}`,
-                event: {
-                  tap: {
-                    action: 'goto',
-                    target: to
-                  }
-                }
-              }
-            ]
-          }
-        }
-      })
-
-      var provider = new ReferenceMap(
-        async (processId, resolve, reject) => {
-          try {
-            const process = processes.find(process => {
-              return process.id === processId
-            })
-            if (!process) {
-              throw `no process named as ${processId}`
-            }
-
-            var scene
-
-            try {
-              scene = await provider.get(processId)
-              console.warn('Process fetched more than twice.', processId)
-            } catch (e) {
-              scene = create({
-                model: JSON.parse(JSON.stringify(process.model)),
-                mode: 0,
-                refProvider: provider
-              })
-            }
-            resolve(scene, process)
-          } catch (e) {
-            error(e)
-            reject(e)
-          }
-        },
-        async (id, ref) => {
-          ref.dispose()
-        }
-      )
-
-      render(
-        html` <ox-process-modeller .process=${processes[0]} .provider=${provider}> </ox-process-modeller> `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/demo/index-viewer.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-
-      ox-process-viewer {
-        width: 100vw;
-        height: 100dvh;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-process-viewer.js'
-      import { ReferenceMap, create, error } from '@hatiolab/things-scene'
-
-      const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
-      const processes = colors.map((color, idx) => {
-        var to = colors[(idx + 1) % colors.length]
-        return {
-          id: color,
-          model: {
-            width: 400,
-            height: 300,
-            fillStyle: color,
-            components: [
-              {
-                type: 'text',
-                left: 100,
-                top: 100,
-                width: 200,
-                height: 30,
-                text: `Click to move to ${to}`,
-                event: {
-                  tap: {
-                    action: 'goto',
-                    target: to
-                  }
-                }
-              }
-            ]
-          }
-        }
-      })
-
-      var provider = new ReferenceMap(
-        async (processId, resolve, reject) => {
-          try {
-            const process = processes.find(process => {
-              return process.id === processId
-            })
-            if (!process) {
-              throw `no process named as ${processId}`
-            }
-
-            var scene
-
-            try {
-              scene = await provider.get(processId)
-              console.warn('Process fetched more than twice.', processId)
-            } catch (e) {
-              scene = create({
-                model: JSON.parse(JSON.stringify(process.model)),
-                mode: 0,
-                refProvider: provider
-              })
-            }
-            resolve(scene, process)
-          } catch (e) {
-            error(e)
-            reject(e)
-          }
-        },
-        async (id, ref) => {
-          ref.dispose()
-        }
-      )
-
-      render(
-        html` <ox-process-viewer .process=${processes[0]} .provider=${provider}></ox-process-viewer> `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/demo/index.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-
-      ox-process-viewer {
-        width: 100vw;
-        height: 100dvh;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-process-viewer.js'
-      import { ReferenceMap, create, error } from '@hatiolab/things-scene'
-
-      const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
-      const processes = colors.map((color, idx) => {
-        var to = colors[(idx + 1) % colors.length]
-        return {
-          id: color,
-          model: {
-            width: 400,
-            height: 300,
-            fillStyle: color,
-            components: [
-              {
-                type: 'text',
-                left: 100,
-                top: 100,
-                width: 200,
-                height: 30,
-                text: `Click to move to ${to}`,
-                event: {
-                  tap: {
-                    action: 'goto',
-                    target: to
-                  }
-                }
-              }
-            ]
-          }
-        }
-      })
-
-      var provider = new ReferenceMap(
-        async (processId, resolve, reject) => {
-          try {
-            const process = processes.find(process => {
-              return process.id === processId
-            })
-            if (!process) {
-              throw `no process named as ${processId}`
-            }
-
-            var scene
-
-            try {
-              scene = await provider.get(processId)
-              console.warn('Process fetched more than twice.', processId)
-            } catch (e) {
-              scene = create({
-                model: JSON.parse(JSON.stringify(process.model)),
-                mode: 0,
-                refProvider: provider
-              })
-            }
-            resolve(scene, process)
-          } catch (e) {
-            error(e)
-            reject(e)
-          }
-        },
-        async (id, ref) => {
-          ref.dispose()
-        }
-      )
-
-      render(
-        html` <ox-process-viewer .process=${processes[0]} .provider=${provider}></ox-process-viewer> `,
-        document.querySelector('#demo')
-      )
-    </script>
-  </body>
-</html>

package/src/data-storage/data-storage.ts

@@ -1,47 +0,0 @@
-import Dexie from 'dexie'
-
-import { Component, PersistentDataStorage } from '@hatiolab/things-scene'
-
-class ProcessDatabase extends Dexie {
-  process_data!: Dexie.Table<IProcessData, number> // number = type of the primkey
-  //...other tables goes here...
-
-  constructor() {
-    super('operato-process-database')
-    this.version(1).stores({
-      process_data: '[process+refid]'
-      //...other tables goes here...
-    })
-  }
-}
-
-interface IProcessData {
-  id?: number
-  process: string
-  refid: string | number
-  data: any
-  timestamp: number
-}
-
-const db = new ProcessDatabase()
-
-export class DataStorage implements PersistentDataStorage {
-  private id: string
-
-  constructor(id: string) {
-    this.id = id
-  }
-
-  public async load(key: Component): Promise<any> {
-    const saved = await db.process_data.where({ process: this.id, refid: key.state.refid }).first()
-    return saved?.data
-  }
-
-  public async save(key: Component, value: any): Promise<void> {
-    await db.process_data.put({ process: this.id, refid: key.state.refid, data: value, timestamp: Date.now() })
-  }
-
-  public async clear(key: Component): Promise<void> {
-    await db.process_data.where({ process: this.id, refid: key.state.refid }).delete()
-  }
-}

package/src/graphql/data-subscription.ts

@@ -1,30 +0,0 @@
-import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'
-
-import gql from 'graphql-tag'
-import { subscribe } from '@operato/graphql'
-
-export class DataSubscriptionProviderImpl implements DataSubscriptionProvider {
-  async subscribe(tag: string, component: Component) {
-    return await subscribe(
-      {
-        query: gql`
-                  subscription {
-                    data(tag: "${tag}") {
-                      tag
-                      data
-                    }
-                  }
-                `
-      },
-      {
-        next: async ({ data }: { data: any }) => {
-          if (data) {
-            component.data = data.data.data
-          }
-        }
-      }
-    )
-  }
-
-  dispose() {}
-}

package/src/graphql/favorite-process.ts

@@ -1,25 +0,0 @@
-import { buildArgs, client } from '@operato/graphql'
-
-import gql from 'graphql-tag'
-
-export async function fetchFavoriteProcessList(listParam = {}) {
-  const response = await client.query({
-    query: gql`
-      {
-        favoriteProcesses(${buildArgs(listParam)}) {
-          items {
-            id
-            name
-            description
-            thumbnail
-            createdAt
-            updatedAt
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data
-}

package/src/graphql/index.ts

@@ -1,3 +0,0 @@
-export * from './process'
-export * from './process-group'
-export * from './favorite-process'