@hailin-zheng/editor-core 1.0.3 → 1.0.6

package/src/med_editor/framework/impl/data-element/data-element-barcode.ts

@@ -1,127 +0,0 @@
-import { Element, ElementFactory, Position, readElementProps, ResizeLeafRenderObject, SerializeProps, ViewOptions } from "@/med_editor/framework/element-define";
-import { DataElementBarcodeProps } from "@/med_editor/framework/element-props";
-import { ElementUtil } from "@/med_editor/framework/element-util";
-import { RenderContenxtType } from "@/med_editor/framework/render-context";
-import { LeafRenderObject, RenderObject } from "@/med_editor/framework/render-define";
-import { DataElementLeaf } from "./data-element-base-impl";
-import bwipjs from "bwip-js";
-import { watchChanged } from "../../notify";
-
-
-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();
-        this.props.width = 100;
-        this.props.height = 30;
-        this.focusable = true;
-        watchChanged(this.props, () => {
-            this.cache = false;
-        });
-    }
-    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: ViewOptions): SerializeProps {
-        return {
-            type: this.type,
-            props: {
-                ...this.props.getSerializeProps()
-            }
-        }
-    }
-    clone(data: boolean): Element {
-        const clone = new DataElementBarcode();
-        this.props.clone(clone.props);
-        return clone;
-    }
-
-    setValue(val: string): void {
-        this.props.text = val;
-    }
-
-    getValue(): string {
-        return this.props.text;
-    }
-
-    drawBarcode(renderCtx: RenderContenxtType, pos: Position): void {
-        this.createBarcodeCache();
-        renderCtx.contentContext.ctx.drawImage(this.barCodeCanvas as HTMLCanvasElement, pos.x, pos.y, this.props.width, this.props.height);
-    }
-
-    createBarcodeCache(): void {
-        if (this.cache) {
-            return;
-        }
-        this.cache = true;
-        if (!this.barCodeCanvas) {
-            this.barCodeCanvas = document.createElement('canvas');
-        }
-        this.barCodeCanvas = bwipjs.toCanvas(this.barCodeCanvas, {
-            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: RenderContenxtType, position: { x: number; y: number; }): void {
-        const barcodeEle = this.element as DataElementBarcode;
-        barcodeEle.drawBarcode(ctx, position);
-    }
-    clone(): RenderObject {
-        const clone = new DataElementBarcodeRenderObject(this.element);
-        clone.rect = ElementUtil.cloneRect(this.rect);
-        return clone;
-    }
-
-    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);
-            this.drawResizeCircle(ctx, pos.x, pos.y);
-            this.drawResizeCircle(ctx, pos.x + width, pos.y);
-            this.drawResizeCircle(ctx, pos.x, pos.y + height);
-            this.drawResizeCircle(ctx, pos.x + width, pos.y + height);
-            this.drawResizeCircle(ctx, pos.x + (Math.floor(width / 2)), pos.y);
-            this.drawResizeCircle(ctx, pos.x + (Math.floor(width / 2)), pos.y + height);
-            this.drawResizeCircle(ctx, pos.x, pos.y + (Math.floor(height / 2)));
-            this.drawResizeCircle(ctx, pos.x + width, pos.y + (Math.floor(height / 2)));
-        }
-    }
-
-    private drawResizeCircle(ctx: RenderContenxtType, x: number, y: number): void {
-        const ctxNative = ctx.contentContext.ctx;
-        ctxNative.save();
-        ctxNative.fillStyle = '#69c0ff';
-        ctxNative.beginPath();
-        ctxNative.arc(x, y, Math.floor(4 / 5 * 4), 0, 2 * Math.PI);
-        ctxNative.closePath();
-        ctxNative.fill();
-        ctxNative.restore();
-    }
-}
-
-
-export class DataElementBarcodeFactory extends ElementFactory<DataElementBarcodeProps> {
-    match(type: string): boolean {
-        return type === 'data-ele-barcode';
-    }
-    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;
-        ele.props.type = data.props?.type || 'code128';
-        ele.props.text = data.props?.text || '';
-        return ele;
-    }
-}

package/src/med_editor/framework/impl/data-element/data-element-base-impl.ts

