zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changes everywhere

master
Mark MacKay 2012-07-23 21:30:12 -05:00
parent ff56e14e64
commit 7619906dd3
42 changed files with 8998 additions and 5930 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Makefile
View File

@ -11,8 +11,7 @@ JS_FILES=\
js-hotkeys/jquery.hotkeys.min.js \
jquerybbq/jquery.bbq.min.js \
svgicons/jquery.svgicons.js \
jgraduate/jquery.jgraduate.min.js \
spinbtn/JQuerySpinBtn.min.js \
jgraduate/jquery.jgraduate.js \
touch.js \
contextmenu/jquery.contextmenu.js \
browser.js \
@ -27,8 +26,8 @@ JS_FILES=\
path.js \
svgcanvas.js \
svg-editor.js \
jquery-draginput.js \
contextmenu.js \
locale/locale.js \
jquery-ui/jquery-ui-1.8.17.custom.min.js \
jgraduate/jpicker.min.js \
mousewheel.js \
@ -36,6 +35,7 @@ JS_FILES=\
extensions/ext-markers.js \
extensions/ext-grid.js \
extensions/ext-shapes.js \
requestanimationframe.js
CSS_FILES=\
fonts.css \

97
editor/draginput.js Normal file
View File

@ -0,0 +1,97 @@
/* 2012 Mark MacKay, MIT License*/
(function() {
var $;
$ = jQuery;
$.fn.extend({
dragInput: function(options) {
var settings = {
decimals: 0,
dragArea: 100,
moveCallback: function(){},
cursorColor: "#c00"
};
settings = $.extend(settings, options);
var input = $(this).find('input').first();
var dragInput = $(this)
var cursor = $("<div class='draginput_cursor'/>").appendTo(dragInput);
// initial values
var min = input.attr("data-min") || 0;
var max = input.attr("data-max") || 100;
var step = input.attr("data-step") || 1;
var val = input.attr("value") || 0;
var dragArea = settings.dragArea;
var cursorArea = dragInput.height();
dragInput.attr("readonly", "readonly")
var change = function(){
cursor.css("top", (input.attr("value")*-1) * (cursorArea/(max-min)) + cursorArea)
};
change();
var start = function(event) {
$('body').addClass('grabbing')
var oy = event.pageY;
var val = parseFloat(input.attr('value'));
var el_oy = dragInput.offset().top;
//updates on move and end
$(window).bind("mousemove.dragInput touchmove.dragInput", function(e) {move(e, oy, val, el_oy)});
$(window).bind("mouseup.dragInput touchend.dragInput", end);
};
var move = function(e, oy, val, el_oy) {
var y = e.pageY;
var range = (max-min) / dragArea
var dy = (y - oy)*-1 + val/range;
val = range * dy
if (val > max) {
var offset = (val*-1) * (cursorArea/(max-min)) + cursorArea;
if (offset > -30) { dragInput.css({"-webkit-transform": "translate(0,"+ (offset) +"px)"})}
else {dragInput.addClass("rubberband")}
val = max;
}
if (val < min) {
var offset = (val*-1) * (cursorArea/(max-min));
if (offset > 30) {dragInput.addClass("rubberband")}
else {dragInput.css({"-webkit-transform": "translate(0,"+ (offset) +"px)"})}
val = min;
}
cursor.css("top", (val*-1) * (cursorArea/(max-min)) + cursorArea)
input.attr("value", parseFloat(Math.round(val * 100) / 100).toFixed(settings.decimals));
settings.moveCallback();
};
var dblclick = function() {
dragInput.unbind("mousedown.dragInput touchstart.dragInput");
input.removeAttr('readonly');
input.focus()
input.select()
};
var relock = function() {
input.attr('readonly', 'readonly');
dragInput.bind("mousedown.dragInput touchstart.dragInput", start);
}
var end = function() {
$(window).unbind("mousemove.dragInput touchmove.dragInput");
$(window).unbind("mouseup.dragInput touchend.dragInput");
dragInput.removeClass("rubberband").removeAttr("style")
$('body').removeClass('grabbing');
};
return this.each(function() {
$(this).bind("mousedown.dragInput touchstart.dragInput", start);
$(this).bind("dblclick.dragInput tapHold.dragInput", dblclick);
input.bind("blur.dragInput", relock);
input.bind("keypress.dragInput", function(e){if (e.keyCode == 13) input.trigger("blur.dragInput")});
input.bind("change.dragInput", function(){change()})
});
}
});
}).call(this);

11
editor/dragupload.js Normal file
View File

@ -0,0 +1,11 @@
window.onload = function () {
document.querySelector('body').addEventListener('drop', function(e) {
e.preventDefault();
var reader = new FileReader();
reader.onload = function(evt) {
//document.querySelector('img').src = evt.target.result;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
}

6
editor/history.js
View File

@ -343,12 +343,12 @@ svgedit.history.ChangeElementCommand.prototype.unapply = function(handler) {
if(!bChangedTransform) {
var angle = svgedit.utilities.getRotationAngle(this.elem);
if (angle) {
var bbox = elem.getBBox();
var bbox = this.elem.getBBox();
var cx = bbox.x + bbox.width/2,
cy = bbox.y + bbox.height/2;
var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join('');
if (rotate != elem.getAttribute("transform")) {
elem.setAttribute("transform", rotate);
if (rotate != this.elem.getAttribute("transform")) {
this.elem.setAttribute("transform", rotate);
}
}
}

BIN
editor/images/drag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

BIN
editor/images/dragging.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 B

35
editor/images/svg_edit_icons.svg
View File

@ -2,37 +2,10 @@
<!-- All images created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g id="logo">
<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
<stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
</linearGradient>
<linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
<stop offset="0" stop-color="#ff7f00" stop-opacity="1"/>
<stop offset="1" stop-color="#ffff00"/>
</linearGradient>
<linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
<stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
<stop offset="1" stop-color="#666666" stop-opacity="1"/>
</linearGradient>
</defs>
<g>
<path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
<path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
<path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="none"/>
<path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="none"/>
<rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="none" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
<rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="none" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
<ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="none" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
<path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="none"/>
<path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="none"/>
</g>
<g>
<title>Layer 2</title>
<path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
</g>
</svg>
<svg viewBox="0 0 16 16" version="1.1">
<path id="svg_7" d="m-0.0965,16.1043l16.10001,-16.06917l-0.00001,16.06917l-16.1,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="1.5" fill="#cccccc"/>
<path id="svg_6" d="m0.0035,16.10449l0,-15.99999l16,15.99999l-16,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="1.5" fill="#666666"/>
</svg>
</g>

2149
editor/jacked.js Normal file
View File

File diff suppressed because it is too large Load Diff

8
editor/jgraduate/jquery.jgraduate.js
View File

@ -709,7 +709,7 @@ jQuery.fn.jGraduate =
trans_img.setAttributeNS(ns.xlink, 'xlink:href', bg_image);
$(stopMakerSVG).click(function(evt) {
$(stopMakerSVG).on("click touchstart", function(evt) {
stop_offset = stopMakerDiv.offset();
var target = evt.target;
if(target.tagName === 'path') return;
@ -837,13 +837,13 @@ jQuery.fn.jGraduate =
});
// bind GUI elements
$('#'+id+'_jGraduate_Ok').bind('click', function() {
$('#'+id+'_jGraduate_Ok').bind('click touchstart', function() {
$this.paint.type = curType;
$this.paint[curType] = curGradient.cloneNode(true);;
$this.paint.solidColor = null;
okClicked();
});
$('#'+id+'_jGraduate_Cancel').bind('click', function(paint) {
$('#'+id+'_jGraduate_Cancel').bind('click touchstart', function(paint) {
cancelClicked();
});
@ -1112,7 +1112,7 @@ jQuery.fn.jGraduate =
var tabs = $(idref + ' .jGraduate_tabs li');
tabs.click(function() {
tabs.on("click touchstart", function() {
tabs.removeClass('jGraduate_tab_current');
$(this).addClass('jGraduate_tab_current');
$(idref + " > div").hide();

202
editor/jquery-draginput.js vendored Normal file
View File

@ -0,0 +1,202 @@
// Mark MacKay http://method.ac MIT License
$.fn.dragInput = function(cfg){
return this.each(function(){
this.repeating = false;
// Apply specified options or defaults:
// (Ought to refactor this some day to use $.extend() instead)
this.dragCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, // Fixes bug with min:0
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && cfg.step ? Number(cfg.step) : 1,
stepfunc: cfg && cfg.stepfunc ? cfg.stepfunc : false,
page: cfg && cfg.page ? Number(cfg.page) : 10,
reset: cfg && cfg.reset ? cfg.reset : this.value,
delay: cfg && cfg.delay ? Number(cfg.delay) : 500,
interval: cfg && cfg.interval ? Number(cfg.interval) : 100,
height: 70,
cursor: cfg && cfg.cursor ? Boolean(cfg.cursor) : false,
start: cfg && cfg.start ? Number(cfg.start) : 0,
_btn_width: 20,
_direction: null,
_delay: null,
_repeat: null,
callback: cfg && cfg.callback ? cfg.callback : null
};
// if a smallStep isn't supplied, use half the regular step
this.dragCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.dragCfg.step/2;
var $label = $(this).parent();
var $input = $(this);
var cursorHeight = this.dragCfg.height;
var min = this.dragCfg.min;
var max = this.dragCfg.max
var step = this.dragCfg.step
var area = (max - min > 0) ? (max - min) / step : 200;
var scale = area/cursorHeight * step;
var lastY = 0;
var attr = this.getAttribute("data-attr");
var canvas = svgEditor.canvas
var selectedElems = canvas.getSelectedElems();
var isTouch = svgedit.browser.isTouch();
var $cursor = (area && this.dragCfg.cursor)
? $("<div class='draginput_cursor' />").appendTo($label)
: false
if ($cursor && this.dragCfg.start) $cursor.css("top", (this.dragCfg.start*-1)/scale+cursorHeight)
//this is where all the magic happens
this.adjustValue = function(i, noUndo){
var v;
if(isNaN(this.value)) {
v = this.dragCfg.reset;
} else if($.isFunction(this.dragCfg.stepfunc)) {
v = this.dragCfg.stepfunc(this, i);
} else {
// weirdest javascript bug ever: 5.1 + 0.1 = 5.199999999
v = Number((Number(this.value) + Number(i)).toFixed(5));
}
if (max !== null) v = Math.min(v, max);
if (min !== null) v = Math.max(v, min);
if ($cursor) this.updateCursor(v);
this.value = v;
$label.attr("data-value", v)
if ($.isFunction(this.dragCfg.callback)) this.dragCfg.callback(this, noUndo)
};
$label.toggleClass("draginput", $label.is("label"))
// when the mouse is down and moving
this.move = function(e, oy, val) {
if (isTouch) {
e = e.originalEvent.touches[0]
}
// just got started let's save for undo purposes
if (lastY === 0) {
lastY = oy;
}
var deltaY = (e.pageY - lastY) *-1
lastY = e.pageY;
val = deltaY * scale
var fixed = (step < 1) ? 1 : 0
this.adjustValue(val.toFixed(fixed)) //no undo true
};
//when the mouse is released
this.stop = function() {
$('body').removeClass('dragging');
$label.removeClass("active")
$(window).unbind("mousemove.draginput touchmove.draginput mouseup.draginput touchend.draginput");
lastY = 0;
if (selectedElems[0]) {
var batchCmd = canvas.undoMgr.finishUndoableChange();
if (!batchCmd.isEmpty()) canvas.undoMgr.addCommandToHistory(batchCmd);
}
this.adjustValue(0)
}
this.updateCursor = function(){
var value = parseFloat(this.value)
var pos = (value*-1)/scale+cursorHeight
$(this).next(".draginput_cursor").css("top", pos)
}
this.start = function(e) {
if (isTouch) e = e.originalEvent.touches[0]
var oy = e.pageY;
var val = this.value;
var el = this;
canvas.undoMgr.beginUndoableChange(attr, selectedElems)
$('body').addClass('dragging');
$label.addClass('active');
$(window).bind("mousemove.draginput touchmove.draginput", function(e){el.move(e, oy, parseFloat(val))})
$(window).bind("mouseup.draginput touchend.draginput", function(e){el.stop()})
}
$(this)
.attr("readonly", "readonly")
.attr("data-scale", scale)
.attr("data-domain", cursorHeight)
.attr("data-cursor", ($cursor != false))
.bind("mousedown touchstart", function(e){this.start(e);})
.bind("dblclick taphold", function(e) {
this.removeAttribute("readonly", "readonly");
this.focus();
this.select();
})
.blur(function(e){
this.setAttribute("readonly", "readonly");
this.adjustValue(0)
})
.keydown(function(e){
// Respond to up/down arrow keys.
switch(e.keyCode){
case 13: this.blur(); break; // Enter
case 38: this.adjustValue(this.dragCfg.step); break; // Up
case 40: this.adjustValue(-this.dragCfg.step); break; // Down
case 33: this.adjustValue(this.dragCfg.page); break; // PageUp
case 34: this.adjustValue(-this.dragCfg.page); break; // PageDown
}
})
/*
http://unixpapa.com/js/key.html describes the current state-of-affairs for
key repeat events:
- Safari 3.1 changed their model so that keydown is reliably repeated going forward
- Firefox and Opera still only repeat the keypress event, not the keydown
*/
.keypress(function(e){
if (this.repeating) {
// Respond to up/down arrow keys.
switch(e.keyCode){
case 38: this.adjustValue(this.dragCfg.step); break; // Up
case 40: this.adjustValue(-this.dragCfg.step); break; // Down
case 33: this.adjustValue(this.dragCfg.page); break; // PageUp
case 34: this.adjustValue(-this.dragCfg.page); break; // PageDown
}
}
// we always ignore the first keypress event (use the keydown instead)
else {
this.repeating = true;
}
})
// clear the 'repeating' flag
.keyup(function(e) {
this.repeating = false;
switch(e.keyCode){
case 38: // Up
case 40: // Down
case 33: // PageUp
case 34: // PageDown
case 13: this.adjustValue(0); break; // Enter/Return
}
})
.bind("mousewheel", function(e, delta, deltaX, deltaY){
if (deltaY > 0)
this.adjustValue(this.dragCfg.step, true);
else if (deltaY < 0)
this.adjustValue(-this.dragCfg.step, true);
e.preventDefault();
})
});
};
// public function
$.fn.dragInput.updateCursor = function(el){
var value = parseFloat(el.value);
var scale = parseFloat(el.getAttribute("data-scale"));
var domain = parseFloat(el.getAttribute("data-domain"));
var pos = ((value*-1)/scale+domain) + "px";
var cursor = el.nextElementSibling
if (cursor) cursor.style.top = pos;
}

24
editor/requestanimationframe.js Normal file
View File

@ -0,0 +1,24 @@
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

45
editor/select.js
View File

@ -61,6 +61,10 @@ svgedit.select.Selector = function(id, elem) {
}
})
);
if (svgedit.browser.isTouch()) {
this.selectorRect.setAttribute("stroke-opacity", 0);
}
// this holds a reference to the grip coordinates for this selector
this.gripCoords = {
@ -228,17 +232,24 @@ svgedit.select.Selector.prototype.resize = function() {
var xform = angle ? 'rotate(' + [angle,cx,cy].join(',') + ')' : '';
this.selectorGroup.setAttribute('transform', xform);
nbax -= 3.5;
nbay -= 3.5;
if(svgedit.browser.isTouch()) {
nbax -= 15.75;
nbay -= 15.75;
}
else {
nbax -= 4;
nbay -= 4;
}
this.gripCoords = {
'nw': [nbax, nbay],
'ne': [nbax+nbaw, nbay],
'sw': [nbax, nbay+nbah],
'se': [nbax+nbaw, nbay+nbah],
'n': [nbax + (nbaw)/2, nbay],
'w': [nbax, nbay + (nbah)/2],
'e': [nbax + nbaw, nbay + (nbah)/2],
's': [nbax + (nbaw)/2, nbay + nbah]
'nw': [nbax, nbay].map(Math.round),
'ne': [nbax+nbaw, nbay].map(Math.round),
'sw': [nbax, nbay+nbah].map(Math.round),
'se': [nbax+nbaw, nbay+nbah].map(Math.round),
'n': [nbax + (nbaw)/2, nbay].map(Math.round),
'w': [nbax, nbay + (nbah)/2].map(Math.round),
'e': [nbax + nbaw, nbay + (nbah)/2].map(Math.round),
's': [nbax + (nbaw)/2, nbay + nbah].map(Math.round)
};
for(var dir in this.gripCoords) {
@ -351,15 +362,21 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
'element': 'rect',
'attr': {
'id': ('selectorGrip_resize_' + dir),
'width': 7,
'height': 7,
'width': 8,
'height': 8,
'fill': "#4F80FF",
'stroke': "transparent",
'stroke-width': 2,
'stroke': "rgba(0,0,0,0)",
'stroke-width': 1,
'style': ('cursor:' + dir + '-resize'),
'pointer-events': 'all'
}
});
if (svgedit.browser.isTouch()) {
grip.setAttribute("width", 30.5)
grip.setAttribute("height", 30.5)
grip.setAttribute("fill-opacity", 0.3)
}
$.data(grip, 'dir', dir);
$.data(grip, 'type', 'resize');

13
editor/spinbtn/JQuerySpinBtn.css
View File

@ -23,19 +23,16 @@
*/
INPUT.spin-button {
/* explicitly put padding for top/bottom/left in here so that Opera displays it better */
padding: 2px 20px 2px 2px;
background-repeat:no-repeat; /* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
background-position:100% 0%;
background-image:url('spinbtn_updn.png');
background-color:white; /* Needed for Opera */
background: transparent url('spinner.svg') right top no-repeat;
background-size: 17px 54px;
}
INPUT.spin-button.up { /* Change button img when mouse is over the UP-arrow */
cursor:pointer;
background-position:100% -18px; /* 18px matches height of 2 visible buttons */
background-position:100% -20px; /* 18px matches height of 2 visible buttons */
}
INPUT.spin-button.down { /* Change button img when mouse is over the DOWN-arrow */
cursor:pointer;
background-position:100% -36px; /* 36px matches height of 2x2 visible buttons */
background-position:100% -40px; /* 36px matches height of 2x2 visible buttons */
}

1
editor/spinbtn/spinner.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 17 54" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M 3 8 L 4 9 L 8 6 L 12 9 L 13 8 L 8 3 L 3 8 Z" fill="#ffffff" opacity="0.30196078431372547"/> <path d="M 13 12 L 12 11 L 8 14 L 4 11 L 3 12 L 8 17 L 13 12 Z" fill="#ffffff" opacity="0.30196078431372547"/> <path d="M 3 28 L 4 29 L 8 26 L 12 29 L 13 28 L 8 23 L 3 28 Z" fill="#33ccff"/> <path d="M 13 32 L 12 31 L 8 34 L 4 31 L 3 32 L 8 37 L 13 32 Z" fill="#ffffff"/> <path d="M 13 52 L 12 51 L 8 54 L 4 51 L 3 52 L 8 57 L 13 52 Z" fill="#33ccff"/> <path d="M 3 48 L 4 49 L 8 46 L 12 49 L 13 48 L 8 43 L 3 48 Z" fill="#ffffff"/> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 617 B

600
editor/svg-editor.css
View File

@ -54,10 +54,6 @@ html, body {
border-bottom: 1px solid #808080;
}
#svg_editor select {
margin-top: 4px;
}
#svg_editor #svgroot {
-moz-user-select: none;
-webkit-user-select: none;
@ -92,6 +88,12 @@ html, body {
vertical-align: top;
}
.touch #svg_editor .menu_title {
padding: 7px 17px;
height: 26px;
line-height: 26px;
}
#svg_editor .menu .menu_title:hover {
background: rgba(255,255,255,0.1);
}
@ -113,6 +115,10 @@ html, body {
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.touch #svg_editor .menu_list {
top: 38px;
}
#svg_editor #menu_bar.active .menu.open .menu_title {
background: white;
color: #333;
@ -212,7 +218,7 @@ html, body {
height: 15px;
top: 30px;
left: 66px;
right: 200px;
right: 175px;
border-top: solid #444 1px;
border-right: solid #444 1px;
}
@ -277,6 +283,11 @@ html, body {
float: left;
}
.touch #svg_editor div#palette_holder {
height: 40px;
margin-top: 0;
}
#svg_editor div#palette_holder #palette .palette_item:first-child {
background: #fff;
}
@ -286,30 +297,55 @@ html, body {
}
#tool_stroke select {
margin-top: 0;
}
#svg_editor #color_tools, #color_canvas_tools {
#svg_editor #color_tools {
position: relative;
width: 48px;
height: 48px;
margin: 6px 6px 0 6px;
}
#svg_editor #color_tools #tool_fill, #tool_canvas {
.touch #svg_editor #color_tools {
width: auto;
height: auto;
}
#tool_fill {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.touch #tool_fill {
position: static;
width: 36px;
height: 36px;
margin-bottom: 10px;
}
#tool_fill.active, #tool_stroke.active {
z-index: 2;
}
#tool_stroke {
top: 14px;
left: 14px;
}
.touch #tool_fill.active, .touch #tool_stroke.active {
outline: 4px solid #09f;
}
#tool_fill, #tool_stroke, #tool_canvas {
box-shadow: 0 0 0 1px #2f2f2c;
position: absolute;
}
.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {
position: relative;
top: 0;
left: 0;
}
#color_canvas_tools {
@ -317,13 +353,31 @@ html, body {
cursor: pointer;
}
#tool_fill .color_block, #tool_canvas .color_block {
#tool_fill .color_block {
width: 24px;
height: 24px;
overflow: hidden;
border: solid #ccc 1px;
}
.touch #svg_editor #tool_eyedropper {
margin-top: 6px;
}
.touch #tool_fill .color_block {
width: 36px;
height: 36px;
}
.touch #tool_fill .color_block svg {
width: 36px !important;
height: 36px !important;
}
.touch #svg_editor #tool_switch {
display: none;
}
#svg_editor #path_node_panel .tool_button {
color: #999;
border: solid #3F3F3C 1px;
@ -369,6 +423,10 @@ html, body {
left: 0;
}
.touch #svg_editor #color_tools #tool_fill .color_block > div {
position: relative;
}
#svg_editor #color_tools #tool_fill .color_block #fill_bg, #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
position: absolute;
top: 1px;
@ -378,10 +436,17 @@ html, body {
background: #fff;
}
#tool_stroke {
position: absolute;
top: 12px;
left: 12px;
.touch #svg_editor #color_tools #tool_fill .color_block #fill_bg, .touch #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
width: 36px;
height: 36px;
right: auto;
bottom: auto;
}
.touch #tool_stroke {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
@ -397,6 +462,15 @@ html, body {
box-shadow: 0 0 0 1px #000;
}
.touch #stroke_color:after {
height: 14px;
left: 10px;
position: absolute;
top: 10px;
width: 14px;
}
#svg_editor #color_tools #tool_switch {
cursor: pointer;
opacity: 0.7;
@ -423,19 +497,29 @@ html, body {
border: solid #ccc 1px;
}
.touch #svg_editor #color_tools #tool_stroke .color_block {
width: 36px;
height: 36px;
}
#svg_editor #color_tools #tool_stroke .color_block > div {
position: absolute;
bottom: 0;
right: 0;
}
.touch #svg_editor #color_tools #tool_stroke .color_block > div {
position: relative;
}
#svg_editor #color_tools .icon_label {
padding: 0;
width: 24px;
height: 100%;
cursor: pointer;
position: absolute;
}
#svg_editor #zoomLabel {
@ -450,7 +534,7 @@ html, body {
#svg_editor div#palette {
float: left;
width: 672px;
width: 810px;
height: 16px;
}
@ -460,157 +544,14 @@ html, body {
top: 30px;
left: 50px;
bottom: 40px;
right: 200px;
right: 175px;
background-color: #444;
overflow: auto;
text-align: center;
}
#svg_editor #sidepanels {
display: none;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
width: 2px;
padding: 10px;
border-left: none;
z-index: 10;
}
#svg_editor #layerpanel {
display: inline-block;
position:absolute;
top: 1px;
bottom: 0px;
right: 0px;
width: 0px;
overflow: auto;
margin: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #D0D0D0;
font-weight: bold;
left: 0px;
top: 40%;
width: 1em;
padding: 5px 1px 5px 5px;
margin-left: 3px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle:hover {
font-weight: bold;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #layerbuttons {
margin: 0px;
padding: 0px;
padding-left: 2px;
padding-right: 2px;
width: 125px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: hidden;
}
#svg_editor .layer_button {
width: 14px;
height: 14px;
padding: 1px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
float: left;
margin-right: 3px;
}
#svg_editor .layer_button:last-child {
margin-right: 0;
}
#svg_editor .layer_buttonpressed {
width: 14px;
height: 14px;
padding: 1px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
cursor: pointer;
}
#svg_editor #layerlist {
margin: 1px;
padding: 0px;
width: 127px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#svg_editor #layerlist tr.layer {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#svg_editor #layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#svg_editor #layerlist td.layervis {
width: 22px;
cursor:pointer;
}
#svg_editor #layerlist td.layerinvis {
background-image: none;
cursor:pointer;
}
#svg_editor #layerlist td.layervis * {
display: block;
}
#svg_editor #layerlist td.layerinvis * {
display: none;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
#svg_editor #layerlist tr.layersel td.layername {
font-weight: bold;
}
#svg_editor #selLayerLabel {
white-space: nowrap;
}
#svg_editor #selLayerNames {
display: block;
.touch #svg_editor div#workarea {
top: 40px;
}
#svg_editor div.palette_item {
@ -619,6 +560,14 @@ html, body {
float: left;
}
.touch #svg_editor div.palette_item {
height: 30px;
border-top: solid #2f2f2c 5px;
border-bottom: solid #2f2f2c 5px;
width: 30px;
float: left;
}
#svg_editor .menu .menu_list {
display: none;
position: absolute;
@ -662,12 +611,16 @@ html, body {
#svg_editor #tools_top {
position: absolute;
width: 170px;
right: 2px;
top: 10px;
width: 160px;
right: 0;
top: 30px;
border-bottom: none;
overflow: visible;
padding: 0 10px;
padding: 0 0 0 10px;
}
.touch #svg_editor #tools_top {
top: 40px;
}
#svg_editor label {
@ -706,29 +659,6 @@ div#font-selector .font-item:hover {
background-color: #eee;
}
#svg_editor #tools_top label:before,
#svg_editor #tools_top label:after {
content:"";
display:table;
}
#svg_editor #tools_top label:after {
clear:both;
}
#svg_editor #tools_top label span, #svg_editor #tools_top label select {
display: block;
width: 80px;
float: left;
line-height: 185%
}
#svg_editor #tools_top label span.tuco {
width: 100%;
float: none;
}
#svg_editor #tools_top #marker_panel * {
float: left;
}
@ -769,38 +699,11 @@ div#font-selector .font-item:hover {
}
#svg_editor input[type=text], #svg_editor input[type=number] {
border: solid #3f3f3c 1px;
background-color: transparent;
color: #09f;
display: block;
float: left;
font-size: 13px;
padding: 2px 5px;
width: 70px;
-webkit-appearance: none;
border-radius: 2px;
margin: 0;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
#svg_editor #color_picker input[type=text], #color_picker #svg_editor input[type=number] {
width: 30px;
background: #fff;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#svg_editor .dropdown_set input[type=text], #svg_editor .dropdown_set input[type=number] {
width: 50px;
}
@ -827,19 +730,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#svg_editor input[type=submit]:hover, #svg_editor button:hover {background: #2F84C1;}
#svg_editor input[type=submit]:active, #svg_editor button:active {padding: 6px 10px 4px 10px; box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); border-bottom: solid rgba(255,255,255,0.1) 1px;}
#svg_editor input[type=text]:focus, #svg_editor input[type=number]:focus {
border: solid rgba(0, 120, 255, 0.3) 1px;
outline: none;
}
#svg_editor input[readonly=readonly], #svg_editor input[readonly=readonly]:focus {
background: transparent;
color: #fff;
border: none;
outline: none;
}
#svg_editor #tools_left {
position: absolute;
@ -1137,11 +1027,6 @@ span.zoom_tool img {
color: #fff;
}
#svg_editor #tool_font_size {
clear:both;
padding-top: 8px;
}
#text {
position: absolute;
left: -9999px;
@ -1228,41 +1113,13 @@ span.zoom_tool img {
width: 3.2em;
}
#svg_editor .stroke_tool .dropdown button {
margin-top: 0;
}
#svg_editor .stroke_tool div div {
-moz-user-select: none;
-webkit-user-select: none;
width: 20px;
height: 20px;
margin: 0;
padding: 1px;
background: rgba(255,255,255,0.3);
}
#svg_editor #tools_bottom .stroke_tool .dropdown button {
background-color:#555;
margin-top: 0;
}
#svg_editor #tools_top h4 {
color: #fff;
font-weight: normal;
margin: 0;
padding: 20px 0 5px 0;
padding: 0 0 10px 0;
}
.stroke_tool > div {
width: 42px;
}
.stroke_tool > div > * {
float: left;
}
#tools_top .dropdown .icon_label {
border: 1px solid transparent;
/* margin-top: 3px;*/
@ -1343,8 +1200,6 @@ span.zoom_tool img {
-webkit-border-radius: 0;
}
#svg_editor #tool_stroke label input { margin-top: 0;}
#svg_editor #copyright {
text-align: right;
padding-right: .3em;
@ -1913,6 +1768,10 @@ span.zoom_tool img {
cursor: url(images/rotate.png) 12 12, auto;
}
#workarea.select text, #workarea.multiselect text {
cursor: default;
}
#workarea.n-resize * {cursor: n-resize !important;}
#workarea.e-resize * {cursor: e-resize !important;}
#workarea.w-resize * {cursor: w-resize !important;}
@ -1923,7 +1782,9 @@ span.zoom_tool img {
#workarea.nw-resize * {cursor: nw-resize !important;}
#workarea.sw-resize * {cursor: sw-resize !important;}
#workarea.copy {
cursor: copy;
}
#workarea.zoom {
cursor: crosshair;
@ -1981,4 +1842,205 @@ span.zoom_tool img {
display: none;
position: absolute;
z-index: 20;
}
}
#svg_editor .draginput {
background: #3f3f3c;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
width: 70px;
height: 70px;
display: block;
position: relative;
float: left;
margin: 0 5px 5px 0;
overflow: hidden;
}
#svg_editor .draginput .caret {
border: solid transparent 5px;
border-top-color: #999;
position: absolute;
width: 0;
height: 0;
right: 5px;
margin-top: -2px;
top: 50%;
}
#svg_editor .draginput label {
margin: 28px 10px 0 5px;
font-size: 11px;
}
#svg_editor .draginput label#resolution_label {
font: 12px/110% sans-serif;
color: white;
font-weight: bold;
position: absolute;
left: auto;
right: 10px;
z-index: 0;
text-align: right;
}
#svg_editor .draginput label#resolution_label .pull {
position: relative;
left: -15px;
}
#svg_editor .draginput label#resolution_label span {
right: -13px;
left: auto;
font-size: 16px;
top: 2px;
font-weight: bold;
color: white;
}
.touch #svg_editor .draginput.active:after {
content: attr(data-value);
display: block;
position: absolute;
background: #3f3f3c;
top: 0;
width: 40px;
left: -50px;
padding: 3px 5px;
color: #fff;
}
#svg_editor .draginput input {
border: none;
background: transparent;
font: 24px/normal sans-serif;
text-align: center;
color: #4F80FF;
padding: 30px 0 16px;
width: 100%;
height: 24px;
position: relative;
z-index: 2;
cursor: url(images/drag.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
#svg_editor .draginput input:active {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor .draginput span {
font: 11px/130% sans-serif;
color: #ccc;
display: block;
position: absolute;
top: 5px;
left: 5px;
text-align: left;
}
#svg_editor .draginput.error {
background: #900;
}
#svg_editor .draginput.error input {
color: #fff;
}
#svg_editor .draginput.stroke_tool {
text-align: center;
}
#svg_editor .draginput select {
-webkit-appearance: none;
opacity: 0;
display: block;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
z-index: 1;
}
#svg_editor .draginput#segment_type select {
font-size: 11px;
margin-top: 40px;
width: 70px;
}
.draginput_cursor{
position: absolute;
top: 50%;
width: 100%;
border-top: solid rgba(50,100,200,0.25) 3px;
margin-top: -2px;
z-index: 0;
}
#svg_editor .draginput input[readonly=readonly] {
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body.dragging * {
cursor: url(images/dragging.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
body.drag * {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor input[readonly=readonly]:focus {
box-shadow: none;
}
#color_canvas_tools {
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
width: 60px;
height: 40px;
margin: 23px 5px 5px 5px;
position: relative;
}
#color_canvas_tools svg {
display: block;
}
#tool_angle_indicator {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid rgba(50,100,200,0.25) 3px;
position: absolute;
bottom: 2px;
left: 7px;
}
#tool_angle_indicator_cursor {
width: 4px;
height: 25px;
border-top: solid #4F80FF 3px;
position: absolute;
margin: -3px 0 0 25px;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}

