@operato/scene-legend 1.2.29 → 1.2.32

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/assets/favicon.ico +0 -0
  3. package/assets/images/spinner.png +0 -0
  4. package/attachments/dcf0e8fe-6c3e-4b36-b3e9-a8e70b4ed590.svg +425 -0
  5. package/dist/editors/index.d.ts +1 -0
  6. package/dist/editors/index.js +5 -0
  7. package/dist/editors/index.js.map +1 -1
  8. package/dist/editors/property-editor-gltf-info.d.ts +14 -0
  9. package/dist/editors/property-editor-gltf-info.js +130 -0
  10. package/dist/editors/property-editor-gltf-info.js.map +1 -0
  11. package/dist/editors/property-editor-svg-info.d.ts +15 -0
  12. package/dist/editors/property-editor-svg-info.js +71 -0
  13. package/dist/editors/property-editor-svg-info.js.map +1 -0
  14. package/dist/index.d.ts +1 -0
  15. package/dist/index.js +1 -0
  16. package/dist/index.js.map +1 -1
  17. package/dist/svg.d.ts +141 -0
  18. package/dist/svg.js +159 -0
  19. package/dist/svg.js.map +1 -0
  20. package/dist/templates/index.js +2 -1
  21. package/dist/templates/index.js.map +1 -1
  22. package/dist/templates/legend copy.d.ts +18 -0
  23. package/dist/templates/legend copy.js +19 -0
  24. package/dist/templates/legend copy.js.map +1 -0
  25. package/dist/templates/svg.d.ts +18 -0
  26. package/dist/templates/svg.js +19 -0
  27. package/dist/templates/svg.js.map +1 -0
  28. package/icons/svg.png +0 -0
  29. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +30 -0
  30. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +20 -0
  31. package/logs/application-2023-05-09-07.log +30 -0
  32. package/logs/application-2023-05-09-08.log +2 -0
  33. package/logs/application-2023-05-09-09.log +12 -0
  34. package/logs/application-2023-05-09-11.log +4 -0
  35. package/logs/connections-2023-05-09-07.log +82 -0
  36. package/logs/connections-2023-05-09-11.log +3 -0
  37. package/logs/system/.144ddb221a51f7e2afac3fe1fc3dcf306a8de9ef-audit.json +20 -0
  38. package/logs/system/.437ed478d36eef33cb9dfb565b13329b4464783e-audit.json +20 -0
  39. package/logs/system/.a16ac19e6e222b854c699e1f94ae757f5c8db307-audit.json +15 -0
  40. package/logs/system/scenario-/353/260/234/354/240/204/353/237/211 /354/230/210/354/270/241 /353/215/260/354/235/264/355/204/260-2023-05-09-11.log" +16914 -0
  41. package/logs/system/scenario-/353/260/234/354/240/204/353/237/211 /354/230/210/354/270/241 /353/215/260/354/235/264/355/204/260-2023-05-09-12.log" +1382 -0
  42. package/logs/system/scenario-/354/227/220/353/204/210/354/247/200 /353/240/210/354/235/264/354/226/264 /354/203/211/354/203/201-2023-05-09-11.log" +165 -0
  43. package/logs/system/scenario-/354/227/220/353/204/210/354/247/200 /353/240/210/354/235/264/354/226/264 /354/203/211/354/203/201-2023-05-09-12.log" +765 -0
  44. package/logs/system/scenario-/354/235/274/354/202/254/353/237/211 /354/230/210/354/270/241 /354/247/200/353/217/204-2023-05-09-12.log" +30 -0
  45. package/package.json +2 -2
  46. package/schema.gql +2668 -0
  47. package/src/editors/index.ts +5 -0
  48. package/src/editors/property-editor-svg-info.ts +77 -0
  49. package/src/index.ts +2 -0
  50. package/src/svg.ts +201 -0
  51. package/src/templates/index.ts +2 -1
  52. package/src/templates/svg.ts +19 -0
  53. package/translations/en.json +6 -0
  54. package/translations/ko.json +6 -0
  55. package/translations/ms.json +6 -0
  56. package/translations/zh.json +6 -0
  57. package/tsconfig.tsbuildinfo +1 -1
