@visactor/vtable
Version:
canvas table width high performance
71 lines (67 loc) • 4.02 kB
JavaScript
import { Image, ResourceLoader, Text } from "./../../vrender";
import { decompressFrames, parseGIF } from "gifuct-js";
export class Icon extends Image {
constructor(params) {
super(params), "mouseenter_cell" !== this.attribute.visibleTime && "click_cell" !== this.attribute.visibleTime || (this.attribute.opacity = 0),
this.attribute.hoverImage && (this.attribute.originImage = this.attribute.image),
this.attribute.isGif && this.attribute.gif && this.loadGif();
}
loadGif() {
this.playing = !1, ResourceLoader.GetFile(this.attribute.gif + "?role=gif" + `&radom=${Math.random()}`, "arrayBuffer").then((res => {
const gif = parseGIF(res), frames = decompressFrames(gif, !0);
this.renderGIF(frames), this.resources.set(this.attribute.image, {
state: "success",
data: this.gifCanvas
});
})).catch((e => {}));
}
get backgroundWidth() {
var _a, _b;
return null !== (_b = null !== (_a = this.attribute.backgroundWidth) && void 0 !== _a ? _a : this.attribute.width) && void 0 !== _b ? _b : 0;
}
get backgroundHeight() {
var _a, _b;
return null !== (_b = null !== (_a = this.attribute.backgroundHeight) && void 0 !== _a ? _a : this.attribute.height) && void 0 !== _b ? _b : 0;
}
renderGIF(frames) {
this.loadedFrames = frames, this.frameIndex = 0, this.tempCanvas || (this.tempCanvas = document.createElement("canvas"),
this.tempCtx = this.tempCanvas.getContext("2d")), this.gifCanvas || (this.gifCanvas = document.createElement("canvas"),
this.gifCtx = this.gifCanvas.getContext("2d")), this.gifCanvas.width = frames[0].dims.width,
this.gifCanvas.height = frames[0].dims.height, this.playing = !0, this.lastTime = (new Date).getTime(),
this.animate().to({}, 1e3, "linear").loop(1 / 0);
}
renderFrame(context, x, y) {
const frame = this.loadedFrames[this.frameIndex || 0];
2 === frame.disposalType && this.gifCtx.clearRect(0, 0, this.gifCanvas.width, this.gifCanvas.height),
this.drawPatch(frame), this.manipulate(context, x, y);
const diff = (new Date).getTime() - this.lastTime;
frame.delay < diff && (this.frameIndex++, this.lastTime = (new Date).getTime()),
this.frameIndex >= this.loadedFrames.length && (this.frameIndex = 0);
}
drawPatch(frame) {
const dims = frame.dims;
this.frameImageData && dims.width === this.frameImageData.width && dims.height === this.frameImageData.height || (this.tempCanvas.width = dims.width,
this.tempCanvas.height = dims.height, this.frameImageData = this.tempCtx.createImageData(dims.width, dims.height)),
this.frameImageData.data.set(frame.patch), this.tempCtx.putImageData(this.frameImageData, 0, 0),
this.gifCtx.drawImage(this.tempCanvas, dims.left, dims.top);
}
manipulate(context, x, y) {
context.drawImage(this.gifCanvas, 0, 0, this.gifCanvas.width, this.gifCanvas.height, x, y, this.attribute.width, this.attribute.height);
}
setAttribute(key, value, forceUpdateTag, context) {
super.setAttribute(key, value, forceUpdateTag, context), "gif" === key && this.loadGif();
}
setAttributes(params, forceUpdateTag, context) {
super.setAttributes(params, forceUpdateTag, context), params.gif && this.loadGif();
}
}
export class TextIcon extends Text {
constructor(params) {
var _a, _b, _c, _d, _e;
params.fill = null !== (_a = params.fill) && void 0 !== _a ? _a : "#00F", params.fontSize = null !== (_b = params.fontSize) && void 0 !== _b ? _b : 12,
params.underline = null !== (_c = params.underline) && void 0 !== _c ? _c : 1, params.textBaseline = null !== (_d = params.textBaseline) && void 0 !== _d ? _d : "top",
params.cursor = null !== (_e = params.cursor) && void 0 !== _e ? _e : "pointer",
super(params);
}
}
//# sourceMappingURL=icon.js.map