Просмотр исходного кода

Fix #1755: draw.ioを含むページを編集するときに編集画面のスクロール位置が移動してしまう

Koki Oyatsu 6 лет назад
Родитель
Сommit
bc0e9cd85c
2 измененных файлов с 25 добавлено и 9 удалено
  1. 10 4
      src/client/js/components/Drawio.jsx
  2. 15 5
      src/client/js/util/interceptor/drawio-interceptor.js

+ 10 - 4
src/client/js/components/Drawio.jsx

@@ -33,7 +33,16 @@ class Drawio extends React.Component {
   componentDidMount() {
   componentDidMount() {
     const DrawioViewer = window.GraphViewer;
     const DrawioViewer = window.GraphViewer;
     if (DrawioViewer != null) {
     if (DrawioViewer != null) {
-      DrawioViewer.processElements();
+      const mxgraphs = this.drawioContainer.getElementsByClassName('mxgraph');
+      if (mxgraphs.length > 0) {
+        // GROWI では、mxgraph element は最初のものをレンダリングする前提とする
+        const div = mxgraphs[0];
+
+        if (div != null) {
+          div.innerHTML = '';
+          DrawioViewer.createViewerForElement(div);
+        }
+      }
     }
     }
   }
   }
 
 
@@ -55,9 +64,6 @@ class Drawio extends React.Component {
           className="drawio"
           className="drawio"
           style={this.style}
           style={this.style}
           ref={(c) => { this.drawioContainer = c }}
           ref={(c) => { this.drawioContainer = c }}
-          onScroll={(event) => {
-            event.preventDefault();
-          }}
           // eslint-disable-next-line react/no-danger
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: this.renderContents() }}
           dangerouslySetInnerHTML={{ __html: this.renderContents() }}
         >
         >

+ 15 - 5
src/client/js/util/interceptor/drawio-interceptor.js

@@ -17,11 +17,21 @@ export class DrawioInterceptor extends BasicInterceptor {
     this.previousPreviewContext = null;
     this.previousPreviewContext = null;
     this.appContainer = appContainer;
     this.appContainer = appContainer;
 
 
-    const DrawioViewer = window.GraphViewer;
-    if (DrawioViewer != null) {
-      // viewer.min.js の Resize による Scroll イベントを抑止するために無効化する
-      DrawioViewer.useResizeSensor = false;
-    }
+    // draw.io の viewer.min.js から呼ばれるコールバックを定義する
+    // refs: https://github.com/jgraph/drawio/blob/v12.9.1/etc/build/build.xml#L219-L232
+    window.onDrawioViewerLoad = function() {
+      const DrawioViewer = window.GraphViewer;
+
+      if (DrawioViewer != null) {
+        // viewer.min.js の Resize による Scroll イベントを抑止するために
+        // useResizeSensor と checkVisibleState を無効化する
+        DrawioViewer.useResizeSensor = false;
+        DrawioViewer.prototype.checkVisibleState = false;
+
+        // 初回レンダリング時に mxfile をレンダリングする
+        DrawioViewer.processElements();
+      }
+    };
   }
   }
 
 
   /**
   /**