@visactor/vtable
Version:
canvas table width high performance
114 lines (107 loc) • 6.62 kB
JavaScript
import { getTheme } from "./../../vrender";
import JSONFormatter from "json-formatter-js";
export class DebugTool {
constructor(stage, options) {
this._mode = "hover", this._stage = stage, this._callback = {}, (null == options ? void 0 : options.customGrapicKeys) && (this._customGrapicKeys = options.customGrapicKeys),
(null == options ? void 0 : options.container) ? this._infoContainer = options.container : this.createInfoContainer(options),
this.createHighlightRect(), this.bindStageEvent(), this.bindKeyEvent();
}
createInfoContainer(options) {
const position = (null == options ? void 0 : options.infoPosition) || "tr", width = (null == options ? void 0 : options.infoWidth) || 300, height = (null == options ? void 0 : options.infoPosition) || 400;
switch (this._infoContainer = document.createElement("div"), this._infoContainer.style.position = "fixed",
this._infoContainer.style.width = `${width}px`, this._infoContainer.style.height = `${height}px`,
this._infoContainer.style.backgroundColor = "rgba(210, 210, 210, 0.3)", this._infoContainer.style.overflow = "auto",
this._infoContainer.style.display = "none", position) {
case "tl":
this._infoContainer.style.top = "0px", this._infoContainer.style.left = "0px";
break;
case "tr":
this._infoContainer.style.top = "0px", this._infoContainer.style.right = "0px";
break;
case "bl":
this._infoContainer.style.bottom = "0px", this._infoContainer.style.left = "0px";
break;
case "br":
this._infoContainer.style.bottom = "0px", this._infoContainer.style.right = "0px";
}
const tip = document.createElement("div"), tipSpan1 = document.createElement("span");
tipSpan1.innerText = "debug 模式：", tip.appendChild(tipSpan1), this._modeTip = document.createElement("span"),
this._modeTip.innerText = this._mode, tip.appendChild(this._modeTip);
const tipSpan2 = document.createElement("span");
tipSpan2.innerText = "（shift + s改变模式；shift + d控制台输出target graphic）", tip.appendChild(tipSpan2),
this._infoContainer.appendChild(tip), this._stage.window.getContainer().append(this._infoContainer);
}
createHighlightRect() {
const container = this._stage.window.getContainer();
this._highlightRect = document.createElement("div"), this._highlightRect.style.display = "absolute",
this._highlightRect.style.border = "1px solid red", this._highlightRect.style.pointerEvents = "none",
this._highlightRect.style.position = "absolute", container.appendChild(this._highlightRect);
}
bindStageEvent() {
this._callback.pointermove = e => {
"hover" !== this._mode || (e.target && e.target !== this._target ? (this._target = e.target,
this.addHighlightBounds(this._target.globalAABBBounds), setTimeout((() => {
this.updateInfo();
}), 100)) : e.target || (this._target = void 0, this.clearInfo()));
}, this._stage.addEventListener("pointermove", this._callback.pointermove), this._callback.pointerup = e => {
"click" !== this._mode || (e.target && e.target !== this._target ? (this._target = e.target,
this.addHighlightBounds(this._target.globalAABBBounds), setTimeout((() => {
this.updateInfo();
}), 100)) : e.target || (this._target = void 0, this.clearInfo()));
}, this._stage.addEventListener("pointerup", this._callback.pointerup), this._callback.pointerleave = e => {
"hover" === this._mode && (this._target = void 0, this.clearInfo());
}, this._stage.addEventListener("pointerleave", this._callback.pointerleave);
}
addHighlightBounds(bounds) {
var _a, _b, _c, _d, _e, _f;
const table = this._stage.table, stageMatrix = table.scenegraph.stage.window.getViewBoxTransform();
this._highlightRect.style.left = `${bounds.x1 + (null !== (_a = stageMatrix.e) && void 0 !== _a ? _a : 0) + (null !== (_c = null === (_b = table.options.viewBox) || void 0 === _b ? void 0 : _b.x1) && void 0 !== _c ? _c : 0)}px`,
this._highlightRect.style.top = `${bounds.y1 + (null !== (_d = stageMatrix.f) && void 0 !== _d ? _d : 0) + (null !== (_f = null === (_e = table.options.viewBox) || void 0 === _e ? void 0 : _e.y1) && void 0 !== _f ? _f : 0)}px`,
this._highlightRect.style.width = `${bounds.width()}px`, this._highlightRect.style.height = `${bounds.height()}px`;
}
updateInfo() {
if (!this._target) return;
this._infoContainer.children.length > 1 && this._infoContainer.removeChild(this._infoContainer.children[1]),
this._infoContainer.style.display = "block";
const info = {
customKeys: {},
type: this._target.type,
globalX: this._target.globalTransMatrix.e,
globalY: this._target.globalTransMatrix.f,
attribute: this._target.attribute,
theme: getTheme(this._target)[this._target.type],
target: this._target
};
this._customGrapicKeys ? this._customGrapicKeys.forEach((key => {
info.customKeys[key] = this._target[key];
})) : delete info.customKeys;
const formatter = new JSONFormatter(info, 2);
this._infoContainer.appendChild(formatter.render());
}
clearInfo() {
this._infoContainer.style.display = "none";
}
updateMode() {
this._modeTip.innerText = this._mode;
}
bindKeyEvent() {
this._callback.keydown = e => {
if ("D" === e.key) ; else if ("S" === e.key) {
switch (this._mode) {
case "click":
this._mode = "hover";
break;
case "hover":
this._mode = "click";
}
this.updateMode();
}
}, window.addEventListener("keydown", this._callback.keydown);
}
release() {
document.body.removeChild(this._infoContainer), this._highlightRect.parentElement.removeChild(this._highlightRect),
this._stage.removeEventListener("pointermove", this._callback.pointermove), this._stage.removeEventListener("pointerup", this._callback.pointerup),
this._stage.removeEventListener("pointerleave", this._callback.pointerleave), window.removeEventListener("keydown", this._callback.keydown);
}
}
//# sourceMappingURL=debug-tool.js.map