From a313b50b3783278d572394f2c653cf4050657cfc Mon Sep 17 00:00:00 2001 From: turingcat Date: Thu, 23 Mar 2023 23:40:09 +0800 Subject: [PATCH] style: add header indicator --- src/editor/assets/css/zone/zone.css | 27 ++++++++++- src/editor/core/draw/Draw.ts | 6 ++- src/editor/core/event/handlers/click.ts | 4 +- src/editor/core/event/handlers/keydown.ts | 6 ++- src/editor/core/i18n/lang/en.json | 6 ++- src/editor/core/i18n/lang/zh-CN.json | 6 ++- src/editor/core/zone/Zone.ts | 58 ++++++++++++++++++++--- src/main.ts | 2 +- 8 files changed, 101 insertions(+), 14 deletions(-) diff --git a/src/editor/assets/css/zone/zone.css b/src/editor/assets/css/zone/zone.css index 7cb72f3..a06e4a2 100644 --- a/src/editor/assets/css/zone/zone.css +++ b/src/editor/assets/css/zone/zone.css @@ -5,4 +5,29 @@ background: rgb(218 231 252); position: absolute; transform: translate(10px, 10px); -} \ No newline at end of file +} + +.ce-header-indicator-border__top, +.ce-header-indicator-border__bottom, +.ce-header-indicator-border__left, +.ce-header-indicator-border__right { + display: block; + position: absolute; +} + +.ce-header-indicator-border__top { + border-top: 2px dashed rgb(238, 238, 238); +} + +.ce-header-indicator-border__bottom { + border-top: 2px dashed rgb(238, 238, 238); + width: 100%; +} + +.ce-header-indicator-border__left { + border-left: 2px dashed rgb(238, 238, 238); +} + +.ce-header-indicator-border__right { + border-right: 2px dashed rgb(238, 238, 238); +} diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index cff8c11..7a89b26 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -1362,6 +1362,10 @@ export class Draw { if (isCompute && !this.isReadonly() && positionContext.isTable) { this.tableTool.render() } + // 页眉指示器重新渲染 + if (isCompute && !this.isReadonly() && this.zone.isHeaderActive()) { + this.zone.drawHeaderZoneIndicator() + } // 页面尺寸改变 if (this.listener.pageSizeChange) { this.listener.pageSizeChange(this.pageRowList.length) @@ -1380,4 +1384,4 @@ export class Draw { this.selectionObserver.removeEvent() } -} \ No newline at end of file +} diff --git a/src/editor/core/event/handlers/click.ts b/src/editor/core/event/handlers/click.ts index 75fe92c..1a1b4c0 100644 --- a/src/editor/core/event/handlers/click.ts +++ b/src/editor/core/event/handlers/click.ts @@ -11,6 +11,8 @@ function dblclick(host: CanvasEvent, evt: MouseEvent) { y: evt.offsetY }) if (!~positionContext.index && positionContext.zone) { + const isReadonly = draw.isReadonly() + if (isReadonly) return draw.getZone().setZone(positionContext.zone) return } @@ -104,4 +106,4 @@ function threeClick(host: CanvasEvent) { export default { dblclick, threeClick -} \ No newline at end of file +} diff --git a/src/editor/core/event/handlers/keydown.ts b/src/editor/core/event/handlers/keydown.ts index 0543c28..beacbe9 100644 --- a/src/editor/core/event/handlers/keydown.ts +++ b/src/editor/core/event/handlers/keydown.ts @@ -1,3 +1,4 @@ +import { EditorZone } from '../../..' import { ZERO } from '../../../dataset/constant/Common' import { ElementType } from '../../../dataset/enum/Element' import { KeyMap } from '../../../dataset/enum/KeyMap' @@ -260,6 +261,9 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) { evt.preventDefault() } else if (evt.key === KeyMap.ESC) { host.clearPainterStyle() + if (draw.getZone().isHeaderActive()) { + draw.getZone().setZone(EditorZone.MAIN) + } evt.preventDefault() } else if (evt.key === KeyMap.TAB) { draw.insertElementList([{ @@ -268,4 +272,4 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) { }]) evt.preventDefault() } -} \ No newline at end of file +} diff --git a/src/editor/core/i18n/lang/en.json b/src/editor/core/i18n/lang/en.json index 52e860b..22ef881 100644 --- a/src/editor/core/i18n/lang/en.json +++ b/src/editor/core/i18n/lang/en.json @@ -61,5 +61,9 @@ "hour": "Hour", "minute": "Minute", "second": "Second" + }, + "global": { + "header": "Header", + "footer": "Footer" } -} \ No newline at end of file +} diff --git a/src/editor/core/i18n/lang/zh-CN.json b/src/editor/core/i18n/lang/zh-CN.json index 67be634..842ce41 100644 --- a/src/editor/core/i18n/lang/zh-CN.json +++ b/src/editor/core/i18n/lang/zh-CN.json @@ -61,5 +61,9 @@ "hour": "时", "minute": "分", "second": "秒" + }, + "global": { + "header": "页眉", + "footer": "页脚" } -} \ No newline at end of file +} diff --git a/src/editor/core/zone/Zone.ts b/src/editor/core/zone/Zone.ts index f4c3019..79d869e 100644 --- a/src/editor/core/zone/Zone.ts +++ b/src/editor/core/zone/Zone.ts @@ -1,10 +1,13 @@ import { EDITOR_PREFIX } from '../../dataset/constant/Editor' import { EditorZone } from '../../dataset/enum/Editor' +import { IEditorOption } from '../../interface/Editor' import { Draw } from '../draw/Draw' +import { I18n } from '../i18n/I18n' export class Zone { - private draw: Draw + private options: Required + private i18n: I18n private container: HTMLDivElement private currentZone: EditorZone @@ -12,6 +15,8 @@ export class Zone { constructor(draw: Draw) { this.draw = draw + this.i18n = draw.getI18n() + this.options = draw.getOptions() this.container = draw.getContainer() this.currentZone = EditorZone.MAIN this.headerIndicatorContainer = null @@ -40,24 +45,64 @@ export class Zone { }) // 页眉指示器 if (this.isHeaderActive()) { - this._drawHeaderZoneIndicator() + this.drawHeaderZoneIndicator() } else { this._clearHeaderZoneIndicator() } } - private _drawHeaderZoneIndicator() { + public drawHeaderZoneIndicator() { + this._clearHeaderZoneIndicator() + const { scale } = this.options this.headerIndicatorContainer = document.createElement('div') this.headerIndicatorContainer.classList.add(`${EDITOR_PREFIX}-header-indicator`) const pageList = this.draw.getPageList() const pageHeight = this.draw.getHeight() const pageGap = this.draw.getPageGap() const preY = pageHeight + pageGap + const headerHeight = this.draw.getHeader().getHeight() + const headerTop = (this.options.header?.top ?? 0) * scale + const margins = this.draw.getMargins() + for (let p = 0; p < pageList.length; p++) { const indicator = document.createElement('div') - indicator.innerText = `编辑页眉` - indicator.style.top = `${preY * p}px` + indicator.innerText = this.i18n.t('global.header') + document.body.appendChild(indicator) + const indicatorStyle = getComputedStyle(indicator) + indicator.style.top = `${preY * p + headerHeight + parseFloat(indicatorStyle.height) * scale}px` this.headerIndicatorContainer.append(indicator) + + // 绘制上，左，下，右边线 + + // 上边线 + const lineTop = document.createElement('span') + lineTop.classList.add(`${EDITOR_PREFIX}-header-indicator-border__top`) + lineTop.style.top = `${(preY * p + headerTop)}px` + lineTop.style.width = this.draw.getInnerWidth() + 'px' + lineTop.style.marginLeft = margins[3] + 'px' + this.headerIndicatorContainer.append(lineTop) + + // 左边线 + const lineLeft = document.createElement('span') + lineLeft.classList.add(`${EDITOR_PREFIX}-header-indicator-border__left`) + lineLeft.style.top = `${(preY * p + headerTop)}px` + lineLeft.style.height = `${headerHeight}px` + lineLeft.style.left = margins[3] + 'px' + this.headerIndicatorContainer.append(lineLeft) + + // 下边线 + const lineBottom = document.createElement('span') + lineBottom.classList.add(`${EDITOR_PREFIX}-header-indicator-border__bottom`) + lineBottom.style.top = `${(preY * p + headerHeight + headerTop)}px` + this.headerIndicatorContainer.append(lineBottom) + + // 右边线 + const lineRight = document.createElement('span') + lineRight.classList.add(`${EDITOR_PREFIX}-header-indicator-border__right`) + lineRight.style.top = `${(preY * p + headerTop)}px` + lineRight.style.height = `${headerHeight}px` + lineRight.style.left = `${(margins[3] + this.draw.getInnerWidth())}px` + this.headerIndicatorContainer.append(lineRight) } this.container.append(this.headerIndicatorContainer) } @@ -65,5 +110,4 @@ export class Zone { private _clearHeaderZoneIndicator() { this.headerIndicatorContainer?.remove() } - -} \ No newline at end of file +} diff --git a/src/main.ts b/src/main.ts index 6eed966..c6e0bf7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1182,4 +1182,4 @@ window.onload = function () { } ]) -} \ No newline at end of file +}