diff --git a/src/editor/assets/css/zone/zone.css b/src/editor/assets/css/zone/zone.css index a06e4a2..b16d619 100644 --- a/src/editor/assets/css/zone/zone.css +++ b/src/editor/assets/css/zone/zone.css @@ -4,7 +4,7 @@ font-size: 12px; background: rgb(218 231 252); position: absolute; - transform: translate(10px, 10px); + transform-origin: 0 0; } .ce-header-indicator-border__top, @@ -30,4 +30,4 @@ .ce-header-indicator-border__right { border-right: 2px dashed rgb(238, 238, 238); -} +} \ No newline at end of file diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 7a89b26..86f7545 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -264,10 +264,6 @@ export class Draw { return bottom * scale } - public getHeaderTop(): number { - return this.options.headerTop * this.options.scale - } - public getMarginIndicatorSize(): number { return this.options.marginIndicatorSize * this.options.scale } @@ -1363,7 +1359,7 @@ export class Draw { this.tableTool.render() } // 页眉指示器重新渲染 - if (isCompute && !this.isReadonly() && this.zone.isHeaderActive()) { + if (isCompute && this.zone.isHeaderActive()) { this.zone.drawHeaderZoneIndicator() } // 页面尺寸改变 @@ -1384,4 +1380,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 1a1b4c0..75fe92c 100644 --- a/src/editor/core/event/handlers/click.ts +++ b/src/editor/core/event/handlers/click.ts @@ -11,8 +11,6 @@ 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 } @@ -106,4 +104,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 beacbe9..b1b6f78 100644 --- a/src/editor/core/event/handlers/keydown.ts +++ b/src/editor/core/event/handlers/keydown.ts @@ -260,9 +260,12 @@ 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) + // 退出页眉编辑 + const zoneManager = draw.getZone() + if (zoneManager.isHeaderActive()) { + zoneManager.setZone(EditorZone.MAIN) } evt.preventDefault() } else if (evt.key === KeyMap.TAB) { @@ -272,4 +275,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 22ef881..e3c4f90 100644 --- a/src/editor/core/i18n/lang/en.json +++ b/src/editor/core/i18n/lang/en.json @@ -62,8 +62,8 @@ "minute": "Minute", "second": "Second" }, - "global": { + "frame": { "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 842ce41..c81bc3d 100644 --- a/src/editor/core/i18n/lang/zh-CN.json +++ b/src/editor/core/i18n/lang/zh-CN.json @@ -62,8 +62,8 @@ "minute": "分", "second": "秒" }, - "global": { + "frame": { "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 79d869e..7f9a2c0 100644 --- a/src/editor/core/zone/Zone.ts +++ b/src/editor/core/zone/Zone.ts @@ -5,6 +5,9 @@ import { Draw } from '../draw/Draw' import { I18n } from '../i18n/I18n' export class Zone { + + private readonly INDICATOR_TITLE_TRANSLATE = [20, 5] + private draw: Draw private options: Required private i18n: I18n @@ -54,54 +57,56 @@ export class Zone { public drawHeaderZoneIndicator() { this._clearHeaderZoneIndicator() const { scale } = this.options + const [offsetX, offsetY] = this.INDICATOR_TITLE_TRANSLATE this.headerIndicatorContainer = document.createElement('div') this.headerIndicatorContainer.classList.add(`${EDITOR_PREFIX}-header-indicator`) const pageList = this.draw.getPageList() + const margins = this.draw.getMargins() + const innerWidth = this.draw.getInnerWidth() 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() + const header = this.draw.getHeader() + const headerHeight = header.getHeight() + const headerTop = header.getHeaderTop() for (let p = 0; p < pageList.length; p++) { - const indicator = document.createElement('div') - 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 startY = preY * p + headerTop + const indicatorTitle = document.createElement('div') + // 标题 + indicatorTitle.innerText = this.i18n.t('frame.header') + indicatorTitle.style.top = `${startY + headerHeight}px` + indicatorTitle.style.transform = `translate(${offsetX * scale}px, ${offsetY * scale}px) scale(${scale})` + this.headerIndicatorContainer.append(indicatorTitle) // 上边线 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' + lineTop.style.top = `${startY}px` + lineTop.style.width = `${innerWidth}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.top = `${startY}px` lineLeft.style.height = `${headerHeight}px` - lineLeft.style.left = margins[3] + '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` + lineBottom.style.top = `${startY + headerHeight}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.top = `${startY}px` lineRight.style.height = `${headerHeight}px` - lineRight.style.left = `${(margins[3] + this.draw.getInnerWidth())}px` + lineRight.style.left = `${margins[3] + innerWidth}px` this.headerIndicatorContainer.append(lineRight) } this.container.append(this.headerIndicatorContainer) @@ -109,5 +114,6 @@ export class Zone { private _clearHeaderZoneIndicator() { this.headerIndicatorContainer?.remove() + this.headerIndicatorContainer = null } -} +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index e7ee43a..f7d7041 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -100,7 +100,6 @@ export default class Editor { tdPadding: 5, defaultTdHeight: 40, defaultHyperlinkColor: '#0000FF', - headerTop: 50, paperDirection: PaperDirection.VERTICAL, inactiveAlpha: 0.6, ...options, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 624b793..178f983 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -46,7 +46,6 @@ export interface IEditorOption { tdPadding?: number; defaultTdHeight?: number; defaultHyperlinkColor?: string; - headerTop?: number; paperDirection?: PaperDirection; inactiveAlpha?: number; header?: IHeader;