@operato/board 8.0.0-beta.0 → 8.0.0-beta.10

package/src/graphql/play-group.ts

@@ -1,225 +0,0 @@
-import { PlayGroup } from '../types'
-import { client } from '@operato/graphql'
-import gql from 'graphql-tag'
-
-export async function playlists(): Promise<{ name: string; description: string }[]> {
-  const response = await client.query({
-    query: gql`
-      {
-        playGroups {
-          items {
-            id
-            name
-            description
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data.playGroups.items
-}
-
-export async function fetchPlayGroupList() {
-  const response = await client.query({
-    query: gql`
-      {
-        playGroups {
-          items {
-            id
-            name
-            description
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data
-}
-
-export async function fetchPlayGroup(groupId: string) {
-  const response = await client.query({
-    query: gql`
-      query FetchPlayGroup($id: String!) {
-        playGroup(id: $id) {
-          id
-          name
-          description
-          boards {
-            id
-            name
-            description
-            model
-            thumbnail
-            createdAt
-            creator {
-              id
-              name
-            }
-            updatedAt
-            updater {
-              id
-              name
-            }
-          }
-          createdAt
-          creator {
-            id
-            name
-          }
-          updatedAt
-          updater {
-            id
-            name
-          }
-        }
-      }
-    `,
-    variables: {
-      id: groupId
-    }
-  })
-
-  return response.data
-}
-
-export async function fetchPlayGroupByName(name: string) {
-  const response = await client.query({
-    query: gql`
-      query FetchPlayGroupByName($name: String!) {
-        playGroupByName(name: $name) {
-          id
-        }
-      }
-    `,
-    variables: {
-      name
-    }
-  })
-
-  return response.data.playGroupByName
-}
-
-export async function createPlayGroup(group: PlayGroup) {
-  var { name, description } = group
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {
-        createPlayGroup(playGroup: $playGroup) {
-          id
-          name
-          description
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      playGroup: { name, description }
-    }
-  })
-
-  return response.data
-}
-
-export async function updatePlayGroup(group: PlayGroup) {
-  var { id, name, description } = group
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {
-        updatePlayGroup(id: $id, patch: $patch) {
-          id
-          name
-          description
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id,
-      patch: { name, description }
-    }
-  })
-
-  return response.data
-}
-
-export async function deletePlayGroup(id: string) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($id: String!) {
-        deletePlayGroup(id: $id)
-      }
-    `,
-    variables: {
-      id
-    }
-  })
-  return response.data
-}
-
-export async function joinPlayGroup(boardId: string, group: PlayGroup) {
-  var { id, name, description } = group
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {
-        joinPlayGroup(id: $id, boardIds: $boardIds) {
-          id
-          name
-          description
-          boards {
-            id
-            name
-            description
-            createdAt
-            updatedAt
-          }
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id,
-      boardIds: [boardId]
-    }
-  })
-
-  return response.data
-}
-
-export async function leavePlayGroup(boardId: string, groupId: string) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($id: String!, $boardIds: [String]!) {
-        leavePlayGroup(id: $id, boardIds: $boardIds) {
-          id
-          name
-          description
-          boards {
-            id
-            name
-            description
-            createdAt
-            updatedAt
-          }
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id: groupId,
-      boardIds: [boardId]
-    }
-  })
-
-  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,10 +0,0 @@
-export * from './types.js'
-
-export { registerDefaultGroups } from './component/register-default-groups.js'
-export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'
-
-export * from './ox-board-viewer.js'
-export * from './ox-board-player.js'
-export * from './ox-board-modeller.js'
-export * from './ox-board-list.js'
-export * from './ox-board-template-viewer.js'

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

@@ -1,52 +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: 10px;
-
-        width: 360px;
-        height: 100%;
-
-        overflow: hidden;
-
-        border: 2px solid var(--component-detail-border-color);
-        box-sizing: border-box;
-
-        position: absolute;
-        top: 0px;
-
-        z-index: 1;
-      }
-
-      ox-markdown {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Object }) template: { about: string } | null = null
-
-  render() {
-    const { about } = this.template || {}
-
-    return html` <ox-markdown .src=${about}></ox-markdown> `
-  }
-}

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

@@ -1,196 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-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);
-        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;
-        width: var(--component-menu-item-icon-size);
-        height: var(--component-menu-item-icon-size);
-      }
-
-      component-detail {
-        position: absolute;
-        top: 0;
-        left: 180px;
-        height: 100%;
-        outline: none;
-      }
-
-      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('component-detail') detail!: HTMLElement
-
-  static get scopedElements() {
-    return {
-      'component-detail': ComponentDetail
-    }
-  }
-
-  render() {
-    return this.group
-      ? html`
-          <h2 onclick=${(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>
-
-          <component-detail
-            tabindex="-1"
-            @focusout=${() => {
-              this.template = null
-            }}
-            .template=${this.template}
-            hidden
-          >
-          </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
-  }
-}