New Style Generator (#8)

1 files changed, 81 insertions, 0 deletions

diff --git a/style-generator/index.js b/style-generator/index.js
new file mode 100644
index 0000000..4589ee3
--- /dev/null
+++ b/style-generator/index.js
@@ -0,0 +1,81 @@
+import { Elm } from "./src/Main.elm";
+import { migrate } from "@mapbox/mapbox-gl-style-spec";
+import deref from "@mapbox/mapbox-gl-style-spec/migrate/v9"
+import CodeMirror from "codemirror/lib/codemirror.js";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/base16-light.css";
+import "codemirror/mode/elm/elm.js";
+import "codemirror/mode/javascript/javascript.js";
+
+var app = Elm.Main.init({});
+
+customElements.define(
+  "code-editor",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this._editorValue = "";
+    }
+
+    get editorValue() {
+      return this._editorValue;
+    }
+
+    set editorValue(value) {
+      if (this._editorValue === value) return;
+      this._editorValue = value;
+      if (!this._editor) return;
+      this._editor.setValue(value);
+    }
+
+    get readonly() {
+        return this._readonly;
+    }
+
+    set readonly(value) {
+        this._readonly = value;
+        if (!this._editor) return;
+        this._editor.setOption('readonly', value);
+    }
+
+    get mode() {
+        return this._mode;
+    }
+
+    set mode(value) {
+        this._mode = value;
+        if (!this._editor) return;
+        this._editor.setOption('mode', value);
+    }
+
+    connectedCallback() {
+      this._editor = CodeMirror(this, {
+        identUnit: 4,
+        mode: this._mode,
+        lineNumbers: true,
+        value: this._editorValue,
+        readOnly: this._readonly,
+        lineWrapping: true
+      });
+
+      this._editor.on("changes", () => {
+        this._editorValue = this._editor.getValue();
+        console.log("changes", this._editorValue)
+        this.dispatchEvent(new CustomEvent("editorChanged", {detail: this._editorValue}));
+      });
+
+      const {width, height} = this.getBoundingClientRect()
+      this._editor.setSize(width, height);
+    }
+  }
+);
+
+app.ports.requestStyleUpgrade.subscribe(style => {
+    try {
+        const migrated = deref(migrate(JSON.parse(style)));
+        app.ports.styleUpgradeComplete.send({type: 'Ok', result: migrated});
+    } catch(error) {
+        app.ports.styleUpgradeComplete.send({type: 'Err', error});
+    }
+
+});