Browse Source

Add UI hints for the rectangle tool

Add a "UI hints" canvas on top of the overlay layer to draw UI
hints. For now, only use it in the rectangle tool to show how big
the rectangle is going to be.
master
parent
commit
28ad3eef08
7 changed files with 56 additions and 9 deletions
  1. +8
    -0
      public/css/main.css
  2. +1
    -0
      public/index.html
  3. +9
    -2
      src/MapDiscoverer.js
  4. +3
    -2
      src/Toolbox.js
  5. +2
    -1
      src/map-discoverer.js
  6. +1
    -1
      src/tools/PencilTool.js
  7. +32
    -3
      src/tools/RectangleTool.js

+ 8
- 0
public/css/main.css View File

@@ -34,6 +34,14 @@ body {
cursor: crosshair;
}

#ui-hints {
position: absolute;
top: 0;
left: 0;

pointer-events: none;
}

button.active {
background-color: #666;
color: #ddd;


+ 1
- 0
public/index.html View File

@@ -20,6 +20,7 @@
<canvas id="overlay">
You need a browser which understands &lt;canvas&gt;
</canvas>
<canvas id="ui-hints"></canvas>
</div>

<footer>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></footer>


+ 9
- 2
src/MapDiscoverer.js View File

@@ -4,9 +4,10 @@ import ToggleButton from "ToggleButton";
import Toolbox from "Toolbox";

export class MapDiscoverer {
constructor(mapImg, toolsDiv, overlay) {
constructor(mapImg, toolsDiv, overlay, uiHintsOverlay) {
this.mapImg = mapImg;
this.canvasEl = overlay;
this.uiHintsEl = uiHintsOverlay;
this.undoActions = [];
this.stateIndex = -1;

@@ -31,7 +32,7 @@ export class MapDiscoverer {
toolsDiv.appendChild(this.coverToggle.domElement);
toolsDiv.appendChild(undoButton);
toolsDiv.appendChild(redoButton);
this.toolbox.install(this.canvasEl, toolsDiv);
this.toolbox.install(this.canvasEl, this.uiHintsEl, toolsDiv);

this.addCanvasHandlers(this.canvasEl);
this.addImageLoadHandler(this.mapImg);
@@ -99,6 +100,12 @@ export class MapDiscoverer {
this.canvasEl.width = imgEl.width;
let ctx = this.canvasEl.getContext("2d");
ctx.fillRect(0, 0, this.canvasEl.width, this.canvasEl.height);

this.uiHintsEl.height = imgEl.height;
this.uiHintsEl.width = imgEl.width;
let uiHintsCtx = this.uiHintsEl.getContext("2d");
uiHintsCtx.clearRect(0, 0, this.uiHintsEl.width, this.uiHintsEl.height);

this.stateIndex = 0;
this.undoActions = [ctx.getImageData(0,
0,


+ 3
- 2
src/Toolbox.js View File

@@ -6,13 +6,14 @@ export class Toolbox {
this.toolList = toolList;
}

install(canvas, toolsDiv) {
install(canvas, uiHints, toolsDiv) {
this.canvas = canvas;
this.uiHints = uiHints;
this.toolsDiv = toolsDiv;

this.tools = []; this.toolButtons = [];
for (let toolClass of this.toolList) {
let tool = new toolClass(this.canvas),
let tool = new toolClass(this.canvas, this.uiHints),
buttonEl = this.createToolButton(tool);

this.tools.push(tool);


+ 2
- 1
src/map-discoverer.js View File

@@ -3,7 +3,8 @@ import MapDiscoverer from "MapDiscoverer";
window.addEventListener("load", () => {
let app = new MapDiscoverer(document.getElementById("orig-map"),
document.getElementById("tools"),
document.getElementById("overlay"));
document.getElementById("overlay"),
document.getElementById("ui-hints"));

document.getElementById("new-map-file").addEventListener("change", evt => {
let file = evt.target.files[0];


+ 1
- 1
src/tools/PencilTool.js View File

@@ -1,5 +1,5 @@
export class PencilTool {
constructor(canvas) {
constructor(canvas/*, uiHintsLayer*/) {
this.ctx = canvas.getContext('2d');
this.started = false;
}


+ 32
- 3
src/tools/RectangleTool.js View File

@@ -1,21 +1,50 @@
export class RectangleTool {
constructor(canvas) {
this.ctx = canvas.getContext('2d');
constructor(canvas, uiHintsLayer) {
this.ctx = canvas.getContext("2d");
this.uiHintsLayer = uiHintsLayer;
this.uiHintsLayerCtx = uiHintsLayer.getContext("2d");
this.started = false;
}

onStart({offsetX, offsetY}) {
[this.initialX, this.initialY] = [offsetX, offsetY];
this.started = true;
}

onMove(/*evt*/) {}
onMove({offsetX, offsetY}) {
if (this.started) {
let origStrokeStyle = this.uiHintsLayerCtx.strokeStyle;

this.uiHintsLayerCtx.strokeStyle = "blue";

this.uiHintsLayerCtx.clearRect(0,
0,
this.uiHintsLayer.width,
this.uiHintsLayer.height);
this.uiHintsLayerCtx.lineWidth = 1;
this.uiHintsLayerCtx.beginPath();
this.uiHintsLayerCtx.rect(this.initialX, this.initialY,
offsetX - this.initialX, offsetY - this.initialY);
this.uiHintsLayerCtx.stroke();

this.uiHintsLayerCtx.strokeStyle = origStrokeStyle;
}
}

onStop({offsetX, offsetY}) {
this.uiHintsLayerCtx.clearRect(0,
0,
this.uiHintsLayer.width,
this.uiHintsLayer.height);

this.ctx.lineWidth = 1;
this.ctx.beginPath();
this.ctx.rect(this.initialX, this.initialY,
offsetX - this.initialX, offsetY - this.initialY);
this.ctx.fill();
this.ctx.stroke();

this.started = false;
}
}
RectangleTool.title = "Rectangle Tool";


Loading…
Cancel
Save