@operato/board 0.2.52 → 0.3.7

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

@@ -2,12 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/dist/src/ox-input-angle'
-import '@operato/input/dist/src/ox-buttons-radio'
+import '@operato/input/ox-input-angle.js'
+import '@operato/input/ox-buttons-radio.js'
 import '@material/mwc-icon'
 
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
 
@@ -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 { customElement, property } from 'lit/decorators'
+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-list.ts

@@ -1,16 +1,16 @@
-import '@operato/popup'
+import '@operato/popup/ox-popup.js'
 import '@operato/data-grist'
 
-import { Board, BoardGroup } from './types'
-import { ColumnConfig, GristData, GristRecord, SortersConfig } from '@operato/data-grist/dist/src/types'
-import { LitElement, css, html } from 'lit'
-import { createBoard, fetchBoardList } from './graphql/board'
-import { customElement, property, query, state } from 'lit/decorators'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { DataGrist } from '@operato/data-grist'
+import { ColumnConfig, DataGrist, GristData, GristRecord, SortersConfig } from '@operato/data-grist'
 import { OxPopup } from '@operato/popup'
+
+import { createBoard, fetchBoardList } from './graphql/board'
 import { fetchFavoriteBoardList } from './graphql/favorite-board'
 import { fetchGroupList } from './graphql/group'
+import { Board } from './types'
 
 @customElement('ox-board-list')
 class BoardList extends LitElement {

package/src/ox-board-modeller.ts

@@ -6,18 +6,32 @@ import './modeller/edit-toolbar'
 import '@hatiolab/things-scene'
 import './ox-board-viewer'
 
-import { ComponentGroup, ComponentTemplate } from './types'
-import { LitElement, css, html } from 'lit'
-import { Model, SCENE_MODE, Scene } from '@hatiolab/things-scene'
+import { saveAs } from 'file-saver'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { EditToolbar } from './modeller/edit-toolbar'
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
 import { OxPopup } from '@operato/popup'
-import { saveAs } from 'file-saver'
+
+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')
@@ -169,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/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "outDir": "dist",
     "sourceMap": true,

package/web-dev-server.config.mjs

@@ -1,4 +1,5 @@
 // import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+import image from '@rollup/plugin-image'
 
 /** Use Hot Module replacement by adding --hmr to the start command */
 const hmr = process.argv.includes('--hmr')
@@ -20,6 +21,7 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   // },
 
   plugins: [
+    image()
     /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
     // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
   ]