=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/index.html' --- src/com/goldencode/p2j/ui/client/driver/web/index.html 2015-09-08 16:51:50 +0000 +++ src/com/goldencode/p2j/ui/client/driver/web/index.html 2015-12-10 15:02:20 +0000 @@ -4,6 +4,9 @@ P2J ${client_title} Web Client + === modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js' --- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js 2015-10-22 23:14:19 +0000 +++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.js 2015-12-10 18:12:39 +0000 @@ -96,9 +96,25 @@ // save off our client mode type p2j.isGui = cfg.isGui; - + /** the body html css class name to display wait cursor */ + p2j.waitCursorClass = " wait"; + /** the body html css class name to display default cursor */ + p2j.bodyHtmlClass = document.body.className; + /** to display the wait cursor for the document */ + p2j.displayWaitCursor = function () + { + if (document.body.className === p2j.bodyHtmlClass) + { + document.body.className += p2j.waitCursorClass; + } + } + /** to restore the cursor for the document */ + p2j.restoreCursor = function () + { + document.body.className = p2j.bodyHtmlClass; + } // init modules (don't change the order here!) - p2j.logger.init(4096); + p2j.logger.init(4096, true); p2j.sound.init(cfg); p2j.fonts.init(); p2j.screen.init(cfg); === modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.logger.js' --- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.logger.js 2015-09-05 16:09:44 +0000 +++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.logger.js 2015-12-10 15:02:20 +0000 @@ -24,15 +24,21 @@ /** The stack capacity, the last visible history.*/ var maxStackSize; + + /** The stack capacity, the last visible history.*/ + var isOn; /** * Initialize the logger with the storage capacity. * * @param {Number} * The log stack capacity. + * @param {boolean} + * The boolean value that indicates the log is on/off. */ - me.init = function(capacity) + me.init = function(capacity, on) { maxStackSize = capacity; + isOn = on; }; /** @@ -43,7 +49,10 @@ */ me.log = function(msg) { - save(msg); + if (isOn) + { + save(msg); + } }; /* @@ -56,19 +65,22 @@ */ me.logFormatted = function(format, parameters) { - save(format.split("%d").map( - function(currValue, index, arr) - { - if (this[index] === undefined) + if (isOn) + { + save(format.split("%d").map( + function(currValue, index, arr) { - return currValue; - } - return currValue + this[index]; - }, parameters).reduce( - function(prevValue, currValue) + if (this[index] === undefined) { - return prevValue + currValue; - }, "")); + return currValue; + } + return currValue + this[index]; + }, parameters).reduce( + function(prevValue, currValue) + { + return prevValue + currValue; + }, "")); + } }; /** === modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.socket.js' --- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.socket.js 2015-11-26 10:46:59 +0000 +++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.socket.js 2015-12-10 18:20:00 +0000 @@ -403,6 +403,511 @@ me.sendNotification(0xff); }; + /** Web socket message handler */ + var messageHandler = function(message) + { + switch (message[0]) + { + case 0x80: + // clear screen + p2j.screen.clear(); + break; + case 0x81: + // draw screen + var t1 = (new Date()).getTime(); + p2j.screen.drawRectangles(message); + var t2 = (new Date()).getTime(); + // console.log("message: " + message.length + " done in " + (t2 - t1)); + break; + case 0x82: + // set cursor position + p2j.screen.setCursorPosition(message[1], message[2]); + break; + case 0x83: + // show cursor + p2j.screen.setCursorStatus(message[1]); + break; + case 0x84: + // message beep + p2j.sound.beep(); + break; + case 0x85: + // quit + window.location.replace(referrer); + break; + case 0x86: + // switch mode p2j/vt100 + p2j.keyboard.vt100 = (message[1] == 0) ? false : true; + break; + case 0x87: + // server-driven request for clipboard contents + p2j.clipboard.sendClipboardContents(); + break; + case 0x88: + // The clipboard is changed. + var text = me.readStringBinaryMessage(message, 1); + p2j.clipboard.writeClipboard(text); + break; + case 0x89: + // create a top-level window with the given id + var id = me.readInt32BinaryMessage(message, 1); + p2j.screen.createWindow(id); + break; + case 0x8A: + // create a child window with the given id, owner and title + var id = me.readInt32BinaryMessage(message, 1); + var owner = me.readInt32BinaryMessage(message, 5); + var title = me.readStringBinaryMessage(message, 9); + p2j.screen.createChildWindow(id, owner); + break; + case 0x8B: + // destroy top-level or child window + var id = me.readInt32BinaryMessage(message, 1); + var numberImages = me.readInt32BinaryMessage(message, 5); + var images = []; + for (var i = 0; i < numberImages; i++) + { + images[i] = me.readInt32BinaryMessage(message, 9 + (i * 4)); + } + p2j.screen.destroyWindow(id, images); + break; + case 0x8C: + // change visibility for top-level or child window + var id = me.readInt32BinaryMessage(message, 1); + var visible = message[5] === 0 ? false : true; + p2j.screen.setWindowVisible(id, visible); + break; + + // font and metrics related requests + case 0x8D: + // paragraph height + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var textLength = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var text = me.readStringBinaryMessageByLength(message, offset, textLength); + offset = offset + textLength * 2; + + var font = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var maxWidth = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + var pheight = p2j.screen.layoutParagraphWorker(null, + text, + font, + 0, + 0, + maxWidth); + + me.sendInt16BinaryMessage(0x06, msgId, pheight); + break; + case 0x8E: + // text height + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var textLength = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var text = me.readStringBinaryMessageByLength(message, offset, textLength); + offset = offset + textLength * 2; + + var font = me.readInt32BinaryMessage(message, offset); + + var theight = p2j.fonts.getTextHeight(font, text); + + me.sendInt8BinaryMessage(0x07, msgId, theight); + break; + case 0x8F: + // text width + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var textLength = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var text = me.readStringBinaryMessageByLength(message, offset, textLength); + offset = offset + textLength * 2; + + var font = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var twidth = p2j.fonts.getTextWidth(font, text); + + me.sendInt16BinaryMessage(0x08, msgId, twidth); + break; + case 0x90: + // font height + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var font = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var fheight = p2j.fonts.getFontHeight(font); + + me.sendInt8BinaryMessage(0x09, msgId, fheight); + break; + case 0x91: + // font widths + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var font = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var fwidths = p2j.fonts.getFontWidths(font); + + me.sendByteArrayBinaryMessage(0x0A, msgId, fwidths); + break; + case 0x92: + // create font + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var font = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var nameLength = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + var name = me.readStringBinaryMessageByLength(message, offset, nameLength); + offset = offset + nameLength * 2; + + var size = message[offset]; + offset = offset + 1; + + var style = message[offset]; + offset = offset + 1; + + var defLength = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var b64font = ""; + if (defLength > 0) + { + var binFont = ''; + for (var i = 0; i < defLength; i++) + { + binFont += String.fromCharCode(message[offset]); + offset = offset + 1; + } + b64font = window.btoa(binFont); + } + + var fontId = p2j.fonts.createFont(font, name, size, style, b64font); + + me.sendInt32BinaryMessage(0x0B, msgId, fontId); + break; + case 0x93: + // derive font + + var offset = 1; + + var msgId = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var font = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + p2j.fonts.deriveFont(font); + + me.sendInt8BinaryMessage(0x0C, msgId, 1); + break; + case 0x94: + // set cursor style + var styleId = me.readInt32BinaryMessage(message, 1); + var wid = me.readInt32BinaryMessage(message, 5); + p2j.screen.setCursorStyle(styleId, wid); + break; + case 0x95: + // restack windows + var num = me.readInt32BinaryMessage(message, 1); + var winids = []; + for (var i = 0; i < num; i++) + { + winids.push(me.readInt32BinaryMessage(message, 5 + (i * 4))); + } + p2j.screen.restackZOrderEntries(winids); + break; + case 0x96: + // register/deregister widgets for mouse actions + + var offset = 1; + + // the number of windows with new widgets + var windowNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var j = 0; j < windowNo; j++) + { + // the window ID + var windowID = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + if (!p2j.screen.isExistingWindowId(windowID)) + { + console.log("undefined window " + windowID); + continue; + } + + var theWindow = p2j.screen.getWindow(windowID); + + // the number of new widgets in this window + var widgetNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var k = 0; k < widgetNo; k++) + { + // the widget ID + var wid = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + // the coordinates + var x = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + var y = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + // the size + var width = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + var height = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + // bit-encoded mouse ops: each bit from 1 to 11, if set, represents a mouse + // operation as defined in p2j.screen.mouseOps + var actions = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + theWindow.deregisterMouseWidget(wid); + theWindow.registerMouseWidget(wid, x, y, width, height, actions); + } + + var allWNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + var zOrder = []; + + for (var k = 0; k < allWNo; k++) + { + zOrder[k] = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + } + + theWindow.setWidgetZOrder(zOrder); + } + + // the number of windows with dead widgets + windowNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var j = 0; j < windowNo; j++) + { + // the window ID + var windowID = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var theWindow = p2j.screen.getWindow(windowID); + + if (theWindow == undefined) + { + console.log("undefined window" + windowID); + continue; + } + + // the number of dead widgets in this window + var widgetNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var k = 0; k < widgetNo; k++) + { + // the widget ID + var wid = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + theWindow.deregisterMouseWidget(wid); + } + } + + // the number of windows with new "any widgets" + windowNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var j = 0; j < windowNo; j++) + { + // the window ID + var windowID = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + if (!p2j.screen.isExistingWindowId(windowID)) + { + console.log("undefined window " + windowID); + continue; + } + + var theWindow = p2j.screen.getWindow(windowID); + + // the number of new "any widgets" in this window + var widgetNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var k = 0; k < widgetNo; k++) + { + // the widget ID + var wid = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + theWindow.deregisterAnyMouseWidget(wid); + theWindow.registerAnyMouseWidget(wid); + } + } + + // the number of windows with dead "any widgets" + windowNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var j = 0; j < windowNo; j++) + { + // the window ID + var windowID = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var theWindow = p2j.screen.getWindow(windowID); + + if (theWindow == undefined) + { + console.log("undefined window" + windowID); + continue; + } + + // the number of dead "any widgets" in this window + var widgetNo = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + for (var k = 0; k < widgetNo; k++) + { + // the widget ID + var wid = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + theWindow.deregisterAnyMouseWidget(wid); + } + } + + break; + case 0x97: + // enable/disable mouse events + p2j.screen.captureMouseEvents(message[1] == 1); + break; + case 0x98: + // enable/disable OS events + var wid = me.readInt32BinaryMessage(message, 1); + p2j.screen.enableOsEvents(wid, message[5] == 1); + break; + case 0x99: + // set window iconification state + var offset = 1; + + var windowID = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var iconified = (message[offset] == 1); + offset = offset + 1; + + var theWindow = p2j.screen.getWindow(windowID); + //p2j.logger.log("recieved 0x99: iconified = " + iconified + " windowId=" + windowID); + if (iconified) + { + theWindow.iconify(); + } + else + { + theWindow.deiconify(); + } + + break; + case 0x9A: + // resizeable window + var offset = 1; + + var windowID = me.readInt32BinaryMessage(message, offset); + offset = offset + 4; + + var theWindow = p2j.screen.getWindow(windowID); + + theWindow.resizeable = (message[offset] == 1); + offset = offset + 1; + + if (theWindow.resizeable) + { + theWindow.minWidth = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + theWindow.minHeight = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + + theWindow.maxWidth = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + theWindow.maxHeight = me.readInt16BinaryMessage(message, offset); + offset = offset + 2; + } + else + { + var rect = theWindow.canvas.getBoundingClientRect(); + + var rwidth = rect.right - rect.left + 1; + var rheight = rect.bottom - rect.top + 1; + + theWindow.minWidth = rwidth; + theWindow.minHeight = rheight; + + theWindow.maxWidth = rwidth; + theWindow.maxHeight = rheight; + } + + break; + case 0x9B: + // current editors selection is changed + var text = me.readStringBinaryMessage(message, 1); + p2j.clipboard.setSelection(text); + break; + case 0x9C: + var id = me.readInt32BinaryMessage(message, 1); + p2j.screen.moveToTop(id); + break; + case 0x9D: + var id = me.readInt32BinaryMessage(message, 1); + p2j.screen.moveToBottom(id); + break; + case 0x9E: + // change sensitivity for top-level or child window + var id = me.readInt32BinaryMessage(message, 1); + var enabled = message[5] === 0 ? false : true; + p2j.screen.setWindowEnabled(id, enabled); + break; + }; + }; // on web socket message ws.onmessage = function(evt) { @@ -412,523 +917,42 @@ { // binary messages var message = new Uint8Array(data); - - switch (message[0]) - { - case 0x80: - // clear screen - p2j.screen.clear(); - break; - case 0x81: - // draw screen - var t1 = (new Date()).getTime(); - p2j.screen.drawRectangles(message); - var t2 = (new Date()).getTime(); - // console.log("message: " + message.length + " done in " + (t2 - t1)); - break; - case 0x82: - // set cursor position - p2j.screen.setCursorPosition(message[1], message[2]); - break; - case 0x83: - // show cursor - p2j.screen.setCursorStatus(message[1]); - break; - case 0x84: - // message beep - p2j.sound.beep(); - break; - case 0x85: - // quit - window.location.replace(referrer); - break; - case 0x86: - // switch mode p2j/vt100 - p2j.keyboard.vt100 = (message[1] == 0) ? false : true; - break; - case 0x87: - // server-driven request for clipboard contents - p2j.clipboard.sendClipboardContents(); - break; - case 0x88: - // The clipboard is changed. - var text = me.readStringBinaryMessage(message, 1); - p2j.clipboard.writeClipboard(text); - break; - case 0x89: - // create a top-level window with the given id - var id = me.readInt32BinaryMessage(message, 1); - p2j.screen.createWindow(id); - break; - case 0x8A: - // create a child window with the given id, owner and title - var id = me.readInt32BinaryMessage(message, 1); - var owner = me.readInt32BinaryMessage(message, 5); - var title = me.readStringBinaryMessage(message, 9); - p2j.screen.createChildWindow(id, owner); - break; - case 0x8B: - // destroy top-level or child window - var id = me.readInt32BinaryMessage(message, 1); - var numberImages = me.readInt32BinaryMessage(message, 5); - var images = []; - for (var i = 0; i < numberImages; i++) - { - images[i] = me.readInt32BinaryMessage(message, 9 + (i * 4)); - } - p2j.screen.destroyWindow(id, images); - break; - case 0x8C: - // change visibility for top-level or child window - var id = me.readInt32BinaryMessage(message, 1); - var visible = message[5] === 0 ? false : true; - p2j.screen.setWindowVisible(id, visible); - break; - - // font and metrics related requests - case 0x8D: - // paragraph height - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var textLength = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var text = me.readStringBinaryMessageByLength(message, offset, textLength); - offset = offset + textLength * 2; - - var font = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var maxWidth = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - var pheight = p2j.screen.layoutParagraphWorker(null, - text, - font, - 0, - 0, - maxWidth); - - me.sendInt16BinaryMessage(0x06, msgId, pheight); - break; - case 0x8E: - // text height - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var textLength = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var text = me.readStringBinaryMessageByLength(message, offset, textLength); - offset = offset + textLength * 2; - - var font = me.readInt32BinaryMessage(message, offset); - - var theight = p2j.fonts.getTextHeight(font, text); - - me.sendInt8BinaryMessage(0x07, msgId, theight); - break; - case 0x8F: - // text width - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var textLength = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var text = me.readStringBinaryMessageByLength(message, offset, textLength); - offset = offset + textLength * 2; - - var font = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var twidth = p2j.fonts.getTextWidth(font, text); - - me.sendInt16BinaryMessage(0x08, msgId, twidth); - break; - case 0x90: - // font height - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var font = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var fheight = p2j.fonts.getFontHeight(font); - - me.sendInt8BinaryMessage(0x09, msgId, fheight); - break; - case 0x91: - // font widths - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var font = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var fwidths = p2j.fonts.getFontWidths(font); - - me.sendByteArrayBinaryMessage(0x0A, msgId, fwidths); - break; - case 0x92: - // create font - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var font = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var nameLength = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - var name = me.readStringBinaryMessageByLength(message, offset, nameLength); - offset = offset + nameLength * 2; - - var size = message[offset]; - offset = offset + 1; - - var style = message[offset]; - offset = offset + 1; - - var defLength = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var b64font = ""; - if (defLength > 0) - { - var binFont = ''; - for (var i = 0; i < defLength; i++) + var isDrawing = message[0] === 0x81; + if (isDrawing) + { + p2j.displayWaitCursor(); + } + setTimeout( + function() + { + messageHandler(message); + }, 1); + if (isDrawing) + { + setTimeout( + function() { - binFont += String.fromCharCode(message[offset]); - offset = offset + 1; - } - b64font = window.btoa(binFont); - } - - var fontId = p2j.fonts.createFont(font, name, size, style, b64font); - - me.sendInt32BinaryMessage(0x0B, msgId, fontId); - break; - case 0x93: - // derive font - - var offset = 1; - - var msgId = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var font = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - p2j.fonts.deriveFont(font); - - me.sendInt8BinaryMessage(0x0C, msgId, 1); - break; - case 0x94: - // set cursor style - var styleId = me.readInt32BinaryMessage(message, 1); - var wid = me.readInt32BinaryMessage(message, 5); - p2j.screen.setCursorStyle(styleId, wid); - break; - case 0x95: - // restack windows - var num = me.readInt32BinaryMessage(message, 1); - var winids = []; - for (var i = 0; i < num; i++) - { - winids.push(me.readInt32BinaryMessage(message, 5 + (i * 4))); - } - p2j.screen.restackZOrderEntries(winids); - break; - case 0x96: - // register/deregister widgets for mouse actions - - var offset = 1; - - // the number of windows with new widgets - var windowNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var j = 0; j < windowNo; j++) - { - // the window ID - var windowID = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - if (!p2j.screen.isExistingWindowId(windowID)) - { - console.log("undefined window " + windowID); - continue; - } - - var theWindow = p2j.screen.getWindow(windowID); - - // the number of new widgets in this window - var widgetNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var k = 0; k < widgetNo; k++) - { - // the widget ID - var wid = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - // the coordinates - var x = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - var y = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - // the size - var width = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - var height = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - // bit-encoded mouse ops: each bit from 1 to 11, if set, represents a mouse - // operation as defined in p2j.screen.mouseOps - var actions = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - theWindow.deregisterMouseWidget(wid); - theWindow.registerMouseWidget(wid, x, y, width, height, actions); - } - - var allWNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - var zOrder = []; - - for (var k = 0; k < allWNo; k++) - { - zOrder[k] = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - } - - theWindow.setWidgetZOrder(zOrder); - } - - // the number of windows with dead widgets - windowNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var j = 0; j < windowNo; j++) - { - // the window ID - var windowID = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var theWindow = p2j.screen.getWindow(windowID); - - if (theWindow == undefined) - { - console.log("undefined window" + windowID); - continue; - } - - // the number of dead widgets in this window - var widgetNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var k = 0; k < widgetNo; k++) - { - // the widget ID - var wid = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - theWindow.deregisterMouseWidget(wid); - } - } - - // the number of windows with new "any widgets" - windowNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var j = 0; j < windowNo; j++) - { - // the window ID - var windowID = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - if (!p2j.screen.isExistingWindowId(windowID)) - { - console.log("undefined window " + windowID); - continue; - } - - var theWindow = p2j.screen.getWindow(windowID); - - // the number of new "any widgets" in this window - var widgetNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var k = 0; k < widgetNo; k++) - { - // the widget ID - var wid = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - theWindow.deregisterAnyMouseWidget(wid); - theWindow.registerAnyMouseWidget(wid); - } - } - - // the number of windows with dead "any widgets" - windowNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var j = 0; j < windowNo; j++) - { - // the window ID - var windowID = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var theWindow = p2j.screen.getWindow(windowID); - - if (theWindow == undefined) - { - console.log("undefined window" + windowID); - continue; - } - - // the number of dead "any widgets" in this window - var widgetNo = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - for (var k = 0; k < widgetNo; k++) - { - // the widget ID - var wid = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - theWindow.deregisterAnyMouseWidget(wid); - } - } - - break; - case 0x97: - // enable/disable mouse events - p2j.screen.captureMouseEvents(message[1] == 1); - break; - case 0x98: - // enable/disable OS events - var wid = me.readInt32BinaryMessage(message, 1); - p2j.screen.enableOsEvents(wid, message[5] == 1); - break; - case 0x99: - // set window iconification state - var offset = 1; - - var windowID = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var iconified = (message[offset] == 1); - offset = offset + 1; - - var theWindow = p2j.screen.getWindow(windowID); - //p2j.logger.log("recieved 0x99: iconified = " + iconified + " windowId=" + windowID); - if (iconified) - { - theWindow.iconify(); - } - else - { - theWindow.deiconify(); - } - - break; - case 0x9A: - // resizeable window - var offset = 1; - - var windowID = me.readInt32BinaryMessage(message, offset); - offset = offset + 4; - - var theWindow = p2j.screen.getWindow(windowID); - - theWindow.resizeable = (message[offset] == 1); - offset = offset + 1; - - if (theWindow.resizeable) - { - theWindow.minWidth = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - theWindow.minHeight = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - - theWindow.maxWidth = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - theWindow.maxHeight = me.readInt16BinaryMessage(message, offset); - offset = offset + 2; - } - else - { - var rect = theWindow.canvas.getBoundingClientRect(); - - var rwidth = rect.right - rect.left + 1; - var rheight = rect.bottom - rect.top + 1; - - theWindow.minWidth = rwidth; - theWindow.minHeight = rheight; - - theWindow.maxWidth = rwidth; - theWindow.maxHeight = rheight; - } - - break; - case 0x9B: - // current editors selection is changed - var text = me.readStringBinaryMessage(message, 1); - p2j.clipboard.setSelection(text); - break; - case 0x9C: - var id = me.readInt32BinaryMessage(message, 1); - p2j.screen.moveToTop(id); - break; - case 0x9D: - var id = me.readInt32BinaryMessage(message, 1); - p2j.screen.moveToBottom(id); - break; - case 0x9E: - // change sensitivity for top-level or child window - var id = me.readInt32BinaryMessage(message, 1); - var enabled = message[5] === 0 ? false : true; - p2j.screen.setWindowEnabled(id, enabled); - break; - }; + p2j.restoreCursor(); + }, 1); + } } else { // text messages var pay = JSON.parse(data); - - switch (pay.c) - { - case 0: - // color palette - p2j.screen.palette = pay.p; - break; - }; + setTimeout( + function() + { + switch (pay.c) + { + case 0: + // color palette + p2j.screen.palette = pay.p; + break; + }; + }, 1); } - }; + } // on web socket close ws.onclose = function() === modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js 2015-11-12 18:54:21 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.mouse.js 2015-12-10 15:02:20 +0000 @@ -534,8 +534,14 @@ { return; } - // resize canvas + // resize the offscreen canvas win.resize(mThis.resizeArea.width, mThis.resizeArea.height); + // set dimension for the window canvas + win.canvas.width = mThis.resizeArea.width; + win.canvas.height = mThis.resizeArea.height; + // blast the offscreen image to the window canvas + win.ctx.drawImage(win.offscreenCanvas, 0, 0); + // set new location win.canvas.style.left = mThis.resizeArea.left + "px"; win.canvas.style.top = mThis.resizeArea.top + "px"; === modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-12-09 19:44:53 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-12-10 15:02:20 +0000 @@ -351,8 +351,14 @@ /** Backing canvas on which all output for this window will be rendered. */ this.canvas = p2j.createCanvas(null, options); + this.canvas.style.visibility = "hidden"; + this.resizeable = false; - + + /** The off screen canvas to be used to make batch drawing. */ + this.offscreenCanvas = document.createElement('canvas'); + this.offscreenContext = this.offscreenCanvas.getContext('2d', {alpha : true}); + /** Canvas 2D graphics context. */ this.ctx = this.canvas.getContext('2d', {alpha : true}); @@ -369,7 +375,7 @@ this.iconHeight = 0; /** Creates canvas renderer. */ - this.canvasRenderer = new CanvasRenderer(this.canvas, this.ctx, strokesManager, + this.canvasRenderer = new CanvasRenderer(this.offscreenCanvas, this.offscreenContext, strokesManager, p2j.fonts, p2j.logger); /** @@ -934,9 +940,9 @@ var numOps = p2j.socket.readInt32BinaryMessage(message, 5); p2j.logger.log("START DRAWING CYCLE FOR WINDOW " + this.id); - + var idx = 9; - + drawLoop: for (var i = 0; i < numOps; i++) { @@ -989,7 +995,6 @@ y = p2j.socket.readInt32BinaryMessage(message, idx + offset); offset = offset + 4; - this.canvasRenderer.drawText(text, x, y, centered); extra = " text = " + text + "; x = " + x + "; y = " + y + "; centered = " + centered; @@ -1017,7 +1022,6 @@ var lheight = p2j.socket.readInt32BinaryMessage(message, idx + offset); offset = offset + 4; - this.canvasRenderer.drawScaledText(currentFont, text, x, y, centered, lwidth, lheight); extra = " text = " + text + "; x = " + x + "; y = " + y + "; centered = " + centered + @@ -1045,9 +1049,8 @@ offset = offset + 4; // TODO: this might need to be 'bottom', too - this.ctx.textBaseline = 'top'; - - me.layoutParagraphWorker(this.ctx, text, fontId, x, y, width); + this.offscreenContext.textBaseline = 'top'; + me.layoutParagraphWorker(this.offscreenContext, text, fontId, x, y, width); break; case ops.DRAW_LINE: @@ -1056,7 +1059,8 @@ var x2 = p2j.socket.readInt32BinaryMessage(message, idx + 9); var y2 = p2j.socket.readInt32BinaryMessage(message, idx + 13); extra = " x1 = " + x1 + "; y1 = " + y1 + "; x2 = " + x2 + "; y2 = " + y2; - this.canvasRenderer.strokeLineSegment(this.ctx, x1, y1, x2, y2, this.canvasRenderer.rawColor); + this.canvasRenderer.strokeLineSegment(this.offscreenContext, + x1, y1, x2, y2, this.canvasRenderer.rawColor); break; case ops.DRAW_RECT: case ops.FILL_RECT: @@ -1064,9 +1068,9 @@ y = p2j.socket.readInt32BinaryMessage(message, idx + 5); width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); + filled = (type === ops.FILL_RECT); extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height; - filled = (type === ops.FILL_RECT); - this.canvasRenderer.strokeRect(this.ctx, x, y, width, height, + this.canvasRenderer.strokeRect(this.offscreenContext, x, y, width, height, this.canvasRenderer.rawColor, filled); break; case ops.DRAW_ROUND_RECT: @@ -1076,8 +1080,9 @@ height = p2j.socket.readInt32BinaryMessage(message, idx + 13); diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17); extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height - + "; diameter = " + diameter; - this.canvasRenderer.drawRoundRect(this.ctx, x, y, width, height, diameter, + + "; diameter = " + diameter; + this.canvasRenderer.drawRoundRect(this.offscreenContext, x, y, + width, height, diameter, this.canvasRenderer.rawColor, false); break; case ops.DRAW_IMAGE: @@ -1088,7 +1093,6 @@ height = p2j.socket.readInt32BinaryMessage(message, idx + 13); extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height; - var encoding = message[idx + 17]; var key = p2j.socket.readInt32BinaryMessage(message, idx + 18); var pixelsInBytes = width * height * 4; @@ -1103,9 +1107,11 @@ { imgData = message; imgDataOffset = idx + 22; - loadedImages.set(key, message.subarray(imgDataOffset, imgDataOffset + pixelsInBytes)); + loadedImages.set(key, message.subarray( + imgDataOffset, imgDataOffset + pixelsInBytes)); } - this.canvasRenderer.drawImage(this.ctx, x, y, width, height, imgData, imgDataOffset); + this.canvasRenderer.drawImage(this.offscreenContext, x, y, width, height, + imgData, imgDataOffset); break; case ops.FILL_ROUND_RECT: x = p2j.socket.readInt32BinaryMessage(message, idx + 1); @@ -1115,13 +1121,12 @@ diameter = p2j.socket.readInt32BinaryMessage(message, idx + 17); extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height + "; diameter = " + diameter; - this.canvasRenderer.drawRoundRect(this.ctx, x, y, width, height, diameter, - this.canvasRenderer.rawColor, true); + this.canvasRenderer.drawRoundRect(this.offscreenContext, x, y, width, height, + diameter, this.canvasRenderer.rawColor, true); break; case ops.FILL_POLYGON: offset = idx + 1; var numPoints = p2j.socket.readInt32BinaryMessage(message, offset); - var xPoints = []; var yPoints = []; @@ -1133,8 +1138,8 @@ yPoints[j] = p2j.socket.readInt32BinaryMessage(message, offset); } - this.canvasRenderer.strokePolygon(this.ctx, xPoints, yPoints, numPoints, - this.canvasRenderer.rawColor, true); + this.canvasRenderer.strokePolygon(this.offscreenContext, xPoints, yPoints, + numPoints, this.canvasRenderer.rawColor, true); break; case ops.DRAW_3D_RECT: case ops.FILL_3D_RECT: @@ -1145,8 +1150,8 @@ raised = (message[idx + 17] === 1); filled = (type == ops.FILL_3D_RECT); extra = " x = " + x +"; y = " + y + "; width = " + width + "; height = " + - height + "; raised = " + raised; - this.canvasRenderer.draw3DRect(this.ctx, x, y, width, height, + height + "; raised = " + raised; + this.canvasRenderer.draw3DRect(this.offscreenContext, x, y, width, height, this.canvasRenderer.rawColor, filled, raised); break; case ops.SET_COLOR: @@ -1164,22 +1169,21 @@ break; case ops.SET_FONT: fontId = p2j.socket.readInt32BinaryMessage(message, idx + 1); - - setFont(this.ctx, fontId); + setFont(this.offscreenContext, fontId); break; case ops.SET_FONT_STYLE: var style = p2j.socket.readInt32BinaryMessage(message, idx + 1); - p2j.fonts.setFontStyle(currentFont, style); fname = p2j.fonts.getFontName(currentFont); - this.ctx.font = fname; + this.offscreenContext.font = fname; break; case ops.TRANSLATE_PUSH: x = p2j.socket.readInt32BinaryMessage(message, idx + 1); y = p2j.socket.readInt32BinaryMessage(message, idx + 5); this.trans++; - extra = " " + this.trans.toString() + "; x = " + x.toString() +"; y = " + y.toString(); - this.canvasRenderer.translate(x, y); + extra = " " + this.trans.toString() + "; x = " + x.toString() + + "; y = " + y.toString(); + this.canvasRenderer.translate(x, y); break; case ops.TRANSLATE_POP: x = p2j.socket.readInt32BinaryMessage(message, idx + 1); @@ -1214,6 +1218,9 @@ width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); this.resize(width, height); + this.canvas.width = width; + this.canvas.height = height; + extra = " x = " + x + "; y = " + y + "; width = " + width + "; height = " + height; break; case ops.SET_LOCATION: @@ -1227,6 +1234,8 @@ width = p2j.socket.readInt32BinaryMessage(message, idx + 1); height = p2j.socket.readInt32BinaryMessage(message, idx + 5); this.resize(width, height); + this.canvas.width = width; + this.canvas.height = height; extra = " width = " + width + "; height = " + height; break; case ops.DRAW_HIGHLIGHT: @@ -1292,7 +1301,8 @@ p2j.logger.log("PaintPrimitives." + ops[type] + " " + extra); idx += sz; } - + // to blast the offscreen image on the window canvas + this.ctx.drawImage(this.offscreenCanvas, 0, 0); p2j.logger.log("END DRAWING CYCLE FOR WINDOW " + this.id); };