@operato/board 1.0.0-alpha.2 → 1.0.0-alpha.20

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

@@ -26,10 +26,6 @@ export class AbstractProperty extends LitElement {
     var value
 
     switch (element.tagName) {
-      case 'THINGS-EDITOR-ANGLE-INPUT':
-        value = Number((element as any).radian) || 0
-        break
-
       case 'INPUT':
         switch ((element as any).type) {
           case 'checkbox':

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -2,16 +2,15 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-value-map'
-import '@things-factory/modeller-ui/client/editors/things-editor-value-range'
+import '@operato/input/ox-input-value-map.js'
+import '@operato/input/ox-input-value-ranges.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
+import { LitElement, PropertyValues, css, html } from 'lit'
 import { Properties, Scene } from '@hatiolab/things-scene'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 export type Rule =
   | {
@@ -220,21 +219,21 @@ export default class DataBindingMapper extends LitElement {
       </ox-buttons-radio>
 
       <div rule-editors class="content" ?hidden=${mapping.rule == 'value'}>
-        <things-editor-value-map
+        <ox-input-value-map
           value-key="map"
           .value=${this.rule.map || {}}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'map'}
         >
-        </things-editor-value-map>
+        </ox-input-value-map>
 
-        <things-editor-value-range
+        <ox-input-value-ranges
           value-key="range"
           .value=${this.rule.range || []}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'range'}
         >
-        </things-editor-value-range>
+        </ox-input-value-ranges>
 
         <ox-input-code
           value-key="eval"

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

@@ -29,7 +29,7 @@ export const EffectsSharedStyle = css`
   input,
   select,
   ox-input-angle,
-  things-editor-color,
+  ox-input-color,
   [custom-editor] {
     grid-column: span 7;
   }
@@ -37,7 +37,7 @@ export const EffectsSharedStyle = css`
   input,
   select,
   ox-input-angle input,
-  things-editor-color input,
+  ox-input-color input,
   [custom-editor] input {
     border: var(--property-sidebar-fieldset-border);
   }

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

@@ -2,14 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
 import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
 
-import { css, html, LitElement } from 'lit'
+import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
-
 import { convert } from './value-converter'
 
 /**
@@ -48,7 +47,7 @@ export default class PropertyShadow extends LitElement {
       }
 
       input[type='number'],
-      things-editor-color {
+      ox-input-color {
         grid-column: span 7;
       }
       input[type='number'] {
@@ -93,7 +92,7 @@ export default class PropertyShadow extends LitElement {
 
       <label class="icon-only-label color"></label>
 
-      <things-editor-color value-key="color" .value=${value.color}> </things-editor-color>
+      <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
     `
   }
 

package/src/modeller/property-sidebar/effects/value-converter.ts

@@ -1,8 +1,5 @@
 export function convert(element: any) {
   switch (element.tagName) {
-    case 'THINGS-EDITOR-ANGLE-INPUT':
-      return Number(element.radian) || 0
-
     case 'INPUT':
       switch (element.type) {
         case 'checkbox':

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

@@ -52,7 +52,7 @@ export const PropertySharedStyle = css`
   .property-grid > select,
   .property-grid > ox-input-angle,
   .property-grid > ox-buttons-radio,
-  .property-grid > things-editor-color,
+  .property-grid > ox-input-color,
   [custom-editor] {
     grid-column: span 7;
     align-self: stretch;

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

@@ -2,13 +2,13 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@things-factory/modeller-ui/client/editors/things-editor-property'
+import '@operato/app/property-editor.js' /* for registering property editors */
 
-import { html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Properties } from '@hatiolab/things-scene'
 import { OxPropertyEditor } from '@operato/property-editor'
+import { Properties } from '@hatiolab/things-scene'
 
 /**
 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.

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

@@ -4,17 +4,16 @@
 
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@operato/help/ox-title-with-help.js'
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
-import '@things-factory/modeller-ui/client/editors/things-editor-color-style'
-import '@things-factory/modeller-ui/client/editors/things-editor-font-selector'
+import '@operato/input/ox-input-color.js'
+import '@operato/app/input/ox-input-fill-style.js'
+import '@operato/font/ox-font-selector.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Component } from '@hatiolab/things-scene'
-
 import { AbstractProperty } from '../abstract-property'
+import { Component } from '@hatiolab/things-scene'
 import { PropertySharedStyle } from '../property-shared-style'
 
 @customElement('property-style')
@@ -374,12 +373,12 @@ class PropertyStyles extends AbstractProperty {
             <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
           </label>
 
-          <things-editor-font-selector
+          <ox-font-selector
             value-key="fontFamily"
             .value=${fontFamily}
             class="property-full-input"
             custom-editor
-          ></things-editor-font-selector>
+          ></ox-font-selector>
 
           <label class="property-half-label icon-only-label font-size"></label>
           <input type="number" value-key="fontSize" .value=${fontSize} class="property-half-input" />
@@ -388,8 +387,7 @@ class PropertyStyles extends AbstractProperty {
           <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
 
           <label class="property-half-label icon-only-label color"></label>
-          <things-editor-color value-key="fontColor" .value=${fontColor} class="property-half-input">
-          </things-editor-color>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
 
           <label class="property-half-label"></label>
           <div class="property-half-input btn-group">
@@ -406,7 +404,7 @@ class PropertyStyles extends AbstractProperty {
           >
         </legend>
 
-        <things-editor-color-style value-key="fillStyle" .value=${fillStyle}> </things-editor-color-style>
+        <ox-input-fill-style value-key="fillStyle" .value=${fillStyle}> </ox-input-fill-style>
       </fieldset>
 
       <fieldset>
@@ -419,8 +417,7 @@ class PropertyStyles extends AbstractProperty {
           <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
 
           <label class="property-half-label icon-only-label color"></label>
-          <things-editor-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input">
-          </things-editor-color>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
 
           <label class="property-full-label">
             <ox-i18n msgid="label.line-type">line type</ox-i18n>