feat: add visual editor

.eslintrc.yaml

@@ -14,3 +14,4 @@ globals:
   window: true
   Event: true
   customElements: true
+  document: true

package.json

@@ -20,6 +20,7 @@
   "license": "MIT",
   "dependencies": {
     "@kalkih/lz-string": "^1.4.5",
+    "@mdi/js": "^7.4.47",
     "custom-card-helpers": "^1.6.6",
     "d3-interpolate": "^3.0.1",
     "lit-element": "^2.2.1",

rollup.config.js

@@ -25,7 +25,7 @@ export default {
   plugins: [
     commonjs(),
     json({
-      include: 'package.json',
+      include: ['package.json', 'src/localize/languages/*'],
       preferConst: true,
     }),
     resolve(),

src/editor/components/colorSelector.js

@@ -0,0 +1,130 @@
+import { mdiClose } from '@mdi/js';
+import { fireEvent } from 'custom-card-helpers';
+import { css, html, LitElement } from 'lit-element';
+import { isValidHex, convertColorNameToHex } from '../editorUtils';
+
+export const colorSelector = {
+  hex_color: {},
+};
+
+export class CustomColorSelector extends LitElement {
+  static get properties() {
+    return {
+      hass: { attribute: false },
+      selector: { attribute: false },
+      value: {},
+      label: {},
+    };
+  }
+
+  render() {
+    const isHex = isValidHex(this.value);
+    const colorValue = isHex ? this.value : convertColorNameToHex(this.value);
+    return html`
+    <div class="color-container">
+      <label id="hex" for="color-input">
+        <span class="label">${this.label}</span>
+        <span class="input-wrapper">
+          <div class="overflow">
+            <input class=${this.value ? '' : 'empty'}
+              id="color-input"
+              @input=${this.valueChanged}
+              type="color"
+              .value=${colorValue || '#000000'}>
+          </div>
+        </span>
+        </label>
+        ${this.selector.hex_color.clearable ? html`
+          <ha-icon-button
+          class="clear-button"
+          .label=${this.hass.localize('ui.common.clear')}
+          .path=${mdiClose}
+          @click=${this.clearValue}
+          ><ha-icon-button>
+        ` : html``}
+    </div>
+    `;
+  }
+
+  valueChanged(ev) {
+    const value = (ev.target).value || '#000000';
+    fireEvent(this, 'value-changed', { value });
+  }
+
+  clearValue() {
+    fireEvent(this, 'value-changed', { undefined });
+  }
+
+  static get styles() {
+    return css`
+      #hex {
+        display: flex;
+        align-items: center;
+        margin: 4px 0px;
+        flex: 1;
+      }
+
+      .input-wrapper {
+        width: 48px;
+        height: 48px;
+        box-sizing: border-box;
+        border: 1px solid var(--outline-color);
+        position: relative;
+        border-radius: 50%;
+      }
+
+      #hex:hover .input-wrapper {
+        border: 2px solid var(--outline-color);
+      }
+
+      .label {
+        font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+        color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, .87));
+        font-size: 1em;
+        line-height: var(--mdc-typography-body2-line-height, 1.25rem);
+        font-weight: var(--mdc-typography-body2-font-weight, 400);
+        flex-grow: 1;
+        padding-inline-start: 4px;
+      }
+
+      .overflow {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: inherit;
+      }
+
+      #hex input {
+        min-width: 200%;
+        min-height: 200%;
+      }
+
+      #hex .empty::before {
+        background:
+          repeating-conic-gradient(
+           var(--secondary-background-color) 0 90deg,
+          var(--disabled-text-color) 0 180deg)
+          0 0/40px 40px round;
+        content: '';
+        min-width: 200%;
+        min-height: 200%;
+        display: block;
+      }
+
+      .color-container {
+        display: flex;
+        align-items: center;
+      }
+
+      .clear-button {
+        --mdc-icon-size: 20px;
+        color: var(--input-dropdown-icon-color);
+      }
+    `;
+  }
+}
+
+customElements.define('ha-selector-hex_color', CustomColorSelector);

src/editor/components/entitiesEditor.js

@@ -0,0 +1,178 @@
+import { mdiPencil, mdiDrag } from '@mdi/js';
+import { fireEvent } from 'custom-card-helpers';
+import { LitElement, html, css } from 'lit-element';
+
+const SCHEMA = [
+  {
+    name: 'entity',
+    selector: { entity: {} },
+  },
+];
+
+class EntitiesEditor extends LitElement {
+  constructor() {
+    super();
+    this.newEntity = {};
+  }
+
+  static get properties() {
+    return {
+      hass: { attribute: false },
+      entities: { attribute: false },
+      newEntity: {},
+    };
+  }
+
+  computeLabel(schema) {
+    return this.hass.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
+  }
+
+  computeHelper(schema, data) {
+    if (schema.selector.entity) {
+      return data.entity;
+    }
+    return '';
+  }
+
+  render() {
+    if (!this.entities) {
+      return html`
+      <div class="entity add-item">
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.newEntity}
+        .schema=${SCHEMA}
+        .computeLabel=${this.computeLabel}
+        @value-changed=${this.addEntity}
+      ></ha-form>
+      </div>
+      `;
+    }
+
+    return html`
+    <ha-sortable handle-selector=".handle" @item-moved=${this.rowMoved}>
+    <div class="entities">
+      ${this.entities.map((entity, index) => html`
+        <div class="entity">
+          <div class="handle">
+            <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+          </div>
+          <ha-form
+            .hass=${this.hass}
+            .data=${typeof entity === 'object' ? entity : { entity }}
+            .schema=${SCHEMA}
+            .index=${index}
+            .computeLabel=${this.computeLabel}
+            .computeHelper=${schema => this.computeHelper(schema, typeof entity === 'object' ? entity : { entity })}
+            @value-changed=${this.valueChanged}
+          ></ha-form>
+          <ha-icon-button class="edit-entity"
+            .label=${this.hass.localize('ui.components.entity.entity-picker.edit')}
+            .path=${mdiPencil}
+            .index=${index}
+            @click=${this.editRow}
+          ></ha-icon-button>
+        </div>
+      `)}
+      </div>
+    </div>
+    </ha-sortable>
+    <div class="entity add-item">
+    <ha-form
+      .hass=${this.hass}
+      .data=${this.newEntity}
+      .schema=${SCHEMA}
+      .computeLabel=${this.computeLabel}
+      @value-changed=${this.addEntity}
+    ></ha-form>
+    </div>
+    `;
+  }
+
+  rowMoved(ev) {
+    ev.stopPropagation();
+    if (!this.entities || !this.hass) {
+      return;
+    }
+    const { oldIndex, newIndex } = ev.detail;
+    const newEntities = this.entities.concat();
+
+    newEntities.splice(newIndex, 0, newEntities.splice(oldIndex, 1)[0]);
+
+    fireEvent(this, 'config-changed', newEntities);
+  }
+
+  addEntity(ev) {
+    ev.stopPropagation();
+    const value = ev.detail.value || '';
+    if (this.entities === undefined) {
+      fireEvent(this, 'config-changed', [value]);
+      return;
+    }
+    if (value === '' || value.entity === undefined) {
+      return;
+    }
+    fireEvent(this, 'config-changed', [...this.entities, value]);
+  }
+
+  editRow(ev) {
+    const index = (ev.currentTarget).index || 0;
+    fireEvent(this, 'edit-row', index);
+  }
+
+  valueChanged(ev) {
+    if (!this.entities || !this.hass) {
+      return;
+    }
+    const value = ev.detail.value.entity || '';
+    const index = (ev.target).index || 0;
+    const newConfigEntities = this.entities.concat();
+
+    if (value === '' || value === undefined) {
+      newConfigEntities.splice(index, 1);
+    } else if (typeof newConfigEntities[index] === 'object') {
+      newConfigEntities[index] = {
+        ...newConfigEntities[index],
+        entity: value || '',
+      };
+    } else {
+      newConfigEntities[index] = {
+        entity: value || '',
+      };
+    }
+
+    fireEvent(this, 'config-changed', newConfigEntities);
+  }
+
+  static get styles() {
+    return css`
+      .entity {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+      }
+
+      .entity > ha-form {
+        flex-grow: 1;
+      }
+
+      .handle {
+        cursor: grab;
+        padding-inline-end: 8px;
+        align-self: flex-start;
+        margin: 16px 0;
+      }
+
+      .add-item {
+        margin-bottom: 24px;
+      }
+
+      .edit-entity {
+        align-self: flex-start;
+        margin: 4px 0px;
+      }
+    `;
+  }
+}
+
+customElements.define('mini-graph-card-entities-editor', EntitiesEditor);