feat: some assets

src/assets/js/canvas.js

+/*
+ * Copyright (c) 2015 Sylvain Peyrefitte
+ *
+ * This file is part of mstsc.js.
+ *
+ * mstsc.js is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+(function() {
+
+	/**
+	 * decompress bitmap from RLE algorithm
+	 * @param	bitmap	{object} bitmap object of bitmap event of node-rdpjs
+	 */
+	function decompress (bitmap) {
+		var fName = null;
+		switch (bitmap.bitsPerPixel) {
+		case 15:
+			fName = 'bitmap_decompress_15';
+			break;
+		case 16:
+			fName = 'bitmap_decompress_16';
+			break;
+		case 24:
+			fName = 'bitmap_decompress_24';
+			break;
+		case 32:
+			fName = 'bitmap_decompress_32';
+			break;
+		default:
+			throw 'invalid bitmap data format';
+		}
+
+		var input = new Uint8Array(bitmap.data);
+		var inputPtr = Module._malloc(input.length);
+		var inputHeap = new Uint8Array(Module.HEAPU8.buffer, inputPtr, input.length);
+		inputHeap.set(input);
+
+		var output_width = bitmap.destRight - bitmap.destLeft + 1;
+		var output_height = bitmap.destBottom - bitmap.destTop + 1;
+		var ouputSize = output_width * output_height * 4;
+		var outputPtr = Module._malloc(ouputSize);
+
+		var outputHeap = new Uint8Array(Module.HEAPU8.buffer, outputPtr, ouputSize);
+
+		var res = Module.ccall(fName,
+			'number',
+			['number', 'number', 'number', 'number', 'number', 'number', 'number', 'number'],
+			[outputHeap.byteOffset, output_width, output_height, bitmap.width, bitmap.height, inputHeap.byteOffset, input.length]
+		);
+
+		var output = new Uint8ClampedArray(outputHeap.buffer, outputHeap.byteOffset, ouputSize);
+
+		Module._free(inputPtr);
+		Module._free(outputPtr);
+
+		return { width : output_width, height : output_height, data : output };
+	}
+
+	/**
+	 * Un compress bitmap are reverse in y axis
+	 */
+	function reverse (bitmap) {
+		return { width : bitmap.width, height : bitmap.height, data : new Uint8ClampedArray(bitmap.data) };
+	}
+
+	/**
+	 * Canvas renderer
+	 * @param canvas {canvas} use for rendering
+	 */
+	function Canvas(canvas) {
+		this.canvas = canvas;
+		this.ctx = canvas.getContext("2d");
+	}
+
+	Canvas.prototype = {
+		/**
+		 * update canvas with new bitmap
+		 * @param bitmap {object}
+		 */
+		update : function (bitmap) {
+			var output = null;
+			if (bitmap.isCompress) {
+				output = decompress(bitmap);
+			}
+			else {
+				output = reverse(bitmap);
+			}
+
+			// use image data to use asm.js
+			var imageData = this.ctx.createImageData(output.width, output.height);
+			imageData.data.set(output.data);
+			this.ctx.putImageData(imageData, bitmap.destLeft, bitmap.destTop);
+		}
+	};
+
+	/**
+	 * Module export
+	 */
+	Mstsc.Canvas = {
+		create : function (canvas) {
+			return new Canvas(canvas);
+		}
+	}
+})();

src/assets/js/client.js

