JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-21 09:19:28 +08:00
Code Issues Projects Releases Wiki Activity

feat(stage): 增加对齐线

Browse Source
This commit is contained in:
roymondchen 2022-05-31 11:41:32 +08:00 committed by jia000
parent 26081ea5cc
commit 67e2ba3825
1 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/stage/src/StageDragResize.ts
View File

@ -25,7 +25,7 @@ import MoveableHelper from 'moveable-helper';
import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
import StageCore from './StageCore';
import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
import type { Offset, SortEventData, StageDragResizeConfig } from './types';
import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
/** 拖动状态 */
@ -166,11 +166,38 @@ export default class StageDragResize extends EventEmitter {
this.updateDragEl(el);
this.setElementGuidelines(el);
this.moveableOptions = this.getOptions({
target: this.dragEl,
});
}
private setElementGuidelines(el: HTMLElement) {
const nodes = el.parentElement?.children || [];
this.elementGuidelines.forEach((node) => {
node.remove();
});
this.elementGuidelines = [];
if (this.mode === Mode.ABSOLUTE) {
const frame = document.createDocumentFragment();
for (const node of nodes) {
const { width, height } = node.getBoundingClientRect();
if (node === el) continue;
const { left, top } = getOffset(node as HTMLElement);
const elementGuideline = document.createElement('div');
elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
this.elementGuidelines.push(elementGuideline);
frame.append(elementGuideline);
}
this.container.append(frame);
}
}
private initMoveable() {
this.moveable?.destroy();
@ -288,19 +315,6 @@ export default class StageDragResize extends EventEmitter {
});
}
private getSnapElements(runtime: Runtime, el?: HTMLElement): HTMLElement[] {
const { renderer, mask } = this.core;
const getSnapElements =
runtime?.getSnapElements ||
(() => {
const doc = renderer.contentWindow?.document;
return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
});
return getSnapElements(el).filter(
(element) => element !== this.target && !this.target?.contains(element) && element !== mask.page,
);
}
private sort(): void {
if (!this.target || !this.ghostEl) throw new Error('未知错误');
const { top } = this.ghostEl.getBoundingClientRect();