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..b4fad32 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 = {
@@ -40,7 +39,7 @@ class Demo extends React.Component {
{
points: [`${sy}${sx}`],
overflow,
- useCssTransform: true,
+ // useCssTransform: true,
},
);
};
@@ -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/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 = (
+
+);
+
+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 b6bf82a..8accd8f 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',
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/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..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;
}
@@ -295,12 +296,14 @@ function setTransform(elem, offset) {
const originalOffset = getOffset(elem);
const originalXY = getTransformXY(elem);
const resultXY = { x: originalXY.x, y: originalXY.y };
+
if ('left' in offset) {
resultXY.x = originalXY.x + offset.left - originalOffset.left;
}
if ('top' in offset) {
- resultXY.y = originalXY.y + offset.top - originalOffset.top;
+ resultXY.y = originalXY.y + offset.top - originalOffset.top ;
}
+
setTransformXY(elem, resultXY);
}
@@ -562,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;