@node-projects/web-component-designer 0.0.292 → 0.1.1
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.
- package/README.md +1 -30
- package/dist/elements/helper/NpmPackageLoader.d.ts +1 -2
- package/dist/elements/{loader → services/manifestParsers}/OldCustomElementsManifestLoader.d.ts +1 -1
- package/dist/elements/{loader → services/manifestParsers}/OldCustomElementsManifestLoader.js +2 -2
- package/dist/index.d.ts +4 -17
- package/dist/index.js +2 -16
- package/package.json +3 -25
- package/.editorconfig +0 -7
- package/.github/FUNDING.yml +0 -4
- package/.vscode/settings.json +0 -3
- package/ACKNOWLEDGMENTS +0 -15
- package/LICENSE +0 -21
- package/RemoveOldRemoteBranches.bat +0 -7
- package/dist/elements/services/demoProviderService/DemoProviderService.d.ts +0 -6
- package/dist/elements/services/demoProviderService/DemoProviderService.js +0 -38
- package/dist/elements/services/demoProviderService/IframeDemoProviderService copy.d.ts +0 -6
- package/dist/elements/services/demoProviderService/IframeDemoProviderService copy.js +0 -38
- package/dist/elements/services/designerAddons/IDesignerAddonJson copy.d.ts +0 -3
- package/dist/elements/services/designerAddons/IDesignerAddonJson copy.js +0 -1
- package/dist/elements/services/designerAddons/IDesignerInfoJson.d.ts +0 -7
- package/dist/elements/services/designerAddons/IDesignerInfoJson.js +0 -19
- package/dist/elements/services/dragDropService/IExternalDragDropService copy.d.ts +0 -5
- package/dist/elements/services/dragDropService/IExternalDragDropService copy.js +0 -1
- package/dist/elements/services/eventsService/IEventsService copy.d.ts +0 -2
- package/dist/elements/services/eventsService/IEventsService copy.js +0 -1
- package/dist/elements/services/htmlParserService/BaseCustomWebcomponentParserService.d.ts +0 -11
- package/dist/elements/services/htmlParserService/BaseCustomWebcomponentParserService.js +0 -90
- package/dist/elements/services/htmlParserService/LitElementParserService.d.ts +0 -12
- package/dist/elements/services/htmlParserService/LitElementParserService.js +0 -91
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.d.ts +0 -11
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +0 -89
- package/dist/elements/services/htmlParserService/VueParserService.d.ts +0 -9
- package/dist/elements/services/htmlParserService/VueParserService.js +0 -10
- package/dist/elements/services/htmlWriterService/HtmlWriterOptions.d.ts +0 -7
- package/dist/elements/services/htmlWriterService/HtmlWriterOptions.js +0 -7
- package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.d.ts +0 -8
- package/dist/elements/services/propertiesService/propertyEditors/GridAssignedRowColumnPropertyEditor.js +0 -45
- package/dist/elements/services/propertiesService/propertyEditors/GridRowColumnPropertyEditor.d.ts +0 -10
- package/dist/elements/services/propertiesService/propertyEditors/GridRowColumnPropertyEditor.js +0 -25
- package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.d.ts +0 -9
- package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.js +0 -21
- package/dist/elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.d.ts +0 -8
- package/dist/elements/services/propertiesService/propertyEditors/MetricsPropertyEditor.js +0 -14
- package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor copy.d.ts +0 -7
- package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor copy.js +0 -28
- package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.d.ts +0 -13
- package/dist/elements/services/propertiesService/services/CommonPropertiesService copy.js +0 -44
- package/dist/elements/services/propertiesService/services/ContentPropertiesService.d.ts +0 -14
- package/dist/elements/services/propertiesService/services/ContentPropertiesService.js +0 -30
- package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.d.ts +0 -34
- package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService copy.js +0 -105
- package/dist/elements/services/propertiesService/services/PolymerPropertiesService copy.d.ts +0 -8
- package/dist/elements/services/propertiesService/services/PolymerPropertiesService copy.js +0 -10
- package/dist/elements/services/propertiesService/services/UnkownElemntPropertiesService.d.ts +0 -24
- package/dist/elements/services/propertiesService/services/UnkownElemntPropertiesService.js +0 -198
- package/dist/elements/services/stylesheetService/CssToolsStylesheetService.d.ts +0 -42
- package/dist/elements/services/stylesheetService/CssToolsStylesheetService.js +0 -114
- package/dist/elements/services/stylesheetService/CssTreeStylesheetService.d.ts +0 -58
- package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js +0 -204
- package/dist/elements/services/stylesheetService/SpecificityCalculator.d.ts +0 -7
- package/dist/elements/services/stylesheetService/SpecificityCalculator.js +0 -178
- package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.d.ts +0 -15
- package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.js +0 -70
- package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts +0 -14
- package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js +0 -137
- package/dist/elements/widgets/codeView/code-view-ace.d.ts +0 -24
- package/dist/elements/widgets/codeView/code-view-ace.js +0 -134
- package/dist/elements/widgets/codeView/code-view-code-mirror.d.ts +0 -25
- package/dist/elements/widgets/codeView/code-view-code-mirror.js +0 -117
- package/dist/elements/widgets/codeView/code-view-monaco.d.ts +0 -37
- package/dist/elements/widgets/codeView/code-view-monaco.js +0 -197
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.d.ts +0 -23
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js +0 -87
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.d.ts +0 -10
- package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.js +0 -15
- package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.d.ts +0 -10
- package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js +0 -21
- package/dist/elements/widgets/paletteView/paletteTreeView.d.ts +0 -12
- package/dist/elements/widgets/paletteView/paletteTreeView.js +0 -141
- package/dist/elements/widgets/treeView/treeViewExtended.d.ts +0 -32
- package/dist/elements/widgets/treeView/treeViewExtended.js +0 -366
- package/fixesimport.js +0 -98
- package/jest.config.cjs +0 -7
- package/polymer.json +0 -42
- package/tsconfig.json +0 -75
- /package/dist/elements/{loader → services/manifestParsers}/IOldCustomElementsManifest.d.ts +0 -0
- /package/dist/elements/{loader → services/manifestParsers}/IOldCustomElementsManifest.js +0 -0
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentLazyAppend, css, html, DomHelper } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
|
|
3
|
-
static style = css ``;
|
|
4
|
-
static template = html `
|
|
5
|
-
<div class="imgdiv">
|
|
6
|
-
</div>`;
|
|
7
|
-
_imgdiv;
|
|
8
|
-
constructor() {
|
|
9
|
-
super();
|
|
10
|
-
this._restoreCachedInititalValues();
|
|
11
|
-
this._imgdiv = this._getDomElement('imgdiv');
|
|
12
|
-
}
|
|
13
|
-
reRender(designerView) {
|
|
14
|
-
//@ts-ignore
|
|
15
|
-
html2canvas(designerView.rootDesignItem.element).then(canvas => {
|
|
16
|
-
DomHelper.removeAllChildnodes(this._imgdiv);
|
|
17
|
-
this._imgdiv.appendChild(canvas);
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
customElements.define('node-projects-html-2-canvas-miniature-view', Html2CanvasMiniatureView);
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
import { ServiceContainer } from '../../services/ServiceContainer.js';
|
|
3
|
-
import { IElementsService } from '../../services/elementsService/IElementsService.js';
|
|
4
|
-
export declare class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
|
|
5
|
-
private _treeDiv;
|
|
6
|
-
private _tree;
|
|
7
|
-
private _filter;
|
|
8
|
-
static readonly style: CSSStyleSheet;
|
|
9
|
-
static readonly template: HTMLTemplateElement;
|
|
10
|
-
constructor();
|
|
11
|
-
loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
|
|
12
|
-
}
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
|
|
3
|
-
export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
|
|
4
|
-
_treeDiv;
|
|
5
|
-
_tree;
|
|
6
|
-
_filter;
|
|
7
|
-
static style = css `
|
|
8
|
-
:host {
|
|
9
|
-
display: block;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
* {
|
|
13
|
-
touch-action: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
span.drag-source {
|
|
17
|
-
border: 1px solid grey;
|
|
18
|
-
border-radius: 3px;
|
|
19
|
-
padding: 2px;
|
|
20
|
-
background-color: silver;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
span.fancytree-node.fancytree-drag-source {
|
|
24
|
-
outline: 1px dotted grey;
|
|
25
|
-
}
|
|
26
|
-
span.fancytree-node.fancytree-drop-accept {
|
|
27
|
-
outline: 1px dotted green;
|
|
28
|
-
}
|
|
29
|
-
span.fancytree-node.fancytree-drop-reject {
|
|
30
|
-
outline: 1px dotted red;
|
|
31
|
-
}
|
|
32
|
-
#tree ul {
|
|
33
|
-
border: none;
|
|
34
|
-
}
|
|
35
|
-
#tree ul:focus {
|
|
36
|
-
outline: none;
|
|
37
|
-
}
|
|
38
|
-
span.fancytree-title {
|
|
39
|
-
align-items: center;
|
|
40
|
-
flex-direction: row;
|
|
41
|
-
display: inline-flex;
|
|
42
|
-
}
|
|
43
|
-
td {
|
|
44
|
-
white-space: nowrap;
|
|
45
|
-
}
|
|
46
|
-
td:nth-child(n+2) {
|
|
47
|
-
text-align: center;
|
|
48
|
-
}
|
|
49
|
-
td > img {
|
|
50
|
-
vertical-align: middle;
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
static template = html `
|
|
54
|
-
<div style="height: 100%;">
|
|
55
|
-
<input id="input" style="width: 100%; height: 25px; box-sizing: border-box;" placeholder="Filter..." autocomplete="off">
|
|
56
|
-
<div style="height: calc(100% - 26px); overflow: auto;">
|
|
57
|
-
<div id="treetable" style="min-width: 100%;"></div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>`;
|
|
60
|
-
constructor() {
|
|
61
|
-
super();
|
|
62
|
-
this._restoreCachedInititalValues();
|
|
63
|
-
//@ts-ignore
|
|
64
|
-
if (window.importShim)
|
|
65
|
-
//@ts-ignore
|
|
66
|
-
importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
|
|
67
|
-
else
|
|
68
|
-
//@ts-ignore
|
|
69
|
-
import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
|
|
70
|
-
this._filter = this._getDomElement('input');
|
|
71
|
-
this._filter.onkeyup = () => {
|
|
72
|
-
let match = this._filter.value;
|
|
73
|
-
this._tree.filterNodes((node) => {
|
|
74
|
-
return new RegExp(match, "i").test(node.title);
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
this._treeDiv = this._getDomElement('treetable');
|
|
78
|
-
$(this._treeDiv).fancytree({
|
|
79
|
-
debugLevel: 0,
|
|
80
|
-
icon: true,
|
|
81
|
-
extensions: ['childcounter', 'dnd5', 'filter'],
|
|
82
|
-
quicksearch: true,
|
|
83
|
-
source: [],
|
|
84
|
-
tooltip: true,
|
|
85
|
-
filter: {
|
|
86
|
-
autoExpand: true,
|
|
87
|
-
mode: 'hide',
|
|
88
|
-
highlight: true
|
|
89
|
-
},
|
|
90
|
-
dnd5: {
|
|
91
|
-
dropMarkerParent: this.shadowRoot,
|
|
92
|
-
preventRecursion: true,
|
|
93
|
-
preventVoidMoves: false,
|
|
94
|
-
dropMarkerOffsetX: -24,
|
|
95
|
-
dropMarkerInsertOffsetX: -16,
|
|
96
|
-
dragStart: (node, data) => {
|
|
97
|
-
data.effectAllowed = "all";
|
|
98
|
-
data.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(node.data.ref));
|
|
99
|
-
data.dropEffect = "copy";
|
|
100
|
-
return true;
|
|
101
|
-
},
|
|
102
|
-
dragEnter: (node, data) => {
|
|
103
|
-
return false;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
//@ts-ignore
|
|
108
|
-
this._tree = $.ui.fancytree.getTree(this._treeDiv);
|
|
109
|
-
this._treeDiv.children[0].classList.add('fancytree-connectors');
|
|
110
|
-
}
|
|
111
|
-
async loadControls(serviceContainer, elementsServices) {
|
|
112
|
-
let rootNode = this._tree.getRootNode();
|
|
113
|
-
rootNode.removeChildren();
|
|
114
|
-
for (const s of elementsServices) {
|
|
115
|
-
const newNode = rootNode.addChildren({
|
|
116
|
-
title: s.name,
|
|
117
|
-
folder: true
|
|
118
|
-
});
|
|
119
|
-
try {
|
|
120
|
-
let elements = await s.getElements();
|
|
121
|
-
for (let e of elements) {
|
|
122
|
-
newNode.addChildren({
|
|
123
|
-
title: e.name ?? e.tag,
|
|
124
|
-
folder: false,
|
|
125
|
-
//@ts-ignore
|
|
126
|
-
ref: e
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
catch (err) {
|
|
131
|
-
console.warn('Error loading elements', err);
|
|
132
|
-
}
|
|
133
|
-
try {
|
|
134
|
-
//@ts-ignore
|
|
135
|
-
newNode.updateCounters();
|
|
136
|
-
}
|
|
137
|
-
catch { }
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
customElements.define('node-projects-palette-tree-view', PaletteTreeView);
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
import { ITreeView } from './ITreeView.js';
|
|
3
|
-
import { IDesignItem } from '../../item/IDesignItem.js';
|
|
4
|
-
import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js';
|
|
5
|
-
import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
|
|
6
|
-
import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
|
|
7
|
-
export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
|
|
8
|
-
private _treeDiv;
|
|
9
|
-
private _tree;
|
|
10
|
-
private _filter;
|
|
11
|
-
private _instanceServiceContainer;
|
|
12
|
-
private _selectionChangedHandler;
|
|
13
|
-
private _contentChangedHandler;
|
|
14
|
-
static readonly style: CSSStyleSheet;
|
|
15
|
-
static readonly template: HTMLTemplateElement;
|
|
16
|
-
constructor();
|
|
17
|
-
_filterNodes(): void;
|
|
18
|
-
_showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
|
|
19
|
-
_switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
|
|
20
|
-
_showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
|
|
21
|
-
_switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
|
|
22
|
-
_showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
|
|
23
|
-
_switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
|
|
24
|
-
showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
|
|
25
|
-
ready(): Promise<void>;
|
|
26
|
-
createTree(rootItem: IDesignItem): void;
|
|
27
|
-
set instanceServiceContainer(value: InstanceServiceContainer);
|
|
28
|
-
selectionChanged(event: ISelectionChangedEvent): void;
|
|
29
|
-
private _recomputeTree;
|
|
30
|
-
private _getChildren;
|
|
31
|
-
private _highlight;
|
|
32
|
-
}
|
|
@@ -1,366 +0,0 @@
|
|
|
1
|
-
import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
import { NodeType } from '../../item/NodeType.js';
|
|
3
|
-
import { assetsPath } from '../../../Constants.js';
|
|
4
|
-
import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
|
|
5
|
-
import { switchContainer } from '../../helper/SwitchContainerHelper.js';
|
|
6
|
-
import { DomConverter } from '../designerView/DomConverter.js';
|
|
7
|
-
export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
|
|
8
|
-
_treeDiv;
|
|
9
|
-
_tree;
|
|
10
|
-
_filter;
|
|
11
|
-
_instanceServiceContainer;
|
|
12
|
-
_selectionChangedHandler;
|
|
13
|
-
_contentChangedHandler;
|
|
14
|
-
static style = css `
|
|
15
|
-
* {
|
|
16
|
-
touch-action: none;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
span.drag-source {
|
|
20
|
-
border: 1px solid grey;
|
|
21
|
-
border-radius: 3px;
|
|
22
|
-
padding: 2px;
|
|
23
|
-
background-color: silver;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
span.fancytree-node.fancytree-drag-source {
|
|
27
|
-
outline: 1px dotted grey;
|
|
28
|
-
}
|
|
29
|
-
span.fancytree-node.fancytree-drop-accept {
|
|
30
|
-
outline: 1px dotted green;
|
|
31
|
-
}
|
|
32
|
-
span.fancytree-node.fancytree-drop-reject {
|
|
33
|
-
outline: 1px dotted red;
|
|
34
|
-
}
|
|
35
|
-
#tree ul {
|
|
36
|
-
border: none;
|
|
37
|
-
}
|
|
38
|
-
#tree ul:focus {
|
|
39
|
-
outline: none;
|
|
40
|
-
}
|
|
41
|
-
span.fancytree-title {
|
|
42
|
-
align-items: center;
|
|
43
|
-
flex-direction: row;
|
|
44
|
-
display: inline-flex;
|
|
45
|
-
}
|
|
46
|
-
td {
|
|
47
|
-
white-space: nowrap;
|
|
48
|
-
display: flex;
|
|
49
|
-
}
|
|
50
|
-
td > img {
|
|
51
|
-
vertical-align: middle;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.cmd {
|
|
55
|
-
display: flex;
|
|
56
|
-
position: sticky;
|
|
57
|
-
right: 0;
|
|
58
|
-
padding-right: 2px;
|
|
59
|
-
align-items: center;
|
|
60
|
-
gap: 2px;
|
|
61
|
-
background: #ffffffc9;
|
|
62
|
-
width: 42px;
|
|
63
|
-
justify-content: flex-end;
|
|
64
|
-
background: white;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.cmd > img {
|
|
68
|
-
width: 10px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
table.fancytree-ext-table tbody tr.fancytree-selected {
|
|
72
|
-
background-color: #bebebe;
|
|
73
|
-
}
|
|
74
|
-
`;
|
|
75
|
-
static template = html `
|
|
76
|
-
<div style="height: 100%;">
|
|
77
|
-
<input id="input" style="width: 100%; box-sizing: border-box; height:27px;" placeholder="Filter..." autocomplete="off">
|
|
78
|
-
<div style="height: calc(100% - 23px); overflow: auto;">
|
|
79
|
-
<table id="treetable" style="min-width: 100%;">
|
|
80
|
-
<colgroup>
|
|
81
|
-
<col width="*">
|
|
82
|
-
<!--<col width="25px">
|
|
83
|
-
<col width="25px">
|
|
84
|
-
<col width="25px">-->
|
|
85
|
-
</colgroup>
|
|
86
|
-
<thead style="display: none;">
|
|
87
|
-
<tr>
|
|
88
|
-
<th></th>
|
|
89
|
-
<!--<th></th>
|
|
90
|
-
<th></th>
|
|
91
|
-
<th></th>-->
|
|
92
|
-
</tr>
|
|
93
|
-
</thead>
|
|
94
|
-
</table>
|
|
95
|
-
</div>
|
|
96
|
-
</div>`;
|
|
97
|
-
constructor() {
|
|
98
|
-
super();
|
|
99
|
-
this._restoreCachedInititalValues();
|
|
100
|
-
//@ts-ignore
|
|
101
|
-
if (window.importShim)
|
|
102
|
-
//@ts-ignore
|
|
103
|
-
importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
|
|
104
|
-
else
|
|
105
|
-
//@ts-ignore
|
|
106
|
-
import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
|
|
107
|
-
this._filter = this._getDomElement('input');
|
|
108
|
-
this._filter.onkeyup = () => {
|
|
109
|
-
this._filterNodes();
|
|
110
|
-
};
|
|
111
|
-
this._treeDiv = this._getDomElement('treetable');
|
|
112
|
-
}
|
|
113
|
-
_filterNodes() {
|
|
114
|
-
let match = this._filter.value;
|
|
115
|
-
if (match) {
|
|
116
|
-
this._tree.filterNodes((node) => {
|
|
117
|
-
return new RegExp(match, "i").test(node.title);
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
this._tree.clearFilter();
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
_showHideAtDesignTimeState(img, designItem) {
|
|
125
|
-
if (designItem.hideAtDesignTime)
|
|
126
|
-
img.src = assetsPath + "images/treeview/eyeclose.png";
|
|
127
|
-
else
|
|
128
|
-
img.src = assetsPath + "images/treeview/eyeopen.png";
|
|
129
|
-
}
|
|
130
|
-
_switchHideAtDesignTimeState(img, designItem) {
|
|
131
|
-
designItem.hideAtDesignTime = !designItem.hideAtDesignTime;
|
|
132
|
-
this._showHideAtDesignTimeState(img, designItem);
|
|
133
|
-
}
|
|
134
|
-
_showLockAtDesignTimeState(img, designItem) {
|
|
135
|
-
if (designItem.lockAtDesignTime)
|
|
136
|
-
img.src = assetsPath + "images/treeview/lock.png";
|
|
137
|
-
else
|
|
138
|
-
img.src = assetsPath + "images/treeview/dot.png";
|
|
139
|
-
}
|
|
140
|
-
_switchLockAtDesignTimeState(img, designItem) {
|
|
141
|
-
designItem.lockAtDesignTime = !designItem.lockAtDesignTime;
|
|
142
|
-
this._showLockAtDesignTimeState(img, designItem);
|
|
143
|
-
}
|
|
144
|
-
_showHideAtRunTimeState(img, designItem) {
|
|
145
|
-
if (designItem.hideAtRunTime)
|
|
146
|
-
img.src = assetsPath + "images/treeview/eyeclose.png";
|
|
147
|
-
else
|
|
148
|
-
img.src = assetsPath + "images/treeview/eyeopen.png";
|
|
149
|
-
}
|
|
150
|
-
_switchHideAtRunTimeState(img, designItem) {
|
|
151
|
-
designItem.hideAtRunTime = !designItem.hideAtRunTime;
|
|
152
|
-
this._showHideAtRunTimeState(img, designItem);
|
|
153
|
-
}
|
|
154
|
-
showDesignItemContextMenu(designItem, event) {
|
|
155
|
-
event.preventDefault();
|
|
156
|
-
const mnuItems = [];
|
|
157
|
-
for (let cme of designItem.serviceContainer.designerContextMenuExtensions) {
|
|
158
|
-
if (cme.shouldProvideContextmenu(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView')) {
|
|
159
|
-
mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem));
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
let ctxMnu = ContextMenu.show(mnuItems, event);
|
|
163
|
-
return ctxMnu;
|
|
164
|
-
}
|
|
165
|
-
async ready() {
|
|
166
|
-
//this._treeDiv.classList.add('fancytree-connectors');
|
|
167
|
-
$(this._treeDiv).fancytree({
|
|
168
|
-
debugLevel: 0,
|
|
169
|
-
icon: true,
|
|
170
|
-
extensions: ['childcounter', 'dnd5', 'multi', 'filter', 'table'],
|
|
171
|
-
quicksearch: true,
|
|
172
|
-
source: [],
|
|
173
|
-
table: {
|
|
174
|
-
indentation: 10,
|
|
175
|
-
nodeColumnIdx: 0,
|
|
176
|
-
checkboxColumnIdx: 0, // render the checkboxes into the 1st column
|
|
177
|
-
},
|
|
178
|
-
click: (event, data) => {
|
|
179
|
-
if (event.originalEvent) { // only for clicked items, not when elements selected via code.
|
|
180
|
-
let node = data.node;
|
|
181
|
-
let designItem = node.data.ref;
|
|
182
|
-
if (designItem) {
|
|
183
|
-
if (event.ctrlKey) {
|
|
184
|
-
const sel = [...designItem.instanceServiceContainer.selectionService.selectedElements];
|
|
185
|
-
const idx = sel.indexOf(designItem);
|
|
186
|
-
if (idx >= 0) {
|
|
187
|
-
sel.splice(idx, 1);
|
|
188
|
-
designItem.instanceServiceContainer.selectionService.setSelectedElements(sel);
|
|
189
|
-
}
|
|
190
|
-
else {
|
|
191
|
-
designItem.instanceServiceContainer.selectionService.setSelectedElements([...sel, designItem]);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
else {
|
|
195
|
-
designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
const disableExpand = event.originalEvent.ctrlKey || event.originalEvent.shiftKey;
|
|
200
|
-
return !disableExpand;
|
|
201
|
-
},
|
|
202
|
-
createNode: (event, data) => {
|
|
203
|
-
let node = data.node;
|
|
204
|
-
if (node.tr.children[0]) {
|
|
205
|
-
let designItem = node.data.ref;
|
|
206
|
-
node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
|
|
207
|
-
if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
|
|
208
|
-
node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element, e);
|
|
209
|
-
node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null, e);
|
|
210
|
-
let d = document.createElement("div");
|
|
211
|
-
d.className = "cmd";
|
|
212
|
-
let imgL = document.createElement('img');
|
|
213
|
-
this._showLockAtDesignTimeState(imgL, designItem);
|
|
214
|
-
imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
|
|
215
|
-
imgL.title = 'lock';
|
|
216
|
-
d.appendChild(imgL);
|
|
217
|
-
let img = document.createElement('img');
|
|
218
|
-
this._showHideAtDesignTimeState(img, designItem);
|
|
219
|
-
img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
|
|
220
|
-
img.title = 'hide in designer';
|
|
221
|
-
d.appendChild(img);
|
|
222
|
-
let imgH = document.createElement('img');
|
|
223
|
-
this._showHideAtRunTimeState(imgH, designItem);
|
|
224
|
-
imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);
|
|
225
|
-
imgH.title = 'hide at runtime';
|
|
226
|
-
d.appendChild(imgH);
|
|
227
|
-
node.tr.children[0].appendChild(d);
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
},
|
|
231
|
-
dnd5: {
|
|
232
|
-
dropMarkerParent: this.shadowRoot,
|
|
233
|
-
preventRecursion: true,
|
|
234
|
-
preventVoidMoves: false,
|
|
235
|
-
dropMarkerOffsetX: -24,
|
|
236
|
-
dropMarkerInsertOffsetX: -16,
|
|
237
|
-
multiSource: true,
|
|
238
|
-
dragStart: (node, data) => {
|
|
239
|
-
data.effectAllowed = "all";
|
|
240
|
-
data.dropEffect = "move";
|
|
241
|
-
return true;
|
|
242
|
-
},
|
|
243
|
-
dragEnter: (node, data) => {
|
|
244
|
-
data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
|
|
245
|
-
return true;
|
|
246
|
-
},
|
|
247
|
-
dragOver: (node, data) => {
|
|
248
|
-
data.dropEffect = data.originalEvent.ctrlKey ? 'copy' : 'move';
|
|
249
|
-
return true;
|
|
250
|
-
},
|
|
251
|
-
dragDrop: async (node, data) => {
|
|
252
|
-
let sourceDesignitems = data.otherNodeList.map(x => x.data.ref);
|
|
253
|
-
if (data.dropEffectSuggested == 'copy') {
|
|
254
|
-
let newSourceDesignitems = [];
|
|
255
|
-
for (let d of sourceDesignitems)
|
|
256
|
-
newSourceDesignitems.push(await d.clone());
|
|
257
|
-
sourceDesignitems = newSourceDesignitems;
|
|
258
|
-
}
|
|
259
|
-
const targetDesignitem = node.data.ref;
|
|
260
|
-
let grp = targetDesignitem.openGroup("drag/drop in treeview");
|
|
261
|
-
if (data.hitMode == 'over') {
|
|
262
|
-
switchContainer(sourceDesignitems, targetDesignitem);
|
|
263
|
-
}
|
|
264
|
-
else if (data.hitMode == 'after' || data.hitMode == 'before') {
|
|
265
|
-
for (let d of sourceDesignitems) {
|
|
266
|
-
if (d.parent != targetDesignitem.parent) {
|
|
267
|
-
switchContainer([d], targetDesignitem.parent);
|
|
268
|
-
}
|
|
269
|
-
if (data.hitMode == 'before')
|
|
270
|
-
targetDesignitem.insertAdjacentElement(d, 'beforebegin');
|
|
271
|
-
else
|
|
272
|
-
targetDesignitem.insertAdjacentElement(d, 'afterend');
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
grp.commit();
|
|
276
|
-
},
|
|
277
|
-
},
|
|
278
|
-
multi: {
|
|
279
|
-
mode: ""
|
|
280
|
-
},
|
|
281
|
-
filter: {
|
|
282
|
-
autoApply: true,
|
|
283
|
-
autoExpand: true,
|
|
284
|
-
counter: true,
|
|
285
|
-
fuzzy: true,
|
|
286
|
-
hideExpandedCounter: true,
|
|
287
|
-
hideExpanders: false,
|
|
288
|
-
highlight: true,
|
|
289
|
-
leavesOnly: false,
|
|
290
|
-
nodata: true,
|
|
291
|
-
mode: "hide" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
|
|
292
|
-
},
|
|
293
|
-
childcounter: {
|
|
294
|
-
deep: true,
|
|
295
|
-
hideZeros: true,
|
|
296
|
-
hideExpanded: true
|
|
297
|
-
},
|
|
298
|
-
loadChildren: (event, data) => {
|
|
299
|
-
// update node and parent counters after lazy loading
|
|
300
|
-
//@ts-ignore
|
|
301
|
-
data.node.updateCounters();
|
|
302
|
-
}
|
|
303
|
-
});
|
|
304
|
-
//@ts-ignore
|
|
305
|
-
this._tree = $.ui.fancytree.getTree(this._treeDiv);
|
|
306
|
-
this._treeDiv.children[0].classList.add('fancytree-connectors');
|
|
307
|
-
}
|
|
308
|
-
createTree(rootItem) {
|
|
309
|
-
if (this._tree) {
|
|
310
|
-
this._recomputeTree(rootItem);
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
set instanceServiceContainer(value) {
|
|
314
|
-
this._instanceServiceContainer = value;
|
|
315
|
-
this._selectionChangedHandler?.dispose();
|
|
316
|
-
this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
|
|
317
|
-
this.selectionChanged(e);
|
|
318
|
-
});
|
|
319
|
-
this._contentChangedHandler?.dispose();
|
|
320
|
-
this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
|
|
321
|
-
this.createTree(value.contentService.rootDesignItem);
|
|
322
|
-
});
|
|
323
|
-
this.createTree(value.contentService.rootDesignItem);
|
|
324
|
-
}
|
|
325
|
-
selectionChanged(event) {
|
|
326
|
-
this._highlight(event.selectedElements);
|
|
327
|
-
}
|
|
328
|
-
_recomputeTree(rootItem) {
|
|
329
|
-
this._tree.getRootNode().removeChildren();
|
|
330
|
-
this._getChildren(rootItem, null);
|
|
331
|
-
this._tree.expandAll();
|
|
332
|
-
//@ts-ignore
|
|
333
|
-
this._tree.getRootNode().updateCounters();
|
|
334
|
-
this._filterNodes();
|
|
335
|
-
}
|
|
336
|
-
_getChildren(item, currentNode) {
|
|
337
|
-
if (currentNode == null) {
|
|
338
|
-
currentNode = this._tree.getRootNode();
|
|
339
|
-
}
|
|
340
|
-
const newNode = currentNode.addChildren({
|
|
341
|
-
title: item.isRootItem ? '-root-' : item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '<small><small><small>#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + ' </small></small></small> ' + DomConverter.normalizeContentValue(item.content),
|
|
342
|
-
folder: item.children.length > 0 ? true : false,
|
|
343
|
-
//@ts-ignore
|
|
344
|
-
ref: item
|
|
345
|
-
});
|
|
346
|
-
for (let i of item.children()) {
|
|
347
|
-
if (!i.isEmptyTextNode) {
|
|
348
|
-
this._getChildren(i, newNode);
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
_highlight(activeElements) {
|
|
353
|
-
this._tree.visit((node) => {
|
|
354
|
-
if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
|
|
355
|
-
node.setSelected(true);
|
|
356
|
-
node.setActive(true);
|
|
357
|
-
node.makeVisible({ scrollIntoView: true });
|
|
358
|
-
}
|
|
359
|
-
else {
|
|
360
|
-
node.setSelected(false);
|
|
361
|
-
node.setActive(false);
|
|
362
|
-
}
|
|
363
|
-
});
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
customElements.define('node-projects-tree-view-extended', TreeViewExtended);
|
package/fixesimport.js
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import * as fs from 'fs';
|
|
2
|
-
import * as path from 'path';
|
|
3
|
-
|
|
4
|
-
// https://gist.github.com/lovasoa/8691344
|
|
5
|
-
async function* walk(dir) {
|
|
6
|
-
for await (const d of await fs.promises.opendir(dir)) {
|
|
7
|
-
const entry = path.join(dir, d.name);
|
|
8
|
-
if (d.isDirectory()) {
|
|
9
|
-
yield* walk(entry);
|
|
10
|
-
} else if (d.isFile()) {
|
|
11
|
-
yield entry;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function resolveImportPath(sourceFile, importPath, options) {
|
|
17
|
-
const sourceFileAbs = path.resolve(process.cwd(), sourceFile);
|
|
18
|
-
const root = path.dirname(sourceFileAbs);
|
|
19
|
-
const {moduleFilter = defaultModuleFilter} = options;
|
|
20
|
-
|
|
21
|
-
if (moduleFilter(importPath)) {
|
|
22
|
-
const importPathAbs = path.resolve(root, importPath);
|
|
23
|
-
let possiblePath = [
|
|
24
|
-
path.resolve(importPathAbs, './index.ts'),
|
|
25
|
-
path.resolve(importPathAbs, './index.js'),
|
|
26
|
-
importPathAbs + '.ts',
|
|
27
|
-
importPathAbs + '.js',
|
|
28
|
-
];
|
|
29
|
-
|
|
30
|
-
if (possiblePath.length) {
|
|
31
|
-
for (let i = 0; i < possiblePath.length; i++) {
|
|
32
|
-
let entry = possiblePath[i];
|
|
33
|
-
if (fs.existsSync(entry)) {
|
|
34
|
-
const resolved = path.relative(root, entry.replace(/\.ts$/, '.js'));
|
|
35
|
-
|
|
36
|
-
if (!resolved.startsWith('.')) {
|
|
37
|
-
return './' + resolved;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
return resolved;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
return null;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function replace(filePath, outFilePath, options) {
|
|
50
|
-
const code = fs.readFileSync(filePath).toString();
|
|
51
|
-
const newCode = code.replace(
|
|
52
|
-
/(import|export) (.+?) from ('[^\n']+'|"[^\n"]+");/gs,
|
|
53
|
-
function (found, action, imported, from) {
|
|
54
|
-
const importPath = from.slice(1, -1);
|
|
55
|
-
const resolvedPath = resolveImportPath(filePath, importPath, options);
|
|
56
|
-
|
|
57
|
-
if (resolvedPath) {
|
|
58
|
-
console.log('\t', importPath, resolvedPath);
|
|
59
|
-
return `${action} ${imported} from '${resolvedPath.replaceAll('\\','/')}';`;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return found;
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
if (code !== newCode) {
|
|
66
|
-
fs.writeFileSync(outFilePath, newCode);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// Then, use it with a simple async for loop
|
|
71
|
-
async function run(srcDir, options = defaultOptions) {
|
|
72
|
-
const {
|
|
73
|
-
sourceFileFilter = defaultSourceFileFilter,
|
|
74
|
-
} = options;
|
|
75
|
-
|
|
76
|
-
for await (const entry of walk(srcDir)) {
|
|
77
|
-
if (sourceFileFilter(entry)) {
|
|
78
|
-
console.log(entry);
|
|
79
|
-
replace(entry, entry, options);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const defaultSourceFileFilter = function (sourceFilePath) {
|
|
85
|
-
return /\.(js|ts)$/.test(sourceFilePath) && !/node_modules/.test(sourceFilePath);
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
const defaultModuleFilter = function (importedModule) {
|
|
89
|
-
return !path.isAbsolute(importedModule) && !importedModule.startsWith('@') && !importedModule.endsWith('.js');
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const defaultOptions = {
|
|
93
|
-
sourceFileFilter: defaultSourceFileFilter,
|
|
94
|
-
moduleFilter : defaultModuleFilter,
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
await run('./src', defaultOptions);
|