@node-projects/web-component-designer 0.0.188 → 0.0.189

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 (3) hide show
  1. package/dist/elements/widgets/codeView/code-view-monaco.d.ts +2 -0
  2. package/dist/elements/widgets/codeView/code-view-monaco.js +77 -52
  3. package/package.json +1 -1
package/dist/elements/widgets/codeView/code-view-monaco.d.ts CHANGED
@@ -5,6 +5,7 @@ import { IStringPosition } from '../../services/htmlWriterService/IStringPositio
5
5
  import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
6
6
  import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
7
7
  export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler {
8
+ private static _initalized;
8
9
  dispose(): void;
9
10
  canvasElement: HTMLElement;
10
11
  elementsToPackages: Map<string, string>;
@@ -16,6 +17,7 @@ export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend imp
16
17
  static readonly template: HTMLTemplateElement;
17
18
  executeCommand(command: IUiCommand): void;
18
19
  canExecuteCommand(command: IUiCommand): boolean;
20
+ static initMonacoEditor(): Promise<void>;
19
21
  ready(): Promise<void>;
20
22
  focusEditor(): void;
21
23
  activated(): void;
package/dist/elements/widgets/codeView/code-view-monaco.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  import { CommandType } from '../../../commandHandling/CommandType.js';
3
3
  export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
4
+ static _initalized;
4
5
  dispose() {
5
6
  this._monacoEditor.dispose();
6
7
  }
@@ -53,6 +54,35 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
53
54
  }
54
55
  return false;
55
56
  }
57
+ static initMonacoEditor() {
58
+ return new Promise(async (resolve) => {
59
+ if (!CodeViewMonaco._initalized) {
60
+ CodeViewMonaco._initalized = true;
61
+ //@ts-ignore
62
+ require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
63
+ //@ts-ignore
64
+ require(['vs/editor/editor.main'], () => {
65
+ //@ts-ignore
66
+ monaco.editor.defineTheme('webComponentDesignerTheme', {
67
+ base: 'vs',
68
+ inherit: true,
69
+ //@ts-ignore
70
+ rules: [{ background: 'EDF9FA' }],
71
+ colors: {
72
+ 'editor.selectionBackground': '#add6ff',
73
+ 'editor.inactiveSelectionBackground': '#add6ff'
74
+ }
75
+ });
76
+ //@ts-ignore
77
+ monaco.editor.setTheme('webComponentDesignerTheme');
78
+ resolve();
79
+ });
80
+ }
81
+ else {
82
+ resolve();
83
+ }
84
+ });
85
+ }
56
86
  async ready() {
57
87
  let style;
58
88
  //@ts-ignore
@@ -64,80 +94,75 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
64
94
  style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
65
95
  this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
66
96
  this._editor = this._getDomElement('container');
67
- //@ts-ignore
68
- require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
69
- //@ts-ignore
70
- require(['vs/editor/editor.main'], () => {
71
- //@ts-ignore
72
- this._monacoEditor = monaco.editor.create(this._editor, {
73
- automaticLayout: true,
74
- wordWrapColumn: 1000,
75
- wordWrap: 'wordWrapColumn',
76
- value: this.code,
77
- language: 'html',
78
- minimap: {
79
- size: 'fill'
80
- },
81
- fixedOverflowWidgets: true,
82
- scrollbar: {
83
- useShadows: false,
84
- verticalHasArrows: true,
85
- horizontalHasArrows: true,
86
- vertical: 'visible',
87
- horizontal: 'visible'
88
- }
89
- });
90
- //@ts-ignore
91
- monaco.editor.defineTheme('myTheme', {
92
- base: 'vs',
93
- inherit: true,
97
+ await CodeViewMonaco.initMonacoEditor();
98
+ const resizeObserver = new ResizeObserver(() => {
99
+ if (this._editor.offsetWidth > 0) {
94
100
  //@ts-ignore
95
- rules: [{ background: 'EDF9FA' }],
96
- colors: {
97
- 'editor.selectionBackground': '#add6ff',
98
- 'editor.inactiveSelectionBackground': '#add6ff'
99
- }
100
- });
101
- //@ts-ignore
102
- monaco.editor.setTheme('myTheme');
103
- this._monacoEditor.layout();
104
- let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
105
- this.onTextChanged.emit(this._monacoEditor.getValue());
106
- });
107
- this._monacoEditor.onDidChangeModel(e => {
108
- changeContentListener.dispose();
109
- changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
101
+ this._monacoEditor = monaco.editor.create(this._editor, {
102
+ automaticLayout: true,
103
+ wordWrapColumn: 1000,
104
+ wordWrap: 'wordWrapColumn',
105
+ value: this.code,
106
+ language: 'html',
107
+ minimap: {
108
+ size: 'fill'
109
+ },
110
+ fixedOverflowWidgets: true,
111
+ scrollbar: {
112
+ useShadows: false,
113
+ verticalHasArrows: true,
114
+ horizontalHasArrows: true,
115
+ vertical: 'visible',
116
+ horizontal: 'visible'
117
+ }
118
+ });
119
+ let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
110
120
  this.onTextChanged.emit(this._monacoEditor.getValue());
111
121
  });
112
- });
122
+ this._monacoEditor.onDidChangeModel(e => {
123
+ changeContentListener.dispose();
124
+ changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
125
+ this.onTextChanged.emit(this._monacoEditor.getValue());
126
+ });
127
+ });
128
+ this._monacoEditor.focus();
129
+ resizeObserver.disconnect();
130
+ }
131
+ ;
113
132
  });
133
+ resizeObserver.observe(this._editor);
114
134
  }
115
135
  focusEditor() {
116
136
  requestAnimationFrame(() => {
117
137
  this.focus();
118
- this._monacoEditor.focus();
138
+ if (this._monacoEditor)
139
+ this._monacoEditor.focus();
119
140
  });
120
141
  }
121
142
  activated() {
122
143
  if (this._monacoEditor)
123
- this._monacoEditor.layout();
144
+ if (this._monacoEditor)
145
+ this._monacoEditor.layout();
124
146
  }
125
147
  update(code) {
126
148
  this.code = code;
127
149
  if (this._monacoEditor) {
128
- this._monacoEditor.setValue(code);
150
+ if (this._monacoEditor)
151
+ this._monacoEditor.setValue(code);
129
152
  }
130
153
  }
131
154
  getText() {
132
155
  return this._monacoEditor.getValue();
133
156
  }
134
157
  setSelection(position) {
135
- let model = this._monacoEditor.getModel();
136
- let point1 = model.getPositionAt(position.start);
137
- let point2 = model.getPositionAt(position.start + position.length);
138
- this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
139
- //@ts-ignore
140
- setTimeout(() => this._monacoEditor.revealRangeInCenter(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1));
158
+ if (this._monacoEditor) {
159
+ let model = this._monacoEditor.getModel();
160
+ let point1 = model.getPositionAt(position.start);
161
+ let point2 = model.getPositionAt(position.start + position.length);
162
+ this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column });
163
+ //@ts-ignore
164
+ setTimeout(() => this._monacoEditor.revealRangeInCenter(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1));
165
+ }
141
166
  }
142
167
  }
143
168
  customElements.define('node-projects-code-view-monaco', CodeViewMonaco);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "description": "A UI designer for Polymer apps",
3
3
  "name": "@node-projects/web-component-designer",
4
- "version": "0.0.188",
4
+ "version": "0.0.189",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "",