Copy area by ctrl+c [Peter Klein]

035media · May 8, 2014 · 59d0e91 · 59d0e91
1 parent 564332a
commit 59d0e91
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -4,10 +4,12 @@ Summer html image map creator
 
 Released under the GPL3 (GPL3.txt)
 
-Loading an image
+Main
 ----------------
 `F5` — reload the page and display the form for loading image again
 
+`S` — save map params in localStorage
+
 Drawing mode (rectangle / circle / polygon)
 -------------------------------------------
 `ENTER` — stop polygon drawing (or click on first helper)
@@ -25,7 +27,9 @@ Editing mode
 
 `SHIFT` — edit and save proportions for rectangle
 
-`i` — edit attributes of a selected area (or dblclick on an area)
+`I` — edit attributes of a selected area (or dblclick on an area)
+
+`CTRL` + `C` — a copy of the selected area
 
 `↑` — move a selected area up
 

diff --git a/index.htm b/index.htm
@@ -127,7 +127,7 @@ <h5>Loading areas</h5>
 		<section>
 			<h2>Main</h2>
 			<p><span class="key">F5</span> &mdash; reload the page and display the form for loading image again</p>
-			<p><span class="key">s</span> &mdash; save map params in localStorage</p>
+			<p><span class="key">S</span> &mdash; save map params in localStorage</p>
 		</section>
 		<section>
 			<h2>Drawing mode (rectangle / circle / polygon)</h2>
@@ -140,7 +140,8 @@ <h2>Editing mode</h2>
 			<p><span class="key">DELETE</span> &mdash; remove a selected area</p>
 			<p><span class="key">ESC</span> &mdash; cancel editing of a selected area</p>
 			<p><span class="key">SHIFT</span> &mdash; edit and save proportions for rectangle</p>
-			<p><span class="key">i</span> &mdash; edit attributes of a selected area (or dblclick on an area)</p>
+			<p><span class="key">I</span> &mdash; edit attributes of a selected area (or dblclick on an area)</p>
+			<p><span class="key">CTRL</span> + <span class="key">C</span> &mdash; a copy of the selected area</p>
 			<p><span class="key">&uarr;</span> &mdash; move a selected area up</p>
 			<p><span class="key">&darr;</span> &mdash; move a selected area down</p>
 			<p><span class="key">&larr;</span> &mdash; move a selected area to the left</p>
@@ -149,7 +150,7 @@ <h2>Editing mode</h2>
 	</div>
 	<footer>
 		<a href="http://github.com/summerstyle/summer">Summer html image map creator 0.5</a><br />
-		&copy; 2013 Vera Lobatcheva<br />
+		&copy; 2014 Vera Lobatcheva<br />
 		GPL3 License
 	</footer>
 </div>

diff --git a/scripts.js b/scripts.js
@@ -172,7 +172,8 @@ function SummerHtmlImageMapCreator() {
 				RIGHT  : 39,
 				DELETE : 46,
 				I      : 73,
-				S      : 83
+				S      : 83,
+				C      : 67
 			};
 
 		function recalcOffsetValues() {
@@ -301,83 +302,113 @@ function SummerHtmlImageMapCreator() {
 
 		/* Add keydown event for document */
 		function onDocumentKeyDown(e) {
+			var ctrlDown = e.ctrlKey || e.metaKey // PC || Mac
+
 			switch (e.keyCode) {
-			case KEYS.F1: /* F1 key */
-				help.show();
-				e.preventDefault();
+				case KEYS.F1: /* F1 key */
+					help.show();
+					e.preventDefault();
+
+					break;
 
-				break;
-
-			case KEYS.ESC: /* ESC key */
-				help.hide();
-				if (is_draw) {
-					is_draw = false;
-					new_area.remove();
-					objects.pop();
-					app.removeAllEvents();
-				} else if (mode === 'editing') {
-					selected_area.redraw();
-					app.removeAllEvents();
-				};
+				case KEYS.ESC: /* ESC key */
+					help.hide();
+					if (is_draw) {
+						is_draw = false;
+						new_area.remove();
+						objects.pop();
+						app.removeAllEvents();
+					} else if (mode === 'editing') {
+						selected_area.redraw();
+						app.removeAllEvents();
+					};
+
+					break;
 
-				break;
-
-			case KEYS.TOP: /* Top arrow key */
-				if (mode === 'editing' && selected_area) {
-					selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](0, -1)));
-					e.preventDefault();
-				}
+				case KEYS.TOP: /* Top arrow key */
+					if (mode === 'editing' && selected_area) {
+						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](0, -1)));
+						e.preventDefault();
+					}
+
+					break;
 