@@ -1,234 +0,0 @@
-import { DocMode, Element, InlineGroupElement, LeafElement } from "@/med_editor/framework/element-define";
-import { InlineGroupRenderObject, RenderObject } from "@/med_editor/framework/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 "@/med_editor/framework/render-context";
-import { ElementUtil } from "../../element-util";
-
-/**
- * 所有的数据元继承上述两个抽象类
- */
-export abstract class DataElementLeaf<P extends object = any> extends LeafElement<P> {
-    abstract setValue(val: any): void;
-    abstract getValue(): any;
-}
-
-/**
- * 可供输入的内联块
- * 使用场景：数据元，数据组
- */
-export abstract class InlineGroupInputElement<P extends object = any> extends InlineGroupElement<P>{
-    startDecorate!: DataDecorateElement;
-    endDecorate!: DataDecorateElement;
-    constructor(type: string) {
-        super(type);
-        //行内块不允许换行
-        this.addEvent<KeyboradElementEvent>('ElementKeyDown', (evt) => {
-            const { selectionState, sourceEvent, source } = evt;
-            const { startControl, startOffset } = selectionState;
-            if (IsInSideDataElement(startControl as LeafElement, startOffset)) {
-                if (sourceEvent.shiftKey && sourceEvent.keyCode === 13) {
-                    //this.removeNullText();
-                } else if (!sourceEvent.shiftKey && sourceEvent.keyCode === 13) {
-                    evt.isCancel = true;
-                }
-            }
-        }, true);
-
-        this.addEvent('GotCursor', (evt) => {
-            const { startControl, startOffset } = evt.selectionState;
-            if (IsInSideDataElement(startControl, startOffset)) {
-                this.isFocused = true;
-            }
-        });
-        this.addEvent('LostCursor', (evt) => { this.isFocused = false; });
-    }
-
-    fillDecorate(): void {
-        if (!this.startDecorate) {
-            const { startDecorate, endDecorate } = this.createDataDecorate();
-            this.addChild(startDecorate, 0);
-            this.addChild(endDecorate);
-            this.startDecorate = startDecorate;
-            this.endDecorate = endDecorate;
-        }
-    }
-
-    createDataDecorate(): { startDecorate: DataDecorateElement, endDecorate: DataDecorateElement } {
-        const startDecorate = new DataDecorateElement(this, true);
-        const endDecorate = new DataDecorateElement(this, false);
-        return {
-            startDecorate,
-            endDecorate
-        }
-    }
-
-    beginMeasure(): void {
-        this.fillDecorate();
-        super.beginMeasure();
-    }
-
-    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) {
-            this.parent?.addChild(child, this.getIndex());
-            return;
-        }
-        if (index === this.length && this.endDecorate) {
-            this.parent?.addChild(child, this.getIndex() + 1);
-            return;
-        }
-        super.addChild(child, index);
-    }
-
-    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) {
-                removeItems.push(child);
-            }
-        }
-        removeItems.forEach(item => this.removeChild(item));
-    }
-}
-
-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;
-            this.refreshView();
-        });
-        this.addEvent('ElementMouseLeave', (evt) => {
-            this.isMouseenter = false;
-            this.refreshView()
-        });
-        this.addEvent<GotCursorEvent>('GotCursor', (evt) => { this.onGotCursorEvent(evt) });
-        this.addEvent<ContextMenuElementEvent>('ElementContextMenu', (evt) => {
-            evt.menus.push({
-                icon: 'Settings', caption: '内容控制设置', eventObj: {}
-            });
-        }, true);
-    }
-
-    onGotCursorEvent(evt: GotCursorEvent): void {
-        const { source, selectionState } = evt;
-        if (evt.ctx.viewOptions.docMode === DocMode.FormEdit) {
-            //当前数据元不可编辑
-            if (selectionState.editable && !this.props.editable) {
-                const { startControl, startOffset } = selectionState;
-                if (startControl === this.startDecorate && startOffset === 0 || startControl === this.endDecorate && startOffset === 1) {
-                    return;
-                }
-                selectionState.editable = false;
-                const range = selectionState.range?.clone();
-                if (range) {
-                    range.editable = false;
-                    selectionState.addRange(range);
-                }
-                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 
-     */
-    validate(): string {
-        if (this.props.required && this.props.editable && !this.getValue()) {
-            return '该字段不能为空';
-        }
-        return '';
-    }
-
-}
-
-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) {
-            const overlayColor = this.element.props.editable ? ctx.viewOptions.dataEleOverlaysColor : ctx.viewOptions.dataEleReadOnlyOverlayColor;
-            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)"
-        }
-        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')
-        }
-    }
-
-    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: Element) => {
-    return ele instanceof DataElementLeaf || ele instanceof DataElementInlineGroup;
-};
-
-export const validateDataEleRenderObj = (renderObj: RenderObject) => {
-    if (renderObj.element) {
-        return validateDataEle(renderObj.element);
-    }
-    return false;
-};
-
-export const validateInlineInputRenderObj = (renderObj: RenderObject) => {
-    if (renderObj.element) {
-        return renderObj.element instanceof InlineGroupInputElement;
-    }
-    return false;
-};
-
-/**
- * 是否在数据元内部
- * @param control 
- * @param offset 
- */
-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;
-        }
-        return true;
-    }
-    return false;
-}
-
-
-/**
- * 是否在内联块内部
- * @param control 
- * @param offset 
- */
-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;
-        }
-        return true;
-    }
-    return false;
-}
-

