/
Keyboard.js
135 lines (124 loc) · 7.07 KB
/
Keyboard.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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: "Focus fill/stroke", cb: ()=> editor.focusPaint()},
"shift_x": { name: "Switch fill/stroke", cb: ()=> editor.switchPaint()},
"alt": { name: false, cb: ()=> $("#workarea").toggleClass("out", state.get("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: (e)=> editor.pan.startPan(e)},
};
document.addEventListener("keydown", function(e){
const exceptions = $(":focus").length || $("#color_picker").is(":visible");
if (exceptions) return false;
const modKey = !svgedit.browser.isMac() ? "ctrlKey" : "metaKey";
const cmd = e[modKey] ? "cmd_" : "";
const shift = e.shiftKey ? "shift_" : "";
const key = cmd + shift + e.key.toLowerCase();
const canvasMode = state.get("canvasMode");
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 for app
if (!modalIsOpen && keys[key]) {
e.preventDefault();
keys[key].cb();
}
});
document.addEventListener("keyup", function(e){
if ($("#color_picker").is(":visible")) return e;
const canvasMode = state.get("canvasMode");
const key = e.key.toLowerCase();
const keys = {
"alt": ()=> $("#workarea").removeClass("out"),
" ": ()=> editor.pan.stopPan(),
}
if (keys[key]) {
e.preventDefault();
keys[key]();
}
})
// 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);
}