MCPcopy Create free account
hub / github.com/MankaiHuang/screen-visualization / iframeMove

Function iframeMove

src/pages/Workspace/index.jsx:403–441  ·  view source on GitHub ↗
(e)

Source from the content-addressed store, hash-verified

401 sendMsg('blur')
402 }
403 function iframeMove(e) {
404 // 拖拽画布移动
405 const posix = { x: e.clientX, y: e.clientY }
406 isMove = true
407 const left = getElementIdProperty('work-frame', 'left')
408 const top = getElementIdProperty('work-frame', 'top')
409 e.currentTarget.onmousemove = ev => {
410 if (isMove && window.document.activeElement.tagName !== "IFRAME" && !ev?.target?.className.split(' ').includes('ant-slider')) { // 拖拽进度条和iframe都不需要移动
411 requestAnimationFrame(() => {
412 let endLeft = left + (ev.clientX - posix.x);
413 let endTop = top + (ev.clientY - posix.y)
414 if (endLeft <= 30) { // 到达边界时
415 endLeft = 30
416 }
417 if (endTop <= 30) {
418 endTop = 30
419 }
420 const nowLeft = getElementIdProperty('work-frame', 'left')
421 const nowTop = getElementIdProperty('work-frame', 'top')
422 const nowWidth = getElementIdProperty('work-frame', 'width')
423 const nowHeight = getElementIdProperty('work-frame', 'height')
424 const oldWidth = getElementIdProperty('ruler-top', 'width')
425 const oldHeight = getElementIdProperty('ruler-iframe', 'height')
426 rulerRef.current.changeRulerLength(nowWidth + nowLeft, nowHeight + nowTop) // 移动编辑器 标尺自动增大
427 const rulerHorZoom = Math.ceil(oldWidth > nowWidth + nowLeft ? (nowWidth + nowLeft) / oldWidth : oldWidth / (nowWidth + nowLeft)) // 移动的长度和之前的长度占比
428 const rulerVerZoom = Math.ceil(oldHeight > nowHeight + nowTop ? (nowHeight + nowTop) / oldHeight : oldHeight / (nowHeight + nowTop))
429 rulerRef.current.changeRulerMoveZoom(rulerHorZoom, rulerVerZoom) // 移动改变两根标尺的缩放 // 保证增大了标尺长度 刻度间距不变
430 rulerRef.current.rulerScroll(endLeft, endTop) // 让编辑器的位置保持在 0 0
431 document.getElementById('work-frame').style.left = `${endLeft}px`
432 document.getElementById('work-frame').style.top = `${endTop}px`
433 })
434 } else {
435 isMove = false;
436 }
437 }
438 e.target.onmouseup = () => {
439 isMove = false
440 }
441 }
442
443 const iframeUrl =
444 process.env.NODE_ENV == 'development'

Callers

nothing calls this directly

Calls 1

getElementIdPropertyFunction · 0.85

Tested by

no test coverage detected