@operato/board 0.3.2 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "0.3.2",
+  "version": "0.3.9",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -49,24 +49,23 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/data-grist": "^0.3.2",
-    "@operato/graphql": "^0.3.2",
-    "@operato/input": "^0.3.2",
-    "@operato/layout": "^0.3.2",
-    "@operato/markdown": "^0.3.2",
-    "@operato/popup": "^0.3.2",
-    "@operato/property-editor": "^0.3.2",
-    "@operato/styles": "^0.3.2",
+    "@operato/data-grist": "^0.3.9",
+    "@operato/graphql": "^0.3.9",
+    "@operato/input": "^0.3.9",
+    "@operato/markdown": "^0.3.9",
+    "@operato/popup": "^0.3.9",
+    "@operato/property-editor": "^0.3.9",
+    "@operato/styles": "^0.3.9",
+    "@operato/utils": "^0.3.9",
     "@polymer/paper-dropdown-menu": "^3.2.0",
-    "@things-factory/help": "^4.0.24",
-    "@things-factory/modeller-ui": "^4.0.24",
+    "@things-factory/help": "^4.0.27",
+    "@things-factory/modeller-ui": "^4.0.27",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "file-saver": "^2.0.5",
     "lit": "^2.0.2",
     "lodash": "^4.17.21",
-    "sortablejs": "^1.14.0",
-    "swipe-listener": "^1.3.0"
+    "sortablejs": "^1.14.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -107,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "889594ff0f6a6da8bd1d97163cd808d997d16dd9"
+  "gitHead": "d63971adcea045ccd788ff4ae5b9e2ca561bb754"
 }

package/src/component/container.ts

@@ -1,6 +1,7 @@
 import { ComponentGroup } from '../types'
