123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294 |
- svgEditor.addExtension("polygon", function(S) {'use strict';
- var
-
-
- selElems,
- editingitex = false,
-
-
-
-
- started, newFO;
-
-
-
-
-
- var ccRgbEl;
-
-
- var shape;
-
-
-
-
- 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 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: svgEditor.curConfig.extPath + "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(){
- };
-
-
- setTimeout(function(){
-
- 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();
- }
-
- });
-
- var cancel = $('#tool_source_cancel').clone().hide().attr('id', 'polygon_cancel').unbind().appendTo("#tool_source_back").click(function(){
- endChanges();
- });
-
- }, 3000);
- },
- mouseDown: function(opts){
-
- var rgb = svgCanvas.getColor("fill");
- ccRgbEl = rgb.substring(1, rgb.length);
- var sRgb = svgCanvas.getColor("stroke");
-
- var 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 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,
-
- 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 = '';
- var s;
- for (s = 0; sides >= s; s++) {
- var angle = 2.0 * Math.PI * s / sides;
- x = (circumradius * Math.cos(angle)) + cx;
- y = (circumradius * Math.sin(angle)) + cy;
-
- points += x + ',' + y + ' ';
- }
-
-
- newFO.setAttributeNS(null, 'points', points);
- 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() == "polygon") {
- var attrs = $(newFO).attr("edge");
- var keep = (attrs.edge != 0);
-
- return {
- keep: keep,
- element: newFO
- };
- }
-
- },
- selectedChanged: function(opts){
-
- 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){
-
- }
- };
- });
|