package/src/med_editor/framework/impl/data-element/data-element-check-impl.ts

@@ -1,146 +0,0 @@
-import { DocMode, Element, ElementFactory, LeafElement, readElementProps, SerializeProps, ViewOptions } from "@/med_editor/framework/element-define";
-import { ContextMenuElementEvent, ElementEvent } from "@/med_editor/framework/element-event-define";
-import { DataEleCheckProps } from "@/med_editor/framework/element-props";
-import { ElementUtil } from "@/med_editor/framework/element-util";
-import { RenderContenxtType } from "@/med_editor/framework/render-context";
-import { LeafRenderObject, RenderObject } from "@/med_editor/framework/render-define";
-import { DataElementLeaf } from "./data-element-base-impl";
-
-export class DataElementCheck extends DataElementLeaf<DataEleCheckProps> {
-    //props: DataEleCheckProps;
-    constructor() {
-        super('data-ele-check');
-        this.cursorType = 'default'
-        this.props = new DataEleCheckProps();
-        this.addEvent<ContextMenuElementEvent>('ElementContextMenu', (evt) => {
-            evt.menus.push({
-                icon: 'Settings', caption: '内容控制设置', eventObj: {}
-            });
-        });
-        this.addEvent('ElementClick', (evt) => { this.onClickHandler(evt) });
-    }
-
-    createRenderObject(): RenderObject {
-        const render = new DataElementCheckRenderObject(this);
-        render.rect.width = this.props.size + 4;
-        render.rect.height = this.props.size;
-        return render;
-    }
-
-    onClickHandler(evt: ElementEvent): void {
-        if (!this.props.editable && evt.ctx.viewOptions.docMode === DocMode.FormEdit) {
-            return;
-        }
-        //如果当前是单选框并且当前已经被选中，则不作处理
-        if (this.props.groupName && !this.props.multiSelect && this.props.checked) {
-            return;
-        }
-        this.props.checked = !this.props.checked;
-        const docCtx = evt.ctx;
-        //复选框存在组时，并且为单选模式时
-        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) } });
-        }
-    }
-
-    serialize(viewOptions: ViewOptions): SerializeProps {
-        return {
-            type: this.type,
-            props: {
-                ...this.props.getSerializeProps(viewOptions)
-            }
-        }
-    }
-
-    clone(data: boolean): DataElementCheck {
-        const clone = new DataElementCheck();
-        this.props.clone(clone.props);
-        return clone;
-    }
-
-    setValue(val: any): void {
-        if (typeof val === 'boolean') {
-            this.props.checked = val;
-        } else {
-            const trueValue = val === 'true';
-            this.props.checked = trueValue;
-        }
-    }
-
-    getValue(): any {
-        if (this.props.checked) {
-            return this.props.checkedValue;
-        } else {
-            return '';
-        }
-    }
-}
-
-
-export class DataElementCheckRenderObject extends LeafRenderObject {
-    constructor(element: Element) {
-        super(element);
-    }
-
-    clone(): RenderObject {
-        const cloneRender = new DataElementCheckRenderObject(this.element);
-        cloneRender.rect = ElementUtil.cloneRect(this.rect);
-        return cloneRender;
-    }
-
-    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);
-        }
-        else {
-            ctx.contentContext.drawRadioBox(position.x + 2, position.y, element.props.size, element.props.size, element.props.checked);
-        }
-        if (ctx.drawMode === 'view') {
-            //this.renderCkbDecoreate(ctx, position);
-        }
-    }
-
-    /**
-     * 绘制复选框装饰符号
-     */
-    renderCkbDecoreate(ctx: RenderContenxtType, position: { x: number; y: number; }): void {
-        let { x, y } = position;
-        const { width, height } = this.rect;
-        const lineWidth = 5;
-        const paintColor = '#0050b3';
-        ctx.contentContext.strokeLines([{ x: x + lineWidth, y }, { x, y }, { x, y: y + height }, { x: x + lineWidth, y: y + height }], 1, paintColor);
-        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<DataEleCheckProps> {
-    match(type: string): boolean {
-        return type === "data-ele-check"
-    }
-    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: DataEleCheckProps, props: DataEleCheckProps): DataEleCheckProps {
-        const dataEleProps: DataEleCheckProps = dest;
-        ElementUtil.readEleBaseProps(dataEleProps, props);
-        //dataEleProps.id = props.id ?? nanoid(5);
-        //dataEleProps.name = props.name;
-        //dataEleProps.caption = props.caption;
-        //dataEleProps.type = props.type;
-        dataEleProps.checked = props.checked;
-        dataEleProps.size = props.size;
-        dataEleProps.groupName = props.groupName;
-        dataEleProps.multiSelect = props.multiSelect ?? false;
-        dataEleProps.checkedValue = props.checkedValue;
-        return dataEleProps;
-    }
-
-}