-import iconContainer from '../../../assets/images/components/container.png'
-import popup from '../../../assets/images/components/popup.png'
+
+const iconContainer = new URL('../../../icons/components/container.png', import.meta.url).href
+const popup = new URL('../../../icons/components/popup.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">

package/src/component/etc.ts

@@ -1,7 +1,8 @@
 import { ComponentGroup } from '../types'
-import globalReference from '../../../assets/images/components/global-reference.png'
-import infoWindow from '../../../assets/images/components/info-window.png'
-import localReference from '../../../assets/images/components/local-reference.png'
+
+const globalReference = new URL('../../../icons/components/global-reference.png', import.meta.url).href
+const infoWindow = new URL('../../../icons/components/info-window.png', import.meta.url).href
+const localReference = new URL('../../../icons/components/local-reference.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">

package/src/component/line.ts

@@ -1,9 +1,10 @@
 import { ComponentGroup } from '../types'
-import bothArrow from '../../../assets/images/components/both-arrow.png'
-import dash from '../../../assets/images/components/dash.png'
-import lineIcon from '../../../assets/images/components/line.png'
-import polyline from '../../../assets/images/components/polyline.png'
-import singleArrow from '../../../assets/images/components/single-arrow.png'
+
+const bothArrow = new URL('../../../icons/components/both-arrow.png', import.meta.url).href
+const dash = new URL('../../../icons/components/dash.png', import.meta.url).href
+const lineIcon = new URL('../../../icons/components/line.png', import.meta.url).href
+const polyline = new URL('../../../icons/components/polyline.png', import.meta.url).href
+const singleArrow = new URL('../../../icons/components/single-arrow.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">

package/src/component/shape.ts

@@ -1,10 +1,11 @@
 import { ComponentGroup } from '../types'
-import donut from '../../../assets/images/components/donut.png'
-import ellipse from '../../../assets/images/components/ellipse.png'
-import polygon from '../../../assets/images/components/polygon.png'
-import rect from '../../../assets/images/components/rect.png'
-import star from '../../../assets/images/components/star.png'
-import triangle from '../../../assets/images/components/triangle.png'
+
+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">

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

@@ -1,9 +1,10 @@
 import { ComponentGroup } from '../types'
-import audio from '../../../assets/images/components/audio.png'
-import colorImage from '../../../assets/images/components/color-image.png'
-import gifImage from '../../../assets/images/components/gif-image.png'
-import grayImage from '../../../assets/images/components/gray-image.png'
-import text from '../../../assets/images/components/text.png'
+
+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">

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

@@ -4,13 +4,15 @@
 
 import './component-detail'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { Pallet, PalletItem } from '../../types'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { Scene } from '@hatiolab/things-scene'
 import { ScrollbarStyles } from '@operato/styles'
-import noImage from '../../../../assets/images/components/no-image.png'
+
+import { Pallet, PalletItem } from '../../types'
+
+const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href
 
 @customElement('component-menu')
 class ComponentMenu extends LitElement {

package/src/modeller/edit-toolbar-style.ts

@@ -43,7 +43,7 @@ export const style = css`
   span[button] {
     min-height: 35px;
 
-    background: url('/assets/images/icon-htoolbar.png') no-repeat;
+    background: var(--url-icon-htoolbar) no-repeat;
     background-position-x: 50%;
     opacity: 0.8;
   }
@@ -209,20 +209,20 @@ export const style = css`
 
   /* bigger buttons */
   #fullscreen {
-    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;
+    background: var(--url-icon-fullscreen) 50% 10px no-repeat;
     width: var(--edit-toolbar-bigger-icon-size);
     height: var(--edit-toolbar-bigger-icon-size);
     border-left: var(--edit-toolbar-bigger-icon-line);
   }
 
   #toggle-property {
-    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;
+    background: var(--url-icon-collapse) 80% 10px no-repeat;
     width: var(--edit-toolbar-bigger-icon-size);
     height: var(--edit-toolbar-bigger-icon-size);
     border-left: var(--edit-toolbar-bigger-icon-line);
   }
 
   #toggle-property[active] {
-    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;
+    background: var(--url-icon-collapse-active) 80% 10px no-repeat;
   }
 `

package/src/modeller/edit-toolbar.ts

@@ -2,9 +2,10 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import { html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
 import { Component, Scene } from '@hatiolab/things-scene'
-import { LitElement, PropertyValues, html } from 'lit'
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js'
 
 import { style } from './edit-toolbar-style'
 

package/src/modeller/property-sidebar/effects/property-shadow.ts

@@ -4,10 +4,11 @@
 
 import '@things-factory/modeller-ui/client/editors/things-editor-color'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
+
 import { convert } from './value-converter'
 
 /**
@@ -55,7 +56,7 @@ export default class PropertyShadow extends LitElement {
 
       .icon-only-label {
         grid-column: span 3;
-        background: url(/assets/images/icon-properties-label.png) no-repeat;
+        background: var(--url-icon-properties-label) no-repeat;
         float: left;
         margin: 0;
         align-self: stretch;

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -1,9 +1,9 @@
-import { Component, Container, Properties, Scene } from '@hatiolab/things-scene'
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-
 import Sortable from 'sortablejs'
 
+import { Component, Container, Scene } from '@hatiolab/things-scene'
+
 @customElement('scene-inspector')
 export default class SceneInspector extends LitElement {
   static styles = [
@@ -56,7 +56,7 @@ export default class SceneInspector extends LitElement {
       .collapsed::before,
       .extended::before,
       .collapsespace::before {
-        background: url(/assets/images/icon-shell-inspector.png) no-repeat;
+        background: var(--url-icon-shell-inspector) no-repeat;
         width: 16px;
         height: 18px;
         display: inline-block;

package/src/modeller/property-sidebar/property-shared-style.ts

@@ -102,7 +102,7 @@ export const PropertySharedStyle = css`
   .icon-only-label {
     grid-column: span 1;
 
-    background: url(/assets/images/icon-properties-label.png) no-repeat;
+    background: var(--url-icon-properties-label) no-repeat;
     float: left;
     margin: 0;
     align-self: stretch;

package/src/modeller/property-sidebar/property-sidebar.ts

@@ -10,12 +10,12 @@ import './specifics/specifics'
 import './data-binding/data-binding'
 import './inspector/inspector'
 
-import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import deepClone from 'lodash/cloneDeep'
 
+import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
 import { ScrollbarStyles } from '@operato/styles'
-import deepClone from 'lodash/cloneDeep'
 
 @customElement('property-sidebar')
 class PropertySidebar extends LitElement {

package/src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts

@@ -6,7 +6,7 @@ export const BoxPaddingEditorStyles = css`
   }
 
   .box-padding td {
-    background: url(/assets/images/icon-properties-padding.png) 50% 0 no-repeat;
+    background: var(--url-icon-properties-padding) 50% 0 no-repeat;
   }
 
   .box-padding tr:nth-child(1),

package/src/modeller/property-sidebar/shapes/shapes.ts

@@ -39,7 +39,7 @@ class PropertyShapes extends AbstractProperty {
     `,
     css`
       .icon-label label {
-        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;
+        background: var(--url-icon-properties-label) 7px -900px no-repeat;
       }
 
       .icon-label label.width {
@@ -94,7 +94,7 @@ class PropertyShapes extends AbstractProperty {
       }
 
       ox-buttons-radio div {
-        background: url(/assets/images/icon-properties.png) no-repeat;
+        background: var(--url-icon-properties) no-repeat;
       }
 
       ox-buttons-radio div[data-value='left'] {

package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts

@@ -4,11 +4,11 @@
 
 import '@things-factory/modeller-ui/client/editors/things-editor-property'
 
-import { LitElement, PropertyValues } from 'lit'
+import { html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { OxPropertyEditor } from '@operato/property-editor'
 import { Properties } from '@hatiolab/things-scene'
+import { OxPropertyEditor } from '@operato/property-editor'
 
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
@@ -63,8 +63,12 @@ class SpecificPropertiesBuilder extends LitElement {
   @property({ type: Array }) props: any[] = []
   @property({ type: Object }) propertyEditor: any
 
+  render() {
+    return html`<slot></slot>`
+  }
+
   firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))
+    this.addEventListener('change', this._onValueChanged.bind(this))
   }
 
   updated(changes: PropertyValues<this>) {
@@ -73,7 +77,7 @@ class SpecificPropertiesBuilder extends LitElement {
   }
 
   _onPropsChanged(props: any[]) {
-    this.renderRoot.textContent = ''
+    this.textContent = ''
     ;(props || []).forEach(prop => {
       let elementType = OxPropertyEditor.getEditor(prop.type)
       if (!elementType) {
@@ -93,16 +97,16 @@ class SpecificPropertiesBuilder extends LitElement {
       element.property = prop.property
       element.setAttribute('property-editor', 'true')
 
-      this.renderRoot.appendChild(element)
+      this.appendChild(element)
     })
   }
 
   _setValues() {
     this.value &&
-      Array.from(this.renderRoot.querySelectorAll('[name]')).forEach((prop: Properties) => {
+      Array.from(this.querySelectorAll('[name]')).forEach((prop: Properties) => {
         let name = prop.getAttribute('name')
         var convertedValue = convertValue(prop.type, this.value[name])
-        if (convertedValue == undefined) convertedValue = (DEFAULT_VALUE as any)[prop.type]
+        if (convertedValue === undefined) convertedValue = (DEFAULT_VALUE as any)[prop.type]
         prop.value = convertedValue
         prop.observe && prop.observe.call(prop, prop.value)
       })

package/src/modeller/property-sidebar/styles/styles.ts

@@ -39,7 +39,7 @@ class PropertyStyles extends AbstractProperty {
         display: inline-block;
         border-bottom: 2px solid #fff;
 
-        background: url(/assets/images/icon-properties.png) no-repeat;
+        background: var(--url-icon-properties) no-repeat;
         background-size: 70%;
       }
 
@@ -68,7 +68,7 @@ class PropertyStyles extends AbstractProperty {
         max-width: 100px;
       }
       .line-type paper-item {
-        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat;
+        background: var(--url-icon-properties-line-type) 50% 0 no-repeat;
         min-height: 25px;
         padding: 3px 9px;
         width: 80px;
@@ -100,7 +100,7 @@ class PropertyStyles extends AbstractProperty {
       }
 
       .line-type .paper-input-container input {
-        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat !important;
+        background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;
       }
       .line-type.solid .paper-input-container input {
         background-position: 50% 5px !important;
@@ -132,7 +132,7 @@ class PropertyStyles extends AbstractProperty {
         max-width: 140px;
       }
       .arrow-type paper-item {
-        background: url(/assets/images/icon-properties-arrow-type.png) 50% 0 no-repeat;
+        background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
         min-height: 30px;
         padding: 3px 7px;
         width: 30px;
@@ -230,7 +230,7 @@ class PropertyStyles extends AbstractProperty {
       }
 
       .arrow-type .paper-input-container input {
-        background: url(/assets/images/icon-properties-arrow-type.png) 110% 0 no-repeat !important;
+        background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;
       }
       .arrow-type.begin-no .paper-input-container input {
         background-position: 110% 5px !important;

package/src/ox-board-modeller.ts

@@ -12,13 +12,26 @@ import { customElement, property, query } from 'lit/decorators.js'
 
 import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
 import { OxPopup } from '@operato/popup'
+import { togglefullscreen } from '@operato/utils'
 
 import { EditToolbar } from './modeller/edit-toolbar'
 import { ComponentGroup, ComponentTemplate } from './types'
-import { togglefullscreen } from './utils/fullscreen'
 
 const isMacOS = navigator.userAgent.indexOf('Mac') != -1
 
+const ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href
+const ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href
+const ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href
+const ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href
+const ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href
+
+const ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href
+const ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href
+const ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href
+const ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href
+
+const ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href
+
 var Registry: ComponentGroup[] = []
 
 @customElement('ox-board-modeller')
@@ -170,6 +183,19 @@ export class BoardModeller extends LitElement {
       ids = ids.filter(id => !!id).sort()
       callback(ids)
     })
+
+    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)
+    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)
+    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)
+    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)
+    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)
+
+    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)
+    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)
+    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)
+    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)
+
+    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)
   }
 
   render() {

package/src/ox-board-player.ts

@@ -3,11 +3,11 @@ import '@material/mwc-icon'
 import './player/ox-board-wrapper'
 import './player/ox-board-player-carousel'
 
-import { LitElement, PropertyValues, html } from 'lit'
+import { html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
-import { exitfullscreen, togglefullscreen } from './utils/fullscreen'
 
-import { SwipeListener } from './utils/swipe-listener'
+import { exitfullscreen, SwipeListener, togglefullscreen } from '@operato/utils'
+
 import { style } from './ox-board-player-style'
 
 @customElement('ox-board-player')

package/src/ox-board-viewer.ts

@@ -1,12 +1,11 @@
 import '@material/mwc-fab'
 import '@material/mwc-icon'
 
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { SCENE_MODE, create } from '@hatiolab/things-scene'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { isIOS } from './utils/os'
-import { togglefullscreen } from './utils/fullscreen'
+import { create, SCENE_MODE } from '@hatiolab/things-scene'
+import { isIOS, togglefullscreen } from '@operato/utils'
 
 @customElement('ox-board-viewer')
 export class BoardViewer extends LitElement {

package/@types/global/index.d.ts

@@ -1 +0,0 @@
-declare module '*.png'

package/dist/src/utils/fullscreen.d.ts

@@ -1,14 +0,0 @@
-/**
- * 풀스크린 전환 이후와 풀스크린 해제 이후에 호출되는 콜백함수
- * @callback FullscreenCallback
- */
-export declare type FullscreenCallback = () => void;
-/**
- * 엘리먼트를 풀스크린으로 표시되도록 한다.
- * @param {HTMLElement} element 대상 엘리먼트
- * @param {FullscreenCallback} afterfull 풀스크린이 된 이후에 호출되는 콜백함수
- * @param {FullscreenCallback} afterfinish 풀스크린이 해제된 이후에 호출되는 콜백함수
- */
-export declare function fullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback): void;
-export declare function exitfullscreen(): void;
-export declare function togglefullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback): void;