@hailin-zheng/editor-core 1.0.6 → 1.0.9

package/{lib/framework/impl/data-element/data-decorate-impl.js → src/med_editor/framework/impl/data-element/data-decorate-impl.ts}

@@ -1,19 +1,17 @@
-import { LeafElement } from "@/med_editor/framework/element-define";
-import { ElementUtil } from "@/med_editor/framework/element-util";
-import { LeafRenderObject } from "@/med_editor/framework/render-define";
+import { LeafElement, SerializeProps } from "../../element-define";
+import { ElementUtil } from "../../element-util";
+import { RenderContenxtType } from "../../render-context";
+import { LeafRenderObject, RenderObject } from "../../render-define";
 import { InlineGroupInputElement, validateInlineInputRenderObj } from "./data-element-base-impl";
-export class DataDecorateElement extends LeafElement {
-    dataEle;
-    isPrefix;
+
+export class DataDecorateElement extends LeafElement<any> {
     //props: DataDecorateProps;
-    constructor(dataEle, isPrefix) {
+    constructor(public dataEle: InlineGroupInputElement, public isPrefix: boolean) {
         super('data-dec');
-        this.dataEle = dataEle;
-        this.isPrefix = isPrefix;
         this.addEvent('GotCursor', (evt) => {
             const { selectionState } = evt.ctx;
             if (selectionState.collapsed && this.parent instanceof InlineGroupInputElement) {
-                const group = this.parent;
+                const group = this.parent as InlineGroupInputElement;
                 if (this === group.endDecorate && selectionState.startOffset === 0) {
                     if (group.length === 2) {
                         selectionState.resetRange(group.startDecorate, 1);
@@ -24,36 +22,41 @@ export class DataDecorateElement extends LeafElement {
         });
         this.isDecorate = true;
     }
-    createRenderObject() {
+    createRenderObject(): DataDecorateRenderObject {
         const render = new DataDecorateRenderObject(this);
         //render.rect.width = this.dProps.size / 2;
         render.rect.width = 6;
         render.rect.height = 14;
         return render;
     }
-    serialize() {
+
+    serialize(): SerializeProps | null {
         return null;
     }
-    clone() {
+    clone(): DataDecorateElement {
         const clone = new DataDecorateElement(this.dataEle, this.isPrefix);
         this.props.clone(clone.props);
         //clone.renderCtx = this.renderCtx;
         return clone;
     }
 }
+
 export class DataDecorateArrowRenderObject extends LeafRenderObject {
-    render(ctx, position) {
+    render(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
         throw new Error("Method not implemented.");
     }
-    clone() {
+    clone(): RenderObject {
         throw new Error("Method not implemented.");
     }
+
 }
+
 export class DataDecorateRenderObject extends LeafRenderObject {
-    render(ctx, position) {
+    render(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
         this.renderDecorRect(ctx, position);
     }
-    renderDecorRect(ctx, position) {
+
+    renderDecorRect(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
         if (ctx.drawMode === 'print') {
             return;
         }
@@ -62,7 +65,7 @@ export class DataDecorateRenderObject extends LeafRenderObject {
             return;
         }
         const dataEleRenderPos = ElementUtil.getParentRenderPos(dataEleRender, this, position);
-        const element = this.element;
+        const element = this.element as DataDecorateElement;
         let { x, y, height, width } = dataEleRenderPos;
         const lineWidth = 2;
         const paintColor = '#0050b3';
@@ -74,18 +77,19 @@ export class DataDecorateRenderObject extends LeafRenderObject {
         if (element.isPrefix) {
             x += 2;
             ctx.contentContext.strokeLines([{ x: x + lineWidth, y }, { x: x, y }, { x: x, y: y + height }, { x: x + lineWidth, y: y + height }], 1, paintColor);
-        }
-        else {
+        } else {
             x = x + width - 2;
             ctx.contentContext.strokeLines([{ x: x - lineWidth, y }, { x: x, y }, { x: x, y: y + height }, { x: x - lineWidth, y: y + height }], 1, paintColor);
         }
         ctx.contentContext.ctx.restore();
         return;
+
     }
-    clone(cloneData = true) {
+
+    clone(cloneData = true): RenderObject {
         const clone = new DataDecorateRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
     }
+
 }
-//# sourceMappingURL=data-decorate-impl.js.map

package/{lib/framework/impl/data-element/data-element-barcode.js → src/med_editor/framework/impl/data-element/data-element-barcode.ts}

@@ -1,13 +1,17 @@
-import { ElementFactory, ResizeLeafRenderObject } from "@/med_editor/framework/element-define";
-import { DataElementBarcodeProps } from "@/med_editor/framework/element-props";
-import { ElementUtil } from "@/med_editor/framework/element-util";
+import { Element, ElementFactory, Position, readElementProps, ResizeLeafRenderObject, SerializeProps, ViewOptions } from "../../element-define";
+import { DataElementBarcodeProps } from "../../element-props";
+import { ElementUtil } from "../../element-util";
+import { RenderContenxtType } from "../../render-context";
+import { LeafRenderObject, RenderObject } from "../../render-define";
 import { DataElementLeaf } from "./data-element-base-impl";
 import bwipjs from "bwip-js";
 import { watchChanged } from "../../notify";
-export class DataElementBarcode extends DataElementLeaf {
-    resizeable = true;
-    barCodeCanvas;
-    cache = false;
+
+
+export class DataElementBarcode extends DataElementLeaf<DataElementBarcodeProps> {
+    resizeable: boolean = true;
+    private barCodeCanvas!: HTMLCanvasElement | null;
+    private cache = false;
     constructor() {
         super('data-ele-barcode');
         this.props = new DataElementBarcodeProps();
@@ -18,36 +22,40 @@ export class DataElementBarcode extends DataElementLeaf {
             this.cache = false;
         });
     }
-    createRenderObject() {
+    createRenderObject(): LeafRenderObject {
         const render = new DataElementBarcodeRenderObject(this);
         render.rect.width = this.props.width + 2;
         render.rect.height = this.props.height + 2;
         return render;
     }
-    serialize(options) {
+    serialize(options: ViewOptions): SerializeProps {
         return {
             type: this.type,
             props: {
                 ...this.props.getSerializeProps()
             }
-        };
+        }
     }
-    clone(data) {
+    clone(data: boolean): Element {
         const clone = new DataElementBarcode();
         this.props.clone(clone.props);
         return clone;
     }
-    setValue(val) {
+
+    setValue(val: string): void {
         this.props.text = val;
     }
-    getValue() {
+
+    getValue(): string {
         return this.props.text;
     }
-    drawBarcode(renderCtx, pos) {
+
+    drawBarcode(renderCtx: RenderContenxtType, pos: Position): void {
         this.createBarcodeCache();
-        renderCtx.contentContext.ctx.drawImage(this.barCodeCanvas, pos.x, pos.y, this.props.width, this.props.height);
+        renderCtx.contentContext.ctx.drawImage(this.barCodeCanvas as HTMLCanvasElement, pos.x, pos.y, this.props.width, this.props.height);
     }
-    createBarcodeCache() {
+
+    createBarcodeCache(): void {
         if (this.cache) {
             return;
         }
@@ -56,25 +64,27 @@ export class DataElementBarcode extends DataElementLeaf {
             this.barCodeCanvas = document.createElement('canvas');
         }
         this.barCodeCanvas = bwipjs.toCanvas(this.barCodeCanvas, {
-            bcid: this.props.type,
-            text: this.props.text || "0123456789",
-            height: 10,
-            includetext: true,
+            bcid: this.props.type, // Barcode type
+            text: this.props.text || "0123456789", // Text to encode
+            height: 10, // Bar height, in millimeters
+            includetext: true, // Show human-readable text
             textxalign: "center", // Always good to set this
         });
     }
 }
+
 export class DataElementBarcodeRenderObject extends ResizeLeafRenderObject {
-    render(ctx, position) {
-        const barcodeEle = this.element;
+    render(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
+        const barcodeEle = this.element as DataElementBarcode;
         barcodeEle.drawBarcode(ctx, position);
     }
-    clone() {
+    clone(): RenderObject {
         const clone = new DataElementBarcodeRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
     }
-    pagePaintCompleted(ctx, pos) {
+
+    pagePaintCompleted(ctx: RenderContenxtType, pos: Position): void {
         if (this.element.isFocused) {
             const { width, height } = this.rect;
             ctx.contentContext.strokeRect(pos.x, pos.y, this.rect.width, this.rect.height, '#1890ff', 0.5);
@@ -88,7 +98,8 @@ export class DataElementBarcodeRenderObject extends ResizeLeafRenderObject {
             this.drawResizeCircle(ctx, pos.x + width, pos.y + (Math.floor(height / 2)));
         }
     }
-    drawResizeCircle(ctx, x, y) {
+
+    private drawResizeCircle(ctx: RenderContenxtType, x: number, y: number): void {
         const ctxNative = ctx.contentContext.ctx;
         ctxNative.save();
         ctxNative.fillStyle = '#69c0ff';
@@ -99,11 +110,13 @@ export class DataElementBarcodeRenderObject extends ResizeLeafRenderObject {
         ctxNative.restore();
     }
 }
-export class DataElementBarcodeFactory extends ElementFactory {
-    match(type) {
+
+
+export class DataElementBarcodeFactory extends ElementFactory<DataElementBarcodeProps> {
+    match(type: string): boolean {
         return type === 'data-ele-barcode';
     }
-    createElement(data, renderCtx) {
+    createElement(data: readElementProps<DataElementBarcodeProps>, renderCtx: RenderContenxtType): Element {
         const ele = new DataElementBarcode();
         ele.props.width = data.props?.width || 100;
         ele.props.height = data.props?.height || 30;
@@ -112,4 +125,3 @@ export class DataElementBarcodeFactory extends ElementFactory {
         return ele;
     }
 }
-//# sourceMappingURL=data-element-barcode.js.map

package/{lib/framework/impl/data-element/data-element-base-impl.js → src/med_editor/framework/impl/data-element/data-element-base-impl.ts}

@@ -1,34 +1,41 @@
-import { DocMode, InlineGroupElement, LeafElement } from "@/med_editor/framework/element-define";
-import { InlineGroupRenderObject } from "@/med_editor/framework/render-define";
+import { DocMode, Element, InlineGroupElement, LeafElement } from "../../element-define";
+import { InlineGroupRenderObject, RenderObject } from "../../render-define";
+import { ContextMenuElementEvent, GotCursorEvent, KeyboradElementEvent } from "../../element-event-define";
+import { DataEleBaseProps, TextProps } from "../../element-props";
 import { DataDecorateElement } from "./data-decorate-impl";
+import { RenderContenxtType } from "../../render-context";
 import { ElementUtil } from "../../element-util";
+
 /**
  * 所有的数据元继承上述两个抽象类
  */
-export class DataElementLeaf extends LeafElement {
+export abstract class DataElementLeaf<P extends object = any> extends LeafElement<P> {
+    abstract setValue(val: any): void;
+    abstract getValue(): any;
 }
+
 /**
  * 可供输入的内联块
  * 使用场景：数据元，数据组
  */
-export class InlineGroupInputElement extends InlineGroupElement {
-    startDecorate;
-    endDecorate;
-    constructor(type) {
+export abstract class InlineGroupInputElement<P extends object = any> extends InlineGroupElement<P>{
+    startDecorate!: DataDecorateElement;
+    endDecorate!: DataDecorateElement;
+    constructor(type: string) {
         super(type);
         //行内块不允许换行
-        this.addEvent('ElementKeyDown', (evt) => {
+        this.addEvent<KeyboradElementEvent>('ElementKeyDown', (evt) => {
             const { selectionState, sourceEvent, source } = evt;
             const { startControl, startOffset } = selectionState;
-            if (IsInSideDataElement(startControl, startOffset)) {
+            if (IsInSideDataElement(startControl as LeafElement, startOffset)) {
                 if (sourceEvent.shiftKey && sourceEvent.keyCode === 13) {
                     //this.removeNullText();
-                }
-                else if (!sourceEvent.shiftKey && sourceEvent.keyCode === 13) {
+                } else if (!sourceEvent.shiftKey && sourceEvent.keyCode === 13) {
                     evt.isCancel = true;
                 }
             }
         }, true);
+
         this.addEvent('GotCursor', (evt) => {
             const { startControl, startOffset } = evt.selectionState;
             if (IsInSideDataElement(startControl, startOffset)) {
@@ -37,7 +44,8 @@ export class InlineGroupInputElement extends InlineGroupElement {
         });
         this.addEvent('LostCursor', (evt) => { this.isFocused = false; });
     }
-    fillDecorate() {
+
+    fillDecorate(): void {
         if (!this.startDecorate) {
             const { startDecorate, endDecorate } = this.createDataDecorate();
             this.addChild(startDecorate, 0);
@@ -46,19 +54,22 @@ export class InlineGroupInputElement extends InlineGroupElement {
             this.endDecorate = endDecorate;
         }
     }
-    createDataDecorate() {
+
+    createDataDecorate(): { startDecorate: DataDecorateElement, endDecorate: DataDecorateElement } {
         const startDecorate = new DataDecorateElement(this, true);
         const endDecorate = new DataDecorateElement(this, false);
         return {
             startDecorate,
             endDecorate
-        };
+        }
     }
-    beginMeasure() {
+
+    beginMeasure(): void {
         this.fillDecorate();
         super.beginMeasure();
     }
-    addChild(child, index = -1) {
+
+    addChild(child: Element<any>, index: number = -1): void {
         index = index === -1 ? this.length : index;
         index = index > this.length ? this.length : index;
         if (index === 0 && this.startDecorate) {
@@ -71,8 +82,9 @@ export class InlineGroupInputElement extends InlineGroupElement {
         }
         super.addChild(child, index);
     }
-    clearInnerItems() {
-        const removeItems = [];
+
+    clearInnerItems(): void {
+        const removeItems: Array<Element> = [];
         for (let i = this.length - 1; i >= 0; i--) {
             const child = this.getChild(i);
             if (child !== this.startDecorate && child !== this.endDecorate) {
@@ -82,8 +94,9 @@ export class InlineGroupInputElement extends InlineGroupElement {
         removeItems.forEach(item => this.removeChild(item));
     }
 }
-export class DataElementInlineGroup extends InlineGroupInputElement {
-    constructor(type) {
+
+export abstract class DataElementInlineGroup<P extends DataEleBaseProps = DataEleBaseProps & { valueTextProps: TextProps }> extends InlineGroupInputElement<P> {
+    constructor(type: string) {
         super(type);
         this.addEvent('ElementMousemove', (evt) => {
             this.isMouseenter = true;
@@ -91,16 +104,17 @@ export class DataElementInlineGroup extends InlineGroupInputElement {
         });
         this.addEvent('ElementMouseLeave', (evt) => {
             this.isMouseenter = false;
-            this.refreshView();
+            this.refreshView()
         });
-        this.addEvent('GotCursor', (evt) => { this.onGotCursorEvent(evt); });
-        this.addEvent('ElementContextMenu', (evt) => {
+        this.addEvent<GotCursorEvent>('GotCursor', (evt) => { this.onGotCursorEvent(evt) });
+        this.addEvent<ContextMenuElementEvent>('ElementContextMenu', (evt) => {
             evt.menus.push({
                 icon: 'Settings', caption: '内容控制设置', eventObj: {}
             });
         }, true);
     }
-    onGotCursorEvent(evt) {
+
+    onGotCursorEvent(evt: GotCursorEvent): void {
         const { source, selectionState } = evt;
         if (evt.ctx.viewOptions.docMode === DocMode.FormEdit) {
             //当前数据元不可编辑
@@ -115,27 +129,34 @@ export class DataElementInlineGroup extends InlineGroupInputElement {
                     range.editable = false;
                     selectionState.addRange(range);
                 }
-                return;
+                return
             }
         }
+
         if (source === this.endDecorate && selectionState.startOffset === 0 && this.length === 2) {
             evt.isCancel = true;
             selectionState.resetRange(this.startDecorate, 1);
         }
     }
+
+    abstract setValue(val: any): void;
+    abstract getValue(): string;
+
     /**
      * 验证数据元的值是否合法
-     * @returns
+     * @returns 
      */
-    validate() {
+    validate(): string {
         if (this.props.required && this.props.editable && !this.getValue()) {
             return '该字段不能为空';
         }
         return '';
     }
+
 }
-export class DataElementRenderObject extends InlineGroupRenderObject {
-    beginRender(ctx, position) {
+
+export abstract class DataElementRenderObject<T extends DataElementInlineGroup = DataElementInlineGroup> extends InlineGroupRenderObject<T> {
+    beginRender(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
         ctx.contentContext.save();
         //绘制数据元区域底色
         if (this.element.isMouseenter) {
@@ -143,42 +164,48 @@ export class DataElementRenderObject extends InlineGroupRenderObject {
             ctx.overlaysContext.fillRect(position.x, position.y - 2, this.rect.width, this.rect.height + 4, overlayColor);
         }
         if (this.element.props.secretBrowse && ctx.viewOptions.secretBrowse) {
-            ctx.contentContext.ctx.filter = "blur(10px)";
+            ctx.contentContext.ctx.filter = "blur(10px)"
         }
         if (this.element.props.underline) {
             const y = position.y + 2 + this.rect.height;
-            ctx.contentContext.strokeLines([{ x: position.x, y }, { x: position.x + this.rect.width, y }], 1, '#595959');
+            ctx.contentContext.strokeLines([{ x: position.x, y }, { x: position.x + this.rect.width, y }], 1, '#595959')
         }
     }
-    endRender(ctx, position) {
+
+    endRender(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
         ctx.contentContext.restore();
         if (!this.element.props.printable && ctx.drawMode === 'print') {
             ctx.contentContext.clearRect(position.x, position.y, this.rect.width, this.rect.height);
         }
     }
 }
-export const validateDataEle = (ele) => {
+
+
+export const validateDataEle = (ele: Element) => {
     return ele instanceof DataElementLeaf || ele instanceof DataElementInlineGroup;
 };
-export const validateDataEleRenderObj = (renderObj) => {
+
+export const validateDataEleRenderObj = (renderObj: RenderObject) => {
     if (renderObj.element) {
         return validateDataEle(renderObj.element);
     }
     return false;
 };
-export const validateInlineInputRenderObj = (renderObj) => {
+
+export const validateInlineInputRenderObj = (renderObj: RenderObject) => {
     if (renderObj.element) {
         return renderObj.element instanceof InlineGroupInputElement;
     }
     return false;
 };
+
 /**
  * 是否在数据元内部
- * @param control
- * @param offset
+ * @param control 
+ * @param offset 
  */
-export function IsInSideDataElement(control, offset) {
-    const mathEle = ElementUtil.getParent(control, (item) => item instanceof DataElementInlineGroup);
+export function IsInSideDataElement(control: LeafElement, offset: number): boolean {
+    const mathEle = ElementUtil.getParent(control, (item) => item instanceof DataElementInlineGroup) as DataElementInlineGroup;
     if (mathEle) {
         if ((control === mathEle.startDecorate && offset === 0) || (control === mathEle.endDecorate && offset === 1)) {
             return false;
@@ -187,13 +214,15 @@ export function IsInSideDataElement(control, offset) {
     }
     return false;
 }
+
+
 /**
  * 是否在内联块内部
- * @param control
- * @param offset
+ * @param control 
+ * @param offset 
  */
-export function IsInSideInlineGroupInputElement(control, offset) {
-    const mathEle = ElementUtil.getParent(control, (item) => item instanceof InlineGroupInputElement);
+export function IsInSideInlineGroupInputElement(control: LeafElement, offset: number): boolean {
+    const mathEle = ElementUtil.getParent(control, (item) => item instanceof InlineGroupInputElement) as InlineGroupInputElement;
     if (mathEle) {
         if ((control === mathEle.startDecorate && offset === 0) || (control === mathEle.endDecorate && offset === 1)) {
             return false;
@@ -202,4 +231,4 @@ export function IsInSideInlineGroupInputElement(control, offset) {
     }
     return false;
 }
-//# sourceMappingURL=data-element-base-impl.js.map
+

package/{lib/framework/impl/data-element/data-element-check-impl.js → src/med_editor/framework/impl/data-element/data-element-check-impl.ts}

@@ -1,28 +1,33 @@
-import { DocMode, ElementFactory } from "@/med_editor/framework/element-define";
-import { DataEleCheckProps } from "@/med_editor/framework/element-props";
-import { ElementUtil } from "@/med_editor/framework/element-util";
-import { LeafRenderObject } from "@/med_editor/framework/render-define";
+import { DocMode, Element, ElementFactory, LeafElement, readElementProps, SerializeProps, ViewOptions } from "../../element-define";
+import { ContextMenuElementEvent, ElementEvent } from "../../element-event-define";
+import { DataEleCheckProps } from "../../element-props";
+import { ElementUtil } from "../../element-util";
+import { RenderContenxtType } from "../../render-context";
+import { LeafRenderObject, RenderObject } from "../../render-define";
 import { DataElementLeaf } from "./data-element-base-impl";
-export class DataElementCheck extends DataElementLeaf {
+
+export class DataElementCheck extends DataElementLeaf<DataEleCheckProps> {
     //props: DataEleCheckProps;
     constructor() {
         super('data-ele-check');
-        this.cursorType = 'default';
+        this.cursorType = 'default'
         this.props = new DataEleCheckProps();
-        this.addEvent('ElementContextMenu', (evt) => {
+        this.addEvent<ContextMenuElementEvent>('ElementContextMenu', (evt) => {
             evt.menus.push({
                 icon: 'Settings', caption: '内容控制设置', eventObj: {}
             });
         });
-        this.addEvent('ElementClick', (evt) => { this.onClickHandler(evt); });
+        this.addEvent('ElementClick', (evt) => { this.onClickHandler(evt) });
     }
-    createRenderObject() {
+
+    createRenderObject(): RenderObject {
         const render = new DataElementCheckRenderObject(this);
         render.rect.width = this.props.size + 4;
         render.rect.height = this.props.size;
         return render;
     }
-    onClickHandler(evt) {
+
+    onClickHandler(evt: ElementEvent): void {
         if (!this.props.editable && evt.ctx.viewOptions.docMode === DocMode.FormEdit) {
             return;
         }
@@ -35,53 +40,57 @@ export class DataElementCheck extends DataElementLeaf {
         //复选框存在组时，并且为单选模式时
         if (this.props.groupName && !this.props.multiSelect) {
             const ckbs = docCtx.getCurrentCtx(this).getCheckBoxList(this.props.groupName);
-            ckbs.forEach(item => { if (item !== this) {
-                item.setValue(!this.props.checked);
-            } });
+            ckbs.forEach(item => { if (item !== this) { item.setValue(!this.props.checked) } });
         }
     }
-    serialize(viewOptions) {
+
+    serialize(viewOptions: ViewOptions): SerializeProps {
         return {
             type: this.type,
             props: {
                 ...this.props.getSerializeProps(viewOptions)
             }
-        };
+        }
     }
-    clone(data) {
+
+    clone(data: boolean): DataElementCheck {
         const clone = new DataElementCheck();
         this.props.clone(clone.props);
         return clone;
     }
-    setValue(val) {
+
+    setValue(val: any): void {
         if (typeof val === 'boolean') {
             this.props.checked = val;
-        }
-        else {
+        } else {
             const trueValue = val === 'true';
             this.props.checked = trueValue;
         }
     }
-    getValue() {
+
+    getValue(): any {
         if (this.props.checked) {
             return this.props.checkedValue;
-        }
-        else {
+        } else {
             return '';
         }
     }
 }
+
+
 export class DataElementCheckRenderObject extends LeafRenderObject {
-    constructor(element) {
+    constructor(element: Element) {
         super(element);
     }
-    clone() {
+
+    clone(): RenderObject {
         const cloneRender = new DataElementCheckRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
         return cloneRender;
     }
-    render(ctx, position) {
-        const element = this.element;
+
+    render(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
+        const element = this.element as DataElementCheck;
         if (this.element.props.multiSelect) {
             ctx.contentContext.drawCheckBox(position.x + 2, position.y, element.props.size, element.props.size, element.props.checked);
         }
@@ -92,10 +101,11 @@ export class DataElementCheckRenderObject extends LeafRenderObject {
             //this.renderCkbDecoreate(ctx, position);
         }
     }
+
     /**
      * 绘制复选框装饰符号
      */
-    renderCkbDecoreate(ctx, position) {
+    renderCkbDecoreate(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
         let { x, y } = position;
         const { width, height } = this.rect;
         const lineWidth = 5;
@@ -104,19 +114,22 @@ export class DataElementCheckRenderObject extends LeafRenderObject {
         x += width;
         ctx.contentContext.strokeLines([{ x: x - lineWidth, y }, { x, y }, { x, y: y + height }, { x: x - lineWidth, y: y + height }], 1, paintColor);
     }
+
 }
-export class DataElementCheckFactory extends ElementFactory {
-    match(type) {
-        return type === "data-ele-check";
+
+export class DataElementCheckFactory extends ElementFactory<DataEleCheckProps> {
+    match(type: string): boolean {
+        return type === "data-ele-check"
     }
-    createElement(data, renderCtx) {
-        const props = data.props;
+    createElement(data: readElementProps<DataEleCheckProps>, renderCtx: RenderContenxtType): Element {
+        const props = data.props as DataEleCheckProps;
         const ele = new DataElementCheck();
         this.createDataEleProps(ele.props, props);
         return ele;
     }
-    createDataEleProps(dest, props) {
-        const dataEleProps = dest;
+
+    createDataEleProps(dest: DataEleCheckProps, props: DataEleCheckProps): DataEleCheckProps {
+        const dataEleProps: DataEleCheckProps = dest;
         ElementUtil.readEleBaseProps(dataEleProps, props);
         //dataEleProps.id = props.id ?? nanoid(5);
         //dataEleProps.name = props.name;
@@ -129,5 +142,5 @@ export class DataElementCheckFactory extends ElementFactory {
         dataEleProps.checkedValue = props.checkedValue;
         return dataEleProps;
     }
+
 }
-//# sourceMappingURL=data-element-check-impl.js.map