From f0421482a38739b153daad8f4066379d5f11530c Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Tue, 9 Feb 2021 12:48:44 -0600 Subject: [PATCH] changes --- src/css/method-draw.css | 20 ++- src/index.html | 80 ++++++------ src/js/Canvas.js | 57 ++++++++- src/js/Keyboard.js | 15 ++- src/js/Menu.js | 8 +- src/js/Modal.js | 61 ++++++++++ src/js/PaintBox.js | 89 +++++++++++++- src/js/Panel.js | 32 ++++- src/js/Shapelib.js | 24 ++-- src/js/Toolbar.js | 1 - src/js/Zoom.js | 52 ++++++-- src/js/bindCanvas.js | 9 -- src/js/contextChanged.js | 25 ---- src/js/editor.js | 152 ++++++++++++++++++++--- src/js/elementTransition.js | 24 ---- src/js/embedapi.js | 173 -------------------------- src/js/exportHandler.js | 32 ----- src/js/eyedropper.js | 236 ++++++++++++++++++------------------ src/js/method-draw.js | 2 - src/js/rulers.js | 29 +++++ src/js/start.js | 18 ++- src/js/state.js | 1 + src/js/svgcanvas.js | 8 +- 23 files changed, 654 insertions(+), 494 deletions(-) create mode 100644 src/js/Modal.js delete mode 100644 src/js/bindCanvas.js delete mode 100644 src/js/contextChanged.js delete mode 100644 src/js/elementTransition.js delete mode 100644 src/js/embedapi.js delete mode 100644 src/js/exportHandler.js diff --git a/src/css/method-draw.css b/src/css/method-draw.css index 0f15ace..4209644 100644 --- a/src/css/method-draw.css +++ b/src/css/method-draw.css @@ -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; diff --git a/src/index.html b/src/index.html index 27dbef7..ca0cb4b 100644 --- a/src/index.html +++ b/src/index.html @@ -110,7 +110,7 @@
View

Ellipse

@@ -255,19 +255,19 @@

Line

@@ -279,11 +279,11 @@
@@ -299,7 +299,7 @@
@@ -315,11 +315,11 @@

Group

@@ -328,11 +328,11 @@

Edit Path

@@ -372,7 +372,7 @@ @@ -384,7 +384,7 @@ @@ -612,7 +612,7 @@
- + @@ -625,7 +625,7 @@
-
+

Copy the contents of this box into a text editor, then save the file with a .svg extension.

