fixbug: 页面有zoom放大缩小时，自动定位位置不符合预期 #55

README.md

@@ -84,13 +84,13 @@ domAlign(sourceNode, targetNode, alignConfig);
       <tr>
           <td>offset</td>
           <td>Number[2]</td>
-          <td>offset source node by offset[0] in x and offset[1] in y. 
+          <td>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.</td>
       </tr>
       <tr>
           <td>targetOffset</td>
           <td>Number[2]</td>
-          <td>offset target node by offset[0] in x and offset[1] in y. 
+          <td>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.</td>
       </tr>
       <tr>

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(<Demo />, document.getElementById('__react-content'));

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 = (
+  <div>
+    <h1>dom-align</h1>
+
+    <div>
+      source:
+      <select id="source_align_tb">
+        <option value="t">t</option>
+        <option value="c">c</option>
+        <option value="b">b</option>
+      </select>
+      <select id="source_align_lr">
+        <option value="l">l</option>
+        <option value="c">c</option>
+        <option value="r">r</option>
+      </select>
+      &nbsp; target:
+      <select id="target_align_tb">
+        <option value="t">t</option>
+        <option value="c">c</option>
+        <option value="b">b</option>
+      </select>
+      <select id="target_align_lr">
+        <option value="l">l</option>
+        <option value="c">c</option>
+        <option value="r">r</option>
+      </select>
+      &nbsp; offset: [
+      <input type="offset" id="offset1" defaultValue="0" size="3" />
+      ,
+      <input type="offset" id="offset2" defaultValue="0" size="3" />
+      ] &nbsp; targetOffset: [
+      <input type="offset" id="targetOffset1" defaultValue="0" size="3" />
+      ,
+      <input type="offset" id="targetOffset2" defaultValue="0" size="3" />]
+      &nbsp; overflow: &nbsp;
+      <label>
+        adjustX:
+        <input type="checkbox" id="adjustX" />
+      </label>
+      &nbsp;
+      <label>
+        adjustY:
+        <input type="checkbox" id="adjustY" />
+      </label>
+      &nbsp;
+      <label>
+        useCssBottom:
+        <input type="checkbox" id="useCssBottom" />
+      </label>
+      &nbsp;
+      <label>
+        useCssRight:
+        <input type="checkbox" id="useCssRight" />
+      </label>
+      &nbsp;
+      <label>
+        useCssTransform:
+        <input
+          type="checkbox"
+          id="useCssTransform"
+          defaultChecked={!!window.TransitionEvent}
+        />
+      </label>
+      &nbsp;
+      <label>
+        ignoreShake:
+        <input type="checkbox" id="ignoreShake" />
+      </label>
+      &nbsp;
+      <button id="align" onClick={align}>
+        align
+      </button>
+      <br />
+      <div
+        style={{
+          width: 400,
+          height: 400,
+          marginLeft: 100,
+          overflow: 'auto',
+          border: '1px solid green',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            background: 'yellow',
+            width: 240,
+            height: 240,
+            margin: 50,
+          }}
+          id="target"
+        >
+          target node
+        </div>
+        <div style={{ width: 1000, height: 1000 }} />
+        <div
+          style={{
+            background: 'red',
+            width: 80,
+            height: 80,
+            left: 0,
+            top: 0,
+            position: 'absolute',
+            transition: 'all 0.5s',
+            overflowY: 'auto',
+          }}
+          id="source"
+        >
+          source node
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+          <br />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+ReactDOM.render(div, $id('__react-content'));
+
+document.body.style.transform = 'scale(0.9)'
+document.body.style.transformOrigin = 'top left'

examples/simple.js

@@ -110,6 +110,7 @@ const div = (
         style={{
           width: 400,
           height: 400,
+          marginLeft: 100,
           overflow: 'auto',
           border: '1px solid green',
           position: 'relative',

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,
   };

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 =

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;