-				break;
-
-			case KEYS.BOTTOM: /* Bottom arrow key */
-				if (mode === 'editing' && selected_area) {
-					selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](0, 1)));
-					e.preventDefault();
-				}
-				break;
-
-			case KEYS.LEFT: /* Left arrow key */
-				if (mode === 'editing' && selected_area) {
-					selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](-1, 0)));
-					e.preventDefault();
-				}
+				case KEYS.BOTTOM: /* Bottom arrow key */
+					if (mode === 'editing' && selected_area) {
+						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](0, 1)));
+						e.preventDefault();
+					}
+					break;
 
-				break;
-
-			case KEYS.RIGHT: /* Right arrow key */
-				if (mode === 'editing' && selected_area) {
-					selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](1, 0)));
-					e.preventDefault();
-				}
+				case KEYS.LEFT: /* Left arrow key */
+					if (mode === 'editing' && selected_area) {
+						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](-1, 0)));
+						e.preventDefault();
+					}
+
+					break;
 
-				break;
-
-			case KEYS.DELETE: /* DELETE key */
-				if (mode === 'editing' && selected_area) {
-					app.removeObject(selected_area);
-					selected_area = null;
-					info.unload();
-				}
+				case KEYS.RIGHT: /* Right arrow key */
+					if (mode === 'editing' && selected_area) {
+						selected_area.setParams(selected_area.dynamicEdit(selected_area['move'](1, 0)));
+						e.preventDefault();
+					}
+
+					break;
 
-				break;
-
-			case KEYS.I: /* i (edit info) key */
-				if (mode === 'editing' && selected_area) {
-					var params = selected_area.params,
-						x = params.x || params.cx || params[0],
-						y = params.y || params.cy || params[1];
+				case KEYS.DELETE: /* DELETE key */
+					if (mode === 'editing' && selected_area) {
+						app.removeObject(selected_area);
+						selected_area = null;
+						info.unload();
+					}
+
+					break;
+
+				case KEYS.I: /* i (edit info) key */
+					if (mode === 'editing' && selected_area) {
+						var params = selected_area.params,
+							x = params.x || params.cx || params[0],
+							y = params.y || params.cy || params[1];
+
+						info.load(selected_area, x + app.getOffset('x'), y + app.getOffset('y'));
+					}
+
+					break;
+
+				case KEYS.S: /* s (save) key */
+					app.saveInLocalStorage();
+
+					break;
+
+				case KEYS.C: /* CTRL+C copy */
+					if (mode === 'editing' && selected_area && ctrlDown) {
+						var Constructor = null,
+							area_params = selected_area.toJSON(),
+							area;
 
-					info.load(selected_area, x + app.getOffset('x'), y + app.getOffset('y'));
-				}
+						switch (area_params.type) {
+							case 'rect':
+								Constructor = Rect;
+								break;
+
+							case 'circle':
+								Constructor = Circle;
+								break;
+
+							case 'polygon':
+								Constructor = Polygon;
+								break;
+						}
+
+						if (Constructor) {
+							Constructor.createFromSaved(area_params);
+							selected_area.setParams(selected_area.move(10, 10));
+							selected_area.redraw();
+						}
+					}
 
-				break;
-
-			case KEYS.S: /* s (save) key */
-				app.saveInLocalStorage();
-
-				break;
-
+					break;
 			}
 		}