diff --git a/src/components/Mindmap/assistant.ts b/src/components/Mindmap/assistant.ts index f2631a3..2bfae46 100644 --- a/src/components/Mindmap/assistant.ts +++ b/src/components/Mindmap/assistant.ts @@ -4,7 +4,7 @@ import { getDataId, getGTransform, getPath } from './attribute' import * as d3 from './d3' import style from './css' import { Mdata, TwoNumber } from './interface' -import { selection, zoom } from './variable' +import { selection, zoom, zoomTransform } from './variable' import { afterOperation, mmdata } from './data' import { snapshot } from './state' import { gEle, svgEle, wrapperEle } from './variable/element' @@ -139,7 +139,7 @@ export const centerView = (): void => { zoom.translateTo(svg, 0 + data.width / 2, 0 + data.height / 2) } -/**e +/** * 缩放至合适大小并移动至全部可见 */ export const fitView = (): void => { @@ -158,6 +158,40 @@ export const fitView = (): void => { zoom.transform(svg, center) } +/** + * 新增节点被遮挡时,移动至可见 + */ +export const moveView = (): void => { + const { svg } = selection + // 得到d相对于视图左上角的坐标 + const gEle = document.querySelector(`g.node.${style.edited}`) + if (svg && gEle && svgEle.value) { + const { k } = zoomTransform.value + const gBCR = gEle.getBoundingClientRect() + const svgBCR = svgEle.value.getBoundingClientRect() + const gLeft = gBCR.x - svgBCR.x + const gRight = gLeft + gBCR.width + const gTop = gBCR.y - svgBCR.y + const gBottom = gTop + gBCR.height + let x = 0 + let y = 0 + + if (gLeft < 0) { + x = -gLeft / k + } else if (gRight > svgBCR.width) { + x = -(gRight - svgBCR.width) / k + } + + if (gTop < 0) { + y = -gTop / k + } else if (gBottom > svgBCR.height) { + y = -(gBottom - svgBCR.height) / k + } + + zoom.translateBy(svg, x, y) + } +} + /** * 按一定程度缩放 * @param flag - 为true时放大,false缩小 diff --git a/src/components/Mindmap/listener/listener.ts b/src/components/Mindmap/listener/listener.ts index ca078fe..5271d78 100644 --- a/src/components/Mindmap/listener/listener.ts +++ b/src/components/Mindmap/listener/listener.ts @@ -2,7 +2,7 @@ import style from '../css' import { ctm, editFlag, selection, textRectPadding, zoomTransform } from '../variable' import * as d3 from '../d3' import { Mdata } from '../interface' -import { fitView, getRelativePos, getSelectedGData, moveNode, scaleView, selectGNode } from '../assistant' +import { fitView, getRelativePos, getSelectedGData, moveNode, moveView, scaleView, selectGNode } from '../assistant' import { add, addParent, addSibling, changeLeft, collapse, del, expand, mmdata, moveChild, moveSibling, rename } from '../data' import { svgEle, gEle, foreignDivEle, wrapperEle, foreignEle } from '../variable/element' import emitter from '@/mitt' @@ -38,6 +38,7 @@ export const onSelect = (e: MouseEvent, d: Mdata): void => { } /** + * 进入编辑状态 * @param this - gText */ export function onEdit (this: SVGGElement, _e: MouseEvent, d: Mdata): void { @@ -55,6 +56,7 @@ export function onEdit (this: SVGGElement, _e: MouseEvent, d: Mdata): void { div.textContent = d.name div.focus() getSelection()?.selectAllChildren(div) + moveView() } }