608
editor/svg-editor.html
View File

@ -27,8 +27,7 @@
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="jquerybbq/jquery.bbq.min.js"></script>
<script type="text/javascript" src="svgicons/jquery.svgicons.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.min.js"></script>
<script type="text/javascript" src="spinbtn/JQuerySpinBtn.min.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.js"></script>
<script type="text/javascript" src="touch.js"></script>
<script type="text/javascript" src="contextmenu/jquery.contextMenu.js"></script>
<script type="text/javascript" src="browser.js"></script>
@ -44,13 +43,15 @@
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="svgcanvas.js"></script>
<script type="text/javascript" src="svg-editor.js"></script>
<script type="text/javascript" src="locale/locale.js"></script>
<script type="text/javascript" src="jquery-draginput.js"></script>
<script type="text/javascript" src="contextmenu.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>
<script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
<script type="text/javascript" src="extensions/ext-grid.js"></script>
<script type="text/javascript" src="extensions/ext-shapes.js"></script>
<script type="text/javascript" src="extensions/ext-markers.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script>
<!--{endif}-->
<!-- you can load extensions here -->
@ -95,37 +96,10 @@ $(function(){
</div>
</div>
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLabel">Layers</h3>
<fieldset id="layerbuttons">
<div id="layer_new" class="layer_button" title="New Layer"></div>
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
<div id="layer_moreopts" class="layer_button" title="More Options"></div>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div>
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s</div>
</div>
<div id="menu_bar">
<a class="menu">
<div class="menu_title"><img src="images/logo.svg" width="16" height="16" alt="Method Draw" /></div>
<div class="menu_title" id="logo"></div>
<div class="menu_list">
<div id="tool_prefs_option" class="menu_item">Preferences...</div>
<div class="separator"></div>
<div id="tool_about" class="menu_item">About this Editor...</div>
</div>
</a>
@ -134,7 +108,7 @@ $(function(){
<div class="menu_title">File</div>
<div class="menu_list" id="file_menu">
<div id="tool_clear" class="menu_item">New Image</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Open Image...</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Place Image...</div>
<div id="tool_import" class="menu_item"><div id="fileinputs_import"></div>Import SVG...</div>
<div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
<div id="tool_export" class="menu_item">Export as PNG</div>
@ -170,14 +144,6 @@ $(function(){
<div class="menu_item action_path_selected disabled" id="tool_reorient">Reorient path</div>
</div>
</div>
<div class="menu">
<div class="menu_title">Canvas</div>
<div class="menu_list" id="canvas_menu">
<div class="menu_item" id="tool_docprops">Canvas Dimensions...</div>
<div class="menu_item" id="tool_canvas_color_menu">Canvas Color...</div>
</div>
</div>
<div class="menu">
<div class="menu_title">View</div>
@ -194,171 +160,147 @@ $(function(){
</div>
<!--
<li id="tool_save">
<div></div>
Save Image (S)
</li>
<li id="tool_export">
<div></div>
Export as PNG
</li>
<li id="tool_docprops">
<div></div>
Document Properties (D)
</li>
</ul>
<p>
<a href="http://svg-edit.googlecode.com/" target="_blank">
SVG-edit Home Page
</a>
</p>
<button id="tool_prefs_option">
Editor Options
</button>
-->
<div id="tools_top" class="tools_panel">
<div id="canvas_panel" class="context_panel">
<div id="canvas_panel" class="context_panel clearfix">
<div class="toolset">
<h4>Canvas</h4>
<label title="Change canvas width">
<span class="icon_label">Width</span>
<input size="3" class="canvas_width" type="text" readonly="readonly" />
</label>
<label title="Change canvas height">
<span class="icon_label">Height</span>
<input class="canvas_height" size="3" type="text" readonly="readonly" />
</label>
</div>
<label title="Modify Canvas Size" class="padded"><button id="docprops_button">Canvas Dimensions...</button></label>
<h4 class="clearfix">Canvas</h4>
<label data-title="Change canvas width">
<span class="icon_label">Width</span>
<input size="3" id="canvas_width" type="text" pattern="[0-9]*" />
</label>
<label data-title="Change canvas height">
<span class="icon_label">Height</span>
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
</label>
<label title="Change canvas color"><span style="line-height: 140%">Canvas Color</span>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
<div id="canvas_bg"></div>
<div id="canvas_color"></div>
</div>
</div>
</div>
<label data-title="Change canvas color" class="draginput">
<span>Color</span>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
<div id="canvas_bg"></div>
<div id="canvas_color"></div>
</div>
</div>
</div>
</label>
<label class="draginput">
<span>Sizes</span>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Custom</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
<div class="caret"></div>
<label id="resolution_label">Custom</label>
</label>
</div>
<div id="rect_panel" class="context_panel">
<h4>Rectangle</h4>
<div class="toolset">
<label id="rect_width_tool" title="Change rectangle width">
<span class="icon_label">Width</span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="number"/>
</label>
<label id="rect_height_tool" title="Change rectangle height">
<span class="icon_label">Height</span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="number" />
</label>
</div>
<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius">
<h4 class="clearfix">Rectangle</h4>
<label>
<span>X</span>
<input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label>
<span>Y</span>
<input id="rect_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
<label id="rect_width_tool attr_changer" data-title="Change rectangle width">
<span class="icon_label">Width</span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="text" pattern="[0-9]*" />
</label>
<label id="rect_height_tool" data-title="Change rectangle height">
<span class="icon_label">Height</span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="text" pattern="[0-9]*" />
</label>
<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
<span class="icon_label">Roundness</span>
<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" min="0" max="60" type="number" />
<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
</label>
</div>
<div id="path_panel" class="context_panel">
<h4>Path</h4>
<div id="path_panel" class="context_panel clearfix">
<h4 class="clearfix">Path</h4>
<label><span>X</span>
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label><span>Y</span>
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
</div>
<div id="image_panel" class="context_panel">
<div id="image_panel" class="context_panel clearfix">
<h4>Image</h4>
<div class="toolset">
<label>
<span>X</span>
<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*"/>
</label>
<label>
<span>Y</span>
<input id="image_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*"/>
</label>
<label><span class="icon_label">Width</span>
<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width" type="number" />
<input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
</label>
<label><span class="icon_label">Height</span>
<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height" type="number" />
<label>
<span class="icon_label">Height</span>
<input id="image_height" class="attr_changer" data-title="Change image height" size="3" data-attr="height" pattern="[0-9]*" />
</label>
</div>
<div class="toolset">
<label id="tool_image_url"><span class="icon_label tuco">URL</span>
<input id="image_url" class="tuco" type="text" title="Change URL" size="35"/>
</label>
<label id="tool_change_image">
<button id="change_image_url" style="display:none;">Change Image</button>
<span id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
</label>
</div>
</div>
<div id="circle_panel" class="context_panel">
<div class="toolset">
<label id="tool_circle_cx"><span class="icon_label">cx:</span>
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx" type="number"/>
</label>
<label id="tool_circle_cy">cy:
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy" type="number" />
</label>
</div>
<div class="toolset">
<label id="tool_circle_r">r:
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r" type="number" />
</label>
</div>
</div>
<div id="ellipse_panel" class="context_panel">
<div id="ellipse_panel" class="context_panel clearfix">
<h4>Ellipse</h4>
<div class="toolset">
<label id="tool_ellipse_cx"><span>X</span>
<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx" type="number" />
</label>
<label id="tool_ellipse_cy"><span>Y</span>
<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy" type="number" />
</label>
</div>
<div class="toolset">
<label id="tool_ellipse_rx"><span>Radius X</span>
<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx" type="number" />
</label>
<label id="tool_ellipse_ry"><span>Radius Y</span>
<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry" type="number" />
</label>
</div>
<label id="tool_ellipse_cx"><span>X</span>
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx" pattern="[0-9]*" />
</label>
<label id="tool_ellipse_cy"><span>Y</span>
<input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="cy" pattern="[0-9]*" />
</label>
<label id="tool_ellipse_rx"><span>Radius X</span>
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx" pattern="[0-9]*" />
</label>
<label id="tool_ellipse_ry"><span>Radius Y</span>
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry" pattern="[0-9]*" />
</label>
</div>
<div id="line_panel" class="context_panel">
<div id="line_panel" class="context_panel clearfix">
<h4>Line</h4>
<div class="toolset">
<label id="tool_line_x1"><span>Start X</span>
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1" type="number" />
</label>
<label id="tool_line_y1"><span>Start Y</span>
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1" type="number" />
</label>
</div>
<div class="toolset">
<label id="tool_line_x2"><span>End X</span>
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2" type="number" />
</label>
<label id="tool_line_y2"><span>End Y</span>
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2" type="number"/>
</label>
</div>
<label id="tool_line_x1"><span>Start X</span>
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3" data-attr="x1" pattern="[0-9]*" />
</label>
<label id="tool_line_y1"><span>Start Y</span>
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3" data-attr="y1" pattern="[0-9]*" />
</label>
<label id="tool_line_x2"><span>End X</span>
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2" pattern="[0-9]*" />
</label>
<label id="tool_line_y2"><span>End Y</span>
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2" pattern="[0-9]*" />
</label>
</div>
<div id="text_panel" class="context_panel">
<div id="text_panel" class="context_panel clearfix">
<h4>Text</h4>
<label><span>X</span>
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label><span>Y</span>
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
<div class="toolset" id="tool_font_family">
<!-- Font family -->
<input id="font_family" class="wide" type="text" title="Change Font Family" size="12"/>
<input id="font_family" class="wide" type="text" data-title="Change Font Family" size="12"/>
<div id="font_family_dropdown" class="dropdown">
<button></button>
<ul>
@ -379,13 +321,13 @@ $(function(){
</div>
<div class="toolset clearfix">
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<div class="tool_button" id="tool_bold" data-title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" data-title="Italic Text [I]"><span></span>i</div>
</div>
<label id="tool_font_size" title="Change Font Size">
<label id="tool_font_size" data-title="Change Font Size">
<span id="font_sizeLabel" class="icon_label">Font Size</span>
<input id="font_size" size="3" value="0" type="number"/>
<input id="font_size" size="3" value="0" />
</label>
<!-- Not visible, but still used -->
@ -393,107 +335,95 @@ $(function(){
</div>
<!-- formerly gsvg_panel -->
<div id="container_panel" class="context_panel">
<div id="container_panel" class="context_panel clearfix">
<!-- Add viewBox field here? -->
<label id="group_title" title="Group identification label">
<label id="group_title" data-title="Group identification label">
<h4>Group</h4>
<span>label:</span>
<input id="g_title" data-attr="title" size="10" type="text"/>
</label>
</div>
<div id="use_panel" class="context_panel">
<div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
<div id="use_panel" class="context_panel clearfix">
<div class="push_button" id="tool_unlink_use" data-title="Break link to reference element (make unique)"></div>
</div>
<div id="g_panel" class="context_panel">
<div id="g_panel" class="context_panel clearfix">
<h4>Group</h4>
<label><span>X</span>
<input id="group_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label><span>Y</span>
<input id="group_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
</div>
<!-- For anchor elements -->
<div id="a_panel" class="context_panel">
<label id="tool_link_url" title="Set link URL (leave empty to remove)">
<div id="a_panel" class="context_panel clearfix">
<label id="tool_link_url" data-title="Set link URL (leave empty to remove)">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35"/>
</label>
</div>
<div id="path_node_panel" class="context_panel">
<div id="path_node_panel" class="context_panel clearfix">
<h4>Edit Path</h4>
<div class="tool_sep"></div>
<div class="tool_button push_button_pressed" id="tool_node_link" title="Link Control Points"><input type="checkbox" checked> Linked Control Points</div>
<div class="tool_button push_button_pressed" id="tool_node_link" data-title="Link Control Points"><input type="checkbox" checked> Linked Control Points</div>
<label id="tool_node_x"><span>X</span>
<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x" type="number" />
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
</label>
<label id="tool_node_y"><span>Y</span>
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y" type="number" />
<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" size="3" data-attr="y" />
</label>
<label id="segment_type">Segment Type</label>
<select id="seg_type" title="Change Segment type">
<label id="segment_type" class="draginput label">
<span>Segment Type</span>
<select id="seg_type" data-title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<div class="tool_button" id="tool_node_clone" title="Clone Node">Add Node</div>
</label>
<div class="clearfix"></div>
<div class="tool_button" id="tool_node_clone" title="Adds a node">Add Node</div>
<div class="tool_button" id="tool_node_delete" title="Delete Node">Delete Node</div>
<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path">Open Path</div>
<!--<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>-->
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel" class="context_panel">
<div id="selected_panel" class="context_panel clearfix">
<label id="tool_angle" title="Change rotation angle" class="toolset">
<label id="tool_angle" data-title="Change rotation angle" class="draginput">
<span class="icon_label">Rotation</span>
<input id="angle" class="attr_changer" size="2" value="0" type="number"/>
<input id="angle" class="attr_changer" size="2" value="0" data-min="-180" data-max="180" type="text"/>
<div id="tool_angle_indicator">
<div id="tool_angle_indicator_cursor"></div>
</div>
</label>
<label class="toolset dropdown_set" id="tool_opacity" title="Change selected item opacity">
<label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
<span id="group_opacityLabel" class="icon_label">Opacity</span>
<input id="group_opacity" size="3" value="100" type="number" step="5" min="0" max="100" />
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="opac_slider"></div></li>
</ul>
</div>
<input id="group_opacity" size="3" value="100" step="5" min="0" max="100" />
</label>
<div class="toolset dropdown_set" id="tool_blur" title="Change gaussian blur value">
<div class="toolset" id="tool_blur" data-title="Change gaussian blur value">
<label>
<span class="icon_label">Blur</span>
<input id="blur" size="2" value="0" type="number" class="attr_changer" step=".5" min="0" max="10" />
<div id="blur_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="blur_slider"></div></li>
</ul>
</div>
<input id="blur" size="2" value="0" class="attr_changer" step=".5" min="0" max="10" />
</label>
</div>
<!--
<label>
<input id="stroke_width" size="2" value="5" type="number" data-attr="stroke-width" min="0" max="99" step="1" />
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
</div>
-->
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" title="Change stroke">
<div class="toolset" data-title="Change stroke">
<label>
<span class="icon_label">Stroke Width</span>
<input id="stroke_width" size="2" value="5" type="number" data-attr="stroke-width" min="0" max="99" step="1" />
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
</label>
</div>
<label class="stroke_tool">
<span class="icon_label">Stroke Dash</span>
<select id="stroke_style" title="Change stroke dash style">
<label class="stroke_tool draginput">
<span>Stroke Dash</span>
<select id="stroke_style" data-title="Change stroke dash style">
<option selected="selected" value="none">&mdash;</option>
<option value="2,2">...</option>
<option value="5,5">- -</option>
@ -504,22 +434,10 @@ $(function(){
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
<div class="stroke_tool dropdown" id="stroke_linejoin">
<div>
<div id="cur_linejoin" title="Linejoin: Miter"></div>
<button></button>
</div>
</div>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
<div class="stroke_tool dropdown" id="stroke_linecap">
<div>
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
</div>
</label>
<h4>Align</h4>
@ -535,19 +453,10 @@ $(function(){
</div>
</label>
</div>
<div id="xy_panel" class="toolset" class="context_panel">
<h4>Position</h4>
<label>
<span>X:</span> <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x" type="number"/>
</label>
<label>
<span>Y:</span> <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y" type="number"/>
</label>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel" class="context_panel">
<div id="multiselected_panel" class="context_panel clearfix">
<h4>Multiple Elements</h4>
<!--<div class="tool_sep"></div> -->
<!--<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div> -->
@ -586,18 +495,17 @@ $(function(){
<div id="tools_left" class="tools_panel">
<div class="tool_button" id="tool_select" title="Select Tool"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool"></div>
<div class="tool_button" id="tool_line" title="Line Tool"></div>
<div class="tool_button" id="tool_rect" title="Square/Rect Tool"></div>
<div class="tool_button" id="tool_ellipse" title="Ellipse/Circle Tool"></div>
<div class="tool_button" id="tool_path" title="Path Tool"></div>
<div class="tool_button" id="tool_text" title="Text Tool"></div>
<div class="tool_button" id="tool_image" title="Image Tool"></div>
<div class="tool_button" id="tool_select" title="Select Tool [V]"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool [P]"></div>
<div class="tool_button" id="tool_line" title="Line Tool [L]"></div>
<div class="tool_button" id="tool_rect" title="Square/Rect Tool [R]"></div>
<div class="tool_button" id="tool_ellipse" title="Ellipse/Circle Tool [C]"></div>
<div class="tool_button" id="tool_path" title="Path Tool [P]"></div>
<div class="tool_button" id="tool_text" title="Text Tool [T]"></div>
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
<div id="color_tools">
<div id="tool_switch" title="Switch stroke and fill colors"></div>
<div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
<div class="color_tool active" id="tool_fill">
<label class="icon_label" title="Change fill color"></label>
<div class="color_block">
@ -613,15 +521,6 @@ $(function(){
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
</div>
</div>
<div style="display: none">
<div id="tool_rect" title="Rectangle"></div>
<div id="tool_square" title="Square"></div>
<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
<div id="tool_ellipse" title="Ellipse"></div>
<div id="tool_circle" title="Circle"></div>
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
</div>
</div>
</div> <!-- tools_left -->
@ -632,53 +531,14 @@ $(function(){
<label>
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<input id="zoom" size="3" value="100" type="text" />
<div id="zoom_dropdown" class="dropdown">
<button></button>
<ul>
<li>1000%</li>
<li>400%</li>
<li>200%</li>
<li>100%</li>
<li>50%</li>
<li>25%</li>
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
<li id="fit_to_all" data-val="content">Fit to all content</li>
<li>100%</li>
</ul>
</div>
</label>
</div>
<div id="tools_bottom_2">
<!--
-->
</div>
<div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div>
</div>
<div id="option_lists" class="dropdown">
<ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
</ul>
<ul id="linecap_opts">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
</ul>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
@ -701,105 +561,6 @@ $(function(){
</div>
</div>
<div id="svg_docprops">
<div id="svg_docprops_overlay"></div>
<div id="svg_docprops_container">
<input id="canvas_title" type="hidden" />
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" class="canvas_width" size="6"/></label>
<label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" class="canvas_height" size="6"/></label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<div>
<button id="tool_docprops_cancel" class="cancel">Cancel</button>
<button id="tool_docprops_save">Change Canvas Size</button>
</div>
</div>
</div>
<div id="svg_prefs">
<div id="svg_prefs_overlay"></div>
<div id="svg_prefs_container">
<fieldset>
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
<select id="lang_select" style="display: none">
<option id="lang_ar" value="ar">العربية</option>
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fa" value="fa">فارسی</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_fy" value="fy">Frysk</option>
<option id="lang_hi" value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;, &#2361;&#2367;&#2306;&#2342;&#2368;</option>
<option id="lang_it" value="it">Italiano</option>
<option id="lang_ja" value="ja">日本語</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
<option id="lang_ro" value="ro">Româneşte</option>
<option id="lang_ru" value="ru">Русский</option>
<option id="lang_sk" value="sk">Slovenčina</option>
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
</select>
<select id="iconsize" style="display: none">
<option id="icon_small" value="s">Small</option>
<option id="icon_medium" value="m" selected="selected">Medium</option>
<option id="icon_large" value="l">Large</option>
<option id="icon_xlarge" value="xl">Extra Large</option>
</select>
<label>
<span>Editor Background</span>
<div id="bg_blocks"></div>
</label>
<label>
<span id="svginfo_bg_url">URL:</span>
<input type="text" id="canvas_bg_url"/>
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
</label>
<label>
<div class="subtitle"><strong>Grid</strong></div>
<span id="svginfo_snap_onoff"><input type="checkbox" value="snapping_on" id="grid_snapping_on"> Snapping on/off</span>
<span id="svginfo_snap_step">Snapping Step-Size:</span><br><input type="text" id="grid_snapping_step" size="3" value="10"/>
</label>
<label>
<div class="subtitle"><strong>Units &amp; Rulers</strong></div>
<span id="svginfo_rulers_onoff"><input type="checkbox" value="show_rulers" id="show_rulers" checked> Show rulers</span>
</label>
</fieldset>
<div>
<button id="tool_prefs_cancel" class="cancel">Cancel</button>
<button id="tool_prefs_save">Save</button>
</div>
</div>
</div>
<div id="base_unit_container">
<select id="base_unit">
<option value="px">Pixels</option>
@ -822,25 +583,16 @@ $(function(){
</div>
<ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li>
<li><a href="#copy">Copy</a></li>
<li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+&uarr;</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+&uarr;</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+&darr;</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+&darr;</span></a></li>
</ul>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li>
<li><a href="#delete">Delete Layer</a></li>
<li><a href="#merge_down">Merge Down</a></li>
<li><a href="#merge_all">Merge All</a></li>
<li><a href="#cut">Cut <span class="shortcut">⌘X;</span></a></li>
<li><a href="#copy">Copy<span class="shortcut">⌘C</span></a></li>
<li><a href="#paste">Paste<span class="shortcut">⌘V</span></a></li>
<li class="separator"><a href="#delete">Delete<span class="shortcut">⌫</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">⌘G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">⌘⇧G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">⌘⇧&uarr;</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">⌘&uarr;</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">⌘&darr;</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">⌘⇧&darr;</span></a></li>
</ul>
</body>

1354
editor/svg-editor.js
View File

File diff suppressed because it is too large Load Diff

236
editor/svgcanvas.js
View File

@ -658,6 +658,7 @@ var getIntersectionList = this.getIntersectionList = function(rect) {
getStrokedBBox = this.getStrokedBBox = function(elems) {
if(!elems) elems = getVisibleElements();
if(!elems.length) return false;
// Make sure the expected BBox is returned if the element is a group
var getCheckedBBox = function(elem) {
@ -809,7 +810,7 @@ getStrokedBBox = this.getStrokedBBox = function(elems) {
// An array with all "visible" elements.
var getVisibleElements = this.getVisibleElements = function(parent) {
if(!parent) parent = $(svgcontent).children(); // Prevent layers from being included
if (parent.find("#canvas_background").length) parent.splice(0, 1) // Prevent background from being included
var contentElems = [];
$(parent).children().each(function(i, elem) {
try {
@ -2373,16 +2374,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// but the action is not recorded until mousing up
// - when we are in select mode, select the element, remember the position
// and do nothing else
var mouseDown = mosueOver = function(evt)
var mouseDown = mouseOver = function(evt)
{
if(canvas.spaceKey || evt.button === 1) return;
var right_click = evt.button === 2;
if(evt.altKey) { // duplicate when dragging
svgCanvas.cloneSelectedElements(0,0);
}
root_sctm = svgcontent.getScreenCTM().inverse();
var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ),
@ -2396,11 +2393,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
lastClickPoint = pt;
}
// This would seem to be unnecessary...
// if(['select', 'resize'].indexOf(current_mode) == -1) {
// setGradient();
// }
var x = mouse_x / current_zoom,
y = mouse_y / current_zoom,
mouse_target = getMouseTarget(evt);
@ -2779,7 +2771,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
}
if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
//duplicate only once
if (dx != 0 || dy != 0) {
var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
@ -2806,6 +2798,21 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
tlist.appendItem(xform);
}
// alt drag = create a clone and save the reference
if(evt.altKey) {
//clone doesn't exist yet
if (!canvas.addClone) {
canvas.addClone = canvas.cloneSelectedElements(0,0, true);
canvas.removeClone = function(){
parent = canvas.addClone.parentNode
if (parent) {
parent.removeChild(canvas.addClone)
canvas.addClone = false;
}
}
window.addEventListener("keyup", canvas.removeClone)
}
}
// update our internal bbox that we're tracking while dragging
selectorManager.requestSelector(selected).resize();
}
@ -3181,6 +3188,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// this is done in when we recalculate the selected dimensions()
var mouseUp = function(evt)
{
canvas.addClone = false;
window.removeEventListener("keyup", canvas.removeClone)
if(evt.button === 2) return;
var tempJustSelected = justSelected;
justSelected = null;
@ -6731,7 +6741,7 @@ this.setResolution = function(x, y) {
}
call("changed", [svgcontent]);
}
return true;
return [x,y];
};
// Function: getOffset
@ -7834,116 +7844,83 @@ this.convertToPath = function(elem, getBBox) {
// attr - String with the attribute name
// newValue - String or number with the new attribute value
// elems - The DOM elements to apply the change to
var changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
var handle = svgroot.suspendRedraw(1000);
if(current_mode == 'pathedit') {
// Editing node
pathActions.moveNode(attr, newValue);
}
var elems = elems || selectedElements;
var i = elems.length;
var no_xy_elems = ['g', 'polyline', 'path'];
var good_g_attrs = ['transform', 'opacity', 'filter'];
while (i--) {
var elem = elems[i];
if (elem == null) continue;
// Go into "select" mode for text changes
if(current_mode === "textedit" && attr !== "#text" && elem.textContent.length) {
textActions.toSelectMode(elem);
}
// Set x,y vals on elements that don't have them
if((attr === 'x' || attr === 'y') && no_xy_elems.indexOf(elem.tagName) >= 0) {
var bbox = getStrokedBBox([elem]);
var diff_x = attr === 'x' ? newValue - bbox.x : 0;
var diff_y = attr === 'y' ? newValue - bbox.y : 0;
canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true);
continue;
}
// only allow the transform/opacity/filter attribute to change on <g> elements, slightly hacky
// if (elem.tagName === "g" && good_g_attrs.indexOf(attr) >= 0);
var oldval = attr === "#text" ? elem.textContent : elem.getAttribute(attr);
if (oldval == null) oldval = "";
if (oldval !== String(newValue)) {
if (attr == "#text") {
var old_w = svgedit.utilities.getBBox(elem).width;
elem.textContent = newValue;
// FF bug occurs on on rotated elements
if(/rotate/.test(elem.getAttribute('transform'))) {
elem = ffClone(elem);
}
// Hoped to solve the issue of moving text with text-anchor="start",
// but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd
// var box=getBBox(elem), left=box.x, top=box.y, width=box.width,
// height=box.height, dx = width - old_w, dy=0;
// var angle = getRotationAngle(elem, true);
// if (angle) {
// var r = Math.sqrt( dx*dx + dy*dy );
// var theta = Math.atan2(dy,dx) - angle;
// dx = r * Math.cos(theta);
// dy = r * Math.sin(theta);
//
// elem.setAttribute('x', elem.getAttribute('x')-dx);
// elem.setAttribute('y', elem.getAttribute('y')-dy);
// }
} else if (attr == "#href") {
setHref(elem, newValue);
}
else elem.setAttribute(attr, newValue);
// if (i==0)
// selectedBBoxes[0] = svgedit.utilities.getBBox(elem);
// Use the Firefox ffClone hack for text elements with gradients or
// where other text attributes are changed.
if(svgedit.browser.isGecko() && elem.nodeName === 'text' && /rotate/.test(elem.getAttribute('transform'))) {
if((newValue+'').indexOf('url') === 0 || ['font-size','font-family','x','y'].indexOf(attr) >= 0 && elem.textContent) {
elem = ffClone(elem);
}
}
// Timeout needed for Opera & Firefox
// codedread: it is now possible for this function to be called with elements
// that are not in the selectedElements array, we need to only request a
// selector if the element is in that array
if (selectedElements.indexOf(elem) >= 0) {
setTimeout(function() {
// Due to element replacement, this element may no longer
// be part of the DOM
if(!elem.parentNode) return;
selectorManager.requestSelector(elem).resize();
},0);
}
// if this element was rotated, and we changed the position of this element
// we need to update the rotational transform attribute
var angle = getRotationAngle(elem);
if (angle != 0 && attr != "transform") {
var tlist = getTransformList(elem);
var n = tlist.numberOfItems;
while (n--) {
var xform = tlist.getItem(n);
if (xform.type == 4) {
// remove old rotate
tlist.removeItem(n);
var box = svgedit.utilities.getBBox(elem);
var center = transformPoint(box.x+box.width/2, box.y+box.height/2, transformListToTransform(tlist).matrix);
var cx = center.x,
cy = center.y;
var newrot = svgroot.createSVGTransform();
newrot.setRotate(angle, cx, cy);
tlist.insertItemBefore(newrot, n);
break;
}
}
}
} // if oldValue != newValue
} // for each elem
svgroot.unsuspendRedraw(handle);
var changeSelectedAttributeNoUndo = this.changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
var handle = svgroot.suspendRedraw(1000);
if(current_mode == 'pathedit') {
// Editing node
pathActions.moveNode(attr, newValue);
}
var elems = elems || selectedElements;
var i = elems.length;
var no_xy_elems = ['g', 'polyline', 'path'];
var good_g_attrs = ['transform', 'opacity', 'filter'];
while (i--) {
var elem = elems[i];
if (elem == null) continue;
// Go into "select" mode for text changes
if(current_mode === "textedit" && attr !== "#text" && elem.textContent.length) {
textActions.toSelectMode(elem);
}
// Set x,y vals on elements that don't have them
if((attr === 'x' || attr === 'y') && no_xy_elems.indexOf(elem.tagName) >= 0) {
var bbox = getStrokedBBox([elem]);
var diff_x = attr === 'x' ? newValue - bbox.x : 0;
var diff_y = attr === 'y' ? newValue - bbox.y : 0;
canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true);
continue;
}
var oldval = attr === "#text" ? elem.textContent : elem.getAttribute(attr);
if (oldval == null) oldval = "";
if (oldval !== String(newValue)) {
if (attr == "#text") {
var old_w = svgedit.utilities.getBBox(elem).width;
elem.textContent = newValue;
} else if (attr == "#href") {
setHref(elem, newValue);
}
else elem.setAttribute(attr, newValue);
// Timeout needed for Opera & Firefox
// codedread: it is now possible for this function to be called with elements
// that are not in the selectedElements array, we need to only request a
// selector if the element is in that array
if (selectedElements.indexOf(elem) >= 0) {
setTimeout(function() {
// Due to element replacement, this element may no longer
// be part of the DOM
if(!elem.parentNode) return;
selectorManager.requestSelector(elem).resize();
},0);
}
// if this element was rotated, and we changed the position of this element
// we need to update the rotational transform attribute
var angle = getRotationAngle(elem);
if (angle != 0 && attr != "transform") {
var tlist = getTransformList(elem);
var n = tlist.numberOfItems;
while (n--) {
var xform = tlist.getItem(n);
if (xform.type == 4) {
// remove old rotate
tlist.removeItem(n);
var box = svgedit.utilities.getBBox(elem);
var center = transformPoint(box.x+box.width/2, box.y+box.height/2, transformListToTransform(tlist).matrix);
var cx = center.x,
cy = center.y;
var newrot = svgroot.createSVGTransform();
newrot.setRotate(angle, cx, cy);
tlist.insertItemBefore(newrot, n);
break;
}
}
}
} // if oldValue != newValue
} // for each elem
svgroot.unsuspendRedraw(handle);
};
// Function: changeSelectedAttribute
@ -8550,7 +8527,7 @@ this.moveSelectedElements = function(dx, dy, undoable) {
// Function: cloneSelectedElements
// Create deep DOM copies (clones) of all selected elements and move them slightly
// from their originals
this.cloneSelectedElements = function(x,y) {
this.cloneSelectedElements = function(x,y, drag) {
var batchCmd = new BatchCommand("Clone Elements");
// find all the elements selected (stop at first null)
var len = selectedElements.length;
@ -8566,9 +8543,11 @@ this.cloneSelectedElements = function(x,y) {
var i = copiedElements.length;
while (i--) {
// clone each element and replace it within copiedElements
var elem = copiedElements[i] = copyElem(copiedElements[i]);
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(elem);
batchCmd.addSubCommand(new InsertElementCommand(elem));
var elem = copiedElements[i]
var clone = copyElem(copiedElements[i]);
if (drag) clone.removeAttribute("transform");
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(clone);
batchCmd.addSubCommand(new InsertElementCommand(clone));
}
if (!batchCmd.isEmpty()) {
@ -8576,6 +8555,7 @@ this.cloneSelectedElements = function(x,y) {
this.moveSelectedElements(x,y,false);
addCommandToHistory(batchCmd);
}
return clone
};
// Function: alignSelectedElements

111
editor/svgedit.compiled.css
View File

@ -108,15 +108,16 @@ html,body{overflow:hidden;width:100%;height:100%}
::-webkit-scrollbar-corner{background:#444}
#browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000}
#svg_editor hr{border:0;border-bottom:1px solid #808080}
#svg_editor select{margin-top:4px}
#svg_editor #svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
#svg_editor #menu_bar{margin:0 0 0 50px}
#svg_editor #menu_bar.active .menu.open .menu_list{display:block}
#svg_editor .menu{position:relative;z-index:5;color:#333;display:inline-block}
#svg_editor .menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
.touch #svg_editor .menu_title{padding:7px 17px;height:26px;line-height:26px}
#svg_editor .menu .menu_title:hover{background:rgba(255,255,255,0.1)}
#svg_editor .menu_list .separator{margin:5px 0;border-top:solid #ddd 1px}
#svg_editor .menu_list{display:none;position:absolute;top:28px;left:0;white-space:nowrap;background:white;padding:7px 0;border-radius:0 3px 3px 3px;box-shadow:0 0 20px rgba(0,0,0,0.8)}
.touch #svg_editor .menu_list{top:38px}
#svg_editor #menu_bar.active .menu.open .menu_title{background:white;color:#333}
#svg_editor .menu_list .menu_item{position:relative;overflow:hidden;line-height:22px;padding:5px 69px 5px 25px;cursor:default;color:#333}
#svg_editor .menu_list .menu_item.tool_button{background:transparent;border:0;margin:0;padding:5px 55px 5px 25px;height:auto;width:auto}
@ -128,7 +129,7 @@ html,body{overflow:hidden;width:100%;height:100%}
#svg_editor #svgcanvas{line-height:normal;display:inline-block;background-color:#a0a0a0;text-align:center;vertical-align:middle;width:640px;height:480px;position:relative;background:#3f3f3c}
#rulers>div{position:absolute;background:#2f2f2c;z-index:1;overflow:hidden;-webkit-font-smoothing:none}
#rulers #ruler_corner{top:30px;left:50px;width:15px;height:15px;border:solid #444 1px;z-index:2}
#ruler_x{height:15px;top:30px;left:66px;right:200px;border-top:solid #444 1px;border-right:solid #444 1px}
#ruler_x{height:15px;top:30px;left:66px;right:175px;border-top:solid #444 1px;border-right:solid #444 1px}
#ruler_x_cursor{height:15px;border-right:dotted #999 1px;position:absolute;background:#2f2f2c}
#ruler_y_cursor{width:15px;border-top:dotted #999 1px;position:absolute;background:#2f2f2c}
#rulers.moved #ruler_corner,#rulers.moved #ruler_x{top:101px}
@ -139,55 +140,51 @@ html,body{overflow:hidden;width:100%;height:100%}
#ruler_y canvas{margin-top:-16px}
#ruler_x>div,#ruler_y>div{overflow:hidden}
#svg_editor div#palette_holder{display:block;overflow:hidden;height:31px;margin-top:10px;position:relative;z-index:2;float:left}
.touch #svg_editor div#palette_holder{height:40px;margin-top:0}
#svg_editor div#palette_holder #palette .palette_item:first-child{background:#fff}
#svg_editor div#palette_holder #palette .palette_item{cursor:pointer}
#tool_stroke select{margin-top:0}
#svg_editor #color_tools,#color_canvas_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
#svg_editor #color_tools #tool_fill,#tool_canvas{position:absolute;top:0;left:0;z-index:1}
#svg_editor #color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
.touch #svg_editor #color_tools{width:auto;height:auto}
#tool_fill{position:absolute;top:0;left:0;z-index:1}
.touch #tool_fill{position:static;width:36px;height:36px;margin-bottom:10px}
#tool_fill.active,#tool_stroke.active{z-index:2}
#tool_fill,#tool_stroke,#tool_canvas{box-shadow:0 0 0 1px #2f2f2c}
#tool_stroke{top:14px;left:14px}
.touch #tool_fill.active,.touch #tool_stroke.active{outline:4px solid #09f}
#tool_fill,#tool_stroke,#tool_canvas{box-shadow:0 0 0 1px #2f2f2c;position:absolute}
.touch #tool_fill,.touch #tool_stroke,.touch #tool_canvas{position:relative;top:0;left:0}
#color_canvas_tools{float:left;cursor:pointer}
#tool_fill .color_block,#tool_canvas .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
#tool_fill .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #svg_editor #tool_eyedropper{margin-top:6px}
.touch #tool_fill .color_block{width:36px;height:36px}
.touch #tool_fill .color_block svg{width:36px!important;height:36px!important}
.touch #svg_editor #tool_switch{display:none}
#svg_editor #path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px}
#svg_editor #path_node_panel .tool_button img{position:absolute;left:5px;top:3px}
#svg_editor #path_node_panel #tool_node_link{border:0;padding:3px 0;width:auto;margin:0 0 10px 0;background:transparent;color:#ccc;height:auto;line-height:130%}
#svg_editor #path_node_panel #segment_type{margin-top:10px}
#svg_editor #color_tools #tool_fill .color_block:hover,#svg_editor #color_tools #tool_stroke .color_block:hover{border-color:#fff}
#svg_editor #color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
.touch #svg_editor #color_tools #tool_fill .color_block>div{position:relative}
#svg_editor #color_tools #tool_fill .color_block #fill_bg,#svg_editor #color_tools #tool_stroke .color_block #stroke_bg{position:absolute;top:1px;left:1px;bottom:1px;right:1px;background:#fff}
#tool_stroke{position:absolute;top:12px;left:12px;z-index:0}
.touch #svg_editor #color_tools #tool_fill .color_block #fill_bg,.touch #svg_editor #color_tools #tool_stroke .color_block #stroke_bg{width:36px;height:36px;right:auto;bottom:auto}
.touch #tool_stroke{position:relative;top:0;left:0;z-index:0}
#stroke_color:after{content:'';position:absolute;display:block;width:8px;height:8px;left:8px;top:8px;background:#ccc;box-shadow:0 0 0 1px #000}
.touch #stroke_color:after{height:14px;left:10px;position:absolute;top:10px;width:14px}
#svg_editor #color_tools #tool_switch{cursor:pointer;opacity:.7;width:11px;height:11px;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII=) top left no-repeat;position:absolute;top:-2px;left:28px}
#svg_editor #color_tools #cross:hover{opacity:1}
#svg_editor #color_tools #tool_stroke:hover #stroke_color:after{background:#fff}
#svg_editor #color_tools #tool_stroke .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #svg_editor #color_tools #tool_stroke .color_block{width:36px;height:36px}
#svg_editor #color_tools #tool_stroke .color_block>div{position:absolute;bottom:0;right:0}
#svg_editor #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer}
.touch #svg_editor #color_tools #tool_stroke .color_block>div{position:relative}
#svg_editor #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
#svg_editor #zoomLabel{cursor:pointer;margin-right:5px}
#svg_editor #linkLabel>svg{height:20px;padding-top:4px}
#svg_editor div#palette{float:left;width:672px;height:16px}
#svg_editor div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:200px;background-color:#444;overflow:auto;text-align:center}
#svg_editor #sidepanels{display:none;position:absolute;top:75px;bottom:60px;right:0;width:2px;padding:10px;border-left:none;z-index:10}
#svg_editor #layerpanel{display:inline-block;position:absolute;top:1px;bottom:0;right:0;width:0;overflow:auto;margin:0;-moz-user-select:none;-webkit-user-select:none}
#svg_editor #sidepanel_handle{display:inline-block;position:absolute;background-color:#d0d0d0;font-weight:bold;left:0;top:40%;width:1em;padding:5px 1px 5px 5px;margin-left:3px;cursor:pointer;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-user-select:none;-webkit-user-select:none}
#svg_editor #sidepanel_handle:hover{font-weight:bold}
#svg_editor #sidepanel_handle *{cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
#svg_editor #layerbuttons{margin:0;padding:0;padding-left:2px;padding-right:2px;width:125px;height:20px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #808080;border-top:1px solid #808080;overflow:hidden}
#svg_editor .layer_button{width:14px;height:14px;padding:1px;border-left:1px solid #fff;border-top:1px solid #fff;border-right:1px solid #808080;border-bottom:1px solid #808080;cursor:pointer;float:left;margin-right:3px}
#svg_editor .layer_button:last-child{margin-right:0}
#svg_editor .layer_buttonpressed{width:14px;height:14px;padding:1px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #808080;border-top:1px solid #808080;cursor:pointer}
#svg_editor #layerlist{margin:1px;padding:0;width:127px;border-collapse:collapse;border:1px solid #808080;background-color:#fff}
#svg_editor #layerlist tr.layer{background-color:#fff;margin:0;padding:0}
#svg_editor #layerlist tr.layersel{border:1px solid #808080;background-color:#ccc}
#svg_editor #layerlist td.layervis{width:22px;cursor:pointer}
#svg_editor #layerlist td.layerinvis{background-image:none;cursor:pointer}
#svg_editor #layerlist td.layervis *{display:block}
#svg_editor #layerlist td.layerinvis *{display:none}
#svg_editor #layerlist td.layername{cursor:pointer}
#svg_editor #layerlist tr.layersel td.layername{font-weight:bold}
#svg_editor #selLayerLabel{white-space:nowrap}
#svg_editor #selLayerNames{display:block}
#svg_editor div#palette{float:left;width:810px;height:16px}
#svg_editor div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center}
.touch #svg_editor div#workarea{top:40px}
#svg_editor div.palette_item{height:16px;width:16px;float:left}
.touch #svg_editor div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:30px;float:left}
#svg_editor .menu .menu_list{display:none;position:absolute}
#svg_editor .tool_button:hover,#svg_editor .push_button:hover,#svg_editor .buttonup:hover,#svg_editor .buttondown,#svg_editor .tool_button_current,#svg_editor .push_button_pressed{background-color:#fff}
#svg_editor .tool_button.disabled,#svg_editor .tool_button.disabled:hover{opacity:.3;background-color:#aaa}
@ -197,16 +194,13 @@ html,body{overflow:hidden;width:100%;height:100%}
#tools_top .padded{padding:10px 0}
#svg_editor #tools_left .tool_button_current{background-color:#0cf}
#svg_editor #main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
#svg_editor #tools_top{position:absolute;width:170px;right:2px;top:10px;border-bottom:0;overflow:visible;padding:0 10px}
#svg_editor #tools_top{position:absolute;width:160px;right:0;top:30px;border-bottom:0;overflow:visible;padding:0 0 0 10px}
.touch #svg_editor #tools_top{top:40px}
#svg_editor label{display:block;color:#999}
div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)}
div#font-selector img{width:100%}
div#font-selector .font-item{border-bottom:solid #ddd 1px;padding:5px 10px;margin:0 -10px}
div#font-selector .font-item:hover{background-color:#eee}
#svg_editor #tools_top label:before,#svg_editor #tools_top label:after{content:"";display:table}
#svg_editor #tools_top label:after{clear:both}
#svg_editor #tools_top label span,#svg_editor #tools_top label select{display:block;width:80px;float:left;line-height:185%}
#svg_editor #tools_top label span.tuco{width:100%;float:none}
#svg_editor #tools_top #marker_panel *{float:left}
#svg_editor #tools_top #marker_panel h4{float:none}
#svg_editor #tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
@ -215,9 +209,7 @@ div#font-selector .font-item:hover{background-color:#eee}
#svg_editor #tools_top #marker_panel .dropdown button{margin-top:2px}
#svg_editor #tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
#svg_editor #tools_top #marker_panel .dropdown .icon_label img{float:none}
#svg_editor input[type=text],#svg_editor input[type=number]{border:solid #3f3f3c 1px;background-color:transparent;color:#09f;display:block;float:left;font-size:13px;padding:2px 5px;width:70px;-webkit-appearance:none;border-radius:2px;margin:0;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
#svg_editor #color_picker input[type=text],#color_picker #svg_editor input[type=number]{width:30px;background:#fff}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#svg_editor .dropdown_set input[type=text],#svg_editor .dropdown_set input[type=number]{width:50px}
#svg_editor input[type=text].wide,#svg_editor input[type=number].wide{width:110px}
#svg_editor input[type=text].tuco,#svg_editor input[type=number].tuco{width:150px}
@ -225,8 +217,6 @@ input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-
#svg_editor input[type=submit]:hover,#svg_editor button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
#svg_editor input[type=submit]:hover,#svg_editor button:hover{background:#2f84c1}
#svg_editor input[type=submit]:active,#svg_editor button:active{padding:6px 10px 4px 10px;box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px}
#svg_editor input[type=text]:focus,#svg_editor input[type=number]:focus{border:solid rgba(0,120,255,0.3) 1px;outline:0}
#svg_editor input[readonly=readonly],#svg_editor input[readonly=readonly]:focus{background:transparent;color:#fff;border:0;outline:0}
#svg_editor #tools_left{position:absolute;border-right:0;width:50px;top:30px;left:0;background:#2f2f2c;z-index:4}
#workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none}
#workarea.wireframe #svgcontent text{fill:#000;stroke:none}
@ -268,7 +258,6 @@ span.zoom_tool img{vertical-align:top}
#svg_editor .width_label{padding-right:5px}
#svg_editor #tool_bold,#svg_editor #tool_italic{font:bold 2.1em/1.1em serif;text-align:center;padding:0 2px 5px 2px;position:relative;float:left;margin:5px 10px 0 0;color:#ccc;background:#2f2f2c;border:solid #3f3f3c 1px}
#svg_editor #tool_bold:hover,#svg_editor #tool_italic:hover{color:#fff}
#svg_editor #tool_font_size{clear:both;padding-top:8px}
#text{position:absolute;left:-9999px}
#svg_editor #tool_bold span,#svg_editor #tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
#svg_editor #tool_italic{font-weight:normal;font-style:italic}
@ -281,12 +270,7 @@ span.zoom_tool img{vertical-align:top}
#svg_editor #tools_bottom_1{width:115px;float:left}
#svg_editor #tools_bottom_2{position:relative;float:left;margin-top:5px}
#tools_bottom input[type=text]{width:3.2em}
#svg_editor .stroke_tool .dropdown button{margin-top:0}
#svg_editor .stroke_tool div div{-moz-user-select:none;-webkit-user-select:none;width:20px;height:20px;margin:0;padding:1px;background:rgba(255,255,255,0.3)}
#svg_editor #tools_bottom .stroke_tool .dropdown button{background-color:#555;margin-top:0}
#svg_editor #tools_top h4{color:#fff;font-weight:normal;margin:0;padding:20px 0 5px 0}
.stroke_tool>div{width:42px}
.stroke_tool>div>*{float:left}
#svg_editor #tools_top h4{color:#fff;font-weight:normal;margin:0;padding:0 0 10px 0}
#tools_top .dropdown .icon_label{border:1px solid transparent;height:auto}
.align_buttons .push_button,.align_buttons .push_button_pressed{display:block;float:left}
#option_lists ul{display:none;position:absolute;height:auto;z-index:3;margin:0;list-style:none;padding-left:0}
@ -300,7 +284,6 @@ span.zoom_tool img{vertical-align:top}
#option_lists ul[class^=optcols] li{float:left}
#svg_editor ul li.current{background-color:#f4e284}
#svg_editor #option_lists ul li{margin:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
#svg_editor #tool_stroke label input{margin-top:0}
#svg_editor #copyright{text-align:right;padding-right:.3em}
#svg_source_editor{display:none}
#svg_source_editor #svg_source_overlay{position:absolute;top:0;right:0;left:0;bottom:0;background-color:black;opacity:.6;z-index:5}
@ -396,6 +379,7 @@ span.zoom_tool img{vertical-align:top}
#workarea.eyedropper{cursor:url(images/eyedropper.png) 0 16,crosshair}
#workarea.fhpath{cursor:url(images/pencil_cursor.png) 0 20,crosshair}
#workarea.rotate *{cursor:url(images/rotate.png) 12 12,auto}
#workarea.select text,#workarea.multiselect text{cursor:default}
#workarea.n-resize *{cursor:n-resize!important}
#workarea.e-resize *{cursor:e-resize!important}
#workarea.w-resize *{cursor:w-resize!important}
@ -404,6 +388,7 @@ span.zoom_tool img{vertical-align:top}
#workarea.se-resize *{cursor:se-resize!important}
#workarea.nw-resize *{cursor:nw-resize!important}
#workarea.sw-resize *{cursor:sw-resize!important}
#workarea.copy{cursor:copy}
#workarea.zoom{cursor:crosshair;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}
#workarea.zoom.out{cursor:crosshair;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}
#selectorRubberBand{shape-rendering:crispEdges}
@ -412,6 +397,30 @@ span.zoom_tool img{vertical-align:top}
.clearfix{*zoom:1}
#svg_editor #group_title{display:none}
#base_unit_container{display:none;position:absolute;z-index:20}
INPUT.spin-button{padding:2px 20px 2px 2px;background-repeat:no-repeat;background-position:100% 0;background-image:url('spinbtn_updn.png');background-color:white}
INPUT.spin-button.up{cursor:pointer;background-position:100% -18px}
INPUT.spin-button.down{cursor:pointer;background-position:100% -36px}
#svg_editor .draginput{background:#3f3f3c;border-radius:3px;-webkit-font-smoothing:antialiased;width:70px;height:70px;display:block;position:relative;float:left;margin:0 5px 5px 0;overflow:hidden}
#svg_editor .draginput .caret{border:solid transparent 5px;border-top-color:#999;position:absolute;width:0;height:0;right:5px;margin-top:-2px;top:50%}
#svg_editor .draginput label{margin:28px 10px 0 5px;font-size:11px}
#svg_editor .draginput label#resolution_label{font:12px/110% sans-serif;color:white;font-weight:bold;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
#svg_editor .draginput label#resolution_label .pull{position:relative;left:-15px}
#svg_editor .draginput label#resolution_label span{right:-13px;left:auto;font-size:16px;top:2px;font-weight:bold;color:white}
.touch #svg_editor .draginput.active:after{content:attr(data-value);display:block;position:absolute;background:#3f3f3c;top:0;width:40px;left:-50px;padding:3px 5px;color:#fff}
#svg_editor .draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2;cursor:url(images/drag.png),move;cursor:-webkit-drag;cursor:-moz-drag}
#svg_editor .draginput input:active{cursor:url(images/dragging.png),move;cursor:-webkit-dragging;cursor:-moz-dragging}
#svg_editor .draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
#svg_editor .draginput.error{background:#900}
#svg_editor .draginput.error input{color:#fff}
#svg_editor .draginput.stroke_tool{text-align:center}
#svg_editor .draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1}
#svg_editor .draginput#segment_type select{font-size:11px;margin-top:40px;width:70px}
.draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0}
#svg_editor .draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body.dragging *{cursor:url(images/dragging.png),move;cursor:-webkit-drag;cursor:-moz-drag}
body.drag *{cursor:url(images/dragging.png),move;cursor:-webkit-dragging;cursor:-moz-dragging}
#svg_editor input[readonly=readonly]:focus{box-shadow:none}
#color_canvas_tools{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;width:60px;height:40px;margin:23px 5px 5px 5px;position:relative}
#color_canvas_tools svg{display:block}
#tool_angle_indicator{width:50px;height:50px;border-radius:50px;border:solid rgba(50,100,200,0.25) 3px;position:absolute;bottom:2px;left:7px}
#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #4f80ff 3px;position:absolute;margin:-3px 0 0 25px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}
INPUT.spin-button{background:transparent url('spinner.svg') right top no-repeat;background-size:17px 54px}
INPUT.spin-button.up{cursor:pointer;background-position:100% -20px}
INPUT.spin-button.down{cursor:pointer;background-position:100% -40px}

1346
editor/svgedit.compiled.js
View File

File diff suppressed because it is too large Load Diff

614
editor/temp.css
View File

@ -700,10 +700,6 @@ html, body {
border-bottom: 1px solid #808080;
}
#svg_editor select {
margin-top: 4px;
}
#svg_editor #svgroot {
-moz-user-select: none;
-webkit-user-select: none;
@ -738,6 +734,12 @@ html, body {
vertical-align: top;
}
.touch #svg_editor .menu_title {
padding: 7px 17px;
height: 26px;
line-height: 26px;
}
#svg_editor .menu .menu_title:hover {
background: rgba(255,255,255,0.1);
}
@ -759,6 +761,10 @@ html, body {
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.touch #svg_editor .menu_list {
top: 38px;
}
#svg_editor #menu_bar.active .menu.open .menu_title {
background: white;
color: #333;
@ -858,7 +864,7 @@ html, body {
height: 15px;
top: 30px;
left: 66px;
right: 200px;
right: 175px;
border-top: solid #444 1px;
border-right: solid #444 1px;
}
@ -923,6 +929,11 @@ html, body {
float: left;
}
.touch #svg_editor div#palette_holder {
height: 40px;
margin-top: 0;
}
#svg_editor div#palette_holder #palette .palette_item:first-child {
background: #fff;
}
@ -932,30 +943,55 @@ html, body {
}
#tool_stroke select {
margin-top: 0;
}
#svg_editor #color_tools, #color_canvas_tools {
#svg_editor #color_tools {
position: relative;
width: 48px;
height: 48px;
margin: 6px 6px 0 6px;
}
#svg_editor #color_tools #tool_fill, #tool_canvas {
.touch #svg_editor #color_tools {
width: auto;
height: auto;
}
#tool_fill {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.touch #tool_fill {
position: static;
width: 36px;
height: 36px;
margin-bottom: 10px;
}
#tool_fill.active, #tool_stroke.active {
z-index: 2;
}
#tool_stroke {
top: 14px;
left: 14px;
}
.touch #tool_fill.active, .touch #tool_stroke.active {
outline: 4px solid #09f;
}
#tool_fill, #tool_stroke, #tool_canvas {
box-shadow: 0 0 0 1px #2f2f2c;
position: absolute;
}
.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {
position: relative;
top: 0;
left: 0;
}
#color_canvas_tools {
@ -963,13 +999,31 @@ html, body {
cursor: pointer;
}
#tool_fill .color_block, #tool_canvas .color_block {
#tool_fill .color_block {
width: 24px;
height: 24px;
overflow: hidden;
border: solid #ccc 1px;
}
.touch #svg_editor #tool_eyedropper {
margin-top: 6px;
}
.touch #tool_fill .color_block {
width: 36px;
height: 36px;
}
.touch #tool_fill .color_block svg {
width: 36px !important;
height: 36px !important;
}
.touch #svg_editor #tool_switch {
display: none;
}
#svg_editor #path_node_panel .tool_button {
color: #999;
border: solid #3F3F3C 1px;
@ -1015,6 +1069,10 @@ html, body {
left: 0;
}
.touch #svg_editor #color_tools #tool_fill .color_block > div {
position: relative;
}
#svg_editor #color_tools #tool_fill .color_block #fill_bg, #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
position: absolute;
top: 1px;
@ -1024,10 +1082,17 @@ html, body {
background: #fff;
}
#tool_stroke {
position: absolute;
top: 12px;
left: 12px;
.touch #svg_editor #color_tools #tool_fill .color_block #fill_bg, .touch #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
width: 36px;
height: 36px;
right: auto;
bottom: auto;
}
.touch #tool_stroke {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
@ -1043,6 +1108,15 @@ html, body {
box-shadow: 0 0 0 1px #000;
}
.touch #stroke_color:after {
height: 14px;
left: 10px;
position: absolute;
top: 10px;
width: 14px;
}
#svg_editor #color_tools #tool_switch {
cursor: pointer;
opacity: 0.7;
@ -1069,19 +1143,29 @@ html, body {
border: solid #ccc 1px;
}
.touch #svg_editor #color_tools #tool_stroke .color_block {
width: 36px;
height: 36px;
}
#svg_editor #color_tools #tool_stroke .color_block > div {
position: absolute;
bottom: 0;
right: 0;
}
.touch #svg_editor #color_tools #tool_stroke .color_block > div {
position: relative;
}
#svg_editor #color_tools .icon_label {
padding: 0;
width: 24px;
height: 100%;
cursor: pointer;
position: absolute;
}
#svg_editor #zoomLabel {
@ -1096,7 +1180,7 @@ html, body {
#svg_editor div#palette {
float: left;
width: 672px;
width: 810px;
height: 16px;
}
@ -1106,157 +1190,14 @@ html, body {
top: 30px;
left: 50px;
bottom: 40px;
right: 200px;
right: 175px;
background-color: #444;
overflow: auto;
text-align: center;
}
#svg_editor #sidepanels {
display: none;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
width: 2px;
padding: 10px;
border-left: none;
z-index: 10;
}
#svg_editor #layerpanel {
display: inline-block;
position:absolute;
top: 1px;
bottom: 0px;
right: 0px;
width: 0px;
overflow: auto;
margin: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #D0D0D0;
font-weight: bold;
left: 0px;
top: 40%;
width: 1em;
padding: 5px 1px 5px 5px;
margin-left: 3px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle:hover {
font-weight: bold;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #layerbuttons {
margin: 0px;
padding: 0px;
padding-left: 2px;
padding-right: 2px;
width: 125px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: hidden;
}
#svg_editor .layer_button {
width: 14px;
height: 14px;
padding: 1px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
float: left;
margin-right: 3px;
}
#svg_editor .layer_button:last-child {
margin-right: 0;
}
#svg_editor .layer_buttonpressed {
width: 14px;
height: 14px;
padding: 1px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
cursor: pointer;
}
#svg_editor #layerlist {
margin: 1px;
padding: 0px;
width: 127px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#svg_editor #layerlist tr.layer {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#svg_editor #layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#svg_editor #layerlist td.layervis {
width: 22px;
cursor:pointer;
}
#svg_editor #layerlist td.layerinvis {
background-image: none;
cursor:pointer;
}
#svg_editor #layerlist td.layervis * {
display: block;
}
#svg_editor #layerlist td.layerinvis * {
display: none;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
#svg_editor #layerlist tr.layersel td.layername {
font-weight: bold;
}
#svg_editor #selLayerLabel {
white-space: nowrap;
}
#svg_editor #selLayerNames {
display: block;
.touch #svg_editor div#workarea {
top: 40px;
}
#svg_editor div.palette_item {
@ -1265,6 +1206,14 @@ html, body {
float: left;
}
.touch #svg_editor div.palette_item {
height: 30px;
border-top: solid #2f2f2c 5px;
border-bottom: solid #2f2f2c 5px;
width: 30px;
float: left;
}
#svg_editor .menu .menu_list {
display: none;
position: absolute;
@ -1308,12 +1257,16 @@ html, body {
#svg_editor #tools_top {
position: absolute;
width: 170px;
right: 2px;
top: 10px;
width: 160px;
right: 0;
top: 30px;
border-bottom: none;
overflow: visible;
padding: 0 10px;
padding: 0 0 0 10px;
}
.touch #svg_editor #tools_top {
top: 40px;
}
#svg_editor label {
@ -1352,29 +1305,6 @@ div#font-selector .font-item:hover {
background-color: #eee;
}
#svg_editor #tools_top label:before,
#svg_editor #tools_top label:after {
content:"";
display:table;
}
#svg_editor #tools_top label:after {
clear:both;
}
#svg_editor #tools_top label span, #svg_editor #tools_top label select {
display: block;
width: 80px;
float: left;
line-height: 185%
}
#svg_editor #tools_top label span.tuco {
width: 100%;
float: none;
}
#svg_editor #tools_top #marker_panel * {
float: left;
}
@ -1415,38 +1345,11 @@ div#font-selector .font-item:hover {
}
#svg_editor input[type=text], #svg_editor input[type=number] {
border: solid #3f3f3c 1px;
background-color: transparent;
color: #09f;
display: block;
float: left;
font-size: 13px;
padding: 2px 5px;
width: 70px;
-webkit-appearance: none;
border-radius: 2px;
margin: 0;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
#svg_editor #color_picker input[type=text], #color_picker #svg_editor input[type=number] {
width: 30px;
background: #fff;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#svg_editor .dropdown_set input[type=text], #svg_editor .dropdown_set input[type=number] {
width: 50px;
}
@ -1473,19 +1376,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#svg_editor input[type=submit]:hover, #svg_editor button:hover {background: #2F84C1;}
#svg_editor input[type=submit]:active, #svg_editor button:active {padding: 6px 10px 4px 10px; box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); border-bottom: solid rgba(255,255,255,0.1) 1px;}
#svg_editor input[type=text]:focus, #svg_editor input[type=number]:focus {
border: solid rgba(0, 120, 255, 0.3) 1px;
outline: none;
}
#svg_editor input[readonly=readonly], #svg_editor input[readonly=readonly]:focus {
background: transparent;
color: #fff;
border: none;
outline: none;
}
#svg_editor #tools_left {
position: absolute;
@ -1783,11 +1673,6 @@ span.zoom_tool img {
color: #fff;
}
#svg_editor #tool_font_size {
clear:both;
padding-top: 8px;
}
#text {
position: absolute;
left: -9999px;
@ -1874,41 +1759,13 @@ span.zoom_tool img {
width: 3.2em;
}
#svg_editor .stroke_tool .dropdown button {
margin-top: 0;
}
#svg_editor .stroke_tool div div {
-moz-user-select: none;
-webkit-user-select: none;
width: 20px;
height: 20px;
margin: 0;
padding: 1px;
background: rgba(255,255,255,0.3);
}
#svg_editor #tools_bottom .stroke_tool .dropdown button {
background-color:#555;
margin-top: 0;
}
#svg_editor #tools_top h4 {
color: #fff;
font-weight: normal;
margin: 0;
padding: 20px 0 5px 0;
padding: 0 0 10px 0;
}
.stroke_tool > div {
width: 42px;
}
.stroke_tool > div > * {
float: left;
}
#tools_top .dropdown .icon_label {
border: 1px solid transparent;
/* margin-top: 3px;*/
@ -1989,8 +1846,6 @@ span.zoom_tool img {
-webkit-border-radius: 0;
}
#svg_editor #tool_stroke label input { margin-top: 0;}
#svg_editor #copyright {
text-align: right;
padding-right: .3em;
@ -2559,6 +2414,10 @@ span.zoom_tool img {
cursor: url(images/rotate.png) 12 12, auto;
}
#workarea.select text, #workarea.multiselect text {
cursor: default;
}
#workarea.n-resize * {cursor: n-resize !important;}
#workarea.e-resize * {cursor: e-resize !important;}
#workarea.w-resize * {cursor: w-resize !important;}
@ -2569,7 +2428,9 @@ span.zoom_tool img {
#workarea.nw-resize * {cursor: nw-resize !important;}
#workarea.sw-resize * {cursor: sw-resize !important;}
#workarea.copy {
cursor: copy;
}
#workarea.zoom {
cursor: crosshair;
@ -2627,7 +2488,209 @@ span.zoom_tool img {
display: none;
position: absolute;
z-index: 20;
}/*
}
#svg_editor .draginput {
background: #3f3f3c;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
width: 70px;
height: 70px;
display: block;
position: relative;
float: left;
margin: 0 5px 5px 0;
overflow: hidden;
}
#svg_editor .draginput .caret {
border: solid transparent 5px;
border-top-color: #999;
position: absolute;
width: 0;
height: 0;
right: 5px;
margin-top: -2px;
top: 50%;
}
#svg_editor .draginput label {
margin: 28px 10px 0 5px;
font-size: 11px;
}
#svg_editor .draginput label#resolution_label {
font: 12px/110% sans-serif;
color: white;
font-weight: bold;
position: absolute;
left: auto;
right: 10px;
z-index: 0;
text-align: right;
}
#svg_editor .draginput label#resolution_label .pull {
position: relative;
left: -15px;
}
#svg_editor .draginput label#resolution_label span {
right: -13px;
left: auto;
font-size: 16px;
top: 2px;
font-weight: bold;
color: white;
}
.touch #svg_editor .draginput.active:after {
content: attr(data-value);
display: block;
position: absolute;
background: #3f3f3c;
top: 0;
width: 40px;
left: -50px;
padding: 3px 5px;
color: #fff;
}
#svg_editor .draginput input {
border: none;
background: transparent;
font: 24px/normal sans-serif;
text-align: center;
color: #4F80FF;
padding: 30px 0 16px;
width: 100%;
height: 24px;
position: relative;
z-index: 2;
cursor: url(images/drag.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
#svg_editor .draginput input:active {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor .draginput span {
font: 11px/130% sans-serif;
color: #ccc;
display: block;
position: absolute;
top: 5px;
left: 5px;
text-align: left;
}
#svg_editor .draginput.error {
background: #900;
}
#svg_editor .draginput.error input {
color: #fff;
}
#svg_editor .draginput.stroke_tool {
text-align: center;
}
#svg_editor .draginput select {
-webkit-appearance: none;
opacity: 0;
display: block;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
z-index: 1;
}
#svg_editor .draginput#segment_type select {
font-size: 11px;
margin-top: 40px;
width: 70px;
}
.draginput_cursor{
position: absolute;
top: 50%;
width: 100%;
border-top: solid rgba(50,100,200,0.25) 3px;
margin-top: -2px;
z-index: 0;
}
#svg_editor .draginput input[readonly=readonly] {
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body.dragging * {
cursor: url(images/dragging.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
body.drag * {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor input[readonly=readonly]:focus {
box-shadow: none;
}
#color_canvas_tools {
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
width: 60px;
height: 40px;
margin: 23px 5px 5px 5px;
position: relative;
}
#color_canvas_tools svg {
display: block;
}
#tool_angle_indicator {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid rgba(50,100,200,0.25) 3px;
position: absolute;
bottom: 2px;
left: 7px;
}
#tool_angle_indicator_cursor {
width: 4px;
height: 25px;
border-top: solid #4F80FF 3px;
position: absolute;
margin: -3px 0 0 25px;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
/*
Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)
@ -2652,19 +2715,16 @@ span.zoom_tool img {
*/
INPUT.spin-button {
/* explicitly put padding for top/bottom/left in here so that Opera displays it better */
padding: 2px 20px 2px 2px;
background-repeat:no-repeat; /* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
background-position:100% 0%;
background-image:url('spinbtn_updn.png');
background-color:white; /* Needed for Opera */
background: transparent url('spinner.svg') right top no-repeat;
background-size: 17px 54px;
}
INPUT.spin-button.up { /* Change button img when mouse is over the UP-arrow */
cursor:pointer;
background-position:100% -18px; /* 18px matches height of 2 visible buttons */
background-position:100% -20px; /* 18px matches height of 2 visible buttons */
}
INPUT.spin-button.down { /* Change button img when mouse is over the DOWN-arrow */
cursor:pointer;
background-position:100% -36px; /* 36px matches height of 2x2 visible buttons */
background-position:100% -40px; /* 36px matches height of 2x2 visible buttons */
}

