ontotext-yasgui-web-component 0.0.1

package/dist/collection/components/ontotext-yasgui-web-component/ontotext-yasgui-web-component.js

@@ -0,0 +1,152 @@
+import { h, Host } from '@stencil/core';
+import { YASGUI_MIN_SCRIPT } from '../yasgui/yasgui-script';
+import { YasguiBuilder } from '../../services/yasgui/yasgui-builder';
+export class OntotextYasguiWebComponent {
+  constructor() {
+    this.config = undefined;
+    this.yasguiBuilder = YasguiBuilder;
+  }
+  componentWillLoad() {
+    // @ts-ignore
+    if (!window.Yasgui) {
+      YASGUI_MIN_SCRIPT();
+    }
+  }
+  componentDidLoad() {
+    // As documentation said "The @Watch() decorator does not fire when a component initially loads."
+    // yasgui instance will not be created if we set configuration when component is loaded, which
+    // will be most case of the component usage. So we call the method manually when component is
+    // loaded. More info https://github.com/TriplyDB/Yasgui/issues/143
+    this.init(this.config);
+  }
+  onWindowResize(event) {
+    // TODO redraw yasgui if needed. This event will be unsubscribed automatically when component is detached from the DOM.
+    console.log(event);
+  }
+  configurationChanged(newConfig) {
+    this.init(newConfig);
+  }
+  setQuery(query) {
+    this.yasgui.setQuery(query);
+    return Promise.resolve();
+  }
+  disconnectedCallback() {
+    this.destroy();
+  }
+  render() {
+    return (h(Host, null));
+  }
+  init(config) {
+    this.destroy();
+    if (!config) {
+      return;
+    }
+    // @ts-ignore
+    if (window.Yasgui) {
+      this.yasgui = this.yasguiBuilder.build(this.el, config);
+      this.addOnQueryListener();
+    }
+  }
+  addOnQueryListener() {
+    this.yasgui.addYasqeListener('query', () => {
+      this.queryExecuted.emit(this.yasgui.getQuery());
+    });
+  }
+  destroy() {
+    if (this.yasgui) {
+      this.yasgui.destroy();
+    }
+  }
+  static get is() { return "ontotext-yasgui"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ontotext-yasgui-web-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ontotext-yasgui-web-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "YasguiConfiguration",
+          "resolved": "YasguiConfiguration",
+          "references": {
+            "YasguiConfiguration": {
+              "location": "import",
+              "path": "../../models/yasgui-configuration"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "queryExecuted",
+        "name": "queryExecuted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setQuery": {
+        "complexType": {
+          "signature": "(query: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "config",
+        "methodName": "configurationChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "onWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}