Index: work/remote/web/client/scripts/draw.js
===================================================================
--- work/remote/web/client/scripts/draw.js	(revision 6433)
+++ work/remote/web/client/scripts/draw.js	(revision 6434)
@@ -12,20 +12,36 @@
 function GraphicEngine(options) {
 	this.options = Object.assign({}, options);
 	this.comm = options.comm;
-	this.canvas = options.canvas;
+	this.mainCc = options.mainCc;
+	this.maskCc = options.maskCc;
+	this.cc = this.mainCc;
 	this.colors = options.colors;
 	this.unit = options.unit || "mm";
 
-	this.canvas.imageSmoothingEnabled = false;
-	this.canvas.setTransform(1, 0, 0, 1, 0, 0);
-	this.canvas.fillStyle = "white";
-	this.canvas.fillRect(0, 0, this.canvas.canvas.width, this.canvas.canvas.height);
-	//this.canvas.globalAlpha = 0.5;
+	this.cc.imageSmoothingEnabled = false;
+	this.mainCc.setTransform(1, 0, 0, 1, 0, 0);
+	this.maskCc.setTransform(1, 0, 0, 1, 0, 0);
+	this.cc.clearRect(0, 0, this.cc.canvas.width, this.cc.canvas.height);
+	//this.cc.globalAlpha = 0.5;
 
 	this.GCs = new Array(GC_MAX_COUNT);
 	this.gc = undefined;
 	this.mask = "off";
+	this.layers = [];
+	this.layerGroups = [];
+	this.currentLayerGroup = undefined;
 }
