@node-projects/web-component-designer 0.0.94 → 0.0.95
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/ColorPickerTool.svg +21 -0
- package/assets/images/layout/DrawEllipTool.svg +13 -0
- package/assets/images/layout/DrawLineTool.svg +13 -0
- package/assets/images/layout/DrawPathTool.svg +32 -0
- package/assets/images/layout/DrawRectTool.svg +28 -0
- package/assets/images/layout/MagicWandTool.svg +14 -0
- package/assets/images/layout/PointerTool.svg +10 -0
- package/assets/images/layout/SelectRectTool.svg +9 -0
- package/assets/images/layout/TextBoxTool.svg +8 -0
- package/assets/images/layout/TextTool.svg +7 -0
- package/assets/images/layout/ZoomTool.svg +16 -0
- package/dist/Constants.d.ts +1 -1
- package/dist/Constants.js +4 -1
- package/dist/elements/widgets/designerView/designerCanvas.js +3 -1
- package/dist/elements/widgets/designerView/designerView.d.ts +2 -0
- package/dist/elements/widgets/designerView/designerView.js +16 -2
- package/dist/elements/widgets/designerView/tools/NamedTools.d.ts +2 -1
- package/dist/elements/widgets/designerView/tools/NamedTools.js +1 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.d.ts +5 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.js +19 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopup.d.ts +8 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopup.js +37 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopupToolSelect.d.ts +12 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopupToolSelect.js +44 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.d.ts +32 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.js +96 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.d.ts +8 -0
- package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.js +25 -0
- package/dist/elements/widgets/designerView/tools/designerToolsDock.d.ts +23 -0
- package/dist/elements/widgets/designerView/tools/designerToolsDock.js +115 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +42 -42
|
@@ -0,0 +1,21 @@
|
|
|
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.922934,0.922934,-0.922934,0.922934,51.9626,-38.7184)">
|
|
5
|
+
<g transform="matrix(0.785714,0,0,1.39286,10.0714,-33.4286)">
|
|
6
|
+
<path d="M61,31.897C61,27.539 54.727,24 47,24C39.273,24 33,27.539 33,31.897L33,44.103C33,48.461 39.273,52 47,52C54.727,52 61,48.461 61,44.103L61,31.897Z"/>
|
|
7
|
+
</g>
|
|
8
|
+
<g transform="matrix(0.928571,0,0,0.587978,2.42857,-3.92236)">
|
|
9
|
+
<path d="M69,58.75C69,56.128 67.652,54 65.992,54L30.008,54C28.348,54 27,56.128 27,58.75L27,68.25C27,70.872 28.348,73 30.008,73L65.992,73C67.652,73 69,70.872 69,68.25L69,58.75Z"/>
|
|
10
|
+
</g>
|
|
11
|
+
<g transform="matrix(1,0,0,1,-1,-24)">
|
|
12
|
+
<rect x="37" y="68" width="22" height="20"/>
|
|
13
|
+
</g>
|
|
14
|
+
<g transform="matrix(-1.04762,-1.63286e-16,8.74748e-17,-0.909091,99.9048,145.818)">
|
|
15
|
+
<path d="M61,90L40,90L45.25,68L55.75,68L61,90Z"/>
|
|
16
|
+
</g>
|
|
17
|
+
<g transform="matrix(-0.52381,-8.16431e-17,6.99798e-17,-0.727273,73.4524,149.455)">
|
|
18
|
+
<path d="M61,90L40,90L45.25,68L55.75,68L61,90Z"/>
|
|
19
|
+
</g>
|
|
20
|
+
</g>
|
|
21
|
+
</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:square;stroke-miterlimit:2;">
|
|
4
|
+
<path d="M24.465,11.742C31.772,6.852 40.556,4 50,4C75.388,4 96,24.612 96,50C96,59.444 93.148,68.228 88.258,75.535C89.949,77.171 91,79.464 91,82C91,86.967 86.967,91 82,91C79.464,91 77.171,89.949 75.535,88.258C68.228,93.148 59.444,96 50,96C24.612,96 4,75.388 4,50C4,40.556 6.852,31.772 11.742,24.465C10.051,22.829 9,20.536 9,18C9,13.033 13.033,9 18,9C20.536,9 22.829,10.051 24.465,11.742Z" style="fill:none;stroke:black;stroke-width:8px;"/>
|
|
5
|
+
<g>
|
|
6
|
+
<g transform="matrix(0.9,0,0,0.9,-27.9,-30.6)">
|
|
7
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
8
|
+
</g>
|
|
9
|
+
<g transform="matrix(0.9,0,0,0.9,36.1,33.4)">
|
|
10
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
11
|
+
</g>
|
|
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:square;stroke-miterlimit:1;">
|
|
4
|
+
<g transform="matrix(0.983878,-0.0163912,-0.0163912,0.983336,1.61749,1.64445)">
|
|
5
|
+
<path d="M20,19L80,80" style="fill:none;stroke:black;stroke-width:8.27px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(0.9,0,0,0.9,-32.9,-35.6)">
|
|
8
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;stroke-miterlimit:2;"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(0.9,0,0,0.9,41.1,38.4)">
|
|
11
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;stroke-miterlimit:2;"/>
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -0,0 +1,32 @@
|
|
|
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:square;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(0.9,0,0,0.9,-32.9,-35.6)">
|
|
5
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(0.9,0,0,0.9,3.6,1.4)">
|
|
8
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(0.9,0,0,0.9,41.1,-35.6)">
|
|
11
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
12
|
+
</g>
|
|
13
|
+
<g transform="matrix(0.9,0,0,0.9,-32.9,38.4)">
|
|
14
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
15
|
+
</g>
|
|
16
|
+
<g transform="matrix(0.9,0,0,0.9,41.1,38.4)">
|
|
17
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
18
|
+
</g>
|
|
19
|
+
<g transform="matrix(1,0,0,0.933333,1.5,3.33333)">
|
|
20
|
+
<path d="M11.5,20L11.5,80" style="fill:none;stroke:black;stroke-width:8.27px;"/>
|
|
21
|
+
</g>
|
|
22
|
+
<g transform="matrix(0.916667,0,0,1,3.66667,1.5)">
|
|
23
|
+
<path d="M20,11.5L80,11.5" style="fill:none;stroke:black;stroke-width:8.34px;"/>
|
|
24
|
+
</g>
|
|
25
|
+
<path d="M80,20L58.5,41.5" style="fill:none;stroke:black;stroke-width:8px;"/>
|
|
26
|
+
<g transform="matrix(1,0,0,-1,0,100)">
|
|
27
|
+
<path d="M80,20L58.5,41.5" style="fill:none;stroke:black;stroke-width:8px;"/>
|
|
28
|
+
</g>
|
|
29
|
+
<g transform="matrix(0.9,0,0,1,4.5,-1.5)">
|
|
30
|
+
<path d="M80,88.5L20,88.5" style="fill:none;stroke:black;stroke-width:8.41px;"/>
|
|
31
|
+
</g>
|
|
32
|
+
</svg>
|
|
@@ -0,0 +1,28 @@
|
|
|
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:square;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(0.9,0,0,0.9,-32.9,-35.6)">
|
|
5
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(0.9,0,0,0.9,41.1,-35.6)">
|
|
8
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(0.9,0,0,0.9,-32.9,38.4)">
|
|
11
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
12
|
+
</g>
|
|
13
|
+
<g transform="matrix(0.9,0,0,0.9,41.1,38.4)">
|
|
14
|
+
<circle cx="51" cy="54" r="10" style="fill:none;stroke:black;stroke-width:8.89px;"/>
|
|
15
|
+
</g>
|
|
16
|
+
<g transform="matrix(1,0,0,0.933333,1.5,3.33333)">
|
|
17
|
+
<path d="M11.5,20L11.5,80" style="fill:none;stroke:black;stroke-width:8.27px;"/>
|
|
18
|
+
</g>
|
|
19
|
+
<g transform="matrix(0.933333,0,0,1,3.33333,1)">
|
|
20
|
+
<path d="M20,11.5L80,11.5" style="fill:none;stroke:black;stroke-width:8.27px;"/>
|
|
21
|
+
</g>
|
|
22
|
+
<g transform="matrix(1,0,0,0.9,-1.5,4)">
|
|
23
|
+
<path d="M88.5,20L88.5,80" style="fill:none;stroke:black;stroke-width:8.41px;"/>
|
|
24
|
+
</g>
|
|
25
|
+
<g transform="matrix(0.9,0,0,1,5,-1.5)">
|
|
26
|
+
<path d="M80,88.5L20,88.5" style="fill:none;stroke:black;stroke-width:8.41px;"/>
|
|
27
|
+
</g>
|
|
28
|
+
</svg>
|
|
@@ -0,0 +1,14 @@
|
|
|
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
|
+
<path d="M98.316,17.954C100.561,15.709 100.561,12.064 98.316,9.819L90.181,1.684C87.936,-0.561 84.291,-0.561 82.046,1.684L1.684,82.046C-0.561,84.291 -0.561,87.936 1.684,90.181L9.819,98.316C12.064,100.561 15.709,100.561 17.954,98.316L98.316,17.954ZM85.529,6.961L68.285,24.205L75.795,31.715L93.039,14.471L85.529,6.961Z"/>
|
|
5
|
+
<g transform="matrix(1,0,0,1,-10,7.61803)">
|
|
6
|
+
<path d="M30,9L33.811,15.755L41.413,17.292L36.166,23.004L37.053,30.708L30,27.484L22.947,30.708L23.834,23.004L18.587,17.292L26.189,15.755L30,9Z"/>
|
|
7
|
+
</g>
|
|
8
|
+
<g transform="matrix(0.725528,0,0,0.725528,25.9405,-3.51006)">
|
|
9
|
+
<path d="M30,9L33.811,15.755L41.413,17.292L36.166,23.004L37.053,30.708L30,27.484L22.947,30.708L23.834,23.004L18.587,17.292L26.189,15.755L30,9Z"/>
|
|
10
|
+
</g>
|
|
11
|
+
<g transform="matrix(1.16667,0,0,1.16667,36.8254,49.5)">
|
|
12
|
+
<path d="M30,9L33.811,15.755L41.413,17.292L36.166,23.004L37.053,30.708L30,27.484L22.947,30.708L23.834,23.004L18.587,17.292L26.189,15.755L30,9Z"/>
|
|
13
|
+
</g>
|
|
14
|
+
</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-linejoin:round;stroke-miterlimit:2;">
|
|
4
|
+
<g transform="matrix(-1,0,0,1,100.188,0)">
|
|
5
|
+
<g transform="matrix(1.45711,1.45711,-1.42796,1.42796,66.0203,-102.988)">
|
|
6
|
+
<rect x="44" y="66" width="6" height="25"/>
|
|
7
|
+
</g>
|
|
8
|
+
<path d="M0.188,45.899L100,-0L54.101,99.812L0.188,45.899L54.101,99.812L40.259,59.741L0.188,45.899Z"/>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="500px" height="500px" viewBox="0 0 500 500" 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:square;stroke-miterlimit:2;">
|
|
2
|
+
|
|
3
|
+
<g>
|
|
4
|
+
<title>Layer 1</title>
|
|
5
|
+
<rect x="60.796" y="59.225" width="380" height="380" stroke-dasharray="80" style="stroke-linecap: round; stroke-miterlimit: 6; stroke-linejoin: round; fill: none; stroke: rgb(0, 0, 0); stroke-width: 50px;"></rect>
|
|
6
|
+
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 50px;" cx="61.059" cy="58.963" rx="45" ry="45"></ellipse>
|
|
7
|
+
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 50px;" cx="441.823" cy="440.776" rx="45" ry="45"></ellipse>
|
|
8
|
+
</g>
|
|
9
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
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.30609,0,0,1.16182,-13.4108,-11.5193)">
|
|
5
|
+
<text x="15px" y="89px" style="font-family:'TimesNewRomanPSMT', 'Times New Roman', serif;font-size:108.892px;">T</text>
|
|
6
|
+
</g>
|
|
7
|
+
<rect x="0" y="0" width="100" height="100" style="fill:none;stroke:black;stroke-width:8px;"/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
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.30609,0,0,1.356,-20.7025,-20.6838)">
|
|
5
|
+
<text x="15px" y="89px" style="font-family:'TimesNewRomanPSMT', 'Times New Roman', serif;font-size:108.892px;">A</text>
|
|
6
|
+
</g>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1,16 @@
|
|
|
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(2.625,0,0,2.625,-38,-90.5)">
|
|
5
|
+
<circle cx="28" cy="48" r="12" style="fill:none;stroke:black;stroke-width:3.05px;"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g transform="matrix(0.69,-0.31,-0.31,0.69,58,58)">
|
|
8
|
+
<path d="M100,100L0,0" style="fill:none;stroke:black;stroke-width:21.05px;"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g transform="matrix(1,0,0,0.763158,0,7.26316)">
|
|
11
|
+
<path d="M35.5,18L35.5,56" style="fill:none;stroke:black;stroke-width:8.99px;"/>
|
|
12
|
+
</g>
|
|
13
|
+
<g transform="matrix(6.12323e-17,1,-0.763158,4.67299e-17,63.7368,4.4474e-16)">
|
|
14
|
+
<path d="M35.5,18L35.5,56" style="fill:none;stroke:black;stroke-width:8.99px;"/>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>
|
package/dist/Constants.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
|
|
2
2
|
export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
|
|
3
|
-
export declare
|
|
3
|
+
export declare var assetsPath: string;
|
package/dist/Constants.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
|
|
2
2
|
export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
|
|
3
|
-
export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
|
|
3
|
+
//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
|
|
4
|
+
let imporUrl = new URL((import.meta.url));
|
|
5
|
+
export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';
|
|
6
|
+
console.log("aasetPath", assetsPath);
|
|
@@ -345,7 +345,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
345
345
|
this.extensionManager = new ExtensionManager(this);
|
|
346
346
|
this.overlayLayer = new OverlayLayerView(serviceContainer);
|
|
347
347
|
this.overlayLayer.style.pointerEvents = 'none';
|
|
348
|
-
this.
|
|
348
|
+
this.clickOverlay.appendChild(this.overlayLayer);
|
|
349
349
|
this.snapLines = new Snaplines(this.overlayLayer);
|
|
350
350
|
this.snapLines.initialize(this.rootDesignItem);
|
|
351
351
|
if (this.serviceContainer.designerPointerExtensions)
|
|
@@ -393,6 +393,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
|
|
|
393
393
|
this._scaleFactor = this._zoomFactor;
|
|
394
394
|
this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + (isNaN(this._canvasOffset.x) ? '0' : this._canvasOffset.x) + 'px, ' + (isNaN(this._canvasOffset.y) ? '0' : this._canvasOffset.y) + 'px)';
|
|
395
395
|
this._canvasContainer.style.transformOrigin = '0 0';
|
|
396
|
+
this.overlayLayer.style.transform = this._canvasContainer.style.transform;
|
|
397
|
+
this.overlayLayer.style.transformOrigin = '0 0';
|
|
396
398
|
this.snapLines.clearSnaplines();
|
|
397
399
|
}
|
|
398
400
|
setDesignItems(designItems) {
|
|
@@ -17,9 +17,11 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
|
|
|
17
17
|
get designerCanvas(): DesignerCanvas;
|
|
18
18
|
private _zoomInput;
|
|
19
19
|
private _lowertoolbar;
|
|
20
|
+
private _tooldock;
|
|
20
21
|
static readonly style: CSSStyleSheet;
|
|
21
22
|
static readonly template: HTMLTemplateElement;
|
|
22
23
|
constructor();
|
|
24
|
+
ready(): Promise<void>;
|
|
23
25
|
zoomReset(): void;
|
|
24
26
|
zoomToFit(): void;
|
|
25
27
|
private _onScrollbar;
|
|
@@ -25,6 +25,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
25
25
|
}
|
|
26
26
|
_zoomInput;
|
|
27
27
|
_lowertoolbar;
|
|
28
|
+
_tooldock;
|
|
28
29
|
static style = css `
|
|
29
30
|
:host {
|
|
30
31
|
display: block;
|
|
@@ -77,9 +78,16 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
77
78
|
height: 100%;
|
|
78
79
|
}
|
|
79
80
|
#canvas {
|
|
80
|
-
|
|
81
|
+
left: 36px;
|
|
82
|
+
width: calc(100% - 52px);
|
|
81
83
|
height: calc(100% - 32px);
|
|
82
84
|
}
|
|
85
|
+
|
|
86
|
+
#tool-bar{
|
|
87
|
+
width: 36px;
|
|
88
|
+
height: calc(100% - 32px);
|
|
89
|
+
position: absolute;
|
|
90
|
+
}
|
|
83
91
|
|
|
84
92
|
.zoom-in {
|
|
85
93
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAn9JREFUeNqkU11o01AUTtI06U/6tzHWbnNVS+k67FAG/gwfZEOcCrpNEBwEH2Q+Otqxh+5VEaHYV18UwQd9sk4Q+6CUKogbtSoM10qftJS2iGuT/iRpshvvDZu4DHHggY+TnHu+795zz7m4qqrYxfA6pjerlcHMZvMQQRCL8Hccoh+iBJECAMQEQci3Wk2MxP5iqgqmJUmIB3xkdTRoKgQG6Wr1JxBX1oTQx3UxCdcjMO2ZJiCK4g4y3HUIACV+bsL5dSRAWfwe636z0WBzWEFzn5vku5xyIZGsx2UF5AhEaDYbO8Dz3KLPi1X9B2iTy0pRiDx5/Z2bJgmGwDH8WMhuDxzEf6A8TYDneT3GR4JMzcVQThNlcCtANaM48pICutodxXTkkI1HeVslSPor6B/wWL7B3Z1n2KR3O3h05rkDOkd2eYoSxM025PVrAgAQeoFSuSLI3Q66jpJNRsIWPLvM5JJTTUkGGsqVtgJ5JU3AaLTqBVKZT9xh7yDT2Gh05G4bNQBzGETkBbkMVAxbzdadMJbSBDzCHXgKgKGZQJCp0IP32dnEaKhd6nOZAay7mXk6UUGeIHDDh88NKb0qumjaHiN391/1GjtrJ6ZPSb33H9eJYomuTJ601Qf7SKVYVlqplZblxRvOThrtEaC28qSOPAwncCYSWbzJsrO3XP4br9KZa1fTmcaOSTQYLDFFaeURh/yDfLynp/fCwkI0yrKX79ZqG49sUr2A44a3u+d08/fXVhfAeZ8vcDocjs6z7KV7xeL3JzBcwPZgmoAkScGlpdvzc3NXHuZyXxIwlMX2aJoAfFkvx8aGnRzH5WEpr7cXuerKPwVw1Lb/sV8CDACbf0U37X3NqwAAAABJRU5ErkJggg==);
|
|
@@ -120,7 +128,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
120
128
|
static template = html `
|
|
121
129
|
<div id="outer">
|
|
122
130
|
<node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
|
|
123
|
-
<node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll"
|
|
131
|
+
<node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
|
|
132
|
+
</node-projects-plain-scrollbar>
|
|
133
|
+
<node-projects-designer-tools-dock id="tool-bar" class="tool-bar"></node-projects-designer-tools-dock>
|
|
124
134
|
<div class="bottom-right"></div>
|
|
125
135
|
<div id="lowertoolbar">
|
|
126
136
|
<input id="zoomInput" type="text" value="100%">
|
|
@@ -199,6 +209,10 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
|
|
|
199
209
|
this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
|
|
200
210
|
this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
|
|
201
211
|
}
|
|
212
|
+
async ready() {
|
|
213
|
+
this._tooldock = await this._getDomElement('tool-bar');
|
|
214
|
+
this._tooldock.initialize(this.serviceContainer, this);
|
|
215
|
+
}
|
|
202
216
|
zoomReset() {
|
|
203
217
|
this._designerCanvas.canvasOffset = { x: 0, y: 0 };
|
|
204
218
|
this._designerCanvas.zoomFactor = 1;
|
package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ToolPopupCategoryCollection } from "./designerToolsButtons";
|
|
2
|
+
export declare abstract class DesignerToolRenderer {
|
|
3
|
+
static createToolFromObject(tool: ToolPopupCategoryCollection): ChildNode;
|
|
4
|
+
static createObjectFromTool(tool: HTMLDivElement): ToolPopupCategoryCollection;
|
|
5
|
+
}
|
package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolRenderer.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//TODO: rename, this is no renderer, it's a static class so more a helper
|
|
2
|
+
export class DesignerToolRenderer {
|
|
3
|
+
static createToolFromObject(tool) {
|
|
4
|
+
let template = document.createElement('template');
|
|
5
|
+
template.innerHTML = "<div class='tool' data-command='setTool' data-command-parameter=" + tool.command_parameter + " popup=" + tool.category + " title=" + tool.title + " style='background-image:" + tool.background_url + ";'></div>";
|
|
6
|
+
return template.content.childNodes[0];
|
|
7
|
+
}
|
|
8
|
+
static createObjectFromTool(tool) {
|
|
9
|
+
let collector = {
|
|
10
|
+
category: tool.getAttribute("popup"),
|
|
11
|
+
command: tool.getAttribute("data-command"),
|
|
12
|
+
command_parameter: tool.getAttribute("data-command-parameter"),
|
|
13
|
+
title: tool.getAttribute("title"),
|
|
14
|
+
tool: tool.getAttribute("data-command-parameter"),
|
|
15
|
+
background_url: tool.style.backgroundImage,
|
|
16
|
+
};
|
|
17
|
+
return collector;
|
|
18
|
+
}
|
|
19
|
+
}
|
package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopup.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
export declare abstract class DesignerToolbarPopup extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
+
static readonly style: CSSStyleSheet;
|
|
4
|
+
static readonly template: HTMLTemplateElement;
|
|
5
|
+
ready(): void;
|
|
6
|
+
protected _setTitle(title: string): void;
|
|
7
|
+
protected _setContent(elements: HTMLElement[]): void;
|
|
8
|
+
}
|
package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopup.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
export class DesignerToolbarPopup extends BaseCustomWebComponentConstructorAppend {
|
|
3
|
+
static style = css `
|
|
4
|
+
.container {
|
|
5
|
+
width: 150px;
|
|
6
|
+
min-height: 200px;
|
|
7
|
+
color: white;
|
|
8
|
+
background-color: rgb(64, 64, 64);
|
|
9
|
+
border: 1px solid black;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
header {
|
|
13
|
+
text-align: center;
|
|
14
|
+
}
|
|
15
|
+
`;
|
|
16
|
+
static template = html `
|
|
17
|
+
<div class="container">
|
|
18
|
+
<header><h2 id="title" style="margin: 0;"></h2></header>
|
|
19
|
+
<main id="content-area"></main>
|
|
20
|
+
</div>
|
|
21
|
+
`;
|
|
22
|
+
//TODO: remove this class,
|
|
23
|
+
// i think the popups need no base, okay if they need one the should at least be normal elmeents
|
|
24
|
+
// and also the expicit popup should set the size, not the base class. maybe one needs to be bigger, one smaller...
|
|
25
|
+
ready() {
|
|
26
|
+
this._setTitle(this.getAttribute("title"));
|
|
27
|
+
}
|
|
28
|
+
_setTitle(title) {
|
|
29
|
+
this._getDomElement("title").innerHTML = title;
|
|
30
|
+
}
|
|
31
|
+
_setContent(elements) {
|
|
32
|
+
let contentArea = this._getDomElement("content-area");
|
|
33
|
+
for (let elem of elements) {
|
|
34
|
+
contentArea.appendChild(elem);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { ToolPopupCategoryCollection } from "./designerToolsButtons";
|
|
3
|
+
export declare class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
|
|
4
|
+
static readonly style: CSSStyleSheet;
|
|
5
|
+
static readonly template: HTMLTemplateElement;
|
|
6
|
+
private _popupToolSelected;
|
|
7
|
+
constructor();
|
|
8
|
+
readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
|
|
9
|
+
insertToolContent(template: HTMLTemplateElement): Promise<void>;
|
|
10
|
+
private _setupEventHandler;
|
|
11
|
+
private _toolSelected;
|
|
12
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { DesignerToolRenderer } from "./designerToolRenderer";
|
|
3
|
+
export class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
|
|
4
|
+
static style = css `
|
|
5
|
+
.popup-tool-select {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tool {
|
|
11
|
+
height: 32px;
|
|
12
|
+
width: 32px;
|
|
13
|
+
background-color: rgb(255, 255, 255);
|
|
14
|
+
background-size: 65%;
|
|
15
|
+
background-repeat: no-repeat;
|
|
16
|
+
background-position: center center;
|
|
17
|
+
flex-shrink: 0;
|
|
18
|
+
border-bottom: 1px solid black;
|
|
19
|
+
}`;
|
|
20
|
+
static template = html `
|
|
21
|
+
<div id="popup-tool-select" class="popup-tool-select"></div>`;
|
|
22
|
+
_popupToolSelected;
|
|
23
|
+
//TODO: remove this element. it only contains a div, and binds events.
|
|
24
|
+
// this could also be done by the user of this
|
|
25
|
+
constructor() {
|
|
26
|
+
super();
|
|
27
|
+
this._popupToolSelected = this._getDomElement("popup-tool-select");
|
|
28
|
+
}
|
|
29
|
+
toolActivated = new TypedEvent();
|
|
30
|
+
async insertToolContent(template) {
|
|
31
|
+
this._popupToolSelected.appendChild(template.content.cloneNode(true));
|
|
32
|
+
await this._waitForChildrenReady();
|
|
33
|
+
this._setupEventHandler();
|
|
34
|
+
}
|
|
35
|
+
_setupEventHandler() {
|
|
36
|
+
for (let tool of [...this._popupToolSelected.querySelectorAll("div.tool")]) {
|
|
37
|
+
tool.addEventListener("click", () => this._toolSelected(tool));
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
_toolSelected(tool) {
|
|
41
|
+
this.toolActivated.emit(DesignerToolRenderer.createObjectFromTool(tool));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
customElements.define('node-projects-designer-tools-popup-select', DesignerToolbarPopupToolSelect);
|
package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { NamedTools } from "../NamedTools.js";
|
|
3
|
+
export interface ToolTypeAsArg {
|
|
4
|
+
command_parameter: string;
|
|
5
|
+
open_popup?: boolean;
|
|
6
|
+
popup_category?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface ToolPopupCategoryCollection {
|
|
9
|
+
category: string;
|
|
10
|
+
command: string;
|
|
11
|
+
command_parameter: string;
|
|
12
|
+
title: string;
|
|
13
|
+
tool: NamedTools;
|
|
14
|
+
background_url: string;
|
|
15
|
+
}
|
|
16
|
+
export declare class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
|
|
17
|
+
static readonly style: CSSStyleSheet;
|
|
18
|
+
static readonly template: HTMLTemplateElement;
|
|
19
|
+
readonly toolActivated: TypedEvent<[ToolPopupCategoryCollection, boolean]>;
|
|
20
|
+
private _toolButtons;
|
|
21
|
+
private _toolCollection;
|
|
22
|
+
private _toolbarhost;
|
|
23
|
+
ready(): void;
|
|
24
|
+
setToolsExternal(tools: ChildNode[]): void;
|
|
25
|
+
private _initToolCategories;
|
|
26
|
+
private _createToolEventListeners;
|
|
27
|
+
private _toolSelected;
|
|
28
|
+
markToolAsSelected(id: string): void;
|
|
29
|
+
private _unselectTools;
|
|
30
|
+
externalToolChange(command_name: string): void;
|
|
31
|
+
get toolCollection(): ToolPopupCategoryCollection[];
|
|
32
|
+
}
|
package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.js
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { assetsPath } from "../../../../../Constants.js";
|
|
3
|
+
import { NamedTools } from "../NamedTools.js";
|
|
4
|
+
import { DesignerToolRenderer } from "./designerToolRenderer.js";
|
|
5
|
+
export class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
|
|
6
|
+
static style = css `
|
|
7
|
+
.toolbar-host{
|
|
8
|
+
width: calc(100% - 2px);
|
|
9
|
+
height: calc(100% - 2px);
|
|
10
|
+
border: 1px solid black;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
align-items: center;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.tool {
|
|
18
|
+
height: 32px;
|
|
19
|
+
width: 32px;
|
|
20
|
+
background-color: rgb(255, 255, 255);
|
|
21
|
+
background-size: 65%;
|
|
22
|
+
background-repeat: no-repeat;
|
|
23
|
+
background-position: center center;
|
|
24
|
+
flex-shrink: 0;
|
|
25
|
+
border-bottom: 1px solid black;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.tool[selected] {
|
|
29
|
+
background-color: rgb(47, 53, 69);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.tool:hover {
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
static template = html `
|
|
37
|
+
<div id="toolbar-host" class="toolbar-host"></div>`;
|
|
38
|
+
toolActivated = new TypedEvent();
|
|
39
|
+
_toolButtons;
|
|
40
|
+
_toolCollection;
|
|
41
|
+
_toolbarhost;
|
|
42
|
+
ready() {
|
|
43
|
+
this._initToolCategories();
|
|
44
|
+
this._toolbarhost = this._getDomElement("toolbar-host");
|
|
45
|
+
}
|
|
46
|
+
setToolsExternal(tools) {
|
|
47
|
+
for (let tool of tools) {
|
|
48
|
+
this._toolbarhost.appendChild(tool);
|
|
49
|
+
}
|
|
50
|
+
this._createToolEventListeners();
|
|
51
|
+
}
|
|
52
|
+
_initToolCategories() {
|
|
53
|
+
let toolCollection = [];
|
|
54
|
+
toolCollection.push({ tool: NamedTools.Pointer, category: "pointer", command: "setTool", command_parameter: NamedTools.Pointer, title: "Pointer Tool", background_url: "url(" + assetsPath + "images/layout/PointerTool.svg)" });
|
|
55
|
+
toolCollection.push({ tool: NamedTools.MagicWandSelector, category: "selector", command: "setTool", command_parameter: NamedTools.MagicWandSelector, title: "Magic Wand Selector", background_url: "url(" + assetsPath + "images/layout/MagicWandTool.svg)" });
|
|
56
|
+
toolCollection.push({ tool: NamedTools.RectangleSelector, category: "selector", command: "setTool", command_parameter: NamedTools.RectangleSelector, title: "Rectangle Selector", background_url: "url(" + assetsPath + "images/layout/SelectRectTool.svg)" });
|
|
57
|
+
toolCollection.push({ tool: NamedTools.DrawLine, category: "draw", command: "setTool", command_parameter: NamedTools.DrawLine, title: "Draw Line", background_url: "url(" + assetsPath + "images/layout/DrawLineTool.svg)" });
|
|
58
|
+
toolCollection.push({ tool: NamedTools.DrawPath, category: "draw", command: "setTool", command_parameter: NamedTools.DrawPath, title: "Draw Path", background_url: "url(" + assetsPath + "images/layout/DrawPathTool.svg)" });
|
|
59
|
+
toolCollection.push({ tool: NamedTools.DrawRect, category: "draw", command: "setTool", command_parameter: NamedTools.DrawRect, title: "Draw Rectangle", background_url: "url(" + assetsPath + "images/layout/DrawRectTool.svg)" });
|
|
60
|
+
toolCollection.push({ tool: NamedTools.DrawEllipsis, category: "draw", command: "setTool", command_parameter: NamedTools.DrawEllipsis, title: "Draw Ellipsis", background_url: "url(" + assetsPath + "images/layout/DrawEllipTool.svg)" });
|
|
61
|
+
toolCollection.push({ tool: NamedTools.Zoom, category: "zoom", command: "setTool", command_parameter: NamedTools.Zoom, title: "Zoom Tool", background_url: "url(" + assetsPath + "images/layout/ZoomTool.svg)" });
|
|
62
|
+
toolCollection.push({ tool: NamedTools.Text, category: "text", command: "setTool", command_parameter: NamedTools.Text, title: "Text Tool", background_url: "url(" + assetsPath + "images/layout/TextTool.svg)" });
|
|
63
|
+
toolCollection.push({ tool: NamedTools.TextBoc, category: "text", command: "setTool", command_parameter: NamedTools.TextBoc, title: "Textbox Tool", background_url: "url(" + assetsPath + "images/layout/TextBoxTool.svg)" });
|
|
64
|
+
toolCollection.push({ tool: NamedTools.PickColor, category: "pick", command: "setTool", command_parameter: NamedTools.PickColor, title: "Color Picker", background_url: "url(" + assetsPath + "images/layout/ColorPickerTool.svg)" });
|
|
65
|
+
this._toolCollection = toolCollection;
|
|
66
|
+
}
|
|
67
|
+
_createToolEventListeners() {
|
|
68
|
+
this._toolButtons = [...this._toolbarhost.querySelectorAll('div.tool')];
|
|
69
|
+
for (let tool of this._toolButtons) {
|
|
70
|
+
tool.addEventListener("click", () => this._toolSelected(tool, false));
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
_toolSelected(tool, external) {
|
|
74
|
+
this.toolActivated.emit([DesignerToolRenderer.createObjectFromTool(tool), external]);
|
|
75
|
+
}
|
|
76
|
+
markToolAsSelected(id) {
|
|
77
|
+
this._unselectTools();
|
|
78
|
+
let selectedElement = this._toolButtons.find(t => t.getAttribute("data-command-parameter") == id);
|
|
79
|
+
selectedElement?.setAttribute("selected", "");
|
|
80
|
+
}
|
|
81
|
+
_unselectTools() {
|
|
82
|
+
for (let tool of this._toolButtons) {
|
|
83
|
+
tool.removeAttribute("selected");
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
externalToolChange(command_name) {
|
|
87
|
+
let tool = this._toolButtons.find(x => x.getAttribute("data-command-parameter") == command_name);
|
|
88
|
+
if (tool != null) {
|
|
89
|
+
this._toolSelected(tool, true);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
get toolCollection() {
|
|
93
|
+
return this._toolCollection;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
customElements.define('node-projects-designer-tools-buttons', DesignerToolsButtons);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TypedEvent } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
|
|
3
|
+
import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons";
|
|
4
|
+
export declare class DrawToolPopup extends DesignerToolbarPopup {
|
|
5
|
+
private readonly templateToolSelect;
|
|
6
|
+
readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
|
|
7
|
+
ready(): void;
|
|
8
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { assetsPath } from "../../../../../Constants";
|
|
3
|
+
import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
|
|
4
|
+
import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
|
|
5
|
+
export class DrawToolPopup extends DesignerToolbarPopup {
|
|
6
|
+
templateToolSelect = html `
|
|
7
|
+
<div class="tool" data-command="setTool" popup="draw" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
|
|
8
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
|
|
9
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
|
|
10
|
+
<div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
|
|
11
|
+
`;
|
|
12
|
+
toolActivated = new TypedEvent();
|
|
13
|
+
ready() {
|
|
14
|
+
this._setTitle(this.getAttribute("title"));
|
|
15
|
+
let toolSelect = new DesignerToolbarPopupToolSelect();
|
|
16
|
+
toolSelect.insertToolContent(this.templateToolSelect);
|
|
17
|
+
toolSelect.toolActivated.on((toolArg) => {
|
|
18
|
+
this.toolActivated.emit(toolArg);
|
|
19
|
+
});
|
|
20
|
+
let content = [];
|
|
21
|
+
content.push(toolSelect);
|
|
22
|
+
this._setContent(content);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
customElements.define('node-projects-designer-popup-drawtool', DrawToolPopup);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { ServiceContainer } from "../../../services/ServiceContainer.js";
|
|
3
|
+
import { DesignerView } from "../designerView.js";
|
|
4
|
+
import "./designerToolbarGenerics/designerToolsButtons.js";
|
|
5
|
+
import "./designerToolbarPopups/DrawToolPopup.js";
|
|
6
|
+
export declare class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
|
|
7
|
+
static readonly style: CSSStyleSheet;
|
|
8
|
+
static readonly template: HTMLTemplateElement;
|
|
9
|
+
private _designerView;
|
|
10
|
+
private _toolButtonsElem;
|
|
11
|
+
private _toolPopupElems;
|
|
12
|
+
private _serviceContainer;
|
|
13
|
+
private _prevSelected;
|
|
14
|
+
ready(): Promise<void>;
|
|
15
|
+
initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
|
|
16
|
+
private _registerPopups;
|
|
17
|
+
private _toolButtonActivated;
|
|
18
|
+
private _activatePopup;
|
|
19
|
+
private _popupToolSelected;
|
|
20
|
+
private _isPopupScenario;
|
|
21
|
+
private _resetPreviousElements;
|
|
22
|
+
private _hideAllPopups;
|
|
23
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
2
|
+
import { CommandType } from "../../../../commandHandling/CommandType.js";
|
|
3
|
+
import { DesignerToolRenderer } from "./designerToolbarGenerics/designerToolRenderer.js";
|
|
4
|
+
import "./designerToolbarGenerics/designerToolsButtons.js";
|
|
5
|
+
import "./designerToolbarPopups/DrawToolPopup.js";
|
|
6
|
+
export class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
|
|
7
|
+
static style = css `
|
|
8
|
+
node-projects-designer-tools-buttons {
|
|
9
|
+
height: 100%;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
#popups {
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: calc(0px + 10px);
|
|
16
|
+
height: 100%;
|
|
17
|
+
left: calc(32px + 4px + 10px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
#popups > * {
|
|
21
|
+
display: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
#popups > *[opened] {
|
|
25
|
+
display: block;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
static template = html `
|
|
29
|
+
<node-projects-designer-tools-buttons id="tool-buttons"></node-projects-designer-tools-buttons>
|
|
30
|
+
<div id="popups">
|
|
31
|
+
<node-projects-designer-popup-drawtool popup="draw" class="popup" title="Drawtools" tabindex="-1">
|
|
32
|
+
</node-projects-designer-popup-drawtool>
|
|
33
|
+
</div>
|
|
34
|
+
`;
|
|
35
|
+
_designerView;
|
|
36
|
+
_toolButtonsElem;
|
|
37
|
+
_toolPopupElems;
|
|
38
|
+
_serviceContainer;
|
|
39
|
+
_prevSelected = [];
|
|
40
|
+
async ready() {
|
|
41
|
+
this._toolButtonsElem = this._getDomElement("tool-buttons");
|
|
42
|
+
this._toolButtonsElem.toolActivated.on((toolActivated => {
|
|
43
|
+
this._toolButtonActivated(toolActivated[0], toolActivated[1]);
|
|
44
|
+
}));
|
|
45
|
+
this._registerPopups();
|
|
46
|
+
let categories = [];
|
|
47
|
+
await this._waitForChildrenReady();
|
|
48
|
+
let tools = [];
|
|
49
|
+
for (let tool of this._toolButtonsElem.toolCollection) {
|
|
50
|
+
if (!categories.includes(tool.category)) {
|
|
51
|
+
tools.push(DesignerToolRenderer.createToolFromObject(tool));
|
|
52
|
+
categories.push(tool.category);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
this._toolButtonsElem.setToolsExternal(tools);
|
|
56
|
+
}
|
|
57
|
+
initialize(serviceContainer, designerView) {
|
|
58
|
+
this._serviceContainer = serviceContainer;
|
|
59
|
+
this._serviceContainer.globalContext.onToolChanged.on((e) => {
|
|
60
|
+
let command_name;
|
|
61
|
+
let found = false;
|
|
62
|
+
this._serviceContainer.designerTools.forEach((tool, key) => {
|
|
63
|
+
if (tool === e.newValue && !found) {
|
|
64
|
+
command_name = key;
|
|
65
|
+
found = true;
|
|
66
|
+
this._toolButtonsElem.externalToolChange(command_name);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
this._designerView = designerView;
|
|
71
|
+
}
|
|
72
|
+
_registerPopups() {
|
|
73
|
+
let popups = this._getDomElement("popups");
|
|
74
|
+
this._toolPopupElems = [...popups.querySelectorAll('.popup')];
|
|
75
|
+
//DrawToolPopup
|
|
76
|
+
let drawToolPopup = popups.querySelectorAll("node-projects-designer-popup-drawtool")[0];
|
|
77
|
+
drawToolPopup.toolActivated.on((toolArg) => this._popupToolSelected(drawToolPopup, toolArg));
|
|
78
|
+
}
|
|
79
|
+
_toolButtonActivated(tool, external) {
|
|
80
|
+
this._hideAllPopups();
|
|
81
|
+
this._prevSelected[1] = this._prevSelected[0];
|
|
82
|
+
this._prevSelected[0] = tool;
|
|
83
|
+
if (!external) {
|
|
84
|
+
if (this._isPopupScenario()) {
|
|
85
|
+
this._resetPreviousElements();
|
|
86
|
+
this._activatePopup(tool.category);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
this._toolButtonsElem.markToolAsSelected(tool.command_parameter);
|
|
90
|
+
let command = {
|
|
91
|
+
type: CommandType.setTool,
|
|
92
|
+
parameter: tool.command_parameter,
|
|
93
|
+
};
|
|
94
|
+
this._designerView.executeCommand(command);
|
|
95
|
+
}
|
|
96
|
+
_activatePopup(category) {
|
|
97
|
+
this._toolPopupElems.find(x => x.getAttribute("popup") == category)?.setAttribute("opened", "");
|
|
98
|
+
}
|
|
99
|
+
_popupToolSelected(popup, tool) {
|
|
100
|
+
}
|
|
101
|
+
_isPopupScenario() {
|
|
102
|
+
return JSON.stringify(this._prevSelected[1]) === JSON.stringify(this._prevSelected[0]);
|
|
103
|
+
}
|
|
104
|
+
_resetPreviousElements() {
|
|
105
|
+
for (let i = 0; i < this._prevSelected.length; i++) {
|
|
106
|
+
this._prevSelected[i] = null;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
_hideAllPopups() {
|
|
110
|
+
for (let popup of this._toolPopupElems) {
|
|
111
|
+
popup.removeAttribute("opened");
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
customElements.define('node-projects-designer-tools-dock', DesignerToolsDock);
|
package/dist/index.d.ts
CHANGED
|
@@ -102,6 +102,7 @@ export * from "./elements/widgets/designerView/designerView.js";
|
|
|
102
102
|
export * from "./elements/widgets/designerView/overlayLayerView.js";
|
|
103
103
|
export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
|
|
104
104
|
export type { ITool } from "./elements/widgets/designerView/tools/ITool.js";
|
|
105
|
+
export * from "./elements/widgets/designerView/tools/designerToolsDock.js";
|
|
105
106
|
export * from "./elements/widgets/designerView/tools/NamedTools.js";
|
|
106
107
|
export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
|
|
107
108
|
export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
|
package/dist/index.js
CHANGED
|
@@ -66,6 +66,7 @@ export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
|
|
|
66
66
|
export * from "./elements/widgets/designerView/designerView.js";
|
|
67
67
|
export * from "./elements/widgets/designerView/overlayLayerView.js";
|
|
68
68
|
export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
|
|
69
|
+
export * from "./elements/widgets/designerView/tools/designerToolsDock.js";
|
|
69
70
|
export * from "./elements/widgets/designerView/tools/NamedTools.js";
|
|
70
71
|
export * from "./elements/widgets/designerView/tools/DrawElementTool.js";
|
|
71
72
|
export * from "./elements/widgets/designerView/tools/DrawPathTool.js";
|
package/package.json
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
{
|
|
2
|
-
"description": "A UI designer for Polymer apps",
|
|
3
|
-
"name": "@node-projects/web-component-designer",
|
|
4
|
-
"version": "0.0.
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"author": "",
|
|
8
|
-
"license": "MIT",
|
|
9
|
-
"scripts": {
|
|
10
|
-
"tsc": "tsc",
|
|
11
|
-
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
|
|
12
|
-
"build": "tsc",
|
|
13
|
-
"prepublishOnly": "npm run build"
|
|
14
|
-
},
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"@node-projects/base-custom-webcomponent": "^0.9.
|
|
17
|
-
"construct-style-sheets-polyfill": "^3.1.0"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@node-projects/lean-he-esm": "^3.3.0",
|
|
21
|
-
"@node-projects/node-html-parser-esm": "^2.4.1",
|
|
22
|
-
"@papyrs/stylo": "^0.0.9",
|
|
23
|
-
"@types/codemirror": "^5.60.5",
|
|
24
|
-
"@types/jquery": "^3.5.14",
|
|
25
|
-
"@types/jquery.fancytree": "0.0.7",
|
|
26
|
-
"ace-builds": "^1.4.14",
|
|
27
|
-
"codemirror": "^5.65.2",
|
|
28
|
-
"esprima-next": "^5.8.1",
|
|
29
|
-
"html2canvas": "*",
|
|
30
|
-
"jest": "^27.5.1",
|
|
31
|
-
"jquery": "^3.6.0",
|
|
32
|
-
"jquery.fancytree": "^2.38.1",
|
|
33
|
-
"monaco-editor": "^0.
|
|
34
|
-
"ts-jest": "^27.1.3",
|
|
35
|
-
"typescript": "^4.6.2",
|
|
36
|
-
"typescript-lit-html-plugin": "^0.9.0"
|
|
37
|
-
},
|
|
38
|
-
"repository": {
|
|
39
|
-
"type": "git",
|
|
40
|
-
"url": "git+https://github.com/node-projects/web-component-designer.git"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"description": "A UI designer for Polymer apps",
|
|
3
|
+
"name": "@node-projects/web-component-designer",
|
|
4
|
+
"version": "0.0.95",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"author": "",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"scripts": {
|
|
10
|
+
"tsc": "tsc",
|
|
11
|
+
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
|
|
12
|
+
"build": "tsc",
|
|
13
|
+
"prepublishOnly": "npm run build"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@node-projects/base-custom-webcomponent": "^0.9.1",
|
|
17
|
+
"construct-style-sheets-polyfill": "^3.1.0"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@node-projects/lean-he-esm": "^3.3.0",
|
|
21
|
+
"@node-projects/node-html-parser-esm": "^2.4.1",
|
|
22
|
+
"@papyrs/stylo": "^0.0.9",
|
|
23
|
+
"@types/codemirror": "^5.60.5",
|
|
24
|
+
"@types/jquery": "^3.5.14",
|
|
25
|
+
"@types/jquery.fancytree": "0.0.7",
|
|
26
|
+
"ace-builds": "^1.4.14",
|
|
27
|
+
"codemirror": "^5.65.2",
|
|
28
|
+
"esprima-next": "^5.8.1",
|
|
29
|
+
"html2canvas": "*",
|
|
30
|
+
"jest": "^27.5.1",
|
|
31
|
+
"jquery": "^3.6.0",
|
|
32
|
+
"jquery.fancytree": "^2.38.1",
|
|
33
|
+
"monaco-editor": "^0.33.0",
|
|
34
|
+
"ts-jest": "^27.1.3",
|
|
35
|
+
"typescript": "^4.6.2",
|
|
36
|
+
"typescript-lit-html-plugin": "^0.9.0"
|
|
37
|
+
},
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "git+https://github.com/node-projects/web-component-designer.git"
|
|
41
|
+
}
|
|
42
|
+
}
|