@operato/process 7.1.30 → 7.1.32

package/src/graphql/process.ts

@@ -1,141 +0,0 @@
-import { buildArgs, client } from '@operato/graphql'
-
-import { Process } from '../types'
-import gql from 'graphql-tag'
-
-export async function fetchProcessList(listParam = {}) {
-  const response = await client.query({
-    query: gql`
-      {
-        processes(${buildArgs(listParam)}) {
-          items {
-            id
-            name
-            description
-            thumbnail
-            createdAt
-            updatedAt
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data
-}
-
-export async function fetchProcess(id: string) {
-  const response = await client.query({
-    query: gql`
-      query FetchProcessById($id: String!) {
-        process(id: $id) {
-          id
-          name
-          description
-          group {
-            id
-            name
-          }
-          thumbnail
-          model
-          createdAt
-          creator {
-            id
-            name
-          }
-          updatedAt
-          updater {
-            id
-            name
-          }
-        }
-      }
-    `,
-    variables: { id }
-  })
-
-  return response.data
-}
-
-export async function createProcess(process: Process) {
-  /*
-    input NewProcess {
-      name        : String!
-      description : String
-      model       : String!
-      groupId     : String!
-    }
-  */
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation CreateProcess($process: NewProcess!) {
-        createProcess(process: $process) {
-          id
-          name
-          description
-          model
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      process
-    }
-  })
-
-  return response.data
-}
-
-export async function updateProcess(process: Process) {
-  /*
-    input ProcessPatch {
-      name        : String
-      description : String
-      model       : String
-    }
-    */
-  var { id, name, description, model, groupId } = process
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation UpdateProcess($id: String!, $patch: ProcessPatch!) {
-        updateProcess(id: $id, patch: $patch) {
-          id
-          name
-          description
-          model
-          group {
-            id
-            name
-          }
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id,
-      patch: { name, description, model, groupId }
-    }
-  })
-
-  return response.data
-}
-
-export async function deleteProcess(id: string) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($id: String!) {
-        deleteProcess(id: $id)
-      }
-    `,
-    variables: {
-      id
-    }
-  })
-
-  return response.data
-}

package/src/graphql/scenario.ts

