zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #695 from SVG-Edit/correct-several-minor-issues 

Correct several minor issues
master
JFH 2022-01-05 00:20:12 -03:00 committed by GitHub
parent 4205387299 ae9efd3a57
commit 6bdfcaee1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 85 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/integration/ui/__snapshots__/scenario1.js.snap
View File

@ -28,8 +28,7 @@ exports[`use all parts of svg-edit > check tool_shape #0`] = `
fill="#FF0000" fill="#FF0000"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5" transform="rotate(48.8014 208.997 209.008)"
transform="rotate(43.2545 208.997 209.008)"
></path> ></path>
</g> </g>
</svg> </svg>
@ -52,8 +51,7 @@ exports[`use all parts of svg-edit > check tool_image #0`] = `
fill="#FF0000" fill="#FF0000"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5" transform="rotate(48.8014 208.997 209.008)"
transform="rotate(43.2545 208.997 209.008)"
></path> ></path>
<image <image
height="20" height="20"

34
cypress/integration/ui/__snapshots__/scenario2.js.snap
View File

@ -31,7 +31,6 @@ exports[`use all parts of svg-edit > check tool_circle #0`] = `
opacity="0.5" opacity="0.5"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
> >
<animate <animate
attributeName="opacity" attributeName="opacity"
@ -63,7 +62,6 @@ exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -74,7 +72,6 @@ exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
> >
<animate <animate
attributeName="opacity" attributeName="opacity"
@ -106,7 +103,6 @@ exports[`use all parts of svg-edit > check tool_ellipse #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -116,7 +112,6 @@ exports[`use all parts of svg-edit > check tool_ellipse #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
<ellipse <ellipse
cx="114" cx="114"
@ -127,7 +122,6 @@ exports[`use all parts of svg-edit > check tool_ellipse #0`] = `
rx="55" rx="55"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
> >
<animate <animate
attributeName="opacity" attributeName="opacity"
@ -159,7 +153,6 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] =
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -169,7 +162,6 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] =
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
<ellipse <ellipse
cx="114" cx="114"
@ -179,7 +171,6 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] =
rx="55" rx="55"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></ellipse> ></ellipse>
</g> </g>
@ -204,7 +195,6 @@ exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -215,7 +205,6 @@ exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
<ellipse <ellipse
cx="114" cx="114"
@ -225,7 +214,6 @@ exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = `
rx="55" rx="55"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></ellipse> ></ellipse>
</g> </g>
@ -250,7 +238,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -261,7 +248,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></ellipse> ></ellipse>
<ellipse <ellipse
@ -272,7 +258,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = `
rx="55" rx="55"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 114 189)" transform="rotate(25 114 189)"
></ellipse> ></ellipse>
</g> </g>
@ -297,7 +282,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_blur #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -308,7 +292,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_blur #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></ellipse> ></ellipse>
<ellipse <ellipse
@ -320,7 +303,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_blur #0`] = `
rx="55" rx="55"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 114 189)" transform="rotate(25 114 189)"
></ellipse> ></ellipse>
</g> </g>
@ -350,7 +332,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_cx_cy_coordinate
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -361,7 +342,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_cx_cy_coordinate
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></ellipse> ></ellipse>
<ellipse <ellipse
@ -373,7 +353,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_cx_cy_coordinate
rx="55" rx="55"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 139 214)" transform="rotate(25 139 214)"
></ellipse> ></ellipse>
</g> </g>
@ -403,7 +382,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rx_ry_radius #0`]
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="299" cx="299"
@ -414,7 +392,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rx_ry_radius #0`]
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></ellipse> ></ellipse>
<ellipse <ellipse
@ -426,7 +403,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_change_rx_ry_radius #0`]
rx="80" rx="80"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 139 214)" transform="rotate(25 139 214)"
></ellipse> ></ellipse>
</g> </g>
@ -458,7 +434,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_bring_to_back #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
<circle <circle
cx="150" cx="150"
@ -467,7 +442,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_bring_to_back #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="139" cx="139"
@ -478,7 +452,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_bring_to_back #0`] = `
rx="80" rx="80"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 139 214)" transform="matrix(1 0 0 1 0 0) rotate(25 139 214)"
></ellipse> ></ellipse>
</g> </g>
@ -508,7 +481,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_bring_to_front #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="139" cx="139"
@ -519,7 +491,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_bring_to_front #0`] = `
rx="80" rx="80"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 139 214)" transform="matrix(1 0 0 1 0 0) rotate(25 139 214)"
></ellipse> ></ellipse>
<ellipse <ellipse
@ -531,7 +502,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_bring_to_front #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
</g> </g>
<defs> <defs>
@ -560,7 +530,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_clone #0`] = `
id="svg_1" id="svg_1"
r="111.8034" r="111.8034"
stroke="#000000" stroke="#000000"
stroke-width="5"
></circle> ></circle>
<ellipse <ellipse
cx="139" cx="139"
@ -571,7 +540,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_clone #0`] = `
rx="80" rx="80"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 139 214)" transform="matrix(1 0 0 1 0 0) rotate(25 139 214)"
></ellipse> ></ellipse>
<ellipse <ellipse
@ -583,7 +551,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_clone #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
<ellipse <ellipse
cx="319" cx="319"
@ -594,7 +561,6 @@ exports[`use all parts of svg-edit > check tool_ellipse_clone #0`] = `
rx="60" rx="60"
ry="50" ry="50"
stroke="#000000" stroke="#000000"
stroke-width="5"
></ellipse> ></ellipse>
</g> </g>
<defs> <defs>

5
cypress/integration/ui/__snapshots__/scenario3.js.snap
View File

@ -29,7 +29,6 @@ exports[`use all parts of svg-edit > check tool_path #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
> >
<animate <animate
attributeName="opacity" attributeName="opacity"
@ -59,7 +58,6 @@ exports[`use all parts of svg-edit > check tool_path_change_node_xy #0`] = `
fill="#FF0000" fill="#FF0000"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
></path> ></path>
</g> </g>
</svg> </svg>
@ -81,7 +79,6 @@ exports[`use all parts of svg-edit > check tool_path_change_seg_type #0`] = `
fill="#FF0000" fill="#FF0000"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
></path> ></path>
</g> </g>
</svg> </svg>
@ -103,7 +100,6 @@ exports[`use all parts of svg-edit > check tool_path_change_clone_node #0`] = `
fill="#FF0000" fill="#FF0000"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
></path> ></path>
</g> </g>
</svg> </svg>
@ -125,7 +121,6 @@ exports[`use all parts of svg-edit > check tool_path_openclose #0`] = `
fill="#FF0000" fill="#FF0000"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
></path> ></path>
</g> </g>
</svg> </svg>