97
method-draw/draginput.js Normal file
View File

@ -0,0 +1,97 @@
/* 2012 Mark MacKay, MIT License*/
(function() {
var $;
$ = jQuery;
$.fn.extend({
dragInput: function(options) {
var settings = {
decimals: 0,
dragArea: 100,
moveCallback: function(){},
cursorColor: "#c00"
};
settings = $.extend(settings, options);
var input = $(this).find('input').first();
var dragInput = $(this)
var cursor = $("<div class='draginput_cursor'/>").appendTo(dragInput);
// initial values
var min = input.attr("data-min") || 0;
var max = input.attr("data-max") || 100;
var step = input.attr("data-step") || 1;
var val = input.attr("value") || 0;
var dragArea = settings.dragArea;
var cursorArea = dragInput.height();
dragInput.attr("readonly", "readonly")
var change = function(){
cursor.css("top", (input.attr("value")*-1) * (cursorArea/(max-min)) + cursorArea)
};
change();
var start = function(event) {
$('body').addClass('grabbing')
var oy = event.pageY;
var val = parseFloat(input.attr('value'));
var el_oy = dragInput.offset().top;
//updates on move and end
$(window).bind("mousemove.dragInput touchmove.dragInput", function(e) {move(e, oy, val, el_oy)});
$(window).bind("mouseup.dragInput touchend.dragInput", end);
};
var move = function(e, oy, val, el_oy) {
var y = e.pageY;
var range = (max-min) / dragArea
var dy = (y - oy)*-1 + val/range;
val = range * dy
if (val > max) {
var offset = (val*-1) * (cursorArea/(max-min)) + cursorArea;
if (offset > -30) { dragInput.css({"-webkit-transform": "translate(0,"+ (offset) +"px)"})}
else {dragInput.addClass("rubberband")}
val = max;
}
if (val < min) {
var offset = (val*-1) * (cursorArea/(max-min));
if (offset > 30) {dragInput.addClass("rubberband")}
else {dragInput.css({"-webkit-transform": "translate(0,"+ (offset) +"px)"})}
val = min;
}
cursor.css("top", (val*-1) * (cursorArea/(max-min)) + cursorArea)
input.attr("value", parseFloat(Math.round(val * 100) / 100).toFixed(settings.decimals));
settings.moveCallback();
};
var dblclick = function() {
dragInput.unbind("mousedown.dragInput touchstart.dragInput");
input.removeAttr('readonly');
input.focus()
input.select()
};
var relock = function() {
input.attr('readonly', 'readonly');
dragInput.bind("mousedown.dragInput touchstart.dragInput", start);
}
var end = function() {
$(window).unbind("mousemove.dragInput touchmove.dragInput");
$(window).unbind("mouseup.dragInput touchend.dragInput");
dragInput.removeClass("rubberband").removeAttr("style")
$('body').removeClass('grabbing');
};
return this.each(function() {
$(this).bind("mousedown.dragInput touchstart.dragInput", start);
$(this).bind("dblclick.dragInput tapHold.dragInput", dblclick);
input.bind("blur.dragInput", relock);
input.bind("keypress.dragInput", function(e){if (e.keyCode == 13) input.trigger("blur.dragInput")});
input.bind("change.dragInput", function(){change()})
});
}
});
}).call(this);

