From a4adc95e9f4c2b1bd12cf08acdfdeda197c0097c Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Fri, 11 Jun 2021 17:02:14 +0530 Subject: [PATCH] #374 star Polygon, number-of-point update after not reflect issue fixed --- .../extensions/ext-polystar/ext-polystar.js | 60 ++++++++++++++++++- src/svgcanvas/sanitize.js | 2 +- 2 files changed, 59 insertions(+), 3 deletions(-) diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 3a3560f9..d765333d 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -136,6 +136,61 @@ export default { showPanel(false, "polygon"); $id("starNumPoints").addEventListener("change", (event) => { setAttr("point", event.target.value); + const orient = 'point'; + const point = event.target.value; + let i = selElems.length; + while (i--) { + const elem = selElems[i]; + if (elem.hasAttribute('r')) { + const radialshift = elem.getAttribute('radialshift'); + let xpos = 0; + let ypos = 0; + if (elem.points) { + const list = elem.points; + const len = list.numberOfItems; + for (let i = 0; i < len; ++i) { + const pt = list.getItem(i); + xpos += parseFloat(pt.x); + ypos += parseFloat(pt.y); + } + const cx = xpos / len; + const cy = ypos / len; + const circumradius = elem.getAttribute('r'); + const inradius = circumradius / elem.getAttribute('starRadiusMultiplier'); + + let polyPoints = ""; + for (let s = 0; point >= s; s++) { + let angle = 2.0 * Math.PI * (s / point); + if (orient === "point") { + angle -= Math.PI / 2; + } else if (orient === "edge") { + angle = angle + Math.PI / point - Math.PI / 2; + } + + let x = circumradius * Math.cos(angle) + cx; + let y = circumradius * Math.sin(angle) + cy; + + polyPoints += x + "," + y + " "; + + if (!isNaN(inradius)) { + angle = 2.0 * Math.PI * (s / point) + Math.PI / point; + if (orient === "point") { + angle -= Math.PI / 2; + } else if (orient === "edge") { + angle = angle + Math.PI / point - Math.PI / 2; + } + angle += radialshift; + + x = inradius * Math.cos(angle) + cx; + y = inradius * Math.sin(angle) + cy; + + polyPoints += x + "," + y + " "; + } + } + elem.setAttribute("points", polyPoints); + } + } + } }); $id("RadiusMultiplier").addEventListener("change", (event) => { setAttr("starRadiusMultiplier", event.target.value); @@ -254,10 +309,11 @@ export default { const circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5; + const RadiusMultiplier = document.getElementById("RadiusMultiplier").value; const inradius = - circumradius / document.getElementById("RadiusMultiplier").value; + circumradius / RadiusMultiplier; newFO.setAttribute("r", circumradius); - newFO.setAttribute("r2", inradius); + newFO.setAttribute('starRadiusMultiplier', RadiusMultiplier); let polyPoints = ""; for (let s = 0; point >= s; s++) { diff --git a/src/svgcanvas/sanitize.js b/src/svgcanvas/sanitize.js index 5c53fbfe..f6d2e643 100644 --- a/src/svgcanvas/sanitize.js +++ b/src/svgcanvas/sanitize.js @@ -49,7 +49,7 @@ const svgWhiteList_ = { metadata: [ 'class', 'id' ], path: [ 'class', 'clip-path', 'clip-rule', 'd', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ], pattern: [ 'class', 'height', 'id', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y' ], - polygon: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', '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', 'style', 'systemLanguage', 'transform', 'sides', 'shape', 'edge' ], + polygon: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', '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', 'style', 'systemLanguage', 'transform', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift' ], polyline: [ 'class', 'clip-path', 'clip-rule', 'id', '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', 'style', 'systemLanguage', 'transform', 'se:connector' ], radialGradient: [ 'class', 'cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'id', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href' ], rect: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'width', 'x', 'y' ],