changes
Mark MacKay
parent
2f1793aeb2
commit
f0421482a3
|
|
@ -51,24 +51,20 @@ html, body {
|
|||
#svgroot {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#svg_editor {
|
||||
background: #2f2f2c;
|
||||
}
|
||||
|
||||
|
||||
#svgcanvas {
|
||||
line-height: normal;
|
||||
display: inline-block;
|
||||
background-color: #A0A0A0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: #3F3F3C;
|
||||
}
|
||||
|
|
@ -367,7 +363,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
|
|||
z-index: 4;
|
||||
}
|
||||
|
||||
#workarea.wireframe #svgcontent * {
|
||||
#svg_editor.wireframe #workarea #svgcontent * {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 1px;
|
||||
|
|
@ -379,12 +375,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
|
|||
filter: none;
|
||||
}
|
||||
|
||||
#workarea.wireframe #svgcontent text {
|
||||
#svg_editor.wireframe #workarea #svgcontent text {
|
||||
fill: #000;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#workarea.wireframe #canvasBackground > rect {
|
||||
#svg_editor.wireframe #workarea #canvasBackground > rect {
|
||||
fill: #FFF !important;
|
||||
}
|
||||
|
||||
|
|
@ -925,7 +921,7 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
|
|||
color: #ccc;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
position: static;
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
<div class="menu">
|
||||
<div class="menu_title">View</div>
|
||||
<div class="menu_list" id="view_menu">
|
||||
<div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
|
||||
<div class="menu_item push_button_pressed" id="tool_rulers">View Rulers <span class="shortcut">⇧R</span></div>
|
||||
<div class="menu_item" id="tool_wireframe">View Wireframe</div>
|
||||
<div class="menu_item" id="tool_snap">Snap to Grid</div>
|
||||
<div class="separator"></div>
|
||||
|
|
@ -126,12 +126,12 @@
|
|||
<h4 class="clearfix">Canvas</h4>
|
||||
|
||||
<label data-title="Change canvas width">
|
||||
<input size="3" id="canvas_width" type="text" pattern="[0-9]*" value="800" />
|
||||
<input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
|
||||
<span class="icon_label">Width</span>
|
||||
</label>
|
||||
|
||||
<label data-title="Change canvas height">
|
||||
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" value="600" />
|
||||
<input id="canvas_height" type="text" pattern="[0-9]*" value="600" />
|
||||
<span class="icon_label">Height</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -167,19 +167,19 @@
|
|||
<div id="rect_panel" class="context_panel">
|
||||
<h4 class="clearfix">Rectangle</h4>
|
||||
<label>
|
||||
<input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
|
||||
<input id="rect_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*" />
|
||||
<span>X</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="rect_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
|
||||
<input id="rect_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" pattern="[0-9]*" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
<label id="rect_width_tool attr_changer" data-title="Change rectangle width">
|
||||
<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="text" pattern="[0-9]*" />
|
||||
<input id="rect_width" class="attr_changer" 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">
|
||||
<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="text" pattern="[0-9]*" />
|
||||
<input id="rect_height" class="attr_changer" data-attr="height" type="text" pattern="[0-9]*" />
|
||||
<span class="icon_label">Height</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -187,11 +187,11 @@
|
|||
<div id="path_panel" class="context_panel clearfix">
|
||||
<h4 class="clearfix">Path</h4>
|
||||
<label>
|
||||
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
|
||||
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="x" pattern="[0-9]*" />
|
||||
<span>X</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y" pattern="[0-9]*" />
|
||||
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" data-attr="y" pattern="[0-9]*" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -199,19 +199,19 @@
|
|||
<div id="image_panel" class="context_panel clearfix">
|
||||
<h4>Image</h4>
|
||||
<label>
|
||||
<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*"/>
|
||||
<input id="image_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*"/>
|
||||
<span>X</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="image_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y" pattern="[0-9]*"/>
|
||||
<input id="image_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" 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]*" />
|
||||
<input id="image_width" class="attr_changer" data-title="Change image width" data-attr="width" pattern="[0-9]*" />
|
||||
<span class="icon_label">Width</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="image_height" class="attr_changer" data-title="Change image height" size="3" data-attr="height" pattern="[0-9]*" />
|
||||
<input id="image_height" class="attr_changer" data-title="Change image height" data-attr="height" pattern="[0-9]*" />
|
||||
<span class="icon_label">Height</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -220,34 +220,34 @@
|
|||
<h4>Circle</h4>
|
||||
<label id="tool_circle_cx">
|
||||
<span>Center X</span>
|
||||
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
|
||||
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" data-attr="cx"/>
|
||||
</label>
|
||||
<label id="tool_circle_cy">
|
||||
<span>Center Y</span>
|
||||
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
|
||||
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" data-attr="cy"/>
|
||||
</label>
|
||||
<label id="tool_circle_r">
|
||||
<span>Radius</span>
|
||||
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
|
||||
<input id="circle_r" class="attr_changer" title="Change circle's radius" data-attr="r"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="ellipse_panel" class="context_panel clearfix">
|
||||
<h4>Ellipse</h4>
|
||||
<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]*" />
|
||||
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="cx" pattern="[0-9]*" />
|
||||
<span>X</span>
|
||||
</label>
|
||||
<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]*" />
|
||||
<input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" data-attr="cy" pattern="[0-9]*" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
<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]*" />
|
||||
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" data-attr="rx" pattern="[0-9]*" />
|
||||
<span>Radius X</span>
|
||||
</label>
|
||||
<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]*" />
|
||||
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" data-attr="ry" pattern="[0-9]*" />
|
||||
<span>Radius Y</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -255,19 +255,19 @@
|
|||
<div id="line_panel" class="context_panel clearfix">
|
||||
<h4>Line</h4>
|
||||
<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]*" />
|
||||
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" data-attr="x1" pattern="[0-9]*" />
|
||||
<span>Start X</span>
|
||||
</label>
|
||||
<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]*" />
|
||||
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" data-attr="y1" pattern="[0-9]*" />
|
||||
<span>Start Y</span>
|
||||
</label>
|
||||
<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]*" />
|
||||
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" data-attr="x2" pattern="[0-9]*" />
|
||||
<span>End X</span>
|
||||
</label>
|
||||
<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]*" />
|
||||
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" data-attr="y2" pattern="[0-9]*" />
|
||||
<span>End Y</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -279,11 +279,11 @@
|
|||
<input id="text" type="text"/>
|
||||
</label>
|
||||
<label>
|
||||
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
|
||||
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" data-attr="x" pattern="[0-9]*" />
|
||||
<span>X</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
|
||||
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" data-attr="y" pattern="[0-9]*" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
<div class="toolset draginput select twocol" id="tool_font_family">
|
||||
|
|
@ -299,7 +299,7 @@
|
|||
</div>
|
||||
|
||||
<label id="tool_font_size" data-title="Change Font Size">
|
||||
<input id="font_size" size="3" value="0" />
|
||||
<input id="font_size" value="0" />
|
||||
<span id="font_sizeLabel" class="icon_label">Font Size</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -315,11 +315,11 @@
|
|||
<div id="g_panel" class="context_panel clearfix">
|
||||
<h4>Group</h4>
|
||||
<label>
|
||||
<input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
|
||||
<input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
|
||||
<span>X</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" size="3" data-attr="y" pattern="[0-9]*" />
|
||||
<input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -328,11 +328,11 @@
|
|||
<h4>Edit Path</h4>
|
||||
|
||||
<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" />
|
||||
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" data-attr="x" />
|
||||
<span>X</span>
|
||||
</label>
|
||||
<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" />
|
||||
<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" data-attr="y" />
|
||||
<span>Y</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
</label>
|
||||
|
||||
<label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
|
||||
<input id="group_opacity" class="attr_changer" data-attr="opacity" size="3" value="100" step="5" min="0" max="100" />
|
||||
<input id="group_opacity" class="attr_changer" data-attr="opacity" value="100" step="5" min="0" max="100" />
|
||||
<span id="group_opacityLabel" class="icon_label">Opacity</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -384,7 +384,7 @@
|
|||
</div>
|
||||
|
||||
<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
|
||||
<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
|
||||
<input id="rect_rx" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
|
||||
<span class="icon_label">Roundness</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -612,7 +612,7 @@
|
|||
<option value="1600">1600%</option>
|
||||
</select>
|
||||
<div class="caret"></div>
|
||||
<input id="zoom" size="3" value="100%" type="text" readonly="readonly" />
|
||||
<input id="zoom" value="100%" type="text" readonly="readonly" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -625,7 +625,7 @@
|
|||
</div> <!-- svg_editor -->
|
||||
|
||||
<div id="svg_source_editor">
|
||||
<div id="svg_source_overlay"></div>
|
||||
<div id="svg_source_overlay" class="overlay"></div>
|
||||
<div id="svg_source_container">
|
||||
<div id="save_output_btns">
|
||||
<p id="copy_save_note">Copy the contents of this box into a text editor, then save the file with a .svg extension.</p>
|
||||
|
|
@ -703,23 +703,21 @@
|
|||
<script type="text/javascript" src="js/PaintBox.js"></script>
|
||||
<script type="text/javascript" src="js/Palette.js"></script>
|
||||
<script type="text/javascript" src="js/Zoom.js"></script>
|
||||
<script type="text/javascript" src="js/Modal.js"></script>
|
||||
<script type="text/javascript" src="js/Shapelib.js"></script>
|
||||
<script type="text/javascript" src="js/start.js"></script>
|
||||
<script type="text/javascript" src="js/fonts.js"></script>
|
||||
<script type="text/javascript" src="js/dialog.js"></script>
|
||||
<script type="text/javascript" src="js/contextChanged.js"></script>
|
||||
<script type="text/javascript" src="js/exportHandler.js"></script>
|
||||
<script type="text/javascript" src="js/elementTransition.js"></script>
|
||||
<script type="text/javascript" src="js/bindCanvas.js"></script>
|
||||
<script type="text/javascript" src="js/lib/contextmenu.js"></script>
|
||||
<script type="text/javascript" src="js/lib/jpicker.min.js"></script>
|
||||
<script type="text/javascript" src="js/lib/mousewheel.js"></script>
|
||||
<script type="text/javascript" src="js/eyedropper.js"></script>
|
||||
<script type="text/javascript" src="js/grid.js"></script>
|
||||
<!--<script type="text/javascript" src="js/grid.js"></script>-->
|
||||
<script type="text/javascript" src="js/lib/requestanimationframe.js"></script>
|
||||
<script type="text/javascript" src="js/lib/taphold.js"></script>
|
||||
<script type="text/javascript" src="js/lib/filesaver.js"></script>
|
||||
<script type="text/javascript" src="js/paste.js"></script>
|
||||
<script type="text/javascript" src="js/start.js"></script>
|
||||
|
||||
|
||||
<!-- endbuild -->
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,57 @@ MD.Canvas = function(){
|
|||
const el = document.getElementById("svgcanvas");
|
||||
var workarea = document.getElementById("workarea");
|
||||
|
||||
$('#resolution').change(function(){
|
||||
var w = $('#canvas_width')[0];
|
||||
var h = $('#canvas_height')[0];
|
||||
if(!this.selectedIndex) {
|
||||
$('#resolution_label').html("Custom");
|
||||
w.removeAttribute("readonly");
|
||||
w.focus();
|
||||
w.select();
|
||||
if(w.value == 'fit') {
|
||||
w.value = 100
|
||||
h.value = 100
|
||||
}
|
||||
} else if(this.value == 'content') {
|
||||
w.value = 'fit'
|
||||
h.value = 'fit'
|
||||
changeSize();
|
||||
var res = svgCanvas.getResolution()
|
||||
w.value = res.w
|
||||
h.value = res.h
|
||||
|
||||
} else {
|
||||
var dims = this.value.split('x');
|
||||
dims[0] = parseInt(dims[0]);
|
||||
dims[1] = parseInt(dims[1]);
|
||||
var diff_w = dims[0] - w.value;
|
||||
var diff_h = dims[1] - h.value;
|
||||
//animate
|
||||
var start = Date.now();
|
||||
var duration = 1000;
|
||||
var animateCanvasSize = function(timestamp) {
|
||||
var progress = Date.now() - start;
|
||||
var tick = progress / duration;
|
||||
tick = (Math.pow((tick-1), 3) +1);
|
||||
w.value = (dims[0] - diff_w + (tick*diff_w)).toFixed(0);
|
||||
h.value = (dims[1] - diff_h + (tick*diff_h)).toFixed(0);
|
||||
changeSize();
|
||||
if (tick >= 1) {
|
||||
var res = svgCanvas.getResolution()
|
||||
$('#canvas_width').val(res.w.toFixed())
|
||||
$('#canvas_height').val(res.h.toFixed())
|
||||
$('#resolution_label').html("<div class='pull'>" + res.w + "<span>×</span></br>" + res.h + "</div>");
|
||||
}
|
||||
else {
|
||||
requestAnimationFrame(animateCanvasSize)
|
||||
}
|
||||
}
|
||||
animateCanvasSize()
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
function resize(w, h){
|
||||
el.style.width = w + "px";
|
||||
el.style.height = h + "px";
|
||||
|
|
@ -31,10 +82,9 @@ MD.Canvas = function(){
|
|||
};
|
||||
|
||||
// curConfig.canvas_expansion
|
||||
var multi = 1.5;
|
||||
var multi = 1;
|
||||
w = Math.max(w_orig, svgCanvas.contentW * zoom * multi);
|
||||
h = Math.max(h_orig, svgCanvas.contentH * zoom * multi);
|
||||
workarea.style.overflow = (w === w_orig && h === h_orig) ? 'hidden' : 'scroll';
|
||||
|
||||
var old_can_y = cnvs.height()/2;
|
||||
var old_can_x = cnvs.width()/2;
|
||||
|
|
@ -66,8 +116,7 @@ MD.Canvas = function(){
|
|||
new_ctr.y += offset.y;
|
||||
}
|
||||
|
||||
|
||||
editor.rulers.update(svgCanvas, cnvs, zoom);
|
||||
editor.rulers.update();
|
||||
workarea.scroll();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,12 +21,15 @@ MD.Keyboard = function(){
|
|||
"cmd_s": ()=> editor.save(),
|
||||
"cmd_z": ()=> editor.undo(),
|
||||
"cmd_shift_z": ()=> editor.redo(),
|
||||
"cmd_c": ()=> editor.copy(),
|
||||
"cmd_x": ()=> editor.cut(),
|
||||
"cmd_v": ()=> editor.paste(),
|
||||
"cmd_c": ()=> editor.copySelected(),
|
||||
"cmd_x": ()=> editor.cutSelected(),
|
||||
"cmd_v": ()=> editor.pasteSelected(),
|
||||
"cmd_u": ()=> editor.modal.viewSource(),
|
||||
"cmd_a": ()=> svgCanvas.selectAllInCurrentLayer(),
|
||||
"cmd_b": ()=> editor.text.setBold(),
|
||||
"cmd_i": ()=> editor.text.setItalic(),
|
||||
"cmd_g": ()=> editor.groupSelected(),
|
||||
"cmd_shift_g": ()=> editor.ungroupSelected(),
|
||||
"backspace": () => editor.deleteSelected(),
|
||||
"ctrl_arrowleft": () => editor.rotateSelected(0,1),
|
||||
"ctrl_arrowright": () => editor.rotateSelected(1,1),
|
||||
|
|
@ -34,6 +37,7 @@ MD.Keyboard = function(){
|
|||
"ctrl_shift_arrowright": () => editor.rotateSelected(1,5),
|
||||
"shift_o": () => svgCanvas.cycleElement(0),
|
||||
"shift_p": () => svgCanvas.cycleElement(1),
|
||||
"shift_r": () => editor.rulers.toggleRulers(),
|
||||
"cmd_+": () => editor.zoom.multiply(1.5),
|
||||
"cmd_=": () => editor.zoom.multiply(1.5),
|
||||
"cmd_-": () => editor.zoom.multiply(0.75),
|
||||
|
|
@ -41,6 +45,10 @@ MD.Keyboard = function(){
|
|||
"arrowright": () => editor.moveSelected(1,0),
|
||||
"arrowup": () => editor.moveSelected(0,-1),
|
||||
"arrowdown": () => editor.moveSelected(0,1),
|
||||
"cmd_arrowup": () => editor.moveUpSelected(),
|
||||
"cmd_arrowdown": () => editor.moveDownSelected(),
|
||||
"cmd_shift_arrowup": () => editor.moveToTopSelected(),
|
||||
"cmd_shift_arrowdown": () => editor.moveToBottomSelected(),
|
||||
"shift_arrowleft": () => editor.moveSelected(state.get("canvasSnapStep") * -1, 0),
|
||||
"shift_arrowright": () => editor.moveSelected(state.get("canvasSnapStep") * 1, 0),
|
||||
"shift_arrowup": () => editor.moveSelected(0, state.get("canvasSnapStep") * -1),
|
||||
|
|
@ -54,7 +62,6 @@ MD.Keyboard = function(){
|
|||
e.preventDefault();
|
||||
keys[key]();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener("keyup", function(e){
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
MD.Menu = function(){
|
||||
|
||||
$('#tool_wireframe').on("click", editor.toggleWireframe);
|
||||
$('#tool_move_top').on("click", editor.moveToTopSelected);
|
||||
$('#tool_move_up').on("click", editor.moveUpSelected);
|
||||
$('#tool_move_bottom').on("click", editor.moveToBottomSelected);
|
||||
$('#tool_move_down').on("click", editor.moveDownSelected);
|
||||
|
||||
// top dropdown menus
|
||||
$('.menu_title')
|
||||
.on('mousedown', function() {
|
||||
$("#tools_shapelib").hide()
|
||||
$("#menu_bar").toggleClass('active');
|
||||
$('.menu').removeClass('open');
|
||||
$(this).parent().addClass('open');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
MD.Modal = function(){
|
||||
|
||||
var orig_source = false;
|
||||
|
||||
$("button.cancel, .overlay").on("click", cancelOverlays);
|
||||
$("#tool_source").on("click", viewSource);
|
||||
$("#tool_source_save").on("click", saveSource);
|
||||
|
||||
function viewSource(e, forSaving){
|
||||
editor.menu.flash($('#view_menu'));
|
||||
$('#save_output_btns').toggle(!!forSaving);
|
||||
$('#tool_source_back').toggle(!forSaving);
|
||||
orig_source = svgCanvas.getSvgString();
|
||||
$('#svg_source_textarea').val(orig_source);
|
||||
$('#svg_source_editor').fadeIn();
|
||||
$('#svg_source_textarea').focus().select();
|
||||
};
|
||||
|
||||
function saveSource(){
|
||||
var saveChanges = function() {
|
||||
svgCanvas.clearSelection();
|
||||
$('#svg_source_editor').hide();
|
||||
$('#svg_source_textarea').blur();
|
||||
editor.zoom.multiply(1);
|
||||
editor.rulers.update();
|
||||
editor.paintBox.fill.prep();
|
||||
editor.paintBox.stroke.prep();
|
||||
}
|
||||
|
||||
if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
|
||||
$.confirm("There were parsing errors in your SVG source.\nRevert back to original SVG source?", function(ok) {
|
||||
if(!ok) return false;
|
||||
saveChanges();
|
||||
});
|
||||
} else {
|
||||
saveChanges();
|
||||
}
|
||||
};
|
||||
|
||||
function cancelOverlays() {
|
||||
$('#dialog_box').hide();
|
||||
|
||||
if (orig_source && orig_source !== $('#svg_source_textarea').val()) {
|
||||
$.confirm("Ignore changes made to SVG source?", function(ok) {
|
||||
if(ok) {
|
||||
$('#svg_source_editor').hide();
|
||||
$('#svg_source_textarea').blur();
|
||||
};
|
||||
});
|
||||
} else {
|
||||
$('#svg_source_editor').hide();
|
||||
$('#svg_source_textarea').blur();
|
||||
}
|
||||
};
|
||||
|
||||
this.cancelOverlays = cancelOverlays;
|
||||
this.viewSource = viewSource;
|
||||
this.saveSource = saveSource;
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,92 @@
|
|||
MD.PaintBox = function(container, type){
|
||||
|
||||
var colorPicker = function(elem) {
|
||||
var picker = elem[0].id == 'stroke_color' ? 'stroke' : 'fill';
|
||||
var is_background = elem[0].id == "canvas_color"
|
||||
if (is_background) picker = 'canvas'
|
||||
var paint = editor.paintBox[picker].paint;
|
||||
|
||||
var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
|
||||
var was_none = false;
|
||||
var pos = is_background ? {'right': 175, 'top': 50} : {'left': 50, 'bottom': 50}
|
||||
|
||||
$("#color_picker")
|
||||
.draggable({cancel:'.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker', containment: 'window'})
|
||||
.removeAttr("style")
|
||||
.css(pos)
|
||||
.jGraduate(
|
||||
{
|
||||
paint: paint,
|
||||
window: { pickerTitle: title },
|
||||
images: { clientPath: 'images/' },
|
||||
newstop: 'inverse'
|
||||
},
|
||||
function(p) {
|
||||
paint = new $.jGraduate.Paint(p);
|
||||
|
||||
editor.paintBox[picker].setPaint(paint);
|
||||
svgCanvas.setPaint(picker, paint);
|
||||
|
||||
$('#color_picker').hide();
|
||||
},
|
||||
function(p) {
|
||||
$('#color_picker').hide();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
$('#tool_fill').click(function(){
|
||||
if ($('#tool_fill').hasClass('active')) {
|
||||
colorPicker($('#fill_color'));
|
||||
}
|
||||
else {
|
||||
$('#tool_fill').addClass('active');
|
||||
$("#tool_stroke").removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
$('#tool_stroke').on("click", function(){
|
||||
if ($('#tool_stroke').hasClass('active')) {
|
||||
colorPicker($('#stroke_color'));
|
||||
}
|
||||
else {
|
||||
$('#tool_stroke').addClass('active');
|
||||
$("#tool_fill").removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
$('#tool_canvas').on("click touchstart", function(){
|
||||
colorPicker($('#canvas_color'));
|
||||
});
|
||||
|
||||
function createBackground(fill) {
|
||||
const res = svgCanvas.getResolution();
|
||||
svgCanvas.createLayer("background");
|
||||
cur_shape = svgCanvas.addSvgElementFromJson({
|
||||
"element": "rect",
|
||||
"attr": {
|
||||
"x": -1,
|
||||
"y": -1,
|
||||
"width": res.w+2,
|
||||
"height": res.h+2,
|
||||
"stroke": "none",
|
||||
"id": "canvas_background",
|
||||
"opacity": 1,
|
||||
"fill": fill || "#fff",
|
||||
"style": "pointer-events:none"
|
||||
}
|
||||
});
|
||||
svgCanvas.setCurrentLayer("Layer 1")
|
||||
svgCanvas.setCurrentLayerPosition("1")
|
||||
}
|
||||
|
||||
var background = document.getElementById("canvas_background");
|
||||
|
||||
// create a new layer background if it doesn't exist
|
||||
if (!document.getElementById('canvas_background')) createBackground();
|
||||
var fill = document.getElementById('canvas_background').getAttribute("fill");
|
||||
|
||||
|
||||
var cur = {color: "fff", opacity: 1}
|
||||
if (type === "stroke") cur = {color: 'fff', opacity: 1};
|
||||
if (type === "fill") cur = {color: 'fff', opacity: 1};
|
||||
|
|
@ -92,7 +179,7 @@ MD.PaintBox = function(container, type){
|
|||
|
||||
this.update = function(apply) {
|
||||
const selectedElement = editor.selected[0];
|
||||
if(!editor.selected) return;
|
||||
if(!selectedElement) return;
|
||||
var type = this.type;
|
||||
switch ( selectedElement.tagName ) {
|
||||
case 'use':
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ MD.Panel = function(){
|
|||
$('#group_opacity').dragInput({ min: 0, max: 100, step: 5, callback: editor.changeAttribute, cursor: true, start: 100 });
|
||||
$('#blur') .dragInput({ min: 0, max: 10, step: .1, callback: editor.changeBlur, cursor: true, start: 0 });
|
||||
|
||||
// Align
|
||||
|
||||
$('#position_opts .draginput_cell').on("click", function(){
|
||||
$('#align_relative_to').val()
|
||||
svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0], 'page');
|
||||
|
|
@ -48,11 +50,37 @@ MD.Panel = function(){
|
|||
svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0], $('#align_relative_to').val());
|
||||
});
|
||||
|
||||
// Stroke dash
|
||||
|
||||
$('#stroke_style').change(function(){
|
||||
svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
|
||||
$("#stroke_style_label").html(this.options[this.selectedIndex].text);
|
||||
});
|
||||
|
||||
// Segment type
|
||||
|
||||
$('#seg_type').change(function() {
|
||||
svgCanvas.setSegType($(this).val());
|
||||
$("#seg_type_label").html(this.options[this.selectedIndex].text)
|
||||
});
|
||||
|
||||
$("#tool_node_clone").on("click", function(){
|
||||
if (svgCanvas.pathActions.getNodePoint()) {
|
||||
svgCanvas.pathActions.clonePathNode();
|
||||
}
|
||||
});
|
||||
|
||||
$("#tool_node_delete").on("click", function(){
|
||||
if (svgCanvas.pathActions.getNodePoint()) {
|
||||
svgCanvas.pathActions.deletePathNode();
|
||||
}
|
||||
});
|
||||
|
||||
$("#tool_openclose_path").on("click", function(){
|
||||
svgCanvas.pathActions.opencloseSubPath();
|
||||
});
|
||||
|
||||
|
||||
function show(elem) {
|
||||
$('.context_panel').hide();
|
||||
if (elem === "canvas") return $('#canvas_panel').show();
|
||||
|
|
@ -132,7 +160,7 @@ MD.Panel = function(){
|
|||
var elname = elem.nodeName;
|
||||
var angle = svgCanvas.getRotationAngle(elem);
|
||||
$('#angle').val(Math.round(angle));
|
||||
|
||||
$('#tool_angle_indicator').css("transform", "rotate("+angle+"deg)");
|
||||
var blurval = svgCanvas.getBlur(elem);
|
||||
$('#blur').val(blurval);
|
||||
if(!isNode && currentMode != 'pathedit') {
|
||||
|
|
@ -170,7 +198,7 @@ MD.Panel = function(){
|
|||
$('#g_panel').show();
|
||||
}
|
||||
|
||||
if(elem.parentNode.tagName === 'a') {
|
||||
if(elem && elem.parentNode.tagName === 'a') {
|
||||
if(!$(elem).siblings().length) {
|
||||
$('#a_panel').show();
|
||||
link_href = svgCanvas.getHref(elem.parentNode);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ MD.Shapelib = function(){
|
|||
var svgroot = canv.getRootElem();
|
||||
var lastBBox = {};
|
||||
|
||||
$(document).on("mousedown", function(e){
|
||||
if (!e.target.closest("#tools_shapelib"))
|
||||
$("#tools_shapelib").hide();
|
||||
})
|
||||
|
||||
// This populates the category list
|
||||
var categories = {
|
||||
basic: 'Basic',
|
||||
|
|
@ -163,16 +168,13 @@ MD.Shapelib = function(){
|
|||
$.each(categories, function(id, label) {
|
||||
cat_str += '<div data-cat=' + id + '>' + label + '</div>';
|
||||
});
|
||||
|
||||
shape_cats.html(cat_str).children().bind('mouseup', function() {
|
||||
shape_cats.html(cat_str)
|
||||
$("[data-cat]", shape_cats)
|
||||
.on('click', function(e) {
|
||||
var catlink = $(this);
|
||||
catlink.siblings().removeClass('current');
|
||||
catlink.addClass('current');
|
||||
|
||||
loadLibrary(catlink.attr('data-cat'));
|
||||
// Get stuff
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
shape_cats.children().eq(0).addClass('current');
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ MD.Toolbar = function(){
|
|||
|
||||
function showShapeLib(){
|
||||
$("#tools_shapelib").show();
|
||||
$(window).one("mousedown", function(){$('#tools_shapelib').hide()})
|
||||
}
|
||||
|
||||
this.setMode = setMode;
|
||||
|
|
|
|||
|
|
@ -12,32 +12,60 @@ MD.Zoom = function(){
|
|||
}
|
||||
});
|
||||
|
||||
function changed(window, bbox, autoCenter) {
|
||||
var scrbar = 15,
|
||||
res = svgCanvas.getResolution(),
|
||||
canvas_pos = $('#svgcanvas').position();
|
||||
var z_info = svgCanvas.setBBoxZoom(bbox, $workarea.width()-scrbar, $workarea.height()-scrbar);
|
||||
$('#zoom_select').on("change", function() {
|
||||
var val = this.options[this.selectedIndex].text
|
||||
val = val.split("%")[0]
|
||||
$("#zoom").val(val).trigger("change")
|
||||
});
|
||||
|
||||
$('#zoom').change(function(ctl){
|
||||
|
||||
var zoomlevel = this.value / 100;
|
||||
if(zoomlevel < .001) {
|
||||
ctl.value = .1;
|
||||
return;
|
||||
}
|
||||
var zoom = svgCanvas.getZoom();
|
||||
changed(window, {
|
||||
width: 0,
|
||||
height: 0,
|
||||
// center pt of scroll position
|
||||
x: ($workarea.scrollLeft() + $workarea.width()/2)/zoom,
|
||||
y: ($workarea.scrollTop() + $workarea.height()/2)/zoom,
|
||||
zoom: zoomlevel
|
||||
}, true);
|
||||
})
|
||||
|
||||
function changed(window, bbox) {
|
||||
const scrbar = 15;
|
||||
const res = svgCanvas.getResolution();
|
||||
const canvas_pos = $('#svgcanvas').position();
|
||||
const updateCanvas = editor.canvas.update;
|
||||
const z_info = svgCanvas.setBBoxZoom(bbox, $workarea.width()-scrbar, $workarea.height()-scrbar);
|
||||
const zoomlevel = z_info.zoom;
|
||||
const bb = z_info.bbox;
|
||||
|
||||
if(!z_info) return;
|
||||
var zoomlevel = z_info.zoom,
|
||||
bb = z_info.bbox;
|
||||
|
||||
if(zoomlevel < .001) {
|
||||
changeZoom({value: .1});
|
||||
return;
|
||||
}
|
||||
if (typeof animatedZoom != 'undefined') window.cancelAnimationFrame(animatedZoom)
|
||||
if (typeof animatedZoom !== 'undefined') window.cancelAnimationFrame(animatedZoom)
|
||||
// zoom duration 500ms
|
||||
var start = Date.now();
|
||||
var duration = 500;
|
||||
var diff = (zoomlevel) - (res.zoom)
|
||||
var zoom = $('#zoom')[0]
|
||||
var current_zoom = res.zoom
|
||||
|
||||
var animateZoom = function(timestamp) {
|
||||
var progress = Date.now() - start
|
||||
var tick = progress / duration
|
||||
var tick = progress / duration;
|
||||
editor.rulers.update();
|
||||
tick = (Math.pow((tick-1), 3) +1);
|
||||
svgCanvas.setZoom(current_zoom + (diff*tick));
|
||||
editor.canvas.update();
|
||||
updateCanvas();
|
||||
if (tick < 1 && tick > -.90) {
|
||||
window.animatedZoom = requestAnimationFrame(animateZoom)
|
||||
}
|
||||
|
|
@ -49,9 +77,9 @@ MD.Zoom = function(){
|
|||
}
|
||||
animateZoom()
|
||||
|
||||
if(svgCanvas.getMode() == 'zoom' && bb.width) {
|
||||
if(svgCanvas.getMode() === 'zoom' && bb.width) {
|
||||
// Go to select if a zoom box was drawn
|
||||
setSelectMode();
|
||||
state.set("canvasMode", "select");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
// bind the selected event to our function that handles updates to the UI
|
||||
svgCanvas.bind("selected", editor.selectedChanged);
|
||||
svgCanvas.bind("transition", editor.elementTransition);
|
||||
svgCanvas.bind("changed", editor.elementChanged);
|
||||
svgCanvas.bind("exported", exportHandler);
|
||||
svgCanvas.bind("zoomed", editor.zoom.changed);
|
||||
svgCanvas.bind("contextset", contextChanged);
|
||||
svgCanvas.bind("extension_added", editor.extensionAdded);
|
||||
svgCanvas.textActions.setInputElem($("#text")[0]);
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
var contextChanged = function(win, context) {
|
||||
|
||||
var link_str = '';
|
||||
if(context) {
|
||||
var str = '';
|
||||
link_str = '<a href="#" data-root="y">' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + '</a>';
|
||||
|
||||
$(context).parentsUntil('#svgcontent > g').addBack().each(function() {
|
||||
if(this.id) {
|
||||
str += ' > ' + this.id;
|
||||
if(this !== context) {
|
||||
link_str += ' > <a href="#">' + this.id + '</a>';
|
||||
} else {
|
||||
link_str += ' > ' + this.id;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
cur_context = str;
|
||||
} else {
|
||||
cur_context = null;
|
||||
}
|
||||
$('#cur_context_panel').toggle(!!context).html(link_str);
|
||||
|
||||
}
|
||||
152
src/js/editor.js
152
src/js/editor.js
|
|
@ -6,7 +6,6 @@ MD.Editor = function(){
|
|||
const _self = this;
|
||||
_self.selected = [];
|
||||
|
||||
|
||||
function save(){
|
||||
_self.menu.flash($('#file_menu'));
|
||||
svgCanvas.save();
|
||||
|
|
@ -25,45 +24,46 @@ MD.Editor = function(){
|
|||
|
||||
function cutSelected(){
|
||||
if (!_self.selected.length) return false;
|
||||
flash($('#edit_menu'));
|
||||
_self.menu.flash($('#edit_menu'));
|
||||
svgCanvas.cutSelectedElements();
|
||||
}
|
||||
|
||||
function copySelected(){
|
||||
if (!_self.selected.length) return false;
|
||||
flash($('#edit_menu'));
|
||||
_self.menu.flash($('#edit_menu'));
|
||||
svgCanvas.copySelectedElements();
|
||||
}
|
||||
|
||||
function pasteSelected(){
|
||||
flash($('#edit_menu'));
|
||||
_self.menu.flash($('#edit_menu'));
|
||||
const workarea = document.getElementById("workarea");
|
||||
var zoom = svgCanvas.getZoom();
|
||||
var x = (workarea[0].scrollLeft + workarea.width()/2)/zoom - svgCanvas.contentW;
|
||||
var y = (workarea[0].scrollTop + workarea.height()/2)/zoom - svgCanvas.contentH;
|
||||
var x = (workarea.scrollLeft + workarea.offsetWidth/2)/zoom - svgCanvas.contentW;
|
||||
var y = (workarea.scrollTop + workarea.offsetHeight/2)/zoom - svgCanvas.contentH;
|
||||
svgCanvas.pasteElements('point', x, y);
|
||||
}
|
||||
|
||||
function moveToTopSelected(){
|
||||
if (!_self.selected.length) return false;
|
||||
flash($('#object_menu'));
|
||||
_self.menu.flash($('#object_menu'));
|
||||
svgCanvas.moveToTopSelectedElement();
|
||||
}
|
||||
|
||||
function moveToBottomSelected(){
|
||||
if (!_self.selected.length) return false;
|
||||
flash($('#object_menu'));
|
||||
_self.menu.flash($('#object_menu'));
|
||||
svgCanvas.moveToBottomSelectedElement();
|
||||
}
|
||||
|
||||
function moveUpSelected(){
|
||||
if (!_self.selected.length) return false;
|
||||
flash($('#object_menu'));
|
||||
_self.menu.flash($('#object_menu'));
|
||||
svgCanvas.moveUpDownSelected("Up");
|
||||
}
|
||||
|
||||
function moveDownSelected(){
|
||||
if (!_self.selected.length) return false;
|
||||
flash($('#object_menu'));
|
||||
_self.menu.flash($('#object_menu'));
|
||||
svgCanvas.moveUpDownSelected("Down");
|
||||
}
|
||||
|
||||
|
|
@ -113,12 +113,38 @@ MD.Editor = function(){
|
|||
editor.panel.updateContextPanel(_self.selected);
|
||||
};
|
||||
|
||||
function contextChanged(win, context) {
|
||||
|
||||
var link_str = '';
|
||||
if(context) {
|
||||
var str = '';
|
||||
link_str = '<a href="#" data-root="y">' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + '</a>';
|
||||
|
||||
$(context).parentsUntil('#svgcontent > g').addBack().each(function() {
|
||||
if(this.id) {
|
||||
str += ' > ' + this.id;
|
||||
if(this !== context) {
|
||||
link_str += ' > <a href="#">' + this.id + '</a>';
|
||||
} else {
|
||||
link_str += ' > ' + this.id;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
cur_context = str;
|
||||
} else {
|
||||
cur_context = null;
|
||||
}
|
||||
$('#cur_context_panel').toggle(!!context).html(link_str);
|
||||
|
||||
}
|
||||
|
||||
function elementChanged(window,elems){
|
||||
|
||||
const mode = svgCanvas.getMode();
|
||||
|
||||
// if the element changed was the svg, then it could be a resolution change
|
||||
if (elems[0].tagName === "svg") canvas.update();
|
||||
if (elems[0].tagName === "svg") editor.canvas.update();
|
||||
|
||||
editor.panel.updateContextPanel(elems);
|
||||
|
||||
|
|
@ -134,6 +160,7 @@ MD.Editor = function(){
|
|||
}
|
||||
|
||||
function changeAttribute(attr, value, completed) {
|
||||
if (attr === "opacity") value *= 0.01;
|
||||
if (completed) {
|
||||
svgCanvas.changeSelectedAttribute(attr, value);
|
||||
state.set("canvasContent", serializer.serializeToString(svgCanvas.getContentElem()));
|
||||
|
|
@ -142,7 +169,30 @@ MD.Editor = function(){
|
|||
}
|
||||
|
||||
function elementTransition(window, elems){
|
||||
// TODO live attr updates on transition
|
||||
// Call when part of element is in process of changing, generally
|
||||
// on mousemove actions like rotate, move, etc.
|
||||
var elementTransition = function(window,elems) {
|
||||
var mode = svgCanvas.getMode();
|
||||
var elem = elems[0];
|
||||
|
||||
if(!elem) return;
|
||||
|
||||
const multiselected = (elems.length >= 2 && elems[1] != null) ? elems : null;
|
||||
// Only updating fields for single elements for now
|
||||
if(!multiselected) {
|
||||
switch ( mode ) {
|
||||
case "rotate":
|
||||
var ang = svgCanvas.getRotationAngle(elem);
|
||||
$('#angle').val(Math.round(ang));
|
||||
rotateCursor(ang);
|
||||
$('#tool_reorient').toggleClass('disabled', ang == 0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
svgCanvas.runExtensions("elementTransition", {
|
||||
elems: elems
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function moveSelected(dx,dy) {
|
||||
|
|
@ -157,8 +207,8 @@ MD.Editor = function(){
|
|||
svgCanvas.moveSelectedElements(dx,dy);
|
||||
};
|
||||
|
||||
function extensionAdded(){
|
||||
console.log("master", args);
|
||||
function extensionAdded(wind, func){
|
||||
if (func.callback) func.callback()
|
||||
}
|
||||
|
||||
function changeBlur(ctl, completed){
|
||||
|
|
@ -172,9 +222,77 @@ MD.Editor = function(){
|
|||
}
|
||||
}
|
||||
|
||||
function changeRotationAngle(ctl){
|
||||
const val = document.getElementById("angle").value;
|
||||
const indicator = document.getElementById("tool_angle_indicator");
|
||||
const reorient = document.getElementById("tool_reorient");
|
||||
const preventUndo = true;
|
||||
|
||||
svgCanvas.setRotationAngle(val, preventUndo);
|
||||
indicator.style.transform = 'rotate('+ val + 'deg)'
|
||||
reorient.classList.toggle("disabled", val === 0);
|
||||
|
||||
}
|
||||
|
||||
function exportHandler(window, data) {
|
||||
var issues = data.issues;
|
||||
|
||||
if(!$('#export_canvas').length) {
|
||||
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
|
||||
}
|
||||
var c = $('#export_canvas')[0];
|
||||
|
||||
c.width = svgCanvas.contentW;
|
||||
c.height = svgCanvas.contentH;
|
||||
canvg(c, data.svg, {renderCallback: function() {
|
||||
var datauri = c.toDataURL('image/png');
|
||||
if (!datauri) return false;
|
||||
var filename = "Method Draw Image";
|
||||
var type = 'image/png';
|
||||
var file = svgedit.utilities.dataURItoBlob(datauri, type);
|
||||
if (window.navigator.msSaveOrOpenBlob) // IE10+
|
||||
window.navigator.msSaveOrOpenBlob(file, filename);
|
||||
else { // Others
|
||||
var a = document.createElement("a"),
|
||||
url = URL.createObjectURL(file);
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
}
|
||||
}});
|
||||
};
|
||||
|
||||
function toggleWireframe() {
|
||||
editor.menu.flash($('#view_menu'));
|
||||
$('#tool_wireframe').toggleClass('push_button_pressed');
|
||||
$("#svg_editor").toggleClass('wireframe');
|
||||
}
|
||||
|
||||
function groupSelected(){
|
||||
// group
|
||||
if (_self.selected.length > 1) {
|
||||
editor.menu.flash($('#object_menu'));
|
||||
svgCanvas.groupSelectedElements();
|
||||
}
|
||||
};
|
||||
|
||||
function ungroupSelected(){
|
||||
if(_self.selected.length === 1 && _self.selected[0].tagName === "g"){
|
||||
editor.menu.flash($('#object_menu'));
|
||||
svgCanvas.ungroupSelectedElement();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.selectedChanged = selectedChanged;
|
||||
this.elementChanged = elementChanged;
|
||||
this.changeAttribute = changeAttribute;
|
||||
this.contextChanged = contextChanged;
|
||||
this.elementTransition = elementTransition;
|
||||
this.switchPaint = switchPaint;
|
||||
this.save = save;
|
||||
|
|
@ -183,7 +301,6 @@ MD.Editor = function(){
|
|||
this.cutSelected = cutSelected;
|
||||
this.copySelected = copySelected;
|
||||
this.pasteSelected = pasteSelected;
|
||||
this.pasteSelected = pasteSelected;
|
||||
this.moveToTopSelected = moveToTopSelected;
|
||||
this.moveUpSelected = moveUpSelected;
|
||||
this.moveToBottomSelected = moveToBottomSelected;
|
||||
|
|
@ -194,4 +311,9 @@ MD.Editor = function(){
|
|||
this.escapeMode = escapeMode;
|
||||
this.extensionAdded = extensionAdded;
|
||||
this.changeBlur = changeBlur;
|
||||
this.changeRotationAngle = changeRotationAngle;
|
||||
this.exportHandler = exportHandler;
|
||||
this.toggleWireframe = toggleWireframe;
|
||||
this.groupSelected = groupSelected;
|
||||
this.ungroupSelected = ungroupSelected;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// Call when part of element is in process of changing, generally
|
||||
// on mousemove actions like rotate, move, etc.
|
||||
var elementTransition = function(window,elems) {
|
||||
var mode = svgCanvas.getMode();
|
||||
var elem = elems[0];
|
||||
|
||||
if(!elem) return;
|
||||
|
||||
const multiselected = (elems.length >= 2 && elems[1] != null) ? elems : null;
|
||||
// Only updating fields for single elements for now
|
||||
if(!multiselected) {
|
||||
switch ( mode ) {
|
||||
case "rotate":
|
||||
var ang = svgCanvas.getRotationAngle(elem);
|
||||
$('#angle').val(Math.round(ang));
|
||||
rotateCursor(ang);
|
||||
$('#tool_reorient').toggleClass('disabled', ang == 0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
svgCanvas.runExtensions("elementTransition", {
|
||||
elems: elems
|
||||
});
|
||||
};
|
||||
|
|
@ -1,173 +0,0 @@
|
|||
/*
|
||||
function embedded_svg_edit(frame){
|
||||
//initialize communication
|
||||
this.frame = frame;
|
||||
this.stack = []; //callback stack
|
||||
|
||||
var editapi = this;
|
||||
|
||||
window.addEventListener("message", function(e){
|
||||
if(e.data.substr(0,5) == "ERROR"){
|
||||
editapi.stack.splice(0,1)[0](e.data,"error")
|
||||
}else{
|
||||
editapi.stack.splice(0,1)[0](e.data)
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
|
||||
embedded_svg_edit.prototype.call = function(code, callback){
|
||||
this.stack.push(callback);
|
||||
this.frame.contentWindow.postMessage(code,"*");
|
||||
}
|
||||
|
||||
embedded_svg_edit.prototype.getSvgString = function(callback){
|
||||
this.call("svgCanvas.getSvgString()",callback)
|
||||
}
|
||||
|
||||
embedded_svg_edit.prototype.setSvgString = function(svg){
|
||||
this.call("svgCanvas.setSvgString('"+svg.replace(/'/g, "\\'")+"')");
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
Embedded SVG-edit API
|
||||
|
||||
General usage:
|
||||
- Have an iframe somewhere pointing to a version of svg-edit > r1000
|
||||
- Initialize the magic with:
|
||||
var svgCanvas = new embedded_svg_edit(window.frames['svgedit']);
|
||||
- Pass functions in this format:
|
||||
svgCanvas.setSvgString("string")
|
||||
- Or if a callback is needed:
|
||||
svgCanvas.setSvgString("string")(function(data, error){
|
||||
if(error){
|
||||
//there was an error
|
||||
}else{
|
||||
//handle data
|
||||
}
|
||||
})
|
||||
|
||||
Everything is done with the same API as the real svg-edit,
|
||||
and all documentation is unchanged. The only difference is
|
||||
when handling returns, the callback notation is used instead.
|
||||
|
||||
var blah = new embedded_svg_edit(window.frames['svgedit']);
|
||||
blah.clearSelection("woot","blah",1337,[1,2,3,4,5,"moo"],-42,{a: "tree",b:6, c: 9})(function(){console.log("GET DATA",arguments)})
|
||||
*/
|
||||
|
||||
function embedded_svg_edit(frame){
|
||||
//initialize communication
|
||||
this.frame = frame;
|
||||
//this.stack = [] //callback stack
|
||||
this.callbacks = {}; //successor to stack
|
||||
this.encode = embedded_svg_edit.encode;
|
||||
//List of functions extracted with this:
|
||||
//Run in firebug on http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html
|
||||
|
||||
//for(var i=0,q=[],f = document.querySelectorAll("div.CFunction h3.CTitle a");i<f.length;i++){q.push(f[i].name)};q
|
||||
//var functions = ["clearSelection", "addToSelection", "removeFromSelection", "open", "save", "getSvgString", "setSvgString",
|
||||
//"createLayer", "deleteCurrentLayer", "setCurrentLayer", "renameCurrentLayer", "setCurrentLayerPosition", "setLayerVisibility",
|
||||
//"moveSelectedToLayer", "clear"];
|
||||
|
||||
|
||||
//Newer, well, it extracts things that aren't documented as well. All functions accessible through the normal thingy can now be accessed though the API
|
||||
//var l=[];for(var i in svgCanvas){if(typeof svgCanvas[i] == "function"){l.push(i)}};
|
||||
//run in svgedit itself
|
||||
var functions = ["updateElementFromJson", "embedImage", "fixOperaXML", "clearSelection", "addToSelection",
|
||||
"removeFromSelection", "addNodeToSelection", "open", "save", "getSvgString", "setSvgString", "createLayer",
|
||||
"deleteCurrentLayer", "getCurrentDrawing", "setCurrentLayer", "renameCurrentLayer", "setCurrentLayerPosition",
|
||||
"setLayerVisibility", "moveSelectedToLayer", "clear", "clearPath", "getNodePoint", "clonePathNode", "deletePathNode",
|
||||
"getResolution", "getImageTitle", "setImageTitle", "setResolution", "setBBoxZoom", "setZoom", "getMode", "setMode",
|
||||
"getStrokeColor", "setStrokeColor", "getFillColor", "setFillColor", "setStrokePaint", "setFillPaint", "getStrokeWidth",
|
||||
"setStrokeWidth", "getStrokeStyle", "setStrokeStyle", "getOpacity", "setOpacity", "getFillOpacity", "setFillOpacity",
|
||||
"getStrokeOpacity", "setStrokeOpacity", "getTransformList", "getBBox", "getRotationAngle", "setRotationAngle", "each",
|
||||
"bind", "setIdPrefix", "getBold", "setBold", "getItalic", "setItalic", "getFontFamily", "setFontFamily", "getFontSize",
|
||||
"setFontSize", "getText", "setTextContent", "setImageURL", "setRectRadius", "setSegType", "quickClone",
|
||||
"changeSelectedAttributeNoUndo", "changeSelectedAttribute", "deleteSelectedElements", "groupSelectedElements",
|
||||
"ungroupSelectedElement", "moveToTopSelectedElement", "moveToBottomSelectedElement", "moveSelectedElements",
|
||||
"getStrokedBBox", "getVisibleElements", "cycleElement", "getUndoStackSize", "getRedoStackSize", "getNextUndoCommandText",
|
||||
"getNextRedoCommandText", "undo", "redo", "cloneSelectedElements", "alignSelectedElements", "getZoom", "getVersion",
|
||||
"setIconSize", "setLang", "setCustomHandlers"];
|
||||
|
||||
//TODO: rewrite the following, it's pretty scary.
|
||||
for(var i = 0; i < functions.length; i++){
|
||||
this[functions[i]] = (function(d){
|
||||
return function(){
|
||||
var t = this //new callback
|
||||
for(var g = 0, args = []; g < arguments.length; g++){
|
||||
args.push(arguments[g]);
|
||||
}
|
||||
var cbid = t.send(d,args, function(){}) //the callback (currently it's nothing, but will be set later
|
||||
|
||||
return function(newcallback){
|
||||
t.callbacks[cbid] = newcallback; //set callback
|
||||
}
|
||||
}
|
||||
})(functions[i])
|
||||
}
|
||||
//TODO: use AddEvent for Trident browsers, currently they dont support SVG, but they do support onmessage
|
||||
var t = this;
|
||||
window.addEventListener("message", function(e){
|
||||
if(e.data.substr(0,4)=="SVGe"){ //because svg-edit is too longish
|
||||
var data = e.data.substr(4);
|
||||
var cbid = data.substr(0, data.indexOf(";"));
|
||||
if(t.callbacks[cbid]){
|
||||
if(data.substr(0,6) != "error:"){
|
||||
t.callbacks[cbid](eval("("+data.substr(cbid.length+1)+")"))
|
||||
}else{
|
||||
t.callbacks[cbid](data, "error");
|
||||
}
|
||||
}
|
||||
}
|
||||
//this.stack.shift()[0](e.data,e.data.substr(0,5) == "ERROR"?'error':null) //replace with shift
|
||||
}, false)
|
||||
}
|
||||
|
||||
embedded_svg_edit.encode = function(obj){
|
||||
//simple partial JSON encoder implementation
|
||||
if(window.JSON && JSON.stringify) return JSON.stringify(obj);
|
||||
var enc = arguments.callee; //for purposes of recursion
|
||||
|
||||
if(typeof obj == "boolean" || typeof obj == "number"){
|
||||
return obj+'' //should work...
|
||||
}else if(typeof obj == "string"){
|
||||
//a large portion of this is stolen from Douglas Crockford's json2.js
|
||||
return '"'+
|
||||
obj.replace(
|
||||
/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g
|
||||
, function (a) {
|
||||
return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
||||
})
|
||||
+'"'; //note that this isn't quite as purtyful as the usualness
|
||||
}else if(obj.length){ //simple hackish test for arrayish-ness
|
||||
for(var i = 0; i < obj.length; i++){
|
||||
obj[i] = enc(obj[i]); //encode every sub-thingy on top
|
||||
}
|
||||
return "["+obj.join(",")+"]";
|
||||
}else{
|
||||
var pairs = []; //pairs will be stored here
|
||||
for(var k in obj){ //loop through thingys
|
||||
pairs.push(enc(k)+":"+enc(obj[k])); //key: value
|
||||
}
|
||||
return "{"+pairs.join(",")+"}" //wrap in the braces
|
||||
}
|
||||
}
|
||||
|
||||
embedded_svg_edit.prototype.send = function(name, args, callback){
|
||||
var cbid = Math.floor(Math.random()*31776352877+993577).toString();
|
||||
//this.stack.push(callback);
|
||||
this.callbacks[cbid] = callback;
|
||||
for(var argstr = [], i = 0; i < args.length; i++){
|
||||
argstr.push(this.encode(args[i]))
|
||||
}
|
||||
var t = this;
|
||||
setTimeout(function(){//delay for the callback to be set in case its synchronous
|
||||
t.frame.contentWindow.postMessage(cbid+";svgCanvas['"+name+"']("+argstr.join(",")+")","*");
|
||||
}, 0);
|
||||
return cbid;
|
||||
//this.stack.shift()("svgCanvas['"+name+"']("+argstr.join(",")+")")
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
var exportHandler = function(window, data) {
|
||||
var issues = data.issues;
|
||||
|
||||
if(!$('#export_canvas').length) {
|
||||
$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
|
||||
}
|
||||
var c = $('#export_canvas')[0];
|
||||
|
||||
c.width = svgCanvas.contentW;
|
||||
c.height = svgCanvas.contentH;
|
||||
canvg(c, data.svg, {renderCallback: function() {
|
||||
var datauri = c.toDataURL('image/png');
|
||||
if (!datauri) return false;
|
||||
var filename = "Method Draw Image";
|
||||
var type = 'image/png';
|
||||
var file = svgedit.utilities.dataURItoBlob(datauri, type);
|
||||
if (window.navigator.msSaveOrOpenBlob) // IE10+
|
||||
window.navigator.msSaveOrOpenBlob(file, filename);
|
||||
else { // Others
|
||||
var a = document.createElement("a"),
|
||||
url = URL.createObjectURL(file);
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
}
|
||||
}});
|
||||
};
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
var methodDraw = {};
|
||||
methodDraw.addExtension = function(){}
|
||||
|
||||
/*
|
||||
* ext-eyedropper.js
|
||||
*
|
||||
|
|
@ -16,11 +13,10 @@ methodDraw.addExtension = function(){}
|
|||
// 3) svg_editor.js
|
||||
// 4) svgcanvas.js
|
||||
|
||||
methodDraw.addExtension("eyedropper", function(S) {
|
||||
MD.Eyedropper = function(S) {
|
||||
var svgcontent = S.svgcontent,
|
||||
svgns = "http://www.w3.org/2000/svg",
|
||||
svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||
svgCanvas = methodDraw.canvas,
|
||||
ChangeElementCommand = svgedit.history.ChangeElementCommand,
|
||||
addToHistory = function(cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
|
||||
currentStyle = {fillPaint: "red", fillOpacity: 1.0,
|
||||
|
|
@ -102,8 +98,8 @@ methodDraw.addExtension("eyedropper", function(S) {
|
|||
if (!opts.selectedElements.length) { //nothing selected, just update colors
|
||||
var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill");
|
||||
var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke");
|
||||
methodDraw.paintBox.fill.setPaint(fill)
|
||||
methodDraw.paintBox.stroke.setPaint(stroke)
|
||||
editor.paintBox.fill.setPaint(fill)
|
||||
editor.paintBox.stroke.setPaint(stroke)
|
||||
return;
|
||||
}
|
||||
if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) {
|
||||
|
|
@ -128,11 +124,11 @@ methodDraw.addExtension("eyedropper", function(S) {
|
|||
});
|
||||
var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill")
|
||||
var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke")
|
||||
methodDraw.paintBox.fill.update(true)
|
||||
methodDraw.paintBox.stroke.update(true)
|
||||
editor.paintBox.fill.update(true)
|
||||
editor.paintBox.stroke.update(true)
|
||||
addToHistory(batchCmd);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
@ -533,7 +533,6 @@ window.methodDraw = function() {
|
|||
|
||||
var clickShapelib = function() {
|
||||
if (toolButtonClick('#tool_shapelib')) {
|
||||
$('#workarea').one("mousedown", function(){$('#tools_shapelib').hide()})
|
||||
$("#tools_shapelib").css({
|
||||
"top": $('#tool_shapelib').offset().top,
|
||||
"margin-left": 3,
|
||||
|
|
@ -809,7 +808,6 @@ window.methodDraw = function() {
|
|||
var fill = getPaint(fill_color, fill_opacity, "fill");
|
||||
Editor.paintBox.fill.setPaint(stroke, true);
|
||||
Editor.paintBox.stroke.setPaint(fill, true);
|
||||
|
||||
};
|
||||
|
||||
var zoomImage = function(multiplier) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,33 @@
|
|||
MD.Rulers = function(){
|
||||
|
||||
$('#tool_rulers').on("click", toggleRulers);
|
||||
|
||||
function toggleRulers(){
|
||||
editor.menu.flash($('#view_menu'));
|
||||
var rulers = !$('#tool_rulers').hasClass('push_button_pressed');
|
||||
if (rulers) show();
|
||||
else hide();
|
||||
}
|
||||
|
||||
function show(){
|
||||
$('#tool_rulers').addClass('push_button_pressed');
|
||||
$('#show_rulers').attr("checked", true);
|
||||
$('#rulers').show();
|
||||
state.set("canvasRulers", true);
|
||||
}
|
||||
|
||||
function hide(){
|
||||
$('#tool_rulers').removeClass('push_button_pressed');
|
||||
$('#show_rulers').attr("checked", false);
|
||||
$('#rulers').hide();
|
||||
state.set("canvasRulers", false);
|
||||
}
|
||||
|
||||
workarea.scroll(function() {
|
||||
$('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
|
||||
$('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
|
||||
});
|
||||
|
||||
var r_intervals = [];
|
||||
for(var i = .1; i < 1E5; i *= 10) {
|
||||
r_intervals.push(1 * i);
|
||||
|
|
@ -170,5 +198,6 @@ MD.Rulers = function(){
|
|||
}
|
||||
|
||||
this.update = update;
|
||||
this.toggleRulers = toggleRulers;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,23 @@ editor.paintBox = {
|
|||
editor.palette = new MD.Palette();
|
||||
editor.keyboard = new MD.Keyboard();
|
||||
editor.pan = new MD.Pan();
|
||||
editor.modal = new MD.Modal();
|
||||
|
||||
svgCanvas.addExtension.apply(this, ["shapes", MD.Shapelib])
|
||||
// bind the selected event to our function that handles updates to the UI
|
||||
svgCanvas.bind("selected", editor.selectedChanged);
|
||||
svgCanvas.bind("transition", editor.elementTransition);
|
||||
svgCanvas.bind("changed", editor.elementChanged);
|
||||
svgCanvas.bind("exported", editor.exportHandler);
|
||||
svgCanvas.bind("zoomed", editor.zoom.changed);
|
||||
svgCanvas.bind("contextset", editor.contextChanged);
|
||||
svgCanvas.bind("extension_added", editor.extensionAdded);
|
||||
svgCanvas.textActions.setInputElem($("#text")[0]);
|
||||
|
||||
editor.rulers.update();
|
||||
const shapeLib = svgCanvas.addExtension.apply(this, ["shapes", MD.Shapelib]);
|
||||
const eyedropper = svgCanvas.addExtension.apply(this, ["eyedropper", MD.Eyedropper]);
|
||||
const state = new State();
|
||||
state.set("canvasId", t("Untitled"));
|
||||
state.set("canvasMode", state.get("canvasMode"));
|
||||
state.set("canvasSize", state.get("canvasSize"));
|
||||
|
||||
editor.rulers.update();
|
||||
|
|
@ -26,6 +26,7 @@ function State(){
|
|||
this.canvasMode = (mode) => { editor.toolbar.setMode(mode) }
|
||||
this.canvasSize = (size) => { editor.canvas.resize(...size.map(Number)) }
|
||||
this.canvasContent = (svgString) => { /* noop */ }
|
||||
this.canvasRulers = (bool) => { /* noop */ }
|
||||
|
||||
|
||||
this.clean = (warn = true) => {
|
||||
|
|
|
|||
|
|
@ -831,6 +831,9 @@ var getId, getNextId, call;
|
|||
if (events[event]) {
|
||||
return events[event](this, arg);
|
||||
}
|
||||
//else {
|
||||
// console.log("event: " + event + " not found", events)
|
||||
//}
|
||||
};
|
||||
|
||||
// Function: bind
|
||||
|
|
@ -3075,6 +3078,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
|
|||
{
|
||||
canvas.addClones = false;
|
||||
window.removeEventListener("keyup", canvas.removeClones)
|
||||
workarea.className = state.get("canvasMode");
|
||||
selectedElements = selectedElements.filter(Boolean)
|
||||
if(evt.button === 2) return;
|
||||
var tempJustSelected = justSelected;
|
||||
|
|
@ -5935,11 +5939,11 @@ this.setSvgString = function(xmlString) {
|
|||
var opacity = background.attr("fill-opacity")
|
||||
opacity = opacity ? parseInt(opacity)*100 : 100
|
||||
fill = this.getPaint(background.attr("fill"), opacity, "canvas")
|
||||
methodDraw.paintBox.canvas.setPaint(fill)
|
||||
editor.paintBox.canvas.setPaint(fill)
|
||||
}
|
||||
else {
|
||||
fill = this.getPaint("none", 100, "canvas")
|
||||
methodDraw.paintBox.canvas.setPaint(fill)
|
||||
editor.paintBox.canvas.setPaint(fill)
|
||||
}
|
||||
|
||||
batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
|
||||
|
|
|
|||
Loading…
Reference in New Issue