@hailin-zheng/editor-core 1.1.18 → 1.1.19

package/index.js

@@ -4,6 +4,7 @@ import * as acor from 'acorn';
 import { generate } from 'astring';
 import * as estraverse from 'estraverse';
 import bwipjs from 'bwip-js';
+import moment$1 from 'moment/moment';
 
 /**
  * 元素事件
@@ -4411,6 +4412,10 @@ class SelectionState {
     constructor() {
         this.clear();
     }
+    destroy() {
+        this.onChangedEvent.unsubscribe();
+        this.clear();
+    }
     clear() {
         this.range = null;
         this.startOffset = -1;
@@ -7689,6 +7694,19 @@ class ElementUtil {
     static getDataElement(ele) {
         return this.getParent(ele, item => item instanceof DataElementInlineGroup);
     }
+    static getOSPlatform() {
+        const userAgent = navigator.userAgent;
+        if (userAgent.indexOf('Windows') > -1) {
+            return 'Windows';
+        }
+        if (userAgent.indexOf('Mac') > -1) {
+            return 'Mac';
+        }
+        if (userAgent.indexOf('Linux') > -1) {
+            return 'Linux';
+        }
+        return 'Windows';
+    }
 }
 
 class RenderContext {
@@ -14942,7 +14960,7 @@ class DocumentEvent {
             });
             document.execCommand('copy');
         };
-        if (navigator.appVersion.indexOf('Mac') >= 0) {
+        if (ElementUtil.getOSPlatform() === 'Mac') {
             if (evt.metaKey && evt.keyCode === 67) {
                 copy();
             }
@@ -14991,6 +15009,7 @@ class DocumentInput {
     onTabKeyEvent = new Subject$1();
     constructor(node, docCtx) {
         this.docCtx = docCtx;
+        const os = ElementUtil.getOSPlatform();
         node.addEventListener('input', evt => {
             const { startControl, startOffset } = this.docCtx.selectionState;
             this.onInputEvent.next({
@@ -15038,7 +15057,11 @@ class DocumentInput {
             else if (evt.keyCode === 46) {
                 this.onDeleteEvent.next(evt);
             }
-            else if (evt.ctrlKey && evt.keyCode === 65) {
+            else if (evt.ctrlKey && evt.keyCode === 65 && os !== 'Mac') {
+                evt.preventDefault();
+                this.onSelectAllEvent.next();
+            }
+            else if (evt.metaKey && evt.keyCode === 65 && os === 'Mac') {
                 evt.preventDefault();
                 this.onSelectAllEvent.next();
             }
@@ -17788,7 +17811,6 @@ function setCurrentActiveAppContext(ctx) {
     currentActiveAppContext = ctx;
 }
 function renderApp(root, renderCtx, nodeEvent) {
-    window['root'] = root;
     // const nodeEvent = new NodeEvent(root, renderCtx.mainContext.ctx.canvas);
     let delayTask = false;
     const flushTask = () => {
@@ -17807,8 +17829,10 @@ function renderApp(root, renderCtx, nodeEvent) {
     };
     flushTask();
     root.onChangedEvent.subscribe(() => {
+        if (root.isDisposed) {
+            return;
+        }
         flushTask();
-        //console.log('准备创建任务'+taskId)
     });
     nodeEvent.onSignal.subscribe(() => {
         flushTask();
@@ -19073,6 +19097,7 @@ class SurfaceView extends NodeItems {
     renderSchedule;
     nodeEvent;
     renderCtx;
+    isDisposed = false;
     onSizeChanged = new Subject();
     constructor(canvas, input) {
         super();
@@ -19155,6 +19180,10 @@ class SurfaceView extends NodeItems {
     clearPopNodes() {
         this.popNodes = [];
     }
+    destroy() {
+        this.clearChildren();
+        this.isDisposed = true;
+    }
     initInputEvent() {
         let composition = false;
         this.input.addEventListener('input', evt => {
@@ -20364,14 +20393,1317 @@ function pointInPoly(pt, poly) {
     return c;
 }
 
+const timelineConfig = {
+    fontSize: 12,
+    fontName: '宋体',
+    /**
+     * 单个时刻的宽度,像素
+     */
+    timeTickWidth: 14,
+    /**
+     * 纵轴一个单位的高度
+     */
+    timeValueHeight: 20,
+    /**
+     * 单个时刻宽度代表的小时数
+     */
+    timeTickHours: 4,
+    /**
+     * 体温点的大小
+     */
+    temperaturePointSize: 4,
+    /**
+     * 心率点的大小
+     */
+    heartRatePointSize: 4,
+    temperatureModels: [42, 41, 40, 39, 38, 37, 36, 35],
+    heartRateModels: [180, 160, 140, 120, 100, 80, 40, 20],
+    valueRuleCounts: 8,
+    /**
+     * 时刻头部高度
+     */
+    tickHeaderHeight: 20,
+    /**
+     * 体温符号
+     */
+    temperatureSymbol: '℃',
+    heartRateSymbol: 'BPM'
+};
+class TimelineBaseControl extends AbsolutePanel {
+    startTime;
+    showDays = 0;
+    constructor() {
+        super();
+        this.border = 1;
+        this.borderColor = '#000';
+        this.bgColor = '#fff';
+    }
+    measureOverride(e, availableSize) {
+        this.build(e);
+        return super.measureOverride(e, availableSize);
+    }
+    isBuild = false;
+    build(e) {
+        if (this.isBuild) {
+            return;
+        }
+        this.clearChildren();
+        this.buildOverride(e);
+        this.isBuild = true;
+    }
+    reBuild() {
+        this.isBuild = false;
+    }
+    buildOverride(e) {
+    }
+}
+class TickContainer extends AbsolutePanel {
+    tickControl;
+    _startTime;
+    _showDays = 0;
+    scrollX = 0;
+    get startTime() {
+        return this._startTime;
+    }
+    set startTime(value) {
+        this._startTime = value;
+        this.tickControl.startTime = value;
+    }
+    get showDays() {
+        return this._showDays;
+    }
+    set showDays(value) {
+        this._showDays = value;
+        this.tickControl.showDays = value;
+    }
+    arrangeOverride(e, finalSize) {
+        this.controls.filter(item => item !== this.tickControl).forEach(item => {
+            const itemRect = {
+                x: item.x,
+                y: item.y,
+                width: item.desiredSize.width,
+                height: item.desiredSize.height
+            };
+            item.arrange(e, itemRect);
+        });
+        this.tickControl.arrange(e, { x: this.tickControl.x - this.scrollX,
+            y: this.tickControl.y,
+            width: this.tickControl.desiredSize.width,
+            height: this.tickControl.desiredSize.height });
+        return finalSize;
+    }
+}
+
+class TemperaturePoint extends NodeCore {
+    type;
+    value;
+    constructor(type = 'axillary', value) {
+        super();
+        this.type = type;
+        this.value = value;
+        this.bgColor = 'blue';
+        this.width = timelineConfig.temperaturePointSize;
+        this.height = timelineConfig.temperaturePointSize;
+        this.addEventListener('mouseenter', evt => {
+            this.bgColor = 'red';
+            const onMouseLeave = () => {
+                this.bgColor = 'blue';
+                this.removeEventListener('mouseleave', onMouseLeave);
+            };
+            this.addEventListener('mouseleave', onMouseLeave);
+        });
+    }
+    renderOutline(renderCtx) {
+        translate(renderCtx, this.finalRect.x, this.finalRect.y);
+        translate(renderCtx, this.border + this.padding, this.border + this.padding);
+    }
+    render(e) {
+        if (this.type === 'axillary') {
+            this.renderAxillary(e);
+        }
+        else if (this.type === 'oral') {
+            this.renderOral(e);
+        }
+        else if (this.type === 'anal') {
+            this.renderAnal(e);
+        }
+    }
+    /**
+     * 绘制腋下温度 X
+     * @private
+     */
+    renderAxillary(e) {
+        const { width, height } = this.finalRect;
+        const x = 0, y = 0;
+        e.render.strokeLines([{ x, y }, { x: x + width, y: y + height }], 3, this.bgColor);
+        e.render.strokeLines([{ x: x + width, y }, { x, y: y + height }], 3, this.bgColor);
+    }
+    /**
+     * 绘制肛下温度 ○
+     * @private
+     */
+    renderAnal(e) {
+        const width = this.finalRect.width;
+        const ctx = e.render.ctx;
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = this.bgColor;
+        ctx.lineWidth = 2;
+        ctx.arc(width / 2, width / 2, width, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.restore();
+    }
+    /**
+     * 绘制口腔温度 ●
+     * @private
+     */
+    renderOral(e) {
+        const width = this.finalRect.width;
+        e.render.fillCircular(width / 2, width / 2, width, this.bgColor);
+    }
+}
+class HeartRatePoint extends NodeCore {
+    value;
+    constructor() {
+        super();
+        this.bgColor = 'red';
+        this.width = timelineConfig.heartRatePointSize * 2;
+        this.height = timelineConfig.heartRatePointSize * 2;
+        this.addEventListener('mouseenter', evt => {
+            this.bgColor = 'green';
+            const tipLabel = new LabelNode();
+            tipLabel.text = this.value;
+            tipLabel.fontSize = timelineConfig.fontSize;
+            tipLabel.shadowBlur = 5;
+            tipLabel.shadowColor = '#000';
+            tipLabel.bgColor = '#fff';
+            tipLabel.x = this.x;
+            tipLabel.y = this.y - tipLabel.fontSize - 2;
+            this.parent?.addChild(tipLabel);
+            const onMouseLeave = () => {
+                this.bgColor = 'red';
+                this.parent?.removeChild(tipLabel);
+                this.removeEventListener('mouseleave', onMouseLeave);
+            };
+            this.addEventListener('mouseleave', onMouseLeave);
+        });
+    }
+    renderOutline(renderCtx) {
+        translate(renderCtx, this.finalRect.x, this.finalRect.y);
+        translate(renderCtx, this.border + this.padding, this.border + this.padding);
+    }
+    render(e) {
+        const heartRatePointSize = this.finalRect.width / 2;
+        e.render.fillCircular(heartRatePointSize, heartRatePointSize, heartRatePointSize, this.bgColor);
+    }
+}
+class TimeLinePath extends NodeCore {
+    startPos;
+    endPos;
+    lineColor = '#000';
+    lineWidth = 1;
+    constructor() {
+        super();
+        this.allowHitTest = true;
+        this.enableClip = false;
+    }
+    renderOutline(renderCtx) {
+        translate(renderCtx, this.finalRect.x, this.finalRect.y);
+        translate(renderCtx, this.border + this.padding, this.border + this.padding);
+    }
+    render(e) {
+        e.render.strokeLines([this.startPos, this.endPos], this.lineWidth, this.lineColor);
+    }
+}
+
+class TimelineControl extends AbsolutePanel {
+    render(e) {
+    }
+    constructor() {
+        super();
+        this.border = 1;
+        this.borderColor = '#000';
+    }
+    measureOverride(e, availableSize) {
+        const height = this.controls.reduce((prev, curr) => {
+            curr.measure(e, availableSize);
+            return prev + curr.desiredSize.height;
+        }, 0);
+        return {
+            height, width: availableSize.width
+        };
+    }
+    arrangeOverride(e, finalSize) {
+        this.controls.reduce((prev, curr) => {
+            const itemRect = {
+                x: 0,
+                y: prev,
+                width: curr.desiredSize.width,
+                height: curr.desiredSize.height
+            };
+            curr.arrange(e, itemRect);
+            return prev + curr.desiredSize.height;
+        }, 0);
+        return finalSize;
+    }
+    rebuild() {
+        treeForEach(this, item => {
+            if (item instanceof NodeItems) {
+                return item.controls;
+            }
+            else {
+                return [];
+            }
+        }, (item) => {
+            if (item instanceof TimelineBaseControl) {
+                item.reBuild();
+            }
+        });
+    }
+}
+function treeForEach(root, children, callback) {
+    callback(root);
+    children(root).forEach(node => {
+        treeForEach(node, children, callback);
+    });
+}
+/**
+ * 中间网格数据绘制区域
+ */
+class TimeGridContainer extends AbsolutePanel {
+    get gridHeight() {
+        return this._gridHeight;
+    }
+    set gridHeight(value) {
+        this._gridHeight = value;
+        this.timelineGridControl.height = value;
+        this.timeValueRuleContainer.height = value;
+    }
+    _startTime;
+    _showDays = 7;
+    get startTime() {
+        return this._startTime;
+    }
+    set startTime(value) {
+        this._startTime = value;
+        this.timelineGridControl.startTime = value;
+    }
+    get showDays() {
+        return this._showDays;
+    }
+    set showDays(value) {
+        this._showDays = value;
+        this.timelineGridControl.showDays = value;
+    }
+    /**
+     * 网格区域高度
+     */
+    _gridHeight = 0;
+    scrollX = 0;
+    timelineGridControl;
+    timeValueRuleContainer;
+    constructor() {
+        super();
+        this.timelineGridControl = new TimelineGridControl();
+        this.addChild(this.timelineGridControl);
+        this.timeValueRuleContainer = new TimeValueRuleContainer();
+        this.addChild(this.timeValueRuleContainer);
+    }
+    init() {
+        this.timelineGridControl.init();
+    }
+    measureOverride(e, availableSize) {
+        this.timelineGridControl.measure(e, availableSize);
+        const height = this.timelineGridControl.desiredSize.height;
+        this.timeValueRuleContainer.measure(e, { height, width: availableSize.width });
+        return { height, width: availableSize.width };
+    }
+    arrangeOverride(e, finalSize) {
+        this.controls.filter(item => item !== this.timelineGridControl).forEach(item => {
+            const itemRect = {
+                x: item.x,
+                y: item.y,
+                width: item.desiredSize.width,
+                height: item.desiredSize.height
+            };
+            item.arrange(e, itemRect);
+        });
+        this.timelineGridControl.arrange(e, {
+            x: this.timelineGridControl.x - this.scrollX,
+            y: this.timelineGridControl.y,
+            width: this.timelineGridControl.desiredSize.width,
+            height: this.timelineGridControl.desiredSize.height
+        });
+        return finalSize;
+    }
+    render(e) {
+    }
+}
+class TimeValueRuleContainer extends AbsolutePanel {
+    getLayoutWidth() {
+        return this.controls.reduce((prev, curr) => prev + curr.width, 0);
+    }
+    init() {
+        this.controls.reduce((prev, curr) => {
+            curr.x = prev;
+            return prev + curr.width;
+        }, 0);
+    }
+    renderOutline(renderCtx) {
+        translate(renderCtx, this.finalRect.x, this.finalRect.y);
+        translate(renderCtx, this.border + this.padding, this.border + this.padding);
+    }
+    render(e) {
+    }
+}
+/**
+ * 标题区域
+ * 时间刻度：日期、住院天数、手术天数、时刻
+ * 数值标尺区域、数据网格区域
+ * 文本时间轴区域
+ */
+class TimelineGridControl extends TimelineBaseControl {
+    get isShowTemperature() {
+        return this._isShowTemperature;
+    }
+    set isShowTemperature(value) {
+        this.propertyChanged('isShowTemperature', this._isShowTemperature, value);
+        this._isShowTemperature = value;
+    }
+    get isShowHeartRate() {
+        return this._isShowHeartRate;
+    }
+    set isShowHeartRate(value) {
+        this.propertyChanged('isShowHeartRate', this._isShowHeartRate, value);
+        this._isShowHeartRate = value;
+    }
+    //体温数据
+    temperatureData = [];
+    //心率数据
+    heartRateData = [];
+    //体温时间轴值模型
+    temperatureTimeLineValueModel = [];
+    //心率时间轴值模型
+    heartRateTimeLineValueModel = [];
+    //图章数据
+    eventData = [];
+    _isShowTemperature = true;
+    _isShowHeartRate = true;
+    mousePos = null;
+    constructor() {
+        super();
+        this.startTime = moment$1(moment$1().format("YYYY-MM-DD")).toDate();
+        this.addEventListener('mousemove', evt => {
+            const pos = evt.pos;
+            const nodePos = getNodePosition(this, { x: 0, y: 0 });
+            this.mousePos = { x: pos.x - nodePos.x, y: pos.y - nodePos.y };
+        });
+        this.addEventListener('mouseleave', evt => {
+            this.mousePos = null;
+        });
+    }
+    randomNum = (start, end) => {
+        return Math.floor(Math.random() * (end - start) + start);
+    };
+    getLayoutWidth() {
+        return this.showDays * (24 / timelineConfig.timeTickHours) * timelineConfig.timeTickWidth;
+    }
+    init() {
+        this.temperatureTimeLineValueModel = timelineConfig.temperatureModels.map((item, index, arr) => ({
+            value: item,
+            offset: (index + 1) / (arr.length + 1)
+        }));
+        this.heartRateTimeLineValueModel = timelineConfig.heartRateModels.map((item, index, arr) => ({
+            value: item,
+            offset: (index + 1) / (arr.length + 1)
+        }));
+        const { timeTickHours } = timelineConfig;
+        for (let i = 0; i < this.showDays; i++) {
+            for (let j = 0; j < 24; j += timeTickHours) {
+                this.temperatureData.push({
+                    date: moment$1(this.startTime).add(i, 'days').add(j, 'hours').toDate(),
+                    value: this.randomNum(33, 43) + this.randomNum(0, 10) / 10
+                    //value: 43
+                });
+                this.heartRateData.push({
+                    date: moment$1(this.startTime).add(i, 'days').add(j, 'hours').toDate(),
+                    value: this.randomNum(70, 150)
+                });
+            }
+            this.eventData.push({ date: moment$1(this.startTime).add(i, 'days').toDate(), value: '入\r\n院' });
+        }
+        this.temperatureData.sort((prev, curr) => {
+            return curr.date > prev.date ? 1 : -1;
+        });
+        this.heartRateData.sort((prev, curr) => curr.date > prev.date ? 1 : -1);
+    }
+    buildOverride(e) {
+        this.buildTemperature(e);
+        this.buildHearRate(e);
+        this.buildStampUnit(e);
+        const tipLabel = new LabelNode();
+        tipLabel.text = '外\r\n科\r\n手\r\n术';
+        tipLabel.borderColor = '#000';
+        tipLabel.border = 1;
+        tipLabel.shadowBlur = 5;
+        tipLabel.shadowColor = 'red';
+        tipLabel.fontSize = 12;
+        tipLabel.bgColor = '#fff';
+        tipLabel.color = 'red';
+        tipLabel.textWrapping = 'wrap';
+        //tipLabel.width = 14;
+        tipLabel.x = 100;
+        tipLabel.y = 30;
+        this.addChild(tipLabel);
+    }
+    render(e) {
+        const { timeValueHeight, timeTickHours, timeTickWidth } = timelineConfig;
+        const ticks = 24 / timeTickHours;
+        for (let i = 0; i < this.showDays; i++) {
+            for (let j = 1; j <= ticks; j++) {
+                const x = i * timeTickWidth * ticks + j * timeTickWidth;
+                const color = j < ticks ? '#69c0ff' : '#ffadd2';
+                e.render.strokeLines([{
+                        x,
+                        y: 0
+                    }, { x, y: this.finalRect.height }], 0.5, color);
+            }
+        }
+        for (let i = timeValueHeight; i < this.finalRect.height; i += timeValueHeight) {
+            e.render.strokeLines([{
+                    x: 0,
+                    y: i
+                }, { x: this.finalRect.width, y: i }], 0.5, '#69c0ff');
+        }
+        this.renderTemperatureGuideLine(e);
+        if (this.mousePos) {
+            e.render.strokeLines([{ x: 0, y: this.mousePos.y }, { x: this.finalRect.width, y: this.mousePos.y }]);
+            e.render.strokeLines([{ x: this.mousePos.x, y: 0 }, { x: this.mousePos.x, y: this.finalRect.height }]);
+        }
+    }
+    renderTemperatureGuideLine(e) {
+        const timelineValue = this.temperatureTimeLineValueModel.map(item => ({
+            value: item.value,
+            offset: this.height * item.offset
+        }));
+        //绘制正常36-37度，辅助线
+        const startPoint = 36.5;
+        const endPoint = 37.3;
+        const startFilter = timelineValue.filter(item => item.value >= startPoint);
+        const endFilter = timelineValue.filter(item => item.value >= endPoint);
+        let startY = 0;
+        let endY = 0;
+        if (startFilter.length > 1) {
+            const curr = startFilter[startFilter.length - 1];
+            const next = startFilter[startFilter.length - 2];
+            startY = curr.offset + (curr.value - startPoint) * (next.offset - curr.offset) / (curr.value - next.value);
+        }
+        if (endFilter.length > 1) {
+            const curr = endFilter[endFilter.length - 1];
+            const next = endFilter[endFilter.length - 2];
+            endY = curr.offset + (curr.value - endPoint) * (next.offset - curr.offset) / (curr.value - next.value);
+        }
+        e.render.strokeLines([{ x: 0, y: startY }, { x: this.finalRect.width, y: startY }], 1, 'red');
+        e.render.strokeLines([{ x: 0, y: endY }, { x: this.finalRect.width, y: endY }], 1, 'red');
+    }
+    buildTemperature(e) {
+        if (this.temperatureData.length === 0) {
+            return;
+        }
+        const height = this.height;
+        const { timeValueHeight, timeTickHours, timeTickWidth, temperaturePointSize } = timelineConfig;
+        const timelineValue = this.temperatureTimeLineValueModel.map(item => ({
+            value: item.value,
+            offset: height * item.offset
+        }));
+        //获取体温点纵向坐标
+        const getTimelineVerValue = (val) => {
+            const filter = timelineValue.filter(item => item.value >= val);
+            if (filter.length) {
+                if (filter.length > 1) {
+                    const curr = filter[filter.length - 1];
+                    const next = filter[filter.length - 2];
+                    return curr.offset + (curr.value - val) * (next.offset - curr.offset) / (curr.value - next.value);
+                }
+                else {
+                    return filter[0].offset;
+                }
+            }
+            return -1;
+        };
+        let prevPos = null;
+        for (let i = 0; i < this.showDays; i++) {
+            const ticks = 24 / timeTickHours;
+            for (let j = 0; j < ticks; j++) {
+                const hourOffset = j * timeTickHours;
+                const x = i * timeTickWidth * ticks + j * timeTickWidth;
+                const startTime = moment$1(this.startTime).add(i, 'days').add(hourOffset, 'hours');
+                const endTime = moment$1(this.startTime).add(i, 'days').add(hourOffset + timeTickHours, 'hours');
+                const predicate = (item) => {
+                    return moment$1(item).isBetween(startTime, endTime, null, '(]');
+                };
+                const currTimePoints = this.temperatureData.filter(item => predicate(item.date));
+                currTimePoints.forEach(item => {
+                    let currX = x;
+                    const diffMinutes = moment$1(item.date).diff(startTime, 'minutes');
+                    const offsetMinutes = diffMinutes * timeTickWidth / (timeTickHours * 60);
+                    currX += offsetMinutes;
+                    let currY = getTimelineVerValue(item.value);
+                    //超出显示范围
+                    if (currY > height) {
+                        currY = height;
+                        this.setExceededValueTip(e, item.value + '℃', currX, currY - 20);
+                    }
+                    if (currY < 0) {
+                        currY = 0;
+                        this.setExceededValueTip(e, item.value + '℃', currX, currY + 5);
+                    }
+                    const point = new TemperaturePoint('axillary', item.value);
+                    point.x = currX - point.width / 2;
+                    point.y = currY - point.width / 2;
+                    this.addChild(point);
+                    if (prevPos) {
+                        const linePath = new TimeLinePath();
+                        linePath.lineColor = 'blue';
+                        linePath.startPos = prevPos;
+                        linePath.endPos = { x: currX, y: currY };
+                        this.addChild(linePath);
+                    }
+                    prevPos = { x: currX, y: currY };
+                });
+            }
+        }
+    }
+    setExceededValueTip(e, tip, x, y) {
+        const tipLabel = new LabelNode();
+        tipLabel.text = tip;
+        tipLabel.borderColor = '#000';
+        tipLabel.border = 1;
+        tipLabel.shadowBlur = 5;
+        tipLabel.shadowColor = '#000';
+        tipLabel.fontSize = 10;
+        tipLabel.bgColor = '#fff';
+        const tipLabelWidth = e.render.measureText2(tipLabel.text, tipLabel);
+        tipLabel.x = x -= tipLabelWidth / 2;
+        tipLabel.y = y;
+        this.addChild(tipLabel);
+    }
+    buildHearRate(e) {
+        const height = this.height;
+        const { timeTickHours, timeTickWidth, heartRateSymbol } = timelineConfig;
+        const timelineValue = this.heartRateTimeLineValueModel.map(item => ({
+            value: item.value,
+            offset: height * item.offset
+        }));
+        //获取心率纵向坐标
+        const getTimelineVerValue = (val) => {
+            const filter = timelineValue.filter(item => item.value >= val);
+            if (filter.length) {
+                if (filter.length > 1) {
+                    const curr = filter[filter.length - 1];
+                    const next = filter[filter.length - 2];
+                    return curr.offset + (curr.value - val) * (next.offset - curr.offset) / (curr.value - next.value);
+                }
+                else {
+                    return filter[0].offset;
+                }
+            }
+            return -1;
+        };
+        //const getTimelineHorValue=()
+        let prevPos = null;
+        for (let i = 0; i < this.showDays; i++) {
+            const ticks = 24 / timeTickHours;
+            for (let j = 0; j < ticks; j++) {
+                const hourOffset = j * timeTickHours;
+                const x = i * timeTickWidth * ticks + j * timeTickWidth;
+                const startTime = moment$1(this.startTime).add(i, 'days').add(hourOffset, 'hours');
+                const endTime = moment$1(this.startTime).add(i, 'days').add(hourOffset + timeTickHours, 'hours');
+                const predicate = (item) => {
+                    return moment$1(item).isBetween(startTime, endTime, null, '(]');
+                };
+                const currTimePoints = this.heartRateData.filter(item => predicate(item.date));
+                currTimePoints.forEach(item => {
+                    let currX = x;
+                    const diffMinutes = moment$1(item.date).diff(startTime, 'minutes');
+                    const offsetMinutes = diffMinutes * timeTickWidth / (timeTickHours * 60);
+                    currX += offsetMinutes;
+                    let currY = getTimelineVerValue(item.value);
+                    //超出显示范围
+                    if (currY > height) {
+                        currY = height;
+                        this.setExceededValueTip(e, item.value + heartRateSymbol, currX, currY - 20);
+                    }
+                    if (currY < 0) {
+                        currY = 0;
+                        this.setExceededValueTip(e, item.value + heartRateSymbol, currX, currY + 5);
+                    }
+                    const point = new HeartRatePoint();
+                    point.value = item.value + '次/分';
+                    point.x = currX - point.width / 2;
+                    point.y = currY - point.width / 2;
+                    this.addChild(point);
+                    if (prevPos) {
+                        const linePath = new TimeLinePath();
+                        linePath.lineColor = 'red';
+                        linePath.startPos = prevPos;
+                        linePath.endPos = { x: currX, y: currY };
+                        this.addChild(linePath);
+                    }
+                    prevPos = { x: currX, y: currY };
+                });
+            }
+        }
+    }
+    buildStampUnit(e) {
+        if (!this.eventData.length) {
+            return;
+        }
+        const { timeTickHours, timeTickWidth, heartRateSymbol } = timelineConfig;
+        for (let i = 0; i < this.showDays; i++) {
+            const ticks = 24 / timeTickHours;
+            for (let j = 0; j < ticks; j++) {
+                const hourOffset = j * timeTickHours;
+                const x = i * timeTickWidth * ticks + j * timeTickWidth;
+                const startTime = moment$1(this.startTime).add(i, 'days').add(hourOffset, 'hours');
+                const endTime = moment$1(this.startTime).add(i, 'days').add(hourOffset + timeTickHours, 'hours');
+                const predicate = (item) => {
+                    return moment$1(item).isBetween(startTime, endTime, null, '(]');
+                };
+                const currTimePoints = this.eventData.filter(item => predicate(item.date));
+                currTimePoints.forEach(item => {
+                    let currX = x;
+                    const diffMinutes = moment$1(item.date).diff(startTime, 'minutes');
+                    const offsetMinutes = diffMinutes * timeTickWidth / (timeTickHours * 60);
+                    currX += offsetMinutes;
+                    const tipLabel = new LabelNode();
+                    tipLabel.text = item.value;
+                    tipLabel.borderColor = '#000';
+                    tipLabel.border = 1;
+                    tipLabel.shadowBlur = 5;
+                    tipLabel.shadowColor = 'red';
+                    tipLabel.fontSize = 12;
+                    tipLabel.bgColor = '#fff';
+                    tipLabel.color = 'red';
+                    tipLabel.textWrapping = 'wrap';
+                    //tipLabel.width = 14;
+                    tipLabel.x = currX;
+                    tipLabel.y = 30;
+                    this.addChild(tipLabel);
+                });
+            }
+        }
+    }
+}
+/**
+ * 心率数值标尺控件
+ */
+class HeartRateValueRuleControl extends TimelineBaseControl {
+    constructor() {
+        super();
+        this.width = 50;
+    }
+    //体温时间轴值模型
+    heartRateTimeLineValueModel = [];
+    buildOverride(e) {
+        const width = this.width;
+        const height = this.height;
+        const label = new LabelNode();
+        label.text = '心率';
+        label.fontSize = timelineConfig.fontSize;
+        label.fontName = timelineConfig.fontName;
+        label.y = 5;
+        this.addChild(label);
+        const textProps = new TextProps();
+        textProps.fontSize = timelineConfig.fontSize;
+        textProps.fontName = timelineConfig.fontName;
+        label.x = (width - e.render.measureText(label.text, textProps).width) / 2;
+        const timelineValue = this.heartRateTimeLineValueModel.map(item => ({
+            value: item.value,
+            offset: (height) * item.offset
+        }));
+        timelineValue.forEach(item => {
+            const valueLabel = new LabelNode();
+            valueLabel.fontName = timelineConfig.fontName;
+            valueLabel.fontSize = timelineConfig.fontSize;
+            valueLabel.text = item.value + '';
+            valueLabel.x = (width - e.render.measureText(valueLabel.text, textProps).width) / 2;
+            valueLabel.y = item.offset;
+            this.addChild(valueLabel);
+        });
+    }
+    render(e) {
+    }
+}
+/**
+ * 体温数值标尺控件
+ */
+class TemperatureValueRuleControl extends TimelineBaseControl {
+    constructor() {
+        super();
+        this.width = 50;
+    }
+    //体温时间轴值模型
+    temperatureTimeLineValueModel = [];
+    buildOverride(e) {
+        const width = this.width;
+        const height = this.height;
+        const label = new LabelNode();
+        label.text = '体温';
+        label.fontSize = timelineConfig.fontSize;
+        label.fontName = timelineConfig.fontName;
+        label.y = 5;
+        this.addChild(label);
+        label.x = (width - e.render.measureText2(label.text, label)) / 2;
+        const timelineValue = this.temperatureTimeLineValueModel.map(item => ({
+            value: item.value,
+            offset: (height) * item.offset
+        }));
+        timelineValue.forEach(item => {
+            const valueLabel = new LabelNode();
+            valueLabel.fontName = timelineConfig.fontName;
+            valueLabel.fontSize = timelineConfig.fontSize;
+            valueLabel.text = item.value + '';
+            valueLabel.x = (width - e.render.measureText2(valueLabel.text, valueLabel)) / 2;
+            valueLabel.y = item.offset;
+            this.addChild(valueLabel);
+        });
+    }
+    render(e) {
+    }
+}
+
+/**
+ * 事件轴标题
+ * 日期、手术天数、术后天数、时刻
+ */
+class TimeTickTitleControl extends TimelineBaseControl {
+    constructor() {
+        super();
+        this.bgColor = '#fff';
+    }
+    title;
+    render(e) {
+    }
+    buildOverride(e) {
+        const width = this.width;
+        const height = this.height;
+        const label = new LabelNode();
+        label.text = this.title;
+        label.fontSize = timelineConfig.fontSize;
+        label.fontName = timelineConfig.fontName;
+        const titleWidth = e.render.measureText2(label.text, label);
+        label.x = (width - titleWidth) / 2;
+        label.y = (height - label.fontSize) / 2;
+        this.addChild(label);
+    }
+}
+/**
+ * 文本状态时刻控件，用于显示状态文本，例如：小便等
+ */
+class TextStatusTickControl extends TimelineBaseControl {
+    render(e) {
+    }
+    buildOverride(e) {
+        const { timeTickHours, timeTickWidth } = timelineConfig;
+        const height = this.height;
+        const ticks = 24 / timeTickHours;
+        for (let i = 0; i < this.showDays; i++) {
+            const width = ticks * timeTickWidth;
+            // const curr = moment(this.startTime).add(i, 'days').format('YYYY-MM-DD');
+            //
+            // const label = new LabelNode();
+            // label.text = curr + '';
+            // label.fontSize = timelineConfig.fontSize;
+            // label.fontName = timelineConfig.fontName;
+            //
+            // const dateTitleWidth = e.render.measureText2(curr + '', label);
+            //
+            // label.x = i * width + (width - dateTitleWidth) / 2;
+            // label.y = (height - label.fontSize) / 2;
+            // this.addChild(label);
+            const path = new TimeLinePath();
+            path.startPos = { x: i * width, y: 0 };
+            path.endPos = { x: i * width, y: height };
+            path.lineColor = '#ffadd2';
+            this.addChild(path);
+        }
+    }
+}
+/**
+ * 呼吸状态容器
+ */
+class TimelineHXStatusContainer extends TickContainer {
+    tickTitleControl;
+    constructor() {
+        super();
+        this.tickTitleControl = new TimeTickTitleControl();
+        this.tickTitleControl.title = '呼吸';
+        this.tickTitleControl.height = timelineConfig.tickHeaderHeight;
+        this.tickControl = new TextStatusTickControl();
+        this.tickControl.height = timelineConfig.tickHeaderHeight;
+        this.addChild(this.tickControl);
+        this.addChild(this.tickTitleControl);
+        this.height = timelineConfig.tickHeaderHeight;
+    }
+    /**
+     * 设置标题和刻度宽度
+     * @param titleWidth
+     * @param tickWidth
+     */
+    setLayout(titleWidth, tickWidth) {
+        this.width = tickWidth + titleWidth;
+        this.tickTitleControl.width = titleWidth;
+        this.tickControl.width = tickWidth;
+        this.tickControl.x = titleWidth;
+    }
+    render(e) {
+    }
+}
+/**
+ * 小便状态容器
+ */
+class TimelineXBStatusContainer extends TickContainer {
+    //statusControl: TextStatusTickControl;
+    tickTitleControl;
+    constructor() {
+        super();
+        this.tickTitleControl = new TimeTickTitleControl();
+        this.tickTitleControl.title = '小便  ml';
+        this.tickTitleControl.height = timelineConfig.tickHeaderHeight;
+        this.tickControl = new TextStatusTickControl();
+        this.tickControl.height = timelineConfig.tickHeaderHeight;
+        this.addChild(this.tickControl);
+        this.addChild(this.tickTitleControl);
+        this.height = timelineConfig.tickHeaderHeight;
+    }
+    /**
+     * 设置标题和刻度宽度
+     * @param titleWidth
+     * @param tickWidth
+     */
+    setLayout(titleWidth, tickWidth) {
+        this.width = tickWidth + titleWidth;
+        this.tickTitleControl.width = titleWidth;
+        this.tickControl.width = tickWidth;
+        this.tickControl.x = titleWidth;
+    }
+    render(e) {
+    }
+}
+/**
+ * 其他状态容器
+ */
+class TimelineOtherStatusContainer extends TickContainer {
+    //statusControl: TextStatusTickControl;
+    tickTitleControl;
+    constructor() {
+        super();
+        this.tickTitleControl = new TimeTickTitleControl();
+        this.tickTitleControl.title = '其他';
+        this.tickTitleControl.height = timelineConfig.tickHeaderHeight;
+        this.tickControl = new TextStatusTickControl();
+        this.tickControl.height = timelineConfig.tickHeaderHeight;
+        this.addChild(this.tickControl);
+        this.addChild(this.tickTitleControl);
+        this.height = timelineConfig.tickHeaderHeight;
+    }
+    /**
+     * 设置标题和刻度宽度
+     * @param titleWidth
+     * @param tickWidth
+     */
+    setLayout(titleWidth, tickWidth) {
+        this.width = tickWidth + titleWidth;
+        this.tickTitleControl.width = titleWidth;
+        this.tickControl.width = tickWidth;
+        this.tickControl.x = titleWidth;
+    }
+    render(e) {
+    }
+}
+
+/**
+ * 时间刻度区域
+ * 循环日期显示
+ * 住院天数
+ * 术后天数
+ * 时刻等
+ */
+/**
+ * 日期时刻容器
+ */
+class DateTickContainer extends TickContainer {
+    tickTitleControl;
+    constructor() {
+        super();
+        this.tickTitleControl = new TimeTickTitleControl();
+        this.tickTitleControl.title = '日期';
+        this.tickTitleControl.height = timelineConfig.tickHeaderHeight;
+        this.tickControl = new DateTickControl();
+        this.tickControl.height = timelineConfig.tickHeaderHeight;
+        this.addChild(this.tickControl);
+        this.addChild(this.tickTitleControl);
+        this.height = timelineConfig.tickHeaderHeight;
+    }
+    /**
+     * 设置标题和刻度宽度
+     * @param titleWidth
+     * @param tickWidth
+     */
+    setLayout(titleWidth, tickWidth) {
+        this.width = tickWidth + titleWidth;
+        this.tickTitleControl.width = titleWidth;
+        this.tickControl.width = tickWidth;
+        this.tickControl.x = titleWidth;
+    }
+    render(e) {
+    }
+}
+/**
+ * 日期刻度
+ */
+class DateTickControl extends TimelineBaseControl {
+    buildOverride(e) {
+        const { timeTickHours, timeTickWidth } = timelineConfig;
+        const height = this.height;
+        const ticks = 24 / timeTickHours;
+        for (let i = 0; i < this.showDays; i++) {
+            const width = ticks * timeTickWidth;
+            const curr = moment$1(this.startTime).add(i, 'days').format('YYYY-MM-DD');
+            const label = new LabelNode();
+            label.text = curr + '';
+            label.fontSize = timelineConfig.fontSize;
+            label.fontName = timelineConfig.fontName;
+            const dateTitleWidth = e.render.measureText2(curr + '', label);
+            label.x = i * width + (width - dateTitleWidth) / 2;
+            label.y = (height - label.fontSize) / 2;
+            this.addChild(label);
+            const path = new TimeLinePath();
+            path.startPos = { x: i * width, y: 0 };
+            path.endPos = { x: i * width, y: height };
+            path.lineColor = '#ffadd2';
+            this.addChild(path);
+        }
+    }
+    render(e) {
+    }
+}
+class TimeTickContainer extends TickContainer {
+    tickTitleControl;
+    constructor() {
+        super();
+        this.tickTitleControl = new TimeTickTitleControl();
+        this.tickTitleControl.title = '时刻';
+        this.tickTitleControl.height = timelineConfig.tickHeaderHeight;
+        this.tickControl = new TimeTickControl();
+        this.tickControl.height = timelineConfig.tickHeaderHeight;
+        this.addChild(this.tickControl);
+        this.addChild(this.tickTitleControl);
+        this.height = timelineConfig.tickHeaderHeight;
+    }
+    /**
+     * 设置标题和刻度宽度
+     * @param titleWidth
+     * @param tickWidth
+     */
+    setLayout(titleWidth, tickWidth) {
+        this.width = tickWidth + titleWidth;
+        this.tickTitleControl.width = titleWidth;
+        this.tickControl.width = tickWidth;
+        this.tickControl.x = titleWidth;
+    }
+    render(e) {
+    }
+}
+class TimeTickControl extends TimelineBaseControl {
+    constructor() {
+        super();
+        this.border = 1;
+        this.borderColor = '#000';
+    }
+    showDays = 7;
+    buildOverride(e) {
+        const { timeTickHours, timeTickWidth } = timelineConfig;
+        const ticks = 24 / timeTickHours;
+        for (let i = 0; i < this.showDays; i++) {
+            for (let j = 1; j <= ticks; j++) {
+                const hourOffset = j * timeTickHours;
+                const x = i * timeTickWidth * ticks + j * timeTickWidth;
+                const text = hourOffset + '';
+                const label = new LabelNode();
+                label.text = text;
+                label.fontSize = timelineConfig.fontSize;
+                label.fontName = timelineConfig.fontName;
+                const dateTitleWidth = e.render.measureText2(text, label);
+                label.x = x - timeTickWidth + (timeTickWidth - dateTitleWidth) / 2;
+                label.y = 0;
+                this.addChild(label);
+            }
+        }
+    }
+    render(e) {
+        const { timeTickHours, timeTickWidth } = timelineConfig;
+        const ticks = 24 / timeTickHours;
+        for (let i = 0; i < this.showDays; i++) {
+            for (let j = 1; j <= ticks; j++) {
+                const x = i * timeTickWidth * ticks + j * timeTickWidth;
+                const color = j < ticks ? '#69c0ff' : '#ffadd2';
+                e.render.strokeLines([{
+                        x,
+                        y: 0
+                    }, { x, y: this.finalRect.height }], 1, color);
+            }
+        }
+    }
+}
+class InPatDaysTickContainer extends TickContainer {
+    //inPatDaysControl: InPatDaysControl;
+    tickTitleControl;
+    constructor() {
+        super();
+        this.tickTitleControl = new TimeTickTitleControl();
+        this.tickTitleControl.title = '住院天数';
+        this.tickTitleControl.height = timelineConfig.tickHeaderHeight;
+        this.tickControl = new InPatDaysControl();
+        this.tickControl.height = timelineConfig.tickHeaderHeight;
+        this.addChild(this.tickControl);
+        this.addChild(this.tickTitleControl);
+        this.height = timelineConfig.tickHeaderHeight;
+    }
+    /**
+     * 设置标题和刻度宽度
+     * @param titleWidth
+     * @param tickWidth
+     */
+    setLayout(titleWidth, tickWidth) {
+        this.width = tickWidth + titleWidth;
+        this.tickTitleControl.width = titleWidth;
+        this.tickControl.width = tickWidth;
+        this.tickControl.x = titleWidth;
+    }
+    render(e) {
+    }
+}
+class InPatDaysControl extends TimelineBaseControl {
+    buildOverride(e) {
+        const { timeTickHours, timeTickWidth } = timelineConfig;
+        const height = this.height;
+        const ticks = 24 / timeTickHours;
+        for (let i = 0; i < this.showDays; i++) {
+            const width = ticks * timeTickWidth;
+            const text = (i + 1) + '';
+            const label = new LabelNode();
+            label.text = text;
+            label.fontSize = timelineConfig.fontSize;
+            label.fontName = timelineConfig.fontName;
+            const dateTitleWidth = e.render.measureText2(text, label);
+            label.x = i * width + (width - dateTitleWidth + label.fontSize) / 2;
+            label.y = (height - label.fontSize) / 2;
+            this.addChild(label);
+            const path = new TimeLinePath();
+            path.startPos = { x: i * width, y: 0 };
+            path.endPos = { x: i * width, y: height };
+            path.lineColor = '#ffadd2';
+            this.addChild(path);
+        }
+    }
+    render(e) {
+    }
+}
+
+class TimelineScrollBar extends NodeItems {
+    //滚动条方向
+    orientation = 'horizontal';
+    thumb;
+    thumbSize = 10;
+    //按照百分比计算
+    scrollChanged = new Subject();
+    //总滚动宽度
+    scrollSize = 0;
+    //显示区域宽度
+    viewSize = 0;
+    scrollX = 0;
+    scrollY = 0;
+    constructor(orientation) {
+        super();
+        this.bgColor = '#fff';
+        this.border = 1;
+        this.borderColor = '#000';
+        this.height = 16;
+        this.orientation = orientation;
+        this.thumb = new ScrollThumb();
+        this.addChild(this.thumb);
+        this.thumb.addEventListener('mousedown', evt => {
+            const pos = { ...evt.pos };
+            const { x, y } = this.thumb.finalRect;
+            const mouseMoveListener = (evt2) => {
+                //const scrollView = this.parent as ScrollView;
+                const pos2 = evt2.pos;
+                let moveX = pos2.x - pos.x;
+                let moveY = pos2.y - pos.y;
+                moveX += x;
+                moveY += y;
+                moveX = (moveX / this.finalRect.width) * this.scrollSize;
+                moveY = (moveY / this.finalRect.height) * this.scrollSize;
+                this.updateScroll(moveX, moveY);
+            };
+            const mouseUpListener = (evt3) => {
+                this.thumb.removeEventListener('mousemove', mouseMoveListener);
+                this.thumb.removeEventListener('mouseup', mouseUpListener);
+            };
+            this.thumb.addEventListener('mousemove', mouseMoveListener);
+            this.thumb.addEventListener('mouseup', mouseUpListener);
+        });
+    }
+    updateScroll(x, y) {
+        //const scrollView = this.parent as ScrollView;
+        if (this.orientation === 'horizontal') {
+            if (this.finalRect.height === 0) {
+                return;
+            }
+            if (x + this.viewSize > this.scrollSize) {
+                x = this.scrollSize - this.viewSize;
+            }
+            x = x < 0 ? 0 : x;
+            this.scrollChanged.next(x);
+            this.scrollX = x;
+        }
+    }
+    updateScrollByCurrent(increaseX, increaseY) {
+        //const scrollView = this.parent as ScrollView;
+        increaseX += this.scrollX;
+        increaseY += this.scrollY;
+        this.updateScroll(increaseX, increaseY);
+    }
+    measureOverride(e, availableSize) {
+        if (this.orientation === 'horizontal') {
+            return this.measureHorizontalBar(e, availableSize);
+        }
+        else {
+            //return this.measureVerticalBar(e, availableSize);
+            throw new Error('未实现');
+        }
+    }
+    /**
+     * 横向滚动条测量
+     */
+    measureHorizontalBar(e, availableSize) {
+        if (this.scrollSize > this.viewSize) {
+            //计算滚动按钮的长度
+            const thumbWidth = (this.viewSize / this.scrollSize) * availableSize.width;
+            this.thumb.measure(e, { width: thumbWidth, height: this.thumbSize });
+            return { width: availableSize.width, height: ScrollBarSize };
+        }
+        else {
+            this.thumb.measure(e, { width: 0, height: 0 });
+            return { width: 0, height: 0 };
+        }
+    }
+    arrangeOverride(e, finalSize) {
+        //const scrollView = this.parent as ScrollView;
+        const { width, height } = this.thumb.desiredSize;
+        const x = this.orientation === 'horizontal' ? (this.scrollX / this.scrollSize) * finalSize.width : (ScrollBarSize - this.thumbSize) / 2;
+        const y = this.orientation === 'horizontal' ? (ScrollBarSize - this.thumbSize) / 2 : (this.scrollY / this.scrollSize) * finalSize.height;
+        this.thumb.arrange(e, { x, y, width, height });
+        return super.arrangeOverride(e, finalSize);
+    }
+    render(e) {
+        //e.render.contentContext.clearRect(0,0,this.finalRect.width,this.finalRect.height);
+        //e.render.fillRect(0, 0, this.finalRect.width, this.finalRect.height, 'red')
+    }
+}
+
+function createTimeline() {
+    const timeline = new TimelineControl();
+    timeline.width = 940;
+    const timeGridContainer = new TimeGridContainer();
+    //timeGridContainer.y = 80;
+    const timelineGridControl = timeGridContainer.timelineGridControl; //new TimeLineControl();
+    timelineGridControl.showDays = 30;
+    timelineGridControl.width = timelineGridControl.getLayoutWidth();
+    timelineGridControl.height = 300;
+    timelineGridControl.init();
+    const tempValueRule = new TemperatureValueRuleControl();
+    tempValueRule.temperatureTimeLineValueModel = timelineGridControl.temperatureTimeLineValueModel;
+    tempValueRule.bgColor = '#fff';
+    tempValueRule.height = timelineGridControl.height;
+    timeGridContainer.timeValueRuleContainer.addChild(tempValueRule);
+    tempValueRule.addEventListener('mouseenter', evt => {
+        tempValueRule.bgColor = 'grey';
+        const mousemoveHandler = () => {
+            tempValueRule.bgColor = '#fff';
+            tempValueRule.removeEventListener('mouseleave', mousemoveHandler);
+        };
+        tempValueRule.addEventListener('mouseleave', mousemoveHandler);
+    });
+    const heartRateValueRule = new HeartRateValueRuleControl();
+    heartRateValueRule.heartRateTimeLineValueModel = timelineGridControl.heartRateTimeLineValueModel;
+    heartRateValueRule.bgColor = '#fff';
+    heartRateValueRule.height = timelineGridControl.height;
+    timeGridContainer.timeValueRuleContainer.addChild(heartRateValueRule);
+    heartRateValueRule.addEventListener('mouseenter', evt => {
+        heartRateValueRule.bgColor = 'grey';
+        const mousemoveHandler = () => {
+            heartRateValueRule.bgColor = '#fff';
+            heartRateValueRule.removeEventListener('mouseleave', mousemoveHandler);
+        };
+        heartRateValueRule.addEventListener('mouseleave', mousemoveHandler);
+    });
+    timeGridContainer.timeValueRuleContainer.init();
+    const titleWidth = timeGridContainer.timeValueRuleContainer.getLayoutWidth();
+    timeGridContainer.timeValueRuleContainer.width = titleWidth;
+    timeGridContainer.timeValueRuleContainer.height = timelineGridControl.height;
+    timeGridContainer.timelineGridControl.x = timeGridContainer.timeValueRuleContainer.width;
+    const dateHeader = new DateTickContainer();
+    dateHeader.showDays = timelineGridControl.showDays;
+    dateHeader.setLayout(titleWidth, timelineGridControl.width);
+    timeline.addChild(dateHeader);
+    const inDaysHeader = new InPatDaysTickContainer();
+    inDaysHeader.showDays = timelineGridControl.showDays;
+    inDaysHeader.setLayout(titleWidth, timelineGridControl.width);
+    timeline.addChild(inDaysHeader);
+    const timeHeader = new TimeTickContainer();
+    timeHeader.showDays = timelineGridControl.showDays;
+    timeHeader.setLayout(titleWidth, timelineGridControl.width);
+    timeline.addChild(timeHeader);
+    timeline.addChild(timeGridContainer);
+    const hxStatus = new TimelineHXStatusContainer();
+    hxStatus.showDays = timelineGridControl.showDays;
+    hxStatus.setLayout(titleWidth, timelineGridControl.width);
+    timeline.addChild(hxStatus);
+    const xbStatus = new TimelineXBStatusContainer();
+    xbStatus.showDays = timelineGridControl.showDays;
+    xbStatus.setLayout(titleWidth, timelineGridControl.width);
+    timeline.addChild(xbStatus);
+    const otStatus = new TimelineOtherStatusContainer();
+    otStatus.showDays = timelineGridControl.showDays;
+    otStatus.setLayout(titleWidth, timelineGridControl.width);
+    timeline.addChild(otStatus);
+    const timelineScrollbar = new TimelineScrollBar('horizontal');
+    timelineScrollbar.scrollSize = timelineGridControl.width;
+    timelineScrollbar.viewSize = 840;
+    timelineScrollbar.width = timeline.width;
+    timelineScrollbar.scrollChanged.subscribe(data => {
+        dateHeader.scrollX = data;
+        inDaysHeader.scrollX = data;
+        timeHeader.scrollX = data;
+        timeGridContainer.scrollX = data;
+        xbStatus.scrollX = data;
+        hxStatus.scrollX = data;
+        otStatus.scrollX = data;
+    });
+    timeline.addChild(timelineScrollbar);
+    return timeline;
+}
+
 /**
  * Node宽度定义
  * 1.在单页模式下，文档最小宽度为单个文档宽度+合适的外边距
  * 2.在多页模式下，文档最小宽度为单个文档宽度+合适的外边距
  */
 class CanvasTextEditor extends AbsolutePanel {
-    editCanvas;
-    editInput;
+    container;
     contentCtx;
     viewOptions;
     docCtx;
@@ -20399,10 +21731,12 @@ class CanvasTextEditor extends AbsolutePanel {
     onDocChangedEvent = new Subject$1();
     //执行flushTask,refreshDoc之前，此时可以在文档计算排版之前改变内容
     onBeforeRefreshDocument = new Subject$1();
-    constructor(editCanvas, editInput) {
+    editCanvas;
+    editInput;
+    constructor(container) {
         super();
-        this.editCanvas = editCanvas;
-        this.editInput = editInput;
+        this.container = container;
+        this.createDocDOM();
         this.viewOptions = new ViewOptions();
         this.documentSelection = new DocumentSelection();
         this.docCtx = new EditorContext(this.documentSelection.selectionState, this.viewOptions);
@@ -20425,14 +21759,13 @@ class CanvasTextEditor extends AbsolutePanel {
         this.viewOptions.fullPageView = false;
         this.createDocViewer();
         this.docComment = new DocumentComment(this.docCtx);
-        this.contentCtx = editCanvas.getContext('2d');
+        this.contentCtx = this.editCanvas.getContext('2d');
         this.renderContext = new RenderContext(new PaintContent(this.contentCtx));
         this.renderContext.init({ width: 500, height: 500, scale: 1 });
         this.selectionState = this.documentSelection.selectionState;
         this.selectionOverlays = new SelectionOverlays(this.documentSelection.selectionState);
         this.documentPaint = new DocumentPaint(this.renderContext, this.docCtx, this.selectionOverlays.selectedSets);
         this.elementReader = new ElementReader(this.docCtx);
-        //this.docRule = new DocRule(this.ruleCanvas, this.docCtx);
         this.documentInput = new DocumentInput(this, this.docCtx);
         this.documentChange = new DocumentChange(this.elementReader, this.docCtx, this.docComment, this.documentInput);
         this.documentEvent = new DocumentEvent(this, this.documentPaint, this.docCtx, this.documentInput);
@@ -20465,6 +21798,32 @@ class CanvasTextEditor extends AbsolutePanel {
             this.resetViewer(type);
         });
     }
+    createDocDOM() {
+        const container = document.getElementById(this.container);
+        const canvas = document.createElement('canvas');
+        const input = document.createElement('input');
+        container.style.overflow = 'hidden';
+        container.style.position = 'relative';
+        container.style.fontSize = '0';
+        container.style.height = '100%';
+        input.style.position = 'absolute';
+        input.style.width = '1px';
+        input.style.padding = '0';
+        input.style.border = 'none';
+        input.style.outline = 'none';
+        input.style.background = 'black';
+        input.style.pointerEvents = 'none';
+        this.editCanvas = canvas;
+        this.editInput = input;
+        container.appendChild(canvas);
+        container.appendChild(input);
+        container.insertAdjacentElement('afterbegin', input);
+        container.insertAdjacentElement('afterbegin', canvas);
+    }
+    destroyDOM() {
+        this.editInput.remove();
+        this.editCanvas.remove();
+    }
     /**
      * 设置标尺
      */
@@ -20887,6 +22246,9 @@ class CanvasTextEditor extends AbsolutePanel {
     destroy() {
         this.docCtx.destroy();
         this.documentEvent.clearSubEvent();
+        this.selectionState.destroy();
+        this.surfaceView.destroy();
+        this.destroyDOM();
         this.flushTask = null;
     }
     /**
@@ -21174,80 +22536,6 @@ class CanvasTextEditor extends AbsolutePanel {
         this.viewOptions.pageLayoutMode = mode;
         this.flushToSchedule();
     }
-    // test2(): void {
-    //     //获取文档上下文
-    //     const docEleCtx = this.docCtx.getCtx(this.docCtx.document);
-    //     //获取年龄数据元
-    //     const dataEle = docEleCtx.getControlById('1493477712134672386') as DataElementText;
-    //     //获取要隐藏的数据组
-    //     const dataGroup = docEleCtx.ctx.treeFind((item) => item instanceof DataElementGroupElement) as DataElementGroupElement;
-    //     //侦听数据元更改时间
-    //     dataEle.onChangeSubject.subscribe((e) => {
-    //         //在文档重新排版、绘制前，获取最终的指定节点的内容
-    //         const beforeRefreshSub = this.onBeforeRefreshDocument.subscribe((e2) => {
-    //             console.log('内容发生改变，隐藏数据组');
-    //             //获取年龄数据元输入的值
-    //             const age = Number.parseInt(dataEle.getValue());
-    //             //年龄大于20，隐藏数据元
-    //             dataGroup.props.hidden = age > 20;
-    //             //取消订阅事件
-    //             beforeRefreshSub.unsubscribe();
-    //         });
-    //
-    //     });
-    // }
-    //
-    // //修改纸张尺寸,单位为毫米
-    // //editor.setPaperSize(200,150)
-    // test3(width: number, height: number): void {
-    //     this.setPaperSize(200, 150);
-    // }
-    //
-    // //在当前段落后面插入新的段落，段落内容为当前时间
-    // test4(): void {
-    //     const {startControl} = this.selectionState;
-    //     if (!startControl) {
-    //         return;
-    //     }
-    //     //1.获取当前段落
-    //     const currentParagraph = ElementUtil.getParentByType(startControl, ParagraphElement) as ParagraphElement;
-    //     //2.创建新段落对象
-    //     const newPara = ParagraphElement.createElement();
-    //
-    //     //3.创建文本对象
-    //     const newText = new TextGroupElement();
-    //     newText.text = '当前时间为' + new Date();
-    //     newText.props.fontName = '楷体';
-    //     newText.props.fontSize = 18;
-    //     newText.props.color = '#5b8c00';
-    //     //4.将文本对象追加到新段落中
-    //     newPara.addChild(newText);
-    //     //5.在当前段落后面追加新段落
-    //     currentParagraph.parent.addChild(newPara, currentParagraph.getIndex() + 1);
-    //     //6.定位光标到新段落末尾处
-    //     this.selectionState.resetRange(newText,-1);
-    // }
-    //
-    // //在当前位置插入文本数据元
-    // test5():void{
-    //     const {startControl} = this.selectionState;
-    //     if (!startControl) {
-    //         return;
-    //     }
-    //     const newDataTextElement=new DataElementText();
-    //     newDataTextElement.props.nullText='请输入内容';
-    //     newDataTextElement.props.nullTextProps=new TextProps();
-    //     newDataTextElement.props.nullTextProps.fontSize=16;
-    //     newDataTextElement.props.nullTextProps.fontName='宋体';
-    //     newDataTextElement.props.nullTextProps.color='#ffc53d';
-    //     newDataTextElement.props.valueTextProps=new TextProps();
-    //     newDataTextElement.props.valueTextProps.fontSize=18;
-    //     newDataTextElement.props.valueTextProps.fontName='楷体';
-    //     newDataTextElement.props.valueTextProps.color='red';
-    //     this.insertNewElement(newDataTextElement);
-    //
-    // }
-    //
     // //覆盖修改页眉
     // test6():void{
     //     //1.获取页眉对象
@@ -21307,7 +22595,8 @@ class CanvasTextEditor extends AbsolutePanel {
         const win = new Window();
         win.width = 1000;
         win.height = 800;
-        //win.content.addChild(timelineScrollbar)
+        const timeLineControl = createTimeline();
+        win.content.addChild(timeLineControl);
         const rule2 = new RuleControl(this.docCtx);
         this.rule = rule2;
         rule2.width = 700;