From 8e2d83fec9e8b4871cee066b641e3441eddb619a Mon Sep 17 00:00:00 2001 From: roymondchen Date: Mon, 28 Mar 2022 19:19:07 +0800 Subject: [PATCH] =?UTF-8?q?fix(stage):=20=E6=B7=B7=E5=90=88=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E4=B8=8B=E6=8B=96=E5=8A=A8=E9=94=99=E4=B9=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/stage/src/StageDragResize.ts | 53 +++++++++++++-------------- packages/stage/src/StageMask.ts | 18 +-------- packages/stage/src/util.ts | 19 +++++++++- 3 files changed, 45 insertions(+), 45 deletions(-) diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts index 64c18419..26d4d196 100644 --- a/packages/stage/src/StageDragResize.ts +++ b/packages/stage/src/StageDragResize.ts @@ -65,13 +65,12 @@ export default class StageDragResize extends EventEmitter { */ public async select(el: HTMLElement, event?: MouseEvent): Promise { this.target = el; + this.target.style.overflow = 'hidden'; this.mode = getMode(el); this.destroyDragEl(); this.destroyGhostEl(); - if (this.mode !== Mode.ABSOLUTE) { - this.dragEl = this.generateDragEl(el); - } + this.dragEl = this.generateDragEl(el); this.moveableOptions = await this.getOptions({ target: this.dragEl || this.target, @@ -151,31 +150,31 @@ export default class StageDragResize extends EventEmitter { } }) .on('resize', ({ width, height, drag }) => { - if (!this.moveable || !this.target) return; + if (!this.moveable || !this.target || !this.dragEl) return; + const { beforeTranslate } = drag; frame.translate = beforeTranslate; this.dragStatus = ActionStatus.ING; this.target.style.width = `${width}px`; this.target.style.height = `${height}px`; + this.dragEl.style.width = `${width}px`; + this.dragEl.style.height = `${height}px`; // 流式布局 - if (this.mode === Mode.SORTABLE && this.ghostEl) { - this.target.style.top = '0'; + if (this.mode === Mode.SORTABLE) { + this.dragEl.style.top = `${beforeTranslate[1]}px`; + this.target.style.top = `0px`; return; } - this.target.style.left = `${beforeTranslate[0]}px`; - this.target.style.top = `${beforeTranslate[1]}px`; + this.dragEl.style.left = `${beforeTranslate[0]}px`; + this.dragEl.style.top = `${beforeTranslate[1]}px`; - if (this.dragEl) { - this.dragEl.style.width = `${width}px`; - this.dragEl.style.height = `${height}px`; + const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] }); - const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] }); - this.dragEl.style.left = `${offset.left}px`; - this.dragEl.style.top = `${offset.top}px`; - } + this.target.style.left = `${offset.left}px`; + this.target.style.top = `${offset.top}px`; }) .on('resizeEnd', () => { this.dragStatus = ActionStatus.END; @@ -197,26 +196,23 @@ export default class StageDragResize extends EventEmitter { } }) .on('drag', ({ left, top }) => { - if (!this.target) return; + if (!this.target || !this.dragEl) return; this.dragStatus = ActionStatus.ING; const offset = getAbsolutePosition(this.target, { left, top }); // 流式布局 - if (this.ghostEl && this.dragEl) { + if (this.ghostEl) { this.dragEl.style.top = `${top}px`; this.ghostEl.style.top = `${offset.top}px`; return; } - // 固定布局 - if (this.dragEl) { - this.dragEl.style.left = `${left}px`; - this.dragEl.style.top = `${top}px`; - } + this.dragEl.style.left = `${left}px`; + this.dragEl.style.top = `${top}px`; - this.target.style.left = `${left}px`; - this.target.style.top = `${top}px`; + this.target.style.left = `${offset.left}px`; + this.target.style.top = `${offset.top}px`; }) .on('dragEnd', () => { // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件 @@ -312,12 +308,13 @@ export default class StageDragResize extends EventEmitter { this.destroyDragEl(); } - const { left, top, width, height } = el.getBoundingClientRect(); + const { width, height } = el.getBoundingClientRect(); + const offset = getOffset(el); const dragEl = globalThis.document.createElement('div'); dragEl.style.cssText = ` position: absolute; - left: ${left}px; - top: ${top}px; + left: ${offset.left}px; + top: ${offset.top}px; width: ${width}px; height: ${height}px; `; @@ -377,7 +374,7 @@ export default class StageDragResize extends EventEmitter { if (fontSize) { const times = globalThis.parseFloat(fontSize) / 100; - return value / times; + return (value / times).toFixed(2); } return value; diff --git a/packages/stage/src/StageMask.ts b/packages/stage/src/StageMask.ts index fd9623c2..785fad51 100644 --- a/packages/stage/src/StageMask.ts +++ b/packages/stage/src/StageMask.ts @@ -20,7 +20,7 @@ import { Mode, MouseButton, ZIndex } from './const'; import Rule from './Rule'; import type StageCore from './StageCore'; import type { StageMaskConfig } from './types'; -import { createDiv, getScrollParent, isFixed } from './util'; +import { createDiv, getScrollParent, isFixedParent } from './util'; const wrapperClassName = 'editor-mask-wrapper'; @@ -150,21 +150,7 @@ export default class StageMask extends Rule { } public setLayout(el: HTMLElement): void { - let fixed = false; - let dom = el; - while (dom) { - fixed = isFixed(dom); - if (fixed) { - break; - } - const { parentElement } = dom; - if (!parentElement || parentElement.tagName === 'BODY') { - break; - } - dom = parentElement; - } - - this.setMode(fixed ? Mode.FIXED : Mode.ABSOLUTE); + this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE); } /** diff --git a/packages/stage/src/util.ts b/packages/stage/src/util.ts index 626c7fd3..7a75c47d 100644 --- a/packages/stage/src/util.ts +++ b/packages/stage/src/util.ts @@ -108,8 +108,25 @@ export const isFixed = (el?: HTMLElement): boolean => { return getComputedStyle(el).position === 'fixed'; }; +export const isFixedParent = (el: HTMLElement) => { + let fixed = false; + let dom = el; + while (dom) { + fixed = isFixed(dom); + if (fixed) { + break; + } + const { parentElement } = dom; + if (!parentElement || parentElement.tagName === 'BODY') { + break; + } + dom = parentElement; + } + return fixed; +}; + export const getMode = (el: HTMLElement): Mode => { - if (isFixed(el)) return Mode.FIXED; + if (isFixedParent(el)) return Mode.FIXED; if (isStatic(el) || isRelative(el)) return Mode.SORTABLE; return Mode.ABSOLUTE; };