image zoom

editor.html

@@ -22,7 +22,8 @@
   <script src="javascript/level_urls.js"></script>
   <script>
     const MIN_WIDTH = 500;
-    const MAX_WIDTH = Math.min(1000, window.innerHeight - 390);
+    const MAX_WIDTH = Math.min(1000, window.innerHeight - 420);
+    //const MAX_WIDTH = Math.min(1000, window.innerHeight - 320);
 
     $(function() {
 	var editorContainer = document.getElementById('editor');

javascript/editor.js

@@ -20,7 +20,7 @@ const EDITOR_CONTROLS_HTML = `
 	  </td>
 	</tr>
 	<tr>
-	  <th align="right">Save&nbsp;Game</th>
+	  <th align="right">Save&nbsp;Level</th>
 	  <td style="width: 100%">
             <input type="text" id="editorSaveFileName"  style="width: 100%"
                placeholder="Filename">
@@ -30,7 +30,7 @@ const EDITOR_CONTROLS_HTML = `
           </td>
 	</tr>
 	<tr>
-	  <th align="right">Load&nbsp;Game</th>
+	  <th align="right">Load&nbsp;Level</th>
 	  <td colspan="2">
 	    <input type="file" id="editorLoad" accept="application/json">
 	  </td>
@@ -44,23 +44,31 @@ const EDITOR_CONTROLS_HTML = `
       </table>
       <table class="controls">
 	<tr>
-	  <th align="right">Load Image</th>
+	  <th align="right">Load&nbsp;Image</th>
 	  <td>
 	    <input type="file" id="editorLoadBackground" accept="image/*">
 	  </td>
-	  <th align="right" rowspan="3">Background Color</th>
+	  <th align="right" rowspan="3" style="width:0">Background<br>Color</th>
 	  <td rowspan="3" width="0">
 	    <div id="editorBackgroundColorPicker"></div>
 	  </td>
 	</tr>
 	<tr>
-	  <th align="right">Image Opacity</th>
+	  <th align="right">Image&nbsp;Opacity</th>
 	  <td>
 	    <div id="editorBackgroundOpacitySlider" class="slider"></div>
 	  </td>
 	</tr>
 	<tr>
-	  <th align="right">Hide Dots</th>
+	  <th align="right">Image&nbsp;Zoom</th>
+	  <td>
+	    <div id="editorBackgroundZoomSlider" class="slider">
+             <div id="editorBackgroundZoomHandle" class="ui-slider-handle"</div>
+            </div>
+	  </td>
+	</tr>
+	<tr>
+	  <th align="right">Hide&nbsp;Dots</th>
 	  <td>
 	    <input type="checkbox" id="editorHideDots"/>
 	  </td>
@@ -102,19 +110,21 @@ class LevelEditor {
 	this.mouseHandler = new MouseHandler(this);
 	this.image = null;
 	this.imageFilename = null;
-	this.imageOpacity = 100;
+	this.imageOpacity = 50;
 	this.colorLookupCanvas = new ColorLookupCanvas(width, height, () => this.updateTriColors());
 	this.graph.setAlpha(1.0);
 	this.thumbnailPngDataUrl = null;
+	this.backgroundImageZoom = 1;
 	this.addControls();
 	this.history = [];
     }
 
     // Helper for the constructor -- add controls for the editor.
     addControls() {
+	const controlWidth = Math.max(this.width, 730);
 	const $controls = $(EDITOR_CONTROLS_HTML);
 	$(this.container).append($controls);
-	$(this.container).find(".controls").css({width: this.width});
+	$(this.container).find(".controls").css({width: controlWidth});
 	$("#editorUndo").click(e => { this.undo(); });
 	$("#editorSaveFileName").keypress((e) => {
 	    const filename = $("#editorSaveFileName").val();
@@ -169,11 +179,19 @@ class LevelEditor {
 	$("#editorBackgroundOpacitySlider").slider({
 	    min: 0,
 	    max: 100,
-	    value: 100,
+	    value: this.imageOpacity,
 	    change: (event, ui) => {
 		this.setImageOpacity(ui.value/100.0);
 	    }
 	});
+	$("#editorBackgroundZoomSlider").slider({
+	    min: 30,
+	    max: 300,
+	    value: 100,
+	    change: (event, ui) => {
+		this.setBackgroundImageZoom(ui.value/100.0);
+	    },
+	});
 	$("#editorHideDots").change(() => {
 	    if ($("#editorHideDots").is(':checked')) {
 		this.graph.dots.forEach(dot => dot.hide());
@@ -314,6 +332,7 @@ class LevelEditor {
 	    backgroundColor: this.backgroundColor,
 	    title: $("#editorTitle").val(),
 	    thumbnail: this.thumbnailPngDataUrl,
+	    imageZoom: this.backgroundImageZoom,
 	};
     }
 
@@ -339,8 +358,11 @@ class LevelEditor {
 	    jsonString,
 	    (x, y) => this.addDot(x, y),
 	    (corners, color) => this.addTri(corners, color));
+	this.backgroundImageZoom = extras.backgroundImageZoom ?? 1;
+	$("#editorBackgroundZoomSlider").slider("value", this.backgroundImageZoom * 100);
 	if (extras.imageFilename) {
-	    this.setImage("backgrounds/"+extras.imageFilename);
+	    this.setImage("backgrounds/"+extras.imageFilename,
+			  this.backgroundImageZoom);
 	}
 	if (extras.backgroundColor) {
 	    this.setBackgroundColor(extras.backgroundColor);
@@ -573,7 +595,7 @@ class LevelEditor {
 	tri.setColor(this.colorLookupCanvas.getTriColor(tri.corners));
     }
 
-    setImage(path, filename) {
+    setImage(path, filename, zoomLevel=1) {
 	const oldPath = this.image ? this.image.attr('href') : null;
 	this.history.push(new EditorHistoryEvent('setImage', {
 	    oldImage: {path: oldPath, filename: this.imageFilename},
@@ -588,15 +610,28 @@ class LevelEditor {
 	} else {
 	    var image = this.draw.image(path);
 	    image.node.onerror = function() {
-		console.log("Unable to set image");
+		console.log("Unable to set image", path, filename);
 		image.remove();
 	    }
 	    this.image = image;
-	    image.size(this.width, this.height);
+	    this.image.size(this.width, this.height);
 	    image.attr('preserveAspectRatio', 'xMidYMid slice');
 	    image.opacity(this.imageOpacity);
 	    this.image.insertBefore(this.graph.layerMarkers.image);
 	    this.colorLookupCanvas.setImage(path);
+	    this.setBackgroundImageZoom(zoomLevel);
+	}
+    }
+
+    setBackgroundImageZoom(zoomLevel) {
+	this.backgroundImageZoom = zoomLevel;
+	$("#editorBackgroundZoomHandle").text(zoomLevel * 100);
+	if (this.image) {
+	    const path = this.image.attr('href');
+	    this.image.size(this.width * zoomLevel, this.height * zoomLevel);
+	    this.image.center(this.width/2, this.height/2);
+	    this.colorLookupCanvas.setImage(path, zoomLevel);
+	    this.updateTriColors();
 	}
     }
 
@@ -632,7 +667,7 @@ class ColorLookupCanvas {
 	this.loaded = false;
     }
 
-    setImage(path) {
+    setImage(path, zoomLevel=1) {
 	var img = new Image();
 	img.src = path
 
@@ -661,6 +696,11 @@ class ColorLookupCanvas {
 		dx = 0;
 		dy = -(height - canvasHeight) / 2;
 	    }
+	    context.clearRect(0, 0, width, height);
+	    dx += width * (1 - zoomLevel) / 2;
+	    dy += height * (1 - zoomLevel) / 2;
+	    width *= zoomLevel;
+	    height *= zoomLevel;
 	    context.drawImage(img, dx, dy, width, height);
 	    thisCanvas.imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
 	    thisCanvas.loaded = true;

javascript/level_picker.js

@@ -42,10 +42,10 @@ class LevelPicker {
 	    this.updateProgressBars();
 	});
 	this.saveCookie();
-	this.$resetConfirm = $("<div id='resetConfirm' title='Reset Progress?'>" +
+	this.$resetConfirm = $("<div class='resetConfirm' title='Reset Progress?'>" +
 			       "Are you sure?  This can not be undone.</div>");
 	this.$container.append(this.$resetConfirm)
-	this.$resetButton = $("<button id='resetProgress'>Reset Progress</button>");
+	this.$resetButton = $("<button class='resetProgress'>Reset Progress</button>");
 	this.$container.append(this.$resetButton)
 	this.$resetButton.click(() => {
 	    this.$resetConfirm.dialog({

javascript/shapes.js

@@ -62,7 +62,6 @@ function trianglesOverlap(corners1, corners2) {
 
 // returns true if the line from p1->p2 intersects with p3->p4.
 function linesIntersect(p1, p2, p3, p4) {
-    console.log(p1, p2, p3, p4);
     const x1 = p1.x;
     const x2 = p2.x;
     const x3 = p3.x;

javascript/svg_to_png.js

@@ -7,7 +7,8 @@
 // (Might actually make it MORE fuzz?  Needs testing)
 function svgToPng(svgElement, filename = "svg", scale = 1) {
     const svgData = new XMLSerializer().serializeToString(svgElement);
-    const svgDataURL = "data:image/svg+xml;base64," + btoa(svgData);
+    const encodedSvg = encodeURIComponent(svgData);
+    const svgDataURL = "data:image/svg+xml;charset=utf-8," + encodedSvg;
     const width = svgElement.width.baseVal.value;
     const height = svgElement.height.baseVal.value;
 
@@ -16,25 +17,15 @@ function svgToPng(svgElement, filename = "svg", scale = 1) {
     ctx.imageSmoothingEnabled = false;
 
     const img = new Image();
+    $("body").append(img)
     const promise = new Promise((resolve, reject) => {
 	img.onload = function() {
 	    console.log("Loaded");
 	    canvas.width = width * scale;
 	    canvas.height = height * scale;
-	    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-	    if (scale != 1) {
-		const img2 = new Image();
-		img2.onload = function() {
-		    canvas.width = width;
-		    canvas.height = height;
-		    ctx.drawImage(img2, 0, 0, width, height);
-		    console.log("Got resized png");
-		    resolve(canvas.toDataURL('image/png', 1.0));
-		}
-		img2.src = canvas.toDataURL('image/png', 1.0);
-	    } else {
-		resolve(canvas.toDataURL('image/png', 1.0));
-	    }
+	    // -1 to remove border.
+	    ctx.drawImage(img, -1, -1, canvas.width, canvas.height);
+	    resolve(canvas.toDataURL('image/png', 1.0));
 	};
     });
     img.src = svgDataURL;

style.css

@@ -191,7 +191,7 @@ h1 {
 
 
 }
-#resetProgress {
+.resetProgress {
     display: block;
     margin: 10px auto;
     color: #666;
@@ -200,7 +200,7 @@ h1 {
     border-radius: 5px;
 
 }
-#resetConfirm {
+.resetConfirm {
     display: none;
 }
 .levelProgressBar {