11
method-draw/dragupload.js Normal file
View File

@ -0,0 +1,11 @@
window.onload = function () {
document.querySelector('body').addEventListener('drop', function(e) {
e.preventDefault();
var reader = new FileReader();
reader.onload = function(evt) {
//document.querySelector('img').src = evt.target.result;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
}

6
method-draw/history.js
View File

@ -343,12 +343,12 @@ svgedit.history.ChangeElementCommand.prototype.unapply = function(handler) {
if(!bChangedTransform) {
var angle = svgedit.utilities.getRotationAngle(this.elem);
if (angle) {
var bbox = elem.getBBox();
var bbox = this.elem.getBBox();
var cx = bbox.x + bbox.width/2,
cy = bbox.y + bbox.height/2;
var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join('');
if (rotate != elem.getAttribute("transform")) {
elem.setAttribute("transform", rotate);
if (rotate != this.elem.getAttribute("transform")) {
this.elem.setAttribute("transform", rotate);
}
}
}

BIN
method-draw/images/drag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

BIN
method-draw/images/dragging.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 B

35
method-draw/images/svg_edit_icons.svg
View File

@ -2,37 +2,10 @@
<!-- All images created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g id="logo">
<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
<stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
</linearGradient>
<linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
<stop offset="0" stop-color="#ff7f00" stop-opacity="1"/>
<stop offset="1" stop-color="#ffff00"/>
</linearGradient>
<linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
<stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
<stop offset="1" stop-color="#666666" stop-opacity="1"/>
</linearGradient>
</defs>
<g>
<path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
<path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
<path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="none"/>
<path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="none"/>
<rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="none" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
<rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="none" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
<ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="none" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
<path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="none"/>
<path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="none"/>
</g>
<g>
<title>Layer 2</title>
<path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
</g>
</svg>
<svg viewBox="0 0 16 16" version="1.1">
<path id="svg_7" d="m-0.0965,16.1043l16.10001,-16.06917l-0.00001,16.06917l-16.1,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="1.5" fill="#cccccc"/>
<path id="svg_6" d="m0.0035,16.10449l0,-15.99999l16,15.99999l-16,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="1.5" fill="#666666"/>
</svg>
</g>

2
method-draw/index.html
View File

@ -147,7 +147,7 @@ $(function(){
<div class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
<div class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
<div class="separator"></div>
<div class="menu_item action_selected disabled" id="tool_copy">Cut <span class="shortcut">⌘X</span></div>
<div class="menu_item action_selected disabled" id="tool_cut">Cut <span class="shortcut">⌘X</span></div>
<div class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
<div class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
<div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span class="shortcut">⌘D</span></div>

2149
method-draw/jacked.js Normal file
View File

File diff suppressed because it is too large Load Diff

8
method-draw/jgraduate/jquery.jgraduate.js
View File

@ -709,7 +709,7 @@ jQuery.fn.jGraduate =
trans_img.setAttributeNS(ns.xlink, 'xlink:href', bg_image);
$(stopMakerSVG).click(function(evt) {
$(stopMakerSVG).on("click touchstart", function(evt) {
stop_offset = stopMakerDiv.offset();
var target = evt.target;
if(target.tagName === 'path') return;
@ -837,13 +837,13 @@ jQuery.fn.jGraduate =
});
// bind GUI elements
$('#'+id+'_jGraduate_Ok').bind('click', function() {
$('#'+id+'_jGraduate_Ok').bind('click touchstart', function() {
$this.paint.type = curType;
$this.paint[curType] = curGradient.cloneNode(true);;
$this.paint.solidColor = null;
okClicked();
});
$('#'+id+'_jGraduate_Cancel').bind('click', function(paint) {
$('#'+id+'_jGraduate_Cancel').bind('click touchstart', function(paint) {
cancelClicked();
});
@ -1112,7 +1112,7 @@ jQuery.fn.jGraduate =
var tabs = $(idref + ' .jGraduate_tabs li');
tabs.click(function() {
tabs.on("click touchstart", function() {
tabs.removeClass('jGraduate_tab_current');
$(this).addClass('jGraduate_tab_current');
$(idref + " > div").hide();

202
method-draw/jquery-draginput.js vendored Normal file
View File

@ -0,0 +1,202 @@
// Mark MacKay http://method.ac MIT License
$.fn.dragInput = function(cfg){
return this.each(function(){
this.repeating = false;
// Apply specified options or defaults:
// (Ought to refactor this some day to use $.extend() instead)
this.dragCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, // Fixes bug with min:0
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && cfg.step ? Number(cfg.step) : 1,
stepfunc: cfg && cfg.stepfunc ? cfg.stepfunc : false,
page: cfg && cfg.page ? Number(cfg.page) : 10,
reset: cfg && cfg.reset ? cfg.reset : this.value,
delay: cfg && cfg.delay ? Number(cfg.delay) : 500,
interval: cfg && cfg.interval ? Number(cfg.interval) : 100,
height: 70,
cursor: cfg && cfg.cursor ? Boolean(cfg.cursor) : false,
start: cfg && cfg.start ? Number(cfg.start) : 0,
_btn_width: 20,
_direction: null,
_delay: null,
_repeat: null,
callback: cfg && cfg.callback ? cfg.callback : null
};
// if a smallStep isn't supplied, use half the regular step
this.dragCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.dragCfg.step/2;
var $label = $(this).parent();
var $input = $(this);
var cursorHeight = this.dragCfg.height;
var min = this.dragCfg.min;
var max = this.dragCfg.max
var step = this.dragCfg.step
var area = (max - min > 0) ? (max - min) / step : 200;
var scale = area/cursorHeight * step;
var lastY = 0;
var attr = this.getAttribute("data-attr");
var canvas = svgEditor.canvas
var selectedElems = canvas.getSelectedElems();
var isTouch = svgedit.browser.isTouch();
var $cursor = (area && this.dragCfg.cursor)
? $("<div class='draginput_cursor' />").appendTo($label)
: false
if ($cursor && this.dragCfg.start) $cursor.css("top", (this.dragCfg.start*-1)/scale+cursorHeight)
//this is where all the magic happens
this.adjustValue = function(i, noUndo){
var v;
if(isNaN(this.value)) {
v = this.dragCfg.reset;
} else if($.isFunction(this.dragCfg.stepfunc)) {
v = this.dragCfg.stepfunc(this, i);
} else {
// weirdest javascript bug ever: 5.1 + 0.1 = 5.199999999
v = Number((Number(this.value) + Number(i)).toFixed(5));
}
if (max !== null) v = Math.min(v, max);
if (min !== null) v = Math.max(v, min);
if ($cursor) this.updateCursor(v);
this.value = v;
$label.attr("data-value", v)
if ($.isFunction(this.dragCfg.callback)) this.dragCfg.callback(this, noUndo)
};
$label.toggleClass("draginput", $label.is("label"))
// when the mouse is down and moving
this.move = function(e, oy, val) {
if (isTouch) {
e = e.originalEvent.touches[0]
}
// just got started let's save for undo purposes
if (lastY === 0) {
lastY = oy;
}
var deltaY = (e.pageY - lastY) *-1
lastY = e.pageY;
val = deltaY * scale
var fixed = (step < 1) ? 1 : 0
this.adjustValue(val.toFixed(fixed)) //no undo true
};
//when the mouse is released
this.stop = function() {
$('body').removeClass('dragging');
$label.removeClass("active")
$(window).unbind("mousemove.draginput touchmove.draginput mouseup.draginput touchend.draginput");
lastY = 0;
if (selectedElems[0]) {
var batchCmd = canvas.undoMgr.finishUndoableChange();
if (!batchCmd.isEmpty()) canvas.undoMgr.addCommandToHistory(batchCmd);
}
this.adjustValue(0)
}
this.updateCursor = function(){
var value = parseFloat(this.value)
var pos = (value*-1)/scale+cursorHeight
$(this).next(".draginput_cursor").css("top", pos)
}
this.start = function(e) {
if (isTouch) e = e.originalEvent.touches[0]
var oy = e.pageY;
var val = this.value;
var el = this;
canvas.undoMgr.beginUndoableChange(attr, selectedElems)
$('body').addClass('dragging');
$label.addClass('active');
$(window).bind("mousemove.draginput touchmove.draginput", function(e){el.move(e, oy, parseFloat(val))})
$(window).bind("mouseup.draginput touchend.draginput", function(e){el.stop()})
}
$(this)
.attr("readonly", "readonly")
.attr("data-scale", scale)
.attr("data-domain", cursorHeight)
.attr("data-cursor", ($cursor != false))
.bind("mousedown touchstart", function(e){this.start(e);})
.bind("dblclick taphold", function(e) {
this.removeAttribute("readonly", "readonly");
this.focus();
this.select();
})
.blur(function(e){
this.setAttribute("readonly", "readonly");
this.adjustValue(0)
})
.keydown(function(e){
// Respond to up/down arrow keys.
switch(e.keyCode){
case 13: this.blur(); break; // Enter
case 38: this.adjustValue(this.dragCfg.step); break; // Up
case 40: this.adjustValue(-this.dragCfg.step); break; // Down
case 33: this.adjustValue(this.dragCfg.page); break; // PageUp
case 34: this.adjustValue(-this.dragCfg.page); break; // PageDown
}
})
/*
http://unixpapa.com/js/key.html describes the current state-of-affairs for
key repeat events:
- Safari 3.1 changed their model so that keydown is reliably repeated going forward
- Firefox and Opera still only repeat the keypress event, not the keydown
*/
.keypress(function(e){
if (this.repeating) {
// Respond to up/down arrow keys.
switch(e.keyCode){
case 38: this.adjustValue(this.dragCfg.step); break; // Up
case 40: this.adjustValue(-this.dragCfg.step); break; // Down
case 33: this.adjustValue(this.dragCfg.page); break; // PageUp
case 34: this.adjustValue(-this.dragCfg.page); break; // PageDown
}
}
// we always ignore the first keypress event (use the keydown instead)
else {
this.repeating = true;
}
})
// clear the 'repeating' flag
.keyup(function(e) {
this.repeating = false;
switch(e.keyCode){
case 38: // Up
case 40: // Down
case 33: // PageUp
case 34: // PageDown
case 13: this.adjustValue(0); break; // Enter/Return
}
})
.bind("mousewheel", function(e, delta, deltaX, deltaY){
if (deltaY > 0)
this.adjustValue(this.dragCfg.step, true);
else if (deltaY < 0)
this.adjustValue(-this.dragCfg.step, true);
e.preventDefault();
})
});
};
// public function
$.fn.dragInput.updateCursor = function(el){
var value = parseFloat(el.value);
var scale = parseFloat(el.getAttribute("data-scale"));
var domain = parseFloat(el.getAttribute("data-domain"));
var pos = ((value*-1)/scale+domain) + "px";
var cursor = el.nextElementSibling
if (cursor) cursor.style.top = pos;
}

24
method-draw/requestanimationframe.js Normal file
View File

@ -0,0 +1,24 @@
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());

45
method-draw/select.js
View File

@ -61,6 +61,10 @@ svgedit.select.Selector = function(id, elem) {
}
})
);
if (svgedit.browser.isTouch()) {
this.selectorRect.setAttribute("stroke-opacity", 0);
}
// this holds a reference to the grip coordinates for this selector
this.gripCoords = {
@ -228,17 +232,24 @@ svgedit.select.Selector.prototype.resize = function() {
var xform = angle ? 'rotate(' + [angle,cx,cy].join(',') + ')' : '';
this.selectorGroup.setAttribute('transform', xform);
nbax -= 3.5;
nbay -= 3.5;
if(svgedit.browser.isTouch()) {
nbax -= 15.75;
nbay -= 15.75;
}
else {
nbax -= 4;
nbay -= 4;
}
this.gripCoords = {
'nw': [nbax, nbay],
'ne': [nbax+nbaw, nbay],
'sw': [nbax, nbay+nbah],
'se': [nbax+nbaw, nbay+nbah],
'n': [nbax + (nbaw)/2, nbay],
'w': [nbax, nbay + (nbah)/2],
'e': [nbax + nbaw, nbay + (nbah)/2],
's': [nbax + (nbaw)/2, nbay + nbah]
'nw': [nbax, nbay].map(Math.round),
'ne': [nbax+nbaw, nbay].map(Math.round),
'sw': [nbax, nbay+nbah].map(Math.round),
'se': [nbax+nbaw, nbay+nbah].map(Math.round),
'n': [nbax + (nbaw)/2, nbay].map(Math.round),
'w': [nbax, nbay + (nbah)/2].map(Math.round),
'e': [nbax + nbaw, nbay + (nbah)/2].map(Math.round),
's': [nbax + (nbaw)/2, nbay + nbah].map(Math.round)
};
for(var dir in this.gripCoords) {
@ -351,15 +362,21 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
'element': 'rect',
'attr': {
'id': ('selectorGrip_resize_' + dir),
'width': 7,
'height': 7,
'width': 8,
'height': 8,
'fill': "#4F80FF",
'stroke': "transparent",
'stroke-width': 2,
'stroke': "rgba(0,0,0,0)",
'stroke-width': 1,
'style': ('cursor:' + dir + '-resize'),
'pointer-events': 'all'
}
});
if (svgedit.browser.isTouch()) {
grip.setAttribute("width", 30.5)
grip.setAttribute("height", 30.5)
grip.setAttribute("fill-opacity", 0.3)
}
$.data(grip, 'dir', dir);
$.data(grip, 'type', 'resize');

13
method-draw/spinbtn/JQuerySpinBtn.css
View File

@ -23,19 +23,16 @@
*/
INPUT.spin-button {
/* explicitly put padding for top/bottom/left in here so that Opera displays it better */
padding: 2px 20px 2px 2px;
background-repeat:no-repeat; /* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
background-position:100% 0%;
background-image:url('spinbtn_updn.png');
background-color:white; /* Needed for Opera */
background: transparent url('spinner.svg') right top no-repeat;
background-size: 17px 54px;
}
INPUT.spin-button.up { /* Change button img when mouse is over the UP-arrow */
cursor:pointer;
background-position:100% -18px; /* 18px matches height of 2 visible buttons */
background-position:100% -20px; /* 18px matches height of 2 visible buttons */
}
INPUT.spin-button.down { /* Change button img when mouse is over the DOWN-arrow */
cursor:pointer;
background-position:100% -36px; /* 36px matches height of 2x2 visible buttons */
background-position:100% -40px; /* 36px matches height of 2x2 visible buttons */
}

1
method-draw/spinbtn/spinner.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 17 54" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M 3 8 L 4 9 L 8 6 L 12 9 L 13 8 L 8 3 L 3 8 Z" fill="#ffffff" opacity="0.30196078431372547"/> <path d="M 13 12 L 12 11 L 8 14 L 4 11 L 3 12 L 8 17 L 13 12 Z" fill="#ffffff" opacity="0.30196078431372547"/> <path d="M 3 28 L 4 29 L 8 26 L 12 29 L 13 28 L 8 23 L 3 28 Z" fill="#33ccff"/> <path d="M 13 32 L 12 31 L 8 34 L 4 31 L 3 32 L 8 37 L 13 32 Z" fill="#ffffff"/> <path d="M 13 52 L 12 51 L 8 54 L 4 51 L 3 52 L 8 57 L 13 52 Z" fill="#33ccff"/> <path d="M 3 48 L 4 49 L 8 46 L 12 49 L 13 48 L 8 43 L 3 48 Z" fill="#ffffff"/> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 617 B

600
method-draw/svg-editor.css
View File

@ -54,10 +54,6 @@ html, body {
border-bottom: 1px solid #808080;
}
#svg_editor select {
margin-top: 4px;
}
#svg_editor #svgroot {
-moz-user-select: none;
-webkit-user-select: none;
@ -92,6 +88,12 @@ html, body {
vertical-align: top;
}
.touch #svg_editor .menu_title {
padding: 7px 17px;
height: 26px;
line-height: 26px;
}
#svg_editor .menu .menu_title:hover {
background: rgba(255,255,255,0.1);
}
@ -113,6 +115,10 @@ html, body {
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.touch #svg_editor .menu_list {
top: 38px;
}
#svg_editor #menu_bar.active .menu.open .menu_title {
background: white;
color: #333;
@ -212,7 +218,7 @@ html, body {
height: 15px;
top: 30px;
left: 66px;
right: 200px;
right: 175px;
border-top: solid #444 1px;
border-right: solid #444 1px;
}
@ -277,6 +283,11 @@ html, body {
float: left;
}
.touch #svg_editor div#palette_holder {
height: 40px;
margin-top: 0;
}
#svg_editor div#palette_holder #palette .palette_item:first-child {
background: #fff;
}
@ -286,30 +297,55 @@ html, body {
}
#tool_stroke select {
margin-top: 0;
}
#svg_editor #color_tools, #color_canvas_tools {
#svg_editor #color_tools {
position: relative;
width: 48px;
height: 48px;
margin: 6px 6px 0 6px;
}
#svg_editor #color_tools #tool_fill, #tool_canvas {
.touch #svg_editor #color_tools {
width: auto;
height: auto;
}
#tool_fill {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.touch #tool_fill {
position: static;
width: 36px;
height: 36px;
margin-bottom: 10px;
}
#tool_fill.active, #tool_stroke.active {
z-index: 2;
}
#tool_stroke {
top: 14px;
left: 14px;
}
.touch #tool_fill.active, .touch #tool_stroke.active {
outline: 4px solid #09f;
}
#tool_fill, #tool_stroke, #tool_canvas {
box-shadow: 0 0 0 1px #2f2f2c;
position: absolute;
}
.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {
position: relative;
top: 0;
left: 0;
}
#color_canvas_tools {
@ -317,13 +353,31 @@ html, body {
cursor: pointer;
}
#tool_fill .color_block, #tool_canvas .color_block {
#tool_fill .color_block {
width: 24px;
height: 24px;
overflow: hidden;
border: solid #ccc 1px;
}
.touch #svg_editor #tool_eyedropper {
margin-top: 6px;
}
.touch #tool_fill .color_block {
width: 36px;
height: 36px;
}
.touch #tool_fill .color_block svg {
width: 36px !important;
height: 36px !important;
}
.touch #svg_editor #tool_switch {
display: none;
}
#svg_editor #path_node_panel .tool_button {
color: #999;
border: solid #3F3F3C 1px;
@ -369,6 +423,10 @@ html, body {
left: 0;
}
.touch #svg_editor #color_tools #tool_fill .color_block > div {
position: relative;
}
#svg_editor #color_tools #tool_fill .color_block #fill_bg, #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
position: absolute;
top: 1px;
@ -378,10 +436,17 @@ html, body {
background: #fff;
}
#tool_stroke {
position: absolute;
top: 12px;
left: 12px;
.touch #svg_editor #color_tools #tool_fill .color_block #fill_bg, .touch #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
width: 36px;
height: 36px;
right: auto;
bottom: auto;
}
.touch #tool_stroke {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
@ -397,6 +462,15 @@ html, body {
box-shadow: 0 0 0 1px #000;
}
.touch #stroke_color:after {
height: 14px;
left: 10px;
position: absolute;
top: 10px;
width: 14px;
}
#svg_editor #color_tools #tool_switch {
cursor: pointer;
opacity: 0.7;
@ -423,19 +497,29 @@ html, body {
border: solid #ccc 1px;
}
.touch #svg_editor #color_tools #tool_stroke .color_block {
width: 36px;
height: 36px;
}
#svg_editor #color_tools #tool_stroke .color_block > div {
position: absolute;
bottom: 0;
right: 0;
}
.touch #svg_editor #color_tools #tool_stroke .color_block > div {
position: relative;
}
#svg_editor #color_tools .icon_label {
padding: 0;
width: 24px;
height: 100%;
cursor: pointer;
position: absolute;
}
#svg_editor #zoomLabel {
@ -450,7 +534,7 @@ html, body {
#svg_editor div#palette {
float: left;
width: 672px;
width: 810px;
height: 16px;
}
@ -460,157 +544,14 @@ html, body {
top: 30px;
left: 50px;
bottom: 40px;
right: 200px;
right: 175px;
background-color: #444;
overflow: auto;
text-align: center;
}
#svg_editor #sidepanels {
display: none;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
width: 2px;
padding: 10px;
border-left: none;
z-index: 10;
}
#svg_editor #layerpanel {
display: inline-block;
position:absolute;
top: 1px;
bottom: 0px;
right: 0px;
width: 0px;
overflow: auto;
margin: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #D0D0D0;
font-weight: bold;
left: 0px;
top: 40%;
width: 1em;
padding: 5px 1px 5px 5px;
margin-left: 3px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle:hover {
font-weight: bold;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #layerbuttons {
margin: 0px;
padding: 0px;
padding-left: 2px;
padding-right: 2px;
width: 125px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: hidden;
}
#svg_editor .layer_button {
width: 14px;
height: 14px;
padding: 1px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
float: left;
margin-right: 3px;
}
#svg_editor .layer_button:last-child {
margin-right: 0;
}
#svg_editor .layer_buttonpressed {
width: 14px;
height: 14px;
padding: 1px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
cursor: pointer;
}
#svg_editor #layerlist {
margin: 1px;
padding: 0px;
width: 127px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#svg_editor #layerlist tr.layer {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#svg_editor #layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#svg_editor #layerlist td.layervis {
width: 22px;
cursor:pointer;
}
#svg_editor #layerlist td.layerinvis {
background-image: none;
cursor:pointer;
}
#svg_editor #layerlist td.layervis * {
display: block;
}
#svg_editor #layerlist td.layerinvis * {
display: none;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
#svg_editor #layerlist tr.layersel td.layername {
font-weight: bold;
}
#svg_editor #selLayerLabel {
white-space: nowrap;
}
#svg_editor #selLayerNames {
display: block;
.touch #svg_editor div#workarea {
top: 40px;
}
#svg_editor div.palette_item {
@ -619,6 +560,14 @@ html, body {
float: left;
}
.touch #svg_editor div.palette_item {
height: 30px;
border-top: solid #2f2f2c 5px;
border-bottom: solid #2f2f2c 5px;
width: 30px;
float: left;
}
#svg_editor .menu .menu_list {
display: none;
position: absolute;
@ -662,12 +611,16 @@ html, body {
#svg_editor #tools_top {
position: absolute;
width: 170px;
right: 2px;
top: 10px;
width: 160px;
right: 0;
top: 30px;
border-bottom: none;
overflow: visible;
padding: 0 10px;
padding: 0 0 0 10px;
}
.touch #svg_editor #tools_top {
top: 40px;
}
#svg_editor label {
@ -706,29 +659,6 @@ div#font-selector .font-item:hover {
background-color: #eee;
}
#svg_editor #tools_top label:before,
#svg_editor #tools_top label:after {
content:"";
display:table;
}
#svg_editor #tools_top label:after {
clear:both;
}
#svg_editor #tools_top label span, #svg_editor #tools_top label select {
display: block;
width: 80px;
float: left;
line-height: 185%
}
#svg_editor #tools_top label span.tuco {
width: 100%;
float: none;
}
#svg_editor #tools_top #marker_panel * {
float: left;
}
@ -769,38 +699,11 @@ div#font-selector .font-item:hover {
}
#svg_editor input[type=text], #svg_editor input[type=number] {
border: solid #3f3f3c 1px;
background-color: transparent;
color: #09f;
display: block;
float: left;
font-size: 13px;
padding: 2px 5px;
width: 70px;
-webkit-appearance: none;
border-radius: 2px;
margin: 0;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
#svg_editor #color_picker input[type=text], #color_picker #svg_editor input[type=number] {
width: 30px;
background: #fff;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#svg_editor .dropdown_set input[type=text], #svg_editor .dropdown_set input[type=number] {
width: 50px;
}
@ -827,19 +730,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#svg_editor input[type=submit]:hover, #svg_editor button:hover {background: #2F84C1;}
#svg_editor input[type=submit]:active, #svg_editor button:active {padding: 6px 10px 4px 10px; box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); border-bottom: solid rgba(255,255,255,0.1) 1px;}
#svg_editor input[type=text]:focus, #svg_editor input[type=number]:focus {
border: solid rgba(0, 120, 255, 0.3) 1px;
outline: none;
}
#svg_editor input[readonly=readonly], #svg_editor input[readonly=readonly]:focus {
background: transparent;
color: #fff;
border: none;
outline: none;
}
#svg_editor #tools_left {
position: absolute;
@ -1137,11 +1027,6 @@ span.zoom_tool img {
color: #fff;
}
#svg_editor #tool_font_size {
clear:both;
padding-top: 8px;
}
#text {
position: absolute;
left: -9999px;
@ -1228,41 +1113,13 @@ span.zoom_tool img {
width: 3.2em;
}
#svg_editor .stroke_tool .dropdown button {
margin-top: 0;
}
#svg_editor .stroke_tool div div {
-moz-user-select: none;
-webkit-user-select: none;
width: 20px;
height: 20px;
margin: 0;
padding: 1px;
background: rgba(255,255,255,0.3);
}
#svg_editor #tools_bottom .stroke_tool .dropdown button {
background-color:#555;
margin-top: 0;
}
#svg_editor #tools_top h4 {
color: #fff;
font-weight: normal;
margin: 0;
padding: 20px 0 5px 0;
padding: 0 0 10px 0;
}
.stroke_tool > div {
width: 42px;
}
.stroke_tool > div > * {
float: left;
}
#tools_top .dropdown .icon_label {
border: 1px solid transparent;
/* margin-top: 3px;*/
@ -1343,8 +1200,6 @@ span.zoom_tool img {
-webkit-border-radius: 0;
}
#svg_editor #tool_stroke label input { margin-top: 0;}
#svg_editor #copyright {
text-align: right;
padding-right: .3em;
@ -1913,6 +1768,10 @@ span.zoom_tool img {
cursor: url(images/rotate.png) 12 12, auto;
}
#workarea.select text, #workarea.multiselect text {
cursor: default;
}
#workarea.n-resize * {cursor: n-resize !important;}
#workarea.e-resize * {cursor: e-resize !important;}
#workarea.w-resize * {cursor: w-resize !important;}
@ -1923,7 +1782,9 @@ span.zoom_tool img {
#workarea.nw-resize * {cursor: nw-resize !important;}
#workarea.sw-resize * {cursor: sw-resize !important;}
#workarea.copy {
cursor: copy;
}
#workarea.zoom {
cursor: crosshair;
@ -1981,4 +1842,205 @@ span.zoom_tool img {
display: none;
position: absolute;
z-index: 20;
}
}
#svg_editor .draginput {
background: #3f3f3c;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
width: 70px;
height: 70px;
display: block;
position: relative;
float: left;
margin: 0 5px 5px 0;
overflow: hidden;
}
#svg_editor .draginput .caret {
border: solid transparent 5px;
border-top-color: #999;
position: absolute;
width: 0;
height: 0;
right: 5px;
margin-top: -2px;
top: 50%;
}
#svg_editor .draginput label {
margin: 28px 10px 0 5px;
font-size: 11px;
}
#svg_editor .draginput label#resolution_label {
font: 12px/110% sans-serif;
color: white;
font-weight: bold;
position: absolute;
left: auto;
right: 10px;
z-index: 0;
text-align: right;
}
#svg_editor .draginput label#resolution_label .pull {
position: relative;
left: -15px;
}
#svg_editor .draginput label#resolution_label span {
right: -13px;
left: auto;
font-size: 16px;
top: 2px;
font-weight: bold;
color: white;
}
.touch #svg_editor .draginput.active:after {
content: attr(data-value);
display: block;
position: absolute;
background: #3f3f3c;
top: 0;
width: 40px;
left: -50px;
padding: 3px 5px;
color: #fff;
}
#svg_editor .draginput input {
border: none;
background: transparent;
font: 24px/normal sans-serif;
text-align: center;
color: #4F80FF;
padding: 30px 0 16px;
width: 100%;
height: 24px;
position: relative;
z-index: 2;
cursor: url(images/drag.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
#svg_editor .draginput input:active {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor .draginput span {
font: 11px/130% sans-serif;
color: #ccc;
display: block;
position: absolute;
top: 5px;
left: 5px;
text-align: left;
}
#svg_editor .draginput.error {
background: #900;
}
#svg_editor .draginput.error input {
color: #fff;
}
#svg_editor .draginput.stroke_tool {
text-align: center;
}
#svg_editor .draginput select {
-webkit-appearance: none;
opacity: 0;
display: block;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
z-index: 1;
}
#svg_editor .draginput#segment_type select {
font-size: 11px;
margin-top: 40px;
width: 70px;
}
.draginput_cursor{
position: absolute;
top: 50%;
width: 100%;
border-top: solid rgba(50,100,200,0.25) 3px;
margin-top: -2px;
z-index: 0;
}
#svg_editor .draginput input[readonly=readonly] {
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body.dragging * {
cursor: url(images/dragging.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
body.drag * {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor input[readonly=readonly]:focus {
box-shadow: none;
}
#color_canvas_tools {
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
width: 60px;
height: 40px;
margin: 23px 5px 5px 5px;
position: relative;
}
#color_canvas_tools svg {
display: block;
}
#tool_angle_indicator {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid rgba(50,100,200,0.25) 3px;
position: absolute;
bottom: 2px;
left: 7px;
}
#tool_angle_indicator_cursor {
width: 4px;
height: 25px;
border-top: solid #4F80FF 3px;
position: absolute;
margin: -3px 0 0 25px;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}

