@node-projects/web-component-designer 0.0.250 → 0.0.252

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 (84) hide show
  1. package/dist/elements/helper/GridHelper.js +8 -8
  2. package/dist/elements/services/propertiesService/PropertyTabsService.js +1 -0
  3. package/dist/elements/services/propertiesService/services/CssProperties.json +39 -6
  4. package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts +2 -1
  5. package/dist/elements/services/propertiesService/services/CssPropertiesService.js +9 -0
  6. package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js +0 -2
  7. package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.js +4 -0
  8. package/dist/elements/widgets/designerView/tools/DrawLineTool.js +4 -0
  9. package/dist/elements/widgets/designerView/tools/DrawPathTool.js +4 -0
  10. package/dist/elements/widgets/designerView/tools/DrawRectTool.js +4 -0
  11. package/dist/index.d.ts +0 -1
  12. package/package.json +4 -4
  13. package/dist/elements/services/dragDropService/ExternalDragDropService copy.d.ts +0 -6
  14. package/dist/elements/services/dragDropService/ExternalDragDropService copy.js +0 -28
  15. package/dist/elements/services/dragDropService/IExternalDragDropService copy.d.ts +0 -5
  16. package/dist/elements/services/dragDropService/IExternalDragDropService copy.js +0 -1
  17. package/dist/elements/services/htmlParserService/AbstractClassElementParserService.d.ts +0 -9
  18. package/dist/elements/services/htmlParserService/AbstractClassElementParserService.js +0 -46
  19. package/dist/elements/services/htmlParserService/BaseCustomWebcomponentParserService copy.d.ts +0 -11
  20. package/dist/elements/services/htmlParserService/BaseCustomWebcomponentParserService copy.js +0 -90
  21. package/dist/elements/services/propertiesService/DefaultEditorTypesService copy.d.ts +0 -6
  22. package/dist/elements/services/propertiesService/DefaultEditorTypesService copy.js +0 -64
  23. package/dist/elements/services/propertiesService/GridEditorTypesService.d.ts +0 -6
  24. package/dist/elements/services/propertiesService/GridEditorTypesService.js +0 -64
  25. package/dist/elements/services/propertiesService/propertyEditors/GridCellPropertyEditor.d.ts +0 -9
  26. package/dist/elements/services/propertiesService/propertyEditors/GridCellPropertyEditor.js +0 -16
  27. package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.d.ts +0 -9
  28. package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.js +0 -21
  29. package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.d.ts +0 -15
  30. package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.js +0 -70
  31. package/dist/elements/services/undoService/transactionItems/ContentChangeAction.d.ts +0 -13
  32. package/dist/elements/services/undoService/transactionItems/ContentChangeAction.js +0 -38
  33. package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction copy.d.ts +0 -14
  34. package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction copy.js +0 -44
  35. package/dist/elements/services/undoService/transactionItems/InsertChildAction copy.d.ts +0 -16
  36. package/dist/elements/services/undoService/transactionItems/InsertChildAction copy.js +0 -37
  37. package/dist/elements/services/undoService/transactionItems/StylesheetStyleChangeAction.d.ts +0 -17
  38. package/dist/elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js +0 -28
  39. package/dist/elements/widgets/codeView/code-view-ace copy.d.ts +0 -24
  40. package/dist/elements/widgets/codeView/code-view-ace copy.js +0 -133
  41. package/dist/elements/widgets/codeView/code-view-code-mirror copy.d.ts +0 -25
  42. package/dist/elements/widgets/codeView/code-view-code-mirror copy.js +0 -106
  43. package/dist/elements/widgets/codeView/code-view-code-mirror-6.d.ts +0 -25
  44. package/dist/elements/widgets/codeView/code-view-code-mirror-6.js +0 -102
  45. package/dist/elements/widgets/codeView/code-view-jar.d.ts +0 -23
  46. package/dist/elements/widgets/codeView/code-view-jar.js +0 -121
  47. package/dist/elements/widgets/designerView/extensions/GridExtension.d.ts +0 -51
  48. package/dist/elements/widgets/designerView/extensions/GridExtension.js +0 -346
  49. package/dist/elements/widgets/designerView/extensions/GridExtensionProvider.d.ts +0 -11
  50. package/dist/elements/widgets/designerView/extensions/GridExtensionProvider.js +0 -22
  51. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension copy 2.d.ts +0 -51
  52. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension copy 2.js +0 -346
  53. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension copy.d.ts +0 -51
  54. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension copy.js +0 -346
  55. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension.d.ts +0 -16
  56. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension.js +0 -71
  57. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtensionProvider copy.d.ts +0 -10
  58. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtensionProvider copy.js +0 -22
  59. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtensionProvider.d.ts +0 -10
  60. package/dist/elements/widgets/designerView/extensions/grid/EditGridExtensionProvider.js +0 -18
  61. package/dist/elements/widgets/designerView/extensions/grid/GridExtension copy.d.ts +0 -51
  62. package/dist/elements/widgets/designerView/extensions/grid/GridExtension copy.js +0 -346
  63. package/dist/elements/widgets/designerView/extensions/grid/GridExtension.d.ts +0 -51
  64. package/dist/elements/widgets/designerView/extensions/grid/GridExtension.js +0 -346
  65. package/dist/elements/widgets/designerView/extensions/grid/GridExtensionProvider copy.d.ts +0 -11
  66. package/dist/elements/widgets/designerView/extensions/grid/GridExtensionProvider copy.js +0 -22
  67. package/dist/elements/widgets/designerView/extensions/grid/GridExtensionProvider.d.ts +0 -11
  68. package/dist/elements/widgets/designerView/extensions/grid/GridExtensionProvider.js +0 -22
  69. package/dist/elements/widgets/designerView/extensions/grid/NewEditGridExtensionProvider.d.ts +0 -10
  70. package/dist/elements/widgets/designerView/extensions/grid/NewEditGridExtensionProvider.js +0 -22
  71. package/dist/elements/widgets/designerView/extensions/grid/OldEditGridExtension.d.ts +0 -51
  72. package/dist/elements/widgets/designerView/extensions/grid/OldEditGridExtension.js +0 -346
  73. package/dist/elements/widgets/designerView/extensions/grid/OldEditGridExtensionProvider.d.ts +0 -10
  74. package/dist/elements/widgets/designerView/extensions/grid/OldEditGridExtensionProvider.js +0 -22
  75. package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstExtensionProvider.d.ts +0 -12
  76. package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstExtensionProvider.js +0 -17
  77. package/dist/elements/widgets/designerView/extensions/logic/DisplayGridExtensionProvider.d.ts +0 -11
  78. package/dist/elements/widgets/designerView/extensions/logic/DisplayGridExtensionProvider.js +0 -23
  79. package/dist/elements/widgets/designerView/extensions/logic/OrCombineContainerProvider.d.ts +0 -12
  80. package/dist/elements/widgets/designerView/extensions/logic/OrCombineContainerProvider.js +0 -17
  81. package/dist/interfaces/ICommandHandler.d.ts +0 -5
  82. package/dist/interfaces/ICommandHandler.js +0 -1
  83. package/dist/polyfill/mobileDragDrop.d.ts +0 -2
  84. package/dist/polyfill/mobileDragDrop.js +0 -32
