@operato/property-panel 9.2.1 → 10.0.0-beta.2

package/src/graphql/play-group.ts

@@ -1,225 +0,0 @@
-import { PlayGroup } from '../types.js'
-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,8 +0,0 @@
-export { OxPropertyPanel } from './ox-property-panel.js'
-
-export * from './property-panel/data-binding/data-binding.js'
-export * from './property-panel/effects/effects.js'
-export * from './property-panel/inspector/inspector.js'
-export * from './property-panel/shapes/shapes.js'
-export * from './property-panel/specifics/specifics.js'
-export * from './property-panel/styles/styles.js'

package/src/ox-property-panel.ts

@@ -1,347 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import deepClone from 'lodash-es/cloneDeep.js'
-
-import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { PropertyDataBinding } from './property-panel/data-binding/data-binding.js'
-import { PropertyEffects } from './property-panel/effects/effects.js'
-import { SceneInspector } from './property-panel/inspector/inspector.js'
-import { PropertyShapes } from './property-panel/shapes/shapes.js'
-// import { PropertySpecific } from './property-panel/specifics/specifics.js'
-import { PropertyStyles } from './property-panel/styles/styles.js'
-
-@customElement('ox-property-panel')
-export class OxPropertyPanel extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        border-left: 1px solid var(--md-sys-color-border, #ccc);
-        width: 270px;
-        display: flex;
-        flex-direction: column;
-        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
-        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));
-        user-select: none;
-
-        --input-padding: var(--spacing-small);
-        --label-font: var(--property-sidebar-fieldset-label, roboto);
-      }
-
-      [tab] {
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.08);
-        opacity: 0.85;
-      }
-
-      [tab] md-icon {
-        flex: 1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        color: var(--property-sidebar-tab-icon-color);
-        height: 40px;
-      }
-
-      [tab] [selected] {
-        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
-        border-left: 1px solid rgba(255, 255, 255, 0.5);
-        border-right: 1px solid rgba(0, 0, 0, 0.15);
-        opacity: 1;
-      }
-
-      [content] {
-        flex: 1;
-
-        overflow: hidden;
-        overflow-y: auto;
-
-        --md-icon-size: 22px;
-      }
-
-      [content] > :not([active]) {
-        display: none;
-      }
-    `
-  ]
-
-  @property({ type: Object }) scene: Scene | null = null
-  @property({ type: Object }) bounds: any = {}
-  @property({ type: Object }) model: Model | null = {}
-  @property({ type: Array }) selected: Component[] = []
-  @property({ type: Array }) specificProps: any
-  @property({ type: String }) tabName: string | null = 'shape'
-  @property({ type: Boolean }) collapsed: boolean = false
-  @property({ type: Array }) fonts: any[] = []
-  @property({ type: Array }) propertyEditor: any[] = []
-
-  propertyTarget: Component | null = null
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)
-    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)
-  }
-
-  updated(change: PropertyValues<this>) {
-    change.has('scene') && this.onSceneChanged()
-    change.has('selected') && this.onSelectedChanged(this.selected)
-    change.has('collapsed') && this.onCollapsed(this.collapsed)
-  }
-
-  static get scopedElements() {
-    return {
-      'property-shape': PropertyShapes,
-      'property-style': PropertyStyles,
-      'property-effect': PropertyEffects,
-      // 'property-specific': PropertySpecific,
-      'property-data-binding': PropertyDataBinding,
-      'scene-inspector': SceneInspector
-    }
-  }
-
-  render() {
-    var tabName = this.tabName ? this.tabName : 'shape'
-
-    return html`
-      <div
-        tab
-        @click=${(e: MouseEvent) => {
-          this.tabName = (e.target as HTMLElement).getAttribute('name')
-        }}
-      >
-        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
-        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
-        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
-        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
-        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
-        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
-      </div>
-
-      <div content>
-        ${html`
-          ${{
-            shape: html`
-              <property-shape
-                .value=${this.model}
-                .bounds=${this.bounds}
-                .selected=${this.selected}
-                ?active=${tabName == 'shape'}
-                ?is-line=${this.isLine(this.selected)}
-              >
-              </property-shape>
-            `,
-            style: html`
-              <property-style
-                .value=${this.model}
-                .selected=${this.selected}
-                .fonts=${this.fonts}
-                ?active=${tabName == 'style'}
-              >
-              </property-style>
-            `,
-            effect: html`
-              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
-              </property-effect>
-            `,
-            specific: html`
-              <property-specific
-                .value=${this.model}
-                .scene=${this.scene}
-                .selected=${this.selected}
-                .props=${this.specificProps}
-                .propertyEditor=${this.propertyEditor}
-                ?active=${tabName == 'specific'}
-              >
-              </property-specific>
-            `,
-            'data-binding': html`
-              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>
-              </property-data-binding>
-            `,
-            inspector: html`
-              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>
-            `
-          }[this.tabName!]}
-        `}
-      </div>
-    `
-  }
-
-  private onPropertyChanged(e: CustomEvent) {
-    var detail = e.detail
-
-    if (this.propertyTarget) {
-      /* 단일 컴포넌트의 경우에 적용 */
-      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))
-    } else {
-      /* 여러 컴포넌트의 경우에 적용 */
-      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))
-    }
-  }
-
-  private onBoundsChanged(e: CustomEvent) {
-    var detail = e.detail
-
-    if (!this.scene) {
-      return
-    }
-
-    if (this.propertyTarget) {
-      /* 단일 컴포넌트의 경우에 적용 */
-      this.scene.undoableChange(() => {
-        this.propertyTarget!.bounds = {
-          ...this.propertyTarget!.bounds,
-          ...detail
-        }
-      })
-    } else {
-      /* 여러 컴포넌트의 경우에 적용 */
-      this.scene.undoableChange(() => {
-        this.selected.forEach(component => {
-          component.bounds = {
-            ...component.bounds,
-            ...detail
-          }
-        })
-      })
-    }
-  }
-
-  private onChangedByScene() {
-    if (this.propertyTarget) {
-      this.model = {
-        ...this.propertyTarget.model
-      }
-      this.setBounds(this.propertyTarget.bounds)
-    }
-  }
-
-  private setPropertyTargetAsDefault() {
-    if (!this.scene) {
-      this.setPropertyTarget(null)
-      this.specificProps = []
-      this.model = null
-      this.bounds = {}
-    } else {
-      this.scene.select('model-layer')
-    }
-  }
-
-  private onCollapsed(collapsed: boolean) {
-    !collapsed && (this.style.display = '')
-
-    this.animate(
-      collapsed
-        ? [
-            { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },
-            { transform: 'translateX(100%)', opacity: 1 }
-          ]
-        : [
-            { transform: 'translateX(100%)', opacity: 1 },
-            { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }
-          ],
-      {
-        duration: 500
-      }
-    ).onfinish = () => {
-      collapsed && (this.style.display = 'none')
-      dispatchEvent(new Event('resize'))
-    }
-  }
-
-  private async onSceneChanged() {
-    await this.updateComplete
-
-    if (this.scene) this.selected = this.scene.select('model-layer')
-  }
-
-  private async onSelectedChanged(after: Component[]) {
-    await this.updateComplete
-
-    if (after.length == 1) {
-      this.setPropertyTarget(after[0])
-      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.
-      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.
-      this.specificProps = deepClone(this.propertyTarget!.nature.properties)
-      this.model = {
-        ...this.propertyTarget!.model
-      }
-      this.setBounds(this.propertyTarget!.bounds)
-    } else if (after.length == 0) {
-      // 선택이 안된 경우
-
-      this.setPropertyTargetAsDefault()
-    } else {
-      // 다중 선택된 경우
-
-      var type = after[0].model.type
-      for (let i = 1; i < after.length; i++) {
-        if (after[i].model.type != type) {
-          type = undefined
-          break
-        }
-      }
-
-      this.setPropertyTarget(null)
-
-      if (type) this.specificProps = deepClone(after[0].nature.properties)
-      else this.specificProps = null
-
-      this.model = {
-        type: type,
-        alpha: 1
-      }
-      this.bounds = {}
-    }
-  }
-
-  private setPropertyTarget(newTarget: Component | null) {
-    var oldTarget = this.propertyTarget
-
-    if (oldTarget) {
-      oldTarget.off('change', this.onChangedByScene, this)
-    }
-    if (newTarget) {
-      newTarget.on('change', this.onChangedByScene, this)
-    }
-
-    this.propertyTarget = newTarget
-  }
-
-  private setBounds(bounds: BOUNDS) {
-    this.bounds = {
-      left: bounds.left,
-      top: bounds.top,
-      width: Math.round(bounds.width),
-      height: Math.round(bounds.height)
-    }
-  }
-
-  private isLine(selected: Component[]) {
-    var isLine = false
-
-    for (var i = 0; i < selected.length; i++) {
-      var comp = selected[i]
-
-      if (!comp.isLine || !comp.isLine()) {
-        isLine = false
-        return isLine
-      }
-
-      isLine = true
-    }
-
-    return isLine
-  }
-}