Index: web/client/scripts/draw.js =================================================================== --- web/client/scripts/draw.js (revision 6888) +++ web/client/scripts/draw.js (revision 6889) @@ -8,7 +8,9 @@ * @param options.comm - communication interface * @param options.canvas - HTML canvas rendering context * @param options.colors - color chart for symbolic color names + * @param options.layerGroupMap - prescriptions based on layer group id * @param options.purposeMap - prescriptions based on layer group purposes + * @param options.onNewLayerGroup - called when a new layer group is defined */ function GraphicEngine(options) { this.options = Object.assign({}, options); @@ -188,9 +190,6 @@ this.cc.fill(); } GraphicEngine.prototype.setColor = function (gci, color) { - if (!this.enableDrawing) { - return; - } gc = this.GCs[gci]; if (!gc) { this.comm.error("invalid GC"); @@ -212,9 +211,6 @@ } } GraphicEngine.prototype.setLineWidth = function (gci, width) { - if (!this.enableDrawing) { - return; - } gc = this.GCs[gci]; if (!gc) { this.comm.error("invalid GC"); @@ -240,9 +236,6 @@ // } //} GraphicEngine.prototype.setXor = function (gci, state) { - if (!this.enableDrawing) { - return; - } gc = this.GCs[gci]; if (!gc) { this.comm.error("invalid GC"); @@ -253,9 +246,6 @@ } } GraphicEngine.prototype.setLineCap = function (gci, cap) { - if (!this.enableDrawing) { - return; - } gc = this.GCs[gci]; if (!gc) { this.comm.error("invalid GC"); @@ -272,6 +262,9 @@ } } GraphicEngine.prototype.newLayerGroup = function (name, id, location, purpose, properties) { + if (this.layerGroups[id]) { + return; + } var locstr = ""; if (Array.isArray(location) && location.length > 0) { locstr = location[0]; @@ -296,7 +289,7 @@ } } } - this.layerGroups[id] = { + var lg = { name: name, id: id, location: locstr, @@ -304,6 +297,10 @@ props: props, isMask: isMask }; + this.layerGroups[id] = lg; + if (this.options.onNewLayerGroup) { + this.options.onNewLayerGroup(lg); + } } GraphicEngine.prototype.newLayer = function (name, id, groupId) { this.layers[name] = { @@ -322,6 +319,9 @@ } this.currentLayerGroup = this.layerGroups[id]; this.enableDrawing = true; + if (this.options.layerGroupMap[id] && this.options.layerGroupMap[id].hidden) { + this.enableDrawing = false; + } if (this.currentLayerGroup) { var purposes = this.currentLayerGroup.purposes; for (var i = 0; i < purposes.length; ++i) { Index: web/testclient/draw.html =================================================================== --- web/testclient/draw.html (revision 6888) +++ web/testclient/draw.html (revision 6889) @@ -6,12 +6,24 @@

Document drawing

choose test file:

- main canvas
-

- mask canvas
-

Error loading draw-bundle.js

- +

choose test file:

+ main canvas
+

+ mask canvas
+

Layer groups

Error loading draw-bundle.js

+ +

Index: web/testclient/draw.js =================================================================== --- web/testclient/draw.js (revision 6888) +++ web/testclient/draw.js (revision 6889) @@ -4,6 +4,9 @@ var protocol = require("../protocol/protocol"); var draw = require("../client/scripts/draw"); +var currentBuffer; +var layerGroups = {}; +var purposes = {}; buildFileList(); @@ -28,18 +31,19 @@ }; req.open("GET", "../testdata/testlist.txt"); req.send(); - } function drawRemoteFile(url) { - var mainCc = document.getElementById("main-canvas").getContext("2d"); - var maskCc = document.getElementById("mask-canvas").getContext("2d"); var req = new XMLHttpRequest(); req.onreadystatechange = function () { if (req.readyState === XMLHttpRequest.DONE && req.status === 200) { console.log("drawing", url); - drawBuffer(new Uint8Array(req.response), mainCc, maskCc); + currentBuffer = new Uint8Array(req.response); + layerGroups = {}; + purposes = {}; + document.getElementById("layerGroupList").innerHTML = ""; + drawBuffer(); } }; req.responseType = 'arraybuffer'; @@ -48,7 +52,17 @@ } -function drawBuffer(buffer, mainCc, maskCc) { +function drawBuffer() { + var mainCc = document.getElementById("main-canvas").getContext("2d"); + var maskCc = document.getElementById("mask-canvas").getContext("2d"); + + var lgMap = {}; + for (var id in layerGroups) { + if (layerGroups[id].hidden) { + lgMap[id] = { hidden: true }; + } + } + var ge = new draw.GraphicEngine({ comm: new TestComm(), mainCc: mainCc, @@ -56,11 +70,13 @@ colors: { mask: "#274f29" }, + layerGroupMap: lgMap, purposeMap: { mask: { hidden: true }, paste: { hidden: true }, fab: { hidden: true } - } + }, + onNewLayerGroup: onNewLayerGroup }); var parser = new protocol.ProtocolParser(); @@ -71,10 +87,44 @@ console.log("parser error: msg[%d]: ", pos, err); }; - parser.parse(buffer); + parser.parse(currentBuffer); } +function onNewLayerGroup(lg) { + if (layerGroups[lg.id]) { + return; + } + layerGroups[lg.id] = { + id: lg.id, + purposes: lg.purposes + }; + + // list the group + var purposes = " ("; + for (var i = 0; i < lg.purposes.length; ++i) { + if (i) { + purposes += ", "; + } + purposes += lg.purposes[i]; + } + purposes += ")"; + var list = document.getElementById("layerGroupList"); + var li = document.createElement("li"); + var cbox = document.createElement("input"); + cbox.type = "checkbox"; + cbox.id = "checkbox" + lg.id; + cbox.checked = true; + cbox.onchange = function () { + layerGroups[lg.id].hidden = !cbox.checked; + drawBuffer(); + } + li.appendChild(cbox); + li.appendChild(document.createTextNode(lg.id + ": " + lg.name + purposes)); + list.appendChild(li); +} + + function TestComm() { this.send = function(cmd, args) { console.log("send", cmd, args);