@node-projects/web-component-designer 0.0.229 → 0.0.231
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
CHANGED
|
@@ -7,6 +7,8 @@ Meanwhile polymer is not used anymore.
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
There is also a Preview VS-Code Addon using the Designer: https://github.com/node-projects/vs-code-designer-addon
|
|
11
|
+
|
|
10
12
|
## NPM Package
|
|
11
13
|
|
|
12
14
|
https://www.npmjs.com/package/@node-projects/web-component-designer
|
|
@@ -12,7 +12,7 @@ export declare function getElementDisplaytype(element: HTMLElement): ElementDisp
|
|
|
12
12
|
export declare function isEmptyTextNode(node: Node): boolean;
|
|
13
13
|
export declare function getActiveElement(): Element;
|
|
14
14
|
export declare function getParentElementIncludingSlots(element: Element): Element;
|
|
15
|
-
export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any): {
|
|
15
|
+
export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any, zoom: number): {
|
|
16
16
|
offsetLeft: number;
|
|
17
17
|
offsetTop: number;
|
|
18
18
|
};
|
|
@@ -55,7 +55,7 @@ export function getParentElementIncludingSlots(element) {
|
|
|
55
55
|
}
|
|
56
56
|
return element.parentElement;
|
|
57
57
|
}
|
|
58
|
-
export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element) {
|
|
58
|
+
export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom) {
|
|
59
59
|
let offsetLeft = 0;
|
|
60
60
|
let offsetTop = 0;
|
|
61
61
|
while (element) {
|
|
@@ -66,8 +66,8 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
|
|
|
66
66
|
const bcEl = element.getBoundingClientRect();
|
|
67
67
|
const bcPar = element.parentElement.getBoundingClientRect();
|
|
68
68
|
element.style.transform = t;
|
|
69
|
-
offsetLeft += bcEl.left - bcPar.left;
|
|
70
|
-
offsetTop += bcEl.top - bcPar.top;
|
|
69
|
+
offsetLeft += (bcEl.left - bcPar.left) / zoom;
|
|
70
|
+
offsetTop += (bcEl.top - bcPar.top) / zoom;
|
|
71
71
|
element = element.parentElement;
|
|
72
72
|
}
|
|
73
73
|
else if (element instanceof SVGGraphicsElement) {
|
|
@@ -88,7 +88,7 @@ export function addVectors(vectorA, vectorB) {
|
|
|
88
88
|
}
|
|
89
89
|
export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element, designerCanvas) {
|
|
90
90
|
const top0 = new DOMPointReadOnly(-parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]), 0, 0);
|
|
91
|
-
const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
|
|
91
|
+
const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor);
|
|
92
92
|
const transformOriginAbsolutRelatedToWindowWithoutAnyTransformation = new DOMPoint(p0Offsets.offsetLeft - top0.x, p0Offsets.offsetTop - top0.y);
|
|
93
93
|
const designerCanvasNormalizedTransformedOrigin = new DOMPoint(transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.x - designerCanvas.containerBoundingRect.x, transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.y - designerCanvas.containerBoundingRect.y);
|
|
94
94
|
return designerCanvasNormalizedTransformedOrigin;
|
|
@@ -120,7 +120,7 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
|
|
|
120
120
|
let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };
|
|
121
121
|
while (actualElement != canvas) {
|
|
122
122
|
const parentElement = getParentElementIncludingSlots(actualElement);
|
|
123
|
-
const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
|
|
123
|
+
const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
|
|
124
124
|
if (actualElement == element) {
|
|
125
125
|
parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
|
|
126
126
|
parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
|
|
@@ -155,7 +155,7 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
|
|
|
155
155
|
const bottomleft = 2;
|
|
156
156
|
const bottomright = 3;
|
|
157
157
|
const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
|
|
158
|
-
const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
|
|
158
|
+
const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor);
|
|
159
159
|
const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
|
|
160
160
|
x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
|
|
161
161
|
y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
|
|
@@ -184,7 +184,7 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
|
|
|
184
184
|
z: 0,
|
|
185
185
|
w: 0
|
|
186
186
|
});
|
|
187
|
-
const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetTop - designerCanvas.outerRect.top + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
|
|
187
|
+
const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).offsetTop - designerCanvas.outerRect.top + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
|
|
188
188
|
let top0 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topleft].y));
|
|
189
189
|
let top1 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topright].y));
|
|
190
190
|
let top2 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomleft].y));
|
|
@@ -2,6 +2,7 @@ import { DomConverter } from '../../widgets/designerView/DomConverter.js';
|
|
|
2
2
|
import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
|
|
3
3
|
import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
|
|
4
4
|
import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
|
|
5
|
+
import { straightenLine } from '../../helper/PathDataPolyfill.js';
|
|
5
6
|
export class DefaultPlacementService {
|
|
6
7
|
serviceForContainer(container, containerStyle) {
|
|
7
8
|
if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
|
|
@@ -90,6 +91,9 @@ export class DefaultPlacementService {
|
|
|
90
91
|
//TODO:, this should revert all undo actions while active
|
|
91
92
|
//maybe a undo actions returns itself or an id so it could be changed?
|
|
92
93
|
let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
|
|
94
|
+
if (event.shiftKey) {
|
|
95
|
+
track = straightenLine({ x: 0, y: 0 }, track);
|
|
96
|
+
}
|
|
93
97
|
let filteredItems = filterChildPlaceItems(items);
|
|
94
98
|
for (const designItem of filteredItems) {
|
|
95
99
|
const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');
|