@node-projects/web-component-designer 0.0.73 → 0.0.77
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 +2 -2
- package/dist/elements/documentContainer.d.ts +3 -0
- package/dist/elements/documentContainer.js +11 -1
- package/dist/elements/helper/ElementHelper.d.ts +1 -0
- package/dist/elements/helper/ElementHelper.js +3 -0
- package/dist/elements/helper/IndentedTextWriter.d.ts +1 -0
- package/dist/elements/helper/IndentedTextWriter.js +3 -0
- package/dist/elements/services/BaseServiceContainer.d.ts +1 -0
- package/dist/elements/services/BaseServiceContainer.js +7 -0
- package/dist/elements/services/demoProviderService/DemoProviderService.js +1 -1
- package/dist/elements/services/elementsService/IElementDefinition.d.ts +2 -0
- package/dist/elements/services/elementsService/IElementsJson.d.ts +1 -0
- package/dist/elements/services/htmlWriterService/HtmlWriterService copy.d.ts +12 -0
- package/dist/elements/services/htmlWriterService/HtmlWriterService copy.js +103 -0
- package/dist/elements/services/htmlWriterService/HtmlWriterService.js +27 -10
- package/dist/elements/services/htmlWriterService/LitElementWriterService.d.ts +12 -0
- package/dist/elements/services/htmlWriterService/LitElementWriterService.js +107 -0
- package/dist/elements/services/instanceService/DefaultInstanceService.js +1 -1
- package/dist/elements/services/manifestLoaders/WebcomponentManifestParserService.d.ts +26 -0
- package/dist/elements/services/manifestLoaders/WebcomponentManifestParserService.js +69 -0
- package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts +23 -0
- package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js +80 -0
- package/dist/elements/services/placementService/SnaplinesProviderService.d.ts +2 -0
- package/dist/elements/services/placementService/SnaplinesProviderService.js +10 -0
- package/dist/elements/services/propertiesService/DefaultEditorTypesService.js +0 -1
- package/dist/elements/services/propertiesService/IPropertiesService.d.ts +0 -1
- package/dist/elements/services/propertiesService/IProperty.d.ts +5 -1
- package/dist/elements/services/propertiesService/PropertyType.d.ts +6 -0
- package/dist/elements/services/propertiesService/PropertyType.js +7 -0
- package/dist/elements/services/propertiesService/services/AbstractBasePropertiesService.js +7 -6
- package/dist/elements/services/propertiesService/services/AttributesPropertiesService.js +3 -2
- package/dist/elements/services/propertiesService/services/CommonPropertiesService.js +11 -4
- package/dist/elements/services/propertiesService/services/CssPropertiesService.js +81 -41
- package/dist/elements/services/propertiesService/services/IJsonPropertyDefinition.d.ts +4 -0
- package/dist/elements/services/propertiesService/services/ListPropertiesService.js +5 -1
- package/dist/elements/services/propertiesService/services/Lit2PropertiesService.js +7 -6
- package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js +25 -12
- package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.d.ts +1 -2
- package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js +1 -1
- package/dist/elements/services/webcomponentManifestParserService/WebcomponentManifestParserService.1.d.ts +0 -0
- package/dist/elements/services/webcomponentManifestParserService/WebcomponentManifestParserService.1.js +1 -0
- package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.d.ts +26 -0
- package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.js +69 -0
- package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js +2 -3
- package/dist/elements/widgets/codeView/code-view-code-mirror.js +6 -7
- package/dist/elements/widgets/codeView/code-view-monaco.js +3 -1
- package/dist/elements/widgets/designerView/designerCanvas.js +6 -0
- package/dist/elements/widgets/paletteView/paletteTreeView.js +15 -11
- package/dist/elements/widgets/paletteView/paletteView.js +10 -5
- package/dist/elements/widgets/treeView/treeViewExtended.js +2 -8
- package/dist/index.d.ts +4 -0
- package/dist/index.js +3 -0
- package/dist/interfaces/ICommandHandler.d.ts +5 -0
- package/dist/interfaces/ICommandHandler.js +1 -0
- package/package.json +2 -1
- package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.d.ts +0 -16
- package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction copy.js +0 -32
- package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.d.ts +0 -16
- package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js +0 -31
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# web-component-designer
|
|
2
2
|
|
|
3
|
-
## Caution - this is a preview Version, a RC is planed for
|
|
3
|
+
## Caution - this is a preview Version, a RC is planed for January 2022
|
|
4
4
|
|
|
5
5
|
A HTML WebComponent for Designing Webcomponents and HTML Pages.
|
|
6
6
|
|
|
@@ -81,4 +81,4 @@ Your addition to your index.html should look like this:
|
|
|
81
81
|
The Library uses Images from the Chrome Dev Tools, see
|
|
82
82
|
https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src
|
|
83
83
|
and
|
|
84
|
-
https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE
|
|
84
|
+
https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE
|
|
@@ -13,6 +13,9 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
|
|
|
13
13
|
codeView: ICodeView & HTMLElement;
|
|
14
14
|
demoView: IDemoView & HTMLElement;
|
|
15
15
|
additionalData: any;
|
|
16
|
+
private _additionalStyle;
|
|
17
|
+
set additionalStyleString(style: string);
|
|
18
|
+
get additionalStyleString(): string;
|
|
16
19
|
private _serviceContainer;
|
|
17
20
|
private _content;
|
|
18
21
|
private _tabControl;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
|
|
1
|
+
import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce } from "@node-projects/base-custom-webcomponent";
|
|
2
2
|
import { DesignerTabControl } from "./controls/DesignerTabControl";
|
|
3
3
|
import { DesignerView } from "./widgets/designerView/designerView";
|
|
4
4
|
import { SimpleSplitView } from './controls/SimpleSplitView';
|
|
@@ -7,6 +7,16 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
|
7
7
|
codeView;
|
|
8
8
|
demoView;
|
|
9
9
|
additionalData;
|
|
10
|
+
_additionalStyle;
|
|
11
|
+
set additionalStyleString(style) {
|
|
12
|
+
this._additionalStyle = style;
|
|
13
|
+
this.designerView.additionalStyle = cssFromString(style);
|
|
14
|
+
}
|
|
15
|
+
;
|
|
16
|
+
get additionalStyleString() {
|
|
17
|
+
return this._additionalStyle;
|
|
18
|
+
}
|
|
19
|
+
;
|
|
10
20
|
_serviceContainer;
|
|
11
21
|
_content = '';
|
|
12
22
|
_tabControl;
|
|
@@ -7,3 +7,6 @@ export function newElementFromString(text) {
|
|
|
7
7
|
export function isInline(element) {
|
|
8
8
|
return element != null && window.getComputedStyle(element).display.startsWith('inline');
|
|
9
9
|
}
|
|
10
|
+
export function isEmptyTextNode(node) {
|
|
11
|
+
return node.textContent.trim() == '' && node.textContent.indexOf('\xa0' /* */) < 0;
|
|
12
|
+
}
|
|
@@ -4,6 +4,7 @@ export declare class BaseServiceContainer<NameMap> {
|
|
|
4
4
|
getLastService<K extends keyof NameMap>(service: K): NameMap[K];
|
|
5
5
|
getServices<K extends keyof NameMap>(service: K): NameMap[K][];
|
|
6
6
|
register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
|
|
7
|
+
registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
|
|
7
8
|
forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
|
|
8
9
|
getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];
|
|
9
10
|
}
|
|
@@ -14,6 +14,13 @@ export class BaseServiceContainer {
|
|
|
14
14
|
this._services.set(name, []);
|
|
15
15
|
this._services.get(name).push(service);
|
|
16
16
|
}
|
|
17
|
+
registerMultiple(names, service) {
|
|
18
|
+
for (const name of names) {
|
|
19
|
+
if (!this._services.has(name))
|
|
20
|
+
this._services.set(name, []);
|
|
21
|
+
this._services.get(name).push(service);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
17
24
|
forSomeServicesTillResult(service, callback) {
|
|
18
25
|
let services = this.getServices(service);
|
|
19
26
|
if (services == null) {
|
|
@@ -21,7 +21,7 @@ export class DemoProviderService {
|
|
|
21
21
|
}
|
|
22
22
|
doc.write("document.body.style.display='';");
|
|
23
23
|
doc.write('</script>');
|
|
24
|
-
doc.write('<body style="display:none">' + code + '</body>');
|
|
24
|
+
doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
|
|
25
25
|
doc.close();
|
|
26
26
|
});
|
|
27
27
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { IBinding } from "../../item/IBinding";
|
|
1
2
|
export interface IElementDefinition {
|
|
2
3
|
tag: string;
|
|
3
4
|
name?: string;
|
|
@@ -28,4 +29,5 @@ export interface IElementDefinition {
|
|
|
28
29
|
* If none, the DrawElementTool is used
|
|
29
30
|
*/
|
|
30
31
|
tool?: string;
|
|
32
|
+
defaultBinding?: IBinding;
|
|
31
33
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { IDesignItem } from '../../item/IDesignItem';
|
|
2
|
+
import { IHtmlWriterService } from './IHtmlWriterService';
|
|
3
|
+
import { IHtmlWriterOptions } from './IHtmlWriterOptions';
|
|
4
|
+
import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
|
|
5
|
+
import { IStringPosition } from './IStringPosition';
|
|
6
|
+
export declare class HtmlWriterService implements IHtmlWriterService {
|
|
7
|
+
canWrite(designItem: IDesignItem): boolean;
|
|
8
|
+
private _conditionalyWriteIndent;
|
|
9
|
+
private _conditionalyWriteNewline;
|
|
10
|
+
write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
|
|
11
|
+
private writeTextNode;
|
|
12
|
+
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { DomConverter } from '../../widgets/designerView/DomConverter';
|
|
2
|
+
import { CssCombiner } from '../../helper/CssCombiner';
|
|
3
|
+
import { NodeType } from '../../item/NodeType';
|
|
4
|
+
import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
|
|
5
|
+
import { isInline } from '../../helper/ElementHelper.js';
|
|
6
|
+
export class HtmlWriterService {
|
|
7
|
+
canWrite(designItem) {
|
|
8
|
+
return true;
|
|
9
|
+
}
|
|
10
|
+
_conditionalyWriteIndent(indentedTextWriter, designItem) {
|
|
11
|
+
if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
|
|
12
|
+
(designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)))
|
|
13
|
+
indentedTextWriter.writeIndent();
|
|
14
|
+
}
|
|
15
|
+
_conditionalyWriteNewline(indentedTextWriter, designItem) {
|
|
16
|
+
if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
|
|
17
|
+
(designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
|
|
18
|
+
indentedTextWriter.writeNewline();
|
|
19
|
+
}
|
|
20
|
+
write(indentedTextWriter, designItem, options, designItemsAssignmentList) {
|
|
21
|
+
let start = indentedTextWriter.position;
|
|
22
|
+
if (designItem.nodeType == NodeType.TextNode) {
|
|
23
|
+
this.writeTextNode(indentedTextWriter, designItem, true);
|
|
24
|
+
}
|
|
25
|
+
else if (designItem.nodeType == NodeType.Comment) {
|
|
26
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
27
|
+
indentedTextWriter.write('<!--' + designItem.content + '-->');
|
|
28
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
32
|
+
indentedTextWriter.write('<' + designItem.name);
|
|
33
|
+
if (designItem.hasAttributes) {
|
|
34
|
+
for (const a of designItem.attributes) {
|
|
35
|
+
indentedTextWriter.write(' ');
|
|
36
|
+
if (typeof a[1] === 'string') {
|
|
37
|
+
if (a[1] === "")
|
|
38
|
+
indentedTextWriter.write(a[0]);
|
|
39
|
+
else
|
|
40
|
+
indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
|
|
41
|
+
}
|
|
42
|
+
else if (!a[1])
|
|
43
|
+
indentedTextWriter.write(a[0]);
|
|
44
|
+
else {
|
|
45
|
+
//TODO: writing of bindings
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (designItem.hasStyles) {
|
|
50
|
+
indentedTextWriter.write(' style="');
|
|
51
|
+
let styles = designItem.styles;
|
|
52
|
+
if (options.compressCssToShorthandProperties)
|
|
53
|
+
styles = CssCombiner.combine(styles);
|
|
54
|
+
for (const s of styles) {
|
|
55
|
+
if (s[0]) {
|
|
56
|
+
indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
indentedTextWriter.write('"');
|
|
60
|
+
}
|
|
61
|
+
indentedTextWriter.write('>');
|
|
62
|
+
if (designItem.hasChildren) {
|
|
63
|
+
const children = designItem.children();
|
|
64
|
+
const singleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
|
|
65
|
+
if (singleTextNode) {
|
|
66
|
+
this.writeTextNode(indentedTextWriter, designItem, false);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
indentedTextWriter.writeNewline();
|
|
70
|
+
indentedTextWriter.levelRaise();
|
|
71
|
+
for (const c of children) {
|
|
72
|
+
c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
|
|
73
|
+
if (s.canWrite(c)) {
|
|
74
|
+
s.write(indentedTextWriter, c, options, designItemsAssignmentList);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
indentedTextWriter.levelShrink();
|
|
79
|
+
indentedTextWriter.writeIndent();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
else if (designItem.hasContent) {
|
|
83
|
+
indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
|
|
84
|
+
}
|
|
85
|
+
if (!DomConverter.IsSelfClosingElement(designItem.name))
|
|
86
|
+
indentedTextWriter.write('</' + designItem.name + '>');
|
|
87
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
88
|
+
}
|
|
89
|
+
if (designItemsAssignmentList) {
|
|
90
|
+
designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
|
|
94
|
+
let content = DomConverter.normalizeContentValue(designItem.content).trim();
|
|
95
|
+
if (content) {
|
|
96
|
+
if (indentAndNewline)
|
|
97
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
98
|
+
indentedTextWriter.write(content);
|
|
99
|
+
if (indentAndNewline)
|
|
100
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -2,14 +2,15 @@ import { DomConverter } from '../../widgets/designerView/DomConverter';
|
|
|
2
2
|
import { CssCombiner } from '../../helper/CssCombiner';
|
|
3
3
|
import { NodeType } from '../../item/NodeType';
|
|
4
4
|
import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
|
|
5
|
-
import { isInline } from '../../helper/ElementHelper.js';
|
|
5
|
+
import { isEmptyTextNode, isInline } from '../../helper/ElementHelper.js';
|
|
6
6
|
export class HtmlWriterService {
|
|
7
7
|
canWrite(designItem) {
|
|
8
8
|
return true;
|
|
9
9
|
}
|
|
10
10
|
_conditionalyWriteIndent(indentedTextWriter, designItem) {
|
|
11
11
|
if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
|
|
12
|
-
(designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling))
|
|
12
|
+
(designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
|
|
13
|
+
(designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))))
|
|
13
14
|
indentedTextWriter.writeIndent();
|
|
14
15
|
}
|
|
15
16
|
_conditionalyWriteNewline(indentedTextWriter, designItem) {
|
|
@@ -20,7 +21,12 @@ export class HtmlWriterService {
|
|
|
20
21
|
write(indentedTextWriter, designItem, options, designItemsAssignmentList) {
|
|
21
22
|
let start = indentedTextWriter.position;
|
|
22
23
|
if (designItem.nodeType == NodeType.TextNode) {
|
|
23
|
-
|
|
24
|
+
if (isEmptyTextNode(designItem.element) &&
|
|
25
|
+
((designItem.element.previousSibling instanceof HTMLElement && !isInline(designItem.element.previousSibling)) ||
|
|
26
|
+
(designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
|
|
27
|
+
}
|
|
28
|
+
else
|
|
29
|
+
this.writeTextNode(indentedTextWriter, designItem, true);
|
|
24
30
|
}
|
|
25
31
|
else if (designItem.nodeType == NodeType.Comment) {
|
|
26
32
|
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
@@ -59,24 +65,34 @@ export class HtmlWriterService {
|
|
|
59
65
|
indentedTextWriter.write('"');
|
|
60
66
|
}
|
|
61
67
|
indentedTextWriter.write('>');
|
|
68
|
+
let contentSingleTextNode = false;
|
|
62
69
|
if (designItem.hasChildren) {
|
|
63
70
|
const children = designItem.children();
|
|
64
|
-
|
|
65
|
-
if (
|
|
71
|
+
contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
|
|
72
|
+
if (contentSingleTextNode) {
|
|
66
73
|
this.writeTextNode(indentedTextWriter, designItem, false);
|
|
67
74
|
}
|
|
68
75
|
else {
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
|
|
77
|
+
indentedTextWriter.writeNewline();
|
|
78
|
+
indentedTextWriter.levelRaise();
|
|
79
|
+
}
|
|
71
80
|
for (const c of children) {
|
|
72
81
|
c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
|
|
73
82
|
if (s.canWrite(c)) {
|
|
74
83
|
s.write(indentedTextWriter, c, options, designItemsAssignmentList);
|
|
75
84
|
}
|
|
76
85
|
});
|
|
86
|
+
let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode;
|
|
87
|
+
if (childSingleTextNode)
|
|
88
|
+
indentedTextWriter.writeNewline();
|
|
89
|
+
}
|
|
90
|
+
if (designItem.element instanceof HTMLElement && !isInline(designItem.element)) {
|
|
91
|
+
indentedTextWriter.levelShrink();
|
|
92
|
+
if (!indentedTextWriter.isLastCharNewline())
|
|
93
|
+
indentedTextWriter.writeNewline();
|
|
94
|
+
indentedTextWriter.writeIndent();
|
|
77
95
|
}
|
|
78
|
-
indentedTextWriter.levelShrink();
|
|
79
|
-
indentedTextWriter.writeIndent();
|
|
80
96
|
}
|
|
81
97
|
}
|
|
82
98
|
else if (designItem.hasContent) {
|
|
@@ -84,7 +100,8 @@ export class HtmlWriterService {
|
|
|
84
100
|
}
|
|
85
101
|
if (!DomConverter.IsSelfClosingElement(designItem.name))
|
|
86
102
|
indentedTextWriter.write('</' + designItem.name + '>');
|
|
87
|
-
|
|
103
|
+
if (!contentSingleTextNode)
|
|
104
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
88
105
|
}
|
|
89
106
|
if (designItemsAssignmentList) {
|
|
90
107
|
designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { IDesignItem } from '../../item/IDesignItem';
|
|
2
|
+
import { IHtmlWriterService } from './IHtmlWriterService';
|
|
3
|
+
import { IHtmlWriterOptions } from './IHtmlWriterOptions';
|
|
4
|
+
import { IndentedTextWriter } from '../../helper/IndentedTextWriter';
|
|
5
|
+
import { IStringPosition } from './IStringPosition';
|
|
6
|
+
export declare class HtmlWriterService implements IHtmlWriterService {
|
|
7
|
+
canWrite(designItem: IDesignItem): boolean;
|
|
8
|
+
private _conditionalyWriteIndent;
|
|
9
|
+
private _conditionalyWriteNewline;
|
|
10
|
+
write(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, options: IHtmlWriterOptions, designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): void;
|
|
11
|
+
private writeTextNode;
|
|
12
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { DomConverter } from '../../widgets/designerView/DomConverter';
|
|
2
|
+
import { CssCombiner } from '../../helper/CssCombiner';
|
|
3
|
+
import { NodeType } from '../../item/NodeType';
|
|
4
|
+
import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper';
|
|
5
|
+
import { isInline } from '../../helper/ElementHelper.js';
|
|
6
|
+
//todo :
|
|
7
|
+
//write style...
|
|
8
|
+
//needs InternalBindinsgStorrageService -> keeps bindings
|
|
9
|
+
export class HtmlWriterService {
|
|
10
|
+
canWrite(designItem) {
|
|
11
|
+
return true;
|
|
12
|
+
}
|
|
13
|
+
_conditionalyWriteIndent(indentedTextWriter, designItem) {
|
|
14
|
+
if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
|
|
15
|
+
(designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)))
|
|
16
|
+
indentedTextWriter.writeIndent();
|
|
17
|
+
}
|
|
18
|
+
_conditionalyWriteNewline(indentedTextWriter, designItem) {
|
|
19
|
+
if ((designItem.element instanceof HTMLElement && !isInline(designItem.element)) ||
|
|
20
|
+
(designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)))
|
|
21
|
+
indentedTextWriter.writeNewline();
|
|
22
|
+
}
|
|
23
|
+
write(indentedTextWriter, designItem, options, designItemsAssignmentList) {
|
|
24
|
+
let start = indentedTextWriter.position;
|
|
25
|
+
if (designItem.nodeType == NodeType.TextNode) {
|
|
26
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
27
|
+
this.writeTextNode(indentedTextWriter, designItem, true);
|
|
28
|
+
}
|
|
29
|
+
else if (designItem.nodeType == NodeType.Comment) {
|
|
30
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
31
|
+
indentedTextWriter.write('<!--' + designItem.content + '-->');
|
|
32
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
36
|
+
indentedTextWriter.write('<' + designItem.name);
|
|
37
|
+
if (designItem.hasAttributes) {
|
|
38
|
+
for (const a of designItem.attributes) {
|
|
39
|
+
indentedTextWriter.write(' ');
|
|
40
|
+
if (typeof a[1] === 'string') {
|
|
41
|
+
if (a[1] === "")
|
|
42
|
+
indentedTextWriter.write(a[0]);
|
|
43
|
+
else
|
|
44
|
+
indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
|
|
45
|
+
}
|
|
46
|
+
else if (!a[1])
|
|
47
|
+
indentedTextWriter.write(a[0]);
|
|
48
|
+
else {
|
|
49
|
+
//TODO: writing of bindings
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
if (designItem.hasStyles) {
|
|
54
|
+
indentedTextWriter.write(' style="');
|
|
55
|
+
let styles = designItem.styles;
|
|
56
|
+
if (options.compressCssToShorthandProperties)
|
|
57
|
+
styles = CssCombiner.combine(styles);
|
|
58
|
+
for (const s of styles) {
|
|
59
|
+
if (s[0]) {
|
|
60
|
+
indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
indentedTextWriter.write('"');
|
|
64
|
+
}
|
|
65
|
+
indentedTextWriter.write('>');
|
|
66
|
+
if (designItem.hasChildren) {
|
|
67
|
+
const children = designItem.children();
|
|
68
|
+
const singleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode;
|
|
69
|
+
if (singleTextNode) {
|
|
70
|
+
this.writeTextNode(indentedTextWriter, designItem, false);
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
indentedTextWriter.writeNewline();
|
|
74
|
+
indentedTextWriter.levelRaise();
|
|
75
|
+
for (const c of children) {
|
|
76
|
+
c.serviceContainer.forSomeServicesTillResult('htmlWriterService', (s) => {
|
|
77
|
+
if (s.canWrite(c)) {
|
|
78
|
+
s.write(indentedTextWriter, c, options, designItemsAssignmentList);
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
indentedTextWriter.levelShrink();
|
|
83
|
+
indentedTextWriter.writeIndent();
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
else if (designItem.hasContent) {
|
|
87
|
+
indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
|
|
88
|
+
}
|
|
89
|
+
if (!DomConverter.IsSelfClosingElement(designItem.name))
|
|
90
|
+
indentedTextWriter.write('</' + designItem.name + '>');
|
|
91
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
92
|
+
}
|
|
93
|
+
if (designItemsAssignmentList) {
|
|
94
|
+
designItemsAssignmentList.set(designItem, { start: start, length: indentedTextWriter.position - start - 1 });
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
writeTextNode(indentedTextWriter, designItem, indentAndNewline) {
|
|
98
|
+
let content = DomConverter.normalizeContentValue(designItem.content).trim();
|
|
99
|
+
if (content) {
|
|
100
|
+
if (indentAndNewline)
|
|
101
|
+
this._conditionalyWriteIndent(indentedTextWriter, designItem);
|
|
102
|
+
indentedTextWriter.write(content);
|
|
103
|
+
if (indentAndNewline)
|
|
104
|
+
this._conditionalyWriteNewline(indentedTextWriter, designItem);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
@@ -53,7 +53,7 @@ export class DefaultInstanceService {
|
|
|
53
53
|
if (definition.defaultProperties) {
|
|
54
54
|
let propertiesService = null;
|
|
55
55
|
if (definition.type) {
|
|
56
|
-
propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.
|
|
56
|
+
propertiesService = serviceContainer.getLastServiceWhere('propertyService', (x) => x.isHandledElement(designItem));
|
|
57
57
|
}
|
|
58
58
|
let properties = propertiesService.getProperties(designItem);
|
|
59
59
|
for (let a in definition.defaultProperties) {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { IDesignItem } from "../../..";
|
|
2
|
+
import { BindingTarget } from "../../item/BindingTarget";
|
|
3
|
+
import { IElementDefinition } from "../elementsService/IElementDefinition";
|
|
4
|
+
import { IElementsService } from "../elementsService/IElementsService";
|
|
5
|
+
import { IPropertiesService } from "../propertiesService/IPropertiesService";
|
|
6
|
+
import { IProperty } from "../propertiesService/IProperty";
|
|
7
|
+
import { ValueType } from "../propertiesService/ValueType";
|
|
8
|
+
export declare class WebcomponentManifestParserService implements IElementsService, IPropertiesService {
|
|
9
|
+
private _name;
|
|
10
|
+
get name(): string;
|
|
11
|
+
private _packageData;
|
|
12
|
+
private _elementList;
|
|
13
|
+
private _resolveStored;
|
|
14
|
+
private _rejectStored;
|
|
15
|
+
constructor(name: string, file: string);
|
|
16
|
+
getElements(): Promise<IElementDefinition[]>;
|
|
17
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
18
|
+
getProperties(designItem: IDesignItem): IProperty[];
|
|
19
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
20
|
+
getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
|
|
21
|
+
setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
|
|
22
|
+
clearValue(designItems: IDesignItem[], property: IProperty): void;
|
|
23
|
+
isSet(designItems: IDesignItem[], property: IProperty): ValueType;
|
|
24
|
+
getValue(designItems: IDesignItem[], property: IProperty): void;
|
|
25
|
+
getUnsetValue(designItems: IDesignItem[], property: IProperty): void;
|
|
26
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
export class WebcomponentManifestParserService {
|
|
2
|
+
_name;
|
|
3
|
+
get name() { return this._name; }
|
|
4
|
+
_packageData;
|
|
5
|
+
_elementList;
|
|
6
|
+
_resolveStored;
|
|
7
|
+
_rejectStored;
|
|
8
|
+
constructor(name, file) {
|
|
9
|
+
this._name = name;
|
|
10
|
+
import(file, { assert: { type: 'json' } }).then(module => {
|
|
11
|
+
this._packageData = module.default;
|
|
12
|
+
this._elementList = [];
|
|
13
|
+
for (let m of this._packageData.modules) {
|
|
14
|
+
for (let e of m.exports) {
|
|
15
|
+
if (e.kind == 'custom-element-definition') {
|
|
16
|
+
this._elementList.push({ tag: e.name });
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
if (this._resolveStored) {
|
|
20
|
+
this._resolveStored.forEach(x => x(this._elementList));
|
|
21
|
+
this._resolveStored = null;
|
|
22
|
+
this._rejectStored = null;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}).catch(err => {
|
|
26
|
+
if (this._rejectStored) {
|
|
27
|
+
this._rejectStored.forEach(x => x(err));
|
|
28
|
+
this._resolveStored = null;
|
|
29
|
+
this._rejectStored = null;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
async getElements() {
|
|
34
|
+
if (this._packageData)
|
|
35
|
+
return Promise.resolve(this._elementList);
|
|
36
|
+
if (!this._resolveStored) {
|
|
37
|
+
this._resolveStored = [];
|
|
38
|
+
this._rejectStored = [];
|
|
39
|
+
}
|
|
40
|
+
return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
|
|
41
|
+
}
|
|
42
|
+
isHandledElement(designItem) {
|
|
43
|
+
throw new Error("Method not implemented.");
|
|
44
|
+
}
|
|
45
|
+
getProperties(designItem) {
|
|
46
|
+
throw new Error("Method not implemented.");
|
|
47
|
+
}
|
|
48
|
+
getProperty(designItem, name) {
|
|
49
|
+
throw new Error("Method not implemented.");
|
|
50
|
+
}
|
|
51
|
+
getPropertyTarget(designItem, property) {
|
|
52
|
+
throw new Error("Method not implemented.");
|
|
53
|
+
}
|
|
54
|
+
setValue(designItems, property, value) {
|
|
55
|
+
throw new Error("Method not implemented.");
|
|
56
|
+
}
|
|
57
|
+
clearValue(designItems, property) {
|
|
58
|
+
throw new Error("Method not implemented.");
|
|
59
|
+
}
|
|
60
|
+
isSet(designItems, property) {
|
|
61
|
+
throw new Error("Method not implemented.");
|
|
62
|
+
}
|
|
63
|
+
getValue(designItems, property) {
|
|
64
|
+
throw new Error("Method not implemented.");
|
|
65
|
+
}
|
|
66
|
+
getUnsetValue(designItems, property) {
|
|
67
|
+
throw new Error("Method not implemented.");
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { BindingTarget } from "../../item/BindingTarget";
|
|
2
|
+
import { IElementDefinition } from "../elementsService/IElementDefinition";
|
|
3
|
+
import { IElementsService } from "../elementsService/IElementsService";
|
|
4
|
+
import { IPropertiesService } from "../propertiesService/IPropertiesService";
|
|
5
|
+
import { IProperty } from "../propertiesService/IProperty";
|
|
6
|
+
import { IDesignItem } from "../../item/IDesignItem";
|
|
7
|
+
import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
|
|
8
|
+
export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
|
|
9
|
+
private _name;
|
|
10
|
+
get name(): string;
|
|
11
|
+
private _packageData;
|
|
12
|
+
private _elementList;
|
|
13
|
+
private _propertiesList;
|
|
14
|
+
private _resolveStored;
|
|
15
|
+
private _rejectStored;
|
|
16
|
+
constructor(name: string, file: string);
|
|
17
|
+
private manifestClassPropertyTypeToEditorPropertyType;
|
|
18
|
+
getElements(): Promise<IElementDefinition[]>;
|
|
19
|
+
isHandledElement(designItem: IDesignItem): boolean;
|
|
20
|
+
getProperties(designItem: IDesignItem): IProperty[];
|
|
21
|
+
getProperty(designItem: IDesignItem, name: string): IProperty;
|
|
22
|
+
getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
|
|
23
|
+
}
|