+/*
+ * Copyright (c) 2015 Sylvain Peyrefitte
+ *
+ * This file is part of mstsc.js.
+ *
+ * mstsc.js is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+(function () {
+  /**
+   * Mouse button mapping
+   * @param button {integer} client button number
+   */
+  function mouseButtonMap(button) {
+    switch (button) {
+      case 0:
+        return 1;
+      case 2:
+        return 2;
+      default:
+        return 0;
+    }
+  }
+
+  /**
+   * Mstsc client
+   * Input client connection (mouse and keyboard)
+   * bitmap processing
+   * @param canvas {canvas} rendering element
+   */
+  function Client(canvas) {
+    this.canvas = canvas;
+    // create renderer
+    this.render = new Mstsc.Canvas.create(this.canvas);
+    this.socket = null;
+    this.activeSession = false;
+    this.install();
+  }
+
+  Client.prototype = {
+    install: function () {
+      var self = this;
+      // bind mouse move event
+      this.canvas.addEventListener('mousemove', function (e) {
+        if (!self.socket) return;
+
+        var offset = Mstsc.elementOffset(self.canvas);
+        self.socket.emit('mouse', e.clientX - offset.left, e.clientY - offset.top, 0, false);
+        e.preventDefault || !self.activeSession();
+        return false;
+      });
+      this.canvas.addEventListener('mousedown', function (e) {
+        if (!self.socket) return;
+
+        var offset = Mstsc.elementOffset(self.canvas);
+        self.socket.emit('mouse', e.clientX - offset.left, e.clientY - offset.top, mouseButtonMap(e.button), true);
+        e.preventDefault();
+        return false;
+      });
+      this.canvas.addEventListener('mouseup', function (e) {
+        if (!self.socket || !self.activeSession) return;
+
+        var offset = Mstsc.elementOffset(self.canvas);
+        self.socket.emit('mouse', e.clientX - offset.left, e.clientY - offset.top, mouseButtonMap(e.button), false);
+        e.preventDefault();
+        return false;
+      });
+      this.canvas.addEventListener('contextmenu', function (e) {
+        if (!self.socket || !self.activeSession) return;
+
+        var offset = Mstsc.elementOffset(self.canvas);
+        self.socket.emit('mouse', e.clientX - offset.left, e.clientY - offset.top, mouseButtonMap(e.button), false);
+        e.preventDefault();
+        return false;
+      });
+      this.canvas.addEventListener('DOMMouseScroll', function (e) {
+        if (!self.socket || !self.activeSession) return;
+
+        var isHorizontal = false;
+        var delta = e.detail;
+        var step = Math.round(Math.abs(delta) * 15 / 8);
+
+        var offset = Mstsc.elementOffset(self.canvas);
+        self.socket.emit('wheel', e.clientX - offset.left, e.clientY - offset.top, step, delta > 0, isHorizontal);
+        e.preventDefault();
+        return false;
+      });
+      this.canvas.addEventListener('mousewheel', function (e) {
+        if (!self.socket || !self.activeSession) return;
+
+        var isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+        var delta = isHorizontal ? e.deltaX : e.deltaY;
+        var step = Math.round(Math.abs(delta) * 15 / 8);
+
+        var offset = Mstsc.elementOffset(self.canvas);
+        self.socket.emit('wheel', e.clientX - offset.left, e.clientY - offset.top, step, delta > 0, isHorizontal);
+        e.preventDefault();
+        return false;
+      });
+
+      // bind keyboard event
+      window.addEventListener('keydown', function (e) {
+        if (!self.socket || !self.activeSession) return;
+
+        self.socket.emit('scancode', Mstsc.scancode(e), true);
+
+        e.preventDefault();
+        return false;
+      });
+      window.addEventListener('keyup', function (e) {
+        if (!self.socket || !self.activeSession) return;
+
+        self.socket.emit('scancode', Mstsc.scancode(e), false);
+
+        e.preventDefault();
+        return false;
+      });
+
+      return this;
+    },
+    /**
+     * connect
+     * @param ip {string} ip target for rdp
+     * @param domain {string} microsoft domain
+     * @param username {string} session username
+     * @param password {string} session password
+     * @param next {function} asynchrone end callback
+     */
+    connect: function (token, socket) {
+      // compute socket.io path (cozy cloud integration)
+      var parts = document.location.pathname.split('/')
+        , base = parts.slice(0, parts.length - 1).join('/') + '/'
+        , path = base + socket;
+
+
+      // start connection
+      var self = this;
+      this.socket = io(window.location.protocol + "//" + window.location.host, {"path": path}).on('rdp-connect', function () {
+        // this event can be occured twice (RDP protocol stack artefact)
+        console.log('[mstsc.js] connected');
+        self.activeSession = true;
+      }).on('rdp-bitmap', function (bitmap) {
+        console.log('[mstsc.js] bitmap update bpp : ' + bitmap.bitsPerPixel);
+        self.render.update(bitmap);
+      }).on('rdp-close', function () {
+        // next(null);
+        console.log('[mstsc.js] close');
+        self.activeSession = false;
+      }).on('rdp-error', function (err) {
+        // next(err);
+        alert(err.code);
+        console.log('[mstsc.js] error : ' + err.code + '(' + err.message + ')');
+        self.activeSession = false;
+      });
+      if (token != null) {
+        // emit infos event
+        this.socket.emit('infos', {
+          token: token,
+          screen: {
+            width: this.canvas.width,
+            height: this.canvas.height
+          },
+          locale: Mstsc.locale()
+        });
+      } else {
+        alert("No privilege!!!")
+      }
+    }
+  };
+
+  Mstsc.client = {
+    create: function (canvas) {
+      return new Client(canvas);
+    }
+  }
+})();

src/assets/js/mstsc.js

+/*
+ * Copyright (c) 2015 Sylvain Peyrefitte
+ *
+ * This file is part of mstsc.js.
+ *
+ * mstsc.j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+(function() {
+
+	/**
+	 * Use for domain declaration
+	 */
+	Mstsc = function () {
+	};
+
+	Mstsc.prototype = {
+		// shortcut
+		$ : function (id) {
+			return document.getElementById(id);
+		},
+
+		/**
+		 * Compute screen offset for a target element
+		 * @param el {DOM element}
+		 * @return {top : {integer}, left {integer}}
+		 */
+		elementOffset : function (el) {
+		    var x = 0;
+		    var y = 0;
+		    while (el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop )) {
+		        x += el.offsetLeft - el.scrollLeft;
+		        y += el.offsetTop - el.scrollTop;
+		        el = el.offsetParent;
+		    }
+		    return { top: y, left: x };
+		},
+
+		/**
+		 * Try to detect browser
+		 * @returns {String} [firefox|chrome|ie]
+		 */
+		browser : function () {
+			if (typeof InstallTrigger !== 'undefined') {
+				return 'firefox';
+			}
+
+			if (!!window.chrome) {
+				return 'chrome';
+			}
+
+			if (!!document.docuemntMode) {
+				return 'ie';
+			}
+
+			return null;
+		},
+
+		/**
+		 * Try to detect language
+		 * @returns
+		 */
+		locale : function () {
+			return window.navigator.userLanguage || window.navigator.language;
+		}
+	}
+
+})();
+
+this.Mstsc = new Mstsc();