@node-projects/web-component-designer 0.1.87 → 0.1.89
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/images/layout/AlignBot.svg +15 -0
- package/assets/images/layout/AlignCenter.svg +13 -0
- package/assets/images/layout/AlignCenterHorizontal.svg +13 -0
- package/assets/images/layout/AlignLeft.svg +13 -0
- package/assets/images/layout/AlignRight.svg +15 -0
- package/assets/images/layout/AlignTop.svg +13 -0
- package/assets/images/layout/BringOneToBack.svg +10 -0
- package/assets/images/layout/BringOneToFront.svg +10 -0
- package/assets/images/layout/BringToBack.svg +13 -0
- package/assets/images/layout/BringToFront.svg +13 -0
- package/dist/elements/helper/TouchGesturehelper.d.ts +17 -0
- package/dist/elements/helper/TouchGesturehelper.js +89 -0
- package/dist/elements/widgets/designerView/designerCanvas.d.ts +2 -1
- package/dist/elements/widgets/designerView/designerCanvas.js +16 -1
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.d.ts +1 -0
- package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +86 -72
- package/dist/elements/widgets/designerView/tools/PointerTool.js +3 -3
- package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js +2 -2
- package/dist/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js +5 -5
- package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js +1 -1
- package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js +2 -2
- package/dist/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js +1 -1
- package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js +1 -1
- package/dist/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js +1 -1
- package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.js +5 -5
- package/dist/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.js +2 -2
- package/package.json +1 -1
- package/dist/elements/services/propertiesService/app.d.ts +0 -2
- package/dist/elements/services/propertiesService/app.js +0 -71
- package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.d.ts +0 -6
- package/dist/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup copy.js +0 -102
- /package/assets/images/{layout → tools}/ColorPickerTool.svg +0 -0
- /package/assets/images/{layout → tools}/DrawEllipTool.svg +0 -0
- /package/assets/images/{layout → tools}/DrawLineTool.svg +0 -0
- /package/assets/images/{layout → tools}/DrawPathTool.svg +0 -0
- /package/assets/images/{layout → tools}/DrawRectTool.svg +0 -0
- /package/assets/images/{layout → tools}/MagicWandTool.svg +0 -0
- /package/assets/images/{layout → tools}/PointerTool.svg +0 -0
- /package/assets/images/{layout → tools}/SelectRectTool.svg +0 -0
- /package/assets/images/{layout → tools}/TextBoxTool.svg +0 -0
- /package/assets/images/{layout → tools}/TextTool.svg +0 -0
- /package/assets/images/{layout → tools}/TransformTool.svg +0 -0
- /package/assets/images/{layout → tools}/ZoomTool.svg +0 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(1,0,0,-1,0,100)">
|
|
5
|
+
<g transform="matrix(-4.45326e-17,0.727273,1,6.12323e-17,5.03233e-16,-1.42109e-14)">
|
|
6
|
+
<rect x="0" y="0" width="11" height="100"/>
|
|
7
|
+
</g>
|
|
8
|
+
<g transform="matrix(-8.27464e-17,-1.35135,-1.55556,9.52503e-17,188.667,118.919)">
|
|
9
|
+
<path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
10
|
+
</g>
|
|
11
|
+
<g transform="matrix(-4.13732e-17,-0.675676,-1.55556,9.52503e-17,144.667,59.4595)">
|
|
12
|
+
<path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(-0.727273,0,0,1,54,0)">
|
|
5
|
+
<rect x="0" y="0" width="11" height="100"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(-1.35135,0,0,1.55556,118.919,-44.6667)">
|
|
8
|
+
<path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(-0.675676,0,0,1.55556,84.4595,-88.6667)">
|
|
11
|
+
<path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(-4.45326e-17,0.727273,1,6.12323e-17,3.30655e-15,46)">
|
|
5
|
+
<rect x="0" y="0" width="11" height="100"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(-8.27464e-17,-1.35135,-1.55556,9.52503e-17,188.667,118.919)">
|
|
8
|
+
<path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(-4.13732e-17,-0.675676,-1.55556,9.52503e-17,144.667,84.4595)">
|
|
11
|
+
<path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(0.727273,0,0,1,0,0)">
|
|
5
|
+
<rect x="0" y="0" width="11" height="100"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(1.35135,0,0,1.55556,-18.9189,-44.6667)">
|
|
8
|
+
<path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(0.675676,0,0,1.55556,-9.45946,-88.6667)">
|
|
11
|
+
<path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(-1,0,0,1,100,0)">
|
|
5
|
+
<g transform="matrix(0.727273,0,0,1,0,0)">
|
|
6
|
+
<rect x="0" y="0" width="11" height="100"/>
|
|
7
|
+
</g>
|
|
8
|
+
<g transform="matrix(1.35135,0,0,1.55556,-18.9189,-44.6667)">
|
|
9
|
+
<path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
10
|
+
</g>
|
|
11
|
+
<g transform="matrix(0.675676,0,0,1.55556,-9.45946,-88.6667)">
|
|
12
|
+
<path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(-4.45326e-17,0.727273,1,6.12323e-17,5.03233e-16,-1.42109e-14)">
|
|
5
|
+
<rect x="0" y="0" width="11" height="100"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(-8.27464e-17,-1.35135,-1.55556,9.52503e-17,188.667,118.919)">
|
|
8
|
+
<path d="M88,70.5C88,68.016 85.679,66 82.82,66L19.18,66C16.321,66 14,68.016 14,70.5L14,79.5C14,81.984 16.321,84 19.18,84L82.82,84C85.679,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(-4.13732e-17,-0.675676,-1.55556,9.52503e-17,144.667,59.4595)">
|
|
11
|
+
<path d="M88,70.5C88,68.016 83.358,66 77.64,66L24.36,66C18.642,66 14,68.016 14,70.5L14,79.5C14,81.984 18.642,84 24.36,84L77.64,84C83.358,84 88,81.984 88,79.5L88,70.5Z"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
4
|
+
<g transform="matrix(1.36364,0,0,1.36364,-6.63636,1.54545)">
|
|
5
|
+
<rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(1.36364,0,0,1.36364,-40.6364,-32.4545)">
|
|
8
|
+
<rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:4.4px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
4
|
+
<g transform="matrix(1.36364,0,0,1.36364,-40.6364,-32.4545)">
|
|
5
|
+
<rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:4.4px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(1.36364,0,0,1.36364,-6.63636,1.54545)">
|
|
8
|
+
<rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
4
|
+
<g transform="matrix(1.36364,0,0,1.36364,-23.6364,-15.4545)">
|
|
5
|
+
<rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(0.863636,0,0,0.863636,-24.6364,-19.4545)">
|
|
8
|
+
<rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(0.863636,0,0,0.863636,31.3636,36.5455)">
|
|
11
|
+
<rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
3
|
+
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
|
|
4
|
+
<g transform="matrix(0.863636,0,0,0.863636,-24.6364,-19.4545)">
|
|
5
|
+
<rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(0.863636,0,0,0.863636,31.3636,36.5455)">
|
|
8
|
+
<rect x="32" y="26" width="44" height="44" style="fill:rgb(128,128,128);stroke:rgb(128,128,128);stroke-width:6.95px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(1.36364,0,0,1.36364,-23.6364,-15.4545)">
|
|
11
|
+
<rect x="32" y="26" width="44" height="44" style="stroke:black;stroke-width:4.4px;"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare class TouchGestureHelper {
|
|
2
|
+
static addTouchEvents(element: HTMLElement): TouchGestureHelper;
|
|
3
|
+
private constructor();
|
|
4
|
+
private _target;
|
|
5
|
+
private _started;
|
|
6
|
+
private _startX_0;
|
|
7
|
+
private _startY_0;
|
|
8
|
+
private _lastZoom;
|
|
9
|
+
private _lastPanDistanceX;
|
|
10
|
+
private _lastPanDistanceY;
|
|
11
|
+
private _startZoomDistance;
|
|
12
|
+
multitouchEventActive: boolean;
|
|
13
|
+
private _mode;
|
|
14
|
+
_touchStart(e: TouchEvent): void;
|
|
15
|
+
_touchMove(e: TouchEvent): void;
|
|
16
|
+
_touchEnd(e: TouchEvent): void;
|
|
17
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
const panThreshold = 10;
|
|
2
|
+
const zoomThreshold = 10;
|
|
3
|
+
//const rotateThreshold = 0;
|
|
4
|
+
export class TouchGestureHelper {
|
|
5
|
+
static addTouchEvents(element) {
|
|
6
|
+
return new TouchGestureHelper(element);
|
|
7
|
+
}
|
|
8
|
+
constructor(element) {
|
|
9
|
+
this._target = element;
|
|
10
|
+
element.addEventListener('touchstart', (e) => this._touchStart(e));
|
|
11
|
+
element.addEventListener('touchmove', (e) => this._touchMove(e));
|
|
12
|
+
element.addEventListener('touchend', (e) => this._touchEnd(e));
|
|
13
|
+
element.addEventListener('touchcancel', (e) => this._touchEnd(e));
|
|
14
|
+
}
|
|
15
|
+
_target;
|
|
16
|
+
_started;
|
|
17
|
+
_startX_0;
|
|
18
|
+
_startY_0;
|
|
19
|
+
//private _startX_1: number;
|
|
20
|
+
//private _startY_1: number;
|
|
21
|
+
_lastZoom;
|
|
22
|
+
_lastPanDistanceX;
|
|
23
|
+
_lastPanDistanceY;
|
|
24
|
+
_startZoomDistance;
|
|
25
|
+
multitouchEventActive;
|
|
26
|
+
_mode = null;
|
|
27
|
+
_touchStart(e) {
|
|
28
|
+
if (e.touches.length === 2) {
|
|
29
|
+
this.multitouchEventActive = true;
|
|
30
|
+
this._mode = null;
|
|
31
|
+
this._started = true;
|
|
32
|
+
this._startX_0 = e.touches[0].screenX;
|
|
33
|
+
this._startY_0 = e.touches[0].screenY;
|
|
34
|
+
//this._startX_1 = e.touches[1].screenX;
|
|
35
|
+
//this._startY_1 = e.touches[1].screenY;
|
|
36
|
+
this._lastZoom = 0;
|
|
37
|
+
this._lastPanDistanceX = 0;
|
|
38
|
+
this._lastPanDistanceY = 0;
|
|
39
|
+
this._startZoomDistance = Math.hypot(e.touches[0].screenX - e.touches[1].screenX, e.touches[0].screenY - e.touches[1].screenY);
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
this.multitouchEventActive = false;
|
|
43
|
+
this._started = false;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
_touchMove(e) {
|
|
47
|
+
if (e.touches.length !== 2) {
|
|
48
|
+
this.multitouchEventActive = false;
|
|
49
|
+
this._started = false;
|
|
50
|
+
}
|
|
51
|
+
if (this._started) {
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
let newZoomDistance = Math.hypot(e.touches[0].screenX - e.touches[1].screenX, e.touches[0].screenY - e.touches[1].screenY);
|
|
54
|
+
const newPanDistanceX = this._startX_0 - e.touches[0].screenX;
|
|
55
|
+
const newPanDistanceY = this._startY_0 - e.touches[0].screenY;
|
|
56
|
+
const panDiffX = newPanDistanceX - this._lastPanDistanceX;
|
|
57
|
+
const panDiffY = newPanDistanceY - this._lastPanDistanceY;
|
|
58
|
+
this._lastPanDistanceX = newPanDistanceX;
|
|
59
|
+
this._lastPanDistanceY = newPanDistanceY;
|
|
60
|
+
const zoom = newZoomDistance - this._startZoomDistance;
|
|
61
|
+
const zoomDiff = zoom - this._lastZoom;
|
|
62
|
+
this._lastZoom = zoom;
|
|
63
|
+
this._lastZoom;
|
|
64
|
+
if (!this._mode) {
|
|
65
|
+
if (Math.abs(zoom) > zoomThreshold) {
|
|
66
|
+
this._mode = 'zoom';
|
|
67
|
+
}
|
|
68
|
+
if (Math.abs(newPanDistanceX) > panThreshold || Math.abs(newPanDistanceY) > panThreshold) {
|
|
69
|
+
this._mode = 'pan';
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
if (this._mode) {
|
|
73
|
+
if (this._mode == 'zoom') {
|
|
74
|
+
const event = new CustomEvent("zoom", { detail: { factor: zoom, diff: zoomDiff } });
|
|
75
|
+
this._target.dispatchEvent(event);
|
|
76
|
+
}
|
|
77
|
+
else if (this._mode == 'pan') {
|
|
78
|
+
const event = new CustomEvent("pan", { detail: { x: newPanDistanceX, deltaX: panDiffX, y: newPanDistanceY, deltaY: panDiffY } });
|
|
79
|
+
this._target.dispatchEvent(event);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
_touchEnd(e) {
|
|
85
|
+
this.multitouchEventActive = false;
|
|
86
|
+
if (e.touches.length !== 2) {
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -23,7 +23,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
|
|
|
23
23
|
clickOverlay: HTMLDivElement;
|
|
24
24
|
private _activeTool;
|
|
25
25
|
private _gridSize;
|
|
26
|
-
private _moveGroup;
|
|
27
26
|
get gridSize(): number;
|
|
28
27
|
set gridSize(value: number);
|
|
29
28
|
pasteOffset: number;
|
|
@@ -41,6 +40,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
|
|
|
41
40
|
private _currentContextMenu;
|
|
42
41
|
private _backgroundImage;
|
|
43
42
|
private _enableSelectTextNodesOnClick;
|
|
43
|
+
private _moveGroup;
|
|
44
|
+
private _touchGestureHelper;
|
|
44
45
|
get zoomFactor(): number;
|
|
45
46
|
set zoomFactor(value: number);
|
|
46
47
|
get scaleFactor(): number;
|
|
@@ -20,6 +20,7 @@ import { NodeType } from '../../item/NodeType.js';
|
|
|
20
20
|
import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
|
|
21
21
|
import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
|
|
22
22
|
import { filterChildPlaceItems } from '../../helper/LayoutHelper.js';
|
|
23
|
+
import { TouchGestureHelper } from '../../helper/TouchGestureHelper.js';
|
|
23
24
|
export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
24
25
|
// Public Properties
|
|
25
26
|
serviceContainer;
|
|
@@ -30,7 +31,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
30
31
|
_activeTool;
|
|
31
32
|
// IPlacementView
|
|
32
33
|
_gridSize = 10;
|
|
33
|
-
_moveGroup;
|
|
34
34
|
get gridSize() {
|
|
35
35
|
return this._gridSize;
|
|
36
36
|
}
|
|
@@ -67,6 +67,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
67
67
|
_currentContextMenu;
|
|
68
68
|
_backgroundImage;
|
|
69
69
|
_enableSelectTextNodesOnClick = false;
|
|
70
|
+
_moveGroup;
|
|
71
|
+
_touchGestureHelper;
|
|
70
72
|
get zoomFactor() {
|
|
71
73
|
return this._zoomFactor;
|
|
72
74
|
}
|
|
@@ -616,6 +618,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
616
618
|
connectedCallback() {
|
|
617
619
|
if (!this._firstConnect) {
|
|
618
620
|
this._firstConnect = true;
|
|
621
|
+
this._touchGestureHelper = TouchGestureHelper.addTouchEvents(this.clickOverlay);
|
|
619
622
|
this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandler);
|
|
620
623
|
this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandler);
|
|
621
624
|
this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandler);
|
|
@@ -626,6 +629,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
626
629
|
this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown, true);
|
|
627
630
|
this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
|
|
628
631
|
this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
|
|
632
|
+
this.clickOverlay.addEventListener('zoom', (e) => {
|
|
633
|
+
this.zoomFactor = this.zoomFactor + (e.detail.diff / 10);
|
|
634
|
+
});
|
|
635
|
+
this.clickOverlay.addEventListener('pan', (e) => {
|
|
636
|
+
const newCanvasOffset = {
|
|
637
|
+
x: (this.canvasOffset.x) - e.detail.deltaX,
|
|
638
|
+
y: (this.canvasOffset.y) - e.detail.deltaY
|
|
639
|
+
};
|
|
640
|
+
this.canvasOffset = newCanvasOffset;
|
|
641
|
+
});
|
|
629
642
|
}
|
|
630
643
|
this.extensionManager.connected();
|
|
631
644
|
}
|
|
@@ -1020,6 +1033,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
1020
1033
|
_pointerEventHandler(event, forceElement = null) {
|
|
1021
1034
|
if (!this.serviceContainer)
|
|
1022
1035
|
return;
|
|
1036
|
+
if (this._touchGestureHelper.multitouchEventActive)
|
|
1037
|
+
return;
|
|
1023
1038
|
this.fillCalculationrects();
|
|
1024
1039
|
if (this._pointerextensions) {
|
|
1025
1040
|
for (let pe of this._pointerextensions)
|
|
@@ -23,5 +23,6 @@ export declare class ResizeExtension extends AbstractExtension {
|
|
|
23
23
|
refresh(cache: Record<string | symbol, any>, event?: Event): void;
|
|
24
24
|
_drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
|
|
25
25
|
_pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
|
|
26
|
+
private prepareResize;
|
|
26
27
|
dispose(): void;
|
|
27
28
|
}
|
|
@@ -2,6 +2,8 @@ import { EventNames } from '../../../../enums/EventNames.js';
|
|
|
2
2
|
import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
|
|
3
3
|
import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
|
|
4
4
|
import { AbstractExtension } from './AbstractExtension.js';
|
|
5
|
+
//TODO: use PlacementService, size is not always width/height could also be margin etc...
|
|
6
|
+
// also when elment aligned to bottom, will it later also be?
|
|
5
7
|
export class ResizeExtension extends AbstractExtension {
|
|
6
8
|
resizeAllSelected;
|
|
7
9
|
_initialSizes;
|
|
@@ -92,72 +94,13 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
92
94
|
}
|
|
93
95
|
if (this.designerCanvas.alignOnSnap)
|
|
94
96
|
this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
left = getComputedStyle(this.extendedItem.element).left;
|
|
103
|
-
this.extendedItem.element.style.removeProperty('right');
|
|
104
|
-
this.extendedItem.element.style.left = left;
|
|
105
|
-
this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
106
|
-
break;
|
|
107
|
-
case 'se-resize':
|
|
108
|
-
top = getComputedStyle(this.extendedItem.element).top;
|
|
109
|
-
this.extendedItem.element.style.removeProperty('bottom');
|
|
110
|
-
this.extendedItem.element.style.top = top;
|
|
111
|
-
left = getComputedStyle(this.extendedItem.element).left;
|
|
112
|
-
this.extendedItem.element.style.removeProperty('right');
|
|
113
|
-
this.extendedItem.element.style.left = left;
|
|
114
|
-
this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
115
|
-
break;
|
|
116
|
-
case 's-resize':
|
|
117
|
-
top = getComputedStyle(this.extendedItem.element).top;
|
|
118
|
-
this.extendedItem.element.style.removeProperty('bottom');
|
|
119
|
-
this.extendedItem.element.style.top = top;
|
|
120
|
-
this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
121
|
-
break;
|
|
122
|
-
case 'sw-resize':
|
|
123
|
-
top = getComputedStyle(this.extendedItem.element).top;
|
|
124
|
-
this.extendedItem.element.style.removeProperty('bottom');
|
|
125
|
-
this.extendedItem.element.style.top = top;
|
|
126
|
-
right = getComputedStyle(this.extendedItem.element).right;
|
|
127
|
-
this.extendedItem.element.style.removeProperty('left');
|
|
128
|
-
this.extendedItem.element.style.right = right;
|
|
129
|
-
this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
130
|
-
break;
|
|
131
|
-
case 'w-resize':
|
|
132
|
-
right = getComputedStyle(this.extendedItem.element).right;
|
|
133
|
-
this.extendedItem.element.style.removeProperty('left');
|
|
134
|
-
this.extendedItem.element.style.right = right;
|
|
135
|
-
this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
136
|
-
break;
|
|
137
|
-
case 'nw-resize':
|
|
138
|
-
bottom = getComputedStyle(this.extendedItem.element).bottom;
|
|
139
|
-
this.extendedItem.element.style.removeProperty('top');
|
|
140
|
-
this.extendedItem.element.style.bottom = bottom;
|
|
141
|
-
right = getComputedStyle(this.extendedItem.element).right;
|
|
142
|
-
this.extendedItem.element.style.removeProperty('left');
|
|
143
|
-
this.extendedItem.element.style.right = right;
|
|
144
|
-
this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
|
|
145
|
-
break;
|
|
146
|
-
case 'n-resize':
|
|
147
|
-
bottom = getComputedStyle(this.extendedItem.element).bottom;
|
|
148
|
-
this.extendedItem.element.style.removeProperty('top');
|
|
149
|
-
this.extendedItem.element.style.bottom = bottom;
|
|
150
|
-
this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
|
|
151
|
-
break;
|
|
152
|
-
case 'ne-resize':
|
|
153
|
-
bottom = getComputedStyle(this.extendedItem.element).bottom;
|
|
154
|
-
this.extendedItem.element.style.removeProperty('top');
|
|
155
|
-
this.extendedItem.element.style.bottom = bottom;
|
|
156
|
-
left = getComputedStyle(this.extendedItem.element).left;
|
|
157
|
-
this.extendedItem.element.style.removeProperty('right');
|
|
158
|
-
this.extendedItem.element.style.left = left;
|
|
159
|
-
this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
|
|
160
|
-
break;
|
|
97
|
+
this.prepareResize(this.extendedItem, this._actionModeStarted);
|
|
98
|
+
if (this.resizeAllSelected) {
|
|
99
|
+
for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
100
|
+
if (designItem !== this.extendedItem) {
|
|
101
|
+
this.prepareResize(designItem, this._actionModeStarted);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
161
104
|
}
|
|
162
105
|
break;
|
|
163
106
|
case EventNames.PointerMove:
|
|
@@ -227,7 +170,7 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
227
170
|
i++;
|
|
228
171
|
for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
229
172
|
if (designItem !== this.extendedItem) {
|
|
230
|
-
designItem.element.style.width = this._initialSizes[i].width
|
|
173
|
+
designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
|
|
231
174
|
designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
|
|
232
175
|
}
|
|
233
176
|
}
|
|
@@ -240,7 +183,7 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
240
183
|
i++;
|
|
241
184
|
for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
242
185
|
if (designItem !== this.extendedItem) {
|
|
243
|
-
designItem.element.style.width = this._initialSizes[i].width
|
|
186
|
+
designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
|
|
244
187
|
}
|
|
245
188
|
}
|
|
246
189
|
}
|
|
@@ -254,8 +197,8 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
254
197
|
i++;
|
|
255
198
|
for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
256
199
|
if (designItem !== this.extendedItem) {
|
|
257
|
-
designItem.element.style.width = this._initialSizes[i].width
|
|
258
|
-
designItem.element.style.height = this._initialSizes[i].height
|
|
200
|
+
designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
|
|
201
|
+
designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
|
|
259
202
|
}
|
|
260
203
|
}
|
|
261
204
|
}
|
|
@@ -267,7 +210,7 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
267
210
|
i++;
|
|
268
211
|
for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
269
212
|
if (designItem !== this.extendedItem) {
|
|
270
|
-
designItem.element.style.height = this._initialSizes[i].height
|
|
213
|
+
designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
|
|
271
214
|
}
|
|
272
215
|
}
|
|
273
216
|
}
|
|
@@ -282,7 +225,7 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
282
225
|
for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
283
226
|
if (designItem !== this.extendedItem) {
|
|
284
227
|
designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
|
|
285
|
-
designItem.element.style.height = this._initialSizes[i].height
|
|
228
|
+
designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
|
|
286
229
|
}
|
|
287
230
|
}
|
|
288
231
|
}
|
|
@@ -325,6 +268,8 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
325
268
|
if (designItem !== this.extendedItem) {
|
|
326
269
|
designItem.setStyle('width', designItem.element.style.width);
|
|
327
270
|
designItem.setStyle('height', designItem.element.style.height);
|
|
271
|
+
designItem.setStyle('left', normalizeToAbsolutePosition(designItem.element, 'left'));
|
|
272
|
+
designItem.setStyle('top', normalizeToAbsolutePosition(designItem.element, 'top'));
|
|
328
273
|
}
|
|
329
274
|
}
|
|
330
275
|
}
|
|
@@ -334,6 +279,75 @@ export class ResizeExtension extends AbstractExtension {
|
|
|
334
279
|
break;
|
|
335
280
|
}
|
|
336
281
|
}
|
|
282
|
+
prepareResize(designItem, mode) {
|
|
283
|
+
let i = 0;
|
|
284
|
+
let top = null;
|
|
285
|
+
let bottom = null;
|
|
286
|
+
let left = null;
|
|
287
|
+
let right = null;
|
|
288
|
+
switch (this._actionModeStarted) {
|
|
289
|
+
case 'e-resize':
|
|
290
|
+
left = getComputedStyle(designItem.element).left;
|
|
291
|
+
designItem.element.style.removeProperty('right');
|
|
292
|
+
designItem.element.style.left = left;
|
|
293
|
+
designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
294
|
+
break;
|
|
295
|
+
case 'se-resize':
|
|
296
|
+
top = getComputedStyle(designItem.element).top;
|
|
297
|
+
designItem.element.style.removeProperty('bottom');
|
|
298
|
+
designItem.element.style.top = top;
|
|
299
|
+
left = getComputedStyle(designItem.element).left;
|
|
300
|
+
designItem.element.style.removeProperty('right');
|
|
301
|
+
designItem.element.style.left = left;
|
|
302
|
+
designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
303
|
+
break;
|
|
304
|
+
case 's-resize':
|
|
305
|
+
top = getComputedStyle(designItem.element).top;
|
|
306
|
+
designItem.element.style.removeProperty('bottom');
|
|
307
|
+
designItem.element.style.top = top;
|
|
308
|
+
designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
309
|
+
break;
|
|
310
|
+
case 'sw-resize':
|
|
311
|
+
top = getComputedStyle(designItem.element).top;
|
|
312
|
+
designItem.element.style.removeProperty('bottom');
|
|
313
|
+
designItem.element.style.top = top;
|
|
314
|
+
right = getComputedStyle(designItem.element).right;
|
|
315
|
+
designItem.element.style.removeProperty('left');
|
|
316
|
+
designItem.element.style.right = right;
|
|
317
|
+
designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
318
|
+
break;
|
|
319
|
+
case 'w-resize':
|
|
320
|
+
right = getComputedStyle(designItem.element).right;
|
|
321
|
+
designItem.element.style.removeProperty('left');
|
|
322
|
+
designItem.element.style.right = right;
|
|
323
|
+
designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
|
|
324
|
+
break;
|
|
325
|
+
case 'nw-resize':
|
|
326
|
+
bottom = getComputedStyle(designItem.element).bottom;
|
|
327
|
+
designItem.element.style.removeProperty('top');
|
|
328
|
+
designItem.element.style.bottom = bottom;
|
|
329
|
+
right = getComputedStyle(designItem.element).right;
|
|
330
|
+
designItem.element.style.removeProperty('left');
|
|
331
|
+
designItem.element.style.right = right;
|
|
332
|
+
designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
|
|
333
|
+
break;
|
|
334
|
+
case 'n-resize':
|
|
335
|
+
bottom = getComputedStyle(designItem.element).bottom;
|
|
336
|
+
designItem.element.style.removeProperty('top');
|
|
337
|
+
designItem.element.style.bottom = bottom;
|
|
338
|
+
designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
|
|
339
|
+
break;
|
|
340
|
+
case 'ne-resize':
|
|
341
|
+
bottom = getComputedStyle(designItem.element).bottom;
|
|
342
|
+
designItem.element.style.removeProperty('top');
|
|
343
|
+
designItem.element.style.bottom = bottom;
|
|
344
|
+
left = getComputedStyle(designItem.element).left;
|
|
345
|
+
designItem.element.style.removeProperty('right');
|
|
346
|
+
designItem.element.style.left = left;
|
|
347
|
+
designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
|
|
348
|
+
break;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
337
351
|
dispose() {
|
|
338
352
|
this._removeAllOverlays();
|
|
339
353
|
}
|
|
@@ -30,7 +30,7 @@ export class PointerTool {
|
|
|
30
30
|
}
|
|
31
31
|
_showContextMenu(event, designerCanvas) {
|
|
32
32
|
event.preventDefault();
|
|
33
|
-
if (!event.shiftKey) {
|
|
33
|
+
if (!event.ctrlKey && !event.shiftKey) {
|
|
34
34
|
let items = designerCanvas.elementsFromPoint(event.x, event.y);
|
|
35
35
|
for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
|
|
36
36
|
if (items.indexOf(e.element) >= 0) {
|
|
@@ -47,7 +47,7 @@ export class PointerTool {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
pointerEventHandler(designerCanvas, event, currentElement) {
|
|
50
|
-
if (event.ctrlKey)
|
|
50
|
+
if (event.ctrlKey || event.shiftKey)
|
|
51
51
|
this.cursor = 'copy';
|
|
52
52
|
else
|
|
53
53
|
this.cursor = 'default';
|
|
@@ -110,7 +110,7 @@ export class PointerTool {
|
|
|
110
110
|
this._actionType = PointerActionType.Drag;
|
|
111
111
|
}
|
|
112
112
|
else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
|
|
113
|
-
if (!event.shiftKey)
|
|
113
|
+
if (!event.ctrlKey && !event.shiftKey)
|
|
114
114
|
designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
|
|
115
115
|
this._actionType = PointerActionType.DrawSelection;
|
|
116
116
|
}
|
|
@@ -8,7 +8,7 @@ export class RectangleSelectorTool {
|
|
|
8
8
|
activated(serviceContainer) {
|
|
9
9
|
}
|
|
10
10
|
pointerEventHandler(designerCanvas, event, currentElement) {
|
|
11
|
-
if (event.ctrlKey)
|
|
11
|
+
if (event.ctrlKey || event.shiftKey)
|
|
12
12
|
this.cursor = 'copy';
|
|
13
13
|
else if (event.altKey)
|
|
14
14
|
this.cursor = 'default';
|
|
@@ -58,7 +58,7 @@ export class RectangleSelectorTool {
|
|
|
58
58
|
designerCanvas.releaseActiveTool();
|
|
59
59
|
const elements = designerCanvas.rootDesignItem.querySelectorAll('*');
|
|
60
60
|
let inSelectionElements = [];
|
|
61
|
-
if ((event.ctrlKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements)
|
|
61
|
+
if ((event.ctrlKey || event.shiftKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements)
|
|
62
62
|
inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
|
|
63
63
|
let point = designerCanvas.overlayLayer.createPoint();
|
|
64
64
|
for (let e of elements) {
|
|
@@ -4,11 +4,11 @@ import { DrawToolPopup } from "../popups/DrawToolPopup.js";
|
|
|
4
4
|
export class DrawToolButtonProvider {
|
|
5
5
|
provideButton(designerCanvas) {
|
|
6
6
|
const button = new DesignerToolbarButton(designerCanvas, {
|
|
7
|
-
'DrawLine': { icon: assetsPath + 'images/
|
|
8
|
-
'DrawPath': { icon: assetsPath + 'images/
|
|
9
|
-
'DrawRect': { icon: assetsPath + 'images/
|
|
10
|
-
'DrawEllipsis': { icon: assetsPath + 'images/
|
|
11
|
-
'PickColor': { icon: assetsPath + 'images/
|
|
7
|
+
'DrawLine': { icon: assetsPath + 'images/tools/DrawLineTool.svg' },
|
|
8
|
+
'DrawPath': { icon: assetsPath + 'images/tools/DrawPathTool.svg' },
|
|
9
|
+
'DrawRect': { icon: assetsPath + 'images/tools/DrawRectTool.svg' },
|
|
10
|
+
'DrawEllipsis': { icon: assetsPath + 'images/tools/DrawEllipTool.svg' },
|
|
11
|
+
'PickColor': { icon: assetsPath + 'images/tools/ColorPickerTool.svg' }
|
|
12
12
|
});
|
|
13
13
|
button.popup = DrawToolPopup;
|
|
14
14
|
return button;
|
package/dist/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js
CHANGED
|
@@ -2,6 +2,6 @@ import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
|
|
|
2
2
|
import { assetsPath } from "../../../../../../Constants.js";
|
|
3
3
|
export class PointerToolButtonProvider {
|
|
4
4
|
provideButton(designerCanvas) {
|
|
5
|
-
return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/
|
|
5
|
+
return new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/tools/PointerTool.svg' } });
|
|
6
6
|
}
|
|
7
7
|
}
|
package/dist/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js
CHANGED
|
@@ -4,8 +4,8 @@ import { SelectionToolPopup } from "../popups/SelectionToolPopup.js";
|
|
|
4
4
|
export class SelectorToolButtonProvider {
|
|
5
5
|
provideButton(designerCanvas) {
|
|
6
6
|
const button = new DesignerToolbarButton(designerCanvas, {
|
|
7
|
-
'RectangleSelector': { icon: assetsPath + 'images/
|
|
8
|
-
'MagicWandSelector': { icon: assetsPath + 'images/
|
|
7
|
+
'RectangleSelector': { icon: assetsPath + 'images/tools/SelectRectTool.svg' },
|
|
8
|
+
'MagicWandSelector': { icon: assetsPath + 'images/tools/MagicWandTool.svg' }
|
|
9
9
|
});
|
|
10
10
|
button.popup = SelectionToolPopup;
|
|
11
11
|
return button;
|
|
@@ -2,6 +2,6 @@ import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
|
|
|
2
2
|
import { assetsPath } from "../../../../../../Constants.js";
|
|
3
3
|
export class TextToolButtonProvider {
|
|
4
4
|
provideButton(designerCanvas) {
|
|
5
|
-
return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/
|
|
5
|
+
return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/tools/TextTool.svg' } });
|
|
6
6
|
}
|
|
7
7
|
}
|
package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js
CHANGED
|
@@ -3,7 +3,7 @@ import { assetsPath } from "../../../../../../Constants.js";
|
|
|
3
3
|
import { TransformToolPopup } from "../popups/TransformToolPopup.js";
|
|
4
4
|
export class TransformToolButtonProvider {
|
|
5
5
|
provideButton(designerCanvas) {
|
|
6
|
-
const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/
|
|
6
|
+
const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/tools/TransformTool.svg' } });
|
|
7
7
|
button.popup = TransformToolPopup;
|
|
8
8
|
return button;
|
|
9
9
|
}
|
|
@@ -2,6 +2,6 @@ import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
|
|
|
2
2
|
import { assetsPath } from "../../../../../../Constants.js";
|
|
3
3
|
export class ZoomToolButtonProvider {
|
|
4
4
|
provideButton(designerCanvas) {
|
|
5
|
-
return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/
|
|
5
|
+
return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/tools/ZoomTool.svg' } });
|
|
6
6
|
}
|
|
7
7
|
}
|
|
@@ -58,11 +58,11 @@ export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
|
|
|
58
58
|
<header><h2 id="title" style="margin: 0;">Draw</h2></header>
|
|
59
59
|
<main id="content-area">
|
|
60
60
|
<div class="tools">
|
|
61
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/
|
|
62
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/
|
|
63
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/
|
|
64
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/
|
|
65
|
-
<div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/
|
|
61
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/tools/DrawLineTool.svg');"></div>
|
|
62
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/tools/DrawPathTool.svg');"></div>
|
|
63
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/tools/DrawRectTool.svg');"></div>
|
|
64
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/tools/DrawEllipTool.svg');"></div>
|
|
65
|
+
<div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/tools/ColorPickerTool.svg');"></div>
|
|
66
66
|
</div>
|
|
67
67
|
<div class="inputs">
|
|
68
68
|
<div class="input">
|
|
@@ -33,8 +33,8 @@ export class SelectionToolPopup extends BaseCustomWebComponentConstructorAppend
|
|
|
33
33
|
<header><h2 id="title" style="margin: 0;">Selection</h2></header>
|
|
34
34
|
<main id="content-area">
|
|
35
35
|
<div class="tools">
|
|
36
|
-
<div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/
|
|
37
|
-
<div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/
|
|
36
|
+
<div class="tool" data-command="setTool" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/tools/SelectRectTool.svg');"></div>
|
|
37
|
+
<div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/tools/MagicWandTool.svg');"></div>
|
|
38
38
|
</div>
|
|
39
39
|
</main>
|
|
40
40
|
</div>`;
|
package/package.json
CHANGED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
function getProtoProperties(target) {
|
|
3
|
-
// If this is a custom element, you need to go up the prototype
|
|
4
|
-
// chain until you get proper HTMLElement, since everything under it
|
|
5
|
-
// is generated prototypes and will have propeties that are dupes (like:
|
|
6
|
-
// every observedAttribute is also mirrored as a property)
|
|
7
|
-
const isCustomElement = target.tagName.indexOf('-') !== -1;
|
|
8
|
-
let proto = target.__proto__;
|
|
9
|
-
if (isCustomElement) {
|
|
10
|
-
while (proto.constructor !== window.HTMLElement.prototype.constructor) {
|
|
11
|
-
proto = proto.__proto__;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
let protoProps = {};
|
|
15
|
-
// We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
|
|
16
|
-
if (proto.constructor.name === 'HTMLAnchorElement') {
|
|
17
|
-
protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
|
|
18
|
-
protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
|
|
19
|
-
proto = proto.__proto__;
|
|
20
|
-
}
|
|
21
|
-
while (proto.constructor.name !== 'Element') {
|
|
22
|
-
Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
|
|
23
|
-
proto = proto.__proto__;
|
|
24
|
-
}
|
|
25
|
-
let propNames = Object.keys(protoProps).sort();
|
|
26
|
-
// Skip some very specific Polymer/element properties.
|
|
27
|
-
let blacklist = [
|
|
28
|
-
// Polymer specific
|
|
29
|
-
'isAttached',
|
|
30
|
-
'constructor', 'created', 'ready', 'attached', 'detached',
|
|
31
|
-
'attributeChanged', 'is', 'listeners', 'observers', 'properties',
|
|
32
|
-
// Native elements ones we don't care about
|
|
33
|
-
'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
|
|
34
|
-
'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
|
|
35
|
-
'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
|
|
36
|
-
'lowsrc', 'longDesc',
|
|
37
|
-
// Specific elements stuff
|
|
38
|
-
'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
|
|
39
|
-
'selectionDirection', 'selectionStart', 'selectionEnd'
|
|
40
|
-
];
|
|
41
|
-
let i = 0;
|
|
42
|
-
while (i < propNames.length) {
|
|
43
|
-
let name = propNames[i];
|
|
44
|
-
// Skip everything that starts with a _ which is a Polymer private/protected
|
|
45
|
-
// and you probably don't care about it.
|
|
46
|
-
// Also anything in the blacklist. Or that starts with webkit.
|
|
47
|
-
if (name.charAt(0) === '_' ||
|
|
48
|
-
name === 'keyEventTarget' ||
|
|
49
|
-
blacklist.indexOf(name) !== -1 ||
|
|
50
|
-
name.indexOf('webkit') === 0 ||
|
|
51
|
-
name.indexOf('on') === 0) {
|
|
52
|
-
propNames.splice(i, 1);
|
|
53
|
-
continue;
|
|
54
|
-
}
|
|
55
|
-
// Skip everything that doesn't have a setter.
|
|
56
|
-
if (!protoProps[name].set) {
|
|
57
|
-
propNames.splice(i, 1);
|
|
58
|
-
continue;
|
|
59
|
-
}
|
|
60
|
-
i++;
|
|
61
|
-
}
|
|
62
|
-
return propNames || [];
|
|
63
|
-
}
|
|
64
|
-
function getAttributesIfCustomElement(target) {
|
|
65
|
-
if (target.tagName.indexOf('-') !== -1) {
|
|
66
|
-
return target.constructor.observedAttributes;
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
69
|
-
return [];
|
|
70
|
-
}
|
|
71
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
export declare class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
-
static style: CSSStyleSheet;
|
|
4
|
-
static template: HTMLTemplateElement;
|
|
5
|
-
constructor();
|
|
6
|
-
}
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
|
|
2
|
-
import { assetsPath } from "../../../../../../Constants.js";
|
|
3
|
-
export class DrawToolPopup extends BaseCustomWebComponentConstructorAppend {
|
|
4
|
-
static style = css `
|
|
5
|
-
.container {
|
|
6
|
-
width: 220px;
|
|
7
|
-
min-height: 200px;
|
|
8
|
-
color: white;
|
|
9
|
-
background-color: rgb(64, 64, 64);
|
|
10
|
-
border: 1px solid black;
|
|
11
|
-
}
|
|
12
|
-
header {
|
|
13
|
-
text-align: center;
|
|
14
|
-
}
|
|
15
|
-
.tool {
|
|
16
|
-
height: 32px;
|
|
17
|
-
width: 32px;
|
|
18
|
-
background-color: rgb(255, 255, 255);
|
|
19
|
-
background-size: 65%;
|
|
20
|
-
background-repeat: no-repeat;
|
|
21
|
-
background-position: center center;
|
|
22
|
-
flex-shrink: 0;
|
|
23
|
-
border-bottom: 1px solid black;
|
|
24
|
-
}
|
|
25
|
-
.tools {
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-wrap: wrap;
|
|
28
|
-
margin-bottom: 5px;
|
|
29
|
-
}
|
|
30
|
-
.inputs{
|
|
31
|
-
float: left;
|
|
32
|
-
margin-top: 5px;
|
|
33
|
-
align-items: center;
|
|
34
|
-
}
|
|
35
|
-
.input {
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
margin-top: 5px;
|
|
39
|
-
}
|
|
40
|
-
.text {
|
|
41
|
-
margin-left: 5px;
|
|
42
|
-
font-size: 14px;
|
|
43
|
-
}
|
|
44
|
-
.strokecolor{
|
|
45
|
-
float: both;
|
|
46
|
-
}
|
|
47
|
-
.fillbrush{
|
|
48
|
-
float: both;
|
|
49
|
-
}
|
|
50
|
-
.strokethickness{
|
|
51
|
-
float: both;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
`;
|
|
55
|
-
static template = html `
|
|
56
|
-
<div class="container">
|
|
57
|
-
<header><h2 id="title" style="margin: 0;">Draw</h2></header>
|
|
58
|
-
<main id="content-area">
|
|
59
|
-
<div class="tools">
|
|
60
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
|
|
61
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
|
|
62
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
|
|
63
|
-
<div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
|
|
64
|
-
<div class="tool" data-command="setTool" data-command-parameter="PickColor" title="Pick Color" style="background-image: url('${assetsPath}images/layout/ColorPickerTool.svg');"></div>
|
|
65
|
-
</div>
|
|
66
|
-
<div class="inputs">
|
|
67
|
-
<div class="input">
|
|
68
|
-
<input id="strokecolor" class="strokecolor" type="color" title="stroke color" value="#000000" style="padding: 0; width:31px; height:31px;">
|
|
69
|
-
<text class="text">Stroke Color</text>
|
|
70
|
-
</div>
|
|
71
|
-
<div class="input">
|
|
72
|
-
<input id="fillbrush" class="fillbrush" type="color" title="fill brush" value="#ffffff" style="padding: 0; width:31px; height:31px;">
|
|
73
|
-
<text class="text">Fill Brush</text>
|
|
74
|
-
</div>
|
|
75
|
-
<div class="input">
|
|
76
|
-
<input id="strokethickness" class="strokethickness" type="range" title="stroke thickness" min="1" max="20" value="3" style="padding: 0; width:80px; height:20px; margin-right: 5px;">
|
|
77
|
-
<text class="text">Stroke Thickness</text>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
</main>
|
|
81
|
-
</div>`;
|
|
82
|
-
constructor() {
|
|
83
|
-
super();
|
|
84
|
-
for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) {
|
|
85
|
-
let div = e;
|
|
86
|
-
div.onclick = () => this.getRootNode().host.setTool(div.dataset['commandParameter']);
|
|
87
|
-
}
|
|
88
|
-
if (this.shadowRoot.querySelector("input.strokecolor")) {
|
|
89
|
-
let input = this._getDomElement("strokecolor");
|
|
90
|
-
input.onchange = () => this.getRootNode().host.setStrokeColor(input.value);
|
|
91
|
-
}
|
|
92
|
-
if (this.shadowRoot.querySelector("input.fillbrush")) {
|
|
93
|
-
let input = this._getDomElement("fillbrush");
|
|
94
|
-
input.onchange = () => this.getRootNode().host.setFillBrush(input.value);
|
|
95
|
-
}
|
|
96
|
-
if (this.shadowRoot.querySelector("input.strokethickness")) {
|
|
97
|
-
let input = this._getDomElement("strokethickness");
|
|
98
|
-
input.onchange = () => this.getRootNode().host.setStrokeThickness(input.value);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
customElements.define('node-projects-designer-drawtool-popup', DrawToolPopup);
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|