@@ -1,79 +0,0 @@
-import gql from 'graphql-tag'
-
-import { client } from '@operato/graphql'
-
-export const scenarios = async (): Promise<{ name: string; description: string }[]> => {
-  var response = await client.query({
-    query: gql`
-      query {
-        scenarios {
-          items {
-            name
-            description
-          }
-        }
-      }
-    `
-  })
-
-  if (response.errors) {
-    return []
-  }
-
-  return response.data.scenarios.items
-}
-
-export const startScenario = async (
-  scenarioName: string,
-  instanceName: string,
-  variables: string | number | object
-) => {
-  if (!scenarioName) {
-    return
-  }
-
-  if (client) {
-    var response = await client.query({
-      query: gql`
-        mutation ($instanceName: String, $scenarioName: String!, $variables: Object) {
-          startScenario(instanceName: $instanceName, scenarioName: $scenarioName, variables: $variables) {
-            state
-            message
-            data
-          }
-        }
-      `,
-      variables: {
-        instanceName: instanceName,
-        scenarioName: scenarioName,
-        variables
-      }
-    })
-
-    return response?.data?.startScenario?.data
-  }
-}
-
-export const runScenario = async (scenarioName: string, variables: string | number | object) => {
-  if (!scenarioName) return
-
-  if (client) {
-    var response = await client.query({
-      query: gql`
-        mutation ($scenarioName: String!, $variables: Object) {
-          runScenario(scenarioName: $scenarioName, variables: $variables) {
-            state
-            message
-            data
-          }
-        }
-      `,
-      variables: {
-        scenarioName: scenarioName,
-        variables
-      }
-    })
-
-    return response?.data?.runScenario?.data
-  }
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export * from './types.js'
-
-export { DataStorage } from './data-storage/data-storage.js'
-
-export * from './ox-process-viewer.js'
-export * from './ox-process-modeller.js'
-export * from './ox-process-list.js'
-export * from './ox-process-template-viewer.js'

package/src/modeller/component-toolbar/component-detail.ts

@@ -1,58 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/markdown'
-
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-export class ComponentDetail extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-content: stretch;
-
-        background-color: var(--component-detail-background-color, white);
-        margin: 0px;
-        padding: 0px;
-
-        overflow: hidden;
-
-        border: 2px solid var(--component-detail-border-color, gray);
-        box-sizing: border-box;
-
-        top: 0px;
-
-        z-index: 1;
-      }
-
-      ox-markdown,
-      iframe {
-        flex: 1;
-        padding: 10px;
-        overflow: auto;
-      }
-    `
-  ]
-
-  @property({ type: Object }) template: { about: string } | null = null
-
-  render() {
-    const { about } = this.template || {}
-
-    if (about) {
-      var aboutURL = new URL(about, location.origin)
-      if (aboutURL.origin !== location.origin) {
-        return html`<iframe src=${about}></iframe>`
-      }
-    }
-
-    return html` <ox-markdown .src=${about}></ox-markdown> `
-  }
-}

package/src/modeller/component-toolbar/component-menu.ts

@@ -1,193 +0,0 @@
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { property, query, state } from 'lit/decorators.js'
-
-import { Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ScrollbarStyles } from '@operato/styles'
-import { i18next } from '@operato/i18n'
-
-import { Pallet, PalletItem } from '../../types'
-import { ComponentDetail } from './component-detail'
-
-const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href
-
-export class ComponentMenu extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-content: stretch;
-
-        background-color: var(--component-menu-background-color, var(--md-sys-color-secondary-container));
-        color: var(--component-menu-color, var(--md-sys-color-on-secondary-container));
-        margin: 0px;
-        padding: 0px;
-
-        width: 180px;
-        height: 100%;
-
-        overflow: visible;
-
-        border: 2px solid var(--component-menu-border-color, var(--md-sys-color-secondary));
-        box-sizing: border-box;
-
-        position: absolute;
-        top: 0px;
-
-        z-index: 1;
-      }
-
-      h2 {
-        background-color: var(--component-menu-border-color, var(--md-sys-color-secondary));
-        padding: 1px 5px;
-        margin: 0;
-        font: var(--component-menu-title);
-        color: var(--md-sys-color-on-secondary);
-        text-transform: capitalize;
-      }
-
-      [templates] {
-        flex: 1;
-
-        display: block;
-        margin: 0;
-        padding: 0;
-        overflow-y: auto;
-
-        background-color: var(--component-menu-background-color, var(--md-sys-color-secondary-container));
-        color: var(--component-menu-color, var(--md-sys-color-on-secondary-container));
-      }
-
-      [template] {
-        display: flex;
-        align-items: center;
-        min-height: var(--component-menu-item-icon-size-height);
-        padding: 0 5px 0 0;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        font-size: 11px;
-        color: var(--component-menu-item-color, var(--md-sys-color-on-secondary-container));
-        text-transform: capitalize;
-      }
-
-      [template]:hover,
-      [template]:focus {
-        color: var(--component-menu-item-hover-color, var(--md-sys-color-secondary));
-        font-weight: bold;
-        cursor: pointer;
-      }
-
-      [template] img {
-        margin: 5px;
-        max-width: var(--component-menu-item-icon-size-width);
-        max-height: var(--component-menu-item-icon-size-height);
-      }
-
-      process-component-detail {
-        position: absolute;
-        top: 0;
-        left: 180px;
-        height: 100%;
-        width: calc(100vw - 510px);
-        outline: none;
-      }
-
-      process-component-detail[hidden] {
-        display: none;
-      }
-    `
-  ]
-
-  @property({ type: Object }) groups: Pallet[] = []
-  @property({ type: Object }) scene: Scene | null = null
-  @property({ type: String }) group: string | null = ''
-
-  @state() templates: PalletItem[] = []
-  @state() template: PalletItem | any
-
-  @query('process-component-detail') detail!: HTMLElement
-
-  static get scopedElements() {
-    return {
-      'process-component-detail': ComponentDetail
-    }
-  }
-
-  render() {
-    return this.group
-      ? html`
-          <h2 @click=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>
-
-          <div templates @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}>
-            ${(this.templates || []).map(template => {
-              const { type } = template
-
-              return html`
-                <div @click=${this.onClickTemplate} data-type=${type} template>
-                  <img src=${String(this.templateIcon(template))} />${i18next.t(`component.${type}`)}
-                </div>
-              `
-            })}
-          </div>
-
-          <process-component-detail
-            tabindex="-1"
-            @focusout=${() => {
-              this.template = null
-            }}
-            .template=${this.template}
-            hidden
-          >
-          </process-component-detail>
-        `
-      : html``
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('group')) {
-      if (!this.group) {
-        this.templates = []
-        this.setAttribute('hidden', '')
-      } else {
-        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []
-        this.removeAttribute('active')
-      }
-    }
-
-    if (changes.has('template')) {
-      this.template && this.template.about
-        ? this.detail.removeAttribute('hidden')
-        : this.detail.setAttribute('hidden', '')
-    }
-  }
-
-  findTemplate(type: string | null | undefined) {
-    this.template = type && this.templates.find(template => template.type == type)
-  }
-
-  onHoverComponent(e: MouseEvent) {
-    const button = e.target as HTMLElement
-    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))
-  }
-
-  onClickTemplate(e: MouseEvent) {
-    var item = e.target as HTMLElement
-    var type = item.closest('[data-type]')?.getAttribute('data-type')
-
-    if (!type) {
-      return
-    }
-
-    if (this.scene) {
-      this.template = this.templates.find(template => template.type == type)
-      this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)))
-    }
-
-    this.group = null
-  }
-
-  templateIcon(template: PalletItem) {
-    return template.icon || noImage
-  }
-}

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -1,196 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { property, query, queryAll } from 'lit/decorators.js'
-
-import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { ComponentGroup } from '../../types'
-import { ComponentMenu } from './component-menu.js'
-import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'
-
-export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    css`
-      :host {
-        left: 0;
-        display: block;
-        position: relative;
-
-        width: var(--component-toolbar-icon-size);
-        background-color: var(--component-toolbar-background-color);
-      }
-
-      [components] {
-        display: block;
-        padding: 0;
-        margin: 0;
-
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-
-      [components] > img {
-        display: flex;
-        flex-direction: row;
-
-        width: var(--component-toolbar-icon-size);
-        height: var(--component-toolbar-icon-size);
-        min-width: 50%;
-
-        border-bottom: var(--component-toolbar-border);
-        margin: 0;
-        padding: 6px;
-        box-sizing: border-box;
-      }
-
-      #shift[active] {
-        background-color: #beb9b3;
-      }
-
-      process-component-menu {
-        position: absolute;
-        top: 0;
-        left: var(--component-toolbar-icon-size);
-        height: 100%;
-        outline: none;
-      }
-
-      process-component-menu[hidden] {
-        display: none;
-      }
-    `
-  ]
-
-  @property({ type: Array }) componentGroupList: ComponentGroup[] = []
-  @property({ type: String }) group?: string | null
-  @property({ type: Object }) scene!: Scene
-  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT
-
-  @query('#shift') shift!: HTMLImageElement
-  @query('process-component-menu') private menu!: HTMLElement
-  @query('div[components]') private componentsContainer!: HTMLElement
-  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>
-
-  private icons: { [name: string]: string } = {}
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('componentGroupList')) {
-      const color = getComputedStyle(this, null).getPropertyValue('--md-sys-color-primary')
-
-      this.icons = (this.componentGroupList || [])
-        .filter(group => group.templates?.length > 0)
-        .reduce(
-          (sum, group: ComponentGroup) => {
-            sum[group.name] =
-              'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
-            return sum
-          },
-          {} as { [name: string]: string }
-        )
-
-      this.icons['mode-edit'] =
-        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))
-      this.icons['mode-shift'] =
-        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))
-    }
-
-    if (changes.has('group')) {
-      this.groups.forEach(group => {
-        group.getAttribute('data-group') === this.group
-          ? group.setAttribute('active', '')
-          : group.removeAttribute('active')
-      })
-
-      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')
-    }
-  }
-
-  static get scopedElements() {
-    return {
-      'process-component-menu': ComponentMenu
-    }
-  }
-
-  render() {
-    const componentList = this.componentGroupList || []
-    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']
-
-    return html`
-      <div components @mousewheel=${(e: MouseEvent) => this.onWheelEvent(e)}>
-        <img id="shift" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />
-
-        ${componentList
-          .filter(group => group.templates?.length > 0)
-          .map(
-            group => html`
-              <img
-                data-group=${group.name}
-                @click=${(e: MouseEvent) => this._onClickGroup(e)}
-                .src=${this.icons[group.name]}
-              />
-            `
-          )}
-      </div>
-
-      <process-component-menu
-        tabindex="-1"
-        @focusout=${() => {
-          this.group = null
-        }}
-        .scene=${this.scene}
-        .group=${this.group}
-        .groups=${componentList}
-        hidden
-      >
-      </process-component-menu>
-    `
-  }
-
-  onWheelEvent(e: Event) {
-    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
-    this.componentsContainer.scrollTop += delta * 10
-
-    e.preventDefault()
-  }
-
-  _setMode(mode: SCENE_MODE) {
-    this.mode = mode
-
-    this.dispatchEvent(
-      new CustomEvent('mode-changed', {
-        bubbles: true,
-        composed: true,
-        detail: { value: mode }
-      })
-    )
-  }
-
-  _onClickShift(e: MouseEvent) {
-    const shift = this.shift
-
-    if (shift.hasAttribute('active')) {
-      shift.removeAttribute('active')
-      this._setMode(SCENE_MODE.EDIT)
-    } else {
-      shift.setAttribute('active', '')
-      this._setMode(SCENE_MODE.SHIFT)
-    }
-  }
-
-  async _onClickGroup(e: MouseEvent) {
-    var button = e.target as HTMLElement
-
-    this.group = button!.closest('[data-group]')?.getAttribute('data-group')
-
-    if (!this.group) return
-
-    await this.updateComplete
-
-    this.menu?.focus()
-  }
-}