refactor: rename scrollX/scrollY to scrollLeft/scrollTop

packages/core/__tests__/lib/point.test.ts

@@ -15,15 +15,15 @@ describe('@idraw/core', () => {
   };
   const transform = {
     scale: 2,
-    scrollX: -200,
-    scrollY: -100,
+    scrollLeft: 200,
+    scrollTop: 100,
   };
   const mount = document.querySelector('#mount') as HTMLDivElement;
   const idraw = new IDraw(mount, opts);
 
   idraw.scale(transform.scale);
-  idraw.scrollX(transform.scrollX);
-  idraw.scrollY(transform.scrollY);
+  idraw.scrollLeft(transform.scrollLeft);
+  idraw.scrollTop(transform.scrollTop);
 
   const p1 = {x: 400, y: 300};
   const p2 = {x: 300, y: 200};

packages/core/examples/features/lib/main.js

@@ -9,8 +9,8 @@ const mount = document.querySelector('#mount');
 
 const defaultConf = {
   scale: 1.5,
-  scrollX: 0,
-  scrollY: 0,
+  scrollLeft: 100,
+  scrollTop: 50,
 };
 const core = new Core(mount, {
   width: 600,

packages/core/examples/features/lib/scroll.js

@@ -1,31 +1,31 @@
-const inputX = document.querySelector('#scrollX');
-const inputY = document.querySelector('#scrollY');
+const inputX = document.querySelector('#scrollLeft');
+const inputY = document.querySelector('#scrollTop');
 let hasInited = false;
 
 export function doScroll(core, conf = {}) {
   if (hasInited === true) return;
   if (!(inputY && inputX)) return;
   
-  if (conf.scrollX >= 0) {
-    inputX.value = conf.scrollX;
-    core.scrollX(conf.scrollX);
+  if (conf.scrollLeft >= 0) {
+    inputX.value = conf.scrollLeft;
+    core.scrollLeft(conf.scrollLeft);
   }
 
-  if (conf.scrollY >= 0) {
-    inputY.value = conf.scrollY;
-    core.scrollY(conf.scrollY);
+  if (conf.scrollTop >= 0) {
+    inputY.value = conf.scrollTop;
+    core.scrollTop(conf.scrollTop);
   }
 
   inputX.addEventListener('change', () => {
     const val = inputX.value * 1;
     if (val >= 0 || val < 0) {
-      core.scrollX(val);
+      core.scrollLeft(val);
     }
   });
   inputY.addEventListener('change', () => {
     const val = inputY.value * 1;
     if (val >= 0 || val < 0) {
-      core.scrollY(val);
+      core.scrollTop(val);
     }
   });
   hasInited = true;

packages/core/examples/features/main.html

@@ -20,10 +20,10 @@
           <div class="transform">
             <span>scale:</span>
             <input id="scale" type="number" value="1"/>
-            <span>scrollX:</span>
-            <input id="scrollX" type="number" value="0"/>
-            <span>scrollY:</span>
-            <input id="scrollY" type="number" value="0"/>
+            <span>scrollLeft:</span>
+            <input id="scrollLeft" type="number" value="0"/>
+            <span>scrollTop:</span>
+            <input id="scrollTop" type="number" value="0"/>
           </div>
         </div>
         <div class="col center"></div>

packages/core/examples/test/scale-002.html

@@ -35,8 +35,8 @@
           devicePixelRatio: 4
         });
       core.setData(data);
-      core.scrollX(-600);
-      core.scrollY(-400);
+      core.scrollLeft(600);
+      core.scrollTop(400);
       const result = core.scale(0.5);
       console.log('scale: ', result);
     </script>

packages/core/examples/test/scale-003.html

@@ -34,10 +34,10 @@
         devicePixelRatio: 4
       });
       core.setData(data);
-      core.scrollX(400);
-      core.scrollY(400);
+      core.scrollLeft(400);
+      core.scrollTop(400);
       const result = core.scale(0.8);
-      console.log('scale: ', result);
+      // console.log('scale: ', result);
     </script>
   </body>
 </html>

packages/core/src/index.ts

@@ -154,15 +154,15 @@ class Core {
     return screen;
   }
 
-  scrollX(x: number): TypeScreenContext {
-    const screen = this[_board].scrollX(x);
+  scrollLeft(left: number): TypeScreenContext {
+    const screen = this[_board].scrollX(0 - left);
     this[_draw]();
     this[_emitChangeScreen]();
     return screen;
   }
 
-  scrollY(y: number): TypeScreenContext {
-    const screen = this[_board].scrollY(y);
+  scrollTop(top: number): TypeScreenContext {
+    const screen = this[_board].scrollY(0 - top);
     this[_draw]();
     this[_emitChangeScreen]();
     return screen;