fix: drag in iframe

Author: theajack

src/main/components/js/iframe-runner.js

@@ -117,6 +117,22 @@ export function createIFrameSrc (js) {
         window.addEventListener('DOMContentLoaded', () => {
             postMsg('iframe_loaded');
         });
+        let flag = false;
+        window.addEventListener('mousemove', (e) => {
+            if (!flag) {
+                flag = true;
+                setTimeout(() => {
+                    flag = false;
+                }, 50);
+                postMsg('mouseevent', ['mousemove', e.clientX]);
+            }
+        });
+        window.addEventListener('mouseup', () => {
+            postMsg('mouseevent', ['mouseup']);
+        });
+        window.addEventListener('mouseenter', () => {
+            postMsg('mouseevent', ['mouseenter']);
+        });
         var map = (window.jsboxConfig || window.jsboxCodeMap || {}).iifeMap || {};
         window.require = (name) => {
             let key = map[name];

src/main/components/log.vue

@@ -7,7 +7,7 @@
                :title='(htmlLog?"隐藏":"显示")+"log(ctrl + k)"'></i>
             <div class='log-content'>
                 <div :class="{'jx-ui': jxUI}" v-show="!hideHTMLResult" id='jx-app'>
-                    <iframe  sandbox="allow-same-origin allow-scripts" :src="iframeSrc" style="height: 100%;width: 100%;border: none;"/>
+                    <iframe ref="iframe" sandbox="allow-same-origin allow-scripts" :src="iframeSrc" style="height: 100%;width: 100%;border: none;"/>
                 </div>
                 <div v-if="doc" class="jx-doc">
                     <div class="jx-doc-title">{{id}} Docs</div>
@@ -135,7 +135,7 @@
                     }
                 },
             });
-            initDrag(this.$refs.drag);
+            initDrag(this.$refs.drag, this.$refs.iframe);
             this.initLog();
             htmlLog.init(this.htmlLog);
         },

src/main/js/initEvent.js

@@ -71,7 +71,7 @@ export function initKeyEvent () {
     });
 }
 
-export function initDrag (drag) {
+export function initDrag (drag, iframe) {
     let width = 0;
     let minWidth = 200;
     dragPercent.init();
@@ -91,6 +91,25 @@ export function initDrag (drag) {
         }
         dragPercent.stash(((x) / width) * 100);
     };
+
+    window.addEventListener('message', (e) => {
+        const data = e.data;
+        if (data.type === 'mouseevent') {
+            const m = data.data[0];
+            if (m === 'mousemove') {
+                if (dragStatus.get()) {
+                    const x = data.data[1] + iframe.getBoundingClientRect().left;
+                    setSize(x);
+                }
+            } else if (m === 'mouseup') {
+                if (dragStatus.get()) {
+                    setDrag(false);
+                }
+            } else if (m === 'mouseenter') {
+                setDrag(false);
+            }
+        }
+    });
     $.query('body').on({
         mousemove (e) {
             if (dragStatus.get()) {