@node-projects/web-component-designer 0.0.60 → 0.0.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/elements/documentContainer.d.ts +5 -0
  2. package/dist/elements/documentContainer.js +50 -11
  3. package/dist/elements/widgets/codeView/ICodeView.d.ts +2 -0
  4. package/dist/elements/widgets/codeView/code-view-ace.d.ts +2 -1
  5. package/dist/elements/widgets/codeView/code-view-ace.js +3 -1
  6. package/dist/elements/widgets/codeView/code-view-code-mirror.d.ts +2 -1
  7. package/dist/elements/widgets/codeView/code-view-code-mirror.js +3 -1
  8. package/dist/elements/widgets/codeView/code-view-monaco.d.ts +2 -1
  9. package/dist/elements/widgets/codeView/code-view-monaco.js +11 -1
  10. package/package.json +39 -39
package/dist/elements/documentContainer.d.ts CHANGED
@@ -16,8 +16,13 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
16
16
  private _content;
17
17
  private _tabControl;
18
18
  private _selectionPosition;
19
+ private _splitDiv;
20
+ private _designerDiv;
21
+ private _codeDiv;
22
+ private refreshInSplitViewDebounced;
19
23
  static get style(): CSSStyleSheet;
20
24
  constructor(serviceContainer: ServiceContainer, content?: string);
25
+ refreshInSplitView(): void;
21
26
  dispose(): void;
22
27
  executeCommand(command: IUiCommand): void;
23
28
  canExecuteCommand(command: IUiCommand): boolean;
package/dist/elements/documentContainer.js CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseCustomWebComponentLazyAppend, css } from "@node-projects/base-custom-webcomponent";
1
+ import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
2
2
  import { DesignerTabControl } from "./controls/DesignerTabControl";
3
3
  import { DesignerView } from "./widgets/designerView/designerView";
4
4
  export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
@@ -10,6 +10,10 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
10
10
  _content = '';
11
11
  _tabControl;
12
12
  _selectionPosition;
