Set canvas size

svn2github · Mar 25, 2014 · 6cf6a64 · 6cf6a64
1 parent 7f02d71
commit 6cf6a64
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 16 deletions.
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
@@ -167,14 +167,11 @@ <h3 id="layersLabel">Layers</h3>
 			</a>
 		</p>
 
-		<button id="tool_prefs_option">
-			Editor Options
-		</button>
 
 
-	</div>
-</div>
- -->
+	</div> 
+</div>-->
+
 
 
 <div id="tools_top" class="tools_panel">
@@ -237,7 +234,7 @@ <h3 id="layersLabel">Layers</h3>
 				<button></button>
 		</div>		
 
-<!-- 		
+
 		<div id="xy_panel" class="toolset">
 			<label>
 				x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
@@ -246,7 +243,7 @@ <h3 id="layersLabel">Layers</h3>
 				y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
 			</label>
 		</div>
- -->	
+
 	</div>
 	<!-- Buttons when multiple elements are selected -->
 	<div id="multiselected_panel">
@@ -276,7 +273,7 @@ <h3 id="layersLabel">Layers</h3>
 	</div>
 
 	<div id="rect_panel">
-<!-- 		<div class="toolset">
+		<div class="toolset">
 			<label id="rect_width_tool" title="Change rectangle width">
 				<span id="rwidthLabel" class="icon_label"></span>
 				<input id="rect_width" class="attr_changer" size="3" data-attr="width"/>
@@ -286,7 +283,7 @@ <h3 id="layersLabel">Layers</h3>
 				<input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
 			</label>
 		</div>
- -->		
+
 		<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius" class="toolset">
 			<span class="icon_label"></span>
 			<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
@@ -314,7 +311,7 @@ <h3 id="layersLabel">Layers</h3>
 		</div>
 	</div>
 
-<!-- 	<div id="circle_panel">
+	<div id="circle_panel">
 		<div class="toolset">
 			<label id="tool_circle_cx">cx:
 			<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
@@ -329,8 +326,8 @@ <h3 id="layersLabel">Layers</h3>
 			</label>
 		</div>
 	</div>
- -->
-<!-- 	<div id="ellipse_panel">
+
+	<div id="ellipse_panel">
 		<div class="toolset">
 			<label id="tool_ellipse_cx">cx:
 			<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
@@ -348,7 +345,7 @@ <h3 id="layersLabel">Layers</h3>
 			</label>
 		</div>
 	</div>
- -->
+
 <!-- 	<div id="line_panel">
 		<div class="toolset">
 			<label id="tool_line_x1">x1:
@@ -450,11 +447,18 @@ <h3 id="layersLabel">Layers</h3>
 	</div>
  -->
 
+	<button id="snap">
+		Editor Options
+	</button>
+
+	<label>Canvas size: <input type="text" id="canvas_width" size="6"/> x <input type="text" id="canvas_height" size="6"/></label>
+
 </div> <!-- tools_top -->
-	<div id="cur_context_panel">
+
+<!-- 	<div id="cur_context_panel">
 		
 	</div>
-
+ -->
 
 <div id="tools_left" class="tools_panel">
 	<div class="tool_button" id="tool_select" title="Select Tool"></div>

diff --git a/editor/svg-editor.js b/editor/svg-editor.js
@@ -1755,6 +1755,50 @@ TO-DOS
 				} else {
 					$('#selLayerNames').attr('disabled', 'disabled');
 				}
+
+				// TODO move
+				$.fn.editable = function(get, set) {
+					var $this = $(this);
+					var data = $this.data('editable');
+					if (data && data.get) {
+						// Just update
+						$this.val(data.get());
+					}
+					else {
+						$this.data('editable', {get:get, set:set});
+						$this.val(get())
+						.blur(function(){
+							set($this.val());
+						})
+						.keydown(function(e){
+							if (e.keyCode === 13) {
+								set($this.val());
+								$this.blur()
+							}
+							else if (e.keyCode === 27) {
+								$this.val(get());
+								$this.blur();
+							}
+						});						
+					}
+					return $this;
+				}
+
+				// var res = svgCanvas.getResolution();
+
+				$('#canvas_height').editable(
+					function(){return svgCanvas.getResolution().h;},
+					function(v) {
+						svgCanvas.setResolution(svgCanvas.getResolution().w, v);
+					}
+				);
+				$('#canvas_width').editable(
+					function(){return svgCanvas.getResolution().w;},
+					function(v) {
+						svgCanvas.setResolution(v, svgCanvas.getResolution().h);
+					}
+				);
+
 			};
 
 			var updateWireFrame = function() {