@hailin-zheng/editor-core 1.0.4 → 1.0.7

package/src/med_editor/framework/render-context.ts

@@ -1,431 +0,0 @@
-import { EditorContext } from "./document-context";
-import { Position, ViewOptions } from "./element-define";
-import { TextProps } from "./element-props";
-import { ElementUtil } from "./element-util";
-import { DocumentRenderObject } from "./impl/document/doc-impl";
-import { ParagraphElement } from "./impl/paragraph/p-impl";
-import { TextGroupElement, TextGroupRenderObject } from "./impl/text/text-impl";
-
-export interface TextUnits {
-    sourceSize: number,
-    actualSize: number,
-    char: string
-}
-
-export type RenderContenxtType = {
-    contentContext: PaintContent;
-    overlaysContext: PaintContent;
-    drawMode: 'view' | 'print';
-    clear(): void;
-    viewOptions: ViewOptions;
-    docCtx: EditorContext;
-    commit(pageSetting: { width: number, height: number } | null): void
-};
-
-export class RenderContenxt {
-    contentContext!: PaintContent;
-    overlaysContext!: PaintContent;
-    drawMode: 'view' | 'print' = 'view';
-    private contentOffCanvas!: HTMLCanvasElement;
-    private overlayOffCanvas!: HTMLCanvasElement;
-
-    constructor(public mainCtx: CanvasRenderingContext2D, public viewOptions: ViewOptions, public docCtx: EditorContext) {
-        this.createNativeCanvas();
-    }
-
-    private createNativeCanvas() {
-        this.contentOffCanvas = document.createElement('canvas');
-        this.overlayOffCanvas = document.createElement('canvas');
-        this.contentContext = new PaintContent(this.contentOffCanvas.getContext('2d') as CanvasRenderingContext2D, this.viewOptions);
-        this.overlaysContext = new PaintContent(this.overlayOffCanvas.getContext('2d') as CanvasRenderingContext2D, this.viewOptions);
-        this.setCanvasProps();
-    }
-
-    // private createOffscreenCanvas() {
-    //     this.contentOffCanvas = new OffscreenCanvas(250, 250);
-    //     this.overlayOffCanvas = new OffscreenCanvas(250, 250);
-    //     this.contentContext = new PaintContent(this.contentOffCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D, this.viewOptions);
-    //     this.overlaysContext = new PaintContent(this.overlayOffCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D, this.viewOptions);
-    //     this.setCanvasProps();
-    // }
-
-    setCanvasProps(pageSetting: { width: number, height: number } | null = null): void {
-        if (!pageSetting) {
-            pageSetting = { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight }
-            if (this.viewOptions.showReviewWindow) {
-                pageSetting.width += this.viewOptions.reviewWindowWidth;
-            }
-        }
-        pageSetting = pageSetting || {
-            width: this.viewOptions.viewSettings.width,
-            height: this.viewOptions.viewPaintHeight
-        };
-        ElementUtil.setCanvasProps(this.contentOffCanvas, this.contentContext.ctx, pageSetting, this.viewOptions.scale)
-        ElementUtil.setCanvasProps(this.overlayOffCanvas, this.overlaysContext.ctx, pageSetting, this.viewOptions.scale)
-        ElementUtil.setCanvasProps(this.mainCtx.canvas, this.mainCtx, pageSetting, this.viewOptions.scale)
-    }
-
-    clear(): void {
-        this.contentContext.clear();
-        this.overlaysContext.clear();
-        this.mainCtx.clearRect(0, 0, this.mainCtx.canvas.width, this.mainCtx.canvas.height);
-    }
-
-    commit(pageSetting: { width: number, height: number } | null = null): void {
-        //pageSetting = pageSetting || { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight };
-        if (!pageSetting) {
-            pageSetting = { width: this.viewOptions.viewSettings.width, height: this.viewOptions.viewPaintHeight }
-            if (this.viewOptions.showReviewWindow) {
-                pageSetting.width += this.viewOptions.reviewWindowWidth;
-            }
-        }
-        let { width, height } = pageSetting;
-        //this.mainCtx.clearRect(0, 0, this.mainCtx.canvas.width, this.mainCtx.canvas.height);
-        if (!this.overlayOffCanvas.width || !this.overlayOffCanvas.height) {
-            return;
-        }
-
-        this.mainCtx.drawImage(this.overlayOffCanvas, 0, 0, ElementUtil.getDprNumber(width, this.viewOptions.scale), ElementUtil.getDprNumber(height));
-        //console.time('drawImage');
-        this.mainCtx.drawImage(this.contentOffCanvas, 0, 0, ElementUtil.getDprNumber(width, this.viewOptions.scale), ElementUtil.getDprNumber(height));
-        //console.timeEnd('drawImage');
-    }
-
-}
-
-export class PaintContent {
-    constructor(public ctx: CanvasRenderingContext2D, private viewOptions: ViewOptions) {
-        this.init();
-    }
-
-    init(): void {
-        this.ctx.textBaseline = 'alphabetic';
-    }
-
-    setGlobalAlpha(alpha: number): void {
-        this.ctx.globalAlpha = alpha;
-    }
-
-    getGlobalAlpha(): number {
-        return this.ctx.globalAlpha;
-    }
-
-    clear(): void {
-        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-        this.init();
-    }
-
-    drawText(text: string, textProps: TextProps, x: number, y: number, width: number, height: number): void {
-        if (textProps.background) {
-            this.fillRect(x, y, width, height, textProps.background);
-        }
-        this.ctx.save();
-        this.ctx.fillStyle = textProps.color;
-        this.ctx.font = textProps.getFont();
-        const vertHeight = textProps.vertAlign === 'superscript' ? 0 : height;
-        this.ctx.fillText(text, x, y + vertHeight - height / 7);
-        this.ctx.restore();
-        if (textProps.linethrough) {
-            this.drawLine(x, y + (Math.ceil(height / 2)), width, textProps.color, 1);
-        }
-        if (textProps.underline) {
-            this.drawLine(x, y + height, width, textProps.color, 1);
-        }
-        if (textProps.overline) {
-            this.drawLine(x, y, width, textProps.color, 1);
-        }
-    }
-
-    fillCircular(x: number, y: number, r: number, color: string = 'black'): void {
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.fillStyle = color;
-        this.ctx.arc(x, y, r, 0, 2 * Math.PI);
-        this.ctx.fill();
-        this.ctx.restore();
-    }
-
-    drawTextUnits(textGroupRender: TextGroupRenderObject, x: number, y: number): void {
-        const textEle = textGroupRender.element as TextGroupElement;
-        const textProps = textEle.props;
-        const { width, height } = textGroupRender.rect;
-        this.ctx.save();
-        this.ctx.fillStyle = textProps.color;
-        this.ctx.font = textProps.getFont();
-        if (textProps.background) {
-            this.fillRect(x, y, width, height, textProps.background);
-        }
-        if (textProps.linethrough) {
-            this.drawLine(x, y + (Math.ceil(height / 2)), width, textProps.color, 1);
-        }
-        if (textProps.underline) {
-            this.drawLine(x, y + height, width, textProps.color, 1);
-        }
-        if (textProps.overline) {
-            this.drawLine(x, y, width, textProps.color, 1);
-        }
-        let horX = 0;
-        let vertHeight = height - (height / 7);
-        if (textProps.vertAlign === 'superscript') {
-            //到top
-            vertHeight -= textProps.fontSize * 2 / 5;
-            //top在向上收缩 -top行间距
-            //vertHeight -= textProps.fontSize * this.getParaLineHeight(textEle) / 20
-        }
-        for (let i = 0; i < textGroupRender.textMeasures.length; i++) {
-            const unit = textGroupRender.textMeasures[i];
-            this.ctx.fillText(unit.char, x + horX, y + vertHeight);
-            horX += unit.actualSize;
-        }
-        this.ctx.restore();
-    }
-
-    getParaLineHeight(textEle: TextGroupElement): number {
-        const para = ElementUtil.getParentByType(textEle, ParagraphElement);
-        if (!para) {
-            throw new Error('未能找到父级段落元素')
-        }
-        return para.props.lineHeight;
-    }
-
-    measureText(text: string, textProps: TextProps): { width: number, height: number } {
-        this.ctx.fillStyle = textProps.color;
-        this.ctx.font = textProps.getFont();
-        const textMeasure = this.ctx.measureText(text);
-        return { width: textMeasure.width, height: textProps.fontSize };
-    }
-
-
-    measureTextUnits(units: Array<TextUnits>, textProps: TextProps): void {
-        this.ctx.font = textProps.getFont();
-        const letterSpace = textProps.letterSpace ?? 0;
-        for (let i = 0; i < units.length; i++) {
-            const char = units[i];
-            const textMeasure = this.ctx.measureText(char.char);
-            char.actualSize = textMeasure.width + letterSpace;
-            char.sourceSize = textMeasure.width;
-        }
-    }
-
-    clearRect(x: number, y: number, width: number, height: number): void {
-        this.ctx.clearRect(x, y, width, height);
-    }
-
-    save(): void {
-        this.ctx.save();
-    }
-
-    restore(): void {
-        this.ctx.restore();
-    }
-
-
-    strokeRect(x: number, y: number, width: number, height: number, strokeColor = 'black', strokeWidth = 1): void {
-        x = Math.ceil(x);
-        y = Math.ceil(y);
-        x += 0.5;
-        y += 0.5;
-        this.ctx.save();
-        this.ctx.lineWidth = strokeWidth;
-        this.ctx.strokeStyle = strokeColor;
-        this.ctx.strokeRect(x, y, width, height);
-        this.ctx.restore();
-        //this.strokeLines([{ x, y }, { x: x + width, y }, { x: x + width, y: y + height }, { x, y: y + height }, { x, y }], strokeWidth, strokeColor);
-    }
-
-    //strokeRectImageData(x:number)
-
-    drawLine(x: number, y: number, width: number, lineColor = 'black', lineWidth = 1): void {
-        x = Math.ceil(x);
-        y = Math.ceil(y);
-        x += 0.5;
-        y += 0.5;
-        this.ctx.save();
-        this.ctx.strokeStyle = lineColor;
-        this.ctx.lineWidth = lineWidth;
-        this.ctx.beginPath();
-        this.ctx.moveTo(x, y);
-        this.ctx.lineTo(x + width, y);
-        this.ctx.stroke();
-        this.ctx.closePath();
-        this.ctx.restore();
-    }
-
-    fillRect(x: number, y: number, width: number, height: number, fillColor = 'white', shadowBlur = 0, shadowColor = 'black'): void {
-        x = Math.ceil(x);
-        y = Math.ceil(y);
-        x += 0.5;
-        y += 0.5;
-        this.ctx.save();
-        this.ctx.fillStyle = fillColor;
-        this.ctx.shadowBlur = shadowBlur;
-        this.ctx.shadowColor = shadowColor;
-        this.ctx.beginPath();
-        this.ctx.moveTo(x, y);
-        this.ctx.lineTo(x + width, y);
-        this.ctx.lineTo(x + width, y + height);
-        this.ctx.lineTo(x, y + height);
-        this.ctx.lineTo(x, y);
-        this.ctx.fill();
-        this.ctx.closePath();
-        this.ctx.restore();
-    }
-
-    strokeLines(lines: Array<Position>, width = 1, strokeColor = 'black'): void {
-        this.ctx.save();
-        this.ctx.strokeStyle = strokeColor;
-        this.ctx.lineWidth = width;
-        this.ctx.lineCap = 'round';
-        this.ctx.beginPath();
-        for (let i = 0; i < lines.length; i++) {
-            let { x, y } = lines[i];
-            x = Math.ceil(x);
-            y = Math.ceil(y);
-            x += 0.5;
-            y += 0.5;
-            if (i === 0) {
-                this.ctx.moveTo(x, y);
-            } else {
-                this.ctx.lineTo(x, y);
-            }
-        }
-        this.ctx.stroke();
-        this.ctx.closePath();
-        this.ctx.restore();
-    }
-
-    fillLines(lines: Array<Position>, width = 1, fillColor = 'black'): void {
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.fillStyle = fillColor;
-        this.ctx.lineWidth = width;
-        for (let i = 0; i < lines.length; i++) {
-            let { x, y } = lines[i];
-            x = Math.ceil(x);
-            y = Math.ceil(y);
-            x += 0.5;
-            y += 0.5;
-            if (i === 0) {
-                this.ctx.moveTo(x, y);
-            } else {
-                this.ctx.lineTo(x, y);
-            }
-        }
-        this.ctx.stroke();
-        this.ctx.closePath();
-        this.ctx.restore();
-    }
-
-
-    drawCheckBox(x: number, y: number, width: number, height: number, isChecked: boolean): void {
-        this.strokeRect(x, y, width, height, 'black', 1);
-        if (isChecked) {
-            const lines: Array<Position> = [];
-            lines.push({ x: x + (Math.ceil(width / 4)), y: y + (Math.ceil(height / 2)) });
-            lines.push({ x: x + (Math.ceil(width / 2)), y: y + (Math.floor(height * 3 / 4)) });
-            lines.push({ x: x + (Math.ceil(width * 3 / 4)), y: y + (Math.ceil(height / 4)) });
-            this.strokeLines(lines, 2, 'red');
-        }
-    }
-
-    drawRadioBox(x: number, y: number, width: number, height: number, isChecked: boolean): void {
-        x = x + Math.floor(width / 2);
-        y = y + Math.floor(height / 2);
-        width = Math.floor(width / 2);
-        this.ctx.save();
-        this.ctx.strokeStyle = 'black';
-        this.ctx.beginPath();
-        this.ctx.arc(x, y, width, 0, 2 * Math.PI);
-        this.ctx.stroke();
-        this.ctx.closePath();
-        if (isChecked) {
-            this.ctx.fillStyle = 'black';
-            this.ctx.beginPath();
-            this.ctx.arc(x, y, Math.floor(width / 5 * 3), 0, 2 * Math.PI);
-            this.ctx.closePath();
-            this.ctx.fill();
-        }
-        this.ctx.restore();
-    }
-
-
-    /**
-     * 绘制图片
-     * @param image
-     * @param sx image的矩形（裁剪）选择框的左上角 X 轴坐标
-     * @param sy image的矩形（裁剪）选择框的左上角 Y 轴坐标
-     * @param sWidth image的矩形（裁剪）选择框的宽度
-     * @param sHeight image的矩形（裁剪）选择框的高度
-     * @param dx image的左上角在目标canvas上 X 轴坐标
-     * @param dy image的左上角在目标canvas上 Y 轴坐标
-     * @param dWidth image在目标canvas上绘制的宽度
-     * @param dHeight image在目标canvas上绘制的高度
-     */
-    drawImage(image: HTMLImageElement, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void {
-        this.ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-    }
-
-    drawDashLine(points: Array<Position>, lineDash: Array<number>, lineColor = 'black', lineWidth = 1): void {
-        this.ctx.save();
-        this.ctx.setLineDash(lineDash);
-        this.ctx.strokeStyle = lineColor;
-        this.ctx.lineWidth = lineWidth;
-        this.ctx.beginPath();
-        for (let i = 0; i < points.length; i++) {
-            let { x, y } = points[i];
-            x += 0.5;
-            y += 0.5;
-            if (i === 0) {
-                this.ctx.moveTo(x, y);
-            } else {
-                this.ctx.lineTo(x, y);
-            }
-        }
-        this.ctx.stroke();
-        this.ctx.closePath();
-        this.ctx.restore();
-    }
-
-    roundRect(x: number, y: number, width: number, height: number, radius: number | { tl: number, tr: number, br: number, bl: number }, fill: boolean, stroke: boolean) {
-        x += 0.5;
-        y += 0.5;
-        if (typeof stroke === 'undefined') {
-            stroke = true;
-        }
-        if (typeof radius === 'number') {
-            radius = { tl: radius, tr: radius, br: radius, bl: radius };
-        } else {
-            var defaultRadius = { tl: 0, tr: 0, br: 0, bl: 0 };
-            for (var side in defaultRadius) {
-                radius[side] = radius[side] || defaultRadius[side];
-            }
-        }
-        this.ctx.beginPath();
-        this.ctx.lineWidth = 1;
-        this.ctx.moveTo(x + radius.tl, y);
-        this.ctx.lineTo(x + width - radius.tr, y);
-        this.ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
-        this.ctx.lineTo(x + width, y + height - radius.br);
-        this.ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
-        this.ctx.lineTo(x + radius.bl, y + height);
-        this.ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
-        this.ctx.lineTo(x, y + radius.tl);
-        this.ctx.quadraticCurveTo(x, y, x + radius.tl, y);
-        this.ctx.closePath();
-        if (fill) {
-            this.ctx.fill();
-        }
-        if (stroke) {
-            this.ctx.stroke();
-        }
-
-    }
-
-    clip(x: number, y: number, width: number, height: number): void {
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.rect(x, y, width, height);
-        this.ctx.clip();
-    }
-
-}

package/src/med_editor/framework/render-define.ts

@@ -1,224 +0,0 @@
-import { Rect, Element, MarginProps, PaddingProps, Position } from './element-define'
-import { RenderContenxtType } from './render-context';
-/**
- * 定义组件的UI形式的渲染
- */
-export abstract class RenderObject<T extends Element = Element> {
-    margin!: MarginProps;
-    padding!: PaddingProps;
-    rect: Rect = new Rect();
-    parent!: BranchRenderObject;
-    /**
-    * 可点击性，例如：null-text 占位符元素不具备可点击能力
-    */
-    disableClick!: boolean;
-    constructor(public element: T) {
-        this.margin = new MarginProps();
-        this.padding = new PaddingProps();
-    }
-    abstract clone(): RenderObject;
-    pagePaintCompleted(ctx: RenderContenxtType, position: Position): void { }
-    destroy(): void {
-        //this.parent = null;
-        //this.margin = null;
-        //this.padding = null;
-        //this.rect = null;
-        //this.element = null;
-    }
-
-    /**
-    * 获取内容区域框体
-    * @param render 
-    * @returns 
-    */
-    getInnnerRect(): Rect {
-        const { padding } = this;
-        const rect = new Rect();
-        rect.x = padding.left;
-        rect.y = padding.top;
-        rect.maxWidth = this.rect.maxWidth - padding.left - padding.right;
-        if (this.rect.maxHeight) {
-            rect.maxHeight = this.rect.maxHeight - padding.top - padding.bottom;
-        }
-        return rect;
-    }
-
-    getInnerMaxWidth(): number {
-        if (!this.rect.maxWidth) {
-            throw new Error('this.rect.maxWidth is null')
-        }
-        const { padding, margin } = this;
-        return this.rect.maxWidth - padding.left - padding.right - margin.left - margin.bottom;
-    }
-
-    /**
-    * 根据内框内容高度，更新外框框体高度
-    * @param render 
-    * @param innerRect 
-    */
-    updateRenderHeight(innerRect: Rect | number): void {
-        const innnerHeight = typeof innerRect === 'number' ? innerRect : (<Rect>innerRect).height;
-        const { padding, margin } = this;
-        //外层容器高度等于内容高度+外边距+内边距
-        this.rect.height = innnerHeight + padding.top + padding.bottom;
-    }
-
-    getIndex(): number {
-        if (this.parent) {
-            return this.parent.getChildIndex(this);
-        } else {
-            return 0;
-        }
-    }
-}
-
-/**
- * 叶子节点渲染元素
- */
-export abstract class LeafRenderObject<T extends Element = Element> extends RenderObject<T> {
-    constructor(element: T | null) {
-        super(element as T);
-    }
-    abstract render(ctx: RenderContenxtType, position: { x: number, y: number }): void;
-
-}
-
-/**
- * 枝干节点渲染元素
- */
-export abstract class BranchRenderObject<T extends Element = Element> extends RenderObject<T> {
-    constructor(element: T | null) {
-        super(element as T);
-    }
-    private chilren: Array<RenderObject> = [];
-    getItems(): Array<RenderObject> {
-        return this.chilren;
-    }
-
-    addChild(...items: Array<RenderObject>): void {
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            item.parent = this;
-            this.chilren.push(item);
-        }
-    }
-
-    insertChild(item: RenderObject, index: number): void {
-        this.chilren.splice(index, 0, item);
-        item.parent = this;
-    }
-
-    removeChild(child: RenderObject): void {
-        const index = this.chilren.indexOf(child);
-        if (index < 0) {
-            throw new Error('为查找到当前元素');
-        }
-        if (child.parent === this) {
-            //child.parent = null;
-        }
-        this.chilren.splice(index, 1);
-    }
-
-    removeChildByIndex(index: number): void {
-        const child = this.chilren[index];
-        if (child) {
-            this.chilren.splice(index, 1);
-            //child.parent = null;
-        } else {
-            throw new Error('为查找到当前元素');
-        }
-    }
-
-    clear(): void {
-        const items = [...this.chilren];
-        for (let i = items.length - 1; i >= 0; i--) {
-            this.removeChildByIndex(i);
-        }
-    }
-    get length() {
-        return this.chilren.length;
-    }
-
-
-    getChild<T extends RenderObject = RenderObject>(index: number): T {
-        return this.chilren[index] as T;
-    }
-
-    getChildIndex(child: RenderObject): number {
-        return this.chilren.indexOf(child);
-    }
-
-    abstract beginRender(ctx: RenderContenxtType, position: Position): void;
-    abstract endRender(ctx: RenderContenxtType, position: Position): void;
-
-    destroy(): void {
-        super.destroy();
-        const len = this.length;
-        for (let i = len - 1; i >= 0; i--) {
-            const child = this.getChild(i);
-            child.destroy();
-            //this.removeChild(child);
-        }
-        this.chilren.length = 0;
-        //this.chilren = null;
-    }
-}
-
-
-/**
- * 块级渲染元素
- */
-export abstract class BlockContentRenderObject<T extends Element = Element> extends BranchRenderObject<T> {
-    setRenderWidth(maxWidth: number): void {
-        this.rect.maxWidth = maxWidth;
-        this.rect.width = maxWidth;
-    }
-}
-
-export abstract class InlineGroupRenderObject<T extends Element = Element> extends BranchRenderObject<T> {
-}
-
-/**
- * 包含块级渲染元素的容器元素,例如body、table-cell等
- */
-export abstract class BlockContainerRenderObject<T extends Element = Element> extends BranchRenderObject<T> {
-    setRenderWidth(maxWidth: number): void {
-        this.rect.maxWidth = maxWidth;
-        this.rect.width = maxWidth;
-    }
-}
-
-/**
- * 多级 ‘BlockLineRectRenderObject’ 包裹元素，例如 p、table
- */
-export abstract class MuiltBlockLineRenderObject<T extends Element = Element> extends BlockContentRenderObject<T> { }
-
-/**
- * 容器-子内容为多个行内块级元素，例如table-row
- */
-export abstract class InlineBlockContainer extends MuiltBlockLineRenderObject { }
-
-/**
- * 服务于table-cell
- * 可被多级拆分的元素
- */
-export abstract class InlineMuiltBlockLineRenderObject extends MuiltBlockLineRenderObject { }
-
-/**
- * 最小不可分割单位的块级行框，例如 p-line
- * 一行不可存在于两个页面中,块级行框不能分布在两个页面中
- */
-export abstract class BlockLineRectRenderObject extends BlockContentRenderObject { }
-
-
-export type BorderType = 'left' | 'right' | 'top' | 'bottom' | 'left-middle' | 'right-middle' | 'top-middle' | 'bottom-middle' | 'none' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
-export type CursorType = 'text' | 'row-resize' | 'col-resize' | 'none' | 'default' | 'move' | 'pointer' | 'w-resize' | 's-resize' | 'se-resize' | 'ne-resize';
-export enum RenderObjectType {
-    Branch = 0,
-    Leaf = 1
-}
-
-export interface IMeasureRenderStruct<T> {
-    rect: Rect,
-    render: T
-}