From f410e2100669672cfa03450d8d76765091c67eca Mon Sep 17 00:00:00 2001
From: Chance Roth <aobjects@gmail.com>
Date: Fri, 18 Jan 2013 18:05:41 +0000
Subject: [PATCH] Added Star and Polygon Extensions - Looks like Firefox
 recently broke something and shows mitre ends too long. USed to work great,
 Chrome is fine. v.2

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2319 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/extensions/ext-polygon.js    | 233 ++++++++++++++++++++++++++
 editor/extensions/ext-star.js       | 248 ++++++++++++++++++++++++++++
 editor/extensions/polygon-icons.svg |  14 ++
 editor/extensions/star-icons.svg    |  14 ++
 4 files changed, 509 insertions(+)
 create mode 100644 editor/extensions/ext-polygon.js
 create mode 100644 editor/extensions/ext-star.js
 create mode 100644 editor/extensions/polygon-icons.svg
 create mode 100644 editor/extensions/star-icons.svg

diff --git a/editor/extensions/ext-polygon.js b/editor/extensions/ext-polygon.js
new file mode 100644
index 00000000..64844a77
--- /dev/null
+++ b/editor/extensions/ext-polygon.js
@@ -0,0 +1,233 @@
+/*
+ * ext-polygon.js
+ *
+ *
+ * Copyright(c) 2010 CloudCanvas, Inc.
+ * All rights reserved
+ *
+ */
+svgEditor.addExtension("polygon", function(S){
+
+    var svgcontent = S.svgcontent, addElem = S.addSvgElementFromJson, selElems, svgns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink", xmlns = "http://www.w3.org/XML/1998/namespace", xmlnsns = "http://www.w3.org/2000/xmlns/", se_ns = "http://svg-edit.googlecode.com", htmlns = "http://www.w3.org/1999/xhtml", editingitex = false, svgdoc = S.svgroot.parentNode.ownerDocument, started, newFO, edg = 0, newFOG, newFOGParent, newDef, newImageName, newMaskID, undoCommand = "Not image", modeChangeG;
+    
+    var ccZoom;
+    var wEl, hEl;
+    var wOffset, hOffset;
+    var ccRBG, ccRgbEl;
+    var ccOpacity;
+    var brushW, brushH, shape;
+    
+    var ccDebug = document.getElementById('debugpanel');
+    
+    
+    /* var properlySourceSizeTextArea = function(){
+     // TODO: remove magic numbers here and get values from CSS
+     var height = $('#svg_source_container').height() - 80;
+     $('#svg_source_textarea').css('height', height);
+     }; */
+    function showPanel(on){
+        var fc_rules = $('#fc_rules');
+        if (!fc_rules.length) {
+            fc_rules = $('<style id="fc_rules"><\/style>').appendTo('head');
+        }
+        fc_rules.text(!on ? "" : " #tool_topath { display: none !important; }");
+        $('#polygon_panel').toggle(on);
+    }
+    
+    function toggleSourceButtons(on){
+        $('#tool_source_save, #tool_source_cancel').toggle(!on);
+        $('#polygon_save, #polygon_cancel').toggle(on);
+    }
+    
+    function setAttr(attr, val){
+        svgCanvas.changeSelectedAttribute(attr, val);
+        S.call("changed", selElems);
+    }
+    
+    function cot(n){
+        return 1 / Math.tan(n);
+    };
+    
+    function sec(n){
+        return 1 / Math.cos(n);
+    };
+    
+    
+    
+    return {
+        name: "polygon",
+        svgicons: "extensions/polygon-icons.svg",
+        buttons: [{
+            id: "tool_polygon",
+            type: "mode",
+            title: "Polygon Tool",
+            position: 11,
+            events: {
+                'click': function(){
+                    svgCanvas.setMode('polygon');
+					showPanel(true);
+                }
+            }
+        }],
+        
+        context_tools: [{
+            type: "input",
+            panel: "polygon_panel",
+            title: "Number of Sides",
+            id: "polySides",
+            label: "sides",
+            size: 3,
+            defval: 5,
+            events: {
+                change: function(){
+                    setAttr('sides', this.value);
+					
+                }
+            }
+        }],
+        
+        callback: function(){
+        
+            $('#polygon_panel').hide();
+            
+            var endChanges = function(){
+            }
+            
+            // TODO: Needs to be done after orig icon loads
+            setTimeout(function(){
+                // Create source save/cancel buttons
+                var save = $('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo("#tool_source_back").click(function(){
+                
+                    if (!editingitex) 
+                        return;
+                    
+                    if (!setItexString($('#svg_source_textarea').val())) {
+                        $.confirm("Errors found. Revert to original?", function(ok){
+                            if (!ok) 
+                                return false;
+                            endChanges();
+                        });
+                    }
+                    else {
+                        endChanges();
+                    }
+                    // setSelectMode();	
+                });
+                
+                var cancel = $('#tool_source_cancel').clone().hide().attr('id', 'polygon_cancel').unbind().appendTo("#tool_source_back").click(function(){
+                    endChanges();
+                });
+                
+            }, 3000);
+        },
+        mouseDown: function(opts){
+            var e = opts.event;
+            rgb = svgCanvas.getColor("fill");
+            ccRgbEl = rgb.substring(1, rgb.length);
+            sRgb = svgCanvas.getColor("stroke");
+            ccSRgbEl = sRgb.substring(1, rgb.length);
+            sRgb = svgCanvas.getColor("stroke");
+            sWidth = svgCanvas.getStrokeWidth();
+            
+            if (svgCanvas.getMode() == "polygon") {
+                started = true;
+                
+                newFO = S.addSvgElementFromJson({
+                    "element": "polygon",
+                    "attr": {
+                        "cx": opts.start_x,
+                        "cy": opts.start_y,
+                        "id": S.getNextId(),
+                        "shape": "regularPoly",
+                        "sides": document.getElementById("polySides").value,
+                        "orient": "x",
+                        "edge": 0,
+                        "fill": rgb,
+                        "strokecolor": sRgb,
+                        "strokeWidth": sWidth
+                    }
+                });
+                
+                return {
+                    started: true
+                }
+            }
+        },
+        mouseMove: function(opts){
+            if (!started) 
+                return;
+            if (svgCanvas.getMode() == "polygon") {
+                var e = opts.event;
+                var x = opts.mouse_x;
+                var y = opts.mouse_y;
+                var c = $(newFO).attr(["cx", "cy", "sides", "orient", "fill", "strokecolor", "strokeWidth"]);
+                var cx = c.cx, cy = c.cy, fill = c.fill, strokecolor = c.strokecolor, strokewidth = c.strokeWidth, sides = c.sides, orient = c.orient, edg = (Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy))) / 1.5;
+                newFO.setAttributeNS(null, "edge", edg);
+                
+                var inradius = (edg / 2) * cot(Math.PI / sides);
+                var circumradius = inradius * sec(Math.PI / sides);
+                var points = '';
+                for (var s = 0; sides >= s; s++) {
+                    var angle = 2.0 * Math.PI * s / sides;
+                    var x = (circumradius * Math.cos(angle)) + cx;
+                    var y = (circumradius * Math.sin(angle)) + cy;
+                    
+                    points += x + ',' + y + ' ';
+                }
+                
+                //var poly = newFO.createElementNS(svgns, 'polygon');
+                newFO.setAttributeNS(null, 'points', points);
+                newFO.setAttributeNS(null, 'fill', fill);
+                newFO.setAttributeNS(null, 'stroke', strokecolor);
+                newFO.setAttributeNS(null, 'stroke-width', strokewidth);
+				// newFO.setAttributeNS(null, 'transform', "rotate(-90)");
+                shape = newFO.getAttributeNS(null, 'shape');
+                //newFO.appendChild(poly);
+                //DrawPoly(cx, cy, sides, edg, orient);
+                return {
+                    started: true
+                }
+            }
+            
+        },
+        
+        mouseUp: function(opts){
+            if (svgCanvas.getMode() == "polygon") {
+                var attrs = $(newFO).attr("edge");
+                keep = (attrs.edge != 0);
+               // svgCanvas.addToSelection([newFO], true);
+                return {
+                    keep: keep,
+                    element: newFO
+                }
+            }
+            
+        },
+        selectedChanged: function(opts){
+            // Use this to update the current selected elements
+            selElems = opts.elems;
+            
+            var i = selElems.length;
+            
+            while (i--) {
+                var elem = selElems[i];
+                if (elem && elem.getAttributeNS(null, 'shape') == "regularPoly") {
+                    if (opts.selectedElement && !opts.multiselected) {
+                        $('#polySides').val(elem.getAttribute("sides"));
+                        
+                        showPanel(true);
+                    }
+                    else {
+                        showPanel(false);
+                    }
+                }
+                else {
+                    showPanel(false);
+                }
+            }
+        },
+        elementChanged: function(opts){
+            var elem = opts.elems[0];
+        }
+    };
+});
diff --git a/editor/extensions/ext-star.js b/editor/extensions/ext-star.js
new file mode 100644
index 00000000..28c265c5
--- /dev/null
+++ b/editor/extensions/ext-star.js
@@ -0,0 +1,248 @@
+/*
+ * ext-star.js
+ *
+ *
+ * Copyright(c) 2010 CloudCanvas, Inc.
+ * All rights reserved
+ *
+ */
+
+svgEditor.addExtension("star", function(S){
+
+    var svgcontent = S.svgcontent, addElem = S.addSvgElementFromJson, selElems, svgns = "http://www.w3.org/2000/svg", xlinkns = "http://www.w3.org/1999/xlink", xmlns = "http://www.w3.org/XML/1998/namespace", xmlnsns = "http://www.w3.org/2000/xmlns/", se_ns = "http://svg-edit.googlecode.com", htmlns = "http://www.w3.org/1999/xhtml", editingitex = false, svgdoc = S.svgroot.parentNode.ownerDocument, started, newFO, edg = 0, newFOG, newFOGParent, newDef, newImageName, newMaskID, undoCommand = "Not image", modeChangeG;
+    
+    var ccZoom;
+    var wEl, hEl;
+    var wOffset, hOffset;
+    var ccRBG, ccRgbEl;
+    var ccOpacity;
+    var brushW, brushH, shape;
+    
+    var ccDebug = document.getElementById('debugpanel');
+    
+    function showPanel(on){
+        var fc_rules = $('#fc_rules');
+        if (!fc_rules.length) {
+            fc_rules = $('<style id="fc_rules"><\/style>').appendTo('head');
+        }
+        fc_rules.text(!on ? "" : " #tool_topath { display: none !important; }");
+        $('#star_panel').toggle(on);
+    }
+    
+    function toggleSourceButtons(on){
+        $('#star_save, #star_cancel').toggle(on);
+    }
+    
+    function setAttr(attr, val){
+        svgCanvas.changeSelectedAttribute(attr, val);
+        S.call("changed", selElems);
+    }
+    
+    function cot(n){
+        return 1 / Math.tan(n);
+    };
+    
+    function sec(n){
+        return 1 / Math.cos(n);
+    };
+    
+    return {
+        name: "star",
+        svgicons: "extensions/star-icons.svg",
+        buttons: [{
+            id: "tool_star",
+            type: "mode",
+            title: "Star Tool",
+            position: 12,
+            events: {
+                'click': function(){
+					showPanel(true);
+                    svgCanvas.setMode('star')
+                }
+            }
+        }],
+        
+        context_tools: [{
+            type: "input",
+            panel: "star_panel",
+            title: "Number of Sides",
+            id: "starNumPoints",
+            label: "points",
+            size: 3,
+            defval: 5,
+            events: {
+                change: function(){
+                    setAttr('point', this.value);
+                }
+            }
+        }, {
+            type: "input",
+            panel: "star_panel",
+            title: "Pointiness",
+            id: "starRadiusMulitplier",
+            label: "Pointiness",
+            size: 3,
+            defval: 2.5
+        }, {
+            type: "input",
+            panel: "star_panel",
+            title: "Twists the star",
+            id: "radialShift",
+            label: "Radial Shift",
+            size: 3,
+            defval: 0,
+            events: {
+                change: function(){
+                    setAttr('radialshift', this.value);
+                }
+            }
+        }],
+        
+        callback: function(){
+            $('#star_panel').hide();
+            
+            var endChanges = function(){
+            }
+            
+            
+        },
+        mouseDown: function(opts){
+            var e = opts.event;
+            rgb = svgCanvas.getColor("fill");
+            ccRgbEl = rgb.substring(1, rgb.length);
+            sRgb = svgCanvas.getColor("stroke");
+            ccSRgbEl = sRgb.substring(1, rgb.length);
+            sRgb = svgCanvas.getColor("stroke");
+            sWidth = svgCanvas.getStrokeWidth();
+            
+            if (svgCanvas.getMode() == "star") {
+                started = true;
+                
+                newFO = S.addSvgElementFromJson({
+                    "element": "polygon",
+                    "attr": {
+                        "cx": opts.start_x,
+                        "cy": opts.start_y,
+                        "id": S.getNextId(),
+                        "shape": "star",
+                        "point": document.getElementById('starNumPoints').value,
+                        "r": 0,
+                        "radialshift": document.getElementById('radialShift').value,
+                        "r2": 0,
+                        "orient": "point",
+                        "fill": rgb,
+                        "strokecolor": sRgb,
+                        "strokeWidth": sWidth
+                    }
+                });
+                
+                return {
+                    started: true
+                }
+            }
+        },
+        mouseMove: function(opts){
+            if (!started) 
+                return;
+            if (svgCanvas.getMode() == "star") {
+                var e = opts.event;
+                var x = opts.mouse_x;
+                var y = opts.mouse_y;
+                var c = $(newFO).attr(["cx", "cy", "point", "orient", "fill", "strokecolor", "strokeWidth", "radialshift"]);
+                
+                var cx = c.cx, cy = c.cy, fill = c.fill, strokecolor = c.strokecolor, strokewidth = c.strokeWidth, radialShift = c.radialshift, point = c.point, orient = c.orient, circumradius = (Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy))) / 1.5, inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
+                newFO.setAttributeNS(null, "r", circumradius);
+                newFO.setAttributeNS(null, "r2", inradius);
+                
+                
+                var polyPoints = '';
+                for (var s = 0; point >= s; s++) {
+                    var angle = 2.0 * Math.PI * (s / point);
+                    if ('point' == orient) {
+                        angle -= (Math.PI / 2);
+                    }
+                    else 
+                        if ('edge' == orient) {
+                            angle = (angle + (Math.PI / point)) - (Math.PI / 2);
+                        }
+                    
+                    
+                    var x = (circumradius * Math.cos(angle)) + cx;
+                    var y = (circumradius * Math.sin(angle)) + cy;
+                    
+                    polyPoints += x + ',' + y + ' ';
+                    
+                    if (null != inradius) {
+                        var angle = (2.0 * Math.PI * (s / point)) + (Math.PI / point);
+                        if ('point' == orient) {
+                            angle -= (Math.PI / 2);
+                        }
+                        else 
+                            if ('edge' == orient) {
+                                angle = (angle + (Math.PI / point)) - (Math.PI / 2);
+                            }
+                        angle += radialShift;
+                        
+                        var x = (inradius * Math.cos(angle)) + cx;
+                        var y = (inradius * Math.sin(angle)) + cy;
+                        
+                        polyPoints += x + ',' + y + ' ';
+                    }
+                    
+                }
+                newFO.setAttributeNS(null, 'points', polyPoints);
+                newFO.setAttributeNS(null, 'fill', fill);
+                newFO.setAttributeNS(null, 'stroke', strokecolor);
+                newFO.setAttributeNS(null, 'stroke-width', strokewidth);
+                shape = newFO.getAttributeNS(null, 'shape');
+                
+                return {
+                    started: true
+                }
+            }
+            
+        },
+        
+        mouseUp: function(opts){
+            if (svgCanvas.getMode() == "star") {
+            
+                var attrs = $(newFO).attr(["r"]);
+                keep = (attrs.r != 0);
+               // svgCanvas.addToSelection([newFO], true);
+                return {
+                    keep: keep,
+                    element: newFO
+                }
+            }
+            
+        },
+        
+        selectedChanged: function(opts){
+            // Use this to update the current selected elements
+            selElems = opts.elems;
+            
+            var i = selElems.length;
+            
+            while (i--) {
+                var elem = selElems[i];
+                if (elem && elem.getAttributeNS(null, 'shape') == "star") {
+                    if (opts.selectedElement && !opts.multiselected) {
+                        // $('#starRadiusMulitplier').val(elem.getAttribute("r2"));
+                        $('#starNumPoints').val(elem.getAttribute("point"));
+                        $('#radialShift').val(elem.getAttribute("radialshift"));
+                        showPanel(true);
+                    }
+                    else {
+                        showPanel(false);
+                    }
+                }
+                else {
+                    showPanel(false);
+                }
+            }
+        },
+        elementChanged: function(opts){
+            var elem = opts.elems[0];
+        }
+    };
+});
diff --git a/editor/extensions/polygon-icons.svg b/editor/extensions/polygon-icons.svg
new file mode 100644
index 00000000..42a77f60
--- /dev/null
+++ b/editor/extensions/polygon-icons.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+	<g id="tool_polygon">
+     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -2 25 24">
+     	<defs>
+		<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_i22">
+			<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
+			<stop stop-opacity="1" stop-color="#666666" offset="1"/>
+		</linearGradient>
+		</defs>
+		<polygon points="6.09251,19.6032 0.577744,10.0516 6.09251,0.5 17.1217,0.5 22.6365,10.0516 17.1217,19.6032" stroke="#000000" fill="url(#svg_i22)"/>	 </svg>
+	</g>
+	
+	<g id="svg_eof"/>
+</svg>
\ No newline at end of file
diff --git a/editor/extensions/star-icons.svg b/editor/extensions/star-icons.svg
new file mode 100644
index 00000000..33e80fe3
--- /dev/null
+++ b/editor/extensions/star-icons.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+	<g id="tool_star">
+     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 26 26">
+     	<defs>
+		<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_i22">
+			<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
+			<stop stop-opacity="1" stop-color="#666666" offset="1"/>
+		</linearGradient>
+		</defs>
+		<polygon points="12.4062,1.55891 15.0578,9.39339 23.3283,9.49422 16.6965,14.4371 19.1564,22.3338 12.4062,17.5543 5.65596,22.3338 8.11588,14.4371 1.48406,9.49422 9.75455,9.39339" stroke="#000000" fill="url(#svg_i22)"/>	 </svg>
+	</g>
+	
+	<g id="svg_eof"/>
+</svg>
\ No newline at end of file