@@ -703,23 +703,21 @@ + - - - - - - + + + diff --git a/src/js/Canvas.js b/src/js/Canvas.js index 0cca500..62a72bf 100644 --- a/src/js/Canvas.js +++ b/src/js/Canvas.js @@ -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("
" + res.w + "×
" + res.h + "
"); + } + 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(); } diff --git a/src/js/Keyboard.js b/src/js/Keyboard.js index 81cedd6..0cb19ec 100644 --- a/src/js/Keyboard.js +++ b/src/js/Keyboard.js @@ -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){ diff --git a/src/js/Menu.js b/src/js/Menu.js index 80841fa..89fa9a4 100644 --- a/src/js/Menu.js +++ b/src/js/Menu.js @@ -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'); diff --git a/src/js/Modal.js b/src/js/Modal.js new file mode 100644 index 0000000..28166a9 --- /dev/null +++ b/src/js/Modal.js @@ -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; + + +} \ No newline at end of file diff --git a/src/js/PaintBox.js b/src/js/PaintBox.js index bec5df1..0a98d30 100644 --- a/src/js/PaintBox.js +++ b/src/js/PaintBox.js @@ -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': diff --git a/src/js/Panel.js b/src/js/Panel.js index c316728..89861e6 100644 --- a/src/js/Panel.js +++ b/src/js/Panel.js @@ -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); diff --git a/src/js/Shapelib.js b/src/js/Shapelib.js index e5c82d3..9539577 100644 --- a/src/js/Shapelib.js +++ b/src/js/Shapelib.js @@ -5,6 +5,11 @@ MD.Shapelib = function(){ var start_x, start_y; 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 = { @@ -56,7 +61,7 @@ MD.Shapelib = function(){ var cur_lib = library.basic; current_d = cur_lib.data.star_points_5 - + var mode_id = 'shapelib'; function loadIcons() { @@ -163,16 +168,13 @@ MD.Shapelib = function(){ $.each(categories, function(id, label) { cat_str += '
' + label + '
'; }); - - shape_cats.html(cat_str).children().bind('mouseup', function() { - var catlink = $(this); - catlink.siblings().removeClass('current'); - catlink.addClass('current'); - - loadLibrary(catlink.attr('data-cat')); - // Get stuff - - return false; + 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')); }); shape_cats.children().eq(0).addClass('current'); diff --git a/src/js/Toolbar.js b/src/js/Toolbar.js index d71a3af..ad1bcc2 100644 --- a/src/js/Toolbar.js +++ b/src/js/Toolbar.js @@ -15,7 +15,6 @@ MD.Toolbar = function(){ function showShapeLib(){ $("#tools_shapelib").show(); - $(window).one("mousedown", function(){$('#tools_shapelib').hide()}) } this.setMode = setMode; diff --git a/src/js/Zoom.js b/src/js/Zoom.js index 43e0687..9a9d42e 100644 --- a/src/js/Zoom.js +++ b/src/js/Zoom.js @@ -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"); } } diff --git a/src/js/bindCanvas.js b/src/js/bindCanvas.js deleted file mode 100644 index 43b4634..0000000 --- a/src/js/bindCanvas.js +++ /dev/null @@ -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]); \ No newline at end of file diff --git a/src/js/contextChanged.js b/src/js/contextChanged.js deleted file mode 100644 index 798b53c..0000000 --- a/src/js/contextChanged.js +++ /dev/null @@ -1,25 +0,0 @@ -var contextChanged = function(win, context) { - - var link_str = ''; - if(context) { - var str = ''; - link_str = '' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + ''; - - $(context).parentsUntil('#svgcontent > g').addBack().each(function() { - if(this.id) { - str += ' > ' + this.id; - if(this !== context) { - link_str += ' > ' + this.id + ''; - } else { - link_str += ' > ' + this.id; - } - } - }); - - cur_context = str; - } else { - cur_context = null; - } - $('#cur_context_panel').toggle(!!context).html(link_str); - -} \ No newline at end of file diff --git a/src/js/editor.js b/src/js/editor.js index 1ffcb88..587c877 100644 --- a/src/js/editor.js +++ b/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 = '' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + ''; + + $(context).parentsUntil('#svgcontent > g').addBack().each(function() { + if(this.id) { + str += ' > ' + this.id; + if(this !== context) { + link_str += ' > ' + this.id + ''; + } 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) { + $('', {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; } \ No newline at end of file diff --git a/src/js/elementTransition.js b/src/js/elementTransition.js deleted file mode 100644 index 2e64ea8..0000000 --- a/src/js/elementTransition.js +++ /dev/null @@ -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 - }); -}; \ No newline at end of file diff --git a/src/js/embedapi.js b/src/js/embedapi.js deleted file mode 100644 index 923ee78..0000000 --- a/src/js/embedapi.js +++ /dev/null @@ -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', {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); - } - }}); -}; \ No newline at end of file diff --git a/src/js/eyedropper.js b/src/js/eyedropper.js index 8a92400..6a343c1 100644 --- a/src/js/eyedropper.js +++ b/src/js/eyedropper.js @@ -1,6 +1,3 @@ -var methodDraw = {}; -methodDraw.addExtension = function(){} - /* * ext-eyedropper.js * @@ -16,123 +13,122 @@ methodDraw.addExtension = function(){} // 3) svg_editor.js // 4) svgcanvas.js -methodDraw.addExtension("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, - strokePaint: "black", strokeOpacity: 1.0, - strokeWidth: 5, strokeDashArray: null, - opacity: 1.0, - strokeLinecap: 'butt', - strokeLinejoin: 'miter' - }; - function getStyle(opts) { - // if we are in eyedropper mode, we don't want to disable the eye-dropper tool - var mode = svgCanvas.getMode(); - if (mode == "eyedropper") return; - var tool = $('#tool_eyedropper'); - - } - - var getPaint = function(color, opac, type) { - // update the editor's fill paint - var opts = null; - if (color.indexOf("url(#") === 0) { - var refElem = svgCanvas.getRefElem(color); - if(refElem) { - refElem = refElem.cloneNode(true); - } else { - refElem = $("#" + type + "_color defs *")[0]; - } - - opts = { alpha: opac }; - opts[refElem.tagName] = refElem; - } - else if (color.indexOf("#") === 0) { - opts = { - alpha: opac, - solidColor: color.substr(1) - }; - } - else { - opts = { - alpha: opac, - solidColor: 'none' - }; - } - return new $.jGraduate.Paint(opts); - }; - - return { - name: "eyedropper", - svgicons: "extensions/eyedropper-icon.xml", - buttons: [{ - id: "tool_eyedropper", - type: "mode", - title: "Eye Dropper Tool", - position: 8, - key: "I", - icon: "extensions/eyedropper.png", - events: { - "click": function() { - svgCanvas.setMode("eyedropper"); - } - } - }], - - mouseDown: function(opts) { - var mode = svgCanvas.getMode(); - var e = opts.event; - var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target; - if (mode == "eyedropper" && target) { - currentStyle.fillPaint = target.getAttribute("fill") || "white"; - currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0; - currentStyle.strokePaint = target.getAttribute("stroke") || 'none'; - currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0; - currentStyle.strokeWidth = target.getAttribute("stroke-width"); - currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray"); - currentStyle.strokeLinecap = target.getAttribute("stroke-linecap"); - currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin"); - currentStyle.opacity = target.getAttribute("opacity") || 1.0; - opts.selectedElements = opts.selectedElements.filter(Boolean) - 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) - return; - } - if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) { - var changes = {}; - var change = function(elem, attrname, newvalue) { - changes[attrname] = elem.getAttribute(attrname); - elem.setAttribute(attrname, newvalue); +MD.Eyedropper = function(S) { + var svgcontent = S.svgcontent, + svgns = "http://www.w3.org/2000/svg", + svgdoc = S.svgroot.parentNode.ownerDocument, + ChangeElementCommand = svgedit.history.ChangeElementCommand, + addToHistory = function(cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); }, + currentStyle = {fillPaint: "red", fillOpacity: 1.0, + strokePaint: "black", strokeOpacity: 1.0, + strokeWidth: 5, strokeDashArray: null, + opacity: 1.0, + strokeLinecap: 'butt', + strokeLinejoin: 'miter' }; - var batchCmd = new S.BatchCommand(); - opts.selectedElements.forEach(function(element){ - if (currentStyle.fillPaint) change(element, "fill", currentStyle.fillPaint); - if (currentStyle.fillOpacity) change(element, "fill-opacity", currentStyle.fillOpacity); - if (currentStyle.strokePaint) change(element, "stroke", currentStyle.strokePaint); - if (currentStyle.strokeOpacity) change(element, "stroke-opacity", currentStyle.strokeOpacity); - if (currentStyle.strokeWidth) change(element, "stroke-width", currentStyle.strokeWidth); - if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray); - if (currentStyle.opacity) change(element, "opacity", currentStyle.opacity); - if (currentStyle.strokeLinecap) change(element, "stroke-linecap", currentStyle.strokeLinecap); - if (currentStyle.strokeLinejoin) change(element, "stroke-linejoin", currentStyle.strokeLinejoin); - batchCmd.addSubCommand(new ChangeElementCommand(element, changes)); - changes = {}; - }); - 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) - addToHistory(batchCmd); - } + function getStyle(opts) { + // if we are in eyedropper mode, we don't want to disable the eye-dropper tool + var mode = svgCanvas.getMode(); + if (mode == "eyedropper") return; + var tool = $('#tool_eyedropper'); + + } + + var getPaint = function(color, opac, type) { + // update the editor's fill paint + var opts = null; + if (color.indexOf("url(#") === 0) { + var refElem = svgCanvas.getRefElem(color); + if(refElem) { + refElem = refElem.cloneNode(true); + } else { + refElem = $("#" + type + "_color defs *")[0]; + } + + opts = { alpha: opac }; + opts[refElem.tagName] = refElem; + } + else if (color.indexOf("#") === 0) { + opts = { + alpha: opac, + solidColor: color.substr(1) + }; + } + else { + opts = { + alpha: opac, + solidColor: 'none' + }; + } + return new $.jGraduate.Paint(opts); + }; + + return { + name: "eyedropper", + svgicons: "extensions/eyedropper-icon.xml", + buttons: [{ + id: "tool_eyedropper", + type: "mode", + title: "Eye Dropper Tool", + position: 8, + key: "I", + icon: "extensions/eyedropper.png", + events: { + "click": function() { + svgCanvas.setMode("eyedropper"); } } - }; -}); \ No newline at end of file + }], + + mouseDown: function(opts) { + var mode = svgCanvas.getMode(); + var e = opts.event; + var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target; + if (mode == "eyedropper" && target) { + currentStyle.fillPaint = target.getAttribute("fill") || "white"; + currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0; + currentStyle.strokePaint = target.getAttribute("stroke") || 'none'; + currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0; + currentStyle.strokeWidth = target.getAttribute("stroke-width"); + currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray"); + currentStyle.strokeLinecap = target.getAttribute("stroke-linecap"); + currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin"); + currentStyle.opacity = target.getAttribute("opacity") || 1.0; + opts.selectedElements = opts.selectedElements.filter(Boolean) + 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"); + editor.paintBox.fill.setPaint(fill) + editor.paintBox.stroke.setPaint(stroke) + return; + } + if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) { + var changes = {}; + var change = function(elem, attrname, newvalue) { + changes[attrname] = elem.getAttribute(attrname); + elem.setAttribute(attrname, newvalue); + }; + var batchCmd = new S.BatchCommand(); + opts.selectedElements.forEach(function(element){ + if (currentStyle.fillPaint) change(element, "fill", currentStyle.fillPaint); + if (currentStyle.fillOpacity) change(element, "fill-opacity", currentStyle.fillOpacity); + if (currentStyle.strokePaint) change(element, "stroke", currentStyle.strokePaint); + if (currentStyle.strokeOpacity) change(element, "stroke-opacity", currentStyle.strokeOpacity); + if (currentStyle.strokeWidth) change(element, "stroke-width", currentStyle.strokeWidth); + if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray); + if (currentStyle.opacity) change(element, "opacity", currentStyle.opacity); + if (currentStyle.strokeLinecap) change(element, "stroke-linecap", currentStyle.strokeLinecap); + if (currentStyle.strokeLinejoin) change(element, "stroke-linejoin", currentStyle.strokeLinejoin); + batchCmd.addSubCommand(new ChangeElementCommand(element, changes)); + changes = {}; + }); + var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill") + var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke") + editor.paintBox.fill.update(true) + editor.paintBox.stroke.update(true) + addToHistory(batchCmd); + } + } + } + }; +} \ No newline at end of file diff --git a/src/js/method-draw.js b/src/js/method-draw.js index f9954df..af3e41f 100644 --- a/src/js/method-draw.js +++ b/src/js/method-draw.js @@ -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) { diff --git a/src/js/rulers.js b/src/js/rulers.js index 045d472..bb530b3 100644 --- a/src/js/rulers.js +++ b/src/js/rulers.js @@ -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; } diff --git a/src/js/start.js b/src/js/start.js index 1ac92fa..1aad705 100644 --- a/src/js/start.js +++ b/src/js/start.js @@ -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")); \ No newline at end of file +state.set("canvasSize", state.get("canvasSize")); + +editor.rulers.update(); \ No newline at end of file diff --git a/src/js/state.js b/src/js/state.js index 50f43ed..4d78ff2 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -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) => { diff --git a/src/js/svgcanvas.js b/src/js/svgcanvas.js index e65b4fe..4c06b51 100644 --- a/src/js/svgcanvas.js +++ b/src/js/svgcanvas.js @@ -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));