refactor DrawioIFrame -> DrawioModal

src/client/js/components/Drawio.jsx

@@ -24,7 +24,7 @@ class Drawio extends React.Component {
 
   onEdit() {
     if (window.crowi != null) {
-      window.crowi.launchDrawioIFrame('page',
+      window.crowi.launchDrawioModal('page',
         this.props.rangeLineNumberOfMarkdown.beginLineNumber,
         this.props.rangeLineNumberOfMarkdown.endLineNumber);
     }

src/client/js/components/Page.jsx

@@ -11,7 +11,7 @@ import MarkdownTable from '../models/MarkdownTable';
 
 import RevisionRenderer from './Page/RevisionRenderer';
 import HandsontableModal from './PageEditor/HandsontableModal';
-import DrawioIFrame from './PageEditor/DrawioIFrame';
+import DrawioModal from './PageEditor/DrawioModal';
 import mtu from './PageEditor/MarkdownTableUtil';
 import mdu from './PageEditor/MarkdownDrawioUtil';
 
@@ -50,16 +50,16 @@ class Page extends React.Component {
   }
 
   /**
-   * launch DrawioIFrame with data specified by arguments
+   * launch DrawioModal with data specified by arguments
    * @param beginLineNumber
    * @param endLineNumber
    */
-  launchDrawioIFrame(beginLineNumber, endLineNumber) {
+  launchDrawioModal(beginLineNumber, endLineNumber) {
     const markdown = this.props.pageContainer.state.markdown;
     const drawioMarkdownArray = markdown.split(/\r\n|\r|\n/).slice(beginLineNumber, endLineNumber);
     const drawioData = drawioMarkdownArray.slice(1, drawioMarkdownArray.length - 1).join('\n').trim();
     this.setState({ currentTargetDrawioArea: { beginLineNumber, endLineNumber } });
-    this.drawioIFrame.show(drawioData);
+    this.drawioModal.show(drawioData);
   }
 
   async saveHandlerForHandsontableModal(markdownTable) {
@@ -130,7 +130,7 @@ class Page extends React.Component {
       <div className={isMobile ? 'page-mobile' : ''}>
         <RevisionRenderer growiRenderer={this.growiRenderer} markdown={markdown} />
         <HandsontableModal ref={(c) => { this.handsontableModal = c }} onSave={this.saveHandlerForHandsontableModal} />
-        <DrawioIFrame ref={(c) => { this.drawioIFrame = c }} onSave={this.saveHandlerForDrawioIFrame} />
+        <DrawioModal ref={(c) => { this.drawioModal = c }} onSave={this.saveHandlerForDrawioModal} />
       </div>
     );
   }

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -20,7 +20,7 @@ import mtu from './MarkdownTableUtil';
 import mdu from './MarkdownDrawioUtil';
 import HandsontableModal from './HandsontableModal';
 import EditorIcon from './EditorIcon';
-import DrawioIFrame from './DrawioIFrame';
+import DrawioModal from './DrawioModal';
 
 const loadScript = require('simple-load-script');
 const loadCssSync = require('load-css-file');
@@ -839,7 +839,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
           ref={(c) => { this.handsontableModal = c }}
           onSave={(table) => { return mtu.replaceFocusedMarkdownTableWithEditor(this.getCodeMirror(), table) }}
         />
-        <DrawioIFrame
+        <DrawioModal
           ref={(c) => { this.drawioIFrame = c }}
           onSave={(drawioData) => { return mdu.replaceFocusedDrawioWithEditor(this.getCodeMirror(), drawioData) }}
         />

src/client/js/components/PageEditor/DrawioIFrame.jsx → src/client/js/components/PageEditor/DrawioModal.jsx

@@ -2,20 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import i18next from 'i18next';
 
-export default class DrawioIFrame extends React.PureComponent {
+import Modal from 'react-bootstrap/es/Modal';
+
+export default class DrawioModal extends React.PureComponent {
 
   constructor(props) {
     super(props);
 
     this.state = {
-      shown: false,
+      show: false,
       drawioMxFile: '',
-      style: {
-        zIndex: 9999,
-        top: 0,
-        left: 0,
-        bottom: 0,
-      },
+      // style: {
+      //   zIndex: 9999,
+      //   top: 0,
+      //   left: 0,
+      //   bottom: 0,
+      // },
     };
 
     this.drawioIFrame = React.createRef();
@@ -26,7 +28,7 @@ export default class DrawioIFrame extends React.PureComponent {
     this.init = this.init.bind(this);
     this.cancel = this.cancel.bind(this);
     this.receiveFromDrawio = this.receiveFromDrawio.bind(this);
-    this.onResizeWindow = this.onResizeWindow.bind(this);
+    // this.onResizeWindow = this.onResizeWindow.bind(this);
     this.drawioURL = this.drawioURL.bind(this);
   }
 
@@ -42,21 +44,21 @@ export default class DrawioIFrame extends React.PureComponent {
   show(drawioMxFile) {
     this.init(drawioMxFile);
 
-    this.setState({
-      style: Object.assign({}, this.state.style, {
-        width: window.innerWidth,
-        height: window.innerHeight,
-      }),
-    });
+    // this.setState({
+    //   style: Object.assign({}, this.state.style, {
+    //     width: window.innerWidth,
+    //     height: window.innerHeight,
+    //   }),
+    // });
 
-    window.addEventListener('resize', this.onResizeWindow);
+    // window.addEventListener('resize', this.onResizeWindow);
     window.addEventListener('message', this.receiveFromDrawio);
-    this.setState({ shown: true });
+    this.setState({ show: true });
   }
 
   hide() {
     this.setState({
-      shown: false,
+      show: false,
     });
   }
 
@@ -106,7 +108,7 @@ export default class DrawioIFrame extends React.PureComponent {
         this.props.onSave(value);
       }
 
-      window.removeEventListener('resize', this.onResizeWindow);
+      // window.removeEventListener('resize', this.onResizeWindow);
       window.removeEventListener('message', this.receiveFromDrawio);
       this.hide();
 
@@ -114,7 +116,7 @@ export default class DrawioIFrame extends React.PureComponent {
     }
 
     if (typeof event.data === 'string' && event.data.length === 0) {
-      window.removeEventListener('resize', this.onResizeWindow);
+      // window.removeEventListener('resize', this.onResizeWindow);
       window.removeEventListener('message', this.receiveFromDrawio);
       this.hide();
 
@@ -124,14 +126,14 @@ export default class DrawioIFrame extends React.PureComponent {
     // NOTHING DONE. (Receive unknown iframe message.)
   }
 
-  onResizeWindow(event) {
-    this.setState({
-      style: Object.assign({}, this.state.style, {
-        width: window.innerWidth,
-        height: window.innerHeight,
-      }),
-    });
-  }
+  // onResizeWindow(event) {
+  //   this.setState({
+  //     style: Object.assign({}, this.state.style, {
+  //       width: window.innerWidth,
+  //       height: window.innerHeight,
+  //     }),
+  //   });
+  // }
 
   drawioURL() {
     const url = new URL('https://www.draw.io/');
@@ -148,25 +150,28 @@ export default class DrawioIFrame extends React.PureComponent {
 
   render() {
     return (
-      <div>
-        {
-          this.state.shown
-          && (
-            <iframe
-              ref={(c) => { this.drawioIFrame = c }}
-              src={this.drawioURL()}
-              className="position-fixed"
-              style={this.state.style}
-            >
-            </iframe>
-          )
-        }
-      </div>
+      // <Modal show={this.state.show} onHide={this.cancel} bsSize="large" dialogClassName={dialogClassName} keyboard={false}>
+      <Modal show={this.state.show} onHide={this.cancel} bsSize="large" keyboard={false}>
+        <Modal.Body className="p-0 d-flex flex-column">
+          <div id="iframe-drawio-container">
+            {
+              this.state.show
+              && (
+                <iframe
+                  ref={(c) => { this.drawioIFrame = c }}
+                  src={this.drawioURL()}
+                >
+                </iframe>
+              )
+            }
+          </div>
+        </Modal.Body>
+      </Modal>
     );
   }
 
 }
 
-DrawioIFrame.propTypes = {
+DrawioModal.propTypes = {
   onSave: PropTypes.func,
 };

src/client/js/services/AppContainer.js

@@ -304,14 +304,14 @@ export default class AppContainer extends Container {
     targetComponent.launchHandsontableModal(beginLineNumber, endLineNumber);
   }
 
-  launchDrawioIFrame(componentKind, beginLineNumber, endLineNumber) {
+  launchDrawioModal(componentKind, beginLineNumber, endLineNumber) {
     let targetComponent;
     switch (componentKind) {
       case 'page':
         targetComponent = this.getComponentInstance('Page');
         break;
     }
-    targetComponent.launchDrawioIFrame(beginLineNumber, endLineNumber);
+    targetComponent.launchDrawioModal(beginLineNumber, endLineNumber);
   }
 
   async apiGet(path, params) {

src/client/styles/scss/_drawio.scss

@@ -0,0 +1,7 @@
+#iframe-drawio-container > iframe {
+  width: 100vw;
+  // height: calc(100vh - #{$header-plus-footer});
+  // min-height: calc(100vh - #{$header-plus-footer}); // for IE11
+  height: calc(100vh - 0);
+  min-height: calc(100vh - 0); // for IE11
+}

src/client/styles/scss/style-app.scss

@@ -18,6 +18,7 @@
 @import 'comment_crowi';
 @import 'comment_growi';
 @import 'comment_kibela';
+@import 'drawio';
 @import 'navbar_kibela';
 @import 'create-page';
 @import 'create-template';