608
method-draw/svg-editor.html
View File

@ -27,8 +27,7 @@
<script type="text/javascript" src="js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="jquerybbq/jquery.bbq.min.js"></script>
<script type="text/javascript" src="svgicons/jquery.svgicons.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.min.js"></script>
<script type="text/javascript" src="spinbtn/JQuerySpinBtn.min.js"></script>
<script type="text/javascript" src="jgraduate/jquery.jgraduate.js"></script>
<script type="text/javascript" src="touch.js"></script>
<script type="text/javascript" src="contextmenu/jquery.contextMenu.js"></script>
<script type="text/javascript" src="browser.js"></script>
@ -44,13 +43,15 @@
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="svgcanvas.js"></script>
<script type="text/javascript" src="svg-editor.js"></script>
<script type="text/javascript" src="locale/locale.js"></script>
<script type="text/javascript" src="jquery-draginput.js"></script>
<script type="text/javascript" src="contextmenu.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>
<script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
<script type="text/javascript" src="extensions/ext-grid.js"></script>
<script type="text/javascript" src="extensions/ext-shapes.js"></script>
<script type="text/javascript" src="extensions/ext-markers.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script>
<!{endif}-->
<!-- you can load extensions here -->
@ -95,37 +96,10 @@ $(function(){
</div>
</div>
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLabel">Layers</h3>
<fieldset id="layerbuttons">
<div id="layer_new" class="layer_button" title="New Layer"></div>
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
<div id="layer_moreopts" class="layer_button" title="More Options"></div>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div>
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s</div>
</div>
<div id="menu_bar">
<a class="menu">
<div class="menu_title"><img src="images/logo.svg" width="16" height="16" alt="Method Draw" /></div>
<div class="menu_title" id="logo"></div>
<div class="menu_list">
<div id="tool_prefs_option" class="menu_item">Preferences...</div>
<div class="separator"></div>
<div id="tool_about" class="menu_item">About this Editor...</div>
</div>
</a>
@ -134,7 +108,7 @@ $(function(){
<div class="menu_title">File</div>
<div class="menu_list" id="file_menu">
<div id="tool_clear" class="menu_item">New Image</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Open Image...</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Place Image...</div>
<div id="tool_import" class="menu_item"><div id="fileinputs_import"></div>Import SVG...</div>
<div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
<div id="tool_export" class="menu_item">Export as PNG</div>
@ -170,14 +144,6 @@ $(function(){
<div class="menu_item action_path_selected disabled" id="tool_reorient">Reorient path</div>
</div>
</div>
<div class="menu">
<div class="menu_title">Canvas</div>
<div class="menu_list" id="canvas_menu">
<div class="menu_item" id="tool_docprops">Canvas Dimensions...</div>
<div class="menu_item" id="tool_canvas_color_menu">Canvas Color...</div>
</div>
</div>
<div class="menu">
<div class="menu_title">View</div>
@ -194,171 +160,147 @@ $(function(){
</div>
<!--
<li id="tool_save">
<div></div>
Save Image (S)
</li>
<li id="tool_export">
<div></div>
Export as PNG
</li>
<li id="tool_docprops">
<div></div>
Document Properties (D)
</li>
</ul>
<p>
<a href="http://svg-edit.googlecode.com/" target="_blank">
SVG-edit Home Page
</a>
</p>
<button id="tool_prefs_option">
Editor Options
</button>
-->
<div id="tools_top" class="tools_panel">
<div id="canvas_panel" class="context_panel">
<div id="canvas_panel" class="context_panel clearfix">
<div class="toolset">
<h4>Canvas</h4>
<label title="Change canvas width">
<span class="icon_label">Width</span>
<input size="3" class="canvas_width" type="text" readonly="readonly" />
</label>
<label title="Change canvas height">
<span class="icon_label">Height</span>
<input class="canvas_height" size="3" type="text" readonly="readonly" />
</label>
</div>
<label title="Modify Canvas Size" class="padded"><button id="docprops_button">Canvas Dimensions...</button></label>
<h4 class="clearfix">Canvas</h4>
<label data-title="Change canvas width">
<span class="icon_label">Width</span>
<input size="3" id="canvas_width" type="text" pattern="[0-9]*" />
</label>
<label data-title="Change canvas height">
<span class="icon_label">Height</span>
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
</label>
<label title="Change canvas color"><span style="line-height: 140%">Canvas Color</span>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
<div id="canvas_bg"></div>
<div id="canvas_color"></div>
</div>
</div>
</div>
<label data-title="Change canvas color" class="draginput">
<span>Color</span>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
<div id="canvas_bg"></div>
<div id="canvas_color"></div>
</div>
</div>
</div>
</label>
<label class="draginput">
<span>Sizes</span>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Custom</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
<div class="caret"></div>
<label id="resolution_label">Custom</label>
</label>
</div>
<div id="rect_panel" class="context_panel">
<h4>Rectangle</h4>
<div class="toolset">
<label id="rect_width_tool" title="Change rectangle width">
<span class="icon_label">Width</span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="number"/>
</label>
<label id="rect_height_tool" title="Change rectangle height">
<span class="icon_label">Height</span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="number" />
</label>
</div>
<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius">
<h4 class="clearfix">Rectangle</h4>
<label>
<span>X</span>
<input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label>
<span>Y</span>
<input id="rect_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
<label id="rect_width_tool attr_changer" data-title="Change rectangle width">
<span class="icon_label">Width</span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="text" pattern="[0-9]*" />
</label>
<label id="rect_height_tool" data-title="Change rectangle height">
<span class="icon_label">Height</span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="text" pattern="[0-9]*" />
</label>
<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
<span class="icon_label">Roundness</span>
<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" min="0" max="60" type="number" />
<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
</label>
</div>
<div id="path_panel" class="context_panel">
<h4>Path</h4>
<div id="path_panel" class="context_panel clearfix">
<h4 class="clearfix">Path</h4>
<label><span>X</span>
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label><span>Y</span>
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
</div>
<div id="image_panel" class="context_panel">
<div id="image_panel" class="context_panel clearfix">
<h4>Image</h4>
<div class="toolset">
<label>
<span>X</span>
<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*"/>
</label>
<label>
<span>Y</span>
<input id="image_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*"/>
</label>
<label><span class="icon_label">Width</span>
<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width" type="number" />
<input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
</label>
<label><span class="icon_label">Height</span>
<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height" type="number" />
<label>
<span class="icon_label">Height</span>
<input id="image_height" class="attr_changer" data-title="Change image height" size="3" data-attr="height" pattern="[0-9]*" />
</label>
</div>
<div class="toolset">
<label id="tool_image_url"><span class="icon_label tuco">URL</span>
<input id="image_url" class="tuco" type="text" title="Change URL" size="35"/>
</label>
<label id="tool_change_image">
<button id="change_image_url" style="display:none;">Change Image</button>
<span id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
</label>
</div>
</div>
<div id="circle_panel" class="context_panel">
<div class="toolset">
<label id="tool_circle_cx"><span class="icon_label">cx:</span>
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx" type="number"/>
</label>
<label id="tool_circle_cy">cy:
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy" type="number" />
</label>
</div>
<div class="toolset">
<label id="tool_circle_r">r:
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r" type="number" />
</label>
</div>
</div>
<div id="ellipse_panel" class="context_panel">
<div id="ellipse_panel" class="context_panel clearfix">
<h4>Ellipse</h4>
<div class="toolset">
<label id="tool_ellipse_cx"><span>X</span>
<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx" type="number" />
</label>
<label id="tool_ellipse_cy"><span>Y</span>
<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy" type="number" />
</label>
</div>
<div class="toolset">
<label id="tool_ellipse_rx"><span>Radius X</span>
<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx" type="number" />
</label>
<label id="tool_ellipse_ry"><span>Radius Y</span>
<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry" type="number" />
</label>
</div>
<label id="tool_ellipse_cx"><span>X</span>
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx" pattern="[0-9]*" />
</label>
<label id="tool_ellipse_cy"><span>Y</span>
<input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="cy" pattern="[0-9]*" />
</label>
<label id="tool_ellipse_rx"><span>Radius X</span>
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx" pattern="[0-9]*" />
</label>
<label id="tool_ellipse_ry"><span>Radius Y</span>
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry" pattern="[0-9]*" />
</label>
</div>
<div id="line_panel" class="context_panel">
<div id="line_panel" class="context_panel clearfix">
<h4>Line</h4>
<div class="toolset">
<label id="tool_line_x1"><span>Start X</span>
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1" type="number" />
</label>
<label id="tool_line_y1"><span>Start Y</span>
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1" type="number" />
</label>
</div>
<div class="toolset">
<label id="tool_line_x2"><span>End X</span>
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2" type="number" />
</label>
<label id="tool_line_y2"><span>End Y</span>
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2" type="number"/>
</label>
</div>
<label id="tool_line_x1"><span>Start X</span>
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3" data-attr="x1" pattern="[0-9]*" />
</label>
<label id="tool_line_y1"><span>Start Y</span>
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3" data-attr="y1" pattern="[0-9]*" />
</label>
<label id="tool_line_x2"><span>End X</span>
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2" pattern="[0-9]*" />
</label>
<label id="tool_line_y2"><span>End Y</span>
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2" pattern="[0-9]*" />
</label>
</div>
<div id="text_panel" class="context_panel">
<div id="text_panel" class="context_panel clearfix">
<h4>Text</h4>
<label><span>X</span>
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label><span>Y</span>
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
<div class="toolset" id="tool_font_family">
<!-- Font family -->
<input id="font_family" class="wide" type="text" title="Change Font Family" size="12"/>
<input id="font_family" class="wide" type="text" data-title="Change Font Family" size="12"/>
<div id="font_family_dropdown" class="dropdown">
<button></button>
<ul>
@ -379,13 +321,13 @@ $(function(){
</div>
<div class="toolset clearfix">
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<div class="tool_button" id="tool_bold" data-title="Bold Text [B]"><span></span>B</div>
<div class="tool_button" id="tool_italic" data-title="Italic Text [I]"><span></span>i</div>
</div>
<label id="tool_font_size" title="Change Font Size">
<label id="tool_font_size" data-title="Change Font Size">
<span id="font_sizeLabel" class="icon_label">Font Size</span>
<input id="font_size" size="3" value="0" type="number"/>
<input id="font_size" size="3" value="0" />
</label>
<!-- Not visible, but still used -->
@ -393,107 +335,95 @@ $(function(){
</div>
<!-- formerly gsvg_panel -->
<div id="container_panel" class="context_panel">
<div id="container_panel" class="context_panel clearfix">
<!-- Add viewBox field here? -->
<label id="group_title" title="Group identification label">
<label id="group_title" data-title="Group identification label">
<h4>Group</h4>
<span>label:</span>
<input id="g_title" data-attr="title" size="10" type="text"/>
</label>
</div>
<div id="use_panel" class="context_panel">
<div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
<div id="use_panel" class="context_panel clearfix">
<div class="push_button" id="tool_unlink_use" data-title="Break link to reference element (make unique)"></div>
</div>
<div id="g_panel" class="context_panel">
<div id="g_panel" class="context_panel clearfix">
<h4>Group</h4>
<label><span>X</span>
<input id="group_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
</label>
<label><span>Y</span>
<input id="group_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
</label>
</div>
<!-- For anchor elements -->
<div id="a_panel" class="context_panel">
<label id="tool_link_url" title="Set link URL (leave empty to remove)">
<div id="a_panel" class="context_panel clearfix">
<label id="tool_link_url" data-title="Set link URL (leave empty to remove)">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35"/>
</label>
</div>
<div id="path_node_panel" class="context_panel">
<div id="path_node_panel" class="context_panel clearfix">
<h4>Edit Path</h4>
<div class="tool_sep"></div>
<div class="tool_button push_button_pressed" id="tool_node_link" title="Link Control Points"><input type="checkbox" checked> Linked Control Points</div>
<div class="tool_button push_button_pressed" id="tool_node_link" data-title="Link Control Points"><input type="checkbox" checked> Linked Control Points</div>
<label id="tool_node_x"><span>X</span>
<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x" type="number" />
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
</label>
<label id="tool_node_y"><span>Y</span>
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y" type="number" />
<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" size="3" data-attr="y" />
</label>
<label id="segment_type">Segment Type</label>
<select id="seg_type" title="Change Segment type">
<label id="segment_type" class="draginput label">
<span>Segment Type</span>
<select id="seg_type" data-title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<div class="tool_button" id="tool_node_clone" title="Clone Node">Add Node</div>
</label>
<div class="clearfix"></div>
<div class="tool_button" id="tool_node_clone" title="Adds a node">Add Node</div>
<div class="tool_button" id="tool_node_delete" title="Delete Node">Delete Node</div>
<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path">Open Path</div>
<!--<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>-->
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel" class="context_panel">
<div id="selected_panel" class="context_panel clearfix">
<label id="tool_angle" title="Change rotation angle" class="toolset">
<label id="tool_angle" data-title="Change rotation angle" class="draginput">
<span class="icon_label">Rotation</span>
<input id="angle" class="attr_changer" size="2" value="0" type="number"/>
<input id="angle" class="attr_changer" size="2" value="0" data-min="-180" data-max="180" type="text"/>
<div id="tool_angle_indicator">
<div id="tool_angle_indicator_cursor"></div>
</div>
</label>
<label class="toolset dropdown_set" id="tool_opacity" title="Change selected item opacity">
<label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
<span id="group_opacityLabel" class="icon_label">Opacity</span>
<input id="group_opacity" size="3" value="100" type="number" step="5" min="0" max="100" />
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="opac_slider"></div></li>
</ul>
</div>
<input id="group_opacity" size="3" value="100" step="5" min="0" max="100" />
</label>
<div class="toolset dropdown_set" id="tool_blur" title="Change gaussian blur value">
<div class="toolset" id="tool_blur" data-title="Change gaussian blur value">
<label>
<span class="icon_label">Blur</span>
<input id="blur" size="2" value="0" type="number" class="attr_changer" step=".5" min="0" max="10" />
<div id="blur_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="blur_slider"></div></li>
</ul>
</div>
<input id="blur" size="2" value="0" class="attr_changer" step=".5" min="0" max="10" />
</label>
</div>
<!--
<label>
<input id="stroke_width" size="2" value="5" type="number" data-attr="stroke-width" min="0" max="99" step="1" />
</label>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
</div>
-->
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" title="Change stroke">
<div class="toolset" data-title="Change stroke">
<label>
<span class="icon_label">Stroke Width</span>
<input id="stroke_width" size="2" value="5" type="number" data-attr="stroke-width" min="0" max="99" step="1" />
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
</label>
</div>
<label class="stroke_tool">
<span class="icon_label">Stroke Dash</span>
<select id="stroke_style" title="Change stroke dash style">
<label class="stroke_tool draginput">
<span>Stroke Dash</span>
<select id="stroke_style" data-title="Change stroke dash style">
<option selected="selected" value="none">&mdash;</option>
<option value="2,2">...</option>
<option value="5,5">- -</option>
@ -504,22 +434,10 @@ $(function(){
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
<div class="stroke_tool dropdown" id="stroke_linejoin">
<div>
<div id="cur_linejoin" title="Linejoin: Miter"></div>
<button></button>
</div>
</div>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
<div class="stroke_tool dropdown" id="stroke_linecap">
<div>
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
</div>
</label>
<h4>Align</h4>
@ -535,19 +453,10 @@ $(function(){
</div>
</label>
</div>
<div id="xy_panel" class="toolset" class="context_panel">
<h4>Position</h4>
<label>
<span>X:</span> <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x" type="number"/>
</label>
<label>
<span>Y:</span> <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y" type="number"/>
</label>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel" class="context_panel">
<div id="multiselected_panel" class="context_panel clearfix">
<h4>Multiple Elements</h4>
<!--<div class="tool_sep"></div> -->
<!--<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div> -->
@ -586,18 +495,17 @@ $(function(){
<div id="tools_left" class="tools_panel">
<div class="tool_button" id="tool_select" title="Select Tool"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool"></div>
<div class="tool_button" id="tool_line" title="Line Tool"></div>
<div class="tool_button" id="tool_rect" title="Square/Rect Tool"></div>
<div class="tool_button" id="tool_ellipse" title="Ellipse/Circle Tool"></div>
<div class="tool_button" id="tool_path" title="Path Tool"></div>
<div class="tool_button" id="tool_text" title="Text Tool"></div>
<div class="tool_button" id="tool_image" title="Image Tool"></div>
<div class="tool_button" id="tool_select" title="Select Tool [V]"></div>
<div class="tool_button" id="tool_fhpath" title="Pencil Tool [P]"></div>
<div class="tool_button" id="tool_line" title="Line Tool [L]"></div>
<div class="tool_button" id="tool_rect" title="Square/Rect Tool [R]"></div>
<div class="tool_button" id="tool_ellipse" title="Ellipse/Circle Tool [C]"></div>
<div class="tool_button" id="tool_path" title="Path Tool [P]"></div>
<div class="tool_button" id="tool_text" title="Text Tool [T]"></div>
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
<div id="color_tools">
<div id="tool_switch" title="Switch stroke and fill colors"></div>
<div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
<div class="color_tool active" id="tool_fill">
<label class="icon_label" title="Change fill color"></label>
<div class="color_block">
@ -613,15 +521,6 @@ $(function(){
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
</div>
</div>
<div style="display: none">
<div id="tool_rect" title="Rectangle"></div>
<div id="tool_square" title="Square"></div>
<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
<div id="tool_ellipse" title="Ellipse"></div>
<div id="tool_circle" title="Circle"></div>
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
</div>
</div>
</div> <!-- tools_left -->
@ -632,53 +531,14 @@ $(function(){
<label>
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<input id="zoom" size="3" value="100" type="text" />
<div id="zoom_dropdown" class="dropdown">
<button></button>
<ul>
<li>1000%</li>
<li>400%</li>
<li>200%</li>
<li>100%</li>
<li>50%</li>
<li>25%</li>
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
<li id="fit_to_all" data-val="content">Fit to all content</li>
<li>100%</li>
</ul>
</div>
</label>
</div>
<div id="tools_bottom_2">
<!--
-->
</div>
<div id="tools_bottom_3">
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div>
</div>
<div id="option_lists" class="dropdown">
<ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
</ul>
<ul id="linecap_opts">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
</ul>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
@ -701,105 +561,6 @@ $(function(){
</div>
</div>
<div id="svg_docprops">
<div id="svg_docprops_overlay"></div>
<div id="svg_docprops_container">
<input id="canvas_title" type="hidden" />
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" class="canvas_width" size="6"/></label>
<label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" class="canvas_height" size="6"/></label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<div>
<button id="tool_docprops_cancel" class="cancel">Cancel</button>
<button id="tool_docprops_save">Change Canvas Size</button>
</div>
</div>
</div>
<div id="svg_prefs">
<div id="svg_prefs_overlay"></div>
<div id="svg_prefs_container">
<fieldset>
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
<select id="lang_select" style="display: none">
<option id="lang_ar" value="ar">العربية</option>
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fa" value="fa">فارسی</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_fy" value="fy">Frysk</option>
<option id="lang_hi" value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;, &#2361;&#2367;&#2306;&#2342;&#2368;</option>
<option id="lang_it" value="it">Italiano</option>
<option id="lang_ja" value="ja">日本語</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
<option id="lang_ro" value="ro">Româneşte</option>
<option id="lang_ru" value="ru">Русский</option>
<option id="lang_sk" value="sk">Slovenčina</option>
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
</select>
<select id="iconsize" style="display: none">
<option id="icon_small" value="s">Small</option>
<option id="icon_medium" value="m" selected="selected">Medium</option>
<option id="icon_large" value="l">Large</option>
<option id="icon_xlarge" value="xl">Extra Large</option>
</select>
<label>
<span>Editor Background</span>
<div id="bg_blocks"></div>
</label>
<label>
<span id="svginfo_bg_url">URL:</span>
<input type="text" id="canvas_bg_url"/>
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
</label>
<label>
<div class="subtitle"><strong>Grid</strong></div>
<span id="svginfo_snap_onoff"><input type="checkbox" value="snapping_on" id="grid_snapping_on"> Snapping on/off</span>
<span id="svginfo_snap_step">Snapping Step-Size:</span><br><input type="text" id="grid_snapping_step" size="3" value="10"/>
</label>
<label>
<div class="subtitle"><strong>Units &amp; Rulers</strong></div>
<span id="svginfo_rulers_onoff"><input type="checkbox" value="show_rulers" id="show_rulers" checked> Show rulers</span>
</label>
</fieldset>
<div>
<button id="tool_prefs_cancel" class="cancel">Cancel</button>
<button id="tool_prefs_save">Save</button>
</div>
</div>
</div>
<div id="base_unit_container">
<select id="base_unit">
<option value="px">Pixels</option>
@ -822,25 +583,16 @@ $(function(){
</div>
<ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li>
<li><a href="#copy">Copy</a></li>
<li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+&uarr;</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+&uarr;</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+&darr;</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+&darr;</span></a></li>
</ul>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li>
<li><a href="#delete">Delete Layer</a></li>
<li><a href="#merge_down">Merge Down</a></li>
<li><a href="#merge_all">Merge All</a></li>
<li><a href="#cut">Cut <span class="shortcut">⌘X;</span></a></li>
<li><a href="#copy">Copy<span class="shortcut">⌘C</span></a></li>
<li><a href="#paste">Paste<span class="shortcut">⌘V</span></a></li>
<li class="separator"><a href="#delete">Delete<span class="shortcut">⌫</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">⌘G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">⌘⇧G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">⌘⇧&uarr;</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">⌘&uarr;</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">⌘&darr;</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">⌘⇧&darr;</span></a></li>
</ul>
</body>

1354
method-draw/svg-editor.js
View File

File diff suppressed because it is too large Load Diff

236
method-draw/svgcanvas.js
View File

@ -658,6 +658,7 @@ var getIntersectionList = this.getIntersectionList = function(rect) {
getStrokedBBox = this.getStrokedBBox = function(elems) {
if(!elems) elems = getVisibleElements();
if(!elems.length) return false;
// Make sure the expected BBox is returned if the element is a group
var getCheckedBBox = function(elem) {
@ -809,7 +810,7 @@ getStrokedBBox = this.getStrokedBBox = function(elems) {
// An array with all "visible" elements.
var getVisibleElements = this.getVisibleElements = function(parent) {
if(!parent) parent = $(svgcontent).children(); // Prevent layers from being included
if (parent.find("#canvas_background").length) parent.splice(0, 1) // Prevent background from being included
var contentElems = [];
$(parent).children().each(function(i, elem) {
try {
@ -2373,16 +2374,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// but the action is not recorded until mousing up
// - when we are in select mode, select the element, remember the position
// and do nothing else
var mouseDown = mosueOver = function(evt)
var mouseDown = mouseOver = function(evt)
{
if(canvas.spaceKey || evt.button === 1) return;
var right_click = evt.button === 2;
if(evt.altKey) { // duplicate when dragging
svgCanvas.cloneSelectedElements(0,0);
}
root_sctm = svgcontent.getScreenCTM().inverse();
var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ),
@ -2396,11 +2393,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
lastClickPoint = pt;
}
// This would seem to be unnecessary...
// if(['select', 'resize'].indexOf(current_mode) == -1) {
// setGradient();
// }
var x = mouse_x / current_zoom,
y = mouse_y / current_zoom,
mouse_target = getMouseTarget(evt);
@ -2779,7 +2771,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
}
if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
//duplicate only once
if (dx != 0 || dy != 0) {
var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
@ -2806,6 +2798,21 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
tlist.appendItem(xform);
}
// alt drag = create a clone and save the reference
if(evt.altKey) {
//clone doesn't exist yet
if (!canvas.addClone) {
canvas.addClone = canvas.cloneSelectedElements(0,0, true);
canvas.removeClone = function(){
parent = canvas.addClone.parentNode
if (parent) {
parent.removeChild(canvas.addClone)
canvas.addClone = false;
}
}
window.addEventListener("keyup", canvas.removeClone)
}
}
// update our internal bbox that we're tracking while dragging
selectorManager.requestSelector(selected).resize();
}
@ -3181,6 +3188,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// this is done in when we recalculate the selected dimensions()
var mouseUp = function(evt)
{
canvas.addClone = false;
window.removeEventListener("keyup", canvas.removeClone)
if(evt.button === 2) return;
var tempJustSelected = justSelected;
justSelected = null;
@ -6731,7 +6741,7 @@ this.setResolution = function(x, y) {
}
call("changed", [svgcontent]);
}
return true;
return [x,y];
};
// Function: getOffset
@ -7834,116 +7844,83 @@ this.convertToPath = function(elem, getBBox) {
// attr - String with the attribute name
// newValue - String or number with the new attribute value
// elems - The DOM elements to apply the change to
var changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
var handle = svgroot.suspendRedraw(1000);
if(current_mode == 'pathedit') {
// Editing node
pathActions.moveNode(attr, newValue);
}
var elems = elems || selectedElements;
var i = elems.length;
var no_xy_elems = ['g', 'polyline', 'path'];
var good_g_attrs = ['transform', 'opacity', 'filter'];
while (i--) {
var elem = elems[i];
if (elem == null) continue;
// Go into "select" mode for text changes
if(current_mode === "textedit" && attr !== "#text" && elem.textContent.length) {
textActions.toSelectMode(elem);
}
// Set x,y vals on elements that don't have them
if((attr === 'x' || attr === 'y') && no_xy_elems.indexOf(elem.tagName) >= 0) {
var bbox = getStrokedBBox([elem]);
var diff_x = attr === 'x' ? newValue - bbox.x : 0;
var diff_y = attr === 'y' ? newValue - bbox.y : 0;
canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true);
continue;
}
// only allow the transform/opacity/filter attribute to change on <g> elements, slightly hacky
// if (elem.tagName === "g" && good_g_attrs.indexOf(attr) >= 0);
var oldval = attr === "#text" ? elem.textContent : elem.getAttribute(attr);
if (oldval == null) oldval = "";
if (oldval !== String(newValue)) {
if (attr == "#text") {
var old_w = svgedit.utilities.getBBox(elem).width;
elem.textContent = newValue;
// FF bug occurs on on rotated elements
if(/rotate/.test(elem.getAttribute('transform'))) {
elem = ffClone(elem);
}
// Hoped to solve the issue of moving text with text-anchor="start",
// but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd
// var box=getBBox(elem), left=box.x, top=box.y, width=box.width,
// height=box.height, dx = width - old_w, dy=0;
// var angle = getRotationAngle(elem, true);
// if (angle) {
// var r = Math.sqrt( dx*dx + dy*dy );
// var theta = Math.atan2(dy,dx) - angle;
// dx = r * Math.cos(theta);
// dy = r * Math.sin(theta);
//
// elem.setAttribute('x', elem.getAttribute('x')-dx);
// elem.setAttribute('y', elem.getAttribute('y')-dy);
// }
} else if (attr == "#href") {
setHref(elem, newValue);
}
else elem.setAttribute(attr, newValue);
// if (i==0)
// selectedBBoxes[0] = svgedit.utilities.getBBox(elem);
// Use the Firefox ffClone hack for text elements with gradients or
// where other text attributes are changed.
if(svgedit.browser.isGecko() && elem.nodeName === 'text' && /rotate/.test(elem.getAttribute('transform'))) {
if((newValue+'').indexOf('url') === 0 || ['font-size','font-family','x','y'].indexOf(attr) >= 0 && elem.textContent) {
elem = ffClone(elem);
}
}
// Timeout needed for Opera & Firefox
// codedread: it is now possible for this function to be called with elements
// that are not in the selectedElements array, we need to only request a
// selector if the element is in that array
if (selectedElements.indexOf(elem) >= 0) {
setTimeout(function() {
// Due to element replacement, this element may no longer
// be part of the DOM
if(!elem.parentNode) return;
selectorManager.requestSelector(elem).resize();
},0);
}
// if this element was rotated, and we changed the position of this element
// we need to update the rotational transform attribute
var angle = getRotationAngle(elem);
if (angle != 0 && attr != "transform") {
var tlist = getTransformList(elem);
var n = tlist.numberOfItems;
while (n--) {
var xform = tlist.getItem(n);
if (xform.type == 4) {
// remove old rotate
tlist.removeItem(n);
var box = svgedit.utilities.getBBox(elem);
var center = transformPoint(box.x+box.width/2, box.y+box.height/2, transformListToTransform(tlist).matrix);
var cx = center.x,
cy = center.y;
var newrot = svgroot.createSVGTransform();
newrot.setRotate(angle, cx, cy);
tlist.insertItemBefore(newrot, n);
break;
}
}
}
} // if oldValue != newValue
} // for each elem
svgroot.unsuspendRedraw(handle);
var changeSelectedAttributeNoUndo = this.changeSelectedAttributeNoUndo = function(attr, newValue, elems) {
var handle = svgroot.suspendRedraw(1000);
if(current_mode == 'pathedit') {
// Editing node
pathActions.moveNode(attr, newValue);
}
var elems = elems || selectedElements;
var i = elems.length;
var no_xy_elems = ['g', 'polyline', 'path'];
var good_g_attrs = ['transform', 'opacity', 'filter'];
while (i--) {
var elem = elems[i];
if (elem == null) continue;
// Go into "select" mode for text changes
if(current_mode === "textedit" && attr !== "#text" && elem.textContent.length) {
textActions.toSelectMode(elem);
}
// Set x,y vals on elements that don't have them
if((attr === 'x' || attr === 'y') && no_xy_elems.indexOf(elem.tagName) >= 0) {
var bbox = getStrokedBBox([elem]);
var diff_x = attr === 'x' ? newValue - bbox.x : 0;
var diff_y = attr === 'y' ? newValue - bbox.y : 0;
canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true);
continue;
}
var oldval = attr === "#text" ? elem.textContent : elem.getAttribute(attr);
if (oldval == null) oldval = "";
if (oldval !== String(newValue)) {
if (attr == "#text") {
var old_w = svgedit.utilities.getBBox(elem).width;
elem.textContent = newValue;
} else if (attr == "#href") {
setHref(elem, newValue);
}
else elem.setAttribute(attr, newValue);
// Timeout needed for Opera & Firefox
// codedread: it is now possible for this function to be called with elements
// that are not in the selectedElements array, we need to only request a
// selector if the element is in that array
if (selectedElements.indexOf(elem) >= 0) {
setTimeout(function() {
// Due to element replacement, this element may no longer
// be part of the DOM
if(!elem.parentNode) return;
selectorManager.requestSelector(elem).resize();
},0);
}
// if this element was rotated, and we changed the position of this element
// we need to update the rotational transform attribute
var angle = getRotationAngle(elem);
if (angle != 0 && attr != "transform") {
var tlist = getTransformList(elem);
var n = tlist.numberOfItems;
while (n--) {
var xform = tlist.getItem(n);
if (xform.type == 4) {
// remove old rotate
tlist.removeItem(n);
var box = svgedit.utilities.getBBox(elem);
var center = transformPoint(box.x+box.width/2, box.y+box.height/2, transformListToTransform(tlist).matrix);
var cx = center.x,
cy = center.y;
var newrot = svgroot.createSVGTransform();
newrot.setRotate(angle, cx, cy);
tlist.insertItemBefore(newrot, n);
break;
}
}
}
} // if oldValue != newValue
} // for each elem
svgroot.unsuspendRedraw(handle);
};
// Function: changeSelectedAttribute
@ -8550,7 +8527,7 @@ this.moveSelectedElements = function(dx, dy, undoable) {
// Function: cloneSelectedElements
// Create deep DOM copies (clones) of all selected elements and move them slightly
// from their originals
this.cloneSelectedElements = function(x,y) {
this.cloneSelectedElements = function(x,y, drag) {
var batchCmd = new BatchCommand("Clone Elements");
// find all the elements selected (stop at first null)
var len = selectedElements.length;
@ -8566,9 +8543,11 @@ this.cloneSelectedElements = function(x,y) {
var i = copiedElements.length;
while (i--) {
// clone each element and replace it within copiedElements
var elem = copiedElements[i] = copyElem(copiedElements[i]);
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(elem);
batchCmd.addSubCommand(new InsertElementCommand(elem));
var elem = copiedElements[i]
var clone = copyElem(copiedElements[i]);
if (drag) clone.removeAttribute("transform");
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(clone);
batchCmd.addSubCommand(new InsertElementCommand(clone));
}
if (!batchCmd.isEmpty()) {
@ -8576,6 +8555,7 @@ this.cloneSelectedElements = function(x,y) {
this.moveSelectedElements(x,y,false);
addCommandToHistory(batchCmd);
}
return clone
};
// Function: alignSelectedElements

111
method-draw/svgedit.compiled.css
View File

@ -108,15 +108,16 @@ html,body{overflow:hidden;width:100%;height:100%}
::-webkit-scrollbar-corner{background:#444}
#browser-not-supported{font-size:.8em;font-family:Verdana,Helvetica,Arial;color:#000}
#svg_editor hr{border:0;border-bottom:1px solid #808080}
#svg_editor select{margin-top:4px}
#svg_editor #svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
#svg_editor #menu_bar{margin:0 0 0 50px}
#svg_editor #menu_bar.active .menu.open .menu_list{display:block}
#svg_editor .menu{position:relative;z-index:5;color:#333;display:inline-block}
#svg_editor .menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
.touch #svg_editor .menu_title{padding:7px 17px;height:26px;line-height:26px}
#svg_editor .menu .menu_title:hover{background:rgba(255,255,255,0.1)}
#svg_editor .menu_list .separator{margin:5px 0;border-top:solid #ddd 1px}
#svg_editor .menu_list{display:none;position:absolute;top:28px;left:0;white-space:nowrap;background:white;padding:7px 0;border-radius:0 3px 3px 3px;box-shadow:0 0 20px rgba(0,0,0,0.8)}
.touch #svg_editor .menu_list{top:38px}
#svg_editor #menu_bar.active .menu.open .menu_title{background:white;color:#333}
#svg_editor .menu_list .menu_item{position:relative;overflow:hidden;line-height:22px;padding:5px 69px 5px 25px;cursor:default;color:#333}
#svg_editor .menu_list .menu_item.tool_button{background:transparent;border:0;margin:0;padding:5px 55px 5px 25px;height:auto;width:auto}
@ -128,7 +129,7 @@ html,body{overflow:hidden;width:100%;height:100%}
#svg_editor #svgcanvas{line-height:normal;display:inline-block;background-color:#a0a0a0;text-align:center;vertical-align:middle;width:640px;height:480px;position:relative;background:#3f3f3c}
#rulers>div{position:absolute;background:#2f2f2c;z-index:1;overflow:hidden;-webkit-font-smoothing:none}
#rulers #ruler_corner{top:30px;left:50px;width:15px;height:15px;border:solid #444 1px;z-index:2}
#ruler_x{height:15px;top:30px;left:66px;right:200px;border-top:solid #444 1px;border-right:solid #444 1px}
#ruler_x{height:15px;top:30px;left:66px;right:175px;border-top:solid #444 1px;border-right:solid #444 1px}
#ruler_x_cursor{height:15px;border-right:dotted #999 1px;position:absolute;background:#2f2f2c}
#ruler_y_cursor{width:15px;border-top:dotted #999 1px;position:absolute;background:#2f2f2c}
#rulers.moved #ruler_corner,#rulers.moved #ruler_x{top:101px}
@ -139,55 +140,51 @@ html,body{overflow:hidden;width:100%;height:100%}
#ruler_y canvas{margin-top:-16px}
#ruler_x>div,#ruler_y>div{overflow:hidden}
#svg_editor div#palette_holder{display:block;overflow:hidden;height:31px;margin-top:10px;position:relative;z-index:2;float:left}
.touch #svg_editor div#palette_holder{height:40px;margin-top:0}
#svg_editor div#palette_holder #palette .palette_item:first-child{background:#fff}
#svg_editor div#palette_holder #palette .palette_item{cursor:pointer}
#tool_stroke select{margin-top:0}
#svg_editor #color_tools,#color_canvas_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
#svg_editor #color_tools #tool_fill,#tool_canvas{position:absolute;top:0;left:0;z-index:1}
#svg_editor #color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
.touch #svg_editor #color_tools{width:auto;height:auto}
#tool_fill{position:absolute;top:0;left:0;z-index:1}
.touch #tool_fill{position:static;width:36px;height:36px;margin-bottom:10px}
#tool_fill.active,#tool_stroke.active{z-index:2}
#tool_fill,#tool_stroke,#tool_canvas{box-shadow:0 0 0 1px #2f2f2c}
#tool_stroke{top:14px;left:14px}
.touch #tool_fill.active,.touch #tool_stroke.active{outline:4px solid #09f}
#tool_fill,#tool_stroke,#tool_canvas{box-shadow:0 0 0 1px #2f2f2c;position:absolute}
.touch #tool_fill,.touch #tool_stroke,.touch #tool_canvas{position:relative;top:0;left:0}
#color_canvas_tools{float:left;cursor:pointer}
#tool_fill .color_block,#tool_canvas .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
#tool_fill .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #svg_editor #tool_eyedropper{margin-top:6px}
.touch #tool_fill .color_block{width:36px;height:36px}
.touch #tool_fill .color_block svg{width:36px!important;height:36px!important}
.touch #svg_editor #tool_switch{display:none}
#svg_editor #path_node_panel .tool_button{color:#999;border:solid #3f3f3c 1px;border-radius:3px;padding:3px 10px 3px 40px;background:transparent;position:relative;margin-top:10px;width:90px;height:23px;line-height:24px}
#svg_editor #path_node_panel .tool_button img{position:absolute;left:5px;top:3px}
#svg_editor #path_node_panel #tool_node_link{border:0;padding:3px 0;width:auto;margin:0 0 10px 0;background:transparent;color:#ccc;height:auto;line-height:130%}
#svg_editor #path_node_panel #segment_type{margin-top:10px}
#svg_editor #color_tools #tool_fill .color_block:hover,#svg_editor #color_tools #tool_stroke .color_block:hover{border-color:#fff}
#svg_editor #color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
.touch #svg_editor #color_tools #tool_fill .color_block>div{position:relative}
#svg_editor #color_tools #tool_fill .color_block #fill_bg,#svg_editor #color_tools #tool_stroke .color_block #stroke_bg{position:absolute;top:1px;left:1px;bottom:1px;right:1px;background:#fff}
#tool_stroke{position:absolute;top:12px;left:12px;z-index:0}
.touch #svg_editor #color_tools #tool_fill .color_block #fill_bg,.touch #svg_editor #color_tools #tool_stroke .color_block #stroke_bg{width:36px;height:36px;right:auto;bottom:auto}
.touch #tool_stroke{position:relative;top:0;left:0;z-index:0}
#stroke_color:after{content:'';position:absolute;display:block;width:8px;height:8px;left:8px;top:8px;background:#ccc;box-shadow:0 0 0 1px #000}
.touch #stroke_color:after{height:14px;left:10px;position:absolute;top:10px;width:14px}
#svg_editor #color_tools #tool_switch{cursor:pointer;opacity:.7;width:11px;height:11px;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII=) top left no-repeat;position:absolute;top:-2px;left:28px}
#svg_editor #color_tools #cross:hover{opacity:1}
#svg_editor #color_tools #tool_stroke:hover #stroke_color:after{background:#fff}
#svg_editor #color_tools #tool_stroke .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #svg_editor #color_tools #tool_stroke .color_block{width:36px;height:36px}
#svg_editor #color_tools #tool_stroke .color_block>div{position:absolute;bottom:0;right:0}
#svg_editor #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer}
.touch #svg_editor #color_tools #tool_stroke .color_block>div{position:relative}
#svg_editor #color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
#svg_editor #zoomLabel{cursor:pointer;margin-right:5px}
#svg_editor #linkLabel>svg{height:20px;padding-top:4px}
#svg_editor div#palette{float:left;width:672px;height:16px}
#svg_editor div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:200px;background-color:#444;overflow:auto;text-align:center}
#svg_editor #sidepanels{display:none;position:absolute;top:75px;bottom:60px;right:0;width:2px;padding:10px;border-left:none;z-index:10}
#svg_editor #layerpanel{display:inline-block;position:absolute;top:1px;bottom:0;right:0;width:0;overflow:auto;margin:0;-moz-user-select:none;-webkit-user-select:none}
#svg_editor #sidepanel_handle{display:inline-block;position:absolute;background-color:#d0d0d0;font-weight:bold;left:0;top:40%;width:1em;padding:5px 1px 5px 5px;margin-left:3px;cursor:pointer;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-user-select:none;-webkit-user-select:none}
#svg_editor #sidepanel_handle:hover{font-weight:bold}
#svg_editor #sidepanel_handle *{cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
#svg_editor #layerbuttons{margin:0;padding:0;padding-left:2px;padding-right:2px;width:125px;height:20px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #808080;border-top:1px solid #808080;overflow:hidden}
#svg_editor .layer_button{width:14px;height:14px;padding:1px;border-left:1px solid #fff;border-top:1px solid #fff;border-right:1px solid #808080;border-bottom:1px solid #808080;cursor:pointer;float:left;margin-right:3px}
#svg_editor .layer_button:last-child{margin-right:0}
#svg_editor .layer_buttonpressed{width:14px;height:14px;padding:1px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #808080;border-top:1px solid #808080;cursor:pointer}
#svg_editor #layerlist{margin:1px;padding:0;width:127px;border-collapse:collapse;border:1px solid #808080;background-color:#fff}
#svg_editor #layerlist tr.layer{background-color:#fff;margin:0;padding:0}
#svg_editor #layerlist tr.layersel{border:1px solid #808080;background-color:#ccc}
#svg_editor #layerlist td.layervis{width:22px;cursor:pointer}
#svg_editor #layerlist td.layerinvis{background-image:none;cursor:pointer}
#svg_editor #layerlist td.layervis *{display:block}
#svg_editor #layerlist td.layerinvis *{display:none}
#svg_editor #layerlist td.layername{cursor:pointer}
#svg_editor #layerlist tr.layersel td.layername{font-weight:bold}
#svg_editor #selLayerLabel{white-space:nowrap}
#svg_editor #selLayerNames{display:block}
#svg_editor div#palette{float:left;width:810px;height:16px}
#svg_editor div#workarea{display:inline-table-cell;position:absolute;top:30px;left:50px;bottom:40px;right:175px;background-color:#444;overflow:auto;text-align:center}
.touch #svg_editor div#workarea{top:40px}
#svg_editor div.palette_item{height:16px;width:16px;float:left}
.touch #svg_editor div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:30px;float:left}
#svg_editor .menu .menu_list{display:none;position:absolute}
#svg_editor .tool_button:hover,#svg_editor .push_button:hover,#svg_editor .buttonup:hover,#svg_editor .buttondown,#svg_editor .tool_button_current,#svg_editor .push_button_pressed{background-color:#fff}
#svg_editor .tool_button.disabled,#svg_editor .tool_button.disabled:hover{opacity:.3;background-color:#aaa}
@ -197,16 +194,13 @@ html,body{overflow:hidden;width:100%;height:100%}
#tools_top .padded{padding:10px 0}
#svg_editor #tools_left .tool_button_current{background-color:#0cf}
#svg_editor #main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
#svg_editor #tools_top{position:absolute;width:170px;right:2px;top:10px;border-bottom:0;overflow:visible;padding:0 10px}
#svg_editor #tools_top{position:absolute;width:160px;right:0;top:30px;border-bottom:0;overflow:visible;padding:0 0 0 10px}
.touch #svg_editor #tools_top{top:40px}
#svg_editor label{display:block;color:#999}
div#font-selector{width:140px;height:300px;overflow:auto;margin:0 auto;position:absolute;top:27px;right:0;border:1px solid black;padding:10px;display:none;background-color:white;z-index:10;border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,0.7)}
div#font-selector img{width:100%}
div#font-selector .font-item{border-bottom:solid #ddd 1px;padding:5px 10px;margin:0 -10px}
div#font-selector .font-item:hover{background-color:#eee}
#svg_editor #tools_top label:before,#svg_editor #tools_top label:after{content:"";display:table}
#svg_editor #tools_top label:after{clear:both}
#svg_editor #tools_top label span,#svg_editor #tools_top label select{display:block;width:80px;float:left;line-height:185%}
#svg_editor #tools_top label span.tuco{width:100%;float:none}
#svg_editor #tools_top #marker_panel *{float:left}
#svg_editor #tools_top #marker_panel h4{float:none}
#svg_editor #tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
@ -215,9 +209,7 @@ div#font-selector .font-item:hover{background-color:#eee}
#svg_editor #tools_top #marker_panel .dropdown button{margin-top:2px}
#svg_editor #tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
#svg_editor #tools_top #marker_panel .dropdown .icon_label img{float:none}
#svg_editor input[type=text],#svg_editor input[type=number]{border:solid #3f3f3c 1px;background-color:transparent;color:#09f;display:block;float:left;font-size:13px;padding:2px 5px;width:70px;-webkit-appearance:none;border-radius:2px;margin:0;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
#svg_editor #color_picker input[type=text],#color_picker #svg_editor input[type=number]{width:30px;background:#fff}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#svg_editor .dropdown_set input[type=text],#svg_editor .dropdown_set input[type=number]{width:50px}
#svg_editor input[type=text].wide,#svg_editor input[type=number].wide{width:110px}
#svg_editor input[type=text].tuco,#svg_editor input[type=number].tuco{width:150px}
@ -225,8 +217,6 @@ input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-
#svg_editor input[type=submit]:hover,#svg_editor button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
#svg_editor input[type=submit]:hover,#svg_editor button:hover{background:#2f84c1}
#svg_editor input[type=submit]:active,#svg_editor button:active{padding:6px 10px 4px 10px;box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);border-bottom:solid rgba(255,255,255,0.1) 1px}
#svg_editor input[type=text]:focus,#svg_editor input[type=number]:focus{border:solid rgba(0,120,255,0.3) 1px;outline:0}
#svg_editor input[readonly=readonly],#svg_editor input[readonly=readonly]:focus{background:transparent;color:#fff;border:0;outline:0}
#svg_editor #tools_left{position:absolute;border-right:0;width:50px;top:30px;left:0;background:#2f2f2c;z-index:4}
#workarea.wireframe #svgcontent *{fill:none;stroke:#000;stroke-width:1px;stroke-opacity:1.0;stroke-dasharray:0;opacity:1;pointer-events:stroke;vector-effect:non-scaling-stroke;filter:none}
#workarea.wireframe #svgcontent text{fill:#000;stroke:none}
@ -268,7 +258,6 @@ span.zoom_tool img{vertical-align:top}
#svg_editor .width_label{padding-right:5px}
#svg_editor #tool_bold,#svg_editor #tool_italic{font:bold 2.1em/1.1em serif;text-align:center;padding:0 2px 5px 2px;position:relative;float:left;margin:5px 10px 0 0;color:#ccc;background:#2f2f2c;border:solid #3f3f3c 1px}
#svg_editor #tool_bold:hover,#svg_editor #tool_italic:hover{color:#fff}
#svg_editor #tool_font_size{clear:both;padding-top:8px}
#text{position:absolute;left:-9999px}
#svg_editor #tool_bold span,#svg_editor #tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
#svg_editor #tool_italic{font-weight:normal;font-style:italic}
@ -281,12 +270,7 @@ span.zoom_tool img{vertical-align:top}
#svg_editor #tools_bottom_1{width:115px;float:left}
#svg_editor #tools_bottom_2{position:relative;float:left;margin-top:5px}
#tools_bottom input[type=text]{width:3.2em}
#svg_editor .stroke_tool .dropdown button{margin-top:0}
#svg_editor .stroke_tool div div{-moz-user-select:none;-webkit-user-select:none;width:20px;height:20px;margin:0;padding:1px;background:rgba(255,255,255,0.3)}
#svg_editor #tools_bottom .stroke_tool .dropdown button{background-color:#555;margin-top:0}
#svg_editor #tools_top h4{color:#fff;font-weight:normal;margin:0;padding:20px 0 5px 0}
.stroke_tool>div{width:42px}
.stroke_tool>div>*{float:left}
#svg_editor #tools_top h4{color:#fff;font-weight:normal;margin:0;padding:0 0 10px 0}
#tools_top .dropdown .icon_label{border:1px solid transparent;height:auto}
.align_buttons .push_button,.align_buttons .push_button_pressed{display:block;float:left}
#option_lists ul{display:none;position:absolute;height:auto;z-index:3;margin:0;list-style:none;padding-left:0}
@ -300,7 +284,6 @@ span.zoom_tool img{vertical-align:top}
#option_lists ul[class^=optcols] li{float:left}
#svg_editor ul li.current{background-color:#f4e284}
#svg_editor #option_lists ul li{margin:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
#svg_editor #tool_stroke label input{margin-top:0}
#svg_editor #copyright{text-align:right;padding-right:.3em}
#svg_source_editor{display:none}
#svg_source_editor #svg_source_overlay{position:absolute;top:0;right:0;left:0;bottom:0;background-color:black;opacity:.6;z-index:5}
@ -396,6 +379,7 @@ span.zoom_tool img{vertical-align:top}
#workarea.eyedropper{cursor:url(images/eyedropper.png) 0 16,crosshair}
#workarea.fhpath{cursor:url(images/pencil_cursor.png) 0 20,crosshair}
#workarea.rotate *{cursor:url(images/rotate.png) 12 12,auto}
#workarea.select text,#workarea.multiselect text{cursor:default}
#workarea.n-resize *{cursor:n-resize!important}
#workarea.e-resize *{cursor:e-resize!important}
#workarea.w-resize *{cursor:w-resize!important}
@ -404,6 +388,7 @@ span.zoom_tool img{vertical-align:top}
#workarea.se-resize *{cursor:se-resize!important}
#workarea.nw-resize *{cursor:nw-resize!important}
#workarea.sw-resize *{cursor:sw-resize!important}
#workarea.copy{cursor:copy}
#workarea.zoom{cursor:crosshair;cursor:-moz-zoom-in;cursor:-webkit-zoom-in}
#workarea.zoom.out{cursor:crosshair;cursor:-moz-zoom-out;cursor:-webkit-zoom-out}
#selectorRubberBand{shape-rendering:crispEdges}
@ -412,6 +397,30 @@ span.zoom_tool img{vertical-align:top}
.clearfix{*zoom:1}
#svg_editor #group_title{display:none}
#base_unit_container{display:none;position:absolute;z-index:20}
INPUT.spin-button{padding:2px 20px 2px 2px;background-repeat:no-repeat;background-position:100% 0;background-image:url('spinbtn_updn.png');background-color:white}
INPUT.spin-button.up{cursor:pointer;background-position:100% -18px}
INPUT.spin-button.down{cursor:pointer;background-position:100% -36px}
#svg_editor .draginput{background:#3f3f3c;border-radius:3px;-webkit-font-smoothing:antialiased;width:70px;height:70px;display:block;position:relative;float:left;margin:0 5px 5px 0;overflow:hidden}
#svg_editor .draginput .caret{border:solid transparent 5px;border-top-color:#999;position:absolute;width:0;height:0;right:5px;margin-top:-2px;top:50%}
#svg_editor .draginput label{margin:28px 10px 0 5px;font-size:11px}
#svg_editor .draginput label#resolution_label{font:12px/110% sans-serif;color:white;font-weight:bold;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
#svg_editor .draginput label#resolution_label .pull{position:relative;left:-15px}
#svg_editor .draginput label#resolution_label span{right:-13px;left:auto;font-size:16px;top:2px;font-weight:bold;color:white}
.touch #svg_editor .draginput.active:after{content:attr(data-value);display:block;position:absolute;background:#3f3f3c;top:0;width:40px;left:-50px;padding:3px 5px;color:#fff}
#svg_editor .draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2;cursor:url(images/drag.png),move;cursor:-webkit-drag;cursor:-moz-drag}
#svg_editor .draginput input:active{cursor:url(images/dragging.png),move;cursor:-webkit-dragging;cursor:-moz-dragging}
#svg_editor .draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
#svg_editor .draginput.error{background:#900}
#svg_editor .draginput.error input{color:#fff}
#svg_editor .draginput.stroke_tool{text-align:center}
#svg_editor .draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1}
#svg_editor .draginput#segment_type select{font-size:11px;margin-top:40px;width:70px}
.draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0}
#svg_editor .draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body.dragging *{cursor:url(images/dragging.png),move;cursor:-webkit-drag;cursor:-moz-drag}
body.drag *{cursor:url(images/dragging.png),move;cursor:-webkit-dragging;cursor:-moz-dragging}
#svg_editor input[readonly=readonly]:focus{box-shadow:none}
#color_canvas_tools{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;width:60px;height:40px;margin:23px 5px 5px 5px;position:relative}
#color_canvas_tools svg{display:block}
#tool_angle_indicator{width:50px;height:50px;border-radius:50px;border:solid rgba(50,100,200,0.25) 3px;position:absolute;bottom:2px;left:7px}
#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #4f80ff 3px;position:absolute;margin:-3px 0 0 25px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}
INPUT.spin-button{background:transparent url('spinner.svg') right top no-repeat;background-size:17px 54px}
INPUT.spin-button.up{cursor:pointer;background-position:100% -20px}
INPUT.spin-button.down{cursor:pointer;background-position:100% -40px}

1346
method-draw/svgedit.compiled.js
View File

File diff suppressed because it is too large Load Diff

614
method-draw/temp.css
View File

@ -700,10 +700,6 @@ html, body {
border-bottom: 1px solid #808080;
}
#svg_editor select {
margin-top: 4px;
}
#svg_editor #svgroot {
-moz-user-select: none;
-webkit-user-select: none;
@ -738,6 +734,12 @@ html, body {
vertical-align: top;
}
.touch #svg_editor .menu_title {
padding: 7px 17px;
height: 26px;
line-height: 26px;
}
#svg_editor .menu .menu_title:hover {
background: rgba(255,255,255,0.1);
}
@ -759,6 +761,10 @@ html, body {
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.touch #svg_editor .menu_list {
top: 38px;
}
#svg_editor #menu_bar.active .menu.open .menu_title {
background: white;
color: #333;
@ -858,7 +864,7 @@ html, body {
height: 15px;
top: 30px;
left: 66px;
right: 200px;
right: 175px;
border-top: solid #444 1px;
border-right: solid #444 1px;
}
@ -923,6 +929,11 @@ html, body {
float: left;
}
.touch #svg_editor div#palette_holder {
height: 40px;
margin-top: 0;
}
#svg_editor div#palette_holder #palette .palette_item:first-child {
background: #fff;
}
@ -932,30 +943,55 @@ html, body {
}
#tool_stroke select {
margin-top: 0;
}
#svg_editor #color_tools, #color_canvas_tools {
#svg_editor #color_tools {
position: relative;
width: 48px;
height: 48px;
margin: 6px 6px 0 6px;
}
#svg_editor #color_tools #tool_fill, #tool_canvas {
.touch #svg_editor #color_tools {
width: auto;
height: auto;
}
#tool_fill {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.touch #tool_fill {
position: static;
width: 36px;
height: 36px;
margin-bottom: 10px;
}
#tool_fill.active, #tool_stroke.active {
z-index: 2;
}
#tool_stroke {
top: 14px;
left: 14px;
}
.touch #tool_fill.active, .touch #tool_stroke.active {
outline: 4px solid #09f;
}
#tool_fill, #tool_stroke, #tool_canvas {
box-shadow: 0 0 0 1px #2f2f2c;
position: absolute;
}
.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {
position: relative;
top: 0;
left: 0;
}
#color_canvas_tools {
@ -963,13 +999,31 @@ html, body {
cursor: pointer;
}
#tool_fill .color_block, #tool_canvas .color_block {
#tool_fill .color_block {
width: 24px;
height: 24px;
overflow: hidden;
border: solid #ccc 1px;
}
.touch #svg_editor #tool_eyedropper {
margin-top: 6px;
}
.touch #tool_fill .color_block {
width: 36px;
height: 36px;
}
.touch #tool_fill .color_block svg {
width: 36px !important;
height: 36px !important;
}
.touch #svg_editor #tool_switch {
display: none;
}
#svg_editor #path_node_panel .tool_button {
color: #999;
border: solid #3F3F3C 1px;
@ -1015,6 +1069,10 @@ html, body {
left: 0;
}
.touch #svg_editor #color_tools #tool_fill .color_block > div {
position: relative;
}
#svg_editor #color_tools #tool_fill .color_block #fill_bg, #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
position: absolute;
top: 1px;
@ -1024,10 +1082,17 @@ html, body {
background: #fff;
}
#tool_stroke {
position: absolute;
top: 12px;
left: 12px;
.touch #svg_editor #color_tools #tool_fill .color_block #fill_bg, .touch #svg_editor #color_tools #tool_stroke .color_block #stroke_bg {
width: 36px;
height: 36px;
right: auto;
bottom: auto;
}
.touch #tool_stroke {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
@ -1043,6 +1108,15 @@ html, body {
box-shadow: 0 0 0 1px #000;
}
.touch #stroke_color:after {
height: 14px;
left: 10px;
position: absolute;
top: 10px;
width: 14px;
}
#svg_editor #color_tools #tool_switch {
cursor: pointer;
opacity: 0.7;
@ -1069,19 +1143,29 @@ html, body {
border: solid #ccc 1px;
}
.touch #svg_editor #color_tools #tool_stroke .color_block {
width: 36px;
height: 36px;
}
#svg_editor #color_tools #tool_stroke .color_block > div {
position: absolute;
bottom: 0;
right: 0;
}
.touch #svg_editor #color_tools #tool_stroke .color_block > div {
position: relative;
}
#svg_editor #color_tools .icon_label {
padding: 0;
width: 24px;
height: 100%;
cursor: pointer;
position: absolute;
}
#svg_editor #zoomLabel {
@ -1096,7 +1180,7 @@ html, body {
#svg_editor div#palette {
float: left;
width: 672px;
width: 810px;
height: 16px;
}
@ -1106,157 +1190,14 @@ html, body {
top: 30px;
left: 50px;
bottom: 40px;
right: 200px;
right: 175px;
background-color: #444;
overflow: auto;
text-align: center;
}
#svg_editor #sidepanels {
display: none;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
width: 2px;
padding: 10px;
border-left: none;
z-index: 10;
}
#svg_editor #layerpanel {
display: inline-block;
position:absolute;
top: 1px;
bottom: 0px;
right: 0px;
width: 0px;
overflow: auto;
margin: 0px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #D0D0D0;
font-weight: bold;
left: 0px;
top: 40%;
width: 1em;
padding: 5px 1px 5px 5px;
margin-left: 3px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #sidepanel_handle:hover {
font-weight: bold;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
}
#svg_editor #layerbuttons {
margin: 0px;
padding: 0px;
padding-left: 2px;
padding-right: 2px;
width: 125px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: hidden;
}
#svg_editor .layer_button {
width: 14px;
height: 14px;
padding: 1px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
float: left;
margin-right: 3px;
}
#svg_editor .layer_button:last-child {
margin-right: 0;
}
#svg_editor .layer_buttonpressed {
width: 14px;
height: 14px;
padding: 1px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
cursor: pointer;
}
#svg_editor #layerlist {
margin: 1px;
padding: 0px;
width: 127px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#svg_editor #layerlist tr.layer {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#svg_editor #layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#svg_editor #layerlist td.layervis {
width: 22px;
cursor:pointer;
}
#svg_editor #layerlist td.layerinvis {
background-image: none;
cursor:pointer;
}
#svg_editor #layerlist td.layervis * {
display: block;
}
#svg_editor #layerlist td.layerinvis * {
display: none;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
#svg_editor #layerlist tr.layersel td.layername {
font-weight: bold;
}
#svg_editor #selLayerLabel {
white-space: nowrap;
}
#svg_editor #selLayerNames {
display: block;
.touch #svg_editor div#workarea {
top: 40px;
}
#svg_editor div.palette_item {
@ -1265,6 +1206,14 @@ html, body {
float: left;
}
.touch #svg_editor div.palette_item {
height: 30px;
border-top: solid #2f2f2c 5px;
border-bottom: solid #2f2f2c 5px;
width: 30px;
float: left;
}
#svg_editor .menu .menu_list {
display: none;
position: absolute;
@ -1308,12 +1257,16 @@ html, body {
#svg_editor #tools_top {
position: absolute;
width: 170px;
right: 2px;
top: 10px;
width: 160px;
right: 0;
top: 30px;
border-bottom: none;
overflow: visible;
padding: 0 10px;
padding: 0 0 0 10px;
}
.touch #svg_editor #tools_top {
top: 40px;
}
#svg_editor label {
@ -1352,29 +1305,6 @@ div#font-selector .font-item:hover {
background-color: #eee;
}
#svg_editor #tools_top label:before,
#svg_editor #tools_top label:after {
content:"";
display:table;
}
#svg_editor #tools_top label:after {
clear:both;
}
#svg_editor #tools_top label span, #svg_editor #tools_top label select {
display: block;
width: 80px;
float: left;
line-height: 185%
}
#svg_editor #tools_top label span.tuco {
width: 100%;
float: none;
}
#svg_editor #tools_top #marker_panel * {
float: left;
}
@ -1415,38 +1345,11 @@ div#font-selector .font-item:hover {
}
#svg_editor input[type=text], #svg_editor input[type=number] {
border: solid #3f3f3c 1px;
background-color: transparent;
color: #09f;
display: block;
float: left;
font-size: 13px;
padding: 2px 5px;
width: 70px;
-webkit-appearance: none;
border-radius: 2px;
margin: 0;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
#svg_editor #color_picker input[type=text], #color_picker #svg_editor input[type=number] {
width: 30px;
background: #fff;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#svg_editor .dropdown_set input[type=text], #svg_editor .dropdown_set input[type=number] {
width: 50px;
}
@ -1473,19 +1376,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
#svg_editor input[type=submit]:hover, #svg_editor button:hover {background: #2F84C1;}
#svg_editor input[type=submit]:active, #svg_editor button:active {padding: 6px 10px 4px 10px; box-shadow: inset 0 2px 2px rgba(0,0,0,0.2); border-bottom: solid rgba(255,255,255,0.1) 1px;}
#svg_editor input[type=text]:focus, #svg_editor input[type=number]:focus {
border: solid rgba(0, 120, 255, 0.3) 1px;
outline: none;
}
#svg_editor input[readonly=readonly], #svg_editor input[readonly=readonly]:focus {
background: transparent;
color: #fff;
border: none;
outline: none;
}
#svg_editor #tools_left {
position: absolute;
@ -1783,11 +1673,6 @@ span.zoom_tool img {
color: #fff;
}
#svg_editor #tool_font_size {
clear:both;
padding-top: 8px;
}
#text {
position: absolute;
left: -9999px;
@ -1874,41 +1759,13 @@ span.zoom_tool img {
width: 3.2em;
}
#svg_editor .stroke_tool .dropdown button {
margin-top: 0;
}
#svg_editor .stroke_tool div div {
-moz-user-select: none;
-webkit-user-select: none;
width: 20px;
height: 20px;
margin: 0;
padding: 1px;
background: rgba(255,255,255,0.3);
}
#svg_editor #tools_bottom .stroke_tool .dropdown button {
background-color:#555;
margin-top: 0;
}
#svg_editor #tools_top h4 {
color: #fff;
font-weight: normal;
margin: 0;
padding: 20px 0 5px 0;
padding: 0 0 10px 0;
}
.stroke_tool > div {
width: 42px;
}
.stroke_tool > div > * {
float: left;
}
#tools_top .dropdown .icon_label {
border: 1px solid transparent;
/* margin-top: 3px;*/
@ -1989,8 +1846,6 @@ span.zoom_tool img {
-webkit-border-radius: 0;
}
#svg_editor #tool_stroke label input { margin-top: 0;}
#svg_editor #copyright {
text-align: right;
padding-right: .3em;
@ -2559,6 +2414,10 @@ span.zoom_tool img {
cursor: url(images/rotate.png) 12 12, auto;
}
#workarea.select text, #workarea.multiselect text {
cursor: default;
}
#workarea.n-resize * {cursor: n-resize !important;}
#workarea.e-resize * {cursor: e-resize !important;}
#workarea.w-resize * {cursor: w-resize !important;}
@ -2569,7 +2428,9 @@ span.zoom_tool img {
#workarea.nw-resize * {cursor: nw-resize !important;}
#workarea.sw-resize * {cursor: sw-resize !important;}
#workarea.copy {
cursor: copy;
}
#workarea.zoom {
cursor: crosshair;
@ -2627,7 +2488,209 @@ span.zoom_tool img {
display: none;
position: absolute;
z-index: 20;
}/*
}
#svg_editor .draginput {
background: #3f3f3c;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
width: 70px;
height: 70px;
display: block;
position: relative;
float: left;
margin: 0 5px 5px 0;
overflow: hidden;
}
#svg_editor .draginput .caret {
border: solid transparent 5px;
border-top-color: #999;
position: absolute;
width: 0;
height: 0;
right: 5px;
margin-top: -2px;
top: 50%;
}
#svg_editor .draginput label {
margin: 28px 10px 0 5px;
font-size: 11px;
}
#svg_editor .draginput label#resolution_label {
font: 12px/110% sans-serif;
color: white;
font-weight: bold;
position: absolute;
left: auto;
right: 10px;
z-index: 0;
text-align: right;
}
#svg_editor .draginput label#resolution_label .pull {
position: relative;
left: -15px;
}
#svg_editor .draginput label#resolution_label span {
right: -13px;
left: auto;
font-size: 16px;
top: 2px;
font-weight: bold;
color: white;
}
.touch #svg_editor .draginput.active:after {
content: attr(data-value);
display: block;
position: absolute;
background: #3f3f3c;
top: 0;
width: 40px;
left: -50px;
padding: 3px 5px;
color: #fff;
}
#svg_editor .draginput input {
border: none;
background: transparent;
font: 24px/normal sans-serif;
text-align: center;
color: #4F80FF;
padding: 30px 0 16px;
width: 100%;
height: 24px;
position: relative;
z-index: 2;
cursor: url(images/drag.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
#svg_editor .draginput input:active {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor .draginput span {
font: 11px/130% sans-serif;
color: #ccc;
display: block;
position: absolute;
top: 5px;
left: 5px;
text-align: left;
}
#svg_editor .draginput.error {
background: #900;
}
#svg_editor .draginput.error input {
color: #fff;
}
#svg_editor .draginput.stroke_tool {
text-align: center;
}
#svg_editor .draginput select {
-webkit-appearance: none;
opacity: 0;
display: block;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
z-index: 1;
}
#svg_editor .draginput#segment_type select {
font-size: 11px;
margin-top: 40px;
width: 70px;
}
.draginput_cursor{
position: absolute;
top: 50%;
width: 100%;
border-top: solid rgba(50,100,200,0.25) 3px;
margin-top: -2px;
z-index: 0;
}
#svg_editor .draginput input[readonly=readonly] {
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body.dragging * {
cursor: url(images/dragging.png), move;
cursor: -webkit-drag;
cursor: -moz-drag;
}
body.drag * {
cursor: url(images/dragging.png), move;
cursor: -webkit-dragging;
cursor: -moz-dragging;
}
#svg_editor input[readonly=readonly]:focus {
box-shadow: none;
}
#color_canvas_tools {
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
width: 60px;
height: 40px;
margin: 23px 5px 5px 5px;
position: relative;
}
#color_canvas_tools svg {
display: block;
}
#tool_angle_indicator {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid rgba(50,100,200,0.25) 3px;
position: absolute;
bottom: 2px;
left: 7px;
}
#tool_angle_indicator_cursor {
width: 4px;
height: 25px;
border-top: solid #4F80FF 3px;
position: absolute;
margin: -3px 0 0 25px;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
/*
Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)
@ -2652,19 +2715,16 @@ span.zoom_tool img {
*/
INPUT.spin-button {
/* explicitly put padding for top/bottom/left in here so that Opera displays it better */
padding: 2px 20px 2px 2px;
background-repeat:no-repeat; /* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
background-position:100% 0%;
background-image:url('spinbtn_updn.png');
background-color:white; /* Needed for Opera */
background: transparent url('spinner.svg') right top no-repeat;
background-size: 17px 54px;
}
INPUT.spin-button.up { /* Change button img when mouse is over the UP-arrow */
cursor:pointer;
background-position:100% -18px; /* 18px matches height of 2 visible buttons */
background-position:100% -20px; /* 18px matches height of 2 visible buttons */
}
INPUT.spin-button.down { /* Change button img when mouse is over the DOWN-arrow */
cursor:pointer;
background-position:100% -36px; /* 36px matches height of 2x2 visible buttons */
background-position:100% -40px; /* 36px matches height of 2x2 visible buttons */
}