@operato/board 0.4.2 → 1.0.0-alpha.10

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/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/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 '@operato/input/ox-input-color.js'
+import '@operato/app/input/ox-input-fill-style.js'
 import '@things-factory/modeller-ui/client/editors/things-editor-font-selector'
 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')
@@ -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>

package/src/ox-board-viewer.ts

@@ -1,10 +1,9 @@
 import '@material/mwc-fab'
 import '@material/mwc-icon'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { SCENE_MODE, create } from '@hatiolab/things-scene'
 import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { create, SCENE_MODE } from '@hatiolab/things-scene'
 import { isIOS, togglefullscreen } from '@operato/utils'
 
 @customElement('ox-board-viewer')
@@ -494,7 +493,7 @@ export class BoardViewer extends LitElement {
     const x = (mql: MediaQueryListEvent) => {
       if (mql.matches) {
         if (!viewTarget) {
-          viewTarget = this.shadowRoot!.getElementById('target')
+          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')
           this.renderRoot.replaceChild(printTarget!, viewTarget!)
         }
       } else {