package/src/med_editor/framework/impl/data-element/data-element-date-impl.ts

@@ -1,128 +0,0 @@
-import { Element, ElementFactory, SerializeProps, ViewOptions } from "@/med_editor/framework/element-define";
-import { DataEleDateProps } from "@/med_editor/framework/element-props";
-import { ElementUtil } from "@/med_editor/framework/element-util";
-import { RenderContenxtType } from "@/med_editor/framework/render-context";
-import { RenderObject } from "@/med_editor/framework/render-define";
-import { ElementSerialize } from "../../element-serialize";
-import { TextGroupElement } from "../text/text-impl";
-import { DataElementInlineGroup, DataElementRenderObject } from "./data-element-base-impl";
-import moment from 'moment'
-
-export class DataElementDate extends DataElementInlineGroup<DataEleDateProps> {
-    constructor() {
-        super('data-ele-date');
-        this.props = new DataEleDateProps();
-    }
-
-    createRenderObject(): RenderObject {
-        return new DataElementDateRenderObject(this);
-    }
-
-    serialize(viewOptions: ViewOptions): SerializeProps & any {
-        return {
-            type: this.type,
-            props: {
-                ...this.props.getSerializeProps(viewOptions)
-            }
-        }
-    }
-
-    clone(data: boolean): DataElementDate {
-        const clone = new DataElementDate();
-        this.props.clone(clone.props);
-        if (data) {
-            const length = this.length;
-            for (let i = 0; i < length; i++) {
-                const child = this.getChild(i);
-                if (child !== this.startDecorate && child !== this.endDecorate) {
-                    clone.addChild(child.clone(true));
-                }
-            }
-        }
-        return clone;
-    }
-
-
-    setValue(val: Date | string): void {
-        const format = this.props.format ?? 'YYYY-MM-DD';
-        const date = moment(val, format);
-        if (!date.isValid()) {
-            return;
-        }
-        const formatStr = date.format(format);
-        if (this.getValue() === formatStr) {
-            return;
-        }
-        this.pubOnChange('self');
-        this.clearInnerItems();
-        const valueText = new TextGroupElement();
-        this.props.valueTextProps.clone(valueText.props);
-        valueText.text = formatStr;
-        this.addChild(valueText, this.length - 1);
-        this.beginMeasure();
-    }
-
-    getValue(): string {
-        return ElementSerialize.serializeString(this)
-    }
-
-    validate(): string {
-        let res = super.validate();
-        if (res) {
-            return res;
-        }
-        const format = this.props.format ?? 'YYYY-MM-DD';
-        const date = moment(this.getValue(), format);
-        if (!date.isValid()) {
-            return '日期格式不正确';
-        }
-        return '';
-    }
-
-}
-
-
-export class DataElementDateRenderObject extends DataElementRenderObject<DataElementDate> {
-    constructor(element: DataElementDate) {
-        super(element);
-    }
-    clone(): RenderObject {
-        const cloneRender = new DataElementDateRenderObject(this.element);
-        cloneRender.rect = ElementUtil.cloneRect(this.rect);
-        for (let i = 0; i < this.length; i++) {
-            cloneRender.addChild(this.getChild(i).clone());
-        }
-        return cloneRender;
-    }
-
-}
-
-export class DataElementDateFactory extends ElementFactory<DataEleDateProps> {
-    match(type: string): boolean {
-        return type === "data-ele-date"
-    }
-    createElement(data: any, renderCtx: RenderContenxtType): Element {
-        const props = data.props as DataEleDateProps;
-        const ele = new DataElementDate();
-        this.createDataEleProps(ele.props, props);
-        return ele;
-    }
-
-    createDataEleProps(dest: DataEleDateProps, props: DataEleDateProps): DataEleDateProps {
-        const dataEleProps: DataEleDateProps = dest;
-        ElementUtil.readEleBaseProps(dataEleProps, props);
-        //dataEleProps.id = props.id ?? nanoid(5);
-        //dataEleProps.name = props.name;
-        dataEleProps.minValue = props.minValue;
-        dataEleProps.maxValue = props.maxValue;
-        dataEleProps.format = props.format;
-        //dataEleProps.caption = props.caption;
-        //dataEleProps.type = props.type;
-        dataEleProps.nullText = props.nullText;
-        dataEleProps.nullTextProps = ElementUtil.readTextProps(null, props.nullTextProps, this.options);
-        dataEleProps.valueTextProps = ElementUtil.readTextProps(null, props.valueTextProps, this.options);
-        return dataEleProps;
-    }
-
-
-}