@node-projects/web-component-designer 0.1.162 → 0.1.164
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/assets/designerCanvasIframe.html +20 -0
- package/dist/elements/helper/ElementHelper.js +0 -1
- package/dist/elements/helper/TransformHelper.d.ts +0 -1
- package/dist/elements/helper/TransformHelper.js +10 -24
- package/dist/elements/widgets/designerView/designerCanvas.js +2 -0
- package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtension.d.ts +1 -0
- package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtension.js +14 -7
- package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js +1 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts +1 -0
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +15 -1
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<script>
|
|
5
|
+
window.addEventListener("message",
|
|
6
|
+
(event) => {
|
|
7
|
+
const data = event.data;
|
|
8
|
+
const obj = JSON.parse(data);
|
|
9
|
+
switch (obj.type) {
|
|
10
|
+
case 'elementsFromPoint': {
|
|
11
|
+
const ret = document.elementsFromPoint(...obj.par);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}, false);
|
|
15
|
+
</script>
|
|
16
|
+
</head>
|
|
17
|
+
|
|
18
|
+
<body></body>
|
|
19
|
+
|
|
20
|
+
</html>
|
|
@@ -7,7 +7,6 @@ export function inDesigner(element) {
|
|
|
7
7
|
}
|
|
8
8
|
export function newElementFromString(text, document) {
|
|
9
9
|
const range = document.createRange();
|
|
10
|
-
range.selectNode(document.body);
|
|
11
10
|
//@ts-ignore
|
|
12
11
|
const fragment = range.createContextualFragment(text, { includeShadowRoots: true });
|
|
13
12
|
return fragment.firstChild;
|
|
@@ -20,4 +20,3 @@ export declare function getElementSize(element: HTMLElement): {
|
|
|
20
20
|
export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
|
|
21
21
|
export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
|
|
22
22
|
export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
|
|
23
|
-
export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;
|
|
@@ -9,7 +9,7 @@ let identityMatrix = [
|
|
|
9
9
|
];
|
|
10
10
|
export function getElementCombinedTransform(element) {
|
|
11
11
|
//https://www.w3.org/TR/css-transforms-2/#ctm
|
|
12
|
-
let s = getComputedStyle(element);
|
|
12
|
+
let s = element.ownerDocument.defaultView.getComputedStyle(element);
|
|
13
13
|
let m = new DOMMatrix();
|
|
14
14
|
if (s.translate != 'none' && s.translate) {
|
|
15
15
|
m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
|
|
@@ -37,9 +37,6 @@ export function combineTransforms(element, actualTransforms, requestedTransforma
|
|
|
37
37
|
}
|
|
38
38
|
export function transformPointByInverseMatrix(point, matrix) {
|
|
39
39
|
const inverse = matrix.inverse();
|
|
40
|
-
//fix chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395645
|
|
41
|
-
inverse.m33 = 1;
|
|
42
|
-
inverse.m44 = 1;
|
|
43
40
|
return point.matrixTransform(inverse);
|
|
44
41
|
}
|
|
45
42
|
export function getRotationMatrix3d(axisOfRotation, angle) {
|
|
@@ -139,12 +136,13 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
|
|
|
139
136
|
if (newElement) {
|
|
140
137
|
actualElementMatrix = getElementCombinedTransform(actualElement);
|
|
141
138
|
newElementMatrix = getElementCombinedTransform(newElement);
|
|
142
|
-
|
|
139
|
+
actualElementMatrix.m41 = actualElementMatrix.m42 = actualElementMatrix.m43 = 0;
|
|
140
|
+
newElementMatrix.m41 = newElementMatrix.m42 = newElementMatrix.m43 = 0;
|
|
143
141
|
if (actualElement == element) {
|
|
144
|
-
originalElementAndAllParentsMultipliedMatrix =
|
|
142
|
+
originalElementAndAllParentsMultipliedMatrix = newElementMatrix.multiply(actualElementMatrix);
|
|
145
143
|
}
|
|
146
144
|
else if (newElement != ancestor || !excludeAncestor) {
|
|
147
|
-
originalElementAndAllParentsMultipliedMatrix =
|
|
145
|
+
originalElementAndAllParentsMultipliedMatrix = newElementMatrix.multiply(originalElementAndAllParentsMultipliedMatrix);
|
|
148
146
|
}
|
|
149
147
|
lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
|
|
150
148
|
const cacheEntry = [originalElementAndAllParentsMultipliedMatrix];
|
|
@@ -169,8 +167,10 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
|
|
|
169
167
|
const tfX = parseFloat(toSplit[0]);
|
|
170
168
|
const tfY = parseFloat(toSplit[1]);
|
|
171
169
|
const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + tfX, elementWindowOffset.offsetTop - designerCanvas.outerRect.y + tfY);
|
|
172
|
-
if (actualElement == element)
|
|
173
|
-
|
|
170
|
+
//if (actualElement == element)
|
|
171
|
+
{
|
|
172
|
+
const transf = element.ownerDocument.defaultView.getComputedStyle(element).transform;
|
|
173
|
+
const mtx = extractTranslationFromDOMMatrix(new DOMMatrix(transf));
|
|
174
174
|
parentElementTransformOrigin.x -= mtx.x;
|
|
175
175
|
parentElementTransformOrigin.y -= mtx.y;
|
|
176
176
|
}
|
|
@@ -260,23 +260,9 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
|
|
|
260
260
|
return transformedCornerPoints;
|
|
261
261
|
}
|
|
262
262
|
export function extractTranslationFromDOMMatrix(matrix) {
|
|
263
|
+
//TODO: maybe we also need m43 here??
|
|
263
264
|
return new DOMPoint(matrix.m41, matrix.m42, 0, 0);
|
|
264
265
|
}
|
|
265
266
|
export function extractRotationAngleFromDOMMatrix(matrix) {
|
|
266
267
|
return getRotationAngleFromMatrix(null, matrix);
|
|
267
268
|
}
|
|
268
|
-
export function normalizeToAbsolutePosition(element, normalizeProperty) {
|
|
269
|
-
switch (normalizeProperty) {
|
|
270
|
-
case "left":
|
|
271
|
-
let left = getComputedStyle(element).left;
|
|
272
|
-
element.style.removeProperty('right');
|
|
273
|
-
element.style.left = left;
|
|
274
|
-
return left;
|
|
275
|
-
case "top":
|
|
276
|
-
let top = getComputedStyle(element).top;
|
|
277
|
-
element.style.removeProperty('bottom');
|
|
278
|
-
element.style.top = top;
|
|
279
|
-
return top;
|
|
280
|
-
}
|
|
281
|
-
return null;
|
|
282
|
-
}
|
|
@@ -304,6 +304,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
304
304
|
if (this._useIframe) {
|
|
305
305
|
this._iframe = document.createElement('iframe');
|
|
306
306
|
this._iframe.setAttribute("sandbox", "allow-same-origin");
|
|
307
|
+
//TODO: add option to allow scripts in iframes...
|
|
308
|
+
//this._iframe.setAttribute("sandbox", "allow-same-origin allow-scripts");
|
|
307
309
|
this._canvas.appendChild(this._iframe);
|
|
308
310
|
requestAnimationFrame(() => {
|
|
309
311
|
this._window = this._iframe.contentWindow;
|
|
@@ -4,6 +4,7 @@ import { AbstractExtension } from './AbstractExtension.js';
|
|
|
4
4
|
import { IExtensionManager } from './IExtensionManger.js';
|
|
5
5
|
export declare class PreviousElementSelectExtension extends AbstractExtension {
|
|
6
6
|
constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
|
|
7
|
+
private _path;
|
|
7
8
|
private _rect;
|
|
8
9
|
private _clickRect;
|
|
9
10
|
private _g;
|
|
@@ -4,6 +4,7 @@ export class PreviousElementSelectExtension extends AbstractExtension {
|
|
|
4
4
|
constructor(extensionManager, designerView, extendedItem) {
|
|
5
5
|
super(extensionManager, designerView, extendedItem);
|
|
6
6
|
}
|
|
7
|
+
_path;
|
|
7
8
|
_rect;
|
|
8
9
|
_clickRect;
|
|
9
10
|
_g;
|
|
@@ -13,16 +14,18 @@ export class PreviousElementSelectExtension extends AbstractExtension {
|
|
|
13
14
|
refresh(cache, event) {
|
|
14
15
|
const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
|
|
15
16
|
if (!isNaN(transformedCornerPoints[1].x)) {
|
|
16
|
-
if (this._valuesHaveChanges(transformedCornerPoints[1].x, transformedCornerPoints[1].y, this.designerCanvas.scaleFactor)) {
|
|
17
|
+
if (this._valuesHaveChanges(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, this.designerCanvas.scaleFactor)) {
|
|
18
|
+
const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
|
|
17
19
|
const h = (16 / this.designerCanvas.scaleFactor);
|
|
18
|
-
this._rect = this._drawRect(
|
|
19
|
-
this._clickRect = this._drawRect(
|
|
20
|
+
this._rect = this._drawRect(0, 0, h, h, 'svg-previous-select', this._rect);
|
|
21
|
+
this._clickRect = this._drawRect(0, 0, h, h + 3, 'svg-invisible', this._clickRect);
|
|
20
22
|
if (!this._g) {
|
|
21
23
|
this._g = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
22
24
|
this._g.setAttribute('class', 'svg-previous-select');
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
this._g.appendChild(
|
|
25
|
+
this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
26
|
+
this._path.setAttribute('d', 'm4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z');
|
|
27
|
+
this._g.appendChild(this._rect);
|
|
28
|
+
this._g.appendChild(this._path);
|
|
26
29
|
this._addOverlay(this._g);
|
|
27
30
|
this._clickRect.onpointerdown = (e) => {
|
|
28
31
|
e.preventDefault();
|
|
@@ -33,8 +36,12 @@ export class PreviousElementSelectExtension extends AbstractExtension {
|
|
|
33
36
|
e.preventDefault();
|
|
34
37
|
e.stopPropagation();
|
|
35
38
|
};
|
|
39
|
+
this._g.appendChild(this._clickRect);
|
|
36
40
|
}
|
|
37
|
-
this.
|
|
41
|
+
this._path.style.scale = (0.6 / this.designerCanvas.scaleFactor).toString();
|
|
42
|
+
this._g.style.transform = 'translate(' + (transformedCornerPoints[1].x - (14.5 / this.designerCanvas.scaleFactor)) + 'px,' + (transformedCornerPoints[1].y - (15.5 / this.designerCanvas.scaleFactor)) + 'px) rotate(' + angle + 'deg)';
|
|
43
|
+
this._g.style.transformOrigin = '100% 100%';
|
|
44
|
+
this._g.style.transformBox = 'fill-box';
|
|
38
45
|
}
|
|
39
46
|
}
|
|
40
47
|
}
|
package/dist/elements/widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js
CHANGED
|
@@ -9,6 +9,6 @@ export class PreviousElementSelectExtensionProvider {
|
|
|
9
9
|
}
|
|
10
10
|
static style = css `
|
|
11
11
|
rect.svg-previous-select { stroke: none; fill: #3899ec; pointer-events: auto; }
|
|
12
|
-
g.svg-previous-select {
|
|
12
|
+
g.svg-previous-select { fill: white; pointer-events: auto; }
|
|
13
13
|
`;
|
|
14
14
|
}
|
|
@@ -2,6 +2,7 @@ import { IDesignItem } from '../../../item/IDesignItem.js';
|
|
|
2
2
|
import { IDesignerCanvas } from '../IDesignerCanvas.js';
|
|
3
3
|
import { AbstractExtension } from './AbstractExtension.js';
|
|
4
4
|
import { IExtensionManager } from './IExtensionManger.js';
|
|
5
|
+
export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;
|
|
5
6
|
export declare class ResizeExtension extends AbstractExtension {
|
|
6
7
|
private resizeAllSelected;
|
|
7
8
|
private _initialSizes;
|
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
import { EventNames } from '../../../../enums/EventNames.js';
|
|
2
2
|
import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
|
|
3
3
|
import { roundValue } from '../../../helper/LayoutHelper.js';
|
|
4
|
-
import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints,
|
|
4
|
+
import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
|
|
5
5
|
import { AbstractExtension } from './AbstractExtension.js';
|
|
6
|
+
export function normalizeToAbsolutePosition(element, normalizeProperty) {
|
|
7
|
+
switch (normalizeProperty) {
|
|
8
|
+
case "left":
|
|
9
|
+
let left = getComputedStyle(element).left;
|
|
10
|
+
element.style.removeProperty('right');
|
|
11
|
+
element.style.left = left;
|
|
12
|
+
return left;
|
|
13
|
+
case "top":
|
|
14
|
+
let top = getComputedStyle(element).top;
|
|
15
|
+
element.style.removeProperty('bottom');
|
|
16
|
+
element.style.top = top;
|
|
17
|
+
return top;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
6
20
|
//TODO: use PlacementService, size is not always width/height could also be margin etc...
|
|
7
21
|
// also when elment aligned to bottom, will it later also be?
|
|
8
22
|
export class ResizeExtension extends AbstractExtension {
|
package/package.json
CHANGED