@@ -1,16 +0,0 @@
1
- import { BasePropertyEditor } from './BasePropertyEditor.js';
2
- import { html } from '@node-projects/base-custom-webcomponent';
3
- export class GridCellPropertyEditor extends BasePropertyEditor {
4
- static template = html `
5
- <div style="display: flex;">
6
-
7
- </div>
8
- `;
9
- _input;
10
- constructor(property) {
11
- super(property);
12
- }
13
- refreshValue(valueType, value) {
14
- debugger;
15
- }
16
- }
@@ -1,9 +0,0 @@
1
- import { IProperty } from '../IProperty.js';
2
- import { BasePropertyEditor } from './BasePropertyEditor.js';
3
- import { ValueType } from '../ValueType.js';
4
- export declare class JsonPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
5
- static template: HTMLTemplateElement;
6
- _input: HTMLInputElement;
7
- constructor(property: IProperty);
8
- refreshValue(valueType: ValueType, value: any): void;
9
- }
@@ -1,21 +0,0 @@
1
- import { BasePropertyEditor } from './BasePropertyEditor.js';
2
- import { html } from '@node-projects/base-custom-webcomponent';
3
- export class JsonPropertyEditor extends BasePropertyEditor {
4
- static template = html `
5
- <div style="display: flex;">
6
- <input id="input" type="text">
7
- <button style="width: 30px;">...</button>
8
- </div>
9
- `;
10
- _input;
11
- constructor(property) {
12
- super(property);
13
- let el = JsonPropertyEditor.template.content.cloneNode(true);
14
- this._input = el.getElementById('input');
15
- this._input.onchange = (e) => this._valueChanged(this._input.value);
16
- this.element = el;
17
- }
18
- refreshValue(valueType, value) {
19
- this._input.value = value;
20
- }
21
- }
@@ -1,15 +0,0 @@
1
- import { ITransactionItem } from '../ITransactionItem.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- import { IBinding } from '../../../item/IBinding.js';
4
- export declare class AttributeChangeAction implements ITransactionItem {
5
- constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null);
6
- title?: string;
7
- get affectedItems(): IDesignItem[];
8
- undo(): void;
9
- do(): void;
10
- designItem: IDesignItem;
11
- name: string;
12
- newValue: any;
13
- oldValue: any;
14
- mergeWith(other: ITransactionItem): boolean;
15
- }
@@ -1,70 +0,0 @@
1
- export class AttributeChangeAction {
2
- constructor(designItem, name, newValue, oldValue) {
3
- this.title = "Change Attribute " + name + " of &lt;" + designItem.name + "&gt;";
4
- this.designItem = designItem;
5
- this.name = name;
6
- this.newValue = newValue;
7
- this.oldValue = oldValue;
8
- }
9
- title;
10
- get affectedItems() {
11
- return [this.designItem];
12
- }
13
- undo() {
14
- if (this.oldValue == null) {
15
- this.designItem._withoutUndoRemoveAttribute(this.name);
16
- try {
17
- this.designItem.element.removeAttribute(this.name);
18
- }
19
- catch (e) {
20
- console.warn(e);
21
- }
22
- }
23
- else {
24
- this.designItem._withoutUndoSetAttribute(this.name, this.oldValue);
25
- if (this.name != "draggable") {
26
- try {
27
- if (typeof this.oldValue === 'string')
28
- this.designItem.element.setAttribute(this.name, this.oldValue);
29
- }
30
- catch (e) {
31
- console.warn(e);
32
- }
33
- }
34
- }
35
- }
36
- do() {
37
- if (this.newValue == null) {
38
- this.designItem._withoutUndoRemoveAttribute(this.name);
39
- try {
40
- this.designItem.element.removeAttribute(this.name);
41
- }
42
- catch (e) {
43
- console.warn(e);
44
- }
45
- }
46
- else {
47
- this.designItem._withoutUndoSetAttribute(this.name, this.newValue);
48
- if (this.name != "draggable") {
49
- try {
50
- if (typeof this.newValue === 'string')
51
- this.designItem.element.setAttribute(this.name, this.newValue);
52
- }
53
- catch (e) {
54
- console.warn(e);
55
- }
56
- }
57
- }
58
- }
59
- designItem;
60
- name;
61
- newValue;
62
- oldValue;
63
- mergeWith(other) {
64
- if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) {
65
- this.newValue = other.newValue;
66
- return true;
67
- }
68
- return false;
69
- }
70
- }
@@ -1,13 +0,0 @@
1
- import { ITransactionItem } from '../ITransactionItem.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- export declare class ContentChangeAction implements ITransactionItem {
4
- constructor(designItem: IDesignItem, newValue: string);
5
- title?: string;
6
- get affectedItems(): IDesignItem[];
7
- undo(): void;
8
- do(): void;
9
- designItem: IDesignItem;
10
- newValue: any;
11
- oldValue: any;
12
- mergeWith(other: ITransactionItem): boolean;
13
- }
@@ -1,38 +0,0 @@
1
- import { NodeType } from '../../../item/NodeType.js';
2
- export class ContentChangeAction {
3
- constructor(designItem, newValue) {
4
- this.title = "Change Content of " + designItem.name + " to " + newValue;
5
- this.designItem = designItem;
6
- this.newValue = newValue;
7
- }
8
- title;
9
- get affectedItems() {
10
- return [this.designItem];
11
- }
12
- undo() {
13
- if (this.designItem.nodeType == NodeType.TextNode || this.designItem.nodeType == NodeType.Comment) {
14
- this.designItem.element.textContent = this.oldValue;
15
- }
16
- else {
17
- this.designItem.element.innerHTML = this.oldValue;
18
- }
19
- this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'edited', designItems: [this.designItem] });
20
- }
21
- do() {
22
- if (this.designItem.nodeType == NodeType.TextNode || this.designItem.nodeType == NodeType.Comment) {
23
- this.oldValue = this.designItem.element.textContent;
24
- this.designItem.element.textContent = this.newValue;
25
- }
26
- else {
27
- this.oldValue = this.designItem.element.innerHTML;
28
- this.designItem.element.innerHTML = this.newValue;
29
- }
30
- this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'edited', designItems: [this.designItem] });
31
- }
32
- designItem;
33
- newValue;
34
- oldValue;
35
- mergeWith(other) {
36
- return false;
37
- }
38
- }
@@ -1,14 +0,0 @@
1
- import { ITransactionItem } from '../ITransactionItem.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- export declare class CssStyleChangeAction implements ITransactionItem {
4
- constructor(designItem: IDesignItem, name: string, newValue: any, oldValue: any);
5
- title?: string;
6
- get affectedItems(): IDesignItem[];
7
- undo(): void;
8
- do(): void;
9
- designItem: IDesignItem;
10
- name: string;
11
- newValue: any;
12
- oldValue: any;
13
- mergeWith(other: ITransactionItem): boolean;
14
- }
@@ -1,44 +0,0 @@
1
- export class CssStyleChangeAction {
2
- constructor(designItem, name, newValue, oldValue) {
3
- this.title = "Change Css Style " + name + " of &lt;" + designItem.name + "&gt;";
4
- this.designItem = designItem;
5
- this.name = name;
6
- this.newValue = newValue;
7
- this.oldValue = oldValue;
8
- }
9
- title;
10
- get affectedItems() {
11
- return [this.designItem];
12
- }
13
- undo() {
14
- if (this.oldValue === '' || this.oldValue == null) {
15
- this.designItem._withoutUndoRemoveStyle(this.name);
16
- this.designItem.element.style[this.name] = '';
17
- }
18
- else {
19
- this.designItem._withoutUndoSetStyle(this.name, this.oldValue);
20
- this.designItem.element.style[this.name] = this.oldValue;
21
- }
22
- }
23
- do() {
24
- if (this.newValue === '' || this.newValue == null) {
25
- this.designItem._withoutUndoRemoveStyle(this.name);
26
- this.designItem.element.style[this.name] = '';
27
- }
28
- else {
29
- this.designItem._withoutUndoSetStyle(this.name, this.newValue);
30
- this.designItem.element.style[this.name] = this.newValue;
31
- }
32
- }
33
- designItem;
34
- name;
35
- newValue;
36
- oldValue;
37
- mergeWith(other) {
38
- if (other instanceof CssStyleChangeAction && this.designItem === other.designItem && this.name === other.name) {
39
- this.newValue = other.newValue;
40
- return true;
41
- }
42
- return false;
43
- }
44
- }
@@ -1,16 +0,0 @@
1
- import { ITransactionItem } from '../ITransactionItem.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- export declare class InsertChildAction implements ITransactionItem {
4
- constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
5
- title?: string;
6
- get affectedItems(): IDesignItem[];
7
- undo(): void;
8
- do(): void;
9
- designItem: IDesignItem;
10
- newParent: IDesignItem;
11
- newIndex: number;
12
- oldParent: IDesignItem;
13
- oldIndex: number;
14
- newItem: IDesignItem;
15
- mergeWith(other: ITransactionItem): boolean;
16
- }
@@ -1,37 +0,0 @@
1
- export class InsertChildAction {
2
- constructor(designItem, newParent, newIndex) {
3
- this.title = "Move or Insert Item";
4
- this.designItem = designItem;
5
- this.newParent = newParent;
6
- this.newIndex = newIndex;
7
- }
8
- title;
9
- get affectedItems() {
10
- if (this.oldParent)
11
- return [this.designItem, this.newParent, this.oldParent];
12
- return [this.designItem, this.newParent];
13
- }
14
- undo() {
15
- if (this.oldParent)
16
- this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
17
- else
18
- this.designItem.parent._removeChildInternal(this.designItem);
19
- this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
20
- }
21
- do() {
22
- this.oldParent = this.designItem.parent;
23
- if (this.oldParent)
24
- this.oldIndex = this.designItem.parent.indexOf(this.designItem);
25
- this.newParent._insertChildInternal(this.designItem, this.newIndex);
26
- this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
27
- }
28
- designItem;
29
- newParent;
30
- newIndex;
31
- oldParent;
32
- oldIndex;
33
- newItem;
34
- mergeWith(other) {
35
- return false;
36
- }
37
- }
@@ -1,17 +0,0 @@
1
- import { ITransactionItem } from '../ITransactionItem.js';
2
- import { IDesignItem } from '../../../item/IDesignItem.js';
3
- import { IStyleDeclaration, IStylesheetService } from '../../stylesheetService/IStylesheetService.js';
4
- export declare class StylesheetStyleChangeAction implements ITransactionItem {
5
- private stylesheetService;
6
- private declaration;
7
- constructor(stylesheetService: IStylesheetService, declaration: IStyleDeclaration, newValue: any, oldValue: any);
8
- title?: string;
9
- get affectedItems(): any[];
10
- undo(): void;
11
- do(): void;
12
- designItem: IDesignItem;
13
- name: string;
14
- newValue: any;
15
- oldValue: any;
16
- mergeWith(other: ITransactionItem): boolean;
17
- }
@@ -1,28 +0,0 @@
1
- export class StylesheetStyleChangeAction {
2
- stylesheetService;
3
- declaration;
4
- constructor(stylesheetService, declaration, newValue, oldValue) {
5
- this.title = "Change Css Style " + declaration.name + " to " + newValue;
6
- this.stylesheetService = stylesheetService;
7
- this.declaration = declaration;
8
- this.newValue = newValue;
9
- this.oldValue = oldValue;
10
- }
11
- title;
12
- get affectedItems() {
13
- return [];
14
- }
15
- undo() {
16
- this.stylesheetService.updateDeclarationValueWithoutUndo(this.declaration, this.oldValue, false);
17
- }
18
- do() {
19
- this.stylesheetService.updateDeclarationValueWithoutUndo(this.declaration, this.newValue, false);
20
- }
21
- designItem;
22
- name;
23
- newValue;
24
- oldValue;
25
- mergeWith(other) {
26
- return false;
27
- }
28
- }
@@ -1,24 +0,0 @@
1
- import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
- import { ICodeView } from './ICodeView.js';
3
- import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
4
- import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
5
- import { IDisposable } from '../../../interfaces/IDisposable.js';
6
- export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
7
- canvasElement: HTMLElement;
8
- elementsToPackages: Map<string, string>;
9
- code: string;
10
- onTextChanged: TypedEvent<string>;
11
- private _aceEditor;
12
- private _editor;
13
- static readonly style: CSSStyleSheet;
14
- constructor();
15
- dispose(): void;
16
- executeCommand(command: IUiCommand): void;
17
- canExecuteCommand(command: IUiCommand): boolean;
18
- focusEditor(): void;
19
- oneTimeSetup(): void;
20
- ready(): void;
21
- update(code: any): void;
22
- getText(): string;
23
- setSelection(position: IStringPosition): void;
24
- }
@@ -1,133 +0,0 @@
1
- import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
- import { CommandType } from '../../../commandHandling/CommandType.js';
3
- class CodeViewAceCompleter {
4
- getCompletions(editor, session, pos, prefix, callback) {
5
- if (prefix.length === 0) {
6
- callback(null, []);
7
- return;
8
- }
9
- let wordList = ['t-t', 'visu-conveyor']; //TODO: get word list from custom elements
10
- {
11
- callback(null, wordList.map((w) => {
12
- return { name: w, value: w, score: 1, meta: "tag" };
13
- }));
14
- }
15
- }
16
- }
17
- export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
18
- canvasElement;
19
- elementsToPackages;
20
- code;
21
- onTextChanged = new TypedEvent();
22
- _aceEditor;
23
- _editor;
24
- static style = css `
25
- :host {
26
- display: block;
27
- height: 100%;
28
- width: 100%;
29
- }
30
- `;
31
- constructor() {
32
- super();
33
- this.style.display = 'block';
34
- this._editor = document.createElement("div");
35
- this._editor.style.height = '100%';
36
- this._editor.style.width = '100%';
37
- this.shadowRoot.appendChild(this._editor);
38
- }
39
- dispose() {
40
- this._aceEditor.destroy();
41
- }
42
- executeCommand(command) {
43
- switch (command.type) {
44
- case CommandType.undo:
45
- this._aceEditor.execCommand('undo');
46
- break;
47
- case CommandType.redo:
48
- this._aceEditor.execCommand('redo');
49
- break;
50
- case CommandType.copy:
51
- let text = this._aceEditor.getCopyText();
52
- this._aceEditor.execCommand("copy");
53
- navigator.clipboard.writeText(text);
54
- break;
55
- case CommandType.paste:
56
- navigator.clipboard.readText().then(text => {
57
- this._aceEditor.execCommand("paste", text);
58
- });
59
- break;
60
- case CommandType.cut:
61
- text = this._aceEditor.getCopyText();
62
- this._aceEditor.execCommand("cut");
63
- navigator.clipboard.writeText(text);
64
- break;
65
- case CommandType.delete:
66
- this._aceEditor.execCommand("delete");
67
- break;
68
- }
69
- }
70
- canExecuteCommand(command) {
71
- switch (command.type) {
72
- case CommandType.undo:
73
- case CommandType.redo:
74
- case CommandType.copy:
75
- case CommandType.paste:
76
- case CommandType.cut:
77
- case CommandType.delete:
78
- return true;
79
- }
80
- return false;
81
- }
82
- focusEditor() {
83
- requestAnimationFrame(() => {
84
- this.focus();
85
- this._aceEditor.focus();
86
- });
87
- }
88
- oneTimeSetup() {
89
- //@ts-ignore
90
- let langTools = ace.require("ace/ext/language_tools");
91
- langTools.addCompleter(new CodeViewAceCompleter());
92
- }
93
- ready() {
94
- //@ts-ignore
95
- this._aceEditor = ace.edit(this._editor, {
96
- theme: "ace/theme/chrome",
97
- mode: "ace/mode/html",
98
- value: "",
99
- autoScrollEditorIntoView: true,
100
- fontSize: "14px",
101
- showPrintMargin: false,
102
- displayIndentGuides: true,
103
- enableBasicAutocompletion: true,
104
- enableSnippets: true,
105
- enableLiveAutocompletion: true
106
- });
107
- //own snippet completer: http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview
108
- this._aceEditor.renderer.attachToShadowRoot();
109
- let observer = new MutationObserver((m) => {
110
- this._aceEditor.setAutoScrollEditorIntoView(false);
111
- this._aceEditor.setAutoScrollEditorIntoView(true);
112
- });
113
- let config = { attributes: true, childList: true, characterData: true };
114
- observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
115
- this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
116
- }
117
- update(code) {
118
- this._aceEditor.setValue(code);
119
- this._aceEditor.clearSelection();
120
- }
121
- getText() {
122
- return this._aceEditor.getValue();
123
- }
124
- setSelection(position) {
125
- let point1 = this._aceEditor.session.getDocument().indexToPosition(position.start, 0);
126
- let point2 = this._aceEditor.session.getDocument().indexToPosition(position.start + position.length, 0);
127
- //@ts-ignore
128
- this._aceEditor.selection.setRange({ start: point1, end: point2 });
129
- //@ts-ignore
130
- this._aceEditor.scrollToLine(point1.row);
131
- }
132
- }
133
- customElements.define('node-projects-code-view-ace', CodeViewAce);
@@ -1,25 +0,0 @@
1
- import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
2
- import { ICodeView } from './ICodeView.js';
3
- import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
4
- import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
5
- import { IDisposable } from '../../../interfaces/IDisposable.js';
6
- export declare class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
7
- canvasElement: HTMLElement;
8
- elementsToPackages: Map<string, string>;
9
- code: string;
10
- onTextChanged: any;
11
- mode: string;
12
- private _codeMirrorEditor;
13
- private _editor;
14
- static readonly style: any;
15
- static readonly template: any;
16
- constructor();
17
- dispose(): void;
18
- executeCommand(command: IUiCommand): void;
19
- canExecuteCommand(command: IUiCommand): boolean;
20
- focusEditor(): void;
21
- ready(): void;
22
- update(code: any): void;
23
- getText(): string;
24
- setSelection(position: IStringPosition): void;
25
- }
@@ -1,106 +0,0 @@
1
- import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
- import { CommandType } from '../../../commandHandling/CommandType.js';
3
- export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
4
- canvasElement;
5
- elementsToPackages;
6
- code;
7
- onTextChanged = new TypedEvent();
8
- mode = 'xml';
9
- _codeMirrorEditor;
10
- _editor;
11
- static style = css `
12
- :host {
13
- display: block;
14
- height: 100%;
15
- width: 100%;
16
- }`;
17
- static template = html `
18
- <div style="width: 100%; height: 100%; overflow: auto;">
19
- <div id="textarea"></div>
20
- </div>`;
21
- constructor() {
22
- super();
23
- this._restoreCachedInititalValues();
24
- import("codemirror/lib/codemirror.css", { with: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, ...this.shadowRoot.adoptedStyleSheets]);
25
- import("codemirror/addon/fold/foldgutter.css", { with: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, ...this.shadowRoot.adoptedStyleSheets]);
26
- this.style.display = 'block';
27
- this._editor = this._getDomElement('textarea');
28
- }
29
- dispose() {
30
- }
31
- executeCommand(command) {
32
- switch (command.type) {
33
- case CommandType.undo:
34
- this._codeMirrorEditor.undo();
35
- break;
36
- case CommandType.redo:
37
- this._codeMirrorEditor.redo();
38
- break;
39
- case CommandType.copy:
40
- const text = this._codeMirrorEditor.getSelection();
41
- navigator.clipboard.writeText(text);
42
- break;
43
- case CommandType.paste:
44
- navigator.clipboard.readText().then(text => {
45
- this._codeMirrorEditor.replaceSelection(text);
46
- });
47
- break;
48
- case CommandType.cut:
49
- const textc = this._codeMirrorEditor.getSelection();
50
- navigator.clipboard.writeText(textc);
51
- this._codeMirrorEditor.replaceSelection('');
52
- break;
53
- case CommandType.delete:
54
- this._codeMirrorEditor.replaceSelection('');
55
- break;
56
- }
57
- }
58
- canExecuteCommand(command) {
59
- switch (command.type) {
60
- case CommandType.undo:
61
- case CommandType.redo:
62
- case CommandType.copy:
63
- case CommandType.paste:
64
- case CommandType.cut:
65
- case CommandType.delete:
66
- return true;
67
- }
68
- return false;
69
- }
70
- focusEditor() {
71
- requestAnimationFrame(() => {
72
- this.focus();
73
- this._codeMirrorEditor.focus();
74
- });
75
- }
76
- ready() {
77
- const config = {
78
- tabSize: 3,
79
- lineNumbers: true,
80
- mode: this.mode,
81
- //@ts-ignore
82
- htmlMode: true,
83
- lineWrapping: true,
84
- //@ts-ignore
85
- extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } },
86
- foldGutter: true,
87
- gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
88
- };
89
- //@ts-ignore
90
- this._codeMirrorEditor = CodeMirror(this._editor, config);
91
- this._codeMirrorEditor.setSize('100%', '100%');
92
- this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue()));
93
- }
94
- update(code) {
95
- this._codeMirrorEditor.setValue(code);
96
- }
97
- getText() {
98
- return this._codeMirrorEditor.getValue();
99
- }
100
- setSelection(position) {
101
- let point1 = this._codeMirrorEditor.posFromIndex(position.start);
102
- let point2 = this._codeMirrorEditor.posFromIndex(position.start + position.length);
103
- this._codeMirrorEditor.setSelection(point1, point2);
104
- }
105
- }
106
- customElements.define('node-projects-code-view-code-mirror', CodeViewCodeMirror);
@@ -1,25 +0,0 @@
1
- import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
2
- import { ICodeView } from './ICodeView.js';
3
- import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
4
- import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
5
- import { IDisposable } from '../../../interfaces/IDisposable.js';
6
- export declare class CodeViewCodeMirror6 extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
7
- canvasElement: HTMLElement;
8
- elementsToPackages: Map<string, string>;
9
- code: string;
10
- onTextChanged: TypedEvent<string>;
11
- mode: string;
12
- private _editor;
13
- static readonly style: CSSStyleSheet;
14
- static readonly template: HTMLTemplateElement;
15
- private _cm;
16
- constructor();
17
- ready(): void;
18
- dispose(): void;
19
- executeCommand(command: IUiCommand): Promise<void>;
20
- canExecuteCommand(command: IUiCommand): boolean;
21
- focusEditor(): void;
22
- update(code: any): void;
23
- getText(): string;
24
- setSelection(position: IStringPosition): void;
25
- }