Merge pull request #1720 from weseek/imprv/use-modal-for-drawio

Imprv/use modal for drawio

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';
 
@@ -30,7 +30,7 @@ class Page extends React.Component {
     this.growiRenderer = this.props.appContainer.getRenderer('page');
 
     this.saveHandlerForHandsontableModal = this.saveHandlerForHandsontableModal.bind(this);
-    this.saveHandlerForDrawioIFrame = this.saveHandlerForDrawioIFrame.bind(this);
+    this.saveHandlerForDrawioModal = this.saveHandlerForDrawioModal.bind(this);
   }
 
   componentWillMount() {
@@ -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) {
@@ -92,7 +92,7 @@ class Page extends React.Component {
     }
   }
 
-  async saveHandlerForDrawioIFrame(drawioData) {
+  async saveHandlerForDrawioModal(drawioData) {
     const { pageContainer, editorContainer } = this.props;
     const optionsToSave = editorContainer.getCurrentOptionsToSave();
 
@@ -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,16 @@ 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,
-      },
     };
 
     this.drawioIFrame = React.createRef();
@@ -26,7 +22,6 @@ 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.drawioURL = this.drawioURL.bind(this);
   }
 
@@ -42,21 +37,13 @@ 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,
-      }),
-    });
-
-    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 +93,6 @@ export default class DrawioIFrame extends React.PureComponent {
         this.props.onSave(value);
       }
 
-      window.removeEventListener('resize', this.onResizeWindow);
       window.removeEventListener('message', this.receiveFromDrawio);
       this.hide();
 
@@ -114,7 +100,6 @@ export default class DrawioIFrame extends React.PureComponent {
     }
 
     if (typeof event.data === 'string' && event.data.length === 0) {
-      window.removeEventListener('resize', this.onResizeWindow);
       window.removeEventListener('message', this.receiveFromDrawio);
       this.hide();
 
@@ -124,15 +109,6 @@ 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,
-      }),
-    });
-  }
-
   drawioURL() {
     const url = new URL('https://www.draw.io/');
 
@@ -148,25 +124,33 @@ 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} dialogClassName="drawio-modal" bsSize="large" keyboard={false}>
+        <Modal.Body className="p-0">
+          {/* Loading spinner */}
+          <div className="w-100 h-100 position-absolute d-flex">
+            <div className="mx-auto my-auto">
+              <i className="fa fa-3x fa-spinner fa-pulse mx-auto text-muted"></i>
+            </div>
+          </div>
+          {/* iframe */}
+          <div className="w-100 h-100 position-absolute d-flex">
+            { this.state.show && (
+              <iframe
+                ref={(c) => { this.drawioIFrame = c }}
+                src={this.drawioURL()}
+                className="border-0 flex-grow-1"
+              >
+              </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,3 @@
+.drawio-modal {
+  @include expand-modal-fullscreen(false, false);
+}

src/client/styles/scss/_handsontable.scss

@@ -10,24 +10,11 @@
 
 // expanded window layout
 .handsontable-modal.handsontable-modal-expanded {
-  // full-screen modal
-  width: 97%;
-  height: 95%;
-  .modal-content {
-    height: 95%;
-  }
-
-  // expand .modal-body (with calculating height)
-  .modal-body {
-    $modal-header: 54px;
-    $modal-footer: 46px;
-    $margin: $modal-header + $modal-footer;
-    height: calc(100% - #{$margin});
+  @include expand-modal-fullscreen(true, true);
 
-    // expand .hot-table-container (with flexbox)
-    .hot-table-container {
-      flex: 1;
-    }
+  // expand .hot-table-container (with flexbox)
+  .hot-table-container {
+    flex: 1;
   }
 }
 

src/client/styles/scss/_mixins.scss

@@ -83,3 +83,29 @@
     }
   }
 }
+
+@mixin expand-modal-fullscreen($hasModalHeader: true, $hasModalFooter: true) {
+  // full-screen modal
+  width: auto;
+  height: calc(100vh - 30px);
+  margin: 15px;
+
+  .modal-content {
+    height: calc(100vh - 30px);
+  }
+
+  // expand .modal-body (with calculating height)
+  .modal-body {
+    $modal-header: 54px;
+    $modal-footer: 46px;
+
+    $margin: 0px;
+    @if $hasModalHeader {
+      $margin: $margin + $modal-header;
+    }
+    @if $hasModalFooter {
+      $margin: $margin + $modal-footer;
+    }
+    height: calc(100% - #{$margin});
+  }
+}

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';