+GraphicEngine.getLayerList = function () {
+	return this.layers;
+}
+GraphicEngine.enableLayerGroup = function (id, enable) {
+	var group = this.layerGroups[id];
+	if (!group) {
+		group = {};
+		this.layerGroups
+	}
+	group.enable = enable;
+}
 GraphicEngine.prototype.onMessage = function (command, args) {
 	try {
 		switch (command) {
@@ -46,8 +62,10 @@
 				return;
 			case "setxor": this.setXor(Number(args[0]), Number(args[1])); return;
 			case "cap": this.setLineCap(Number(args[0]), args[1]); return;
-			case "umask": this.useMask(args[0]); return;
-			case "setly": this.setLayer(Number(args[0]), Number(args[1]), Number(args[2])); return;
+			//case "umask": this.useMask(args[0]); return;
+			case "newlg": this.newLayerGroup(args[0], Number(args[1]), args[2][0], args[2][1], args[2][2]); return;
+			case "newly": this.newLayer(args[0], Number(args[1]), Number(args[2])); return;
+			case "setlg": this.setLayerGroup(Number(args[0]), Number(args[1]) === 1); return;
 
 			case "makeGC": this.makeGC(); return;
 			case "delGC": this.deleteGC(Number(args[0])); return;
@@ -62,28 +80,28 @@
 }
 GraphicEngine.prototype.line = function (gci, x1, y1, x2, y2) {
 	this.selectGC(gci);
-	this.canvas.beginPath();
-	this.canvas.moveTo(x1, y1);
-	this.canvas.lineTo(x2, y2);
-	this.canvas.stroke();
+	this.cc.beginPath();
+	this.cc.moveTo(x1, y1);
+	this.cc.lineTo(x2, y2);
+	this.cc.stroke();
 }
 GraphicEngine.prototype.rect = function (gci, x1, y1, x2, y2, filled) {
 	this.selectGC(gci);
 	if (filled == 1) {
-		this.canvas.fillRect(x1, y1, x2 - x1, y2 - y1);
+		this.cc.fillRect(x1, y1, x2 - x1, y2 - y1);
 	} else {
 		var px = NM_PER_PIXEL / nanometerPerUnit(this.unit);
-		this.canvas.save();
-		this.canvas.lineWidth = px;
-		this.canvas.strokeRect(x1, y1, x2 - x1, y2 - y1);
-		this.canvas.restore();
+		this.cc.save();
+		this.cc.lineWidth = px;
+		this.cc.strokeRect(x1, y1, x2 - x1, y2 - y1);
+		this.cc.restore();
 	}
 }
 GraphicEngine.prototype.fillCircle = function (gci, x1, y1, r) {
 	this.selectGC(gci);
-	this.canvas.beginPath();
-	this.canvas.arc(x1, y1, r, 0, 2 * Math.PI);
-	this.canvas.fill();
+	this.cc.beginPath();
+	this.cc.arc(x1, y1, r, 0, 2 * Math.PI);
+	this.cc.fill();
 }
 GraphicEngine.prototype.setColor = function (gci, color) {
 	gc = this.GCs[gci];
@@ -91,18 +109,19 @@
 		this.comm.error("invalid GC");
 		return;
 	}
-	if (typeof color === "string" && color[0] !== '#') {
-		color = this.colors[color];
-		if (color == null) {
-			this.comm.error("undefined color: " + color);
-			return;
-		}
-	}
+	gc.color = color;
 
-	gc.color = color;
+
 	if (this.gc === gc) {
-		this.canvas.fillStyle = color;
-		this.canvas.strokeStyle = color;
+		if (color === "drill" || color === "erase") {
+			this.cc.globalCompositeOperation = "destination-out";
+			this.cc.fillStyle = "black";
+			this.cc.strokeStyle = "black";
+		} else {
+			this.cc.globalCompositeOperation = "source-over";
+			this.cc.fillStyle = color;
+			this.cc.strokeStyle = color;
+		}
 	}
 }
 GraphicEngine.prototype.setLineWidth = function (gci, width) {
@@ -114,22 +133,22 @@
 	width = width;
 	gc.lineWidth = width;
 	if (this.gc === gc) {
-		this.canvas.lineWidth = width;
+		this.cc.lineWidth = width;
 	}
 }
-GraphicEngine.prototype.useMask = function (mode) {
-	this.mask = mode;
-	// hack - more info needed about this
-	if (this.gc) {
-		if (mode === "clear") {
-			this.canvas.fillStyle = "white";
-			this.canvas.strokeStyle = "white";
-		} else {
-			this.canvas.fillStyle = this.gc.color;
-			this.canvas.strokeStyle = this.gc.color;
-		}
-	}
-}
+//GraphicEngine.prototype.useMask = function (mode) {
+//	this.mask = mode;
+//	// hack - more info needed about this
+//	if (this.gc) {
+//		if (mode === "clear") {
+//			this.cc.fillStyle = "white";
+//			this.cc.strokeStyle = "white";
+//		} else {
+//			this.cc.fillStyle = this.gc.color;
+//			this.cc.strokeStyle = this.gc.color;
+//		}
+//	}
+//}
 GraphicEngine.prototype.setXor = function (gci, state) {
 	gc = this.GCs[gci];
 	if (!gc) {
@@ -153,12 +172,47 @@
 	}
 	gc.lineCap = cap;
 	if (this.gc === gc) {
-		this.canvas.lineCap = gc.lineCap;
+		this.cc.lineCap = gc.lineCap;
 	}
 }
-GraphicEngine.prototype.setLayer = function (gci, groups, empty) {
-	// don't need to do anything so far
+GraphicEngine.prototype.newLayerGroup = function (name, id, location, purpose, properties) {
+	var locstr = "";
+	if (Array.isArray(location) && location.length > 0) {
+		locstr = location[0];
+	}
+	var isMask = false;
+	if (Array.isArray(purpose)) {
+		for (var i = 0; i < purpose.length; i++) {
+			if (purpose[i] === "mask") {
+				isMask = true;
+			}
+		}
+	}
+	this.layerGroups[id] = {
+		name: name,
+		id: id,
+		location: locstr,
+		isMask: isMask
+	};
 }
+GraphicEngine.prototype.newLayer = function (name, id, groupId) {
+	this.layers[name] = {
+		name: name,
+		id: id,
+		group: groupId,
+	};
+}
+GraphicEngine.prototype.setLayerGroup = function (id, empty) {
+	if (this.currentLayerGroup && this.currentLayerGroup.isMask) {
+		this.mainCc.drawImage(this.maskCc.canvas, 0, 0);
+		this.cc = this.mainCc;
+	}
+	this.currentLayerGroup = this.layerGroups[id];
+	if (this.currentLayerGroup && this.currentLayerGroup.isMask) {
+		this.cc = this.maskCc;
+		this.cc.clearRect(0, 0, this.cc.canvas.width, this.cc.canvas.height);
+	}
+}
 GraphicEngine.prototype.makeGC = function () {
 	for (var i = 1; i < GC_MAX_COUNT; ++i) {
 		if (!this.GCs[i]) {
@@ -194,21 +248,25 @@
 
 	// set all drawing properties in advance
 	// it can be costly so optimization may be necessary
-	this.canvas.lineWidth = gc.lineWidth;
-	this.canvas.lineCap = gc.lineCap;
+	this.cc.lineWidth = gc.lineWidth;
+	this.cc.lineCap = gc.lineCap;
 
-	if (this.mask === "clear") {
-		this.canvas.fillStyle = "white";
-		this.canvas.strokeStyle = "white";
+	if (gc.color === "drill" || gc.color === "erase") {
+		this.cc.globalCompositeOperation = "destination-out";
+		this.cc.fillStyle = "black";
+		this.cc.strokeStyle = "black";
 	} else {
-		this.canvas.fillStyle = gc.color;
-		this.canvas.strokeStyle = gc.color;
+		this.cc.globalCompositeOperation = "source-over";
+		this.cc.fillStyle = gc.color;
+		this.cc.strokeStyle = gc.color;
 	}
 }
 GraphicEngine.prototype.setMatrix = function() {
 	var scale = nanometerPerUnit(this.unit) / NM_PER_PIXEL * 5;
-	this.canvas.setTransform(1, 0, 0, 1, 0, 0);
-	this.canvas.scale(scale, scale);
+	this.mainCc.setTransform(1, 0, 0, 1, 0, 0);
+	this.mainCc.scale(scale, scale);
+	this.maskCc.setTransform(1, 0, 0, 1, 0, 0);
+	this.maskCc.scale(scale, scale);
 }
 GraphicEngine.prototype.ready = function () {
 	this.setMatrix();