diff --git a/src/js/Keyboard.js b/src/js/Keyboard.js
index fd0b375..d409ec9 100644
--- a/src/js/Keyboard.js
+++ b/src/js/Keyboard.js
@@ -1,4 +1,62 @@
MD.Keyboard = function(){
+
+ const keys = {
+ "v": { name: "Select tool", cb: ()=> state.set("canvasMode", "select") },
+ "q": { name: "Freehand tool", cb: ()=> state.set("canvasMode", "fhpath") },
+ "l": { name: "Line tool", cb: ()=> state.set("canvasMode", "fhplineath")},
+ "r": { name: "Rectangle tool", cb: ()=> state.set("canvasMode", "rect")},
+ "o": { name: "Ellipse tool", cb: ()=> state.set("canvasMode", "ellipse")},
+ "s": { name: "Shape tool", cb: ()=> state.set("canvasMode", "shapelib")},
+ "p": { name: "Path tool", cb: ()=> state.set("canvasMode", "path")},
+ "t": { name: "Text tool", cb: ()=> state.set("canvasMode", "text")},
+ "z": { name: "Zoom tool", cb: ()=> state.set("canvasMode", "zoom")},
+ "e": { name: "Eyedropper tool", cb: ()=> state.set("canvasMode", "eyedropper")},
+ "x": { name: "Switch fill/stroke", cb: ()=> editor.switchPaint()},
+ "alt": { name: false, cb: ()=> $("#workarea").toggleClass("out", canvasMode === "zoom" )},
+ "cmd_s": { name: "Save SVG File", cb: ()=> editor.save()},
+ "cmd_z": { name: "Undo", cb: ()=> editor.undo()},
+ "cmd_y": { name: "Redo", cb: ()=> editor.redo()},
+ "cmd_shift_z": { name: "Redo", cb: ()=> editor.redo()},
+ "cmd_c": { name: "Copy", cb: ()=> editor.copySelected()},
+ "cmd_x": { name: "Cut", cb: ()=> editor.cutSelected()},
+ "cmd_v": { name: "Paste", cb: ()=> editor.pasteSelected()},
+ "cmd_d": { name: "Duplicate", cb: ()=> editor.duplicateSelected()},
+ "cmd_u": { name: "View source", cb: ()=> editor.source()},
+ "cmd_a": { name: "Select All", cb: ()=> svgCanvas.selectAllInCurrentLayer()},
+ "cmd_b": { name: "Set bold text", cb: ()=> editor.text.setBold()},
+ "cmd_i": { name: "Set italic text", cb: ()=> editor.text.setItalic()},
+ "cmd_g": { name: "Group selected", cb: ()=> editor.groupSelected()},
+ "cmd_shift_g": { name: "Ungroup", cb: ()=> editor.ungroupSelected()},
+ "cmd_o": { name: "Open SVG File", cb: ()=> editor.import.open()},
+ "cmd_k": { name: "Place image", cb: ()=> editor.import.place()},
+ "backspace": { name: "Delete", cb: ()=> editor.deleteSelected()},
+ "ctrl_arrowleft": { name: "Rotate -1deg", cb: ()=> editor.rotateSelected(0,1)},
+ "ctrl_arrowright": { name: "Rotate +1deg", cb: ()=> editor.rotateSelected(1,1)},
+ "ctrl_shift_arrowleft": { name: "Rotate -5deg", cb: ()=> editor.rotateSelected(0,5)},
+ "ctrl_shift_arrowright": { name: "Rotate +5deg ", cb: ()=> editor.rotateSelected(1,5)},
+ "shift_o": { name: "Next item", cb: ()=> svgCanvas.cycleElement(0)},
+ "shift_p": { name: "Prev item", cb: ()=> svgCanvas.cycleElement(1)},
+ "shift_r": { name: "Show/hide rulers", cb: ()=> editor.rulers.toggleRulers()},
+ "cmd_+": { name: "Zoom in", cb: ()=> editor.zoom.multiply(1.5)},
+ "cmd_-": { name: "Zoom out", cb: ()=> editor.zoom.multiply(0.75)},
+ "cmd_=": { name: "Actual size", cb: ()=> editor.zoom.reset()},
+ "arrowleft": { name: "Nudge left", cb: ()=> editor.moveSelected(-1,0)},
+ "arrowright": { name: "Nudge right", cb: ()=> editor.moveSelected(1,0)},
+ "arrowup": { name: "Nudge up", cb: ()=> editor.moveSelected(0,-1)},
+ "arrowdown": { name: "Nudge down", cb: ()=> editor.moveSelected(0,1)},
+ "shift_arrowleft": {name: "Jump left", cb: () => editor.moveSelected(state.get("canvasSnapStep") * -1, 0)},
+ "shift_arrowright": {name: "Jump right", cb: () => editor.moveSelected(state.get("canvasSnapStep") * 1, 0)},
+ "shift_arrowup": {name: "Jump up", cb: () => editor.moveSelected(0, state.get("canvasSnapStep") * -1)},
+ "shift_arrowdown": {name: "Jump down", cb: () => editor.moveSelected(0, state.get("canvasSnapStep") * 1)},
+ "cmd_arrowup":{ name: "Bring forward", cb: () => editor.moveUpSelected()},
+ "cmd_arrowdown":{ name: "Send backward", cb: () => editor.moveDownSelected()},
+ "cmd_shift_arrowup":{ name: "Bring to front", cb: () => editor.moveToTopSelected()},
+ "cmd_shift_arrowdown":{ name: "Send to back", cb: () => editor.moveToBottomSelected()},
+ "escape": { name: false, cb: ()=> editor.escapeMode()},
+ "enter": { name: false, cb: ()=> editor.escapeMode()},
+ " ": { name: "Pan canvas", cb: ()=> editor.pan.startPan()},
+ };
+
document.addEventListener("keydown", function(e){
if ($("#color_picker").is(":visible")) return e;
const modKey = !svgedit.browser.isMac() ? "ctrlKey" : "metaKey";
@@ -6,67 +64,18 @@ MD.Keyboard = function(){
const shift = e.shiftKey ? "shift_" : "";
const key = cmd + shift + e.key.toLowerCase();
const canvasMode = state.get("canvasMode");
- const keys = {
- v: ()=> state.set("canvasMode", "select"),
- q: ()=> state.set("canvasMode", "fhpath"),
- l: ()=> state.set("canvasMode", "line"),
- r: ()=> state.set("canvasMode", "rect"),
- o: ()=> state.set("canvasMode", "ellipse"),
- s: ()=> state.set("canvasMode", "shapelib"),
- p: ()=> state.set("canvasMode", "path"),
- t: ()=> state.set("canvasMode", "text"),
- z: ()=> state.set("canvasMode", "zoom"),
- e: ()=> state.set("canvasMode", "eyedropper"),
- x: ()=> editor.switchPaint(),
- "alt": ()=> { if (canvasMode === "zoom") $("#workarea").addClass("out") },
- "cmd_s": ()=> editor.save(),
- "cmd_z": ()=> editor.undo(),
- "cmd_shift_z": ()=> editor.redo(),
- "cmd_c": ()=> editor.copySelected(),
- "cmd_x": ()=> editor.cutSelected(),
- "cmd_v": ()=> editor.pasteSelected(),
- "cmd_d": ()=> editor.duplicateSelected(),
- "cmd_u": ()=> editor.modal.viewSource(),
- "cmd_a": ()=> svgCanvas.selectAllInCurrentLayer(),
- "cmd_b": ()=> editor.text.setBold(),
- "cmd_i": ()=> editor.text.setItalic(),
- "cmd_g": ()=> editor.groupSelected(),
- "cmd_o": ()=> editor.import.open(),
- "cmd_k": ()=> editor.import.place(),
- "cmd_shift_g": ()=> editor.ungroupSelected(),
- "backspace": () => editor.deleteSelected(),
- "ctrl_arrowleft": () => editor.rotateSelected(0,1),
- "ctrl_arrowright": () => editor.rotateSelected(1,1),
- "ctrl_shift_arrowleft": () => editor.rotateSelected(0,5),
- "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),
- "arrowleft": () => editor.moveSelected(-1,0),
- "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),
- "shift_arrowdown": () => editor.moveSelected(0, state.get("canvasSnapStep") * 1),
- "escape": () => editor.escapeMode(),
- "enter": () => editor.escapeMode(),
- " ": ()=> editor.pan.startPan(),
- };
+
+ const modalIsOpen = Object.values(editor.modal).filter((modal) => {
+ const isHidden = modal.el.classList.contains("hidden");
+ if (!isHidden && key === "cmd_enter") modal.confirm();
+ if (!isHidden && key === "escape") modal.close();
+ return !isHidden;
+ }).length;
- // keyboard shortcut exists
- if (keys[key]) {
- if (editor.modal.isVisible()) return;
+ // keyboard shortcut exists for app
+ if (!modalIsOpen && keys[key]) {
e.preventDefault();
- keys[key]();
+ keys[key].cb();
}
});
@@ -85,4 +94,41 @@ MD.Keyboard = function(){
})
+ // modal shortcuts
+ const shortcutEl = document.getElementById("shortcuts");
+ const docFrag = document.createDocumentFragment();
+ for (const key in keys) {
+ const name = keys[key].name;
+ if (!name) continue;
+ const shortcut = document.createElement("div");
+ shortcut.classList.add("shortcut")
+ const chords = key.split("_");
+ const shortcutKeys = document.createElement("div");
+ shortcutKeys.classList.add("shortcut-keys")
+ chords.forEach(key => {
+ const shortcutKey = document.createElement("div");
+ shortcutKey.classList.add("shortcut-key");
+ if (key === "arrowright") key = "→";
+ if (key === "arrowleft") key = "←";
+ if (key === "arrowup") key = "↑";
+ if (key === "arrowdown") key = "↓";
+ if (key === " ") key = "SPACEBAR";
+ if (key === "shift") key = "⇧";
+ if (key === "cmd") key = svgedit.browser.isMac ? "⌘" : "Ctrl";
+ shortcutKey.textContent = key;
+ shortcutKeys.appendChild(shortcutKey);
+ shortcut.appendChild(shortcutKeys);
+ });
+
+ const shortcutName = document.createElement("div");
+ shortcutName.classList.add("shortcut-name");
+ shortcutName.textContent = name;
+ shortcutKeys.appendChild(shortcutName);
+
+ docFrag.appendChild(shortcutKeys);
+ }
+
+ shortcutEl.appendChild(docFrag);
+
+
}
\ No newline at end of file
diff --git a/src/js/Menu.js b/src/js/Menu.js
index a859c04..c3c090a 100644
--- a/src/js/Menu.js
+++ b/src/js/Menu.js
@@ -8,7 +8,9 @@ MD.Menu = function(){
$('#tool_topath').on("click", editor.convertToPath);
$('#tool_group').on("click", editor.groupSelected);
$('#tool_ungroup').on("click", editor.ungroupSelected);
-
+ $('#tool_ungroup').on("click", editor.ungroupSelected);
+ if (window.location.host !== "editor.method.ac")
+ $('#modal_donate').hide();
// top dropdown menus
$('.menu_title')
.on('mousedown', function() {
diff --git a/src/js/Modal.js b/src/js/Modal.js
index 273cff7..452d596 100644
--- a/src/js/Modal.js
+++ b/src/js/Modal.js
@@ -1,66 +1,47 @@
-MD.Modal = function(){
+MD.Modal = function(config){
- var orig_source = false;
+ const el = document.createElement("div");
+ el.classList.add("modal", "hidden");
- $("button.cancel, .overlay").on("click", cancelOverlays);
- $("#tool_source").on("click", viewSource);
- $("#tool_source_save").on("click", saveSource);
+ const item = document.createElement("div");
+ item.innerHTML = config.html;
+ item.classList.add("modal-item");
+ el.appendChild(item);
- 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();
- };
+ el.addEventListener("click", close);
+
+ item.addEventListener("click", function(e){
+ e.stopPropagation();
+ });
- 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();
- }
+ document.body.appendChild(el);
- 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();
- }
- };
-
- function isVisible(){
- return $('#svg_source_editor').is(":visible");
+ function open(){
+ el.classList.remove("hidden");
}
- this.cancelOverlays = cancelOverlays;
- this.isVisible = isVisible;
- this.viewSource = viewSource;
- this.saveSource = saveSource;
+ function close(){
+ el.classList.add("hidden");
+ }
+ function confirm(cb){
+ if (cb) cb();
+ close();
+ }
+
+ this.open = open;
+ this.close = close;
+ this.confirm = confirm;
+ this.cb = config.cb || function(){};
+ this.el = el;
+
+ if (config.js) {
+ const el = this.el;
+ config.js(el);
+ }
+
+ return this
}
\ No newline at end of file
diff --git a/src/js/dao.js b/src/js/dao.js
index b5613cc..91d8973 100644
--- a/src/js/dao.js
+++ b/src/js/dao.js
@@ -7,7 +7,7 @@ const dao = [
label: "Canvas ID",
type: "id",
default: "",
- private: false,
+ private: true,
save: true
},
diff --git a/src/js/dialog.js b/src/js/dialog.js
index f0ccbf9..c69ba26 100644
--- a/src/js/dialog.js
+++ b/src/js/dialog.js
@@ -9,14 +9,14 @@
var box = $('#dialog_box'), btn_holder = $('#dialog_buttons');
var dbox = function(type, msg, callback, defText) {
- $('#dialog_content').html('
'+msg.replace(/\n/g,'
')+'
')
+ $('#dialog_content').html(msg)
.toggleClass('prompt',(type==='prompt'));
btn_holder.empty();
var ok = $('
').appendTo(btn_holder);
if(type != 'alert') {
- $('
')
+ $('
')
.appendTo(btn_holder)
.on("click touchstart", function() { box.hide();callback(false)});
}
diff --git a/src/js/editor.js b/src/js/editor.js
index 2ee1607..00efa4f 100644
--- a/src/js/editor.js
+++ b/src/js/editor.js
@@ -9,7 +9,7 @@ MD.Editor = function(){
function clear(){
var dims = state.get("canvasSize");
- $.confirm("
Do you want to clear the drawing? \nThis will also erase your undo history", function(ok) {
+ $.confirm("
Do you want to clear the drawing? This will also erase your undo history
", function(ok) {
if(!ok) return;
state.set("canvasMode", "select")
svgCanvas.clear();
@@ -135,6 +135,7 @@ MD.Editor = function(){
};
function escapeMode(){
+ for (key in editor.modal) editor.modal[key].close();
state.set("canvasMode", "select");
state.set("canvasContent", svgCanvas.getSvgString())
}
@@ -310,6 +311,29 @@ MD.Editor = function(){
}
}
+ function about(){
+ editor.modal.about.open();
+ }
+
+ function configure(){
+ //const props = dao.filter
+ editor.modal.configure.open();
+ }
+
+ function shortcuts(){
+ editor.modal.shortcuts.open();
+ }
+
+ function donate(){
+ editor.modal.donate.open();
+ }
+
+ function source(){
+ const textarea = editor.modal.source.el.querySelector("textarea");
+ textarea.value = svgCanvas.getSvgString();
+ editor.modal.source.open();
+ }
+
this.selectedChanged = selectedChanged;
this.elementChanged = elementChanged;
this.changeAttribute = changeAttribute;
@@ -340,6 +364,12 @@ MD.Editor = function(){
this.toggleWireframe = toggleWireframe;
this.groupSelected = groupSelected;
this.ungroupSelected = ungroupSelected;
+ this.about = about;
+ this.configure = configure;
+ this.shortcuts = shortcuts;
+ this.donate = donate;
+ this.source = source;
+
this.export = function(){
if(window.canvg) {
svgCanvas.rasterExport();
diff --git a/src/js/modalbackup.js b/src/js/modalbackup.js
new file mode 100644
index 0000000..5016980
--- /dev/null
+++ b/src/js/modalbackup.js
@@ -0,0 +1,62 @@
+
+ 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();
+ }
+ };
+
+ function isVisible(){
+ return $('#svg_source_editor').is(":visible");
+ }
+
+ this.cancelOverlays = cancelOverlays;
+ this.isVisible = isVisible;
+ this.viewSource = viewSource;
+ this.saveSource = saveSource;
\ No newline at end of file
diff --git a/src/js/start.js b/src/js/start.js
index 70b170d..0af2a86 100644
--- a/src/js/start.js
+++ b/src/js/start.js
@@ -1,6 +1,89 @@
// globals
const svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"));
const editor = new MD.Editor();
+
+editor.modal = {
+ about: new MD.Modal({
+ html: `
+
About this application
+
Method Draw is a simple open source vector drawing application. Method Draw was forked from SVG-Edit several years ago with the goal of improving and modernizing the interface.
+
At this time (2021), the author (Mark MacKay ) is working on improving stability and improving the codebase, which contains a lot of legacy practices. The goal is to create a vector editor suitable for simple graphic design tasks.
+ `
+ }),
+ source: new MD.Modal({
+ html: `
+
+
+
+
+
+ Cancel
+ Apply Changes
+
+
+
`,
+ js: function(el){
+ el.children[0].classList.add("modal-item-source");
+ el.querySelector("#tool_source_save").addEventListener("click", function(){
+ var saveChanges = function() {
+ svgCanvas.clearSelection();
+ $('#svg_source_textarea').blur();
+ editor.zoom.multiply(1);
+ editor.rulers.update();
+ editor.paintBox.fill.prep();
+ editor.paintBox.stroke.prep();
+ editor.modal.source.close();
+ }
+
+ 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();
+ }
+ })
+ el.querySelector("#tool_source_cancel").addEventListener("click", function(){
+ editor.modal.source.close();
+ });
+ }
+ }),
+ configure: new MD.Modal({
+ html: `
+
Configuration
+
+ Erase all data
+
+
`,
+ js: function(el){
+ const input = el.querySelector("#configuration button.warning");
+ input.addEventListener("click", function(){
+ state.clean();
+ })
+ }
+ }),
+ donate: new MD.Modal({
+ html: `
+