@node-projects/web-component-designer 0.0.63 → 0.0.64
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/ACKNOWLEDGMENTS +5 -0
- package/dist/elements/controls/SimpleSplitView.d.ts +11 -0
- package/dist/elements/controls/SimpleSplitView.js +66 -0
- package/dist/elements/controls/SimpleSplitView2.d.ts +11 -0
- package/dist/elements/controls/SimpleSplitView2.js +63 -0
- package/dist/elements/controls/aa.d.ts +24 -0
- package/dist/elements/controls/aa.js +98 -0
- package/dist/elements/documentContainer.js +6 -7
- package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +2 -0
- package/package.json +1 -1
package/ACKNOWLEDGMENTS
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
+
static readonly style: CSSStyleSheet;
|
|
4
|
+
static readonly template: HTMLTemplateElement;
|
|
5
|
+
static properties: {
|
|
6
|
+
orientation: StringConstructor;
|
|
7
|
+
};
|
|
8
|
+
orientation: 'vertical' | 'horizontal';
|
|
9
|
+
constructor();
|
|
10
|
+
ready(): void;
|
|
11
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
+
static style = css `
|
|
4
|
+
:host {
|
|
5
|
+
display: block;
|
|
6
|
+
}
|
|
7
|
+
#split {
|
|
8
|
+
position: relative;
|
|
9
|
+
height: 100%;
|
|
10
|
+
width: 100%;
|
|
11
|
+
grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
|
|
12
|
+
display: grid;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
#splitter {
|
|
16
|
+
user-select: none;
|
|
17
|
+
}
|
|
18
|
+
:host(:not([orientation="vertical"])) > div > #splitter {
|
|
19
|
+
cursor: ew-resize;
|
|
20
|
+
width: 5px;
|
|
21
|
+
}
|
|
22
|
+
:host([orientation="vertical"]) > div > #splitter {
|
|
23
|
+
cursor: ns-resize;
|
|
24
|
+
height: 5px;
|
|
25
|
+
}`;
|
|
26
|
+
static template = html `
|
|
27
|
+
<div id="split" style="--split: 50;">
|
|
28
|
+
<slot name="top"></slot>
|
|
29
|
+
<div id="splitter"></div>
|
|
30
|
+
<slot name="bottom"></slot>
|
|
31
|
+
</div>`;
|
|
32
|
+
static properties = {
|
|
33
|
+
orientation: String
|
|
34
|
+
};
|
|
35
|
+
orientation = 'vertical';
|
|
36
|
+
constructor() {
|
|
37
|
+
super();
|
|
38
|
+
}
|
|
39
|
+
ready() {
|
|
40
|
+
this._parseAttributesToProperties();
|
|
41
|
+
this.setAttribute('orientation', this.orientation);
|
|
42
|
+
const split = this._getDomElement("split");
|
|
43
|
+
const splitter = this._getDomElement("splitter");
|
|
44
|
+
let start = null;
|
|
45
|
+
splitter.addEventListener('pointerdown', (e) => {
|
|
46
|
+
splitter.setPointerCapture(e.pointerId);
|
|
47
|
+
start = true;
|
|
48
|
+
});
|
|
49
|
+
splitter.addEventListener('pointerup', (e) => {
|
|
50
|
+
splitter.releasePointerCapture(e.pointerId);
|
|
51
|
+
start = null;
|
|
52
|
+
});
|
|
53
|
+
splitter.addEventListener('pointermove', (e) => {
|
|
54
|
+
if (start !== null) {
|
|
55
|
+
let splitValue = parseFloat(split.style.getPropertyValue('--split'));
|
|
56
|
+
if (this.orientation === 'horizontal')
|
|
57
|
+
splitValue += e.movementX * 100 / split.clientWidth;
|
|
58
|
+
else
|
|
59
|
+
splitValue += e.movementY * 100 / split.clientHeight;
|
|
60
|
+
if (!isNaN(splitValue))
|
|
61
|
+
split.style.setProperty("--split", splitValue);
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
customElements.define('node-projects-simple-split-view', SimpleSplitView);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
+
static readonly style: CSSStyleSheet;
|
|
4
|
+
static readonly template: HTMLTemplateElement;
|
|
5
|
+
static properties: {
|
|
6
|
+
orientation: StringConstructor;
|
|
7
|
+
};
|
|
8
|
+
orientation: 'vertical' | 'horizontal';
|
|
9
|
+
constructor();
|
|
10
|
+
ready(): void;
|
|
11
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
+
static style = css `
|
|
4
|
+
:host {
|
|
5
|
+
display: block;
|
|
6
|
+
}
|
|
7
|
+
#split {
|
|
8
|
+
position: relative;
|
|
9
|
+
height: 100%;
|
|
10
|
+
width: 100%;
|
|
11
|
+
grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
|
|
12
|
+
display: grid;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
:host(:not([orientation="vertical"])) > div > #splitter {
|
|
16
|
+
cursor: ew-resize;
|
|
17
|
+
width: 5px;
|
|
18
|
+
}
|
|
19
|
+
:host([orientation="vertical"]) > div > #splitter {
|
|
20
|
+
cursor: ns-resize;
|
|
21
|
+
height: 5px;
|
|
22
|
+
}`;
|
|
23
|
+
static template = html `
|
|
24
|
+
<div id="split" style="--split: 50;">
|
|
25
|
+
<slot name="top"></slot>
|
|
26
|
+
<div id="splitter"></div>
|
|
27
|
+
<slot name="bottom"></slot>
|
|
28
|
+
</div>`;
|
|
29
|
+
static properties = {
|
|
30
|
+
orientation: String
|
|
31
|
+
};
|
|
32
|
+
orientation = 'vertical';
|
|
33
|
+
constructor() {
|
|
34
|
+
super();
|
|
35
|
+
}
|
|
36
|
+
ready() {
|
|
37
|
+
this._parseAttributesToProperties();
|
|
38
|
+
this.setAttribute('orientation', this.orientation);
|
|
39
|
+
const split = this._getDomElement("split");
|
|
40
|
+
const splitter = this._getDomElement("splitter");
|
|
41
|
+
let start = null;
|
|
42
|
+
splitter.addEventListener('pointerdown', (e) => {
|
|
43
|
+
splitter.setPointerCapture(e.pointerId);
|
|
44
|
+
start = true;
|
|
45
|
+
});
|
|
46
|
+
splitter.addEventListener('pointerup', (e) => {
|
|
47
|
+
splitter.releasePointerCapture(e.pointerId);
|
|
48
|
+
start = null;
|
|
49
|
+
});
|
|
50
|
+
splitter.addEventListener('pointermove', (e) => {
|
|
51
|
+
if (start !== null) {
|
|
52
|
+
let splitValue = parseFloat(split.style.getPropertyValue('--split'));
|
|
53
|
+
if (this.orientation === 'horizontal')
|
|
54
|
+
splitValue += e.movementX * 100 / split.clientWidth;
|
|
55
|
+
else
|
|
56
|
+
splitValue += e.movementY * 100 / split.clientHeight;
|
|
57
|
+
if (!isNaN(splitValue))
|
|
58
|
+
split.style.setProperty("--split", splitValue);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
customElements.define('node-projects-simple-split-view', SimpleSplitView);
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Split View is an image comparison component
|
|
3
|
+
*
|
|
4
|
+
* <split-view>
|
|
5
|
+
* <picture slot="top">[...]</picture>
|
|
6
|
+
* <picture slot="bottom">[...]</picture>
|
|
7
|
+
* </split-view>
|
|
8
|
+
*
|
|
9
|
+
* Options are;
|
|
10
|
+
*
|
|
11
|
+
* start (number) The point where the comparison line should start (0 = left, 1000 = right)
|
|
12
|
+
* mode (string) A CSS mix-blend-mode to use for comparison
|
|
13
|
+
*/
|
|
14
|
+
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
15
|
+
export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
|
|
16
|
+
static readonly style: CSSStyleSheet;
|
|
17
|
+
static readonly template: HTMLTemplateElement;
|
|
18
|
+
static properties: {
|
|
19
|
+
start: NumberConstructor;
|
|
20
|
+
};
|
|
21
|
+
constructor();
|
|
22
|
+
start: number;
|
|
23
|
+
ready(): void;
|
|
24
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Split View is an image comparison component
|
|
3
|
+
*
|
|
4
|
+
* <split-view>
|
|
5
|
+
* <picture slot="top">[...]</picture>
|
|
6
|
+
* <picture slot="bottom">[...]</picture>
|
|
7
|
+
* </split-view>
|
|
8
|
+
*
|
|
9
|
+
* Options are;
|
|
10
|
+
*
|
|
11
|
+
* start (number) The point where the comparison line should start (0 = left, 1000 = right)
|
|
12
|
+
* mode (string) A CSS mix-blend-mode to use for comparison
|
|
13
|
+
*/
|
|
14
|
+
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
15
|
+
export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
|
|
16
|
+
static style = css `
|
|
17
|
+
:host {
|
|
18
|
+
display: block;
|
|
19
|
+
}
|
|
20
|
+
:host([hidden]) { display: none }
|
|
21
|
+
.split {
|
|
22
|
+
position: relative;
|
|
23
|
+
height: 100%;
|
|
24
|
+
display: grid;
|
|
25
|
+
align-items: center;
|
|
26
|
+
--split: 100;
|
|
27
|
+
}
|
|
28
|
+
.top,
|
|
29
|
+
.bottom {
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 0;
|
|
33
|
+
right: 0;
|
|
34
|
+
bottom: 0;
|
|
35
|
+
}
|
|
36
|
+
.bottom {
|
|
37
|
+
background-color: red;
|
|
38
|
+
}
|
|
39
|
+
.top {
|
|
40
|
+
z-index: 2;
|
|
41
|
+
right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
border-right: 1px solid white;
|
|
44
|
+
}
|
|
45
|
+
input {
|
|
46
|
+
position: absolute;
|
|
47
|
+
width: 100%;
|
|
48
|
+
height: 100%;
|
|
49
|
+
margin: 0;
|
|
50
|
+
padding: 0;
|
|
51
|
+
z-index: 3;
|
|
52
|
+
background-color: transparent;
|
|
53
|
+
-webkit-appearance: none;
|
|
54
|
+
}
|
|
55
|
+
input[type="range"]:focus {
|
|
56
|
+
outline: var(--outline, -webkit-focus-ring-color auto 1px);
|
|
57
|
+
}`;
|
|
58
|
+
static template = html `
|
|
59
|
+
<div class="split" id="split" role="img" aria-label="Comparison of two images">
|
|
60
|
+
<div class="bottom" id="bottom" aria-label="First image to compare">
|
|
61
|
+
<slot name="bottom"></slot>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="top" id="top" aria-label="Second image to compare">
|
|
64
|
+
<slot name="top"></slot>
|
|
65
|
+
</div>
|
|
66
|
+
<label id="label" for="slider">Slide left and right to compare images</label>
|
|
67
|
+
<input type="range" role="slider" min="0" max="100" value="50" name="slider" id="slider" aria-labelledby="label" aria-valuemin="0" aria-valuemax="100">
|
|
68
|
+
</div>`;
|
|
69
|
+
static properties = {
|
|
70
|
+
start: Number
|
|
71
|
+
};
|
|
72
|
+
constructor() {
|
|
73
|
+
super();
|
|
74
|
+
}
|
|
75
|
+
start;
|
|
76
|
+
ready() {
|
|
77
|
+
this._parseAttributesToProperties();
|
|
78
|
+
const splitter = this._getDomElement("split");
|
|
79
|
+
const slider = this._getDomElement("slider");
|
|
80
|
+
const label = this._getDomElement("label");
|
|
81
|
+
const top = this._getDomElement("top");
|
|
82
|
+
const splitViewLabelText = this.getAttribute("split-view-label") || 'Comparison of two images';
|
|
83
|
+
const sliderLabelText = this.getAttribute("slider-label") || 'Press left and right to compare images';
|
|
84
|
+
const mode = this.getAttribute("mode") || "normal";
|
|
85
|
+
slider.addEventListener("input", (event) => {
|
|
86
|
+
const split = +event.target.value;
|
|
87
|
+
splitter.style.setProperty("--split", split);
|
|
88
|
+
slider.setAttribute('aria-valuenow', split);
|
|
89
|
+
});
|
|
90
|
+
splitter.style.setProperty("--split", this.start);
|
|
91
|
+
slider.setAttribute('aria-valuenow', this.start);
|
|
92
|
+
slider.value = this.start;
|
|
93
|
+
splitter.setAttribute('aria-label', splitViewLabelText);
|
|
94
|
+
label.innerText = sliderLabelText;
|
|
95
|
+
top.style.mixBlendMode = mode;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
customElements.define('node-projects-simple-split-view', SimpleSplitView);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
|
|
2
2
|
import { DesignerTabControl } from "./controls/DesignerTabControl";
|
|
3
3
|
import { DesignerView } from "./widgets/designerView/designerView";
|
|
4
|
+
import { SimpleSplitView } from './controls/SimpleSplitView';
|
|
4
5
|
export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
5
6
|
designerView;
|
|
6
7
|
codeView;
|
|
@@ -25,11 +26,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
|
25
26
|
}
|
|
26
27
|
node-projects-designer-view {
|
|
27
28
|
height: 100%;
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
.split-div {
|
|
31
|
-
display: grid;
|
|
32
|
-
grid-template-rows: 1fr 1fr;
|
|
29
|
+
overflow: hidden;
|
|
33
30
|
}
|
|
34
31
|
`;
|
|
35
32
|
}
|
|
@@ -44,6 +41,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
|
44
41
|
div.appendChild(this._tabControl);
|
|
45
42
|
this.designerView = new DesignerView();
|
|
46
43
|
this.designerView.setAttribute('exportparts', 'canvas');
|
|
44
|
+
this.designerView.slot = 'top';
|
|
47
45
|
this._designerDiv = document.createElement("div");
|
|
48
46
|
this._tabControl.appendChild(this._designerDiv);
|
|
49
47
|
this._designerDiv.title = 'Designer';
|
|
@@ -52,6 +50,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
|
52
50
|
this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
|
|
53
51
|
this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
|
|
54
52
|
this.codeView = new serviceContainer.config.codeViewWidget();
|
|
53
|
+
this.codeView.slot = 'bottom';
|
|
55
54
|
this._codeDiv = document.createElement("div");
|
|
56
55
|
this._tabControl.appendChild(this._codeDiv);
|
|
57
56
|
this._codeDiv.title = 'Code';
|
|
@@ -65,9 +64,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
|
|
|
65
64
|
}
|
|
66
65
|
}
|
|
67
66
|
});
|
|
68
|
-
this._splitDiv =
|
|
67
|
+
this._splitDiv = new SimpleSplitView();
|
|
68
|
+
this._splitDiv.style.height = '100%';
|
|
69
69
|
this._splitDiv.title = 'Split';
|
|
70
|
-
this._splitDiv.className = 'split-div';
|
|
71
70
|
this._tabControl.appendChild(this._splitDiv);
|
|
72
71
|
this.demoView = new serviceContainer.config.demoViewWidget();
|
|
73
72
|
this.demoView.title = 'Preview';
|
|
@@ -62,6 +62,8 @@ export class NodeHtmlParserService {
|
|
|
62
62
|
designItem.setStyle(s.name, s.value);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
+
if (element instanceof HTMLElement || element instanceof SVGElement)
|
|
66
|
+
element.style.pointerEvents = 'auto';
|
|
65
67
|
designItem.hideAtDesignTime = hideAtDesignTime;
|
|
66
68
|
designItem.hideAtRunTime = hideAtRunTime;
|
|
67
69
|
designItem.lockAtDesignTime = lockAtDesignTime;
|