@operato/board 8.0.0-alpha.9 → 8.0.0-beta.1

package/src/component/shape.ts

@@ -1,156 +0,0 @@
-import { ComponentGroup } from '../types'
-
-const donut = new URL('../../../icons/components/donut.png', import.meta.url).href
-const ellipse = new URL('../../../icons/components/ellipse.png', import.meta.url).href
-const polygon = new URL('../../../icons/components/polygon.png', import.meta.url).href
-const rect = new URL('../../../icons/components/rect.png', import.meta.url).href
-const star = new URL('../../../icons/components/star.png', import.meta.url).href
-const triangle = new URL('../../../icons/components/triangle.png', import.meta.url).href
-
-const icon = `
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-  <style type="text/css">
-    .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
-  </style>
-  <g>
-    <polyline class="st0" points="21.6,9.4 21.6,4.6 1.6,4.6 1.6,17.7 12.5,17.7 	"/>
-    <circle class="st0" cx="21.3" cy="18.3" r="7"/>
-  </g>
-</svg>
-`
-
-export const shape: ComponentGroup = {
-  name: 'shape',
-  description: 'a group of simple basic shapes',
-  icon,
-  templates: [
-    {
-      type: 'rect',
-      description: 'rectangle shape',
-      icon: rect,
-      group: 'shape',
-      model: {
-        type: 'rect',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'ellipse',
-      description: 'ellipse shape',
-      icon: ellipse,
-      group: 'shape',
-      model: {
-        type: 'ellipse',
-        rx: 50,
-        ry: 50,
-        cx: 150,
-        cy: 150,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'donut',
-      description: 'donut shape',
-      icon: donut,
-      group: 'shape',
-      model: {
-        type: 'donut',
-        rx: 50,
-        ry: 50,
-        cx: 150,
-        cy: 150,
-        ratio: 30,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'triangle',
-      description: 'triangle shape',
-      icon: triangle,
-      group: 'shape',
-      model: {
-        type: 'triangle',
-        x1: 150,
-        y1: 100,
-        x2: 100,
-        y2: 200,
-        x3: 200,
-        y3: 200,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'polygon',
-      description: 'polygon shape',
-      icon: polygon,
-      group: 'shape',
-      model: {
-        type: 'polygon',
-        path: [
-          { x: 100, y: 100 },
-          { x: 200, y: 100 },
-          { x: 200, y: 200 },
-          { x: 100, y: 200 }
-        ],
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt',
-        round: 10
-      }
-    },
-    {
-      type: 'star',
-      description: 'star shape',
-      icon: star,
-      group: 'shape',
-      model: {
-        type: 'star',
-        rx: 50,
-        ry: 50,
-        cx: 150,
-        cy: 150,
-        ratio: 30,
-        wing: 5,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    }
-  ]
-}

package/src/component/table.ts

@@ -1,28 +0,0 @@
-import { ComponentGroup } from '../types'
-
-const icon = `
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-  <style type="text/css">
-    .st5{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
-    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}
-    .st10{fill:none;stroke:{{strokeColor}};stroke-width:0.5;stroke-miterlimit:10;}
-  </style>
-  <g>
-    <rect x="2.4" y="6" class="st9" width="25.2" height="18"/>
-    <rect x="11" y="12.5" transform="matrix(-1.742238e-05 1 -1 -1.742238e-05 35.0187 -4.9804)" class="st10" width="17.9" height="5.1"/>
-    <rect x="5.9" y="12.5" transform="matrix(-1.742238e-05 1 -1 -1.742238e-05 29.8973 0.1408)" class="st10" width="17.9" height="5.1"/>
-    <line class="st5" x1="2" y1="7.5" x2="28" y2="7.5"/>
-    <line class="st10" x1="2" y1="11.6" x2="28" y2="11.6"/>
-    <line class="st10" x1="2" y1="14.8" x2="28" y2="14.8"/>
-    <line class="st10" x1="2" y1="18.1" x2="28" y2="18.1"/>
-    <line class="st10" x1="2" y1="21.3" x2="28" y2="21.3"/>
-  </g>
-</svg>
-`
-
-export const table: ComponentGroup = {
-  name: 'table',
-  description: 'a group of various tables',
-  icon,
-  templates: []
-}

package/src/component/text-and-media.ts

@@ -1,125 +0,0 @@
-import { ComponentGroup } from '../types'
-
-const audio = new URL('../../../icons/components/audio.png', import.meta.url).href
-const colorImage = new URL('../../../icons/components/color-image.png', import.meta.url).href
-const gifImage = new URL('../../../icons/components/gif-image.png', import.meta.url).href
-const grayImage = new URL('../../../icons/components/gray-image.png', import.meta.url).href
-const text = new URL('../../../icons/components/text.png', import.meta.url).href
-
-const icon = `
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-  <style type="text/css">
-	  .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
-	  .st1{fill:{{strokeColor}};}
-  </style>
-  <g>
-	  <polyline class="st0" points="20.6,12.8 20.6,5.1 1.6,5.1 1.6,18 15,18"/>
-	  <path class="st1" d="M5.7,7.9c-0.9,0-1.6,0.7-1.6,1.6s0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6S6.6,7.9,5.7,7.9z"/>
-	  <polygon class="st1" points="12.8,8.6 8.5,14.7 5.9,12.7 3.2,16.1 15.1,16.1 15.2,13.7"/>
-	  <path class="st1" d="M24.1,15.1h2.1l0.6,2.8h1.7l-0.1-3.8H16.5l-0.1,3.8h1.7l0.4-2.8h2.1c0.1,2,0.1,3.1,0.1,5.2V21
-		  c0,1.6,0,1.9,0,2.7l-1.8,0.2V25h6.9v-1.1L24,23.7c0-0.9,0-1.1,0-2.7v-0.7C24,18.1,24,17,24.1,15.1z"/>
-  </g>
-</svg>
-`
-
-export const textAndMedia: ComponentGroup = {
-  name: 'textAndMedia',
-  description: 'a group of text and various media components',
-  icon,
-  templates: [
-    {
-      type: 'text',
-      description: 'text',
-      icon: text,
-      group: 'textAndMedia',
-      model: {
-        type: 'text',
-        left: 100,
-        top: 100,
-        width: 200,
-        height: 50,
-        text: 'Text',
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 5,
-        lineDash: 'solid',
-        lineCap: 'butt',
-        textAlign: 'left',
-        textBaseline: 'top',
-        textWrap: false,
-        fontFamily: 'serif',
-        fontSize: 30
-      }
-    },
-    {
-      type: 'color image',
-      description: 'color image',
-      icon: colorImage,
-      group: 'textAndMedia',
-      model: {
-        type: 'image-view',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        isGray: false,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'gray image',
-      description: 'gray image',
-      icon: grayImage,
-      group: 'textAndMedia',
-      model: {
-        type: 'image-view',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100,
-        isGray: true,
-        fillStyle: '#fff',
-        strokeStyle: '#000',
-        alpha: 1,
-        hidden: false,
-        lineWidth: 1,
-        lineDash: 'solid',
-        lineCap: 'butt'
-      }
-    },
-    {
-      type: 'gif image',
-      description: 'gif image',
-      icon: gifImage,
-      group: 'textAndMedia',
-      model: {
-        type: 'gif-view',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100
-      }
-    },
-    {
-      type: 'audio',
-      description: 'audio',
-      icon: audio,
-      group: 'textAndMedia',
-      model: {
-        type: 'audio',
-        left: 100,
-        top: 100,
-        width: 100,
-        height: 100
-      }
-    }
-  ]
-}

package/src/component/warehouse.ts

@@ -1,26 +0,0 @@
-import { ComponentGroup } from '../types'
-
-const icon = `
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-  <style type="text/css">
-    .st0{fill:{{strokeColor}};}
-    .st14{fill:none;stroke:{{strokeColor}};stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10;}
-    .st15{fill:none;stroke:{{strokeColor}};stroke-linecap:round;stroke-miterlimit:10;}
-  </style>
-  <g>
-    <polyline class="st14" points="1.5,11.2 15,5.2 28.5,11 	"/>
-    <line class="st15" x1="3.2" y1="11.6" x2="3.2" y2="23.8"/>
-    <line class="st15" x1="26.9" y1="11.6" x2="26.9" y2="23.8"/>
-    <line class="st5" x1="1.7" y1="24.8" x2="28.3" y2="24.8"/>
-    <rect x="21.1" y="18.3" class="st0" width="3.4" height="5.5"/>
-    <path class="st0" d="M5.9,13.6v10.2h13.8V13.6H5.9z M18.7,17.3H6.8v-2.4h11.9V17.3z"/>
-  </g>
-</svg>
-`
-
-export const warehouse: ComponentGroup = {
-  name: 'warehouse',
-  description: 'a group of various components used in a warehouse depiction',
-  icon,
-  templates: []
-}

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

@@ -1,76 +0,0 @@
-import Dexie from 'dexie'
-
-import { Component, PersistentDataStorage } from '@hatiolab/things-scene'
-
-class BoardDatabase extends Dexie {
-  board_data!: Dexie.Table<IBoardData, number> // number = type of the primkey
-  playlist_data!: Dexie.Table<IPlayListData, number> // number = type of the primkey
-  //...other tables goes here...
-
-  constructor() {
-    super('operato-board-database')
-    this.version(2).stores({
-      board_data: '[board+refid]',
-      playlist_data: '[playlist+dummy]'
-      //...other tables goes here...
-    })
-  }
-}
-
-interface IBoardData {
-  id?: number
-  board: string
-  refid: string | number
-  data: any
-  timestamp: number
-}
-
-interface IPlayListData {
-  id?: number
-  playlist: string
-  dummy: string | number // only for escaping schema error
-  setting: {
-    playtime: number
-    columns: number
-    rows: number
-  }
-  timestamp: number
-}
-
-const db = new BoardDatabase()
-
-export class BoardDataStorage implements PersistentDataStorage {
-  private id: string
-
-  constructor(id: string) {
-    this.id = id
-  }
-
-  public async load(key: Component): Promise<any> {
-    const saved = await db.board_data.where({ board: this.id, refid: key.state.refid }).first()
-    return saved?.data
-  }
-
-  public async save(key: Component, value: any): Promise<void> {
-    await db.board_data.put({ board: this.id, refid: key.state.refid, data: value, timestamp: Date.now() })
-  }
-
-  public async clear(key: Component): Promise<void> {
-    await db.board_data.where({ board: this.id, refid: key.state.refid }).delete()
-  }
-}
-
-export class PlaylistStorage implements PersistentDataStorage {
-  public async load(key: any): Promise<any> {
-    const saved = await db.playlist_data.where({ playlist: key }).first()
-    return saved?.setting
-  }
-
-  public async save(key: any, value: any): Promise<void> {
-    await db.playlist_data.put({ playlist: key, dummy: 1, setting: value, timestamp: Date.now() })
-  }
-
-  public async clear(key: any): Promise<void> {
-    await db.playlist_data.where({ playlist: key }).delete()
-  }
-}

package/src/graphql/board.ts

@@ -1,144 +0,0 @@
-import { buildArgs, client } from '@operato/graphql'
-
-import { Board } from '../types'
-import gql from 'graphql-tag'
-
-export async function fetchBoardList(listParam = {}) {
-  const response = await client.query({
-    query: gql`
-      {
-        boards(${buildArgs(listParam)}) {
-          items {
-            id
-            name
-            description
-            thumbnail
-            createdAt
-            updatedAt
-          }
-          total
-        }
-      }
-    `
-  })
-
-  return response.data
-}
-
-export async function fetchBoard(id: string) {
-  const response = await client.query({
-    query: gql`
-      query FetchBoardById($id: String!) {
-        board(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 createBoard(board: Board) {
-  /*
-    input NewBoard {
-      name        : String!
-      description : String
-      model       : String!
-      groupId     : String!
-    }
-  */
-
-  board.model = JSON.stringify(board.model)
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation CreateBoard($board: NewBoard!) {
-        createBoard(board: $board) {
-          id
-          name
-          description
-          model
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      board
-    }
-  })
-
-  return response.data
-}
-
-export async function updateBoard(board: Board) {
-  /*
-    input BoardPatch {
-      name        : String
-      description : String
-      model       : String
-    }
-    */
-  var { id, name, description, model, groupId } = board
-  model = JSON.stringify(model)
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
-        updateBoard(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 deleteBoard(id: string) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($id: String!) {
-        deleteBoard(id: $id)
-      }
-    `,
-    variables: {
-      id
-    }
-  })
-
-  return response.data
-}

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-board.ts

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