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

various changes

master
Mark MacKay 2012-07-25 01:32:18 -05:00
parent a5e568ea38
commit d03acb5790
38 changed files with 4000 additions and 3291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Makefile
View File

@ -8,11 +8,11 @@ YUICOMPRESSOR=build/tools/yuicompressor-2.4.7.jar
# All files that will be compiled by the Closure compiler.
JS_FILES=\
touch.js \
js-hotkeys/jquery.hotkeys.min.js \
jquerybbq/jquery.bbq.min.js \
svgicons/jquery.svgicons.js \
jgraduate/jquery.jgraduate.js \
touch.js \
contextmenu/jquery.contextmenu.js \
browser.js \
svgtransformlist.js \
@ -32,10 +32,10 @@ JS_FILES=\
jgraduate/jpicker.min.js \
mousewheel.js \
extensions/ext-eyedropper.js \
extensions/ext-markers.js \
extensions/ext-grid.js \
extensions/ext-shapes.js \
requestanimationframe.js
requestanimationframe.js \
taphold.js
CSS_FILES=\
fonts.css \

4
editor/jgraduate/css/jPicker.css
View File

@ -153,9 +153,7 @@ table#svg_editor .jPicker {
#svg_editor .jPicker .Button input {
width: 100px;
}
#svg_editor .jPicker .Button .Ok {
margin: 0 0 5px 0;
}
#svg_editor .jPicker td.Radio {
margin: 0;
padding: 0;

109
editor/jgraduate/css/jgraduate.css
View File

