From dfaab23f19766d236e0a91de82c854f9d5c75a68 Mon Sep 17 00:00:00 2001 From: houlinjiang Date: Thu, 22 Dec 2022 18:36:49 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fixbug:=20=E9=A1=B5=E9=9D=A2=E6=9C=89zoom?= =?UTF-8?q?=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F=E6=97=B6=EF=BC=8C=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E5=AE=9A=E4=BD=8D=E4=BD=8D=E7=BD=AE=E4=B8=8D=E7=AC=A6?= =?UTF-8?q?=E5=90=88=E9=A2=84=E6=9C=9F=20#55?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- examples/point.js | 4 ++-- examples/simple.js | 4 ++++ src/propertyUtils.js | 1 + src/utils.js | 8 ++++++-- 5 files changed, 15 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 588c04c..4527890 100644 --- a/README.md +++ b/README.md @@ -84,13 +84,13 @@ domAlign(sourceNode, targetNode, alignConfig); offset Number[2] - offset source node by offset[0] in x and offset[1] in y. + offset source node by offset[0] in x and offset[1] in y. If offset contains percentage string value, it is relative to sourceNode region. targetOffset Number[2] - offset target node by offset[0] in x and offset[1] in y. + offset target node by offset[0] in x and offset[1] in y. If targetOffset contains percentage string value, it is relative to targetNode region. diff --git a/examples/point.js b/examples/point.js index c29c6ee..454c867 100644 --- a/examples/point.js +++ b/examples/point.js @@ -1,7 +1,6 @@ import React from 'react'; import { alignPoint } from '../src'; import ReactDOM from 'react-dom'; -import createReactClass from 'create-react-class'; class Demo extends React.Component { state = { @@ -99,5 +98,6 @@ class Demo extends React.Component { ); } } - +document.body.style.transform = 'scale(0.8)' +document.body.style.transformOrigin = 'top left' ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/simple.js b/examples/simple.js index b6bf82a..a1a5f0c 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -110,6 +110,7 @@ const div = ( style={{ width: 400, height: 400, + marginLeft: 100, overflow: 'auto', border: '1px solid green', position: 'relative', @@ -154,3 +155,6 @@ const div = ( ); ReactDOM.render(div, $id('__react-content')); + +document.body.style.transform = 'scale(0.9)' +document.body.style.transformOrigin = 'top left' diff --git a/src/propertyUtils.js b/src/propertyUtils.js index bd01d52..e30ea26 100644 --- a/src/propertyUtils.js +++ b/src/propertyUtils.js @@ -57,6 +57,7 @@ export function getTransitionProperty(node) { return node.style.transitionProperty || node.style[getTransitionName()]; } +// 获取偏移量 export function getTransformXY(node) { const style = window.getComputedStyle(node, null); const transform = diff --git a/src/utils.js b/src/utils.js index e61e4e8..bb9f14d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -295,11 +295,15 @@ function setTransform(elem, offset) { const originalOffset = getOffset(elem); const originalXY = getTransformXY(elem); const resultXY = { x: originalXY.x, y: originalXY.y }; + + // https://github.com/yiminghe/dom-align/issues/55 + // 当元素的 scale 不为 1 就距离会等比例缩放 + const scale = elem.getBoundingClientRect().width / elem.clientWidth; if ('left' in offset) { - resultXY.x = originalXY.x + offset.left - originalOffset.left; + resultXY.x = originalXY.x + (offset.left - originalOffset.left) / scale; } if ('top' in offset) { - resultXY.y = originalXY.y + offset.top - originalOffset.top; + resultXY.y = originalXY.y + (offset.top - originalOffset.top ) / scale; } setTransformXY(elem, resultXY); } From 6b3a35dbc32663884a6a3bddc88cdad69a684abf Mon Sep 17 00:00:00 2001 From: houlinjiang Date: Fri, 23 Dec 2022 20:17:19 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fixbug:=20=E5=BD=93=20userCssTransform=20?= =?UTF-8?q?=E4=B8=BA=20false=20=E6=97=B6,=E5=85=83=E7=B4=A0=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E6=B2=A1=E6=9C=89=E6=A0=A1=E5=87=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/point.js | 2 +- src/align/alignPoint.js | 5 +++-- src/utils.js | 18 +++++++++++------- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/examples/point.js b/examples/point.js index 454c867..b4fad32 100644 --- a/examples/point.js +++ b/examples/point.js @@ -39,7 +39,7 @@ class Demo extends React.Component { { points: [`${sy}${sx}`], overflow, - useCssTransform: true, + // useCssTransform: true, }, ); }; diff --git a/src/align/alignPoint.js b/src/align/alignPoint.js index 7f5c5a0..7f8d202 100644 --- a/src/align/alignPoint.js +++ b/src/align/alignPoint.js @@ -30,9 +30,10 @@ function alignPoint(el, tgtPoint, align) { pageY = scrollY + tgtPoint.clientY; } + const scale = utils.getScale(el); const tgtRegion = { - left: pageX, - top: pageY, + left: pageX / scale, + top: pageY / scale, width: 0, height: 0, }; diff --git a/src/utils.js b/src/utils.js index bb9f14d..14a8b46 100644 --- a/src/utils.js +++ b/src/utils.js @@ -111,8 +111,9 @@ function getOffset(el) { const pos = getClientPosition(el); const doc = el.ownerDocument; const w = doc.defaultView || doc.parentWindow; - pos.left += getScrollLeft(w); - pos.top += getScrollTop(w); + const scale = utils.getScale(el); + pos.left = pos.left / scale + getScrollLeft(w); + pos.top = pos.top / scale + getScrollTop(w); return pos; } @@ -296,15 +297,13 @@ function setTransform(elem, offset) { const originalXY = getTransformXY(elem); const resultXY = { x: originalXY.x, y: originalXY.y }; - // https://github.com/yiminghe/dom-align/issues/55 - // 当元素的 scale 不为 1 就距离会等比例缩放 - const scale = elem.getBoundingClientRect().width / elem.clientWidth; if ('left' in offset) { - resultXY.x = originalXY.x + (offset.left - originalOffset.left) / scale; + resultXY.x = originalXY.x + offset.left - originalOffset.left; } if ('top' in offset) { - resultXY.y = originalXY.y + (offset.top - originalOffset.top ) / scale; + resultXY.y = originalXY.y + offset.top - originalOffset.top ; } + setTransformXY(elem, resultXY); } @@ -566,6 +565,11 @@ function mix(to, from) { } const utils = { + getScale(el) { + // https://github.com/yiminghe/dom-align/issues/55 + // 当元素的 scale 不为 1 就距离会等比例缩放 + return el.getBoundingClientRect().width / el.clientWidth; + }, getWindow(node) { if (node && node.document && node.setTimeout) { return node; From 6d38d7c517aac55d07ab7efc563b9b62198461e5 Mon Sep 17 00:00:00 2001 From: houlinjiang Date: Wed, 22 Feb 2023 11:14:26 +0800 Subject: [PATCH 3/3] add scale example --- examples/scale.html | 0 examples/scale.js | 160 ++++++++++++++++++++++++++++++++++++++++++++ examples/simple.js | 3 - 3 files changed, 160 insertions(+), 3 deletions(-) create mode 100644 examples/scale.html create mode 100644 examples/scale.js diff --git a/examples/scale.html b/examples/scale.html new file mode 100644 index 0000000..e69de29 diff --git a/examples/scale.js b/examples/scale.js new file mode 100644 index 0000000..a1a5f0c --- /dev/null +++ b/examples/scale.js @@ -0,0 +1,160 @@ +import React from 'react'; +import domAlign from 'dom-align'; +import ReactDOM from 'react-dom'; +import createReactClass from 'create-react-class'; + +function $id(id) { + return document.getElementById(id); +} + +function $val(sel) { + sel = $id(sel); + return sel.value; +} + +function align() { + domAlign($id('source'), $id('target'), { + points: [ + $val('source_align_tb') + $val('source_align_lr'), + $val('target_align_tb') + $val('target_align_lr'), + ], + offset: [$val('offset1'), $val('offset2')], + targetOffset: [$val('targetOffset1'), $val('targetOffset2')], + overflow: { + adjustX: $id('adjustX').checked, + adjustY: $id('adjustY').checked, + }, + useCssRight: $id('useCssRight').checked, + useCssBottom: $id('useCssBottom').checked, + useCssTransform: $id('useCssTransform').checked, + + ignoreShake: $id('ignoreShake').checked, + }); +} + +const div = ( +
+

dom-align

+ +
+ source: + + +   target: + + +   offset: [ + + , + + ]   targetOffset: [ + + , + ] +   overflow:   + +   + +   + +   + +   + +   + +   + +
+
+
+ target node +
+
+
+ source node +
+
+
+
+
+
+
+
+
+
+); + +ReactDOM.render(div, $id('__react-content')); + +document.body.style.transform = 'scale(0.9)' +document.body.style.transformOrigin = 'top left' diff --git a/examples/simple.js b/examples/simple.js index a1a5f0c..8accd8f 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -155,6 +155,3 @@ const div = ( ); ReactDOM.render(div, $id('__react-content')); - -document.body.style.transform = 'scale(0.9)' -document.body.style.transformOrigin = 'top left'