@@ -0,0 +1,130 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/i18n/ox-i18n.js';
3
+ import { css, html } from 'lit';
4
+ import { customElement, property, state } from 'lit/decorators.js';
5
+ import { OxPropertyEditor } from '@operato/property-editor';
6
+ import * as THREE from 'three';
7
+ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
8
+ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
9
+ constructor() {
10
+ super(...arguments);
11
+ this.width = 0;
12
+ this.height = 0;
13
+ this.depth = 0;
14
+ }
15
+ editorTemplate(value, spec) {
16
+ const valid = this.width && this.height && this.depth;
17
+ var property = spec.property || {};
18
+ var { action } = property;
19
+ return html `
20
+ <fieldset fullwidth>
21
+ <legend><ox-i18n msgid="label.gltf-info">GLTF info.</ox-i18n></legend>
22
+
23
+ <div>
24
+ <div info>
25
+ <div label>[W x H x D] :</div>
26
+ ${valid
27
+ ? html ` <div value>${this.width} x ${this.height} x ${this.depth}</div>
28
+ <mwc-icon-button
29
+ icon="autorenew"
30
+ @click=${(e) => {
31
+ this.dispatchEvent(new CustomEvent('i-need-selected', {
32
+ bubbles: true,
33
+ composed: true,
34
+ detail: {
35
+ callback: (selected) => {
36
+ typeof action === 'function' &&
37
+ action(selected[0], {
38
+ width: this.width,
39
+ height: this.height,
40
+ depth: this.depth
41
+ });
42
+ }
43
+ }
44
+ }));
45
+ }}
46
+ ></mwc-icon-button>`
47
+ : html ` <div></div> `}
48
+ </div>
49
+ </div>
50
+ </fieldset>
51
+ `;
52
+ }
53
+ updated(changes) {
54
+ if (changes.has('src')) {
55
+ this.dispatchEvent(new CustomEvent('i-need-selected', {
56
+ bubbles: true,
57
+ composed: true,
58
+ detail: {
59
+ callback: async (selected) => {
60
+ await this.fetchSourceInfo(selected[0], this.src);
61
+ }
62
+ }
63
+ }));
64
+ }
65
+ }
66
+ async fetchSourceInfo(component, src) {
67
+ if (!src || !src.trim()) {
68
+ return;
69
+ }
70
+ try {
71
+ const path = component.app.url(src);
72
+ let gltfLoader = new GLTFLoader();
73
+ gltfLoader.setCrossOrigin('use-credentials');
74
+ return new Promise((resolve) => {
75
+ gltfLoader.load(path, gltf => {
76
+ var box = new THREE.Box3().setFromObject(gltf.scene);
77
+ var { x, y, z } = box.getSize(new THREE.Vector3());
78
+ this.width = Math.floor(x);
79
+ this.depth = Math.floor(y);
80
+ this.height = Math.floor(z);
81
+ resolve();
82
+ });
83
+ });
84
+ }
85
+ catch (e) {
86
+ console.error(e);
87
+ return;
88
+ }
89
+ }
90
+ };
91
+ GLTFInfoEditor.styles = [
92
+ ...OxPropertyEditor.styles,
93
+ css `
94
+ div[info] {
95
+ display: flex;
96
+ flex-direction: row;
97
+ font-size: 12px;
98
+ }
99
+
100
+ div[info] * {
101
+ align-self: center;
102
+ }
103
+
104
+ div[info] title {
105
+ font-weight: bold;
106
+ }
107
+
108
+ div[info] mwc-icon-button {
109
+ margin-left: auto;
110
+ --mdc-icon-button-size: 24px;
111
+ }
112
+ `
113
+ ];
114
+ __decorate([
115
+ property({ type: Number })
116
+ ], GLTFInfoEditor.prototype, "src", void 0);
117
+ __decorate([
118
+ state()
119
+ ], GLTFInfoEditor.prototype, "width", void 0);
120
+ __decorate([
121
+ state()
122
+ ], GLTFInfoEditor.prototype, "height", void 0);
123
+ __decorate([
124
+ state()
125
+ ], GLTFInfoEditor.prototype, "depth", void 0);
126
+ GLTFInfoEditor = __decorate([
127
+ customElement('property-editor-gltf-info')
128
+ ], GLTFInfoEditor);
129
+ export default GLTFInfoEditor;
130
+ //# sourceMappingURL=property-editor-gltf-info.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component } from '@hatiolab/things-scene'\n\nimport * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n static styles = [\n ...OxPropertyEditor.styles,\n css`\n div[info] {\n display: flex;\n flex-direction: row;\n font-size: 12px;\n }\n\n div[info] * {\n align-self: center;\n }\n\n div[info] title {\n font-weight: bold;\n }\n\n div[info] mwc-icon-button {\n margin-left: auto;\n --mdc-icon-button-size: 24px;\n }\n `\n ]\n\n @property({ type: Number }) src?: string\n\n @state() width: number = 0\n @state() height: number = 0\n @state() depth: number = 0\n\n editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n const valid = this.width && this.height && this.depth\n\n var property = spec.property || {}\n var { action } = property\n\n return html`\n <fieldset fullwidth>\n <legend><ox-i18n msgid=\"label.gltf-info\">GLTF info.</ox-i18n></legend>\n\n <div>\n <div info>\n <div label>[W x H x D] :</div>\n ${valid\n ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>\n <mwc-icon-button\n icon=\"autorenew\"\n @click=${(e: MouseEvent) => {\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n typeof action === 'function' &&\n action(selected[0], {\n width: this.width,\n height: this.height,\n depth: this.depth\n })\n }\n }\n })\n )\n }}\n ></mwc-icon-button>`\n : html` <div></div> `}\n </div>\n </div>\n </fieldset>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('src')) {\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: async (selected: any[]) => {\n await this.fetchSourceInfo(selected[0], this.src!)\n }\n }\n })\n )\n }\n }\n\n async fetchSourceInfo(component: Component, src: string) {\n if (!src || !src.trim()) {\n return\n }\n\n try {\n const path = component.app.url(src)\n\n let gltfLoader = new GLTFLoader()\n\n gltfLoader.setCrossOrigin('use-credentials')\n\n return new Promise((resolve: any) => {\n gltfLoader.load(path, gltf => {\n var box = new THREE.Box3().setFromObject(gltf.scene)\n var { x, y, z } = box.getSize(new THREE.Vector3())\n\n this.width = Math.floor(x)\n this.depth = Math.floor(y)\n this.height = Math.floor(z)\n\n resolve()\n })\n })\n } catch (e) {\n console.error(e)\n return\n }\n }\n}\n"]}
@@ -0,0 +1,15 @@
1
+ import '@operato/i18n/ox-i18n.js';
2
+ import { PropertyValues, TemplateResult } from 'lit';
3
+ import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
4
+ import { Component } from '@hatiolab/things-scene';
5
+ export default class SVGInfoEditor extends OxPropertyEditor {
6
+ static styles: import("lit").CSSResult[];
7
+ src?: string;
8
+ ids: SVGPathElement[];
9
+ private fillStyleSaved;
10
+ editorTemplate(value: any, spec: PropertySpec): TemplateResult;
11
+ onEnterEvent(path: SVGPathElement): void;
12
+ onOutEvent(path: SVGPathElement): void;
13
+ updated(changes: PropertyValues<this>): void;
14
+ fetchSourceInfo(component: Component, src: string): Promise<void>;
15
+ }
@@ -0,0 +1,71 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/i18n/ox-i18n.js';
3
+ import { css, html } from 'lit';
4
+ import { customElement, property, state } from 'lit/decorators.js';
5
+ import { OxPropertyEditor } from '@operato/property-editor';
6
+ let SVGInfoEditor = class SVGInfoEditor extends OxPropertyEditor {
7
+ constructor() {
8
+ super(...arguments);
9
+ this.ids = [];
10
+ this.fillStyleSaved = [];
11
+ }
12
+ editorTemplate(value, spec) {
13
+ return html `
14
+ <fieldset fullwidth>
15
+ <ul info>
16
+ ${this.ids.map(path => html `<li @mouseenter=${() => this.onEnterEvent(path)} @mouseout=${() => this.onOutEvent(path)}>
17
+ <div style="fillStyle:${path.style.fill}">${path.id}</div>
18
+ </li>`)}
19
+ </ul>
20
+ </fieldset>
21
+ `;
22
+ }
23
+ onEnterEvent(path) {
24
+ this.fillStyleSaved.push(path.style.fill);
25
+ path.style.fill = 'red';
26
+ }
27
+ onOutEvent(path) {
28
+ path.style.fill = this.fillStyleSaved.pop();
29
+ }
30
+ updated(changes) {
31
+ if (changes.has('src')) {
32
+ this.dispatchEvent(new CustomEvent('i-need-selected', {
33
+ bubbles: true,
34
+ composed: true,
35
+ detail: {
36
+ callback: (selected) => {
37
+ this.fetchSourceInfo(selected[0], this.src);
38
+ }
39
+ }
40
+ }));
41
+ }
42
+ }
43
+ async fetchSourceInfo(component, src) {
44
+ if (!src || !src.trim()) {
45
+ return;
46
+ }
47
+ const element = component.element;
48
+ const elements = element.querySelectorAll('path[id]');
49
+ this.ids = Array.from(elements).map(path => path);
50
+ }
51
+ };
52
+ SVGInfoEditor.styles = [
53
+ ...OxPropertyEditor.styles,
54
+ css `
55
+ ul[info] {
56
+ margin: 0;
57
+ font-size: 1em;
58
+ }
59
+ `
60
+ ];
61
+ __decorate([
62
+ property({ type: String })
63
+ ], SVGInfoEditor.prototype, "src", void 0);
64
+ __decorate([
65
+ state()
66
+ ], SVGInfoEditor.prototype, "ids", void 0);
67
+ SVGInfoEditor = __decorate([
68
+ customElement('property-editor-svg-info')
69
+ ], SVGInfoEditor);
70
+ export default SVGInfoEditor;
71
+ //# sourceMappingURL=property-editor-svg-info.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"property-editor-svg-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-svg-info.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAIzE,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,gBAAgB;IAA3D;;QAaW,QAAG,GAAqB,EAAE,CAAA;QAE3B,mBAAc,GAAU,EAAE,CAAA;IAoDpC,CAAC;IAlDC,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,GAAG,CAAC,GAAG,CACZ,IAAI,CAAC,EAAE,CACL,IAAI,CAAA,mBAAmB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;wCACnE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;oBAC/C,CACT;;;KAGN,CAAA;IACH,CAAC;IAED,YAAY,CAAC,IAAoB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QACzC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAA;IACzB,CAAC;IAED,UAAU,CAAC,IAAoB;QAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAA;IAC7C,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;wBAC5B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAI,CAAC,CAAA;oBAC9C,CAAC;iBACF;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,SAAoB,EAAE,GAAW;QACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE;YACvB,OAAM;SACP;QAED,MAAM,OAAO,GAAI,SAAkC,CAAC,OAAyB,CAAA;QAE7E,MAAM,QAAQ,GAAG,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;QACrD,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAQ,CAAA;IAC1D,CAAC;;AAjEM,oBAAM,GAAG;IACd,GAAG,gBAAgB,CAAC,MAAM;IAC1B,GAAG,CAAA;;;;;KAKF;CACF,AARY,CAQZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAa;AAE/B;IAAR,KAAK,EAAE;0CAA2B;AAbhB,aAAa;IADjC,aAAa,CAAC,0BAA0B,CAAC;GACrB,aAAa,CAmEjC;eAnEoB,aAAa","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component, HTMLOverlayContainer } from '@hatiolab/things-scene'\n\n@customElement('property-editor-svg-info')\nexport default class SVGInfoEditor extends OxPropertyEditor {\n static styles = [\n ...OxPropertyEditor.styles,\n css`\n ul[info] {\n margin: 0;\n font-size: 1em;\n }\n `\n ]\n\n @property({ type: String }) src?: string\n\n @state() ids: SVGPathElement[] = []\n\n private fillStyleSaved: any[] = []\n\n editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n return html`\n <fieldset fullwidth>\n <ul info>\n ${this.ids.map(\n path =>\n html`<li @mouseenter=${() => this.onEnterEvent(path)} @mouseout=${() => this.onOutEvent(path)}>\n <div style=\"fillStyle:${path.style.fill}\">${path.id}</div>\n </li>`\n )}\n </ul>\n </fieldset>\n `\n }\n\n onEnterEvent(path: SVGPathElement) {\n this.fillStyleSaved.push(path.style.fill)\n path.style.fill = 'red'\n }\n\n onOutEvent(path: SVGPathElement) {\n path.style.fill = this.fillStyleSaved.pop()\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('src')) {\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n this.fetchSourceInfo(selected[0], this.src!)\n }\n }\n })\n )\n }\n }\n\n async fetchSourceInfo(component: Component, src: string) {\n if (!src || !src.trim()) {\n return\n }\n\n const element = (component as HTMLOverlayContainer).element as HTMLDivElement\n\n const elements = element.querySelectorAll('path[id]')\n this.ids = Array.from(elements).map(path => path) as any\n }\n}\n"]}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as Legend } from './legend';
2
2
  export { default as LegendItem } from './legend-item';
