Page MenuHomec4science
Files F102192472

ext-star.js
No OneTemporary
Actions

File Metadata

Created
Tue, Feb 18, 02:45

ext-star.js
View Options

//# sourceURL=ext-star.js
/*globals svgEditor, svgedit, svgCanvas, $*/
/*jslint vars: true, eqeq: true*/
/*
* 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,
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; }');
$('#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(),
'vector-effect':'non-scaling-stroke',
'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 ('point' == orient) {
angle -= (Math.PI / 2);
} else if ('edge' == orient) {
angle = (angle + (Math.PI / point)) - (Math.PI / 2);
}
x = (circumradius * Math.cos(angle)) + cx;
y = (circumradius * Math.sin(angle)) + cy;
polyPoints += x + ',' + y + ' ';
if (null != inradius) {
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;
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);
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];
}
};
});

Event Timeline

c4science · Help