@node-projects/web-component-designer 0.0.76 → 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/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/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/package.json +1 -1
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|