13
+ _splitDiv;
14
+ _designerDiv;
15
+ _codeDiv;
16
+ refreshInSplitViewDebounced;
13
17
  static get style() {
14
18
  return css `
15
19
  div {
@@ -20,10 +24,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
20
24
  node-projects-designer-view {
21
25
  height: 100%;
22
26
  /*overflow: auto;*/
23
- }`;
27
+ }
28
+ .split-div {
29
+ display: grid;
30
+ grid-template-rows: 1fr 1fr;
31
+ }
32
+ `;
24
33
  }
25
34
  constructor(serviceContainer, content) {
26
35
  super();
36
+ this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200);
27
37
  this._serviceContainer = serviceContainer;
28
38
  if (content != null)
29
39
  this._content = content;
@@ -32,12 +42,26 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
32
42
  div.appendChild(this._tabControl);
33
43
  this.designerView = new DesignerView();
34
44
  this.designerView.setAttribute('exportparts', 'canvas');
35
- this.designerView.title = 'Designer';
36
- this._tabControl.appendChild(this.designerView);
45
+ this._designerDiv = document.createElement("div");
46
+ this._designerDiv.title = 'Designer';
47
+ this._designerDiv.appendChild(this.designerView);
48
+ this._tabControl.appendChild(this._designerDiv);
37
49
  this.designerView.initialize(this._serviceContainer);
38
50
  this.codeView = new serviceContainer.config.codeViewWidget();
39
- this.codeView.title = 'Code';
40
- this._tabControl.appendChild(this.codeView);
51
+ this._codeDiv = document.createElement("div");
52
+ this._codeDiv.title = 'Code';
53
+ this._codeDiv.appendChild(this.codeView);
54
+ this.codeView.onTextChanged.on(text => {
55
+ if (this._tabControl.selectedIndex === 2) {
56
+ this._content = text;
57
+ this.refreshInSplitViewDebounced();
58
+ }
59
+ });
60
+ this._tabControl.appendChild(this._codeDiv);
61
+ this._splitDiv = document.createElement("div");
62
+ this._splitDiv.title = 'Split';
63
+ this._splitDiv.className = 'split-div';
64
+ this._tabControl.appendChild(this._splitDiv);
41
65
  this.demoView = new serviceContainer.config.demoViewWidget();
42
66
  this.demoView.title = 'Preview';
43
67
  this._tabControl.appendChild(this.demoView);
@@ -46,6 +70,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
46
70
  this._tabControl.selectedIndex = 0;
47
71
  });
48
72
  }
73
+ refreshInSplitView() {
74
+ this.designerView.parseHTML(this._content);
75
+ }
49
76
  dispose() {
50
77
  this.codeView.dispose();
51
78
  }
@@ -69,7 +96,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
69
96
  this.designerView.parseHTML(this._content);
70
97
  else if (this._tabControl.selectedIndex === 1)
71
98
  this.codeView.update(this._content);
72
- else if (this._tabControl.selectedIndex === 2)
99
+ else if (this._tabControl.selectedIndex === 2) {
100
+ }
101
+ else if (this._tabControl.selectedIndex === 3)
73
102
  this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
74
103
  }
75
104
  }
@@ -91,11 +120,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
91
120
  this._content = this.designerView.getHTML(designItemsAssignmentList);
92
121
  this._selectionPosition = designItemsAssignmentList.get(primarySelection);
93
122
  }
94
- else if (i.oldIndex === 1)
123
+ else if (i.oldIndex === 1) {
95
124
  this._content = this.codeView.getText();
96
- if (i.newIndex === 0)
125
+ }
126
+ else if (i.oldIndex === 2) {
127
+ this._designerDiv.appendChild(this.designerView);
128
+ this._codeDiv.appendChild(this.codeView);
129
+ }
130
+ if (i.newIndex === 0 || i.newIndex === 2)
97
131
  this.designerView.parseHTML(this._content);
98
- else if (i.newIndex === 1) {
132
+ if (i.newIndex === 1 || i.newIndex === 2) {
99
133
  this.codeView.update(this._content);
100
134
  if (this._selectionPosition) {
101
135
  this.codeView.setSelection(this._selectionPosition);
@@ -105,8 +139,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
105
139
  this.codeView.focusEditor();
106
140
  }
107
141
  }
108
- else if (i.newIndex === 2)
142
+ if (i.newIndex === 2) {
143
+ this._splitDiv.appendChild(this.designerView);
144
+ this._splitDiv.appendChild(this.codeView);
145
+ }
146
+ if (i.newIndex === 3) {
109
147
  this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content);
148
+ }
110
149
  });
111
150
  if (this._content)
112
151
  this.content = this._content;
package/dist/elements/widgets/codeView/ICodeView.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
2
2
  import { IDisposable } from "../../../interfaces/IDisposable";
3
3
  import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
4
+ import { TypedEvent } from '@node-projects/base-custom-webcomponent';
4
5
  export interface ICodeView extends IUiCommandHandler, IDisposable {
5
6
  update(code: string): any;
6
7
  getText(): any;
7
8
  setSelection(position: IStringPosition): any;
8
9
  focusEditor(): any;
10
+ onTextChanged: TypedEvent<string>;
9
11
  }
package/dist/elements/widgets/codeView/code-view-ace.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
1
+ import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { ICodeView } from "./ICodeView";
3
3
  import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
4
4
  import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implem
7
7
  canvasElement: HTMLElement;
8
8
  elementsToPackages: Map<string, string>;
9
9
  code: string;
10
+ onTextChanged: TypedEvent<string>;
10
11
  private _aceEditor;
11
12
  private _editor;
12
13
  static readonly style: CSSStyleSheet;
package/dist/elements/widgets/codeView/code-view-ace.js CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
1
+ import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { CommandType } from '../../../commandHandling/CommandType';
3
3
  class CodeViewAceCompleter {
4
4
  getCompletions(editor, session, pos, prefix, callback) {
@@ -18,6 +18,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
18
18
  canvasElement;
19
19
  elementsToPackages;
20
20
  code;
21
+ onTextChanged = new TypedEvent();
21
22
  _aceEditor;
22
23
  _editor;
23
24
  static style = css `
@@ -111,6 +112,7 @@ export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
111
112
  });
112
113
  let config = { attributes: true, childList: true, characterData: true };
113
114
  observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
115
+ this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
114
116
  }
115
117
  update(code) {
116
118
  this._aceEditor.setValue(code);
package/dist/elements/widgets/codeView/code-view-code-mirror.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
1
+ import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { ICodeView } from "./ICodeView";
3
3
  import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
4
4
  import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -7,6 +7,7 @@ export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend
7
7
  canvasElement: HTMLElement;
8
8
  elementsToPackages: Map<string, string>;
9
9
  code: string;
10
+ onTextChanged: TypedEvent<string>;
10
11
  private _codeMirrorEditor;
11
12
  private _editor;
12
13
  static readonly style: CSSStyleSheet;
package/dist/elements/widgets/codeView/code-view-code-mirror.js CHANGED
@@ -1,9 +1,10 @@
1
- import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
1
+ import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { CommandType } from '../../../commandHandling/CommandType';
3
3
  export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
4
4
  canvasElement;
5
5
  elementsToPackages;
6
6
  code;
7
+ onTextChanged = new TypedEvent();
7
8
  _codeMirrorEditor;
8
9
  _editor;
9
10
  static style = css `
@@ -82,6 +83,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
82
83
  //@ts-ignore
83
84
  this._codeMirrorEditor = CodeMirror(this._editor, config);
84
85
  this._codeMirrorEditor.setSize('100%', '100%');
86
+ this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
85
87
  }
86
88
  update(code) {
87
89
  this._codeMirrorEditor.setValue(code);
package/dist/elements/widgets/codeView/code-view-monaco.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
1
+ import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { ICodeView } from "./ICodeView";
3
3
  import { IActivateable } from '../../../interfaces/IActivateable';
4
4
  import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
@@ -9,6 +9,7 @@ export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend imp
9
9
  canvasElement: HTMLElement;
10
10
  elementsToPackages: Map<string, string>;
11
11
  code: string;
12
+ onTextChanged: TypedEvent<string>;
12
13
  private _monacoEditor;
13
14
  private _editor;
14
15
  static readonly style: CSSStyleSheet;
package/dist/elements/widgets/codeView/code-view-monaco.js CHANGED
@@ -1,4 +1,4 @@
1
- import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
1
+ import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { CommandType } from '../../../commandHandling/CommandType';
3
3
  export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
4
4
  dispose() {
@@ -7,6 +7,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
7
7
  canvasElement;
8
8
  elementsToPackages;
9
9
  code;
10
+ onTextChanged = new TypedEvent();
10
11
  _monacoEditor;
11
12
  _editor;
12
13
  static style = css `
@@ -69,6 +70,15 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
69
70
  }
