svgedit/editor/extensions/ext-star.js

/* eslint-disable no-var */
/* globals svgEditor, svgCanvas, $ */
/*
 * ext-star.js
 *
 *
 * Copyright(c) 2010 CloudCanvas, Inc.
 * All rights reserved
 *
 */

svgEditor.addExtension('star', function (S) {
  'use strict';

  var // NS = svgedit.NS,
    // svgcontent = S.svgcontent,
    selElems,
    // editingitex = false,
    // svgdoc = S.svgroot.parentNode.ownerDocument,
    started,
    newFO;
    // edg = 0,
    // newFOG, newFOGParent, newDef, newImageName, newMaskID,
    // undoCommand = 'Not image',
    // modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;

  function showPanel (on) {
    var fcRules = $('#fc_rules');
    if (!fcRules.length) {
      fcRules = $('<style id="fc_rules"></style>').appendTo('head');
    }
    fcRules.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: svgEditor.curConfig.extPath + '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 rgb = svgCanvas.getColor('fill');
      // var ccRgbEl = rgb.substring(1, rgb.length);
      var sRgb = svgCanvas.getColor('stroke');
      // var ccSRgbEl = sRgb.substring(1, rgb.length);
      var 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 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 = '';
        var s;
        for (s = 0; point >= s; s++) {
          var 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);
          }

          x = (circumradius * Math.cos(angle)) + cx;
          y = (circumradius * Math.sin(angle)) + cy;

          polyPoints += x + ',' + y + ' ';

          if (inradius != null) {
            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 + ' ';
          }
        }
        newFO.setAttributeNS(null, 'points', polyPoints);
        newFO.setAttributeNS(null, 'fill', fill);
        newFO.setAttributeNS(null, 'stroke', strokecolor);
        newFO.setAttributeNS(null, 'stroke-width', strokewidth);
        /* var shape = */ newFO.getAttributeNS(null, 'shape');

        return {
          started: true
        };
      }
    },
    mouseUp: function () {
      if (svgCanvas.getMode() === 'star') {
        var attrs = $(newFO).attr(['r']);
        // svgCanvas.addToSelection([newFO], true);
        return {
          keep: (attrs.r !== '0'),
          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];
    }
  };
});