to:sync

static/js/lib/common/MyUtils.js

@@ -302,9 +302,8 @@ export class MyUtils {
     }
 
 
-    RefreshBodyFrontSize() {
+    RefreshEditFrontSize() {
         let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
-        let defaultFrontSize = window.myEdit.ctx.bodyFrontSize;
         if (!dpr) {
             //devicePixelRatio这个属性是可以获取到设备的dpr
             let devicePixelRatio = win.devicePixelRatio;
@@ -325,14 +324,14 @@ export class MyUtils {
             }
         }
 
+        let myEditFrontSize = document.getElementById("noteshare");
         if (document.documentElement.clientWidth <= 720) {
-            document.body.style.fontSize = defaultFrontSize + 'px';
+            myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize + 'px';
         } else {
-            document.body.style.fontSize = defaultFrontSize * dpr + 'px';
+            myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px';
         }
 
-
+        console.log("body-frontSize: ", myEditFrontSize.style.fontSize);
-        console.log("body-frontSize: ", document.body.style.fontSize);
     }
 
     /**

static/js/lib/event/MyEventListener.js

@@ -63,11 +63,11 @@ export class MyEventListener {
     }
 
     /**
-     * 窗口撤销事件
+     * 全屏 鼠标按下 或者 手指按下事件
      * @param e
      * @constructor
      */
-    WindowsKeydownHandle(e) {
+    WindowsKeydownOrTouchendHandle(e) {
         const event = window.myEdit.utils.ParseEvent(e);
         const keyCode = window.myEdit.utils.GetKeyCode(event);
         const metaKey = event.metaKey;
@@ -76,6 +76,7 @@ export class MyEventListener {
         testDiv.innerText = "键盘输入: keyCode:" + keyCode +
             "\nmetaKey:" + metaKey;
 
+        //支持全屏撤销
         if (metaKey && keyCode === 90) {
             window.myEdit.biz.cancelHandle(event);
         }
@@ -128,11 +129,11 @@ export class MyEventListener {
     }
 
     /**
-     * 监听鼠标抬起事件
+     * 监听鼠标抬起 或者手指抬起 事件
      * @param e
      * @constructor
      */
-    MouseUp(e) {
+    MouseUpOrTouchend(e) {
         let styleUtils = document.getElementById("_style_utils");
         if (window.myEdit.utils.GetSelection().isCollapsed) {
             console.log("none")
@@ -155,12 +156,28 @@ export class MyEventListener {
         let x = event.pageX || event.clientX + scrollX;
         let y = event.pageY || event.clientY + scrollY;
 
-        console.log("posX: ", x, " posY: ", y, event.pageX, event.pageY, scrollX, scrollY, event.clientX, event.clientY);
 
         //
+        let curEditFrontSize = window.myEdit.ctx.editFrontSize
         styleUtils.style.display = "block";
-        styleUtils.style.left = (event.clientX - 80) + "px";
+        let limit = curEditFrontSize * 10;
-        styleUtils.style.top = (event.clientY - 80) + "px";
+        console.log("posX: ", x, " posY: ", y, event.pageX, event.pageY, scrollX, scrollY, event.clientX, event.clientY, limit);
+        if (y > limit && x > limit) {
+            styleUtils.style.left = (x - 8 * curEditFrontSize) + "px";
+            styleUtils.style.top = (y - 6 * curEditFrontSize) + "px";
+        } else {
+            if (x < limit) {
+                styleUtils.style.left = (x + 3 * curEditFrontSize) + "px";
+            } else {
+                styleUtils.style.left = (x - 8 * curEditFrontSize) + "px";
+            }
+            if (y < limit) {
+                styleUtils.style.top = (y + 3 * curEditFrontSize) + "px";
+            } else {
+                styleUtils.style.top = (y - 6 * curEditFrontSize) + "px";
+            }
+        }
+
 
         // window.myEdit.utils.ProhibitDefaultEvent(event);
     }

static/js/lib/main.js

@@ -24,7 +24,7 @@ import {MyEventListener} from "./event/MyEventListener.js";
             /**
              * 默认body front-size 单位px
              */
-            bodyFrontSize: 14,
+            editFrontSize: 14,
             /**
              * 设计稿宽度 375
              */
@@ -96,23 +96,24 @@ import {MyEventListener} from "./event/MyEventListener.js";
      * 窗口重载&文档重载事件 for 响应式
      */
     window.myEdit.utils.RefreshRootFrontSize();
-    window.myEdit.utils.RefreshBodyFrontSize();
+    window.myEdit.utils.RefreshEditFrontSize();
     document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshRootFrontSize);
-    document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshBodyFrontSize);
+    document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshEditFrontSize);
     window.addEventListener('pageshow', function (e) {
         if (e.persisted) {
             window.myEdit.utils.RefreshRootFrontSize();
-            window.myEdit.utils.RefreshBodyFrontSize();
+            window.myEdit.utils.RefreshEditFrontSize();
         }
     });
     window.addEventListener('resize', window.myEdit.utils.RefreshRootFrontSize);
-    window.addEventListener('resize', window.myEdit.utils.RefreshBodyFrontSize);
+    window.addEventListener('resize', window.myEdit.utils.RefreshEditFrontSize);
     /**
      * 窗口撤销事件.
      * js中的键盘事件只有三种：keydown、keyup、keypress。它们触发的顺序是：keydown -> keypress -> keyup。当按下一个键不放开，一般会重复地触发 keydown+keypress，直到放开后触发一个 keyup 事件。
      *
      */
-    window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownHandle, true);
+    window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
+    window.addEventListener('touchend', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
 }());
 
 /**
@@ -153,7 +154,9 @@ window.onload = function () {
 
 
     //监听鼠标抬起事件
-    document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUp, true);
+    document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUpOrTouchend, true);
+    //监听手指抬起事件
+    document.getElementById("noteshare").addEventListener("touchend", window.myEdit.eventListener.MouseUpOrTouchend, true);
     //这里监听鼠标按下事件
     document.getElementById("_style_utils").addEventListener("mousedown", function (e) {
         const event = window.myEdit.utils.ParseEvent(e);

static/yanxuelu.html

@@ -126,7 +126,23 @@
     </div>
 </footer>
 <div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>
+
+<p style="font-size: 16px;">
+    <span><button onclick="plusPx()">+</button></span>
+    <span><button onclick="reducePx()">-</button></span>
+</p>
 </body>
 
 
+<script>
+    function plusPx() {
+        window.myEdit.ctx.editFrontSize += 1;
+        window.myEdit.utils.RefreshEditFrontSize();
+    }
+
+    function reducePx() {
+        window.myEdit.ctx.editFrontSize += -1;
+        window.myEdit.utils.RefreshEditFrontSize();
+    }
+</script>
 </html>