@fluentui/react
Version:
Reusable React components for building web experiences.
89 lines • 4.86 kB
JavaScript
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListDebugRenderer = void 0;
var RENDER_COLOR_VISIBLE_RECT = 'hotpink';
var RENDER_COLOR_ALLOWED_RECT = 'green';
var RENDER_COLOR_REQUIRED_RECT = 'blue';
var RENDER_COLOR_MATERIALIZED_RECT = 'red';
var RENDER_COLOR_SURFACE_RECT = 'black';
var RENDER_COLOR_PAGE = 'purple';
var RENDER_COLOR_SPACER_PAGE = 'orange';
var ListDebugRenderer = /** @class */ (function () {
function ListDebugRenderer(doc) {
// eslint-disable-next-line no-restricted-globals
this._doc = doc || document;
this._wrapper = this._doc.createElement('div');
this._wrapper.style.position = 'fixed';
this._wrapper.style.top = '0';
this._wrapper.style.right = '0';
this._wrapper.style.width = '300px';
this._wrapper.style.bottom = '0';
var canvas = this._doc.createElement('canvas');
this._renderer = canvas.getContext('2d');
this._wrapper.appendChild(canvas);
this._doc.body.appendChild(this._wrapper);
}
ListDebugRenderer.prototype.dispose = function () {
this._doc.body.removeChild(this._wrapper);
};
ListDebugRenderer.prototype.render = function (params) {
var _this = this;
var visibleRect = params.visibleRect, allowedRect = params.allowedRect, requiredRect = params.requiredRect, materializedRect = params.materializedRect, surfaceRect = params.surfaceRect, totalListHeight = params.totalListHeight, pages = params.pages, scrollTop = params.scrollTop, estimatedLine = params.estimatedLine, scrollY = params.scrollY;
if (!surfaceRect) {
return;
}
var debugRendererHeight = this._wrapper.clientHeight;
var scaleFactor = debugRendererHeight / totalListHeight;
this._renderer.canvas.width = this._wrapper.clientWidth;
this._renderer.canvas.height = debugRendererHeight;
this._renderer.fillStyle = 'white';
this._renderer.fillRect(0, 0, this._wrapper.clientWidth, this._wrapper.clientHeight);
this._renderRect({ left: 0, top: 0, height: totalListHeight, width: surfaceRect.width }, RENDER_COLOR_SURFACE_RECT, scaleFactor);
if (visibleRect) {
this._renderRect(visibleRect, RENDER_COLOR_VISIBLE_RECT, scaleFactor, 10);
}
if (allowedRect) {
this._renderRect(allowedRect, RENDER_COLOR_ALLOWED_RECT, scaleFactor, 20);
}
if (requiredRect) {
this._renderRect(requiredRect, RENDER_COLOR_REQUIRED_RECT, scaleFactor, 30);
}
if (materializedRect) {
this._renderRect(materializedRect, RENDER_COLOR_MATERIALIZED_RECT, scaleFactor, 40);
}
if (pages) {
var top_1 = 0;
pages.forEach(function (page, i) {
var isSpacer = page.key.startsWith('spacer');
var t = isSpacer ? top_1 : page.top;
_this._renderPage(page, isSpacer ? RENDER_COLOR_SPACER_PAGE : RENDER_COLOR_PAGE, scaleFactor, surfaceRect.left, surfaceRect.width, t, 50 + i * 10);
top_1 += page.height;
});
}
this._renderLine(scrollTop, 'red', surfaceRect.width);
this._renderLine(estimatedLine, 'black', surfaceRect.width);
this._renderLine(scrollY, 'yellow', surfaceRect.width);
};
ListDebugRenderer.prototype._renderRect = function (rect, color, scaleFactor, offset) {
if (offset === void 0) { offset = 0; }
this._renderer.strokeStyle = color;
this._renderer.strokeRect(rect.left * scaleFactor + offset, rect.top * scaleFactor, rect.width * scaleFactor + offset, rect.height * scaleFactor);
};
ListDebugRenderer.prototype._renderPage = function (page, color, scaleFactor, left, width, top, offset) {
if (offset === void 0) { offset = 0; }
this._renderer.strokeStyle = color;
this._renderer.strokeRect(left * scaleFactor + offset, top * scaleFactor, width * scaleFactor + offset, page.height * scaleFactor);
};
ListDebugRenderer.prototype._renderLine = function (y, color, width) {
this._renderer.strokeStyle = color;
this._renderer.beginPath();
this._renderer.moveTo(0, y);
this._renderer.lineTo(width, y);
this._renderer.stroke();
};
return ListDebugRenderer;
}());
exports.ListDebugRenderer = ListDebugRenderer;
});
//# sourceMappingURL=ListDebugRenderer.js.map