text: import React from 'react';
  import Window from "./Window";
  //import ClickOutHandler from 'react-clickout-handler';
  function mapKey(keyCode) {
    var xkm = [[65406, 0, 65406, 0, 0, 0, 0], [65307, 0, 65307, 0, 0, 0, 0], [49, 33, 49, 33, 0, 0, 0], [50, 64, 50, 64, 0, 0, 0], [51, 35, 51, 35, 0, 0, 0], [52, 36, 52, 36, 0, 0, 0],
      [53, 37, 53, 37, 0, 0, 0], [54, 94, 54, 94, 0, 0, 0], [55, 38, 55, 38, 0, 0, 0], [56, 42, 56, 42, 0, 0, 0], [57, 40, 57, 40, 0, 0, 0], [48, 41, 48, 41, 0, 0, 0],
      [45, 95, 45, 95, 0, 0, 0], [61, 43, 61, 43, 0, 0, 0], [65288, 65288, 65288, 65288, 0, 0, 0], [65289, 65056, 65289, 65056, 0, 0, 0], [113, 81, 113, 81, 0, 0, 0],
      [119, 87, 119, 87, 0, 0, 0], [101, 69, 101, 69, 0, 0, 0], [114, 82, 114, 82, 0, 0, 0], [116, 84, 116, 84, 0, 0, 0], [121, 89, 121, 89, 0, 0, 0], [117, 85, 117, 85, 0, 0, 0],
      [105, 73, 105, 73, 0, 0, 0], [111, 79, 111, 79, 0, 0, 0], [112, 80, 112, 80, 0, 0, 0], [91, 123, 91, 123, 0, 0, 0], [93, 125, 93, 125, 0, 0, 0], [65293, 0, 65293, 0, 0, 0, 0],
      [65507, 0, 65507, 0, 0, 0, 0], [97, 65, 97, 65, 0, 0, 0], [115, 83, 115, 83, 0, 0, 0], [100, 68, 100, 68, 0, 0, 0], [102, 70, 102, 70, 0, 0, 0], [103, 71, 103, 71, 0, 0, 0],
      [104, 72, 104, 72, 0, 0, 0], [106, 74, 106, 74, 0, 0, 0], [107, 75, 107, 75, 0, 0, 0], [108, 76, 108, 76, 0, 0, 0], [59, 58, 59, 58, 0, 0, 0], [39, 34, 39, 34, 0, 0, 0],
      [96, 126, 96, 126, 0, 0, 0], [65505, 0, 65505, 0, 0, 0, 0], [92, 124, 92, 124, 0, 0, 0], [122, 90, 122, 90, 0, 0, 0], [120, 88, 120, 88, 0, 0, 0], [99, 67, 99, 67, 0, 0, 0],
      [118, 86, 118, 86, 0, 0, 0], [98, 66, 98, 66, 0, 0, 0], [110, 78, 110, 78, 0, 0, 0], [109, 77, 109, 77, 0, 0, 0], [44, 60, 44, 60, 0, 0, 0], [46, 62, 46, 62, 0, 0, 0],
      [47, 63, 47, 63, 0, 0, 0], [65506, 0, 65506, 0, 0, 0, 0], [65450, 65450, 65450, 65450, 65450, 65450, 269024801], [65513, 65511, 65513, 65511, 0, 0, 0], [32, 0, 32, 0, 0, 0, 0],
      [65509, 0, 65509, 0, 0, 0, 0], [65470, 65470, 65470, 65470, 65470, 65470, 269024769], [65471, 65471, 65471, 65471, 65471, 65471, 269024770],
      [65472, 65472, 65472, 65472, 65472, 65472, 269024771], [65473, 65473, 65473, 65473, 65473, 65473, 269024772], [65474, 65474, 65474, 65474, 65474, 65474, 269024773],
      [65475, 65475, 65475, 65475, 65475, 65475, 269024774], [65476, 65476, 65476, 65476, 65476, 65476, 269024775], [65477, 65477, 65477, 65477, 65477, 65477, 269024776],
      [65478, 65478, 65478, 65478, 65478, 65478, 269024777], [65479, 65479, 65479, 65479, 65479, 65479, 269024778], [65407, 0, 65407, 0, 0, 0, 0], [65300, 0, 65300, 0, 0, 0, 0],
      [65429, 65463, 65429, 65463, 0, 0, 0], [65431, 65464, 65431, 65464, 0, 0, 0], [65434, 65465, 65434, 65465, 0, 0, 0], [65453, 65453, 65453, 65453, 65453, 65453, 269024803],
      [65430, 65460, 65430, 65460, 0, 0, 0], [65437, 65461, 65437, 65461, 0, 0, 0], [65432, 65462, 65432, 65462, 0, 0, 0], [65451, 65451, 65451, 65451, 65451, 65451, 269024802],
      [65436, 65457, 65436, 65457, 0, 0, 0], [65433, 65458, 65433, 65458, 0, 0, 0], [65435, 65459, 65435, 65459, 0, 0, 0], [65438, 65456, 65438, 65456, 0, 0, 0],
      [65439, 65454, 65439, 65454, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [60, 62, 60, 62, 124, 166, 124], [65480, 65480, 65480, 65480, 65480, 65480, 269024779],
      [65481, 65481, 65481, 65481, 65481, 65481, 269024780], [65360, 0, 65360, 0, 0, 0, 0], [65362, 0, 65362, 0, 0, 0, 0], [65365, 0, 65365, 0, 0, 0, 0], [65361, 0, 65361, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [65363, 0, 65363, 0, 0, 0, 0], [65367, 0, 65367, 0, 0, 0, 0], [65364, 0, 65364, 0, 0, 0, 0], [65366, 0, 65366, 0, 0, 0, 0], [65379, 0, 65379, 0, 0, 0, 0],
      [65535, 0, 65535, 0, 0, 0, 0], [65421, 0, 65421, 0, 0, 0, 0], [65508, 0, 65508, 0, 0, 0, 0], [65299, 65387, 65299, 65387, 0, 0, 0], [65377, 65301, 65377, 65301, 0, 0, 0],
      [65455, 65455, 65455, 65455, 65455, 65455, 269024800], [65514, 65512, 65514, 65512, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [65515, 0, 65515, 0, 0, 0, 0], [65516, 0, 65516, 0, 0, 0, 0],
      [65383, 0, 65383, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [65027, 0, 65027, 0, 0, 0, 0], [0, 65513, 0, 65513, 0, 0, 0], [65469, 0, 65469, 0, 0, 0, 0], [0, 65515, 0, 65515, 0, 0, 0], [0, 65517, 0, 65517, 0, 0, 0],
      [269025074, 0, 269025074, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [65454, 65454, 65454, 65454, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [269025046, 0, 269025046, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [269025071, 0, 269025071, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025047, 0, 269025047, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 65511, 0, 65511, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025042, 0, 269025042, 0, 0, 0, 0], [269025053, 0, 269025053, 0, 0, 0, 0],
      [269025044, 269025073, 269025044, 269025073, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025045, 269025068, 269025045, 269025068, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025068, 0, 269025068, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [269025041, 0, 269025041, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025043, 0, 269025043, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025070, 0, 269025070, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [269025068, 0, 269025068, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025113, 0, 269025113, 0, 0, 0, 0], [269025028, 0, 269025028, 0, 0, 0, 0], [269025030, 0, 269025030, 0, 0, 0, 0],
      [269025029, 0, 269025029, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025066, 0, 269025066, 0, 0, 0, 0],
      [269025040, 0, 269025040, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025067, 0, 269025067, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [269025051, 0, 269025051, 0, 0, 0, 0], [269025072, 0, 269025072, 0, 0, 0, 0], [269025139, 0, 269025139, 0, 0, 0, 0], [269025064, 0, 269025064, 0, 0, 0, 0],
      [269025063, 0, 269025063, 0, 0, 0, 0], [269025062, 0, 269025062, 0, 0, 0, 0], [269025075, 0, 269025075, 0, 0, 0, 0], [269025049, 0, 269025049, 0, 0, 0, 0],
      [269025074, 0, 269025074, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [269025171, 0, 269025171, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025173, 0, 269025173, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0]];
    var exceptionKeys = {
      '190': '46',// PERIOD CHROME
      '16': '65506', // SHIFT CHROME
      '17': '65507', // CTRL CHROME
      '18': '65513', // ALT CHROME
      '34': '65307', // ESC CHROME
      '191': '47', // BACKSLASH CHROME
      '20': '65509', // CAPS CHROME
      '9': '65289', // TAB CHROME
      '189': '45', // MINUS CHROME
      '187': '61', // EQUALS CHROME
      '8': '65288', // BACKSPACE CHROME
      '220': '92', // FOWARD SLASH CHROME
      '13': '65293', // ENTER CHROME
      '192': '96', // TILDE CHROME
      '186': '59', // SEMICOLON CHROME
      '222': '34', // QUOTES CHROME
      '188': '44', // COMMA CHROME
      '27': '65307', // ESC CHROME
      '39': '65363', // RIGHT ARROW CHROME
      '37': '65361', // LEFT ARROW CHROME
      '38': '65362', // UP ARROW CHROME
      '40': '65364', // DOWN ARROW CHROME
      '91': '65506', // set osx cmd to shift
    };
    function buildASCIIToXKeyMap(XKeysMap, min) {
      var asciiToX = {};
      for (var i = 0; i < XKeysMap.length; i++) {
        for (var j = 0; j < XKeysMap[i].length; j++) {
          var key = XKeysMap[i][j];
          var value = i + min;
          if (key !== 0)
            asciiToX[key] = value;
        }
      }
      return asciiToX;
    }
    var keyMap = buildASCIIToXKeyMap(xkm, 8);
    if (exceptionKeys[keyCode])
      keyCode = exceptionKeys[keyCode];
    var key = keyMap[keyCode];
    if (key === undefined || key === null)
      key = 62; // shift
    if (keyCode == 219) {
      key = 34;
    } else if (keyCode === 221) {
      key = 35
    }
    return key;
  }
  
  class Cloudware extends React.Component {
  
    constructor(props) {
      super(props);
      this.container = React.createRef();
      this.state = {
        windows: [],
        isActive: false
      };
    }
  
    _findWindow(wid) {
      for (var i in this.state.windows) {
        if (this.state.windows[i].wid == wid) {
          return this.state.windows[i];
        }
      }
      return null;
    }
    componentDidMount() {
      var ws = new WebSocket("ws://temp.wss.kfcoding.com/");
      var self = this;
      ws.binaryType = 'arraybuffer';
      ws.onopen = function () {
        console.log(ws);
        var container = self.container.current;
        container.onmousemove = function (e) {
          var dom_left = container.offsetLeft + container.offsetParent.offsetLeft;
          var dom_top = container.offsetTop + container.offsetParent.offsetTop;
  
          var bei = 1;
          var x = Math.floor((e.pageX - dom_left) / bei);
          var y = Math.floor((e.pageY - dom_top) / bei);
          var buf = new ArrayBuffer(5);
          var dv = new DataView(buf);
          dv.setUint8(0, 7);
          dv.setUint16(1, x, true);
          dv.setUint16(3, y, true);
          if (ws.readyState == 1)
            ws.send(buf);
        };
  
        container.onmousedown = function (e) {
          var buf = new ArrayBuffer(5);
          var dv = new DataView(buf);
          dv.setUint8(0, 8);
          dv.setUint32(1, e.which, true);
          if (ws.readyState == 1)
            ws.send(buf);
        };
        container.onmouseup = function (e) {
          var buf = new ArrayBuffer(5);
          var dv = new DataView(buf);
          dv.setUint8(0, 9);
          dv.setUint32(1, e.which, true);
          if (ws.readyState == 1)
            ws.send(buf);
        };
        document.onkeydown = function (e) {
          /*if (!this.state.isActive) {
            console.log(this.state.isActive);
            return;
          }*/
          if (e.keyCode == 9 || e.keyCode == 32) {  //tab pressed
            e.preventDefault(); // stops its action
          }
          var buf = new ArrayBuffer(5);
          var dv = new DataView(buf);
          dv.setUint8(0, 10);
          dv.setUint32(1, mapKey(e.which), true);
          if (ws.readyState == 1)
            ws.send(buf);
        };
        document.onkeyup = function (e) {
          if (e.keyCode == 9 || e.keyCode == 32) {  //tab pressed
            e.preventDefault(); // stops its action
          }
          var buf = new ArrayBuffer(5);
          var dv = new DataView(buf);
          dv.setUint8(0, 11);
          dv.setUint32(1, mapKey(e.which), true);
          if (ws.readyState == 1)
            ws.send(buf);
        };
      }
      ws.onmessage = function (msg) {
        var data = msg.data;
        var dv = new DataView(data);
        switch (dv.getUint32(0, true)) {
          case 1:
            var wid = dv.getUint32(4, true);
            var x = dv.getInt16(8, true);
            var y = dv.getInt16(10, true);
            var width = dv.getUint16(12, true);
            var height = dv.getUint16(14, true);
            var canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            let window = {
              wid: wid,
              x: x,
              y: y,
              width: width,
              height: height,
              canvas: canvas,
              show: false
            };
            self.state.windows.push(window);
            self.forceUpdate();
            break;
          case 2:
            var wid = dv.getUint32(4, true);
            for (var i in self.state.windows) {
              if (self.state.windows[i].wid == wid) {
                self.state.windows.splice(i, 1);
                self.forceUpdate();
                break;
              }
            }
            break;
          case 3:
            var wid = dv.getUint32(4, true);
            var win = self._findWindow(wid);
            if (win) {
              win.show = true;
              self.forceUpdate();
            }
            break;
          case 4:
            var wid = dv.getUint32(4, true);
            var win = self._findWindow(wid);
            if (win) {
              win.show = false;
              self.forceUpdate();
            }
            break;
          case 5:
            var wid = dv.getUint32(4, true);
            var x = dv.getInt16(8, true);
            var y = dv.getInt16(10, true);
            var width = dv.getUint16(12, true);
            var height = dv.getUint16(14, true);
  
            self.state.windows.forEach(win => {
              if (win.wid == wid) {
                win.x = x;
                win.y = y;
                win.width = width;
                win.height = height;
                win.canvas.width = width;
                win.canvas.height = height;
                self.forceUpdate();
              }
            });
            break;
          case 6:
            var wid = dv.getUint32(4, true);
            var x = dv.getInt16(12, true);
            var y = dv.getInt16(14, true);
            var bf = data.slice(28);
            self.state.windows.forEach(window => {
              if (window.wid == wid) {
                var blob = new Blob([bf], {type: 'image/png'});
  
                var ctx = window.canvas.getContext('2d');
  
                var url = URL.createObjectURL(blob);
                var img = new Image;
  
                img.onload = function() {
                  ctx.drawImage(this, x, y);
                  URL.revokeObjectURL(url);
                  self.setState({windows: self.state.windows})
                }
                img.src = url;
              }
            })
            break;
        }
      }
    }
    handleClickOut = () => {
      this.state.isActive = false;
      return;
      this.setState({
        isActive: false
      });
    }
    handleOnClick = () => {
      this.state.isActive = true;
      return;
      /*this.setState({
        isActive: true
      });*/
    }
  
  
    render() {
      var windows = this.state.windows.map(window => {
        return (
          <Window
            key={window.wid}
            window={window}
          />
        )
      });
      {/*<ClickOutHandler  onClickOut={this.handleClickOut} onClick={this.handleOnClick}>
        </ClickOutHandler>*/}
      return (
        <div style={{position: 'relative', width: '100%', height: '800px'}} ref={this.container}>
          {windows}
        </div>
      )
    }
  }
  
  export default Cloudware;
  