@ -10,38 +10,38 @@
* Licensed under the Apache License Version 2
*/
#svg_editor h2.jGraduate_Title {
h2.jGraduate_Title {
display: none;
}
#svg_editor .jGraduate_Picker {
.jGraduate_Picker {
position: absolute;
padding: 20px;
}
#svg_editor .jGraduate_tabs li {
.jGraduate_tabs li {
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
}
#svg_editor li.jGraduate_tab_current {
li.jGraduate_tab_current {
background: #fff;
border-radius: 3px 3px 0 0;
}
#svg_editor .jGraduate_colPick {
.jGraduate_colPick {
display: none;
}
#svg_editor .jGraduate_gradPick {
.jGraduate_gradPick {
display: none;
overflow: visible;
/* position: relative;*/
}
#svg_editor .jGraduate_tabs {
.jGraduate_tabs {
position: relative;
background-color: #ddd;
padding: 10px 10px 0 10px;
@ -49,11 +49,11 @@
border-radius: 3px 3px 0 0;
}
#svg_editor div.jGraduate_Swatch {
div.jGraduate_Swatch {
float: left;
margin: 0 15px 0 0;
}
#svg_editor div.jGraduate_GradContainer {
div.jGraduate_GradContainer {
border: solid #000 1px;
background-image: url(../images/map-opacity.png);
background-position: 0px 0px;
@ -62,7 +62,7 @@
position: relative;
}
#svg_editor div.jGraduate_GradContainer div.grad_coord {
div.jGraduate_GradContainer div.grad_coord {
background: rgba(0,0,0,0.8);
border: 2px solid white;
border-radius: 15px;
@ -83,13 +83,13 @@
-webkit-user-select: none;
}
#svg_editor .jGraduate_AlphaArrows {
.jGraduate_AlphaArrows {
position: absolute;
margin-top: -10px;
margin-left: 250.5px;
}
#svg_editor div.jGraduate_Opacity {
div.jGraduate_Opacity {
border: 2px inset #eee;
margin-top: 14px;
background-color: black;
@ -99,7 +99,7 @@
cursor: ew-resize;
}
#svg_editor div.jGraduate_StopSlider {
div.jGraduate_StopSlider {
margin: -10px 0 0 -10px;
width: 276px;
overflow: visible;
@ -108,24 +108,24 @@
cursor: pointer;
}
#svg_editor div.jGraduate_StopSection {
div.jGraduate_StopSection {
width: 120px;
float: left;
}
#svg_editor div.jGraduate_StopSection.jGraduate_SpreadMethod {
div.jGraduate_StopSection.jGraduate_SpreadMethod {
display: none;
}
#svg_editor input.jGraduate_Ok, input.jGraduate_Cancel {
input.jGraduate_Ok, input.jGraduate_Cancel {
display: block;
width: 100px;
}
#svg_editor input.jGraduate_Ok {
input.jGraduate_Ok {
margin: 0 0 5px 0;
}
#svg_editor .colorBox {
.colorBox {
float: left;
height: 16px;
width: 16px;
@ -134,12 +134,12 @@
margin: 4px 4px 4px 30px;
}
#svg_editor .colorBox + label {
.colorBox + label {
float: left;
margin-top: 7px;
}
#svg_editor label.jGraduate_Form_Heading {
label.jGraduate_Form_Heading {
color: #333;
padding: 2px;
@ -147,7 +147,7 @@
font-size: 13px;
}
#svg_editor div.jGraduate_Form_Section {
div.jGraduate_Form_Section {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 15px 5px 5px 5px;
@ -158,18 +158,18 @@
background: #eee;
}
#svg_editor div.jGraduate_Form label {
div.jGraduate_Form label {
padding: 0 2px;
color: #333;
}
#svg_editor div.jGraduate_StopSection input[type=text],
#svg_editor div.jGraduate_Slider input[type=text] {
div.jGraduate_StopSection input[type=text],
div.jGraduate_Slider input[type=text] {
width: 33px;
color: #333;
}
#svg_editor div.jGraduate_LightBox {
div.jGraduate_LightBox {
position: fixed;
top: 0px;
left: 0px;
@ -180,7 +180,7 @@
display: none;
}
#svg_editor div.jGraduate_stopPicker {
div.jGraduate_stopPicker {
position: absolute;
display: none;
background:
@ -194,15 +194,15 @@
}
#svg_editor .jGraduate_gradPick {
.jGraduate_gradPick {
width: 526px;
}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider {
.jGraduate_gradPick div.jGraduate_Slider {
line-height: 160%
}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child {
.jGraduate_gradPick div.jGraduate_Slider label:last-child {
position: absolute;
right: 10px;
top: 0;
@ -210,12 +210,12 @@
font-weight: bold;
}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child input {
.jGraduate_gradPick div.jGraduate_Slider label:last-child input {
margin: 0 3px 0 0;
color: #333;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form {
.jGraduate_gradPick .jGraduate_Form {
float: left;
width: 270px;
position: absolute;
@ -227,55 +227,55 @@
line-height: 200%;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form label,
#svg_editor .jGraduate_gradPick .jGraduate_Form input {
.jGraduate_gradPick .jGraduate_Form label,
.jGraduate_gradPick .jGraduate_Form input {
width: auto;
float: left;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, #svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
width: auto;
float: left;
font-size: 11px;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
float: none;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form label {
.jGraduate_gradPick .jGraduate_Form label {
clear: left;
}
#svg_editor .jGraduate_gradPick .jGraduate_Points {
.jGraduate_gradPick .jGraduate_Points {
position: static;
float: left;
margin: 0;
width: auto;
}
#svg_editor .jGraduate_Colorblocks {
.jGraduate_Colorblocks {
display: table;
border-spacing: 0 5px;
}
#svg_editor .jGraduate_colorblock {
.jGraduate_colorblock {
display: table-row;
}
#svg_editor .jGraduate_Colorblocks .jGraduate_colorblock > * {
.jGraduate_Colorblocks .jGraduate_colorblock > * {
display: table-cell;
vertical-align: middle;
margin: 0;
float: none;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form_Section {
.jGraduate_gradPick .jGraduate_Form_Section {
padding-top: 9px;
}
#svg_editor .jGraduate_Slider {
.jGraduate_Slider {
text-align: center;
float: left;
width: 100%;
@ -283,7 +283,7 @@ font-size: 11px;
margin: 5px 0;
}
#svg_editor .jGraduate_Slider .jGraduate_Form_Section {
.jGraduate_Slider .jGraduate_Form_Section {
border: none;
width: 250px;
padding: 0 2px;
@ -291,12 +291,12 @@ font-size: 11px;
}
#svg_editor .jGraduate_Slider label.prelabel {
.jGraduate_Slider label.prelabel {
width: 40px;
text-align: left;
}
#svg_editor .jGraduate_SliderBar {
.jGraduate_SliderBar {
width: 140px;
float: left;
margin: 0 5px;
@ -305,27 +305,28 @@ font-size: 11px;
position: relative;
}
#svg_editor div.jGraduate_Slider input {
div.jGraduate_Slider input {
margin-top: 5px;
}
#svg_editor div.jGraduate_Slider img {
div.jGraduate_Slider img {
top: 0;
left: 0;
position: absolute;
cursor:ew-resize;
}
#svg_editor .jPicker .Button .Ok, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok {
margin: 0;
.jPicker .Button .Ok, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok {
-webkit-appearance: none;
margin: 0;
position: absolute;
bottom: 15px;
right: 15px;
bottom: 5px;
right: 5px;
}
#svg_editor .jPicker .Button .Cancel, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
.jPicker .Button .Cancel, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
margin: 0;
position: absolute;
bottom: 15px;
left: 15px;
bottom: 5px;
left: 5px;
}

14
editor/jgraduate/jpicker.min.js vendored
View File

@ -1751,8 +1751,8 @@
activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
okButton = button.find('.Ok:first').bind('click', okClicked);
cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
okButton = button.find('.Ok:first').bind('click touchstart', okClicked);
cancelButton = button.find('.Cancel:first').bind('click touchstart', cancelClicked);
grid = button.find('.Grid:first');
setTimeout(
function()
@ -1768,7 +1768,7 @@
setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
setImg.call($this, preview.find('div:last'), images.clientPath + 'preview-opacity.png');
}, 0);
tbody.find('td.Radio input').bind('click', radioClicked);
tbody.find('td.Radio input').bind('click touchstart', radioClicked);
// initialize quick list
if (color.quickList && color.quickList.length > 0)
{
@ -1817,10 +1817,10 @@
destroy =
function()
{
container.find('td.Radio input').unbind('click', radioClicked);
currentPreview.unbind('click', currentClicked);
cancelButton.unbind('click', cancelClicked);
okButton.unbind('click', okClicked);
container.find('td.Radio input touchstart').unbind('click', radioClicked);
currentPreview.unbind('click touchstart', currentClicked);
cancelButton.unbind('click touchstart', cancelClicked);
okButton.unbind('click touchstart', okClicked);
if (settings.window.expandable)
{
iconImage.unbind('click', iconImageClicked);

64
editor/jquery-draginput.js vendored
View File

@ -44,7 +44,9 @@ $.fn.dragInput = function(cfg){
var $cursor = (area && this.dragCfg.cursor)
? $("<div class='draginput_cursor' />").appendTo($label)
: false
$input.attr("readonly", "readonly")
if ($cursor && !isNaN(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;
@ -98,7 +100,7 @@ $.fn.dragInput = function(cfg){
this.updateCursor = function(){
var value = parseFloat(this.value)
var pos = (value*-1)/scale+cursorHeight
$(this).next(".draginput_cursor").css("top", pos)
$cursor.css("top", pos)
}
this.start = function(e) {
@ -119,7 +121,10 @@ $.fn.dragInput = function(cfg){
.attr("data-domain", cursorHeight)
.attr("data-cursor", ($cursor != false))
.bind("mousedown touchstart", function(e){this.start(e);})
.bind("mousedown touchstart", function(e){
this.blur();
this.start(e);
})
.bind("dblclick taphold", function(e) {
this.removeAttribute("readonly", "readonly");
@ -127,54 +132,19 @@ $.fn.dragInput = function(cfg){
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
}
// Respond to up/down arrow keys.
switch(e.keyCode){
case 13: this.adjustValue(0); this.blur(); break; // Enter
}
})
/*
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;
}
.focus(function(e){
if (this.getAttribute("readonly") === "readonly") this.blur()
})
// 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
}
.blur(function(e){
this.setAttribute("readonly", "readonly")
})
.bind("mousewheel", function(e, delta, deltaX, deltaY){
@ -196,7 +166,7 @@ $.fn.dragInput.updateCursor = function(el){
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;
var cursor = el.parentNode.lastChild
if (cursor.className == "draginput_cursor") cursor.style.top = pos;
}

70
editor/select.js
View File

@ -63,7 +63,7 @@ svgedit.select.Selector = function(id, elem) {
);
if (svgedit.browser.isTouch()) {
this.selectorRect.setAttribute("stroke-opacity", 0);
this.selectorRect.setAttribute("stroke-opacity", 0.3);
}
// this holds a reference to the grip coordinates for this selector
@ -399,6 +399,59 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
}
});
var defs = svgFactory_.createSVGElement({
'element': 'defs',
'attr': {
'id': 'placeholder_defs'
}
})
var pattern = svgFactory_.createSVGElement({
'element': 'pattern',
'attr': {
'id': 'checkerPattern',
'patternUnits': 'userSpaceOnUse',
'x': 0,
'y': 0,
'width': 20,
'height': 20,
'viewBox': '0 0 10 10'
}
})
var pattern_bg = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 0,
'y': 0,
'width': 10,
'height': 10,
'fill': "#fff"
}
})
var pattern_square1 = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 0,
'y': 0,
'width': 5,
'height': 5,
'fill': "#eee"
}
})
var pattern_square2 = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 5,
'y': 5,
'width': 5,
'height': 5,
'fill': "#eee"
}
})
var rect = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
@ -408,7 +461,7 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
'y': 0,
'stroke-width': 1,
'stroke': '#000',
'fill': '#FFF',
'fill': 'url(#checkerPattern)',
'style': 'pointer-events:none'
}
});
@ -416,7 +469,13 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
// Both Firefox and WebKit are too slow with this filter region (especially at higher
// zoom levels) and Opera has at least one bug
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
canvasbg.appendChild(defs);
defs.appendChild(pattern);
pattern.appendChild(pattern_bg);
pattern.appendChild(pattern_square1);
pattern.appendChild(pattern_square2);
canvasbg.appendChild(rect);
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
};
@ -527,6 +586,13 @@ svgedit.select.init = function(config, svgFactory) {
config_ = config;
svgFactory_ = svgFactory;
selectorManager_ = new svgedit.select.SelectorManager();
//for hovering elements
svgFactory_.createSVGElement({
'element': 'g',
'attr': {
'id': 'hover_group'
}
})
};
/**

450
editor/svg-editor.css
View File

File diff suppressed because it is too large Load Diff

235
editor/svg-editor.html
View File

@ -24,11 +24,11 @@
<!--{if svg_edit_release}>
<script type="text/javascript" src="svgedit.compiled.js"></script>
<!{else}-->
<script type="text/javascript" src="touch.js"></script>
<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.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>
<script type="text/javascript" src="svgtransformlist.js"></script>
@ -51,6 +51,7 @@
<script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
<script type="text/javascript" src="extensions/ext-shapes.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script>
<script type="text/javascript" src="taphold.js"></script>
<!--{endif}-->
<!-- you can load extensions here -->
@ -166,12 +167,12 @@ $(function(){
<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]*" />
<span class="icon_label">Width</span>
</label>
<label data-title="Change canvas height">
<span class="icon_label">Height</span>
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
<span class="icon_label">Height</span>
</label>
@ -207,91 +208,104 @@ $(function(){
<div id="rect_panel" class="context_panel">
<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]*" />
<span>X</span>
</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]*" />
<span>Y</span>
</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]*" />
<span class="icon_label">Width</span>
</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]*" />
<span class="icon_label">Height</span>
</label>
</div>
<div id="path_panel" class="context_panel clearfix">
<h4 class="clearfix">Path</h4>
<label><span>X</span>
<label>
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
</label>
<label><span>Y</span>
<label>
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span>
</label>
</div>
<div id="image_panel" class="context_panel clearfix">
<h4>Image</h4>
<label>
<span>X</span>
<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*"/>
<span>X</span>
</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" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
<span>Y</span>
</label>
<label>
<input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
<span class="icon_label">Width</span>
</label>
<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]*" />
<span class="icon_label">Height</span>
</label>
</div>
<div id="ellipse_panel" class="context_panel clearfix">
<h4>Ellipse</h4>
<label id="tool_ellipse_cx"><span>X</span>
<label id="tool_ellipse_cx">
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx" pattern="[0-9]*" />
<span>X</span>
</label>
<label id="tool_ellipse_cy"><span>Y</span>
<label id="tool_ellipse_cy">
<input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="cy" pattern="[0-9]*" />
<span>Y</span>
</label>
<label id="tool_ellipse_rx"><span>Radius X</span>
<label id="tool_ellipse_rx">
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx" pattern="[0-9]*" />
<span>Radius X</span>
</label>
<label id="tool_ellipse_ry"><span>Radius Y</span>
<label id="tool_ellipse_ry">
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry" pattern="[0-9]*" />
<span>Radius Y</span>
</label>
</div>
<div id="line_panel" class="context_panel clearfix">
<h4>Line</h4>
<label id="tool_line_x1"><span>Start X</span>
<label id="tool_line_x1">
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3" data-attr="x1" pattern="[0-9]*" />
<span>Start X</span>
</label>
<label id="tool_line_y1"><span>Start Y</span>
<label id="tool_line_y1">
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3" data-attr="y1" pattern="[0-9]*" />
<span>Start Y</span>
</label>
<label id="tool_line_x2"><span>End X</span>
<label id="tool_line_x2">
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2" pattern="[0-9]*" />
<span>End X</span>
</label>
<label id="tool_line_y2"><span>End Y</span>
<label id="tool_line_y2">
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2" pattern="[0-9]*" />
<span>End Y</span>
</label>
</div>
<div id="text_panel" class="context_panel clearfix">
<h4>Text</h4>
<label><span>X</span>
<label>
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
</label>
<label><span>Y</span>
<label>
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span>
</label>
<div class="toolset" id="tool_font_family">
<!-- Font family -->
@ -321,8 +335,8 @@ $(function(){
</div>
<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" />
<span id="font_sizeLabel" class="icon_label">Font Size</span>
</label>
<!-- Not visible, but still used -->
@ -344,30 +358,26 @@ $(function(){
<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>
<input id="g_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
</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>
<input id="g_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span>
</label>
</div>
<!-- For anchor elements -->
<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 clearfix">
<h4>Edit Path</h4>
<label id="tool_node_x"><span>X</span>
<label id="tool_node_x">
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
<span>X</span>
</label>
<label id="tool_node_y"><span>Y</span>
<label id="tool_node_y">
<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" size="3" data-attr="y" />
<span>Y</span>
</label>
<label id="segment_type" class="draginput label">
@ -396,97 +406,64 @@ $(function(){
<div id="selected_panel" class="context_panel clearfix">
<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" data-min="-180" data-max="180" type="text"/>
<span class="icon_label">Rotation</span>
<div id="tool_angle_indicator">
<div id="tool_angle_indicator_cursor"></div>
</div>
</label>
<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" step="5" min="0" max="100" />
<span id="group_opacityLabel" class="icon_label">Opacity</span>
</label>
<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" step=".1" min="0" max="10" />
<span class="icon_label">Blur</span>
</label>
</div>
<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" type="text" pattern="[0-9]*" />
<span class="icon_label">Roundness</span>
</label>
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" data-title="Change stroke">
<label>
<span class="icon_label">Stroke Width</span>
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
</label>
</div>
<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>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">&mdash;</label>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
<div class="clearfix"></div>
<h4>Align</h4>
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
</div>
</label>
</div>
<div id="align_tools">
<h4>Align</h4>
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
</div>
</label>
</div>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
<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> -->
<!--<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div> -->
<!--<div class="tool_sep"></div> -->
<!--div class="push_button" id="tool_group" title="Group Elements [G]"></div>-->
<!--<div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div>-->
<h4 class="hidable">Multiple Elements</h4>
<div class="toolset align_buttons">
<h4>Align</h4>
<label>
<div class="col last clear">
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="push_button" id="tool_alignright" title="Align Right"></div>
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<div class="draginput_cell" id="tool_alignleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_aligncenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_alignright" title="Align Right"></div>
<div class="draginput_cell" id="tool_aligntop" title="Align Top"></div>
<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_alignbottom" title="Align Bottom"></div>
</div>
</label>
</div>
<label id="tool_align_relative">
<div class="clearfix"></div>
<label id="tool_align_relative" style="margin-top: 10px;">
<span id="relativeToLabel">Relative to:</span>
<select id="align_relative_to" title="Align relative to ...">
<option id="selected_objects" value="selected">Objects</option>
@ -496,6 +473,37 @@ $(function(){
<div class="tool_sep"></div>
</div>
<div id="stroke_panel" class="context_panel clearfix">
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" data-title="Change stroke">
<label>
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
<span class="icon_label">Stroke Width</span>
</label>
</div>
<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>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">&mdash;</label>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
</div>
</div> <!-- tools_top -->
<div id="cur_context_panel">
@ -511,7 +519,7 @@ $(function(){
<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 class="tool_button" id="tool_zoom" title="Zoom Tool [Z]"></div>
<div id="color_tools">
<div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
@ -537,9 +545,26 @@ $(function(){
<!-- Zoom buttons -->
<div id="zoom_panel" class="toolset" title="Change zoom level">
<label>
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<input id="zoom" size="3" value="100" type="text" />
<label class="draginput select" id="zoom_label">
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<select id="zoom_select">
<option>6%</option>
<option>12%</option>
<option>16%</option>
<option>25%</option>
<option>50%</option>
<option>75%</option>
<option selected>100%</option>
<option>150%</option>
<option>200%</option>
<option>300%</option>
<option>400%</option>
<option>600%</option>
<option>800%</option>
<option>1600%</option>
</select>
<div class="caret"></div>
<input id="zoom" size="3" value="100%" type="text" readonly="readonly" />
</label>
</div>

154
editor/svg-editor.js
View File

@ -22,6 +22,7 @@
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
if(!window.svgEditor) window.svgEditor = function($) {
var svgCanvas;
var Editor = {};
@ -284,13 +285,9 @@
resize: {
'#logo .svg_icon': 15,
'.flyout_arrow_horiz .svg_icon': 5,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'#main_button .dropdown .svg_icon': 9,
'#fill_bg .svg_icon, #stroke_bg .svg_icon': svgedit.browser.isTouch() ? 36 : 24,
'#fill_bg .svg_icon, #stroke_bg .svg_icon': svgedit.browser.isTouch() ? 24 : 24,
'.palette_item:first .svg_icon': svgedit.browser.isTouch() ? 30 : 16,
'.toolbar_button button .svg_icon':16,
'.stroke_tool div div .svg_icon': 20,
'#tools_bottom label .svg_icon': 18,
'#zoomLabel .svg_icon': 16,
'#zoom_dropdown .svg_icon': 7
},
callback: function(icons) {
@ -468,7 +465,6 @@
var docprops = false;
var preferences = false;
var cur_context = '';
var orig_title = $('title:first').text();
var saveHandler = function(window,svg) {
Editor.show_save_warning = false;
@ -552,7 +548,7 @@
var is_node = (mode == "pathedit");
// if elems[1] is present, then we have more than one element
selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null);
multiselected = (elems.length >= 2 && elems[1] != null);
multiselected = (elems.length >= 2 && elems[1] != null) ? elems : false;
if (selectedElement != null) {
// unless we're already in always set the mode of the editor to select because
// upon creation of a text element the editor is switched into
@ -580,7 +576,7 @@
if(!elem) return;
multiselected = (elems.length >= 2 && elems[1] != null);
multiselected = (elems.length >= 2 && elems[1] != null) ? elems : null;
// Only updating fields for single elements for now
if(!multiselected) {
switch ( mode ) {
@ -668,7 +664,6 @@
var diff = (zoomlevel) - (res.zoom)
var zoom = $('#zoom')[0]
var current_zoom = res.zoom
console.log(diff);
var animateZoom = function(timestamp) {
var progress = timestamp - start
var tick = progress / duration
@ -1387,18 +1382,34 @@
var elem = selectedElement;
// If element has just been deleted, consider it null
if(elem != null && !elem.parentNode) elem = null;
if (multiselected && multiselected[0] != null && !multiselected[0].parentNode) multiselected = false;
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
var currentMode = svgCanvas.getMode();
var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
var menu_items = $('#cmenu_canvas li');
$('#selected_panel, #multiselected_panel, #g_panel, #path_panel, #rect_panel, #canvas_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel, #use_panel, #a_panel').hide();
$('.context_panel').hide();
$('.menu_item', '#edit_menu').addClass('disabled');
$('.menu_item', '#object_menu').addClass('disabled');
if (!elem && !multiselected) $("#canvas_panel").show();
//hack to show the proper multialign box
if (multiselected) {
elem = (svgCanvas.elementsAreSame(multiselected)) ? multiselected[0] : null
if (elem) $("#tools_top").addClass("multiselected")
}
if (!elem && !multiselected) {
$("#tools_top").removeClass("multiselected")
$("#stroke_panel").hide();
$("#canvas_panel").show();
}
if (elem != null) {
$("#stroke_panel").show();
var elname = elem.nodeName;
var angle = svgCanvas.getRotationAngle(elem);
$('#angle').val(Math.round(angle));
@ -1423,7 +1434,7 @@
x = svgedit.units.convertUnit(x);
y = svgedit.units.convertUnit(y);
}
$("#" + elname +"_x").val(Math.round(x))
$("#" + elname +"_y").val(Math.round(y))
@ -1556,15 +1567,6 @@
$('#container_panel').show();
$('.action_group_selected').removeClass('disabled');
var title = svgCanvas.getTitle();
var label = $('#g_title')[0];
label.value = title;
setInputWidth(label);
var d = 'disabled';
if(el_name == 'use') {
label.setAttribute(d, d);
} else {
label.removeAttribute(d);
}
}
}
menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup');
@ -1597,8 +1599,8 @@
svgCanvas.addedNew = false;
};
$('#text').focus( function(){ textBeingEntered = true; } );
$('#text').blur( function(){ textBeingEntered = false; } );
$('#text').on("focus", function(e){ textBeingEntered = true; } );
$('#text').on("blur", function(){ textBeingEntered = false; } );
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind("selected", selectedChanged);
@ -1654,8 +1656,6 @@
$('#tool_reorient').toggleClass('disabled', ctl.value == 0);
}
var changeZoom = function(ctl) {
var zoomlevel = ctl.value / 100;
if(zoomlevel < .001) {
@ -1719,29 +1719,11 @@
$('#font_family').change(function() {
svgCanvas.setFontFamily(this.value);
});
$('#text').keyup(function(){
svgCanvas.setTextContent(this.value);
});
$('#image_url').change(function(){
setImageURL(this.value);
});
$('#link_url').change(function() {
if(this.value.length) {
svgCanvas.setLinkURL(this.value);
} else {
svgCanvas.removeHyperlink();
}
});
$('#g_title').change(function() {
svgCanvas.setGroupTitle(this.value);
});
changeAttribute = function(el, noUndo) {
var attr = el.getAttribute("data-attr");
var val = el.value;
@ -1751,23 +1733,6 @@
el.value = selectedElement.getAttribute(attr);
return false;
}
else{
el.blur()
}
if (attr !== "id") {
if (isNaN(val)) {
val = svgCanvas.convertToNum(attr, val);
} else if(curConfig.baseUnit !== 'px') {
// Convert unitless value to one with given unit
var unitData = svgedit.units.getTypeMap();
if(selectedElement[attr] || svgCanvas.getMode() === "pathedit" || attr === "x" || attr === "y") {
val *= unitData[curConfig.baseUnit];
}
}
}
if (!noUndo) svgCanvas.changeSelectedAttribute(attr, val);
else svgCanvas.changeSelectedAttributeNoUndo(attr, val);
};
@ -1779,7 +1744,7 @@
inp.focus().remove();
});
$('.palette_item').mousedown(function(evt){
$('.palette_item').on("mousedown touchstart touchmove", function(evt){
var isStroke = $('#tool_stroke').hasClass('active');
var picker = isStroke ? "stroke" : "fill";
var color = $(this).attr('data-rgb');
@ -1842,7 +1807,7 @@
var last_x = null, last_y = null, w_area = workarea[0],
panning = false, keypan = false;
$('#svgcanvas').bind('mousemove mouseup', function(evt) {
$('#svgcanvas').bind('mousemove mouseup touchend', function(evt) {
if(panning === false) return;
w_area.scrollLeft -= (evt.clientX - last_x);
w_area.scrollTop -= (evt.clientY - last_y);
@ -1850,10 +1815,11 @@
last_x = evt.clientX;
last_y = evt.clientY;
if(evt.type === 'mouseup') panning = false;
if(evt.type === 'mouseup' || evt.type === 'touchend') panning = false;
return false;
}).mousedown(function(evt) {
if(evt.button === 1 || keypan === true) {
})
.on("mousedown touchmove", function(evt) {
if(evt.button === 1 || keypan === true || (evt.originalEvent.touches && evt.originalEvent.touches.length >= 2)) {
panning = true;
last_x = evt.clientX;
last_y = evt.clientY;
@ -2526,11 +2492,6 @@
curConfig.gridSnapping = sg;
}
var clickCanvasColor = function(){
svgCanvas.clearSelection();
$('#tool_canvas').trigger("click")
};
var minimizeModal = function() {
if (window.self != window.top) { //we're in an iframe
@ -3129,13 +3090,7 @@
}
});
$('#tool_canvas').on("click touchstart", function(){
colorPicker($('#canvas_color'));
updateToolButtonState();
});
$('#tool_stroke').on("click touchstart", function(){
$('#tool_stroke').on("click", function(){
if ($('#tool_stroke').hasClass('active')) {
colorPicker($('#stroke_color'));
updateToolButtonState();
@ -3146,9 +3101,29 @@
}
});
$('#zoomLabel').click(function() {
$('#zoom_dropdown button').mousedown();
$(window).mouseup();
$('#tool_canvas').on("click touchstart", function(){
colorPicker($('#canvas_color'));
updateToolButtonState();
});
$('#tool_stroke').on("touchstart", function(){
$('#tool_stroke').addClass('active');
$("#tool_fill").removeClass('active');
colorPicker($('#stroke_color'));
updateToolButtonState();
});
$('#tool_fill').on("touchstart", function(){
$('#tool_fill').addClass('active');
$("#tool_stroke").removeClass('active');
colorPicker($('#fill_color'));
updateToolButtonState();
});
$('#zoom_select').on("change", function() {
var val = this.options[this.selectedIndex].text
val = val.split("%")[0]
$("#zoom").val(val).trigger("change")
});
$('.push_button').mousedown(function() {
@ -3349,7 +3324,6 @@
{sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'},
{sel:'#tool_undo', fn: clickUndo, evt: 'click', key: modKey + 'z'},
{sel:'#tool_redo', fn: clickRedo, evt: 'click', key: ['y', true]},
{sel:'#tool_canvas_color_menu', fn: clickCanvasColor, evt: 'click'},
{sel:'#tool_cut', fn: cutSelected, evt: 'click', key: [modKey+'x', true]},
{sel:'#tool_copy', fn: copySelected, evt: 'click', key: modKey+'c'},
{sel:'#tool_paste', fn: pasteSelected, evt: 'click', key: modKey+'v'},
@ -3472,14 +3446,6 @@
// Setup flyouts
setupFlyouts(flyouts);
// Misc additional actions
// Make "return" keypress trigger the change event
$('.attr_changer, #image_url').bind('keydown', 'return',
function(evt) {$(this).change();evt.preventDefault();}
);
$(window).bind('keydown', 'tab', function(e) {
if(ui_context === 'canvas') {
e.preventDefault();
@ -3584,8 +3550,8 @@
$('#path_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#rect_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#rect_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#group_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#group_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#g_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#g_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#image_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#text_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#text_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });

137
editor/svgcanvas.js
View File

@ -409,7 +409,6 @@ svgedit.select.init(curConfig, {
// this object manages selectors for us
var selectorManager = this.selectorManager = svgedit.select.getSelectorManager();
// this object manages selectors for us
var hoverManager = this.hoverManager = svgedit.select.getSelectorManager();
// Import from path.js
svgedit.path.init({
@ -560,6 +559,7 @@ var runExtensions = this.runExtensions = function(action, vars, returnArray) {
return result;
}
// Function: addExtension
// Add an extension to the editor
//
@ -575,8 +575,7 @@ this.addExtension = function(name, ext_func) {
svgroot: svgroot,
svgcontent: svgcontent,
nonce: getCurrentDrawing().getNonce(),
selectorManager: selectorManager,
hoverManager: hoverManager
selectorManager: selectorManager
}));
} else {
var ext = ext_func;
@ -2374,10 +2373,9 @@ 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 = mouseOver = function(evt)
var mouseDown = function(evt)
{
if(canvas.spaceKey || evt.button === 1) return;
if (evt.originalEvent.touches && evt.originalEvent.touches > 1) return;
var right_click = evt.button === 2;
root_sctm = svgcontent.getScreenCTM().inverse();
@ -2734,8 +2732,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// in this function we do not record any state changes yet (but we do update
// any elements that are still being created, moved or resized on the canvas)
var mouseMove = function(evt)
{
var mouseMove = function(evt) {
if (evt.originalEvent.touches && evt.originalEvent.touches.length > 1) return;
if (!started) return;
if(evt.button === 1 || canvas.spaceKey) return;
@ -2769,9 +2767,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
dx = snapToGrid(dx);
dy = snapToGrid(dy);
}
if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
//duplicate only once
if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
if (dx != 0 || dy != 0) {
var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
@ -2790,7 +2788,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// Note that if Webkit and there's no ID for this
// element, the dummy transform may have gotten lost.
// This results in unexpected behaviour
xform.setTranslate(dx,dy);
if(tlist.numberOfItems) {
tlist.replaceItem(xform, 0);
@ -2798,27 +2795,34 @@ 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();
}
//duplicate only once
// 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, xform);
canvas.removeClone = function(){
parent = canvas.addClone.parentNode
if (parent) {
parent.removeChild(canvas.addClone)
canvas.addClone = false;
}
}
window.addEventListener("keyup", canvas.removeClone)
}
}
call("transition", selectedElements);
}
}
break;
case "multiselect":
@ -3170,16 +3174,35 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
}; // mouseMove()
// mouseover mode
/* mouseover mode
var mouseOver = function(evt) {
if (evt.button) return;
elem = evt.target;
var clone = elem.cloneNode(true);
clone.setAttribute("fill", "none");
clone.setAttribute("stroke", "#09f")
clone.setAttribute("stroke-width", "1")
elem.selectorParentGroup.appendChild(clone)
if(canvas.spaceKey || evt.button === 1 || current_mode != "select") return;
evt.stopPropagation();
mouse_target = getMouseTarget(evt);
if (svghover.lastChild) svghover.removeChild(svghover.lastChild);
if (mouse_target.id == "svgroot") return
switch (mouse_target.nodeName) {
case "polyline":
case "line":
case "path":
case "ellipse":
case "rect":
var clone = mouse_target.cloneNode(true);
clone.setAttribute("stroke", "#c00")
clone.setAttribute("stroke-width", "1")
clone.setAttribute("stroke-opacity", "1")
clone.setAttribute("shape-rendering", "crispEdges")
clone.setAttribute("fill", "none")
hover_group.appendChild(clone);
break;
default:
break;
}
}
*/
// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
// and store it on the Undo stack
@ -3839,6 +3862,7 @@ var textActions = canvas.textActions = function() {
// TODO: Find way to block native selection
},
mouseMove: function(mouse_x, mouse_y) {
if (evt.originalEvent.touches && evt.originalEvent.touches.length > 1) return;
var pt = screenToPt(mouse_x, mouse_y);
setEndSelectionFromPoint(pt.x, pt.y);
},
@ -4348,6 +4372,7 @@ var pathActions = canvas.pathActions = function() {
}
},
mouseMove: function(evt, mouse_x, mouse_y) {
if (evt.originalEvent.touches && evt.originalEvent.touches.length > 1) return;
hasMoved = true;
if(current_mode === "path") {
if(!drawn_path) return;
@ -7604,21 +7629,42 @@ this.setLinkURL = function(val) {
};
// Function selectedAreSame
// Checks if all the selected Elements are the same type
//
// Parameters:
// None
this.elementsAreSame = function(elements) {
if (!elements.length || elements[0] == null) return null
else {
var isSameElement = function(el) {
if (el && selectedElements[0])
return (el.nodeName == selectedElements[0].nodeName);
else return null;
}
return selectedElements.every(isSameElement);
}
}
// Function: setRectRadius
// Sets the rx & ry values to the selected rect element to change its corner radius
//
// Parameters:
// val - The new radius
this.setRectRadius = function(val) {
var selected = selectedElements[0];
if (selected != null && selected.tagName == "rect") {
if (canvas.elementsAreSame(selectedElements) && selectedElements[0].tagName == "rect") {
var assign_rr = function(selected){
var r = selected.getAttribute("rx");
if (r != val) {
selected.setAttribute("rx", val);
selected.setAttribute("ry", val);
addCommandToHistory(new ChangeElementCommand(selected, {"rx":r, "ry":r}, "Radius"));
call("changed", [selected]);
}
if (r != val) {
selected.setAttribute("rx", val);
selected.setAttribute("ry", val);
addCommandToHistory(new ChangeElementCommand(selected, {"rx":r, "ry":r}, "Radius"));
call("changed", [selected]);
}
}
selectedElements.forEach(assign_rr)
}
};
@ -8423,7 +8469,6 @@ this.moveToBottomSelectedElement = function() {
this.moveUpDownSelected = function(dir) {
var selected = selectedElements[0];
if (!selected) return;
curBBoxes = [];
var closest, found_cur;
// jQuery sorts this list
@ -8545,7 +8590,7 @@ this.cloneSelectedElements = function(x,y, drag) {
// clone each element and replace it within copiedElements
var elem = copiedElements[i]
var clone = copyElem(copiedElements[i]);
if (drag) clone.removeAttribute("transform");
if (drag) clone.setAttribute("transform", "");
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(clone);
batchCmd.addSubCommand(new InsertElementCommand(clone));
}

389
editor/svgedit.compiled.css
View File

@ -33,7 +33,6 @@ table#svg_editor .jPicker{width:545px;z-index:20}
#svg_editor .jPicker .Preview .Current{border-top-width:0;cursor:pointer}
#svg_editor .jPicker .Button{text-align:center;width:115px}
#svg_editor .jPicker .Button input{width:100px}
#svg_editor .jPicker .Button .Ok{margin:0 0 5px 0}
#svg_editor .jPicker td.Radio{margin:0;padding:0;width:31px}
#svg_editor .jPicker td.Radio input{margin:0 5px 0 0;padding:0}
#svg_editor .jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}
@ -51,53 +50,53 @@ table#svg_editor .jPicker{width:545px;z-index:20}
#svg_editor .jPicker .actions .Ok{position:absolute;top:0;right:0}
#svg_editor .jPicker .actions .Cancel{position:absolute;top:0;left:0}
#svg_editor .jPicker .color_preview{width:62px;margin:0 auto}
#svg_editor h2.jGraduate_Title{display:none}
#svg_editor .jGraduate_Picker{position:absolute;padding:20px}
#svg_editor .jGraduate_tabs li{display:inline-block;padding:5px 10px;margin-right:5px;cursor:pointer}
#svg_editor li.jGraduate_tab_current{background:#fff;border-radius:3px 3px 0 0}
#svg_editor .jGraduate_colPick{display:none}
#svg_editor .jGraduate_gradPick{display:none;overflow:visible}
#svg_editor .jGraduate_tabs{position:relative;background-color:#ddd;padding:10px 10px 0 10px;margin:-20px -20px 20px -20px;border-radius:3px 3px 0 0}
#svg_editor div.jGraduate_Swatch{float:left;margin:0 15px 0 0}
#svg_editor div.jGraduate_GradContainer{border:solid #000 1px;background-image:url(../images/map-opacity.png);background-position:0 0;height:256px;width:256px;position:relative}
#svg_editor div.jGraduate_GradContainer div.grad_coord{background:rgba(0,0,0,0.8);border:2px solid white;border-radius:15px;-moz-border-radius:5px;width:14px;height:14px;position:absolute;margin:-7px -7px;top:0;left:0;text-align:center;font-size:8px;line-height:14px;color:white;text-decoration:none;cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
#svg_editor .jGraduate_AlphaArrows{position:absolute;margin-top:-10px;margin-left:250.5px}
#svg_editor div.jGraduate_Opacity{border:2px inset #eee;margin-top:14px;background-color:black;background-image:url(../images/Maps.png);background-position:0 -2816px;height:20px;cursor:ew-resize}
#svg_editor div.jGraduate_StopSlider{margin:-10px 0 0 -10px;width:276px;overflow:visible;background:white;height:45px;cursor:pointer}
#svg_editor div.jGraduate_StopSection{width:120px;float:left}
#svg_editor div.jGraduate_StopSection.jGraduate_SpreadMethod{display:none}
#svg_editor input.jGraduate_Ok,input.jGraduate_Cancel{display:block;width:100px}
#svg_editor input.jGraduate_Ok{margin:0 0 5px 0}
#svg_editor .colorBox{float:left;height:16px;width:16px;border:1px solid #808080;cursor:pointer;margin:4px 4px 4px 30px}
#svg_editor .colorBox+label{float:left;margin-top:7px}
#svg_editor label.jGraduate_Form_Heading{color:#333;padding:2px;font-weight:bold;font-size:13px}
#svg_editor div.jGraduate_Form_Section{-moz-border-radius:5px;-webkit-border-radius:5px;padding:15px 5px 5px 5px;margin:5px 2px;width:100px;text-align:center;overflow:auto;background:#eee}
#svg_editor div.jGraduate_Form label{padding:0 2px;color:#333}
#svg_editor div.jGraduate_StopSection input[type=text],#svg_editor div.jGraduate_Slider input[type=text]{width:33px;color:#333}
#svg_editor div.jGraduate_LightBox{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;display:none}
#svg_editor div.jGraduate_stopPicker{position:absolute;display:none;background:white;padding:20px;border-radius:3px;width:530px;height:300px;box-shadow:0 5px 25px black}
#svg_editor .jGraduate_gradPick{width:526px}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider{line-height:160%}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child{position:absolute;right:10px;top:0;color:#999;font-weight:bold}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child input{margin:0 3px 0 0;color:#333}
#svg_editor .jGraduate_gradPick .jGraduate_Form{float:left;width:270px;position:absolute;left:284px;width:266px;height:200px;top:195px;margin:-3px 3px 0 10px;line-height:200%}
#svg_editor .jGraduate_gradPick .jGraduate_Form label,#svg_editor .jGraduate_gradPick .jGraduate_Form input{width:auto;float:left}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label,#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input{width:auto;float:left;font-size:11px}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr{float:none}
#svg_editor .jGraduate_gradPick .jGraduate_Form label{clear:left}
#svg_editor .jGraduate_gradPick .jGraduate_Points{position:static;float:left;margin:0;width:auto}
#svg_editor .jGraduate_Colorblocks{display:table;border-spacing:0 5px}
#svg_editor .jGraduate_colorblock{display:table-row}
#svg_editor .jGraduate_Colorblocks .jGraduate_colorblock>*{display:table-cell;vertical-align:middle;margin:0;float:none}
#svg_editor .jGraduate_gradPick .jGraduate_Form_Section{padding-top:9px}
#svg_editor .jGraduate_Slider{text-align:center;float:left;width:100%;position:relative;margin:5px 0}
#svg_editor .jGraduate_Slider .jGraduate_Form_Section{border:0;width:250px;padding:0 2px;overflow:visible}
#svg_editor .jGraduate_Slider label.prelabel{width:40px;text-align:left}
#svg_editor .jGraduate_SliderBar{width:140px;float:left;margin:0 5px;border:1px solid #BBB;height:20px;position:relative}
#svg_editor div.jGraduate_Slider input{margin-top:5px}
#svg_editor div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
#svg_editor .jPicker .Button .Ok,#svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{margin:0;position:absolute;bottom:15px;right:15px}
#svg_editor .jPicker .Button .Cancel,#svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:15px;left:15px}
h2.jGraduate_Title{display:none}
.jGraduate_Picker{position:absolute;padding:20px}
.jGraduate_tabs li{display:inline-block;padding:5px 10px;margin-right:5px;cursor:pointer}
li.jGraduate_tab_current{background:#fff;border-radius:3px 3px 0 0}
.jGraduate_colPick{display:none}
.jGraduate_gradPick{display:none;overflow:visible}
.jGraduate_tabs{position:relative;background-color:#ddd;padding:10px 10px 0 10px;margin:-20px -20px 20px -20px;border-radius:3px 3px 0 0}
div.jGraduate_Swatch{float:left;margin:0 15px 0 0}
div.jGraduate_GradContainer{border:solid #000 1px;background-image:url(../images/map-opacity.png);background-position:0 0;height:256px;width:256px;position:relative}
div.jGraduate_GradContainer div.grad_coord{background:rgba(0,0,0,0.8);border:2px solid white;border-radius:15px;-moz-border-radius:5px;width:14px;height:14px;position:absolute;margin:-7px -7px;top:0;left:0;text-align:center;font-size:8px;line-height:14px;color:white;text-decoration:none;cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
.jGraduate_AlphaArrows{position:absolute;margin-top:-10px;margin-left:250.5px}
div.jGraduate_Opacity{border:2px inset #eee;margin-top:14px;background-color:black;background-image:url(../images/Maps.png);background-position:0 -2816px;height:20px;cursor:ew-resize}
div.jGraduate_StopSlider{margin:-10px 0 0 -10px;width:276px;overflow:visible;background:white;height:45px;cursor:pointer}
div.jGraduate_StopSection{width:120px;float:left}
div.jGraduate_StopSection.jGraduate_SpreadMethod{display:none}
input.jGraduate_Ok,input.jGraduate_Cancel{display:block;width:100px}
input.jGraduate_Ok{margin:0 0 5px 0}
.colorBox{float:left;height:16px;width:16px;border:1px solid #808080;cursor:pointer;margin:4px 4px 4px 30px}
.colorBox+label{float:left;margin-top:7px}
label.jGraduate_Form_Heading{color:#333;padding:2px;font-weight:bold;font-size:13px}
div.jGraduate_Form_Section{-moz-border-radius:5px;-webkit-border-radius:5px;padding:15px 5px 5px 5px;margin:5px 2px;width:100px;text-align:center;overflow:auto;background:#eee}
div.jGraduate_Form label{padding:0 2px;color:#333}
div.jGraduate_StopSection input[type=text],div.jGraduate_Slider input[type=text]{width:33px;color:#333}
div.jGraduate_LightBox{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;display:none}
div.jGraduate_stopPicker{position:absolute;display:none;background:white;padding:20px;border-radius:3px;width:530px;height:300px;box-shadow:0 5px 25px black}
.jGraduate_gradPick{width:526px}
.jGraduate_gradPick div.jGraduate_Slider{line-height:160%}
.jGraduate_gradPick div.jGraduate_Slider label:last-child{position:absolute;right:10px;top:0;color:#999;font-weight:bold}
.jGraduate_gradPick div.jGraduate_Slider label:last-child input{margin:0 3px 0 0;color:#333}
.jGraduate_gradPick .jGraduate_Form{float:left;width:270px;position:absolute;left:284px;width:266px;height:200px;top:195px;margin:-3px 3px 0 10px;line-height:200%}
.jGraduate_gradPick .jGraduate_Form label,.jGraduate_gradPick .jGraduate_Form input{width:auto;float:left}
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label,.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input{width:auto;float:left;font-size:11px}
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr{float:none}
.jGraduate_gradPick .jGraduate_Form label{clear:left}
.jGraduate_gradPick .jGraduate_Points{position:static;float:left;margin:0;width:auto}
.jGraduate_Colorblocks{display:table;border-spacing:0 5px}
.jGraduate_colorblock{display:table-row}
.jGraduate_Colorblocks .jGraduate_colorblock>*{display:table-cell;vertical-align:middle;margin:0;float:none}
.jGraduate_gradPick .jGraduate_Form_Section{padding-top:9px}
.jGraduate_Slider{text-align:center;float:left;width:100%;position:relative;margin:5px 0}
.jGraduate_Slider .jGraduate_Form_Section{border:0;width:250px;padding:0 2px;overflow:visible}
.jGraduate_Slider label.prelabel{width:40px;text-align:left}
.jGraduate_SliderBar{width:140px;float:left;margin:0 5px;border:1px solid #BBB;height:20px;position:relative}
div.jGraduate_Slider input{margin-top:5px}
div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
.jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px}
.jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px}
body{background:#2f2f2c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0}
::selection{background:#000;color:#fff}
::-moz-selection{background:#000;color:#fff}
@ -107,26 +106,25 @@ html,body{overflow:hidden;width:100%;height:100%}
::-webkit-scrollbar-thumb{border-radius:10px;background:#666}
::-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 #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}
#svg_editor .menu_list .menu_item.push_button_pressed:before{content:'✔';position:absolute;display:block;left:7px;top:3px;width:20px;height:20px}
#svg_editor .menu_list .menu_item:hover,#svg_editor .menu_list .menu_item.push_button_pressed:hover{background:rgba(0,0,0,0.1);color:#000}
#svg_editor .menu_list .menu_item.disabled:hover,#svg_editor .menu_list .menu_item.push_button_pressed.disabled:hover{background:transparent;color:#333}
#svg_editor .menu_list .menu_item.push_button_pressed{background:transparent;border:0;width:auto;height:auto;margin:0}
#svg_editor .menu_list .menu_item span{display:block;position:absolute;right:10px;padding:5px;background:rgba(0,0,0,0.1);top:6px;height:10px;text-align:center;font-size:10px;line-height:120%}
#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}
#svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
#menu_bar{margin:0 0 0 50px}
#menu_bar.active .menu.open .menu_list{display:block}
.menu{position:relative;z-index:5;color:#333;display:inline-block}
.menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
.touch .menu_title{padding:7px 17px;height:26px;line-height:26px}
.menu .menu_title:hover{background:rgba(255,255,255,0.1)}
.menu_list .separator{margin:5px 0;border-top:solid #ddd 1px}
.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 .menu_list{top:38px}
#menu_bar.active .menu.open .menu_title{background:white;color:#333}
.menu_list .menu_item{position:relative;overflow:hidden;line-height:22px;padding:5px 69px 5px 25px;cursor:default;color:#333}
.menu_list .menu_item.tool_button{background:transparent;border:0;margin:0;padding:5px 55px 5px 25px;height:auto;width:auto}
.menu_list .menu_item.push_button_pressed:before{content:'✔';position:absolute;display:block;left:7px;top:3px;width:20px;height:20px}
.menu_list .menu_item:hover,.menu_list .menu_item.push_button_pressed:hover{background:rgba(0,0,0,0.1);color:#000}
.menu_list .menu_item.disabled:hover,.menu_list .menu_item.push_button_pressed.disabled:hover{background:transparent;color:#333}
.menu_list .menu_item.push_button_pressed{background:transparent;border:0;width:auto;height:auto;margin:0}
.menu_list .menu_item span{display:block;position:absolute;right:10px;padding:5px;background:rgba(0,0,0,0.1);top:6px;height:10px;text-align:center;font-size:10px;line-height:120%}
#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:175px;border-top:solid #444 1px;border-right:solid #444 1px}
@ -139,12 +137,12 @@ html,body{overflow:hidden;width:100%;height:100%}
#ruler_x canvas{float:left}
#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}
#svg_editor #color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
.touch #svg_editor #color_tools{width:auto;height:auto}
div#palette_holder{display:block;overflow:hidden;height:31px;margin-top:10px;position:relative;z-index:2;float:left}
.touch div#palette_holder{height:40px;margin-top:0}
div#palette_holder #palette .palette_item:first-child{background:#fff}
div#palette_holder #palette .palette_item{cursor:pointer}
#color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
.touch #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}
@ -154,87 +152,84 @@ html,body{overflow:hidden;width:100%;height:100%}
.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{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #svg_editor #tool_eyedropper{margin-top:6px}
.touch #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 #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}
.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_switch{display:none}
#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}
#path_node_panel .tool_button img{position:absolute;left:5px;top:3px}
#color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff}
#color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
.touch #color_tools #tool_fill .color_block>div{position:relative}
#color_tools #tool_fill .color_block #fill_bg,#color_tools #tool_stroke .color_block #stroke_bg{position:absolute;top:1px;left:1px;bottom:1px;right:1px;background:#fff}
.touch #color_tools #tool_fill .color_block #fill_bg,.touch #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}
.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: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}
#svg_editor #tools_left .tool_button{background:#2f2f2c}
#svg_editor #tools_left .tool_button.loaded{background:#ccc}
#svg_editor #tools_left .tool_button.loaded:hover{background:#fff}
#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}
#color_tools #cross:hover{opacity:1}
#color_tools #tool_stroke:hover #stroke_color:after{background:#fff}
#color_tools #tool_stroke .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #color_tools #tool_stroke .color_block{width:36px;height:36px}
#color_tools #tool_stroke .color_block>div{position:absolute;bottom:0;right:0}
.touch #color_tools #tool_stroke .color_block>div{position:relative}
#color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
#linkLabel>svg{height:20px;padding-top:4px}
div#palette{float:left;width:810px;height:16px}
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 div#workarea{top:40px}
div.palette_item{height:16px;width:16px;float:left}
.touch div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:19px;float:left}
.menu .menu_list{display:none;position:absolute}
.tool_button:hover,.push_button:hover,.buttonup:hover,.buttondown,.tool_button_current,.push_button_pressed{background-color:#fff}
.tool_button.disabled,.tool_button.disabled:hover{opacity:.3;background-color:#aaa}
#tools_left .tool_button{background:#2f2f2c;position:relative}
#tools_left .tool_button.loaded{background:#ccc}
#tools_left .tool_button.loaded:hover{background:#fff}
#tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 1px;top:0;left:0;width:27px;height:27px;z-index:0}
#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:160px;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 10px}
.touch #svg_editor #tools_top{top:40px}
#svg_editor label{display:block;color:#999}
#tools_left .tool_button_current{background-color:#0cf}
#main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
#tools_top{position:absolute;width:160px;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 10px}
.touch #tools_top{top:30px}
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 #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}
#svg_editor #font_family_dropdown-list{border-radius:3px;box-shadow:0 5px 10px #000}
#svg_editor #font_family_dropdown-list li{cursor:pointer}
#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 #color_picker input[type=text],#color_picker #svg_editor input[type=number]{width:30px;background:#fff}
#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}
#svg_editor input[type=submit],#svg_editor input[type=button],button{background:#2c7bb3;color:#fff;border-radius:2px;padding:5px 10px;border:0;line-height:140%;border-bottom:solid transparent 1px}
#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 #tools_left{position:absolute;border-right:0;width:50px;top:30px;left:0;background:#2f2f2c;z-index:4}
#tools_top #marker_panel *{float:left}
#tools_top #marker_panel h4{float:none}
#tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
#font_family_dropdown-list{border-radius:3px;box-shadow:0 5px 10px #000}
#font_family_dropdown-list li{cursor:pointer}
#tools_top #marker_panel .dropdown button{margin-top:2px}
#tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
#tools_top #marker_panel .dropdown .icon_label img{float:none}
#color_picker input[type=text],#color_picker input[type=number]{width:30px;background:#fff}
.dropdown_set input[type=text],.dropdown_set input[type=number]{width:50px}
input[type=text].wide,input[type=number].wide{width:110px}
input[type=text].tuco,input[type=number].tuco{width:150px}
input[type=submit],input[type=button],button{background:#4f80ff;color:#fff;border-radius:3px;padding:7px 17px;border:0;line-height:140%;font-size:14px;font-weight:bold;font-family:sans-serif}
input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
input[type=submit]:hover,button:hover{background:#2f84c1}
input[type=submit]:active,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}
#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}
#workarea.wireframe #canvasBackground>rect{fill:#FFF!important}
#workarea #canvasBackground>rect{stroke:transparent!important}
.context_panel{display:none}
#canvas_panel{display:block}
#svg_editor #multiselected_panel .selected_tool{vertical-align:12px}
#multiselected_panel .selected_tool{vertical-align:12px}
#cur_context_panel{position:absolute;top:47px;left:68px;line-height:22px;overflow:auto;border-bottom:0;border-right:0;padding-left:5px;font-size:12px;background:black;color:#999;opacity:.5;padding:0 10px;border-radius:0 10px 10px 0}
#svg_editor #cur_context_panel a{float:none;text-decoration:none;color:#fff}
#svg_editor #cur_context_panel a:hover{text-decoration:underline}
#svg_editor #tools_left .tool_button,#svg_editor #tools_left .tool_button_current{position:relative;z-index:11}
#svg_editor .flyout_arrow_horiz{position:absolute;bottom:-1px;right:0;z-index:10}
span.zoom_tool{line-height:16px;background:#ccc;display:block;width:18px;height:18px;margin-top:2px;float:left}
span.zoom_tool img{vertical-align:top}
#zoom_panel{margin-top:9px;right:200px;position:absolute}
#cur_context_panel a{float:none;text-decoration:none;color:#fff}
#cur_context_panel a:hover{text-decoration:underline}
#tools_left .tool_button,#tools_left .tool_button_current{position:relative;z-index:11}
.flyout_arrow_horiz{position:absolute;bottom:-1px;right:0;z-index:10}
.dropdown{position:relative;float:left}
#svg_editor .dropdown button{width:21px;height:22px;padding:0 3px 0 3px;border:0;background-color:#555;border-radius:0 2px 2px 0;margin-left:-1px;position:relative}
#svg_editor .dropdown button:hover{background-color:#666}
#svg_editor .dropdown button:after{content:'';position:absolute;border:solid transparent 4px;border-top-color:#999;top:9px;left:6px}
.dropdown button{width:21px;height:22px;padding:0 3px 0 3px;border:0;background-color:#555;border-radius:0 2px 2px 0;margin-left:-1px;position:relative}
.dropdown button:hover{background-color:#666}
.dropdown button:after{content:'';position:absolute;border:solid transparent 4px;border-top-color:#999;top:9px;left:6px}
.dropdown button.down{border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #fff;border-bottom:1px solid #fff;background-color:#b0b0b0}
.dropdown ul{list-style:none;position:absolute;margin:0;padding:0;left:-80px;top:26px;z-index:4;display:none}
.dropup ul{top:auto;bottom:26px;border-radius:3px;box-shadow:0 5px 10px #000}
@ -248,46 +243,51 @@ span.zoom_tool img{vertical-align:top}
.dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff}
#font_family_dropdown-list li{font-size:1.4em}
#font_family{margin-left:5px;margin-right:0}
#svg_editor .tool_button,#svg_editor .push_button,#svg_editor .tool_button_current,#svg_editor .push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#svg_editor #main_menu li#tool_open,#svg_editor #main_menu li#tool_import{position:relative;overflow:hidden}
.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
#tool_image{overflow:hidden}
#tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
#svg_editor .disabled{opacity:.5;cursor:default}
#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}
.disabled{opacity:.5;cursor:default}
.width_label{padding-right:5px}
#tool_bold,#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}
#tool_bold:hover,#tool_italic:hover{color:#fff}
#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}
#tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
#tool_italic{font-weight:normal;font-style:italic}
#url_notice{padding-top:4px;display:none}
#svg_editor #color_picker{position:absolute;display:none;background:#fff;height:350px;border-radius:3px;z-index:5;box-shadow:0 5px 10px #000;width:530px}
#svg_editor .tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
#svg_editor .tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
#svg_editor .tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
#svg_editor #tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible}
#svg_editor #tools_bottom_1{width:115px;float:left}
#svg_editor #tools_bottom_2{position:relative;float:left;margin-top:5px}
#color_picker{position:absolute;display:none;background:#fff;height:350px;border-radius:3px;z-index:5;box-shadow:0 5px 10px #000;width:530px}
.tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
.tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
.tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
#tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible}
#tools_bottom_1{width:115px;float:left}
#tools_bottom_2{position:relative;float:left;margin-top:5px}
#tools_bottom input[type=text]{width:3.2em}
#svg_editor #tools_top h4{color:#fff;font-weight:normal;margin:0;padding:10px 0 5px 0}
#tools_top h4{color:#fff;font-weight:normal;margin:0;padding:10px 0 5px 0}
#tools_top .dropdown .icon_label{border:1px solid transparent;height:auto}
#svg_editor .draginput_cell{float:left;height:26px;border:solid #3f3f3c 10px;outline:solid #2f2f2c 1px;background-color:#ddd;cursor:pointer}
#svg_editor .align_buttons .draginput_cell:nth-child(1){border-radius:3px 0 0 0}
#svg_editor .align_buttons .draginput_cell:nth-child(3){border-radius:0 3px 0 0}
#svg_editor .align_buttons .draginput_cell:nth-child(4){border-radius:0 0 0 3px}
#svg_editor .align_buttons .draginput_cell:nth-child(6){border-radius:0 0 3px 0}
#tools_top.multiselected #align_tools{display:none}
#tools_top.multiselected #multiselected_panel{display:block!important}
#tools_top.multiselected #multiselected_panel .hidable{display:none}
.draginput_cell{float:left;height:26px;height:26px;border:solid #3f3f3c 10px;outline:solid #2f2f2c 1px;background:#ddd;cursor:pointer;position:relative}
.draginput_cell:hover{background:#fff}
.draginput_cell:after{content:'';position:absolute;top:0;left:0;border:solid #3f3f3c 1px;height:26px;width:26px;z-index:0}
.align_buttons .draginput_cell:nth-child(1){border-radius:3px 0 0 0}
.align_buttons .draginput_cell:nth-child(3){border-radius:0 3px 0 0}
.align_buttons .draginput_cell:nth-child(4){border-radius:0 0 0 3px}
.align_buttons .draginput_cell:nth-child(6){border-radius:0 0 3px 0}
.align_buttons .push_button{display:block;float:left}
#option_lists ul{display:none;position:absolute;height:auto;z-index:3;margin:0;list-style:none;padding-left:0}
#option_lists .optcols2{width:70px;margin-left:-15px}
#option_lists .optcols3{width:192px;margin-left:-105px;margin-top:-25px;background:#fff;padding:5px;box-shadow:0 5px 10px #000;border-radius:3px}
#option_lists .optcols3:after{content:'';display:block;position:absolute;top:-10px;right:70px;border:solid transparent 5px;border-bottom-color:#fff}
#svg_editor #option_lists .tool_button,#svg_editor #option_lists .push_button,#svg_editor #option_lists .tool_button_current,#svg_editor #option_lists .push_button_pressed{border:0;background:transparent}
#svg_editor #option_lists .tool_button:hover{background:#ddd}
#svg_editor #option_lists ul li.current{background-color:#f4e284}
#option_lists .tool_button,#option_lists .push_button,#option_lists .tool_button_current,#option_lists .push_button_pressed{border:0;background:transparent}
#option_lists .tool_button:hover{background:#ddd}
#option_lists ul li.current{background-color:#f4e284}
#option_lists .optcols4{width:130px;margin-left:-44px}
#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 #copyright{text-align:right;padding-right:.3em}
ul li.current{background-color:#f4e284}
#option_lists ul li{margin:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
#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}
#svg_source_editor #svg_source_container{position:absolute;top:30px;left:30px;right:30px;bottom:30px;background-color:#fff;border-radius:3px;opacity:1.0;text-align:center;z-index:6;padding:20px 0}
@ -297,7 +297,7 @@ span.zoom_tool img{vertical-align:top}
#svg_prefs_container div.color_block{float:left;margin:2px;padding:20px}
#svg_prefs_container div.cur_background{box-shadow:0 0 8px rgba(0,50,255,1)}
#background_img{position:absolute;top:0;left:0;text-align:left}
#svg_editor button.cancel,#svg_editor input.Cancel,#svg_editor input.cancel,#svg_editor input.jGraduate_Cancel,button.cancel{-webkit-appearance:none;background-color:#999;box-shadow:0 0 1px rgba(0,0,0,0.5);margin:0}
button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-webkit-appearance:none;background-color:#999;box-shadow:0 0 1px rgba(0,0,0,0.5);margin:0}
#shape_buttons{overflow:auto;top:0;bottom:0;left:110px;right:0;position:absolute;vertical-align:top}
#shape_cats{min-width:110px;display:block;position:absolute;left:0;top:0;height:300px;background:#eee;border-radius:3px 0 0 3px;z-index:2}
#shape_cats>div{line-height:1em;padding:0 .5em;border-bottom:1px solid #ddd;background:#e8e8e8;color:#444;height:26px;line-height:26px}
@ -334,7 +334,7 @@ span.zoom_tool img{vertical-align:top}
.ui-slider-handle{box-shadow:0 3px 3px rgba(0,0,0,0.3);border-radius:30px;background:#fff;background-image:-ms-linear-gradient(top,#ccc 0,#fff 100%);background-image:-moz-linear-gradient(top,#ccc 0,#fff 100%);background-image:-o-linear-gradient(top,#ccc 0,#fff 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ccc),color-stop(1,#fff));background-image:-webkit-linear-gradient(top,#ccc 0,#fff 100%);background-image:linear-gradient(top,#ccc 0,#fff 100%)}
.ui-slider-handle:focus{outline:0}
#shape_buttons{background:#fff;border-radius:0 3px 3px 0;padding:10px}
#svg_editor .tools_flyout .tool_button,#svg_editor .tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
.tools_flyout .tool_button,.tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px Lucida Sans,Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
.contextMenu LI{list-style:none;padding:0;margin:0}
.contextMenu .shortcut{width:115px;text-align:right;float:right}
@ -365,34 +365,43 @@ span.zoom_tool img{vertical-align:top}
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
#svg_editor #group_title{display:none}
#group_title{display:none}
#base_unit_container{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}
#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:14px;color:white;font-weight:bold;font-family:sans-serif}
#svg_editor .draginput label#resolution_label,#svg_editor .draginput label#seg_type_label{font:bold 12px/110% sans-serif;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
#svg_editor .draginput label#seg_type_label{margin-top:40px}
#svg_editor .draginput label#seg_type_label .caret{top:66%}
#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:#fff;font-size:16px;top:0;width:30px;left:-50px;padding:0 5px;color:#333;z-index:10;font-family:sans-serif;font-weight:bold;text-align:right;padding-right:10px;height:20px;line-height:20px;letter-spacing:-1px}
.touch #svg_editor .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-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}
.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}
.draginput .caret{border:solid transparent 5px;border-top-color:#999;position:absolute;width:0;height:0;right:5px;margin-top:-2px;top:50%}
.draginput label{margin:28px 10px 0 5px;font-size:14px;color:white;font-weight:bold;font-family:sans-serif}
.draginput label#resolution_label,.draginput label#seg_type_label{font:bold 12px/110% sans-serif;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
.draginput label#seg_type_label{margin-top:40px}
.draginput label#seg_type_label .caret{top:66%}
.draginput label#resolution_label .pull{position:relative;left:-15px}
.draginput label#resolution_label span{right:-13px;left:auto;font-size:16px;top:2px;font-weight:bold;color:white}
.touch .draginput.active:after{content:attr(data-value);display:block;position:absolute;background:#fff;font-size:16px;top:0;width:30px;left:-50px;padding:0 5px;color:#333;z-index:10;font-family:sans-serif;font-weight:bold;text-align:right;padding-right:10px;height:20px;line-height:20px;letter-spacing:-1px}
.touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff}
.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}
.draginput input:active{cursor:url(images/dragging.png),move;cursor:-webkit-dragging;cursor:-moz-dragging}
.draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
.draginput.error{background:#900}
.draginput.error input{color:#fff}
.draginput.stroke_tool{text-align:center}
.draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1}
.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}
.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}
.draginput input:focus{background:#4f80ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #4f80ff}
.draginput input:focus+span{z-index:10;color:#fff}
#zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0}
#zoom_panel{padding:9px 0;right:175px;position:absolute}
#zoom_label img{width:16px;height:16px}
#zoomLabel{width:16px;height:16px;cursor:pointer;background:#ccc}
#zoomLabel:after{content:'';position:absolute;border-left:solid #2f2f2c 1px;left:0;height:16px}
#zoom_label input{color:#ccc;font-size:13px;height:auto;width:auto;padding:0;cursor:default;position:static}
#zoom_label span{top:0;left:0}
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[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;overflow:hidden}
#color_canvas_tools{display:block}
#tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px}
#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #4f80ff 3px;position:absolute;margin:0 0 0 23px;-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}

1281
editor/svgedit.compiled.js
View File

File diff suppressed because it is too large Load Diff

136
editor/taphold.js Normal file
View File

@ -0,0 +1,136 @@
/**
* Copyright (c) 2011 Zauber S.A. <http://www.zaubersoftware.com/>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @author Guido Marucci Blas - guido@zaubersoftware.com
* @description Adds a handler for a custom event 'taphold' that handles a
* tap and hold on touch interfaces.
*/
(function($) {
var TAP_AND_HOLD_TRIGGER_TIMER = 1000;
var MAX_DISTANCE_ALLOWED_IN_TAP_AND_HOLD_EVENT = 5;
var TOUCHSTART = "touchstart";
var TOUCHEND = "touchend";
var TOUCHMOVE = "touchmove";
// For debugging only
// var TOUCHSTART = "mousedown";
// var TOUCHEND = "mouseup";
// var TOUCHMOVE = "mousemove";
var tapAndHoldTimer = null;
function calculateEuclideanDistance(x1, y1, x2, y2) {
var diffX = (x2 - x1);
var diffY = (y2 - y1);
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
function onTouchStart(event) {
var e = event.originalEvent;
// Only start detector if and only if one finger is over the widget
if (!e.touches || (e.targetTouches.length === 1 && e.touches.length === 1)) {
startTapAndHoldDetector.call(this, event)
var element = $(this);
element.bind(TOUCHMOVE, onTouchMove);
element.bind(TOUCHEND, onTouchEnd);
} else {
stopTapAndHoldDetector.call(this);
}
};
function onTouchMove(event) {
if (tapAndHoldTimer == null) {
return;
}
var e = event.originalEvent;
var x = (e.changedTouches) ? e.changedTouches[0].pageX: e.pageX;
var y = (e.changedTouches) ? e.changedTouches[0].pageY: e.pageY;
var tapAndHoldPoint = $(this).data("taphold.point");
var euclideanDistance = calculateEuclideanDistance(tapAndHoldPoint.x, tapAndHoldPoint.y, x, y);
if (euclideanDistance > MAX_DISTANCE_ALLOWED_IN_TAP_AND_HOLD_EVENT) {
stopTapAndHoldDetector.call(this);
}
};
function onTouchEnd(event) {
stopTapAndHoldDetector.call(this);
};
function onTapAndHold(event) {
clear.call(this);
$(this).data("taphold.handler").call(this, event);
};
function clear() {
tapAndHoldTimer = null;
$(this).unbind(TOUCHMOVE, onTouchMove);
$(this).unbind(TOUCHEND, onTouchEnd);
};
function startTapAndHoldDetector(event) {
if (tapAndHoldTimer != null) {
return;
}
var self = this;
tapAndHoldTimer = setTimeout(function(){
onTapAndHold.call(self, event)
}, TAP_AND_HOLD_TRIGGER_TIMER);
// Stores tap x & y
var e = event.originalEvent;
var tapAndHoldPoint = {};
tapAndHoldPoint.x = (e.changedTouches) ? e.changedTouches[0].pageX: e.pageX;
tapAndHoldPoint.y = (e.changedTouches) ? e.changedTouches[0].pageY: e.pageY;
$(this).data("taphold.point", tapAndHoldPoint);
};
function stopTapAndHoldDetector() {
clearTimeout(tapAndHoldTimer);
clear.call(this);
};
$.event.special["taphold"] = {
setup: function() {
},
add: function(handleObj) {
$(this).data("taphold.handler", handleObj.handler);
if (handleObj.data) {
$(this).bind(TOUCHSTART, handleObj.data, onTouchStart);
} else {
$(this).bind(TOUCHSTART, onTouchStart);
}
},
remove: function(handleObj) {
stopTapAndHoldDetector.call(this);
if (handleObj.data) {
$(this).unbind(TOUCHSTART, handleObj.data, onTouchStart);
} else {
$(this).unbind(TOUCHSTART, onTouchStart);
}
},
teardown: function() {
}
};
})(jQuery);

563
editor/temp.css
View File

File diff suppressed because it is too large Load Diff

53
method-draw/index.html
View File

@ -50,7 +50,6 @@
<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-shapes.js"></script>
<script type="text/javascript" src="extensions/ext-markers.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script>
<!{endif}-->
@ -223,10 +222,6 @@ $(function(){
<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" type="text" pattern="[0-9]*" />
</label>
</div>
<div id="path_panel" class="context_panel clearfix">
@ -367,8 +362,6 @@ $(function(){
<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" 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" data-title="Change node's x coordinate" size="3" data-attr="x" />
@ -379,11 +372,19 @@ $(function(){
<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>
<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="caret"></div>
<label id="seg_type_label">Straight</label>
</label>
<label class="draginput checkbox" id="tool_node_link" data-title="Link Control Points">
<span>Linked Control Points</span>
<div class="push_bottom"><input type="checkbox" checked></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>
@ -410,9 +411,15 @@ $(function(){
<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" class="attr_changer" step=".5" min="0" max="10" />
<input id="blur" size="2" value="0" step=".1" min="0" max="10" />
</label>
</div>
<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" type="text" pattern="[0-9]*" />
</label>
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" data-title="Change stroke">
@ -425,11 +432,13 @@ $(function(){
<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="2,2">···</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">- .</option>
<option value="5,2,2,2,2,2">- ..</option>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">&mdash;</label>
</label>
<label style="display: none;">
@ -439,17 +448,17 @@ $(function(){
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
<div class="clearfix"></div>
<h4>Align</h4>
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="push_button" id="tool_posleft" title="Align Left"></div>
<div class="push_button" id="tool_poscenter" title="Align Center"></div>
<div class="push_button" id="tool_posright" title="Align Right"></div>
<div class="push_button" id="tool_postop" title="Align Top"></div>
<div class="push_button" id="tool_posmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_posbottom" title="Align Bottom"></div>
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
</div>
</label>
</div>

4
method-draw/jgraduate/css/jPicker.css
View File

@ -153,9 +153,7 @@ table#svg_editor .jPicker {
#svg_editor .jPicker .Button input {
width: 100px;
}
#svg_editor .jPicker .Button .Ok {
margin: 0 0 5px 0;
}
#svg_editor .jPicker td.Radio {
margin: 0;
padding: 0;

109
method-draw/jgraduate/css/jgraduate.css
View File

@ -10,38 +10,38 @@
* Licensed under the Apache License Version 2
*/
#svg_editor h2.jGraduate_Title {
h2.jGraduate_Title {
display: none;
}
#svg_editor .jGraduate_Picker {
.jGraduate_Picker {
position: absolute;
padding: 20px;
}
#svg_editor .jGraduate_tabs li {
.jGraduate_tabs li {
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
}
#svg_editor li.jGraduate_tab_current {
li.jGraduate_tab_current {
background: #fff;
border-radius: 3px 3px 0 0;
}
#svg_editor .jGraduate_colPick {
.jGraduate_colPick {
display: none;
}
#svg_editor .jGraduate_gradPick {
.jGraduate_gradPick {
display: none;
overflow: visible;
/* position: relative;*/
}
#svg_editor .jGraduate_tabs {
.jGraduate_tabs {
position: relative;
background-color: #ddd;
padding: 10px 10px 0 10px;
@ -49,11 +49,11 @@
border-radius: 3px 3px 0 0;
}
#svg_editor div.jGraduate_Swatch {
div.jGraduate_Swatch {
float: left;
margin: 0 15px 0 0;
}
#svg_editor div.jGraduate_GradContainer {
div.jGraduate_GradContainer {
border: solid #000 1px;
background-image: url(../images/map-opacity.png);
background-position: 0px 0px;
@ -62,7 +62,7 @@
position: relative;
}
#svg_editor div.jGraduate_GradContainer div.grad_coord {
div.jGraduate_GradContainer div.grad_coord {
background: rgba(0,0,0,0.8);
border: 2px solid white;
border-radius: 15px;
@ -83,13 +83,13 @@
-webkit-user-select: none;
}
#svg_editor .jGraduate_AlphaArrows {
.jGraduate_AlphaArrows {
position: absolute;
margin-top: -10px;
margin-left: 250.5px;
}
#svg_editor div.jGraduate_Opacity {
div.jGraduate_Opacity {
border: 2px inset #eee;
margin-top: 14px;
background-color: black;
@ -99,7 +99,7 @@
cursor: ew-resize;
}
#svg_editor div.jGraduate_StopSlider {
div.jGraduate_StopSlider {
margin: -10px 0 0 -10px;
width: 276px;
overflow: visible;
@ -108,24 +108,24 @@
cursor: pointer;
}
#svg_editor div.jGraduate_StopSection {
div.jGraduate_StopSection {
width: 120px;
float: left;
}
#svg_editor div.jGraduate_StopSection.jGraduate_SpreadMethod {
div.jGraduate_StopSection.jGraduate_SpreadMethod {
display: none;
}
#svg_editor input.jGraduate_Ok, input.jGraduate_Cancel {
input.jGraduate_Ok, input.jGraduate_Cancel {
display: block;
width: 100px;
}
#svg_editor input.jGraduate_Ok {
input.jGraduate_Ok {
margin: 0 0 5px 0;
}
#svg_editor .colorBox {
.colorBox {
float: left;
height: 16px;
width: 16px;
@ -134,12 +134,12 @@
margin: 4px 4px 4px 30px;
}
#svg_editor .colorBox + label {
.colorBox + label {
float: left;
margin-top: 7px;
}
#svg_editor label.jGraduate_Form_Heading {
label.jGraduate_Form_Heading {
color: #333;
padding: 2px;
@ -147,7 +147,7 @@
font-size: 13px;
}
#svg_editor div.jGraduate_Form_Section {
div.jGraduate_Form_Section {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 15px 5px 5px 5px;
@ -158,18 +158,18 @@
background: #eee;
}
#svg_editor div.jGraduate_Form label {
div.jGraduate_Form label {
padding: 0 2px;
color: #333;
}
#svg_editor div.jGraduate_StopSection input[type=text],
#svg_editor div.jGraduate_Slider input[type=text] {
div.jGraduate_StopSection input[type=text],
div.jGraduate_Slider input[type=text] {
width: 33px;
color: #333;
}
#svg_editor div.jGraduate_LightBox {
div.jGraduate_LightBox {
position: fixed;
top: 0px;
left: 0px;
@ -180,7 +180,7 @@
display: none;
}
#svg_editor div.jGraduate_stopPicker {
div.jGraduate_stopPicker {
position: absolute;
display: none;
background:
@ -194,15 +194,15 @@
}
#svg_editor .jGraduate_gradPick {
.jGraduate_gradPick {
width: 526px;
}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider {
.jGraduate_gradPick div.jGraduate_Slider {
line-height: 160%
}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child {
.jGraduate_gradPick div.jGraduate_Slider label:last-child {
position: absolute;
right: 10px;
top: 0;
@ -210,12 +210,12 @@
font-weight: bold;
}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child input {
.jGraduate_gradPick div.jGraduate_Slider label:last-child input {
margin: 0 3px 0 0;
color: #333;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form {
.jGraduate_gradPick .jGraduate_Form {
float: left;
width: 270px;
position: absolute;
@ -227,55 +227,55 @@
line-height: 200%;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form label,
#svg_editor .jGraduate_gradPick .jGraduate_Form input {
.jGraduate_gradPick .jGraduate_Form label,
.jGraduate_gradPick .jGraduate_Form input {
width: auto;
float: left;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, #svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
width: auto;
float: left;
font-size: 11px;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
float: none;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form label {
.jGraduate_gradPick .jGraduate_Form label {
clear: left;
}
#svg_editor .jGraduate_gradPick .jGraduate_Points {
.jGraduate_gradPick .jGraduate_Points {
position: static;
float: left;
margin: 0;
width: auto;
}
#svg_editor .jGraduate_Colorblocks {
.jGraduate_Colorblocks {
display: table;
border-spacing: 0 5px;
}
#svg_editor .jGraduate_colorblock {
.jGraduate_colorblock {
display: table-row;
}
#svg_editor .jGraduate_Colorblocks .jGraduate_colorblock > * {
.jGraduate_Colorblocks .jGraduate_colorblock > * {
display: table-cell;
vertical-align: middle;
margin: 0;
float: none;
}
#svg_editor .jGraduate_gradPick .jGraduate_Form_Section {
.jGraduate_gradPick .jGraduate_Form_Section {
padding-top: 9px;
}
#svg_editor .jGraduate_Slider {
.jGraduate_Slider {
text-align: center;
float: left;
width: 100%;
@ -283,7 +283,7 @@ font-size: 11px;
margin: 5px 0;
}
#svg_editor .jGraduate_Slider .jGraduate_Form_Section {
.jGraduate_Slider .jGraduate_Form_Section {
border: none;
width: 250px;
padding: 0 2px;
@ -291,12 +291,12 @@ font-size: 11px;
}
#svg_editor .jGraduate_Slider label.prelabel {
.jGraduate_Slider label.prelabel {
width: 40px;
text-align: left;
}
#svg_editor .jGraduate_SliderBar {
.jGraduate_SliderBar {
width: 140px;
float: left;
margin: 0 5px;
@ -305,27 +305,28 @@ font-size: 11px;
position: relative;
}
#svg_editor div.jGraduate_Slider input {
div.jGraduate_Slider input {
margin-top: 5px;
}
#svg_editor div.jGraduate_Slider img {
div.jGraduate_Slider img {
top: 0;
left: 0;
position: absolute;
cursor:ew-resize;
}
#svg_editor .jPicker .Button .Ok, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok {
margin: 0;
.jPicker .Button .Ok, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok {
-webkit-appearance: none;
margin: 0;
position: absolute;
bottom: 15px;
right: 15px;
bottom: 5px;
right: 5px;
}
#svg_editor .jPicker .Button .Cancel, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
.jPicker .Button .Cancel, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
margin: 0;
position: absolute;
bottom: 15px;
left: 15px;
bottom: 5px;
left: 5px;
}

14
method-draw/jgraduate/jpicker.min.js vendored
View File

@ -1751,8 +1751,8 @@
activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
okButton = button.find('.Ok:first').bind('click', okClicked);
cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
okButton = button.find('.Ok:first').bind('click touchstart', okClicked);
cancelButton = button.find('.Cancel:first').bind('click touchstart', cancelClicked);
grid = button.find('.Grid:first');
setTimeout(
function()
@ -1768,7 +1768,7 @@
setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
setImg.call($this, preview.find('div:last'), images.clientPath + 'preview-opacity.png');
}, 0);
tbody.find('td.Radio input').bind('click', radioClicked);
tbody.find('td.Radio input').bind('click touchstart', radioClicked);
// initialize quick list
if (color.quickList && color.quickList.length > 0)
{
@ -1817,10 +1817,10 @@
destroy =
function()
{
container.find('td.Radio input').unbind('click', radioClicked);
currentPreview.unbind('click', currentClicked);
cancelButton.unbind('click', cancelClicked);
okButton.unbind('click', okClicked);
container.find('td.Radio input touchstart').unbind('click', radioClicked);
currentPreview.unbind('click touchstart', currentClicked);
cancelButton.unbind('click touchstart', cancelClicked);
okButton.unbind('click touchstart', okClicked);
if (settings.window.expandable)
{
iconImage.unbind('click', iconImageClicked);

64
method-draw/jquery-draginput.js vendored
View File

@ -44,7 +44,9 @@ $.fn.dragInput = function(cfg){
var $cursor = (area && this.dragCfg.cursor)
? $("<div class='draginput_cursor' />").appendTo($label)
: false
$input.attr("readonly", "readonly")
if ($cursor && !isNaN(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;
@ -98,7 +100,7 @@ $.fn.dragInput = function(cfg){
this.updateCursor = function(){
var value = parseFloat(this.value)
var pos = (value*-1)/scale+cursorHeight
$(this).next(".draginput_cursor").css("top", pos)
$cursor.css("top", pos)
}
this.start = function(e) {
@ -119,7 +121,10 @@ $.fn.dragInput = function(cfg){
.attr("data-domain", cursorHeight)
.attr("data-cursor", ($cursor != false))
.bind("mousedown touchstart", function(e){this.start(e);})
.bind("mousedown touchstart", function(e){
this.blur();
this.start(e);
})
.bind("dblclick taphold", function(e) {
this.removeAttribute("readonly", "readonly");
@ -127,54 +132,19 @@ $.fn.dragInput = function(cfg){
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
}
// Respond to up/down arrow keys.
switch(e.keyCode){
case 13: this.adjustValue(0); this.blur(); break; // Enter
}
})
/*
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;
}
.focus(function(e){
if (this.getAttribute("readonly") === "readonly") this.blur()
})
// 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
}
.blur(function(e){
this.setAttribute("readonly", "readonly")
})
.bind("mousewheel", function(e, delta, deltaX, deltaY){
@ -196,7 +166,7 @@ $.fn.dragInput.updateCursor = function(el){
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;
var cursor = el.parentNode.lastChild
if (cursor.className == "draginput_cursor") cursor.style.top = pos;
}

70
method-draw/select.js
View File

@ -63,7 +63,7 @@ svgedit.select.Selector = function(id, elem) {
);
if (svgedit.browser.isTouch()) {
this.selectorRect.setAttribute("stroke-opacity", 0);
this.selectorRect.setAttribute("stroke-opacity", 0.3);
}
// this holds a reference to the grip coordinates for this selector
@ -399,6 +399,59 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
}
});
var defs = svgFactory_.createSVGElement({
'element': 'defs',
'attr': {
'id': 'placeholder_defs'
}
})
var pattern = svgFactory_.createSVGElement({
'element': 'pattern',
'attr': {
'id': 'checkerPattern',
'patternUnits': 'userSpaceOnUse',
'x': 0,
'y': 0,
'width': 20,
'height': 20,
'viewBox': '0 0 10 10'
}
})
var pattern_bg = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 0,
'y': 0,
'width': 10,
'height': 10,
'fill': "#fff"
}
})
var pattern_square1 = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 0,
'y': 0,
'width': 5,
'height': 5,
'fill': "#eee"
}
})
var pattern_square2 = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 5,
'y': 5,
'width': 5,
'height': 5,
'fill': "#eee"
}
})
var rect = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
@ -408,7 +461,7 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
'y': 0,
'stroke-width': 1,
'stroke': '#000',
'fill': '#FFF',
'fill': 'url(#checkerPattern)',
'style': 'pointer-events:none'
}
});
@ -416,7 +469,13 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
// Both Firefox and WebKit are too slow with this filter region (especially at higher
// zoom levels) and Opera has at least one bug
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
canvasbg.appendChild(defs);
defs.appendChild(pattern);
pattern.appendChild(pattern_bg);
pattern.appendChild(pattern_square1);
pattern.appendChild(pattern_square2);
canvasbg.appendChild(rect);
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
};
@ -527,6 +586,13 @@ svgedit.select.init = function(config, svgFactory) {
config_ = config;
svgFactory_ = svgFactory;
selectorManager_ = new svgedit.select.SelectorManager();
//for hovering elements
svgFactory_.createSVGElement({
'element': 'g',
'attr': {
'id': 'hover_group'
}
})
};
/**

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

File diff suppressed because it is too large Load Diff

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

@ -24,11 +24,11 @@
<!--{if svg_edit_release}-->
<script type="text/javascript" src="svgedit.compiled.js"></script>
<!--{else}>
<script type="text/javascript" src="touch.js"></script>
<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.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>
<script type="text/javascript" src="svgtransformlist.js"></script>
@ -51,6 +51,7 @@
<script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
<script type="text/javascript" src="extensions/ext-shapes.js"></script>
<script type="text/javascript" src="requestanimationframe.js"></script>
<script type="text/javascript" src="taphold.js"></script>
<!{endif}-->
<!-- you can load extensions here -->
@ -166,12 +167,12 @@ $(function(){
<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]*" />
<span class="icon_label">Width</span>
</label>
<label data-title="Change canvas height">
<span class="icon_label">Height</span>
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
<span class="icon_label">Height</span>
</label>
@ -207,91 +208,104 @@ $(function(){
<div id="rect_panel" class="context_panel">
<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]*" />
<span>X</span>
</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]*" />
<span>Y</span>
</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]*" />
<span class="icon_label">Width</span>
</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]*" />
<span class="icon_label">Height</span>
</label>
</div>
<div id="path_panel" class="context_panel clearfix">
<h4 class="clearfix">Path</h4>
<label><span>X</span>
<label>
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
</label>
<label><span>Y</span>
<label>
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span>
</label>
</div>
<div id="image_panel" class="context_panel clearfix">
<h4>Image</h4>
<label>
<span>X</span>
<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*"/>
<span>X</span>
</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" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
<span>Y</span>
</label>
<label>
<input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
<span class="icon_label">Width</span>
</label>
<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]*" />
<span class="icon_label">Height</span>
</label>
</div>
<div id="ellipse_panel" class="context_panel clearfix">
<h4>Ellipse</h4>
<label id="tool_ellipse_cx"><span>X</span>
<label id="tool_ellipse_cx">
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx" pattern="[0-9]*" />
<span>X</span>
</label>
<label id="tool_ellipse_cy"><span>Y</span>
<label id="tool_ellipse_cy">
<input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="cy" pattern="[0-9]*" />
<span>Y</span>
</label>
<label id="tool_ellipse_rx"><span>Radius X</span>
<label id="tool_ellipse_rx">
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx" pattern="[0-9]*" />
<span>Radius X</span>
</label>
<label id="tool_ellipse_ry"><span>Radius Y</span>
<label id="tool_ellipse_ry">
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry" pattern="[0-9]*" />
<span>Radius Y</span>
</label>
</div>
<div id="line_panel" class="context_panel clearfix">
<h4>Line</h4>
<label id="tool_line_x1"><span>Start X</span>
<label id="tool_line_x1">
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3" data-attr="x1" pattern="[0-9]*" />
<span>Start X</span>
</label>
<label id="tool_line_y1"><span>Start Y</span>
<label id="tool_line_y1">
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3" data-attr="y1" pattern="[0-9]*" />
<span>Start Y</span>
</label>
<label id="tool_line_x2"><span>End X</span>
<label id="tool_line_x2">
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2" pattern="[0-9]*" />
<span>End X</span>
</label>
<label id="tool_line_y2"><span>End Y</span>
<label id="tool_line_y2">
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2" pattern="[0-9]*" />
<span>End Y</span>
</label>
</div>
<div id="text_panel" class="context_panel clearfix">
<h4>Text</h4>
<label><span>X</span>
<label>
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
</label>
<label><span>Y</span>
<label>
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span>
</label>
<div class="toolset" id="tool_font_family">
<!-- Font family -->
@ -321,8 +335,8 @@ $(function(){
</div>
<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" />
<span id="font_sizeLabel" class="icon_label">Font Size</span>
</label>
<!-- Not visible, but still used -->
@ -344,30 +358,26 @@ $(function(){
<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>
<input id="g_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
</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>
<input id="g_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
<span>Y</span>
</label>
</div>
<!-- For anchor elements -->
<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 clearfix">
<h4>Edit Path</h4>
<label id="tool_node_x"><span>X</span>
<label id="tool_node_x">
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
<span>X</span>
</label>
<label id="tool_node_y"><span>Y</span>
<label id="tool_node_y">
<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" size="3" data-attr="y" />
<span>Y</span>
</label>
<label id="segment_type" class="draginput label">
@ -396,97 +406,64 @@ $(function(){
<div id="selected_panel" class="context_panel clearfix">
<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" data-min="-180" data-max="180" type="text"/>
<span class="icon_label">Rotation</span>
<div id="tool_angle_indicator">
<div id="tool_angle_indicator_cursor"></div>
</div>
</label>
<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" step="5" min="0" max="100" />
<span id="group_opacityLabel" class="icon_label">Opacity</span>
</label>
<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" step=".1" min="0" max="10" />
<span class="icon_label">Blur</span>
</label>
</div>
<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" type="text" pattern="[0-9]*" />
<span class="icon_label">Roundness</span>
</label>
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" data-title="Change stroke">
<label>
<span class="icon_label">Stroke Width</span>
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
</label>
</div>
<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>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">&mdash;</label>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
<div class="clearfix"></div>
<h4>Align</h4>
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
</div>
</label>
</div>
<div id="align_tools">
<h4>Align</h4>
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_posright" title="Align Right"></div>
<div class="draginput_cell" id="tool_postop" title="Align Top"></div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
</div>
</label>
</div>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
<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> -->
<!--<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div> -->
<!--<div class="tool_sep"></div> -->
<!--div class="push_button" id="tool_group" title="Group Elements [G]"></div>-->
<!--<div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div>-->
<h4 class="hidable">Multiple Elements</h4>
<div class="toolset align_buttons">
<h4>Align</h4>
<label>
<div class="col last clear">
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="push_button" id="tool_alignright" title="Align Right"></div>
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<div class="draginput_cell" id="tool_alignleft" title="Align Left"></div>
<div class="draginput_cell" id="tool_aligncenter" title="Align Center"></div>
<div class="draginput_cell" id="tool_alignright" title="Align Right"></div>
<div class="draginput_cell" id="tool_aligntop" title="Align Top"></div>
<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle"></div>
<div class="draginput_cell" id="tool_alignbottom" title="Align Bottom"></div>
</div>
</label>
</div>
<label id="tool_align_relative">
<div class="clearfix"></div>
<label id="tool_align_relative" style="margin-top: 10px;">
<span id="relativeToLabel">Relative to:</span>
<select id="align_relative_to" title="Align relative to ...">
<option id="selected_objects" value="selected">Objects</option>
@ -496,6 +473,37 @@ $(function(){
<div class="tool_sep"></div>
</div>
<div id="stroke_panel" class="context_panel clearfix">
<div class="clearfix"></div>
<h4>Stroke</h4>
<div class="toolset" data-title="Change stroke">
<label>
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
<span class="icon_label">Stroke Width</span>
</label>
</div>
<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>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">&mdash;</label>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
</div>
</div> <!-- tools_top -->
<div id="cur_context_panel">
@ -511,7 +519,7 @@ $(function(){
<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 class="tool_button" id="tool_zoom" title="Zoom Tool [Z]"></div>
<div id="color_tools">
<div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
@ -537,9 +545,26 @@ $(function(){
<!-- Zoom buttons -->
<div id="zoom_panel" class="toolset" title="Change zoom level">
<label>
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<input id="zoom" size="3" value="100" type="text" />
<label class="draginput select" id="zoom_label">
<span id="zoomLabel" class="zoom_tool icon_label"></span>
<select id="zoom_select">
<option>6%</option>
<option>12%</option>
<option>16%</option>
<option>25%</option>
<option>50%</option>
<option>75%</option>
<option selected>100%</option>
<option>150%</option>
<option>200%</option>
<option>300%</option>
<option>400%</option>
<option>600%</option>
<option>800%</option>
<option>1600%</option>
</select>
<div class="caret"></div>
<input id="zoom" size="3" value="100%" type="text" readonly="readonly" />
</label>
</div>

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

@ -22,6 +22,7 @@
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
if(!window.svgEditor) window.svgEditor = function($) {
var svgCanvas;
var Editor = {};
@ -284,13 +285,9 @@
resize: {
'#logo .svg_icon': 15,
'.flyout_arrow_horiz .svg_icon': 5,
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'#main_button .dropdown .svg_icon': 9,
'#fill_bg .svg_icon, #stroke_bg .svg_icon': svgedit.browser.isTouch() ? 36 : 24,
'#fill_bg .svg_icon, #stroke_bg .svg_icon': svgedit.browser.isTouch() ? 24 : 24,
'.palette_item:first .svg_icon': svgedit.browser.isTouch() ? 30 : 16,
'.toolbar_button button .svg_icon':16,
'.stroke_tool div div .svg_icon': 20,
'#tools_bottom label .svg_icon': 18,
'#zoomLabel .svg_icon': 16,
'#zoom_dropdown .svg_icon': 7
},
callback: function(icons) {
@ -468,7 +465,6 @@
var docprops = false;
var preferences = false;
var cur_context = '';
var orig_title = $('title:first').text();
var saveHandler = function(window,svg) {
Editor.show_save_warning = false;
@ -552,7 +548,7 @@
var is_node = (mode == "pathedit");
// if elems[1] is present, then we have more than one element
selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null);
multiselected = (elems.length >= 2 && elems[1] != null);
multiselected = (elems.length >= 2 && elems[1] != null) ? elems : false;
if (selectedElement != null) {
// unless we're already in always set the mode of the editor to select because
// upon creation of a text element the editor is switched into
@ -580,7 +576,7 @@
if(!elem) return;
multiselected = (elems.length >= 2 && elems[1] != null);
multiselected = (elems.length >= 2 && elems[1] != null) ? elems : null;
// Only updating fields for single elements for now
if(!multiselected) {
switch ( mode ) {
@ -668,7 +664,6 @@
var diff = (zoomlevel) - (res.zoom)
var zoom = $('#zoom')[0]
var current_zoom = res.zoom
console.log(diff);
var animateZoom = function(timestamp) {
var progress = timestamp - start
var tick = progress / duration
@ -1387,18 +1382,34 @@
var elem = selectedElement;
// If element has just been deleted, consider it null
if(elem != null && !elem.parentNode) elem = null;
if (multiselected && multiselected[0] != null && !multiselected[0].parentNode) multiselected = false;
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
var currentMode = svgCanvas.getMode();
var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
var menu_items = $('#cmenu_canvas li');
$('#selected_panel, #multiselected_panel, #g_panel, #path_panel, #rect_panel, #canvas_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel, #use_panel, #a_panel').hide();
$('.context_panel').hide();
$('.menu_item', '#edit_menu').addClass('disabled');
$('.menu_item', '#object_menu').addClass('disabled');
if (!elem && !multiselected) $("#canvas_panel").show();
//hack to show the proper multialign box
if (multiselected) {
elem = (svgCanvas.elementsAreSame(multiselected)) ? multiselected[0] : null
if (elem) $("#tools_top").addClass("multiselected")
}
if (!elem && !multiselected) {
$("#tools_top").removeClass("multiselected")
$("#stroke_panel").hide();
$("#canvas_panel").show();
}
if (elem != null) {
$("#stroke_panel").show();
var elname = elem.nodeName;
var angle = svgCanvas.getRotationAngle(elem);
$('#angle').val(Math.round(angle));
@ -1423,7 +1434,7 @@
x = svgedit.units.convertUnit(x);
y = svgedit.units.convertUnit(y);
}
$("#" + elname +"_x").val(Math.round(x))
$("#" + elname +"_y").val(Math.round(y))
@ -1556,15 +1567,6 @@
$('#container_panel').show();
$('.action_group_selected').removeClass('disabled');
var title = svgCanvas.getTitle();
var label = $('#g_title')[0];
label.value = title;
setInputWidth(label);
var d = 'disabled';
if(el_name == 'use') {
label.setAttribute(d, d);
} else {
label.removeAttribute(d);
}
}
}
menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup');
@ -1597,8 +1599,8 @@
svgCanvas.addedNew = false;
};
$('#text').focus( function(){ textBeingEntered = true; } );
$('#text').blur( function(){ textBeingEntered = false; } );
$('#text').on("focus", function(e){ textBeingEntered = true; } );
$('#text').on("blur", function(){ textBeingEntered = false; } );
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind("selected", selectedChanged);
@ -1654,8 +1656,6 @@
$('#tool_reorient').toggleClass('disabled', ctl.value == 0);
}
var changeZoom = function(ctl) {
var zoomlevel = ctl.value / 100;
if(zoomlevel < .001) {
@ -1719,29 +1719,11 @@
$('#font_family').change(function() {
svgCanvas.setFontFamily(this.value);
});
$('#text').keyup(function(){
svgCanvas.setTextContent(this.value);
});
$('#image_url').change(function(){
setImageURL(this.value);
});
$('#link_url').change(function() {
if(this.value.length) {
svgCanvas.setLinkURL(this.value);
} else {
svgCanvas.removeHyperlink();
}
});
$('#g_title').change(function() {
svgCanvas.setGroupTitle(this.value);
});
changeAttribute = function(el, noUndo) {
var attr = el.getAttribute("data-attr");
var val = el.value;
@ -1751,23 +1733,6 @@
el.value = selectedElement.getAttribute(attr);
return false;
}
else{
el.blur()
}
if (attr !== "id") {
if (isNaN(val)) {
val = svgCanvas.convertToNum(attr, val);
} else if(curConfig.baseUnit !== 'px') {
// Convert unitless value to one with given unit
var unitData = svgedit.units.getTypeMap();
if(selectedElement[attr] || svgCanvas.getMode() === "pathedit" || attr === "x" || attr === "y") {
val *= unitData[curConfig.baseUnit];
}
}
}
if (!noUndo) svgCanvas.changeSelectedAttribute(attr, val);
else svgCanvas.changeSelectedAttributeNoUndo(attr, val);
};
@ -1779,7 +1744,7 @@
inp.focus().remove();
});
$('.palette_item').mousedown(function(evt){
$('.palette_item').on("mousedown touchstart touchmove", function(evt){
var isStroke = $('#tool_stroke').hasClass('active');
var picker = isStroke ? "stroke" : "fill";
var color = $(this).attr('data-rgb');
@ -1842,7 +1807,7 @@
var last_x = null, last_y = null, w_area = workarea[0],
panning = false, keypan = false;
$('#svgcanvas').bind('mousemove mouseup', function(evt) {
$('#svgcanvas').bind('mousemove mouseup touchend', function(evt) {
if(panning === false) return;
w_area.scrollLeft -= (evt.clientX - last_x);
w_area.scrollTop -= (evt.clientY - last_y);
@ -1850,10 +1815,11 @@
last_x = evt.clientX;
last_y = evt.clientY;
if(evt.type === 'mouseup') panning = false;
if(evt.type === 'mouseup' || evt.type === 'touchend') panning = false;
return false;
}).mousedown(function(evt) {
if(evt.button === 1 || keypan === true) {
})
.on("mousedown touchmove", function(evt) {
if(evt.button === 1 || keypan === true || (evt.originalEvent.touches && evt.originalEvent.touches.length >= 2)) {
panning = true;
last_x = evt.clientX;
last_y = evt.clientY;
@ -2526,11 +2492,6 @@
curConfig.gridSnapping = sg;
}
var clickCanvasColor = function(){
svgCanvas.clearSelection();
$('#tool_canvas').trigger("click")
};
var minimizeModal = function() {
if (window.self != window.top) { //we're in an iframe
@ -3129,13 +3090,7 @@
}
});
$('#tool_canvas').on("click touchstart", function(){
colorPicker($('#canvas_color'));
updateToolButtonState();
});
$('#tool_stroke').on("click touchstart", function(){
$('#tool_stroke').on("click", function(){
if ($('#tool_stroke').hasClass('active')) {
colorPicker($('#stroke_color'));
updateToolButtonState();
@ -3146,9 +3101,29 @@
}
});
$('#zoomLabel').click(function() {
$('#zoom_dropdown button').mousedown();
$(window).mouseup();
$('#tool_canvas').on("click touchstart", function(){
colorPicker($('#canvas_color'));
updateToolButtonState();
});
$('#tool_stroke').on("touchstart", function(){
$('#tool_stroke').addClass('active');
$("#tool_fill").removeClass('active');
colorPicker($('#stroke_color'));
updateToolButtonState();
});
$('#tool_fill').on("touchstart", function(){
$('#tool_fill').addClass('active');
$("#tool_stroke").removeClass('active');
colorPicker($('#fill_color'));
updateToolButtonState();
});
$('#zoom_select').on("change", function() {
var val = this.options[this.selectedIndex].text
val = val.split("%")[0]
$("#zoom").val(val).trigger("change")
});
$('.push_button').mousedown(function() {
@ -3349,7 +3324,6 @@
{sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'},
{sel:'#tool_undo', fn: clickUndo, evt: 'click', key: modKey + 'z'},
{sel:'#tool_redo', fn: clickRedo, evt: 'click', key: ['y', true]},
{sel:'#tool_canvas_color_menu', fn: clickCanvasColor, evt: 'click'},
{sel:'#tool_cut', fn: cutSelected, evt: 'click', key: [modKey+'x', true]},
{sel:'#tool_copy', fn: copySelected, evt: 'click', key: modKey+'c'},
{sel:'#tool_paste', fn: pasteSelected, evt: 'click', key: modKey+'v'},
@ -3472,14 +3446,6 @@
// Setup flyouts
setupFlyouts(flyouts);
// Misc additional actions
// Make "return" keypress trigger the change event
$('.attr_changer, #image_url').bind('keydown', 'return',
function(evt) {$(this).change();evt.preventDefault();}
);
$(window).bind('keydown', 'tab', function(e) {
if(ui_context === 'canvas') {
e.preventDefault();
@ -3584,8 +3550,8 @@
$('#path_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#rect_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#rect_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#group_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#group_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#g_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#g_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#image_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#text_y') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });
$('#text_x') .dragInput({ min: null, max: null, step: 1, callback: changeAttribute, cursor: false });

137
method-draw/svgcanvas.js
View File

@ -409,7 +409,6 @@ svgedit.select.init(curConfig, {
// this object manages selectors for us
var selectorManager = this.selectorManager = svgedit.select.getSelectorManager();
// this object manages selectors for us
var hoverManager = this.hoverManager = svgedit.select.getSelectorManager();
// Import from path.js
svgedit.path.init({
@ -560,6 +559,7 @@ var runExtensions = this.runExtensions = function(action, vars, returnArray) {
return result;
}
// Function: addExtension
// Add an extension to the editor
//
@ -575,8 +575,7 @@ this.addExtension = function(name, ext_func) {
svgroot: svgroot,
svgcontent: svgcontent,
nonce: getCurrentDrawing().getNonce(),
selectorManager: selectorManager,
hoverManager: hoverManager
selectorManager: selectorManager
}));
} else {
var ext = ext_func;
@ -2374,10 +2373,9 @@ 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 = mouseOver = function(evt)
var mouseDown = function(evt)
{
if(canvas.spaceKey || evt.button === 1) return;
if (evt.originalEvent.touches && evt.originalEvent.touches > 1) return;
var right_click = evt.button === 2;
root_sctm = svgcontent.getScreenCTM().inverse();
@ -2734,8 +2732,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// in this function we do not record any state changes yet (but we do update
// any elements that are still being created, moved or resized on the canvas)
var mouseMove = function(evt)
{
var mouseMove = function(evt) {
if (evt.originalEvent.touches && evt.originalEvent.touches.length > 1) return;
if (!started) return;
if(evt.button === 1 || canvas.spaceKey) return;
@ -2769,9 +2767,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
dx = snapToGrid(dx);
dy = snapToGrid(dy);
}
if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
//duplicate only once
if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; }
if (dx != 0 || dy != 0) {
var len = selectedElements.length;
for (var i = 0; i < len; ++i) {
@ -2790,7 +2788,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
// Note that if Webkit and there's no ID for this
// element, the dummy transform may have gotten lost.
// This results in unexpected behaviour
xform.setTranslate(dx,dy);
if(tlist.numberOfItems) {
tlist.replaceItem(xform, 0);
@ -2798,27 +2795,34 @@ 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();
}
//duplicate only once
// 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, xform);
canvas.removeClone = function(){
parent = canvas.addClone.parentNode
if (parent) {
parent.removeChild(canvas.addClone)
canvas.addClone = false;
}
}
window.addEventListener("keyup", canvas.removeClone)
}
}
call("transition", selectedElements);
}
}
break;
case "multiselect":
@ -3170,16 +3174,35 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
}; // mouseMove()
// mouseover mode
/* mouseover mode
var mouseOver = function(evt) {
if (evt.button) return;
elem = evt.target;
var clone = elem.cloneNode(true);
clone.setAttribute("fill", "none");
clone.setAttribute("stroke", "#09f")
clone.setAttribute("stroke-width", "1")
elem.selectorParentGroup.appendChild(clone)
if(canvas.spaceKey || evt.button === 1 || current_mode != "select") return;
evt.stopPropagation();
mouse_target = getMouseTarget(evt);
if (svghover.lastChild) svghover.removeChild(svghover.lastChild);
if (mouse_target.id == "svgroot") return
switch (mouse_target.nodeName) {
case "polyline":
case "line":
case "path":
case "ellipse":
case "rect":
var clone = mouse_target.cloneNode(true);
clone.setAttribute("stroke", "#c00")
clone.setAttribute("stroke-width", "1")
clone.setAttribute("stroke-opacity", "1")
clone.setAttribute("shape-rendering", "crispEdges")
clone.setAttribute("fill", "none")
hover_group.appendChild(clone);
break;
default:
break;
}
}
*/
// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
// and store it on the Undo stack
@ -3839,6 +3862,7 @@ var textActions = canvas.textActions = function() {
// TODO: Find way to block native selection
},
mouseMove: function(mouse_x, mouse_y) {
if (evt.originalEvent.touches && evt.originalEvent.touches.length > 1) return;
var pt = screenToPt(mouse_x, mouse_y);
setEndSelectionFromPoint(pt.x, pt.y);
},
@ -4348,6 +4372,7 @@ var pathActions = canvas.pathActions = function() {
}
},
mouseMove: function(evt, mouse_x, mouse_y) {
if (evt.originalEvent.touches && evt.originalEvent.touches.length > 1) return;
hasMoved = true;
if(current_mode === "path") {
if(!drawn_path) return;
@ -7604,21 +7629,42 @@ this.setLinkURL = function(val) {
};
// Function selectedAreSame
// Checks if all the selected Elements are the same type
//
// Parameters:
// None
this.elementsAreSame = function(elements) {
if (!elements.length || elements[0] == null) return null
else {
var isSameElement = function(el) {
if (el && selectedElements[0])
return (el.nodeName == selectedElements[0].nodeName);
else return null;
}
return selectedElements.every(isSameElement);
}
}
// Function: setRectRadius
// Sets the rx & ry values to the selected rect element to change its corner radius
//
// Parameters:
// val - The new radius
this.setRectRadius = function(val) {
var selected = selectedElements[0];
if (selected != null && selected.tagName == "rect") {
if (canvas.elementsAreSame(selectedElements) && selectedElements[0].tagName == "rect") {
var assign_rr = function(selected){
var r = selected.getAttribute("rx");
if (r != val) {
selected.setAttribute("rx", val);
selected.setAttribute("ry", val);
addCommandToHistory(new ChangeElementCommand(selected, {"rx":r, "ry":r}, "Radius"));
call("changed", [selected]);
}
if (r != val) {
selected.setAttribute("rx", val);
selected.setAttribute("ry", val);
addCommandToHistory(new ChangeElementCommand(selected, {"rx":r, "ry":r}, "Radius"));
call("changed", [selected]);
}
}
selectedElements.forEach(assign_rr)
}
};
@ -8423,7 +8469,6 @@ this.moveToBottomSelectedElement = function() {
this.moveUpDownSelected = function(dir) {
var selected = selectedElements[0];
if (!selected) return;
curBBoxes = [];
var closest, found_cur;
// jQuery sorts this list
@ -8545,7 +8590,7 @@ this.cloneSelectedElements = function(x,y, drag) {
// clone each element and replace it within copiedElements
var elem = copiedElements[i]
var clone = copyElem(copiedElements[i]);
if (drag) clone.removeAttribute("transform");
if (drag) clone.setAttribute("transform", "");
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(clone);
batchCmd.addSubCommand(new InsertElementCommand(clone));
}

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

@ -33,7 +33,6 @@ table#svg_editor .jPicker{width:545px;z-index:20}
#svg_editor .jPicker .Preview .Current{border-top-width:0;cursor:pointer}
#svg_editor .jPicker .Button{text-align:center;width:115px}
#svg_editor .jPicker .Button input{width:100px}
#svg_editor .jPicker .Button .Ok{margin:0 0 5px 0}
#svg_editor .jPicker td.Radio{margin:0;padding:0;width:31px}
#svg_editor .jPicker td.Radio input{margin:0 5px 0 0;padding:0}
#svg_editor .jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}
@ -51,53 +50,53 @@ table#svg_editor .jPicker{width:545px;z-index:20}
#svg_editor .jPicker .actions .Ok{position:absolute;top:0;right:0}
#svg_editor .jPicker .actions .Cancel{position:absolute;top:0;left:0}
#svg_editor .jPicker .color_preview{width:62px;margin:0 auto}
#svg_editor h2.jGraduate_Title{display:none}
#svg_editor .jGraduate_Picker{position:absolute;padding:20px}
#svg_editor .jGraduate_tabs li{display:inline-block;padding:5px 10px;margin-right:5px;cursor:pointer}
#svg_editor li.jGraduate_tab_current{background:#fff;border-radius:3px 3px 0 0}
#svg_editor .jGraduate_colPick{display:none}
#svg_editor .jGraduate_gradPick{display:none;overflow:visible}
#svg_editor .jGraduate_tabs{position:relative;background-color:#ddd;padding:10px 10px 0 10px;margin:-20px -20px 20px -20px;border-radius:3px 3px 0 0}
#svg_editor div.jGraduate_Swatch{float:left;margin:0 15px 0 0}
#svg_editor div.jGraduate_GradContainer{border:solid #000 1px;background-image:url(../images/map-opacity.png);background-position:0 0;height:256px;width:256px;position:relative}
#svg_editor div.jGraduate_GradContainer div.grad_coord{background:rgba(0,0,0,0.8);border:2px solid white;border-radius:15px;-moz-border-radius:5px;width:14px;height:14px;position:absolute;margin:-7px -7px;top:0;left:0;text-align:center;font-size:8px;line-height:14px;color:white;text-decoration:none;cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
#svg_editor .jGraduate_AlphaArrows{position:absolute;margin-top:-10px;margin-left:250.5px}
#svg_editor div.jGraduate_Opacity{border:2px inset #eee;margin-top:14px;background-color:black;background-image:url(../images/Maps.png);background-position:0 -2816px;height:20px;cursor:ew-resize}
#svg_editor div.jGraduate_StopSlider{margin:-10px 0 0 -10px;width:276px;overflow:visible;background:white;height:45px;cursor:pointer}
#svg_editor div.jGraduate_StopSection{width:120px;float:left}
#svg_editor div.jGraduate_StopSection.jGraduate_SpreadMethod{display:none}
#svg_editor input.jGraduate_Ok,input.jGraduate_Cancel{display:block;width:100px}
#svg_editor input.jGraduate_Ok{margin:0 0 5px 0}
#svg_editor .colorBox{float:left;height:16px;width:16px;border:1px solid #808080;cursor:pointer;margin:4px 4px 4px 30px}
#svg_editor .colorBox+label{float:left;margin-top:7px}
#svg_editor label.jGraduate_Form_Heading{color:#333;padding:2px;font-weight:bold;font-size:13px}
#svg_editor div.jGraduate_Form_Section{-moz-border-radius:5px;-webkit-border-radius:5px;padding:15px 5px 5px 5px;margin:5px 2px;width:100px;text-align:center;overflow:auto;background:#eee}
#svg_editor div.jGraduate_Form label{padding:0 2px;color:#333}
#svg_editor div.jGraduate_StopSection input[type=text],#svg_editor div.jGraduate_Slider input[type=text]{width:33px;color:#333}
#svg_editor div.jGraduate_LightBox{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;display:none}
#svg_editor div.jGraduate_stopPicker{position:absolute;display:none;background:white;padding:20px;border-radius:3px;width:530px;height:300px;box-shadow:0 5px 25px black}
#svg_editor .jGraduate_gradPick{width:526px}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider{line-height:160%}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child{position:absolute;right:10px;top:0;color:#999;font-weight:bold}
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child input{margin:0 3px 0 0;color:#333}
#svg_editor .jGraduate_gradPick .jGraduate_Form{float:left;width:270px;position:absolute;left:284px;width:266px;height:200px;top:195px;margin:-3px 3px 0 10px;line-height:200%}
#svg_editor .jGraduate_gradPick .jGraduate_Form label,#svg_editor .jGraduate_gradPick .jGraduate_Form input{width:auto;float:left}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label,#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input{width:auto;float:left;font-size:11px}
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr{float:none}
#svg_editor .jGraduate_gradPick .jGraduate_Form label{clear:left}
#svg_editor .jGraduate_gradPick .jGraduate_Points{position:static;float:left;margin:0;width:auto}
#svg_editor .jGraduate_Colorblocks{display:table;border-spacing:0 5px}
#svg_editor .jGraduate_colorblock{display:table-row}
#svg_editor .jGraduate_Colorblocks .jGraduate_colorblock>*{display:table-cell;vertical-align:middle;margin:0;float:none}
#svg_editor .jGraduate_gradPick .jGraduate_Form_Section{padding-top:9px}
#svg_editor .jGraduate_Slider{text-align:center;float:left;width:100%;position:relative;margin:5px 0}
#svg_editor .jGraduate_Slider .jGraduate_Form_Section{border:0;width:250px;padding:0 2px;overflow:visible}
#svg_editor .jGraduate_Slider label.prelabel{width:40px;text-align:left}
#svg_editor .jGraduate_SliderBar{width:140px;float:left;margin:0 5px;border:1px solid #BBB;height:20px;position:relative}
#svg_editor div.jGraduate_Slider input{margin-top:5px}
#svg_editor div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
#svg_editor .jPicker .Button .Ok,#svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{margin:0;position:absolute;bottom:15px;right:15px}
#svg_editor .jPicker .Button .Cancel,#svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:15px;left:15px}
h2.jGraduate_Title{display:none}
.jGraduate_Picker{position:absolute;padding:20px}
.jGraduate_tabs li{display:inline-block;padding:5px 10px;margin-right:5px;cursor:pointer}
li.jGraduate_tab_current{background:#fff;border-radius:3px 3px 0 0}
.jGraduate_colPick{display:none}
.jGraduate_gradPick{display:none;overflow:visible}
.jGraduate_tabs{position:relative;background-color:#ddd;padding:10px 10px 0 10px;margin:-20px -20px 20px -20px;border-radius:3px 3px 0 0}
div.jGraduate_Swatch{float:left;margin:0 15px 0 0}
div.jGraduate_GradContainer{border:solid #000 1px;background-image:url(../images/map-opacity.png);background-position:0 0;height:256px;width:256px;position:relative}
div.jGraduate_GradContainer div.grad_coord{background:rgba(0,0,0,0.8);border:2px solid white;border-radius:15px;-moz-border-radius:5px;width:14px;height:14px;position:absolute;margin:-7px -7px;top:0;left:0;text-align:center;font-size:8px;line-height:14px;color:white;text-decoration:none;cursor:pointer;-moz-user-select:none;-webkit-user-select:none}
.jGraduate_AlphaArrows{position:absolute;margin-top:-10px;margin-left:250.5px}
div.jGraduate_Opacity{border:2px inset #eee;margin-top:14px;background-color:black;background-image:url(../images/Maps.png);background-position:0 -2816px;height:20px;cursor:ew-resize}
div.jGraduate_StopSlider{margin:-10px 0 0 -10px;width:276px;overflow:visible;background:white;height:45px;cursor:pointer}
div.jGraduate_StopSection{width:120px;float:left}
div.jGraduate_StopSection.jGraduate_SpreadMethod{display:none}
input.jGraduate_Ok,input.jGraduate_Cancel{display:block;width:100px}
input.jGraduate_Ok{margin:0 0 5px 0}
.colorBox{float:left;height:16px;width:16px;border:1px solid #808080;cursor:pointer;margin:4px 4px 4px 30px}
.colorBox+label{float:left;margin-top:7px}
label.jGraduate_Form_Heading{color:#333;padding:2px;font-weight:bold;font-size:13px}
div.jGraduate_Form_Section{-moz-border-radius:5px;-webkit-border-radius:5px;padding:15px 5px 5px 5px;margin:5px 2px;width:100px;text-align:center;overflow:auto;background:#eee}
div.jGraduate_Form label{padding:0 2px;color:#333}
div.jGraduate_StopSection input[type=text],div.jGraduate_Slider input[type=text]{width:33px;color:#333}
div.jGraduate_LightBox{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;display:none}
div.jGraduate_stopPicker{position:absolute;display:none;background:white;padding:20px;border-radius:3px;width:530px;height:300px;box-shadow:0 5px 25px black}
.jGraduate_gradPick{width:526px}
.jGraduate_gradPick div.jGraduate_Slider{line-height:160%}
.jGraduate_gradPick div.jGraduate_Slider label:last-child{position:absolute;right:10px;top:0;color:#999;font-weight:bold}
.jGraduate_gradPick div.jGraduate_Slider label:last-child input{margin:0 3px 0 0;color:#333}
.jGraduate_gradPick .jGraduate_Form{float:left;width:270px;position:absolute;left:284px;width:266px;height:200px;top:195px;margin:-3px 3px 0 10px;line-height:200%}
.jGraduate_gradPick .jGraduate_Form label,.jGraduate_gradPick .jGraduate_Form input{width:auto;float:left}
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label,.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input{width:auto;float:left;font-size:11px}
.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr{float:none}
.jGraduate_gradPick .jGraduate_Form label{clear:left}
.jGraduate_gradPick .jGraduate_Points{position:static;float:left;margin:0;width:auto}
.jGraduate_Colorblocks{display:table;border-spacing:0 5px}
.jGraduate_colorblock{display:table-row}
.jGraduate_Colorblocks .jGraduate_colorblock>*{display:table-cell;vertical-align:middle;margin:0;float:none}
.jGraduate_gradPick .jGraduate_Form_Section{padding-top:9px}
.jGraduate_Slider{text-align:center;float:left;width:100%;position:relative;margin:5px 0}
.jGraduate_Slider .jGraduate_Form_Section{border:0;width:250px;padding:0 2px;overflow:visible}
.jGraduate_Slider label.prelabel{width:40px;text-align:left}
.jGraduate_SliderBar{width:140px;float:left;margin:0 5px;border:1px solid #BBB;height:20px;position:relative}
div.jGraduate_Slider input{margin-top:5px}
div.jGraduate_Slider img{top:0;left:0;position:absolute;cursor:ew-resize}
.jPicker .Button .Ok,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok{-webkit-appearance:none;margin:0;position:absolute;bottom:5px;right:5px}
.jPicker .Button .Cancel,.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel{margin:0;position:absolute;bottom:5px;left:5px}
body{background:#2f2f2c;font:13px/120% 'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;padding:0}
::selection{background:#000;color:#fff}
::-moz-selection{background:#000;color:#fff}
@ -107,26 +106,25 @@ html,body{overflow:hidden;width:100%;height:100%}
::-webkit-scrollbar-thumb{border-radius:10px;background:#666}
::-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 #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}
#svg_editor .menu_list .menu_item.push_button_pressed:before{content:'✔';position:absolute;display:block;left:7px;top:3px;width:20px;height:20px}
#svg_editor .menu_list .menu_item:hover,#svg_editor .menu_list .menu_item.push_button_pressed:hover{background:rgba(0,0,0,0.1);color:#000}
#svg_editor .menu_list .menu_item.disabled:hover,#svg_editor .menu_list .menu_item.push_button_pressed.disabled:hover{background:transparent;color:#333}
#svg_editor .menu_list .menu_item.push_button_pressed{background:transparent;border:0;width:auto;height:auto;margin:0}
#svg_editor .menu_list .menu_item span{display:block;position:absolute;right:10px;padding:5px;background:rgba(0,0,0,0.1);top:6px;height:10px;text-align:center;font-size:10px;line-height:120%}
#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}
#svgroot{-moz-user-select:none;-webkit-user-select:none;position:absolute;top:0;left:0}
#menu_bar{margin:0 0 0 50px}
#menu_bar.active .menu.open .menu_list{display:block}
.menu{position:relative;z-index:5;color:#333;display:inline-block}
.menu_title{cursor:pointer;display:inline-block;padding:7px 10px;z-index:10;color:#fff;position:relative;height:16px;vertical-align:top}
.touch .menu_title{padding:7px 17px;height:26px;line-height:26px}
.menu .menu_title:hover{background:rgba(255,255,255,0.1)}
.menu_list .separator{margin:5px 0;border-top:solid #ddd 1px}
.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 .menu_list{top:38px}
#menu_bar.active .menu.open .menu_title{background:white;color:#333}
.menu_list .menu_item{position:relative;overflow:hidden;line-height:22px;padding:5px 69px 5px 25px;cursor:default;color:#333}
.menu_list .menu_item.tool_button{background:transparent;border:0;margin:0;padding:5px 55px 5px 25px;height:auto;width:auto}
.menu_list .menu_item.push_button_pressed:before{content:'✔';position:absolute;display:block;left:7px;top:3px;width:20px;height:20px}
.menu_list .menu_item:hover,.menu_list .menu_item.push_button_pressed:hover{background:rgba(0,0,0,0.1);color:#000}
.menu_list .menu_item.disabled:hover,.menu_list .menu_item.push_button_pressed.disabled:hover{background:transparent;color:#333}
.menu_list .menu_item.push_button_pressed{background:transparent;border:0;width:auto;height:auto;margin:0}
.menu_list .menu_item span{display:block;position:absolute;right:10px;padding:5px;background:rgba(0,0,0,0.1);top:6px;height:10px;text-align:center;font-size:10px;line-height:120%}
#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:175px;border-top:solid #444 1px;border-right:solid #444 1px}
@ -139,12 +137,12 @@ html,body{overflow:hidden;width:100%;height:100%}
#ruler_x canvas{float:left}
#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}
#svg_editor #color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
.touch #svg_editor #color_tools{width:auto;height:auto}
div#palette_holder{display:block;overflow:hidden;height:31px;margin-top:10px;position:relative;z-index:2;float:left}
.touch div#palette_holder{height:40px;margin-top:0}
div#palette_holder #palette .palette_item:first-child{background:#fff}
div#palette_holder #palette .palette_item{cursor:pointer}
#color_tools{position:relative;width:48px;height:48px;margin:6px 6px 0 6px}
.touch #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}
@ -154,87 +152,84 @@ html,body{overflow:hidden;width:100%;height:100%}
.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{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #svg_editor #tool_eyedropper{margin-top:6px}
.touch #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 #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}
.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_switch{display:none}
#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}
#path_node_panel .tool_button img{position:absolute;left:5px;top:3px}
#color_tools #tool_fill .color_block:hover,#color_tools #tool_stroke .color_block:hover{border-color:#fff}
#color_tools #tool_fill .color_block>div{position:absolute;top:0;left:0}
.touch #color_tools #tool_fill .color_block>div{position:relative}
#color_tools #tool_fill .color_block #fill_bg,#color_tools #tool_stroke .color_block #stroke_bg{position:absolute;top:1px;left:1px;bottom:1px;right:1px;background:#fff}
.touch #color_tools #tool_fill .color_block #fill_bg,.touch #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}
.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: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}
#svg_editor #tools_left .tool_button{background:#2f2f2c}
#svg_editor #tools_left .tool_button.loaded{background:#ccc}
#svg_editor #tools_left .tool_button.loaded:hover{background:#fff}
#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}
#color_tools #cross:hover{opacity:1}
#color_tools #tool_stroke:hover #stroke_color:after{background:#fff}
#color_tools #tool_stroke .color_block{width:24px;height:24px;overflow:hidden;border:solid #ccc 1px}
.touch #color_tools #tool_stroke .color_block{width:36px;height:36px}
#color_tools #tool_stroke .color_block>div{position:absolute;bottom:0;right:0}
.touch #color_tools #tool_stroke .color_block>div{position:relative}
#color_tools .icon_label{padding:0;width:24px;height:100%;cursor:pointer;position:absolute}
#linkLabel>svg{height:20px;padding-top:4px}
div#palette{float:left;width:810px;height:16px}
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 div#workarea{top:40px}
div.palette_item{height:16px;width:16px;float:left}
.touch div.palette_item{height:30px;border-top:solid #2f2f2c 5px;border-bottom:solid #2f2f2c 5px;width:19px;float:left}
.menu .menu_list{display:none;position:absolute}
.tool_button:hover,.push_button:hover,.buttonup:hover,.buttondown,.tool_button_current,.push_button_pressed{background-color:#fff}
.tool_button.disabled,.tool_button.disabled:hover{opacity:.3;background-color:#aaa}
#tools_left .tool_button{background:#2f2f2c;position:relative}
#tools_left .tool_button.loaded{background:#ccc}
#tools_left .tool_button.loaded:hover{background:#fff}
#tools_left .tool_button:after,#tools_left .tool_button_current:after{position:absolute;content:'';border:solid #2f2f2c 1px;top:0;left:0;width:27px;height:27px;z-index:0}
#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:160px;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 10px}
.touch #svg_editor #tools_top{top:40px}
#svg_editor label{display:block;color:#999}
#tools_left .tool_button_current{background-color:#0cf}
#main_icon span{position:absolute;width:100%;height:100%;display:block;z-index:2}
#tools_top{position:absolute;width:160px;right:0;top:20px;border-bottom:0;overflow:visible;padding:0 0 0 10px}
.touch #tools_top{top:30px}
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 #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}
#svg_editor #font_family_dropdown-list{border-radius:3px;box-shadow:0 5px 10px #000}
#svg_editor #font_family_dropdown-list li{cursor:pointer}
#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 #color_picker input[type=text],#color_picker #svg_editor input[type=number]{width:30px;background:#fff}
#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}
#svg_editor input[type=submit],#svg_editor input[type=button],button{background:#2c7bb3;color:#fff;border-radius:2px;padding:5px 10px;border:0;line-height:140%;border-bottom:solid transparent 1px}
#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 #tools_left{position:absolute;border-right:0;width:50px;top:30px;left:0;background:#2f2f2c;z-index:4}
#tools_top #marker_panel *{float:left}
#tools_top #marker_panel h4{float:none}
#tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
#font_family_dropdown-list{border-radius:3px;box-shadow:0 5px 10px #000}
#font_family_dropdown-list li{cursor:pointer}
#tools_top #marker_panel .dropdown button{margin-top:2px}
#tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
#tools_top #marker_panel .dropdown .icon_label img{float:none}
#color_picker input[type=text],#color_picker input[type=number]{width:30px;background:#fff}
.dropdown_set input[type=text],.dropdown_set input[type=number]{width:50px}
input[type=text].wide,input[type=number].wide{width:110px}
input[type=text].tuco,input[type=number].tuco{width:150px}
input[type=submit],input[type=button],button{background:#4f80ff;color:#fff;border-radius:3px;padding:7px 17px;border:0;line-height:140%;font-size:14px;font-weight:bold;font-family:sans-serif}
input[type=submit]:hover,button:hover{box-shadow:inset 0 3px 10px rgba(255,255,255,0.1),inset 0 -3px 10px rgba(0,0,0,0.2)}
input[type=submit]:hover,button:hover{background:#2f84c1}
input[type=submit]:active,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}
#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}
#workarea.wireframe #canvasBackground>rect{fill:#FFF!important}
#workarea #canvasBackground>rect{stroke:transparent!important}
.context_panel{display:none}
#canvas_panel{display:block}
#svg_editor #multiselected_panel .selected_tool{vertical-align:12px}
#multiselected_panel .selected_tool{vertical-align:12px}
#cur_context_panel{position:absolute;top:47px;left:68px;line-height:22px;overflow:auto;border-bottom:0;border-right:0;padding-left:5px;font-size:12px;background:black;color:#999;opacity:.5;padding:0 10px;border-radius:0 10px 10px 0}
#svg_editor #cur_context_panel a{float:none;text-decoration:none;color:#fff}
#svg_editor #cur_context_panel a:hover{text-decoration:underline}
#svg_editor #tools_left .tool_button,#svg_editor #tools_left .tool_button_current{position:relative;z-index:11}
#svg_editor .flyout_arrow_horiz{position:absolute;bottom:-1px;right:0;z-index:10}
span.zoom_tool{line-height:16px;background:#ccc;display:block;width:18px;height:18px;margin-top:2px;float:left}
span.zoom_tool img{vertical-align:top}
#zoom_panel{margin-top:9px;right:200px;position:absolute}
#cur_context_panel a{float:none;text-decoration:none;color:#fff}
#cur_context_panel a:hover{text-decoration:underline}
#tools_left .tool_button,#tools_left .tool_button_current{position:relative;z-index:11}
.flyout_arrow_horiz{position:absolute;bottom:-1px;right:0;z-index:10}
.dropdown{position:relative;float:left}
#svg_editor .dropdown button{width:21px;height:22px;padding:0 3px 0 3px;border:0;background-color:#555;border-radius:0 2px 2px 0;margin-left:-1px;position:relative}
#svg_editor .dropdown button:hover{background-color:#666}
#svg_editor .dropdown button:after{content:'';position:absolute;border:solid transparent 4px;border-top-color:#999;top:9px;left:6px}
.dropdown button{width:21px;height:22px;padding:0 3px 0 3px;border:0;background-color:#555;border-radius:0 2px 2px 0;margin-left:-1px;position:relative}
.dropdown button:hover{background-color:#666}
.dropdown button:after{content:'';position:absolute;border:solid transparent 4px;border-top-color:#999;top:9px;left:6px}
.dropdown button.down{border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #fff;border-bottom:1px solid #fff;background-color:#b0b0b0}
.dropdown ul{list-style:none;position:absolute;margin:0;padding:0;left:-80px;top:26px;z-index:4;display:none}
.dropup ul{top:auto;bottom:26px;border-radius:3px;box-shadow:0 5px 10px #000}
@ -248,46 +243,51 @@ span.zoom_tool img{vertical-align:top}
.dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff}
#font_family_dropdown-list li{font-size:1.4em}
#font_family{margin-left:5px;margin-right:0}
#svg_editor .tool_button,#svg_editor .push_button,#svg_editor .tool_button_current,#svg_editor .push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#svg_editor #main_menu li#tool_open,#svg_editor #main_menu li#tool_import{position:relative;overflow:hidden}
.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
#tool_image{overflow:hidden}
#tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
#svg_editor .disabled{opacity:.5;cursor:default}
#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}
.disabled{opacity:.5;cursor:default}
.width_label{padding-right:5px}
#tool_bold,#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}
#tool_bold:hover,#tool_italic:hover{color:#fff}
#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}
#tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
#tool_italic{font-weight:normal;font-style:italic}
#url_notice{padding-top:4px;display:none}
#svg_editor #color_picker{position:absolute;display:none;background:#fff;height:350px;border-radius:3px;z-index:5;box-shadow:0 5px 10px #000;width:530px}
#svg_editor .tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
#svg_editor .tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
#svg_editor .tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
#svg_editor #tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible}
#svg_editor #tools_bottom_1{width:115px;float:left}
#svg_editor #tools_bottom_2{position:relative;float:left;margin-top:5px}
#color_picker{position:absolute;display:none;background:#fff;height:350px;border-radius:3px;z-index:5;box-shadow:0 5px 10px #000;width:530px}
.tools_flyout{position:absolute;display:none;cursor:pointer;width:385px;z-index:10;left:47px!important;height:324px;background:#fff;border-radius:5px;box-shadow:0 5px 10px rgba(0,0,0,0.5)}
.tools_flyout_v{position:absolute;display:none;cursor:pointer;width:30px}
.tools_flyout .tool_button{float:left;background-color:#fff;height:24px;width:24px}
#tools_bottom{position:absolute;left:50px;right:0;bottom:0;height:40px;overflow:visible}
#tools_bottom_1{width:115px;float:left}
#tools_bottom_2{position:relative;float:left;margin-top:5px}
#tools_bottom input[type=text]{width:3.2em}
#svg_editor #tools_top h4{color:#fff;font-weight:normal;margin:0;padding:10px 0 5px 0}
#tools_top h4{color:#fff;font-weight:normal;margin:0;padding:10px 0 5px 0}
#tools_top .dropdown .icon_label{border:1px solid transparent;height:auto}
#svg_editor .draginput_cell{float:left;height:26px;border:solid #3f3f3c 10px;outline:solid #2f2f2c 1px;background-color:#ddd;cursor:pointer}
#svg_editor .align_buttons .draginput_cell:nth-child(1){border-radius:3px 0 0 0}
#svg_editor .align_buttons .draginput_cell:nth-child(3){border-radius:0 3px 0 0}
#svg_editor .align_buttons .draginput_cell:nth-child(4){border-radius:0 0 0 3px}
#svg_editor .align_buttons .draginput_cell:nth-child(6){border-radius:0 0 3px 0}
#tools_top.multiselected #align_tools{display:none}
#tools_top.multiselected #multiselected_panel{display:block!important}
#tools_top.multiselected #multiselected_panel .hidable{display:none}
.draginput_cell{float:left;height:26px;height:26px;border:solid #3f3f3c 10px;outline:solid #2f2f2c 1px;background:#ddd;cursor:pointer;position:relative}
.draginput_cell:hover{background:#fff}
.draginput_cell:after{content:'';position:absolute;top:0;left:0;border:solid #3f3f3c 1px;height:26px;width:26px;z-index:0}
.align_buttons .draginput_cell:nth-child(1){border-radius:3px 0 0 0}
.align_buttons .draginput_cell:nth-child(3){border-radius:0 3px 0 0}
.align_buttons .draginput_cell:nth-child(4){border-radius:0 0 0 3px}
.align_buttons .draginput_cell:nth-child(6){border-radius:0 0 3px 0}
.align_buttons .push_button{display:block;float:left}
#option_lists ul{display:none;position:absolute;height:auto;z-index:3;margin:0;list-style:none;padding-left:0}
#option_lists .optcols2{width:70px;margin-left:-15px}
#option_lists .optcols3{width:192px;margin-left:-105px;margin-top:-25px;background:#fff;padding:5px;box-shadow:0 5px 10px #000;border-radius:3px}
#option_lists .optcols3:after{content:'';display:block;position:absolute;top:-10px;right:70px;border:solid transparent 5px;border-bottom-color:#fff}
#svg_editor #option_lists .tool_button,#svg_editor #option_lists .push_button,#svg_editor #option_lists .tool_button_current,#svg_editor #option_lists .push_button_pressed{border:0;background:transparent}
#svg_editor #option_lists .tool_button:hover{background:#ddd}
#svg_editor #option_lists ul li.current{background-color:#f4e284}
#option_lists .tool_button,#option_lists .push_button,#option_lists .tool_button_current,#option_lists .push_button_pressed{border:0;background:transparent}
#option_lists .tool_button:hover{background:#ddd}
#option_lists ul li.current{background-color:#f4e284}
#option_lists .optcols4{width:130px;margin-left:-44px}
#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 #copyright{text-align:right;padding-right:.3em}
ul li.current{background-color:#f4e284}
#option_lists ul li{margin:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
#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}
#svg_source_editor #svg_source_container{position:absolute;top:30px;left:30px;right:30px;bottom:30px;background-color:#fff;border-radius:3px;opacity:1.0;text-align:center;z-index:6;padding:20px 0}
@ -297,7 +297,7 @@ span.zoom_tool img{vertical-align:top}
#svg_prefs_container div.color_block{float:left;margin:2px;padding:20px}
#svg_prefs_container div.cur_background{box-shadow:0 0 8px rgba(0,50,255,1)}
#background_img{position:absolute;top:0;left:0;text-align:left}
#svg_editor button.cancel,#svg_editor input.Cancel,#svg_editor input.cancel,#svg_editor input.jGraduate_Cancel,button.cancel{-webkit-appearance:none;background-color:#999;box-shadow:0 0 1px rgba(0,0,0,0.5);margin:0}
button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-webkit-appearance:none;background-color:#999;box-shadow:0 0 1px rgba(0,0,0,0.5);margin:0}
#shape_buttons{overflow:auto;top:0;bottom:0;left:110px;right:0;position:absolute;vertical-align:top}
#shape_cats{min-width:110px;display:block;position:absolute;left:0;top:0;height:300px;background:#eee;border-radius:3px 0 0 3px;z-index:2}
#shape_cats>div{line-height:1em;padding:0 .5em;border-bottom:1px solid #ddd;background:#e8e8e8;color:#444;height:26px;line-height:26px}
@ -334,7 +334,7 @@ span.zoom_tool img{vertical-align:top}
.ui-slider-handle{box-shadow:0 3px 3px rgba(0,0,0,0.3);border-radius:30px;background:#fff;background-image:-ms-linear-gradient(top,#ccc 0,#fff 100%);background-image:-moz-linear-gradient(top,#ccc 0,#fff 100%);background-image:-o-linear-gradient(top,#ccc 0,#fff 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ccc),color-stop(1,#fff));background-image:-webkit-linear-gradient(top,#ccc 0,#fff 100%);background-image:linear-gradient(top,#ccc 0,#fff 100%)}
.ui-slider-handle:focus{outline:0}
#shape_buttons{background:#fff;border-radius:0 3px 3px 0;padding:10px}
#svg_editor .tools_flyout .tool_button,#svg_editor .tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
.tools_flyout .tool_button,.tools_flyout .tool_flyout{background:#fff;width:40px;height:40px;margin:5px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;border-width:0}
.contextMenu{position:absolute;z-index:99999;border:solid 1px rgba(0,0,0,.33);background:rgba(255,255,255,.95);padding:5px 0;margin:0;display:none;font:12px/15px Lucida Sans,Helvetica,Verdana,sans-serif;border-radius:5px;-moz-border-radius:5px;-moz-box-shadow:2px 5px 10px rgba(0,0,0,.3);-webkit-box-shadow:2px 5px 10px rgba(0,0,0,.3);box-shadow:2px 5px 10px rgba(0,0,0,.3)}
.contextMenu LI{list-style:none;padding:0;margin:0}
.contextMenu .shortcut{width:115px;text-align:right;float:right}
@ -365,34 +365,43 @@ span.zoom_tool img{vertical-align:top}
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
#svg_editor #group_title{display:none}
#group_title{display:none}
#base_unit_container{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}
#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:14px;color:white;font-weight:bold;font-family:sans-serif}
#svg_editor .draginput label#resolution_label,#svg_editor .draginput label#seg_type_label{font:bold 12px/110% sans-serif;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
#svg_editor .draginput label#seg_type_label{margin-top:40px}
#svg_editor .draginput label#seg_type_label .caret{top:66%}
#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:#fff;font-size:16px;top:0;width:30px;left:-50px;padding:0 5px;color:#333;z-index:10;font-family:sans-serif;font-weight:bold;text-align:right;padding-right:10px;height:20px;line-height:20px;letter-spacing:-1px}
.touch #svg_editor .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-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}
.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}
.draginput .caret{border:solid transparent 5px;border-top-color:#999;position:absolute;width:0;height:0;right:5px;margin-top:-2px;top:50%}
.draginput label{margin:28px 10px 0 5px;font-size:14px;color:white;font-weight:bold;font-family:sans-serif}
.draginput label#resolution_label,.draginput label#seg_type_label{font:bold 12px/110% sans-serif;position:absolute;left:auto;right:10px;z-index:0;text-align:right}
.draginput label#seg_type_label{margin-top:40px}
.draginput label#seg_type_label .caret{top:66%}
.draginput label#resolution_label .pull{position:relative;left:-15px}
.draginput label#resolution_label span{right:-13px;left:auto;font-size:16px;top:2px;font-weight:bold;color:white}
.touch .draginput.active:after{content:attr(data-value);display:block;position:absolute;background:#fff;font-size:16px;top:0;width:30px;left:-50px;padding:0 5px;color:#333;z-index:10;font-family:sans-serif;font-weight:bold;text-align:right;padding-right:10px;height:20px;line-height:20px;letter-spacing:-1px}
.touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff}
.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}
.draginput input:active{cursor:url(images/dragging.png),move;cursor:-webkit-dragging;cursor:-moz-dragging}
.draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
.draginput.error{background:#900}
.draginput.error input{color:#fff}
.draginput.stroke_tool{text-align:center}
.draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1}
.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}
.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}
.draginput input:focus{background:#4f80ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #4f80ff}
.draginput input:focus+span{z-index:10;color:#fff}
#zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0}
#zoom_panel{padding:9px 0;right:175px;position:absolute}
#zoom_label img{width:16px;height:16px}
#zoomLabel{width:16px;height:16px;cursor:pointer;background:#ccc}
#zoomLabel:after{content:'';position:absolute;border-left:solid #2f2f2c 1px;left:0;height:16px}
#zoom_label input{color:#ccc;font-size:13px;height:auto;width:auto;padding:0;cursor:default;position:static}
#zoom_label span{top:0;left:0}
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[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;overflow:hidden}
#color_canvas_tools{display:block}
#tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px}
#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #4f80ff 3px;position:absolute;margin:0 0 0 23px;-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}

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

File diff suppressed because it is too large Load Diff

136
method-draw/taphold.js Normal file
View File

@ -0,0 +1,136 @@
/**
* Copyright (c) 2011 Zauber S.A. <http://www.zaubersoftware.com/>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @author Guido Marucci Blas - guido@zaubersoftware.com
* @description Adds a handler for a custom event 'taphold' that handles a
* tap and hold on touch interfaces.
*/
(function($) {
var TAP_AND_HOLD_TRIGGER_TIMER = 1000;
var MAX_DISTANCE_ALLOWED_IN_TAP_AND_HOLD_EVENT = 5;
var TOUCHSTART = "touchstart";
var TOUCHEND = "touchend";
var TOUCHMOVE = "touchmove";
// For debugging only
// var TOUCHSTART = "mousedown";
// var TOUCHEND = "mouseup";
// var TOUCHMOVE = "mousemove";
var tapAndHoldTimer = null;
function calculateEuclideanDistance(x1, y1, x2, y2) {
var diffX = (x2 - x1);
var diffY = (y2 - y1);
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
function onTouchStart(event) {
var e = event.originalEvent;
// Only start detector if and only if one finger is over the widget
if (!e.touches || (e.targetTouches.length === 1 && e.touches.length === 1)) {
startTapAndHoldDetector.call(this, event)
var element = $(this);
element.bind(TOUCHMOVE, onTouchMove);
element.bind(TOUCHEND, onTouchEnd);
} else {
stopTapAndHoldDetector.call(this);
}
};
function onTouchMove(event) {
if (tapAndHoldTimer == null) {
return;
}
var e = event.originalEvent;
var x = (e.changedTouches) ? e.changedTouches[0].pageX: e.pageX;
var y = (e.changedTouches) ? e.changedTouches[0].pageY: e.pageY;
var tapAndHoldPoint = $(this).data("taphold.point");
var euclideanDistance = calculateEuclideanDistance(tapAndHoldPoint.x, tapAndHoldPoint.y, x, y);
if (euclideanDistance > MAX_DISTANCE_ALLOWED_IN_TAP_AND_HOLD_EVENT) {
stopTapAndHoldDetector.call(this);
}
};
function onTouchEnd(event) {
stopTapAndHoldDetector.call(this);
};
function onTapAndHold(event) {
clear.call(this);
$(this).data("taphold.handler").call(this, event);
};
function clear() {
tapAndHoldTimer = null;
$(this).unbind(TOUCHMOVE, onTouchMove);
$(this).unbind(TOUCHEND, onTouchEnd);
};
function startTapAndHoldDetector(event) {
if (tapAndHoldTimer != null) {
return;
}
var self = this;
tapAndHoldTimer = setTimeout(function(){
onTapAndHold.call(self, event)
}, TAP_AND_HOLD_TRIGGER_TIMER);
// Stores tap x & y
var e = event.originalEvent;
var tapAndHoldPoint = {};
tapAndHoldPoint.x = (e.changedTouches) ? e.changedTouches[0].pageX: e.pageX;
tapAndHoldPoint.y = (e.changedTouches) ? e.changedTouches[0].pageY: e.pageY;
$(this).data("taphold.point", tapAndHoldPoint);
};
function stopTapAndHoldDetector() {
clearTimeout(tapAndHoldTimer);
clear.call(this);
};
$.event.special["taphold"] = {
setup: function() {
},
add: function(handleObj) {
$(this).data("taphold.handler", handleObj.handler);
if (handleObj.data) {
$(this).bind(TOUCHSTART, handleObj.data, onTouchStart);
} else {
$(this).bind(TOUCHSTART, onTouchStart);
}
},
remove: function(handleObj) {
stopTapAndHoldDetector.call(this);
if (handleObj.data) {
$(this).unbind(TOUCHSTART, handleObj.data, onTouchStart);
} else {
$(this).unbind(TOUCHSTART, onTouchStart);
}
},
teardown: function() {
}
};
})(jQuery);

563
method-draw/temp.css
View File

File diff suppressed because it is too large Load Diff

2
test/contextmenu_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script src='../editor/assets/jquery.js'></script>
<script>
// Mock for browser.js
window.svgedit = {};

2
test/draw_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script type='text/javascript' src='../editor/jquery.js'></script>
<script type='text/javascript' src='../editor/assets/jquery.js'></script>
<script type='text/javascript' src='../editor/browser.js'></script>
<script type='text/javascript' src='../editor/svgutils.js'></script>
<script type='text/javascript' src='../editor/draw.js'></script>

2
test/history_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script src='../editor/assets/jquery.js'></script>
<script type='text/javascript' src='../editor/history.js'></script>
<script type='text/javascript' src='qunit/qunit.js'></script>
<script type='text/javascript'>

2
test/math_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script src='../editor/assets/jquery.js'></script>
<script type='text/javascript' src='../editor/math.js'></script>
<script type='text/javascript' src='qunit/qunit.js'></script>
<script type='text/javascript'>

2
test/path_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script type='text/javascript' src='../editor/jquery.js'></script>
<script type='text/javascript' src='../editor/assets/jquery.js'></script>
<script type='text/javascript' src='../editor/path.js'></script>
<script type='text/javascript' src='qunit/qunit.js'></script>
<script type='text/javascript'>

2
test/select_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script src='../editor/assets/jquery.js'></script>
<script type='text/javascript' src='../editor/browser.js'></script>
<script type='text/javascript' src='../editor/math.js'></script>
<script type='text/javascript' src='../editor/svgutils.js'></script>

2
test/svgtransformlist_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script src='../editor/assets/jquery.js'></script>
<script>
// Mock for browser.js
window.svgedit = {};

2
test/svgutils_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script src='../editor/assets/jquery.js'></script>
<!-- svgutils.js depends on these two... mock out? -->
<script type='text/javascript' src='../editor/browser.js'></script>
<script type='text/javascript' src='../editor/svgtransformlist.js'></script>

2
test/test1.html
View File

@ -1,7 +1,7 @@
<html>
<head>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css"/>
<script src="../editor/jquery.js"></script>
<script src="../editor/assets/jquery.js"></script>
<script type="text/javascript" src="../editor/jquerybbq/jquery.bbq.min.js"></script>
<script type="text/javascript" src="../editor/jquery-ui/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="../editor/svgicons/jquery.svgicons.js"></script>

2
test/units_test.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script type='text/javascript' src='../editor/jquery.js'></script>
<script type='text/javascript' src='../editor/assets/jquery.js'></script>
<script type='text/javascript' src='../editor/units.js'></script>
<script type='text/javascript' src='qunit/qunit.js'></script>
<script type='text/javascript'>