70
71
  });
71
72
  this._monacoEditor.layout();
73
+ let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
74
+ () => this.onTextChanged.emit(this._monacoEditor.getValue());
75
+ });
76
+ this._monacoEditor.onDidChangeModel(e => {
77
+ changeContentListener.dispose();
78
+ changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
79
+ () => this.onTextChanged.emit(this._monacoEditor.getValue());
80
+ });
81
+ });
72
82
  });
73
83
  }
74
84
  focusEditor() {
package/package.json CHANGED
@@ -1,39 +1,39 @@
1
- {
2
- "description": "A UI designer for Polymer apps",
3
- "name": "@node-projects/web-component-designer",
4
- "version": "0.0.60",
5
- "type": "module",
6
- "main": "./dist/index.js",
7
- "author": "",
8
- "license": "MIT",
9
- "scripts": {
10
- "tsc": "tsc",
11
- "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
12
- },
13
- "dependencies": {
14
- "@node-projects/base-custom-webcomponent": "^0.3.5",
15
- "construct-style-sheets-polyfill": "^3.0.4"
16
- },
17
- "devDependencies": {
18
- "@node-projects/lean-he-esm": "^3.3.0",
19
- "@node-projects/node-html-parser-esm": "^2.4.1",
20
- "@types/codemirror": "^5.60.5",
21
- "@types/jquery": "^3.5.9",
22
- "@types/jquery.fancytree": "0.0.7",
23
- "ace-builds": "^1.4.13",
24
- "codemirror": "^5.64.0",
25
- "esprima-next": "^5.7.0",
26
- "html2canvas": "*",
27
- "jest": "^27.4.3",
28
- "jquery": "^3.6.0",
29
- "jquery.fancytree": "^2.38.0",
30
- "monaco-editor": "^0.30.1",
31
- "ts-jest": "^27.1.0",
32
- "typescript": "^4.5.2",
33
- "typescript-lit-html-plugin": "^0.9.0"
34
- },
35
- "repository": {
36
- "type": "git",
37
- "url": "git+https://github.com/node-projects/web-component-designer.git"
38
- }
39
- }
1
+ {
2
+ "description": "A UI designer for Polymer apps",
3
+ "name": "@node-projects/web-component-designer",
4
+ "version": "0.0.61",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "author": "",
8
+ "license": "MIT",
9
+ "scripts": {
10
+ "tsc": "tsc",
11
+ "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
12
+ },
13
+ "dependencies": {
14
+ "@node-projects/base-custom-webcomponent": "^0.3.7",
15
+ "construct-style-sheets-polyfill": "^3.0.4"
16
+ },
17
+ "devDependencies": {
18
+ "@node-projects/lean-he-esm": "^3.3.0",
19
+ "@node-projects/node-html-parser-esm": "^2.4.1",
20
+ "@types/codemirror": "^5.60.5",
21
+ "@types/jquery": "^3.5.9",
22
+ "@types/jquery.fancytree": "0.0.7",
23
+ "ace-builds": "^1.4.13",
24
+ "codemirror": "^5.64.0",
25
+ "esprima-next": "^5.7.0",
26
+ "html2canvas": "*",
27
+ "jest": "^27.4.3",
28
+ "jquery": "^3.6.0",
29
+ "jquery.fancytree": "^2.38.0",
30
+ "monaco-editor": "^0.30.1",
31
+ "ts-jest": "^27.1.1",
32
+ "typescript": "^4.5.2",
33
+ "typescript-lit-html-plugin": "^0.9.0"
34
+ },
35
+ "repository": {
36
+ "type": "git",
37
+ "url": "git+https://github.com/node-projects/web-component-designer.git"
38
+ }
39
+ }