46
cypress/integration/ui/__snapshots__/scenario4.js.snap
View File

@ -29,7 +29,6 @@ exports[`use all parts of svg-edit > check tool_rect #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="100" width="100"
x="150" x="150"
y="150" y="150"
@ -62,7 +61,6 @@ exports[`use all parts of svg-edit > check tool_fhrect #0`] = `
height="50" height="50"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="100" width="100"
x="150" x="150"
y="150" y="150"
@ -73,7 +71,6 @@ exports[`use all parts of svg-edit > check tool_fhrect #0`] = `
id="svg_2" id="svg_2"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="350" x="350"
y="230" y="230"
@ -106,7 +103,6 @@ exports[`use all parts of svg-edit > check tool_square #0`] = `
height="50" height="50"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="100" width="100"
x="150" x="150"
y="150" y="150"
@ -116,7 +112,6 @@ exports[`use all parts of svg-edit > check tool_square #0`] = `
height="100" height="100"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="350" x="350"
y="230" y="230"
@ -127,7 +122,6 @@ exports[`use all parts of svg-edit > check tool_square #0`] = `
id="svg_3" id="svg_3"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="50" width="50"
x="225" x="225"
y="300" y="300"
@ -160,7 +154,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_fill_color #0`] = `
height="50" height="50"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="100" width="100"
x="150" x="150"
y="150" y="150"
@ -170,7 +163,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_fill_color #0`] = `
height="100" height="100"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="350" x="350"
y="230" y="230"
@ -180,7 +172,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_fill_color #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -206,7 +197,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_rotation #0`] = `
height="50" height="50"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 200 175)" transform="rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -217,7 +207,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_rotation #0`] = `
height="100" height="100"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="350" x="350"
y="230" y="230"
@ -227,7 +216,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_rotation #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -254,7 +242,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_blur #0`] = `
height="50" height="50"
id="svg_1" id="svg_1"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 200 175)" transform="rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -265,7 +252,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_blur #0`] = `
height="100" height="100"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="350" x="350"
y="230" y="230"
@ -275,7 +261,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_blur #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -308,7 +293,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_opacity #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="rotate(25 200 175)" transform="rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -319,7 +303,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_opacity #0`] = `
height="100" height="100"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="350" x="350"
y="230" y="230"
@ -329,7 +312,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_opacity #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -362,7 +344,6 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -373,7 +354,6 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`
height="100" height="100"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="120" width="120"
x="375" x="375"
y="255" y="255"
@ -383,7 +363,6 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -416,7 +395,6 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_width_height #0`]
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -427,7 +405,6 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_width_height #0`]
height="125" height="125"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="145" width="145"
x="375" x="375"
y="255" y="255"
@ -437,7 +414,6 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_width_height #0`]
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -470,7 +446,6 @@ exports[`use all parts of svg-edit > check tool_square_clone #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -481,7 +456,6 @@ exports[`use all parts of svg-edit > check tool_square_clone #0`] = `
height="125" height="125"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="145" width="145"
x="375" x="375"
@ -492,7 +466,6 @@ exports[`use all parts of svg-edit > check tool_square_clone #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="50" width="50"
x="225" x="225"
y="300" y="300"
@ -502,7 +475,6 @@ exports[`use all parts of svg-edit > check tool_square_clone #0`] = `
height="50" height="50"
id="svg_4" id="svg_4"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="50" width="50"
x="245" x="245"
y="320" y="320"
@ -532,7 +504,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_back #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="50" width="50"
x="225" x="225"
y="300" y="300"
@ -544,7 +515,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_back #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -555,7 +525,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_back #0`] = `
height="125" height="125"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="145" width="145"
x="375" x="375"
@ -566,7 +535,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_back #0`] = `
height="50" height="50"
id="svg_4" id="svg_4"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="245" x="245"
@ -599,7 +567,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_front #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -610,7 +577,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_front #0`] = `
height="125" height="125"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="145" width="145"
x="375" x="375"
@ -621,7 +587,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_front #0`] = `
height="50" height="50"
id="svg_4" id="svg_4"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="245" x="245"
@ -632,7 +597,6 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_front #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="50" width="50"
x="225" x="225"
y="300" y="300"
@ -664,7 +628,6 @@ exports[`use all parts of svg-edit > check tool_square_change_corner_radius #0`]
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -675,7 +638,6 @@ exports[`use all parts of svg-edit > check tool_square_change_corner_radius #0`]
height="125" height="125"
id="svg_2" id="svg_2"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="145" width="145"
x="375" x="375"
@ -688,7 +650,6 @@ exports[`use all parts of svg-edit > check tool_square_change_corner_radius #0`]
rx="25" rx="25"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
width="50" width="50"
x="245" x="245"
y="320" y="320"
@ -698,7 +659,6 @@ exports[`use all parts of svg-edit > check tool_square_change_corner_radius #0`]
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -731,7 +691,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_to_path #0`] = `
id="svg_1" id="svg_1"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)"
width="100" width="100"
x="150" x="150"
@ -743,7 +702,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_to_path #0`] = `
id="svg_2" id="svg_2"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
></path> ></path>
<rect <rect
fill="#FF0000" fill="#FF0000"
@ -752,7 +710,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_to_path #0`] = `
rx="25" rx="25"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="245" x="245"
@ -763,7 +720,6 @@ exports[`use all parts of svg-edit > check tool_rect_change_to_path #0`] = `
height="50" height="50"
id="svg_3" id="svg_3"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="225" x="225"
@ -795,7 +751,6 @@ exports[`use all parts of svg-edit > check tool_rect_delete #0`] = `
id="svg_2" id="svg_2"
opacity="0.5" opacity="0.5"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
></path> ></path>
<rect <rect
@ -805,7 +760,6 @@ exports[`use all parts of svg-edit > check tool_rect_delete #0`] = `
rx="25" rx="25"
ry="25" ry="25"
stroke="#000000" stroke="#000000"
stroke-width="5"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
width="50" width="50"
x="245" x="245"

36
cypress/integration/ui/__snapshots__/scenario6.js.snap
View File

@ -35,8 +35,6 @@ exports[`use all parts of svg-edit > check tool_polygon #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
> >
<animate <animate
attributeName="opacity" attributeName="opacity"
@ -73,8 +71,6 @@ exports[`use all parts of svg-edit > check tool_polygon_clone #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
cx="325" cx="325"
@ -88,8 +84,6 @@ exports[`use all parts of svg-edit > check tool_polygon_clone #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -118,8 +112,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_rotation #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -134,8 +126,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_rotation #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 350.145 270)" transform="rotate(25 350.145 270)"
></polygon> ></polygon>
</g> </g>
@ -165,8 +155,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_blur #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -182,8 +170,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_blur #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 350.145 270)" transform="rotate(25 350.145 270)"
></polygon> ></polygon>
</g> </g>
@ -218,8 +204,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_opacity #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -236,8 +220,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_opacity #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 350.145 270)" transform="rotate(25 350.145 270)"
></polygon> ></polygon>
</g> </g>
@ -275,8 +257,6 @@ exports[`use all parts of svg-edit > check tool_polygon_bring_to_back #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 350.145 270)" transform="rotate(25 350.145 270)"
></polygon> ></polygon>
<polygon <polygon
@ -291,8 +271,6 @@ exports[`use all parts of svg-edit > check tool_polygon_bring_to_back #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
<defs> <defs>
@ -326,8 +304,6 @@ exports[`use all parts of svg-edit > check tool_polygon_bring_to_front #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -344,8 +320,6 @@ exports[`use all parts of svg-edit > check tool_polygon_bring_to_front #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 350.145 270)" transform="rotate(25 350.145 270)"
></polygon> ></polygon>
</g> </g>
@ -380,8 +354,6 @@ exports[`use all parts of svg-edit > check tool_polygon_delete #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -410,8 +382,6 @@ exports[`use all parts of svg-edit > check tool_polygon_align_to_page #0`] = `
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -440,8 +410,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_stroke_width #0`]
sides="5" sides="5"
stroke="#000000" stroke="#000000"
stroke-width="15" stroke-width="15"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -470,8 +438,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_stoke_fill_color
sides="5" sides="5"
stroke="#0000bf" stroke="#0000bf"
stroke-width="15" stroke-width="15"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -500,8 +466,6 @@ exports[`use all parts of svg-edit > check tool_polygon_change_sides #0`] = `
sides="6" sides="6"
stroke="#0000bf" stroke="#0000bf"
stroke-width="15" stroke-width="15"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>

36
cypress/integration/ui/__snapshots__/scenario7.js.snap
View File

@ -38,8 +38,6 @@ exports[`use all parts of svg-edit > check tool_star #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
> >
<animate <animate
attributeName="opacity" attributeName="opacity"
@ -79,8 +77,6 @@ exports[`use all parts of svg-edit > check tool_star_clone #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
cx="300" cx="300"
@ -97,8 +93,6 @@ exports[`use all parts of svg-edit > check tool_star_clone #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -130,8 +124,6 @@ exports[`use all parts of svg-edit > check tool_star_change_rotation #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -149,8 +141,6 @@ exports[`use all parts of svg-edit > check tool_star_change_rotation #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 320 163.634)" transform="rotate(25 320 163.634)"
></polygon> ></polygon>
</g> </g>
@ -183,8 +173,6 @@ exports[`use all parts of svg-edit > check tool_star_change_blur #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -203,8 +191,6 @@ exports[`use all parts of svg-edit > check tool_star_change_blur #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 320 163.634)" transform="rotate(25 320 163.634)"
></polygon> ></polygon>
</g> </g>
@ -242,8 +228,6 @@ exports[`use all parts of svg-edit > check tool_star_change_opacity #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -263,8 +247,6 @@ exports[`use all parts of svg-edit > check tool_star_change_opacity #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 320 163.634)" transform="rotate(25 320 163.634)"
></polygon> ></polygon>
</g> </g>
@ -305,8 +287,6 @@ exports[`use all parts of svg-edit > check tool_star_bring_to_back #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 320 163.634)" transform="rotate(25 320 163.634)"
></polygon> ></polygon>
<polygon <polygon
@ -324,8 +304,6 @@ exports[`use all parts of svg-edit > check tool_star_bring_to_back #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
<defs> <defs>
@ -362,8 +340,6 @@ exports[`use all parts of svg-edit > check tool_star_bring_to_front #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
<polygon <polygon
class="svg_2_class" class="svg_2_class"
@ -383,8 +359,6 @@ exports[`use all parts of svg-edit > check tool_star_bring_to_front #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
transform="rotate(25 320 163.634)" transform="rotate(25 320 163.634)"
></polygon> ></polygon>
</g> </g>
@ -422,8 +396,6 @@ exports[`use all parts of svg-edit > check tool_star_delete #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -455,8 +427,6 @@ exports[`use all parts of svg-edit > check tool_star_align_to_page #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="5" stroke-width="5"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -488,8 +458,6 @@ exports[`use all parts of svg-edit > check tool_star_change_stroke_width #0`] =
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#000000" stroke="#000000"
stroke-width="15" stroke-width="15"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -521,8 +489,6 @@ exports[`use all parts of svg-edit > check tool_star_change_stoke_fill_color #0`
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#0000bf" stroke="#0000bf"
stroke-width="15" stroke-width="15"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>
@ -554,8 +520,6 @@ exports[`use all parts of svg-edit > check tool_star_change_sides #0`] = `
starradiusmultiplier="3" starradiusmultiplier="3"
stroke="#0000bf" stroke="#0000bf"
stroke-width="15" stroke-width="15"
strokewidth="5"
strokecolor="#000000"
></polygon> ></polygon>
</g> </g>
</svg> </svg>

39
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@ -240,9 +240,9 @@ export default {
}, },
mouseDown (opts) { mouseDown (opts) {
if (svgCanvas.getMode() === 'star') { if (svgCanvas.getMode() === 'star') {
const rgb = svgCanvas.getColor('fill') const fill = svgCanvas.getColor('fill')
const sRgb = svgCanvas.getColor('stroke') const stroke = svgCanvas.getColor('stroke')
const sWidth = svgCanvas.getStrokeWidth() const strokeWidth = svgCanvas.getStrokeWidth()
started = true started = true
newFO = svgCanvas.addSVGElementsFromJson({ newFO = svgCanvas.addSVGElementsFromJson({
element: 'polygon', element: 'polygon',
@ -256,9 +256,9 @@ export default {
radialshift: $id('radialShift').value, radialshift: $id('radialShift').value,
r2: 0, r2: 0,
orient: 'point', orient: 'point',
fill: rgb, fill,
strokecolor: sRgb, stroke,
strokeWidth: sWidth 'stroke-width': strokeWidth
} }
}) })
return { return {
@ -266,12 +266,9 @@ export default {
} }
} }
if (svgCanvas.getMode() === 'polygon') { if (svgCanvas.getMode() === 'polygon') {
// const e = opts.event; const fill = svgCanvas.getColor('fill')
const rgb = svgCanvas.getColor('fill') const stroke = svgCanvas.getColor('stroke')
// const ccRgbEl = rgb.substring(1, rgb.length); const strokeWidth = svgCanvas.getStrokeWidth()
const sRgb = svgCanvas.getColor('stroke')
// ccSRgbEl = sRgb.substring(1, rgb.length);
const sWidth = svgCanvas.getStrokeWidth()
started = true started = true
newFO = svgCanvas.addSVGElementsFromJson({ newFO = svgCanvas.addSVGElementsFromJson({
element: 'polygon', element: 'polygon',
@ -283,9 +280,9 @@ export default {
sides: $id('polySides').value, sides: $id('polySides').value,
orient: 'x', orient: 'x',
edge: 0, edge: 0,
fill: rgb, fill,
strokecolor: sRgb, stroke,
strokeWidth: sWidth 'stroke-width': strokeWidth
} }
}) })
@ -305,8 +302,8 @@ export default {
const point = Number(newFO.getAttribute('point')) const point = Number(newFO.getAttribute('point'))
const orient = newFO.getAttribute('orient') const orient = newFO.getAttribute('orient')
const fill = newFO.getAttribute('fill') const fill = newFO.getAttribute('fill')
const strokecolor = newFO.getAttribute('strokecolor') const stroke = newFO.getAttribute('stroke')
const strokeWidth = Number(newFO.getAttribute('strokeWidth')) const strokeWidth = Number(newFO.getAttribute('stroke-width'))
const radialshift = Number(newFO.getAttribute('radialshift')) const radialshift = Number(newFO.getAttribute('radialshift'))
let x = opts.mouse_x let x = opts.mouse_x
@ -352,7 +349,7 @@ export default {
} }
newFO.setAttribute('points', polyPoints) newFO.setAttribute('points', polyPoints)
newFO.setAttribute('fill', fill) newFO.setAttribute('fill', fill)
newFO.setAttribute('stroke', strokecolor) newFO.setAttribute('stroke', stroke)
newFO.setAttribute('stroke-width', strokeWidth) newFO.setAttribute('stroke-width', strokeWidth)
/* const shape = */ newFO.getAttribute('shape') /* const shape = */ newFO.getAttribute('shape')
@ -366,8 +363,8 @@ export default {
const sides = Number(newFO.getAttribute('sides')) const sides = Number(newFO.getAttribute('sides'))
// const orient = newFO.getAttribute('orient'); // const orient = newFO.getAttribute('orient');
const fill = newFO.getAttribute('fill') const fill = newFO.getAttribute('fill')
const strokecolor = newFO.getAttribute('strokecolor') const stroke = newFO.getAttribute('stroke')
const strokeWidth = Number(newFO.getAttribute('strokeWidth')) const strokeWidth = Number(newFO.getAttribute('stroke-width'))
let x = opts.mouse_x let x = opts.mouse_x
let y = opts.mouse_y let y = opts.mouse_y
@ -390,7 +387,7 @@ export default {
// const poly = newFO.createElementNS(NS.SVG, 'polygon'); // const poly = newFO.createElementNS(NS.SVG, 'polygon');
newFO.setAttribute('points', points) newFO.setAttribute('points', points)
newFO.setAttribute('fill', fill) newFO.setAttribute('fill', fill)
newFO.setAttribute('stroke', strokecolor) newFO.setAttribute('stroke', stroke)
newFO.setAttribute('stroke-width', strokeWidth) newFO.setAttribute('stroke-width', strokeWidth)
return { return {
started: true started: true

111
src/svgcanvas/elem-get-set.js
View File

@ -8,7 +8,7 @@ import { jGraduate } from '../editor/components/jgraduate/jQuery.jGraduate.js'
import { NS } from './namespaces.js' import { NS } from './namespaces.js'
import { import {
getVisibleElements, getStrokedBBoxDefaultVisible, findDefs, getVisibleElements, getStrokedBBoxDefaultVisible, findDefs,
walkTree, isNullish, getHref, setHref, getElement walkTree, getHref, setHref, getElement
} from './utilities.js' } from './utilities.js'
import { import {
convertToNum convertToNum
@ -30,7 +30,7 @@ export const init = (canvas) => {
* @function module:elem-get-set.SvgCanvas#getResolution * @function module:elem-get-set.SvgCanvas#getResolution
* @returns {DimensionsAndZoom} The current dimensions and zoom level in an object * @returns {DimensionsAndZoom} The current dimensions and zoom level in an object
*/ */
export const getResolutionMethod = function () { export const getResolutionMethod = () => {
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
const w = svgCanvas.getSvgContent().getAttribute('width') / zoom const w = svgCanvas.getSvgContent().getAttribute('width') / zoom
const h = svgCanvas.getSvgContent().getAttribute('height') / zoom const h = svgCanvas.getSvgContent().getAttribute('height') / zoom
@ -48,7 +48,7 @@ export const getResolutionMethod = function () {
* @returns {string|void} the current group/SVG's title contents or * @returns {string|void} the current group/SVG's title contents or
* `undefined` if no element is passed nd there are no selected elements. * `undefined` if no element is passed nd there are no selected elements.
*/ */
export const getTitleMethod = function (elem) { export const getTitleMethod = (elem) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const dataStorage = svgCanvas.getDataStorage() const dataStorage = svgCanvas.getDataStorage()
elem = elem || selectedElements[0] elem = elem || selectedElements[0]
@ -74,7 +74,7 @@ export const getTitleMethod = function (elem) {
* @todo Combine this with `setDocumentTitle` * @todo Combine this with `setDocumentTitle`
* @returns {void} * @returns {void}
*/ */
export const setGroupTitleMethod = function (val) { export const setGroupTitleMethod = (val) => {
const { const {
InsertElementCommand, RemoveElementCommand, InsertElementCommand, RemoveElementCommand,
ChangeElementCommand, BatchCommand ChangeElementCommand, BatchCommand
@ -119,7 +119,7 @@ export const setGroupTitleMethod = function (val) {
* @param {string} newTitle - String with the new title * @param {string} newTitle - String with the new title
* @returns {void} * @returns {void}
*/ */
export const setDocumentTitleMethod = function (newTitle) { export const setDocumentTitleMethod = (newTitle) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const childs = svgCanvas.getSvgContent().childNodes const childs = svgCanvas.getSvgContent().childNodes
let docTitle = false; let oldTitle = '' let docTitle = false; let oldTitle = ''
@ -159,7 +159,7 @@ export const setDocumentTitleMethod = function (newTitle) {
* @returns {boolean} Indicates if resolution change was successful. * @returns {boolean} Indicates if resolution change was successful.
* It will fail on "fit to content" option with no content to fit to. * It will fail on "fit to content" option with no content to fit to.
*/ */
export const setResolutionMethod = function (x, y) { export const setResolutionMethod = (x, y) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
const res = svgCanvas.getResolution() const res = svgCanvas.getResolution()
@ -201,8 +201,8 @@ export const setResolutionMethod = function (x, y) {
svgCanvas.getSvgContent().setAttribute('width', x) svgCanvas.getSvgContent().setAttribute('width', x)
svgCanvas.getSvgContent().setAttribute('height', y) svgCanvas.getSvgContent().setAttribute('height', y)
this.contentW = x svgCanvas.contentW = x
this.contentH = y svgCanvas.contentH = y
batchCmd.addSubCommand(new ChangeElementCommand(svgCanvas.getSvgContent(), { width: w, height: h })) batchCmd.addSubCommand(new ChangeElementCommand(svgCanvas.getSvgContent(), { width: w, height: h }))
svgCanvas.getSvgContent().setAttribute('viewBox', [0, 0, x / zoom, y / zoom].join(' ')) svgCanvas.getSvgContent().setAttribute('viewBox', [0, 0, x / zoom, y / zoom].join(' '))
@ -220,7 +220,7 @@ export const setResolutionMethod = function (x, y) {
* @param {boolean} [add] - Indicates whether or not to add the namespace value * @param {boolean} [add] - Indicates whether or not to add the namespace value
* @returns {string} The editor's namespace URL * @returns {string} The editor's namespace URL
*/ */
export const getEditorNSMethod = function (add) { export const getEditorNSMethod = (add) => {
if (add) { if (add) {
svgCanvas.getSvgContent().setAttribute('xmlns:se', NS.SE) svgCanvas.getSvgContent().setAttribute('xmlns:se', NS.SE)
} }
@ -240,7 +240,7 @@ export const getEditorNSMethod = function (add) {
* @param {Integer} editorH - The editor's workarea box's height * @param {Integer} editorH - The editor's workarea box's height
* @returns {module:elem-get-set.ZoomAndBBox|void} * @returns {module:elem-get-set.ZoomAndBBox|void}
*/ */
export const setBBoxZoomMethod = function (val, editorW, editorH) { export const setBBoxZoomMethod = (val, editorW, editorH) => {
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
let spacer = 0.85 let spacer = 0.85
@ -299,7 +299,7 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
* @fires module:elem-get-set.SvgCanvas#event:ext_zoomChanged * @fires module:elem-get-set.SvgCanvas#event:ext_zoomChanged
* @returns {void} * @returns {void}
*/ */
export const setZoomMethod = function (zoomLevel) { export const setZoomMethod = (zoomLevel) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const res = svgCanvas.getResolution() const res = svgCanvas.getResolution()
svgCanvas.getSvgContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel) svgCanvas.getSvgContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel)
@ -331,7 +331,7 @@ export const setColorMethod = function (type, val, preventUndo) {
* @param {Element} e * @param {Element} e
* @returns {void} * @returns {void}
*/ */
function addNonG (e) { const addNonG = (e) => {
if (e.nodeName !== 'g') { if (e.nodeName !== 'g') {
elems.push(e) elems.push(e)
} }
@ -367,7 +367,7 @@ export const setColorMethod = function (type, val, preventUndo) {
* @param {"fill"|"stroke"} type - String indicating "fill" or "stroke" to apply to an element * @param {"fill"|"stroke"} type - String indicating "fill" or "stroke" to apply to an element
* @returns {void} * @returns {void}
*/ */
export const setGradientMethod = function (type) { export const setGradientMethod = (type) => {
if (!svgCanvas.getCurProperties(type + '_paint') || if (!svgCanvas.getCurProperties(type + '_paint') ||
svgCanvas.getCurProperties(type + '_paint').type === 'solidColor') { return } svgCanvas.getCurProperties(type + '_paint').type === 'solidColor') { return }
const canvas = svgCanvas const canvas = svgCanvas
@ -394,7 +394,7 @@ export const setGradientMethod = function (type) {
* @param {SVGGradientElement} grad - The gradient DOM element to compare to others * @param {SVGGradientElement} grad - The gradient DOM element to compare to others
* @returns {SVGGradientElement} The existing gradient if found, `null` if not * @returns {SVGGradientElement} The existing gradient if found, `null` if not
*/ */
export const findDuplicateGradient = function (grad) { export const findDuplicateGradient = (grad) => {
const defs = findDefs() const defs = findDefs()
const existingGrads = defs.querySelectorAll('linearGradient, radialGradient') const existingGrads = defs.querySelectorAll('linearGradient, radialGradient')
let i = existingGrads.length let i = existingGrads.length
@ -468,16 +468,16 @@ export const findDuplicateGradient = function (grad) {
* @param {module:jGraduate.jGraduatePaintOptions} paint - The jGraduate paint object to apply * @param {module:jGraduate.jGraduatePaintOptions} paint - The jGraduate paint object to apply
* @returns {void} * @returns {void}
*/ */
export const setPaintMethod = function (type, paint) { export const setPaintMethod = (type, paint) => {
// make a copy // make a copy
const p = new jGraduate.Paint(paint) const p = new jGraduate.Paint(paint)
this.setPaintOpacity(type, p.alpha / 100, true) svgCanvas.setPaintOpacity(type, p.alpha / 100, true)
// now set the current paint object // now set the current paint object
svgCanvas.setCurProperties(type + '_paint', p) svgCanvas.setCurProperties(type + '_paint', p)
switch (p.type) { switch (p.type) {
case 'solidColor': case 'solidColor':
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none') svgCanvas.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none')
break break
case 'linearGradient': case 'linearGradient':
case 'radialGradient': case 'radialGradient':
@ -494,7 +494,7 @@ export const setPaintMethod = function (type, paint) {
* @fires module:elem-get-set.SvgCanvas#event:changed * @fires module:elem-get-set.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setStrokeWidthMethod = function (val) { export const setStrokeWidthMethod = (val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
if (val === 0 && ['line', 'path'].includes(svgCanvas.getMode())) { if (val === 0 && ['line', 'path'].includes(svgCanvas.getMode())) {
svgCanvas.setStrokeWidth(1) svgCanvas.setStrokeWidth(1)
@ -508,7 +508,7 @@ export const setStrokeWidthMethod = function (val) {
* @param {Element} e * @param {Element} e
* @returns {void} * @returns {void}
*/ */
function addNonG (e) { const addNonG = (e) => {
if (e.nodeName !== 'g') { if (e.nodeName !== 'g') {
elems.push(e) elems.push(e)
} }
@ -538,7 +538,7 @@ export const setStrokeWidthMethod = function (val) {
* @fires module:elem-get-set.SvgCanvas#event:changed * @fires module:elem-get-set.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setStrokeAttrMethod = function (attr, val) { export const setStrokeAttrMethod = (attr, val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurShape(attr.replace('-', '_'), val) svgCanvas.setCurShape(attr.replace('-', '_'), val)
const elems = [] const elems = []
@ -564,12 +564,12 @@ export const setStrokeAttrMethod = function (attr, val) {
* @function module:svgcanvas.SvgCanvas#getBold * @function module:svgcanvas.SvgCanvas#getBold
* @returns {boolean} Indicates whether or not element is bold * @returns {boolean} Indicates whether or not element is bold
*/ */
export const getBoldMethod = function () { export const getBoldMethod = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
// should only have one element selected // should only have one element selected
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && if (selected?.tagName === 'text' &&
isNullish(selectedElements[1])) { !selectedElements[1]) {
return (selected.getAttribute('font-weight') === 'bold') return (selected.getAttribute('font-weight') === 'bold')
} }
return false return false
@ -581,11 +581,11 @@ export const getBoldMethod = function () {
* @param {boolean} b - Indicates bold (`true`) or normal (`false`) * @param {boolean} b - Indicates bold (`true`) or normal (`false`)
* @returns {void} * @returns {void}
*/ */
export const setBoldMethod = function (b) { export const setBoldMethod = (b) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && if (selected?.tagName === 'text' &&
isNullish(selectedElements[1])) { !selectedElements[1]) {
svgCanvas.changeSelectedAttribute('font-weight', b ? 'bold' : 'normal') svgCanvas.changeSelectedAttribute('font-weight', b ? 'bold' : 'normal')
} }
if (!selectedElements[0].textContent) { if (!selectedElements[0].textContent) {
@ -597,11 +597,11 @@ export const setBoldMethod = function (b) {
* Check whether selected element has the given text decoration value or not. * Check whether selected element has the given text decoration value or not.
* @returns {boolean} Indicates whether or not element has the text decoration value * @returns {boolean} Indicates whether or not element has the text decoration value
*/ */
export const hasTextDecorationMethod = function (value) { export const hasTextDecorationMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) { if (selected?.tagName === 'text' && !selectedElements[1]) {
const attribute = selected.getAttribute('text-decoration') || '' const attribute = selected.getAttribute('text-decoration') || ''
return attribute.includes(value) return attribute.includes(value)
} }
@ -614,10 +614,10 @@ export const hasTextDecorationMethod = function (value) {
* @param value The text decoration value * @param value The text decoration value
* @returns {void} * @returns {void}
*/ */
export const addTextDecorationMethod = function (value) { export const addTextDecorationMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) { if (selected?.tagName === 'text' && !selectedElements[1]) {
const oldValue = selected.getAttribute('text-decoration') || '' const oldValue = selected.getAttribute('text-decoration') || ''
svgCanvas.changeSelectedAttribute('text-decoration', (oldValue + ' ' + value).trim()) svgCanvas.changeSelectedAttribute('text-decoration', (oldValue + ' ' + value).trim())
} }
@ -631,10 +631,10 @@ export const addTextDecorationMethod = function (value) {
* @param value The text decoration value * @param value The text decoration value
* @returns {void} * @returns {void}
*/ */
export const removeTextDecorationMethod = function (value) { export const removeTextDecorationMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) { if (selected?.tagName === 'text' && !selectedElements[1]) {
const actualValues = selected.getAttribute('text-decoration') || '' const actualValues = selected.getAttribute('text-decoration') || ''
svgCanvas.changeSelectedAttribute('text-decoration', actualValues.replace(value, '').trim()) svgCanvas.changeSelectedAttribute('text-decoration', actualValues.replace(value, '').trim())
} }
@ -648,11 +648,10 @@ export const removeTextDecorationMethod = function (value) {
* @function module:svgcanvas.SvgCanvas#getItalic * @function module:svgcanvas.SvgCanvas#getItalic
* @returns {boolean} Indicates whether or not element is italic * @returns {boolean} Indicates whether or not element is italic
*/ */
export const getItalicMethod = function () { export const getItalicMethod = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && if (selected?.tagName === 'text' && !selectedElements[1]) {
isNullish(selectedElements[1])) {
return (selected.getAttribute('font-style') === 'italic') return (selected.getAttribute('font-style') === 'italic')
} }
return false return false
@ -664,11 +663,10 @@ export const getItalicMethod = function () {
* @param {boolean} i - Indicates italic (`true`) or normal (`false`) * @param {boolean} i - Indicates italic (`true`) or normal (`false`)
* @returns {void} * @returns {void}
*/ */
export const setItalicMethod = function (i) { export const setItalicMethod = (i) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && if (selected?.tagName === 'text' && !selectedElements[1]) {
isNullish(selectedElements[1])) {
svgCanvas.changeSelectedAttribute('font-style', i ? 'italic' : 'normal') svgCanvas.changeSelectedAttribute('font-style', i ? 'italic' : 'normal')
} }
if (!selectedElements[0].textContent) { if (!selectedElements[0].textContent) {
@ -681,11 +679,10 @@ export const setItalicMethod = function (i) {
* @param {string} value - The text anchor value (start, middle or end) * @param {string} value - The text anchor value (start, middle or end)
* @returns {void} * @returns {void}
*/ */
export const setTextAnchorMethod = function (value) { export const setTextAnchorMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'text' && if (selected?.tagName === 'text' && !selectedElements[1]) {
isNullish(selectedElements[1])) {
svgCanvas.changeSelectedAttribute('text-anchor', value) svgCanvas.changeSelectedAttribute('text-anchor', value)
} }
if (selectedElements.length > 0 && !selectedElements[0].textContent) { if (selectedElements.length > 0 && !selectedElements[0].textContent) {
@ -697,7 +694,7 @@ export const setTextAnchorMethod = function (value) {
* @function module:svgcanvas.SvgCanvas#getFontFamily * @function module:svgcanvas.SvgCanvas#getFontFamily
* @returns {string} The current font family * @returns {string} The current font family
*/ */
export const getFontFamilyMethod = function () { export const getFontFamilyMethod = () => {
return svgCanvas.getCurText('font_family') return svgCanvas.getCurText('font_family')
} }
@ -707,7 +704,7 @@ export const getFontFamilyMethod = function () {
* @param {string} val - String with the new font family * @param {string} val - String with the new font family
* @returns {void} * @returns {void}
*/ */
export const setFontFamilyMethod = function (val) { export const setFontFamilyMethod = (val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurText('font_family', val) svgCanvas.setCurText('font_family', val)
svgCanvas.changeSelectedAttribute('font-family', val) svgCanvas.changeSelectedAttribute('font-family', val)
@ -722,7 +719,7 @@ export const setFontFamilyMethod = function (val) {
* @param {string} val - String with the new font color * @param {string} val - String with the new font color
* @returns {void} * @returns {void}
*/ */
export const setFontColorMethod = function (val) { export const setFontColorMethod = (val) => {
svgCanvas.setCurText('fill', val) svgCanvas.setCurText('fill', val)
svgCanvas.changeSelectedAttribute('fill', val) svgCanvas.changeSelectedAttribute('fill', val)
} }
@ -731,7 +728,7 @@ export const setFontColorMethod = function (val) {
* @function module:svgcanvas.SvgCanvas#getFontColor * @function module:svgcanvas.SvgCanvas#getFontColor
* @returns {string} The current font color * @returns {string} The current font color
*/ */
export const getFontColorMethod = function () { export const getFontColorMethod = () => {
return svgCanvas.getCurText('fill') return svgCanvas.getCurText('fill')
} }
@ -739,7 +736,7 @@ export const getFontColorMethod = function () {
* @function module:svgcanvas.SvgCanvas#getFontSize * @function module:svgcanvas.SvgCanvas#getFontSize
* @returns {Float} The current font size * @returns {Float} The current font size
*/ */
export const getFontSizeMethod = function () { export const getFontSizeMethod = () => {
return svgCanvas.getCurText('font_size') return svgCanvas.getCurText('font_size')
} }
@ -749,7 +746,7 @@ export const getFontSizeMethod = function () {
* @param {Float} val - Float with the new font size * @param {Float} val - Float with the new font size
* @returns {void} * @returns {void}
*/ */
export const setFontSizeMethod = function (val) { export const setFontSizeMethod = (val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurText('font_size', val) svgCanvas.setCurText('font_size', val)
svgCanvas.changeSelectedAttribute('font-size', val) svgCanvas.changeSelectedAttribute('font-size', val)
@ -762,10 +759,10 @@ export const setFontSizeMethod = function (val) {
* @function module:svgcanvas.SvgCanvas#getText * @function module:svgcanvas.SvgCanvas#getText
* @returns {string} The current text (`textContent`) of the selected element * @returns {string} The current text (`textContent`) of the selected element
*/ */
export const getTextMethod = function () { export const getTextMethod = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (isNullish(selected)) { return '' } if (!selected) { return '' }
return (selected) ? selected.textContent : '' return (selected) ? selected.textContent : ''
} }
@ -775,7 +772,7 @@ export const getTextMethod = function () {
* @param {string} val - String with the new text * @param {string} val - String with the new text
* @returns {void} * @returns {void}
*/ */
export const setTextContentMethod = function (val) { export const setTextContentMethod = (val) => {
svgCanvas.changeSelectedAttribute('#text', val) svgCanvas.changeSelectedAttribute('#text', val)
svgCanvas.textActions.init(val) svgCanvas.textActions.init(val)
svgCanvas.textActions.setCursor() svgCanvas.textActions.setCursor()
@ -789,7 +786,7 @@ export const setTextContentMethod = function (val) {
* @fires module:svgcanvas.SvgCanvas#event:changed * @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setImageURLMethod = function (val) { export const setImageURLMethod = (val) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const elem = selectedElements[0] const elem = selectedElements[0]
@ -838,7 +835,7 @@ export const setImageURLMethod = function (val) {
* @param {string} val - String with the link URL/path * @param {string} val - String with the link URL/path
* @returns {void} * @returns {void}
*/ */
export const setLinkURLMethod = function (val) { export const setLinkURLMethod = (val) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
let elem = selectedElements[0] let elem = selectedElements[0]
@ -875,11 +872,11 @@ export const setLinkURLMethod = function (val) {
* @fires module:svgcanvas.SvgCanvas#event:changed * @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setRectRadiusMethod = function (val) { export const setRectRadiusMethod = (val) => {
const { ChangeElementCommand } = svgCanvas.history const { ChangeElementCommand } = svgCanvas.history
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!isNullish(selected) && selected.tagName === 'rect') { if (selected?.tagName === 'rect') {
const r = Number(selected.getAttribute('rx')) const r = Number(selected.getAttribute('rx'))
if (r !== val) { if (r !== val) {
selected.setAttribute('rx', val) selected.setAttribute('rx', val)
@ -896,7 +893,7 @@ export const setRectRadiusMethod = function (val) {
* @param {string} url * @param {string} url
* @returns {void} * @returns {void}
*/ */
export const makeHyperlinkMethod = function (url) { export const makeHyperlinkMethod = (url) => {
svgCanvas.groupSelectedElements('a', url) svgCanvas.groupSelectedElements('a', url)
// TODO: If element is a single "g", convert to "a" // TODO: If element is a single "g", convert to "a"
@ -907,7 +904,7 @@ export const makeHyperlinkMethod = function (url) {
* @function module:svgcanvas.SvgCanvas#removeHyperlink * @function module:svgcanvas.SvgCanvas#removeHyperlink
* @returns {void} * @returns {void}
*/ */
export const removeHyperlinkMethod = function () { export const removeHyperlinkMethod = () => {
svgCanvas.ungroupSelectedElement() svgCanvas.ungroupSelectedElement()
} }
@ -932,7 +929,7 @@ export const setSegTypeMethod = function (newType) {
* @param {string} url - URL or path to image to use * @param {string} url - URL or path to image to use
* @returns {void} * @returns {void}
*/ */
export const setBackgroundMethod = function (color, url) { export const setBackgroundMethod = (color, url) => {
const bg = getElement('canvasBackground') const bg = getElement('canvasBackground')
const border = bg.querySelector('rect') const border = bg.querySelector('rect')
let bgImg = getElement('background_image') let bgImg = getElement('background_image')

4
src/svgcanvas/json.js
View File

@ -64,7 +64,7 @@ export const getJsonFromSvgElements = (data) => {
* @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElementsFromJson} * @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElementsFromJson}
*/ */
export const addSVGElementsFromJson = function (data) { export const addSVGElementsFromJson = (data) => {
if (typeof data === 'string') return svgdoc_.createTextNode(data) if (typeof data === 'string') return svgdoc_.createTextNode(data)
let shape = getElement(data.attr.id) let shape = getElement(data.attr.id)
@ -86,7 +86,7 @@ export const addSVGElementsFromJson = function (data) {
assignAttributes(shape, { assignAttributes(shape, {
fill: curShape.fill, fill: curShape.fill,
stroke: curShape.stroke, stroke: curShape.stroke,
'stroke-width': curShape.stroke_width, 'stroke-width': curShape.strokeWidth,
'stroke-dasharray': curShape.stroke_dasharray, 'stroke-dasharray': curShape.stroke_dasharray,
'stroke-linejoin': curShape.stroke_linejoin, 'stroke-linejoin': curShape.stroke_linejoin,
'stroke-linecap': curShape.stroke_linecap, 'stroke-linecap': curShape.stroke_linecap,

8
src/svgcanvas/sanitize.js
View File

@ -47,7 +47,7 @@ const svgWhiteList_ = {
metadata: [], metadata: [],
path: ['clip-path', 'clip-rule', 'd', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'], path: ['clip-path', 'clip-rule', 'd', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'],
pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'], pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'],
polygon: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift'], polygon: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift', 'r2', 'orient', 'cx', 'cy'],
polyline: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'se:connector'], polyline: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'se:connector'],
radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'], radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'],
rect: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'width', 'x', 'y'], rect: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'width', 'x', 'y'],
@ -104,7 +104,7 @@ Object.keys(svgWhiteList_).forEach((element) => { svgWhiteList_[element] = [...s
const svgWhiteListNS_ = {} const svgWhiteListNS_ = {}
Object.entries(svgWhiteList_).forEach(([elt, atts]) => { Object.entries(svgWhiteList_).forEach(([elt, atts]) => {
const attNS = {} const attNS = {}
Object.entries(atts).forEach(function ([_i, att]) { Object.entries(atts).forEach(([_i, att]) => {
if (att.includes(':')) { if (att.includes(':')) {
const v = att.split(':') const v = att.split(':')
attNS[v[1]] = NS[(v[0]).toUpperCase()] attNS[v[1]] = NS[(v[0]).toUpperCase()]
@ -122,7 +122,7 @@ Object.entries(svgWhiteList_).forEach(([elt, atts]) => {
* @param {Text|Element} node - The DOM element to be checked (we'll also check its children) or text node to be cleaned up * @param {Text|Element} node - The DOM element to be checked (we'll also check its children) or text node to be cleaned up
* @returns {void} * @returns {void}
*/ */
export const sanitizeSvg = function (node) { export const sanitizeSvg = (node) => {
// Cleanup text nodes // Cleanup text nodes
if (node.nodeType === 3) { // 3 === TEXT_NODE if (node.nodeType === 3) { // 3 === TEXT_NODE
// Trim whitespace // Trim whitespace
@ -216,7 +216,7 @@ export const sanitizeSvg = function (node) {
} }
// if the element has attributes pointing to a non-local reference, // if the element has attributes pointing to a non-local reference,
// need to remove the attribute // need to remove the attribute
Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], function (attr) { Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], (attr) => {
let val = node.getAttribute(attr) let val = node.getAttribute(attr)
if (val) { if (val) {
val = getUrlFromAttr(val) val = getUrlFromAttr(val)

10
src/svgcanvas/svgcanvas.js
View File

@ -237,7 +237,7 @@ class SvgCanvas {
elemGetSet.init(this) elemGetSet.init(this)
// prevent links from being followed in the canvas // prevent links from being followed in the canvas
const handleLinkInCanvas = function (e) { const handleLinkInCanvas = (e) => {
e.preventDefault() e.preventDefault()
return false return false
} }
@ -396,7 +396,6 @@ class SvgCanvas {
setbSpline (value) { this.bSpline = value } setbSpline (value) { this.bSpline = value }
setNextPos (value) { this.nextPos = value } setNextPos (value) { this.nextPos = value }
setNextParameter (value) { this.nextParameter = value } setNextParameter (value) { this.nextParameter = value }
setCurProperties (key, value) { this.curProperties[key] = value }
setCurText (key, value) { this.curText[key] = value } setCurText (key, value) { this.curText[key] = value }
setFreehand (key, value) { this.freehand[key] = value } setFreehand (key, value) { this.freehand[key] = value }
setCurBBoxes (value) { this.curBBoxes = value } setCurBBoxes (value) { this.curBBoxes = value }
@ -424,6 +423,7 @@ class SvgCanvas {
getrefAttrs () { return refAttrs } getrefAttrs () { return refAttrs }
getcanvg () { return canvg } getcanvg () { return canvg }
setCanvas (key, value) { this[key] = value } setCanvas (key, value) { this[key] = value }
setCurProperties (key, value) { this.curProperties[key] = value }
getCurProperties (key) { return this.curProperties[key] } getCurProperties (key) { return this.curProperties[key] }
setCurShape (key, value) { this.curShape[key] = value } setCurShape (key, value) { this.curShape[key] = value }
gettingSelectorManager () { return this.selectorManager } gettingSelectorManager () { return this.selectorManager }
@ -508,7 +508,7 @@ class SvgCanvas {
restoreRefElements (elem) { restoreRefElements (elem) {
// Look for missing reference elements, restore any found // Look for missing reference elements, restore any found
const attrs = {} const attrs = {}
refAttrs.forEach(function (item, _) { refAttrs.forEach((item, _) => {
attrs[item] = elem.getAttribute(item) attrs[item] = elem.getAttribute(item)
}) })
Object.values(attrs).forEach((val) => { Object.values(attrs).forEach((val) => {
@ -557,7 +557,7 @@ class SvgCanvas {
flashStorage () { flashStorage () {
const data = sessionStorage.getItem(CLIPBOARD_ID) const data = sessionStorage.getItem(CLIPBOARD_ID)
localStorage.setItem(CLIPBOARD_ID, data) localStorage.setItem(CLIPBOARD_ID, data)
setTimeout(function () { setTimeout(() => {
localStorage.removeItem(CLIPBOARD_ID) localStorage.removeItem(CLIPBOARD_ID)
}, 1) }, 1)
} }
@ -581,7 +581,7 @@ class SvgCanvas {
* @returns {void} * @returns {void}
*/ */
removeFromSelection (elemsToRemove) { removeFromSelection (elemsToRemove) {
if (isNullish(this.selectedElements[0])) { return } if (!this.selectedElements[0]) { return }
if (!elemsToRemove.length) { return } if (!elemsToRemove.length) { return }
// find every element and remove it from our array copy // find every element and remove it from our array copy