3
+ export { default as Svg } from './svg';
package/dist/index.js CHANGED
@@ -3,4 +3,5 @@
3
3
  */
4
4
  export { default as Legend } from './legend';
5
5
  export { default as LegendItem } from './legend-item';
6
+ export { default as Svg } from './svg';
6
7
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Legend } from './legend'\nexport { default as LegendItem } from './legend-item'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AAErD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Legend } from './legend'\nexport { default as LegendItem } from './legend-item'\n\nexport { default as Svg } from './svg'\n"]}
package/dist/svg.d.ts ADDED
@@ -0,0 +1,141 @@
1
+ import { Component, HTMLOverlayContainer, Properties } from '@hatiolab/things-scene';
2
+ export default class Svg extends HTMLOverlayContainer {
3
+ static get nature(): {
4
+ mutable: boolean;
5
+ resizable: boolean;
6
+ rotatable: boolean;
7
+ properties: ({
8
+ type: string;
9
+ label: string;
10
+ name: string;
11
+ property: {
12
+ displayField: string;
13
+ displayFullUrl: boolean;
14
+ baseUrlAlias: string;
15
+ defaultStorage: string;
16
+ storageFilters: {
17
+ type: ArrayConstructor;
18
+ value: {
19
+ name: string;
20
+ value: string;
21
+ }[];
22
+ };
23
+ useUpload: boolean;
24
+ component?: undefined;
25
+ };
26
+ observe: (this: HTMLElement, src: string) => void;
27
+ readonly?: undefined;
28
+ editor?: undefined;
29
+ } | {
30
+ type: string;
31
+ label: string;
32
+ name: string;
33
+ readonly: boolean;
34
+ editor: {
35
+ fullwidth: boolean;
36
+ };
37
+ property?: undefined;
38
+ observe?: undefined;
39
+ } | {
40
+ type: string;
41
+ label: string;
42
+ name: string;
43
+ property: {
44
+ component: string;
45
+ displayField?: undefined;
46
+ displayFullUrl?: undefined;
47
+ baseUrlAlias?: undefined;
48
+ defaultStorage?: undefined;
49
+ storageFilters?: undefined;
50
+ useUpload?: undefined;
51
+ };
52
+ observe?: undefined;
53
+ readonly?: undefined;
54
+ editor?: undefined;
55
+ } | {
56
+ type: string;
57
+ label: string;
58
+ name: string;
59
+ property?: undefined;
60
+ observe?: undefined;
61
+ readonly?: undefined;
62
+ editor?: undefined;
63
+ })[];
64
+ };
65
+ oncreate_element(div: HTMLDivElement): Promise<void>;
66
+ private _value?;
67
+ private _legendTarget?;
68
+ get legendTarget(): Component | undefined;
69
+ loadSVG(div: HTMLElement): Promise<void>;
70
+ setElementProperties(div: HTMLDivElement): Promise<void>;
71
+ get src(): any;
72
+ set src(src: any);
73
+ onchange(after: Properties, before: Properties): void;
74
+ onchangeSrc(src: string): void;
75
+ onchangeValue(value: any): void;
76
+ get tagName(): string;
77
+ get nature(): {
78
+ mutable: boolean;
79
+ resizable: boolean;
80
+ rotatable: boolean;
81
+ properties: ({
82
+ type: string;
83
+ label: string;
84
+ name: string;
85
+ property: {
86
+ displayField: string;
87
+ displayFullUrl: boolean;
88
+ baseUrlAlias: string;
89
+ defaultStorage: string;
90
+ storageFilters: {
91
+ type: ArrayConstructor;
92
+ value: {
93
+ name: string;
94
+ value: string;
95
+ }[];
96
+ };
97
+ useUpload: boolean;
98
+ component?: undefined;
99
+ };
100
+ observe: (this: HTMLElement, src: string) => void;
101
+ readonly?: undefined;
102
+ editor?: undefined;
103
+ } | {
104
+ type: string;
105
+ label: string;
106
+ name: string;
107
+ readonly: boolean;
108
+ editor: {
109
+ fullwidth: boolean;
110
+ };
111
+ property?: undefined;
112
+ observe?: undefined;
113
+ } | {
114
+ type: string;
115
+ label: string;
116
+ name: string;
117
+ property: {
118
+ component: string;
119
+ displayField?: undefined;
120
+ displayFullUrl?: undefined;
121
+ baseUrlAlias?: undefined;
122
+ defaultStorage?: undefined;
123
+ storageFilters?: undefined;
124
+ useUpload?: undefined;
125
+ };
126
+ observe?: undefined;
127
+ readonly?: undefined;
128
+ editor?: undefined;
129
+ } | {
130
+ type: string;
131
+ label: string;
132
+ name: string;
133
+ property?: undefined;
134
+ observe?: undefined;
135
+ readonly?: undefined;
136
+ editor?: undefined;
137
+ })[];
138
+ };
139
+ get value(): any;
140
+ set value(value: any);
141
+ }
package/dist/svg.js ADDED
@@ -0,0 +1,159 @@
1
+ /*
2
+ * Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ const NATURE = {
5
+ mutable: false,
6
+ resizable: true,
7
+ rotatable: true,
8
+ properties: [
9
+ {
10
+ type: 'image-selector',
11
+ label: 'image-src',
12
+ name: 'src',
13
+ property: {
14
+ displayField: 'id',
15
+ displayFullUrl: true,
16
+ baseUrlAlias: '$base_url',
17
+ defaultStorage: 'scene-image',
18
+ storageFilters: {
19
+ type: Array,
20
+ value: [
21
+ {
22
+ name: 'category',
23
+ value: 'image'
24
+ }
25
+ ]
26
+ },
27
+ useUpload: true
28
+ },
29
+ observe: function (src) {
30
+ const info = this.parentNode.querySelector('[name=svgInfo]');
31
+ info.src = src;
32
+ }
33
+ },
34
+ {
35
+ type: 'svg-info',
36
+ label: 'svg-info',
37
+ name: 'svgInfo',
38
+ readonly: true,
39
+ editor: {
40
+ fullwidth: true
41
+ }
42
+ },
43
+ {
44
+ type: 'id-input',
45
+ label: 'legend-target',
46
+ name: 'legendTarget',
47
+ property: {
48
+ component: 'legend'
49
+ }
50
+ },
51
+ {
52
+ type: 'string',
53
+ label: 'id-field',
54
+ name: 'idField'
55
+ },
56
+ {
57
+ type: 'string',
58
+ label: 'value-field',
59
+ name: 'valueField'
60
+ }
61
+ ]
62
+ };
63
+ import { Component, HTMLOverlayContainer } from '@hatiolab/things-scene';
64
+ export default class Svg extends HTMLOverlayContainer {
65
+ static get nature() {
66
+ return NATURE;
67
+ }
68
+ async oncreate_element(div) {
69
+ await this.loadSVG(div);
70
+ }
71
+ get legendTarget() {
72
+ var { legendTarget } = this.state;
73
+ if (!this._legendTarget && legendTarget) {
74
+ this._legendTarget = this.root.findById(legendTarget);
75
+ this._legendTarget && this._legendTarget.on('change', this.onchangeData, this);
76
+ }
77
+ return this._legendTarget;
78
+ }
79
+ async loadSVG(div) {
80
+ try {
81
+ const parser = new DOMParser();
82
+ const response = await fetch(this.src);
83
+ div.innerHTML = '';
84
+ if (response.ok) {
85
+ const text = await response.text();
86
+ const doc = await parser.parseFromString(text, 'image/svg+xml');
87
+ const element = doc.querySelector('svg');
88
+ element && div.appendChild(element);
89
+ }
90
+ else {
91
+ const error = await response.text();
92
+ console.error('load SVG error', error);
93
+ }
94
+ }
95
+ catch (error) {
96
+ console.error(error);
97
+ }
98
+ }
99
+ async setElementProperties(div) { }
100
+ get src() {
101
+ return this.get('src');
102
+ }
103
+ set src(src) {
104
+ this.set('src', src);
105
+ }
106
+ onchange(after, before) {
107
+ 'src' in after && this.onchangeSrc(after.src);
108
+ 'value' in after && this.onchangeValue(after.value);
109
+ }
110
+ onchangeSrc(src) {
111
+ this.loadSVG(this.element);
112
+ }
113
+ onchangeValue(value) {
114
+ if (typeof this.value !== 'object' || !Array.isArray(this.value)) {
115
+ return;
116
+ }
117
+ const { idField, valueField } = this.state;
118
+ const legendTarget = this.legendTarget;
119
+ if (!legendTarget) {
120
+ return;
121
+ }
122
+ const { field: statusField, defaultColor, ranges } = legendTarget.get('status');
123
+ if (!(statusField && ranges)) {
124
+ return;
125
+ }
126
+ this.value.forEach(item => {
127
+ if (!(idField in item) || !(valueField in item)) {
128
+ return;
129
+ }
130
+ var id = item[idField];
131
+ var status = Number(item[valueField]);
132
+ var range = ranges.find((range, index) => {
133
+ let { min, max } = range;
134
+ min = Number(min) || min;
135
+ max = Number(max) || max;
136
+ return max > status && (min === undefined || min <= status);
137
+ });
138
+ const path = this.element.querySelector(`path[id="${String(id)}"]`);
139
+ if (path) {
140
+ path.style.fill = (range === null || range === void 0 ? void 0 : range.color) || defaultColor || 'transparent';
141
+ }
142
+ });
143
+ }
144
+ get tagName() {
145
+ return 'div';
146
+ }
147
+ get nature() {
148
+ return NATURE;
149
+ }
150
+ get value() {
151
+ return this._value;
152
+ }
153
+ set value(value) {
154
+ this._value = value;
155
+ this.onchangeValue(value);
156
+ }
157
+ }
158
+ Component.register('svg', Svg);
159
+ //# sourceMappingURL=svg.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"svg.js","sourceRoot":"","sources":["../src/svg.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nconst NATURE = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'image-selector',\n label: 'image-src',\n name: 'src',\n property: {\n displayField: 'id',\n displayFullUrl: true,\n baseUrlAlias: '$base_url',\n defaultStorage: 'scene-image',\n storageFilters: {\n type: Array,\n value: [\n {\n name: 'category',\n value: 'image'\n }\n ]\n },\n useUpload: true\n },\n observe: function (this: HTMLElement, src: string) {\n const info: any = this.parentNode!.querySelector('[name=svgInfo]')\n info.src = src\n }\n },\n {\n type: 'svg-info',\n label: 'svg-info',\n name: 'svgInfo',\n readonly: true,\n editor: {\n fullwidth: true\n }\n },\n {\n type: 'id-input',\n label: 'legend-target',\n name: 'legendTarget',\n property: {\n component: 'legend'\n }\n },\n {\n type: 'string',\n label: 'id-field',\n name: 'idField'\n },\n {\n type: 'string',\n label: 'value-field',\n name: 'valueField'\n }\n ]\n}\n\nimport { Component, HTMLOverlayContainer, Properties } from '@hatiolab/things-scene'\nimport Legend from './legend'\n\nexport default class Svg extends HTMLOverlayContainer {\n static get nature() {\n return NATURE\n }\n\n async oncreate_element(div: HTMLDivElement) {\n await this.loadSVG(div)\n }\n\n private _value?: any\n private _legendTarget?: Component\n\n get legendTarget() {\n var { legendTarget } = this.state\n\n if (!this._legendTarget && legendTarget) {\n this._legendTarget = this.root.findById(legendTarget)\n this._legendTarget && this._legendTarget.on('change', this.onchangeData, this)\n }\n\n return this._legendTarget\n }\n\n async loadSVG(div: HTMLElement) {\n try {\n const parser = new DOMParser()\n\n const response = await fetch(this.src)\n\n div.innerHTML = ''\n\n if (response.ok) {\n const text = await response.text()\n const doc = await parser.parseFromString(text, 'image/svg+xml')\n const element = doc.querySelector('svg')\n\n element && div.appendChild(element)\n } else {\n const error = await response.text()\n console.error('load SVG error', error)\n }\n } catch (error) {\n console.error(error)\n }\n }\n\n async setElementProperties(div: HTMLDivElement) {}\n\n get src() {\n return this.get('src')\n }\n\n set src(src) {\n this.set('src', src)\n }\n\n onchange(after: Properties, before: Properties) {\n 'src' in after && this.onchangeSrc(after.src)\n 'value' in after && this.onchangeValue(after.value)\n }\n\n onchangeSrc(src: string) {\n this.loadSVG(this.element)\n }\n\n onchangeValue(value: any): void {\n if (typeof this.value !== 'object' || !Array.isArray(this.value)) {\n return\n }\n\n const { idField, valueField } = this.state\n const legendTarget = this.legendTarget\n\n if (!legendTarget) {\n return\n }\n\n const {\n field: statusField,\n defaultColor,\n ranges\n } = legendTarget.get('status') as {\n field: string\n defaultColor: string\n ranges: { min: number; max: number; color: string }[]\n }\n\n if (!(statusField && ranges)) {\n return\n }\n\n this.value.forEach(item => {\n if (!(idField in item) || !(valueField in item)) {\n return\n }\n\n var id = item[idField]\n var status = Number(item[valueField])\n\n var range = ranges.find((range, index) => {\n let { min, max } = range\n\n min = Number(min) || min\n max = Number(max) || max\n\n return max > status && (min === undefined || min <= status)\n })\n\n const path = this.element.querySelector(`path[id=\"${String(id)}\"]`) as SVGPathElement\n if (path) {\n path.style.fill = range?.color || defaultColor || 'transparent'\n }\n })\n }\n\n get tagName() {\n return 'div'\n }\n\n get nature() {\n return NATURE\n }\n\n get value() {\n return this._value\n }\n\n set value(value) {\n this._value = value\n this.onchangeValue(value)\n }\n}\n\nComponent.register('svg', Svg)\n"]}
@@ -1,3 +1,4 @@
1
1
  import legend from './legend';
2
- export default [legend];
2
+ import svg from './svg';
3
+ export default [legend, svg];
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,eAAe,CAAC,MAAM,CAAC,CAAA","sourcesContent":["import legend from './legend'\n\nexport default [legend]\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,GAAG,MAAM,OAAO,CAAA;AAEvB,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA","sourcesContent":["import legend from './legend'\nimport svg from './svg'\n\nexport default [legend, svg]\n"]}
@@ -0,0 +1,18 @@
1
+ declare const _default: {
2
+ type: string;
3
+ description: string;
4
+ group: string;
5
+ icon: string;
6
+ model: {
7
+ type: string;
8
+ left: number;
9
+ top: number;
10
+ width: number;
11
+ height: number;
12
+ fillStyle: string;
13
+ direction: string;
14
+ strokeStyle: string;
15
+ lineWidth: number;
16
+ };
17
+ };
18
+ export default _default;
@@ -0,0 +1,19 @@
1
+ const icon = new URL('../../icons/legend.png', import.meta.url).href;
2
+ export default {
3
+ type: 'legend',
4
+ description: 'legend for visualizer',
5
+ group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
6
+ icon,
7
+ model: {
8
+ type: 'legend',
9
+ left: 100,
10
+ top: 100,
11
+ width: 200,
12
+ height: 150,
13
+ fillStyle: '#efefef',
14
+ direction: 'vertical',
15
+ strokeStyle: 'rgba(0, 0, 0, 0.3)',
16
+ lineWidth: 1
17
+ }
18
+ };
19
+ //# sourceMappingURL=legend%20copy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"legend copy.js","sourceRoot":"","sources":["../../src/templates/legend copy.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,uBAAuB;IACpC,KAAK,EAAE,WAAW,CAAC,gGAAgG;IACnH,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,WAAW,EAAE,oBAAoB;QACjC,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/legend.png', import.meta.url).href\n\nexport default {\n type: 'legend',\n description: 'legend for visualizer',\n group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n icon,\n model: {\n type: 'legend',\n left: 100,\n top: 100,\n width: 200,\n height: 150,\n fillStyle: '#efefef',\n direction: 'vertical',\n strokeStyle: 'rgba(0, 0, 0, 0.3)',\n lineWidth: 1\n }\n}\n"]}
@@ -0,0 +1,18 @@
1
+ declare const _default: {
2
+ type: string;
3
+ description: string;
4
+ group: string;
5
+ icon: string;
6
+ model: {
7
+ type: string;
8
+ left: number;
9
+ top: number;
10
+ width: number;
11
+ height: number;
12
+ fillStyle: string;
13
+ direction: string;
14
+ strokeStyle: string;
15
+ lineWidth: number;
16
+ };
17
+ };
18
+ export default _default;