cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
518 lines (517 loc) • 16.6 kB
JavaScript
import { __exports as display } from "../../../../_virtual/display.mjs";
import "./util/logging.mjs";
import "./base64.mjs";
import "./util/int.mjs";
import { __exports as logging } from "../../../../_virtual/logging.mjs";
import { __exports as base64 } from "../../../../_virtual/base64.mjs";
import { __exports as int } from "../../../../_virtual/int.mjs";
(function(exports) {
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function _typeof2(obj2) {
return typeof obj2;
};
} else {
_typeof = function _typeof2(obj2) {
return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
};
}
return _typeof(obj);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var Log = _interopRequireWildcard(logging);
var _base = _interopRequireDefault(base64);
var _int = int;
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { "default": obj };
}
function _getRequireWildcardCache(nodeInterop) {
if (typeof WeakMap !== "function")
return null;
var cacheBabelInterop = /* @__PURE__ */ new WeakMap();
var cacheNodeInterop = /* @__PURE__ */ new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache2(nodeInterop2) {
return nodeInterop2 ? cacheNodeInterop : cacheBabelInterop;
})(nodeInterop);
}
function _interopRequireWildcard(obj, nodeInterop) {
if (!nodeInterop && obj && obj.__esModule) {
return obj;
}
if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") {
return { "default": obj };
}
var cache = _getRequireWildcardCache(nodeInterop);
if (cache && cache.has(obj)) {
return cache.get(obj);
}
var newObj = {};
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var key in obj) {
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc);
} else {
newObj[key] = obj[key];
}
}
}
newObj["default"] = obj;
if (cache) {
cache.set(obj, newObj);
}
return newObj;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor)
descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps)
_defineProperties(Constructor.prototype, protoProps);
if (staticProps)
_defineProperties(Constructor, staticProps);
return Constructor;
}
var Display = /* @__PURE__ */ function() {
function Display2(target) {
_classCallCheck(this, Display2);
this._drawCtx = null;
this._renderQ = [];
this._flushing = false;
this._fbWidth = 0;
this._fbHeight = 0;
this._prevDrawStyle = "";
Log.Debug(">> Display.constructor");
this._target = target;
if (!this._target) {
throw new Error("Target must be set");
}
if (typeof this._target === "string") {
throw new Error("target must be a DOM element");
}
if (!this._target.getContext) {
throw new Error("no getContext method");
}
this._targetCtx = this._target.getContext("2d");
this._viewportLoc = {
"x": 0,
"y": 0,
"w": this._target.width,
"h": this._target.height
};
this._backbuffer = document.createElement("canvas");
this._drawCtx = this._backbuffer.getContext("2d");
this._damageBounds = {
left: 0,
top: 0,
right: this._backbuffer.width,
bottom: this._backbuffer.height
};
Log.Debug("User Agent: " + navigator.userAgent);
Log.Debug("<< Display.constructor");
this._scale = 1;
this._clipViewport = false;
this.onflush = function() {
};
}
_createClass(Display2, [{
key: "scale",
get: function get() {
return this._scale;
},
set: function set(scale) {
this._rescale(scale);
}
}, {
key: "clipViewport",
get: function get() {
return this._clipViewport;
},
set: function set(viewport) {
this._clipViewport = viewport;
var vp = this._viewportLoc;
this.viewportChangeSize(vp.w, vp.h);
this.viewportChangePos(0, 0);
}
}, {
key: "width",
get: function get() {
return this._fbWidth;
}
}, {
key: "height",
get: function get() {
return this._fbHeight;
}
}, {
key: "viewportChangePos",
value: function viewportChangePos(deltaX, deltaY) {
var vp = this._viewportLoc;
deltaX = Math.floor(deltaX);
deltaY = Math.floor(deltaY);
if (!this._clipViewport) {
deltaX = -vp.w;
deltaY = -vp.h;
}
var vx2 = vp.x + vp.w - 1;
var vy2 = vp.y + vp.h - 1;
if (deltaX < 0 && vp.x + deltaX < 0) {
deltaX = -vp.x;
}
if (vx2 + deltaX >= this._fbWidth) {
deltaX -= vx2 + deltaX - this._fbWidth + 1;
}
if (vp.y + deltaY < 0) {
deltaY = -vp.y;
}
if (vy2 + deltaY >= this._fbHeight) {
deltaY -= vy2 + deltaY - this._fbHeight + 1;
}
if (deltaX === 0 && deltaY === 0) {
return;
}
Log.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
vp.x += deltaX;
vp.y += deltaY;
this._damage(vp.x, vp.y, vp.w, vp.h);
this.flip();
}
}, {
key: "viewportChangeSize",
value: function viewportChangeSize(width, height) {
if (!this._clipViewport || typeof width === "undefined" || typeof height === "undefined") {
Log.Debug("Setting viewport to full display region");
width = this._fbWidth;
height = this._fbHeight;
}
width = Math.floor(width);
height = Math.floor(height);
if (width > this._fbWidth) {
width = this._fbWidth;
}
if (height > this._fbHeight) {
height = this._fbHeight;
}
var vp = this._viewportLoc;
if (vp.w !== width || vp.h !== height) {
vp.w = width;
vp.h = height;
var canvas = this._target;
canvas.width = width;
canvas.height = height;
this.viewportChangePos(0, 0);
this._damage(vp.x, vp.y, vp.w, vp.h);
this.flip();
this._rescale(this._scale);
}
}
}, {
key: "absX",
value: function absX(x) {
if (this._scale === 0) {
return 0;
}
return (0, _int.toSigned32bit)(x / this._scale + this._viewportLoc.x);
}
}, {
key: "absY",
value: function absY(y) {
if (this._scale === 0) {
return 0;
}
return (0, _int.toSigned32bit)(y / this._scale + this._viewportLoc.y);
}
}, {
key: "resize",
value: function resize(width, height) {
this._prevDrawStyle = "";
this._fbWidth = width;
this._fbHeight = height;
var canvas = this._backbuffer;
if (canvas.width !== width || canvas.height !== height) {
var saveImg = null;
if (canvas.width > 0 && canvas.height > 0) {
saveImg = this._drawCtx.getImageData(0, 0, canvas.width, canvas.height);
}
if (canvas.width !== width) {
canvas.width = width;
}
if (canvas.height !== height) {
canvas.height = height;
}
if (saveImg) {
this._drawCtx.putImageData(saveImg, 0, 0);
}
}
var vp = this._viewportLoc;
this.viewportChangeSize(vp.w, vp.h);
this.viewportChangePos(0, 0);
}
}, {
key: "_damage",
value: function _damage(x, y, w, h) {
if (x < this._damageBounds.left) {
this._damageBounds.left = x;
}
if (y < this._damageBounds.top) {
this._damageBounds.top = y;
}
if (x + w > this._damageBounds.right) {
this._damageBounds.right = x + w;
}
if (y + h > this._damageBounds.bottom) {
this._damageBounds.bottom = y + h;
}
}
}, {
key: "flip",
value: function flip(fromQueue) {
if (this._renderQ.length !== 0 && !fromQueue) {
this._renderQPush({
"type": "flip"
});
} else {
var x = this._damageBounds.left;
var y = this._damageBounds.top;
var w = this._damageBounds.right - x;
var h = this._damageBounds.bottom - y;
var vx = x - this._viewportLoc.x;
var vy = y - this._viewportLoc.y;
if (vx < 0) {
w += vx;
x -= vx;
vx = 0;
}
if (vy < 0) {
h += vy;
y -= vy;
vy = 0;
}
if (vx + w > this._viewportLoc.w) {
w = this._viewportLoc.w - vx;
}
if (vy + h > this._viewportLoc.h) {
h = this._viewportLoc.h - vy;
}
if (w > 0 && h > 0) {
this._targetCtx.drawImage(this._backbuffer, x, y, w, h, vx, vy, w, h);
}
this._damageBounds.left = this._damageBounds.top = 65535;
this._damageBounds.right = this._damageBounds.bottom = 0;
}
}
}, {
key: "pending",
value: function pending() {
return this._renderQ.length > 0;
}
}, {
key: "flush",
value: function flush() {
if (this._renderQ.length === 0) {
this.onflush();
} else {
this._flushing = true;
}
}
}, {
key: "fillRect",
value: function fillRect(x, y, width, height, color, fromQueue) {
if (this._renderQ.length !== 0 && !fromQueue) {
this._renderQPush({
"type": "fill",
"x": x,
"y": y,
"width": width,
"height": height,
"color": color
});
} else {
this._setFillColor(color);
this._drawCtx.fillRect(x, y, width, height);
this._damage(x, y, width, height);
}
}
}, {
key: "copyImage",
value: function copyImage(oldX, oldY, newX, newY, w, h, fromQueue) {
if (this._renderQ.length !== 0 && !fromQueue) {
this._renderQPush({
"type": "copy",
"oldX": oldX,
"oldY": oldY,
"x": newX,
"y": newY,
"width": w,
"height": h
});
} else {
this._drawCtx.mozImageSmoothingEnabled = false;
this._drawCtx.webkitImageSmoothingEnabled = false;
this._drawCtx.msImageSmoothingEnabled = false;
this._drawCtx.imageSmoothingEnabled = false;
this._drawCtx.drawImage(this._backbuffer, oldX, oldY, w, h, newX, newY, w, h);
this._damage(newX, newY, w, h);
}
}
}, {
key: "imageRect",
value: function imageRect(x, y, width, height, mime, arr) {
if (width === 0 || height === 0) {
return;
}
var img = new Image();
img.src = "data: " + mime + ";base64," + _base["default"].encode(arr);
this._renderQPush({
"type": "img",
"img": img,
"x": x,
"y": y,
"width": width,
"height": height
});
}
}, {
key: "blitImage",
value: function blitImage(x, y, width, height, arr, offset, fromQueue) {
if (this._renderQ.length !== 0 && !fromQueue) {
var newArr = new Uint8Array(width * height * 4);
newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
this._renderQPush({
"type": "blit",
"data": newArr,
"x": x,
"y": y,
"width": width,
"height": height
});
} else {
var data = new Uint8ClampedArray(arr.buffer, arr.byteOffset + offset, width * height * 4);
var img = new ImageData(data, width, height);
this._drawCtx.putImageData(img, x, y);
this._damage(x, y, width, height);
}
}
}, {
key: "drawImage",
value: function drawImage(img, x, y) {
this._drawCtx.drawImage(img, x, y);
this._damage(x, y, img.width, img.height);
}
}, {
key: "autoscale",
value: function autoscale(containerWidth, containerHeight) {
var scaleRatio;
if (containerWidth === 0 || containerHeight === 0) {
scaleRatio = 0;
} else {
var vp = this._viewportLoc;
var targetAspectRatio = containerWidth / containerHeight;
var fbAspectRatio = vp.w / vp.h;
if (fbAspectRatio >= targetAspectRatio) {
scaleRatio = containerWidth / vp.w;
} else {
scaleRatio = containerHeight / vp.h;
}
}
this._rescale(scaleRatio);
}
}, {
key: "_rescale",
value: function _rescale(factor) {
this._scale = factor;
var vp = this._viewportLoc;
var width = factor * vp.w + "px";
var height = factor * vp.h + "px";
if (this._target.style.width !== width || this._target.style.height !== height) {
this._target.style.width = width;
this._target.style.height = height;
}
}
}, {
key: "_setFillColor",
value: function _setFillColor(color) {
var newStyle = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
if (newStyle !== this._prevDrawStyle) {
this._drawCtx.fillStyle = newStyle;
this._prevDrawStyle = newStyle;
}
}
}, {
key: "_renderQPush",
value: function _renderQPush(action) {
this._renderQ.push(action);
if (this._renderQ.length === 1) {
this._scanRenderQ();
}
}
}, {
key: "_resumeRenderQ",
value: function _resumeRenderQ() {
this.removeEventListener("load", this._noVNCDisplay._resumeRenderQ);
this._noVNCDisplay._scanRenderQ();
}
}, {
key: "_scanRenderQ",
value: function _scanRenderQ() {
var ready = true;
while (ready && this._renderQ.length > 0) {
var a = this._renderQ[0];
switch (a.type) {
case "flip":
this.flip(true);
break;
case "copy":
this.copyImage(a.oldX, a.oldY, a.x, a.y, a.width, a.height, true);
break;
case "fill":
this.fillRect(a.x, a.y, a.width, a.height, a.color, true);
break;
case "blit":
this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true);
break;
case "img":
if (a.img.complete) {
if (a.img.width !== a.width || a.img.height !== a.height) {
Log.Error("Decoded image has incorrect dimensions. Got " + a.img.width + "x" + a.img.height + ". Expected " + a.width + "x" + a.height + ".");
return;
}
this.drawImage(a.img, a.x, a.y);
} else {
a.img._noVNCDisplay = this;
a.img.addEventListener("load", this._resumeRenderQ);
ready = false;
}
break;
}
if (ready) {
this._renderQ.shift();
}
}
if (this._renderQ.length === 0 && this._flushing) {
this._flushing = false;
this.onflush();
}
}
}]);
return Display2;
}();
exports["default"] = Display;
})(display);