[draw.io] Styling for draw.io Editor & misc changes.

src/client/js/components/Drawio.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class Drawio extends React.Component {
+import { withTranslation } from 'react-i18next';
+
+class Drawio extends React.Component {
 
   constructor(props) {
     super(props);
@@ -44,9 +46,13 @@ export default class Drawio extends React.Component {
   render() {
     return (
       <div className="editable-with-drawio">
-        <button type="button" className="drawio-iframe-trigger btn" onClick={this.onEdit}>
-          <i className="icon-note"></i> Edit
-        </button>
+        { !this.props.isPreview
+          && (
+          <button type="button" className="drawio-iframe-trigger btn" onClick={this.onEdit}>
+            <i className="icon-note"></i> {this.props.t('Edit')}
+          </button>
+          )
+        }
         <div
           className="drawio"
           style={this.style}
@@ -64,8 +70,11 @@ export default class Drawio extends React.Component {
 }
 
 Drawio.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.object.isRequired,
   drawioContent: PropTypes.any.isRequired,
   isPreview: PropTypes.bool,
   rangeLineNumberOfMarkdown: PropTypes.object.isRequired,
 };
+
+export default withTranslation()(Drawio);

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import i18next from 'i18next';
 
 export default class DrawioIFrame extends React.PureComponent {
 
@@ -20,9 +21,14 @@ export default class DrawioIFrame extends React.PureComponent {
 
     this.drawioIFrame = React.createRef();
 
+    this.headerColor = '#3c4451';
+    this.fontFamily = "Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif";
+
     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);
   }
 
   init(drawioMxFile) {
@@ -36,16 +42,15 @@ export default class DrawioIFrame extends React.PureComponent {
 
   show(drawioMxFile) {
     this.init(drawioMxFile);
-    const navHeaderHeight = Math.floor(document.querySelector('.navbar-header').getBoundingClientRect().height);
 
     this.setState({
       style: Object.assign({}, this.state.style, {
-        top: `${navHeaderHeight}px`,
-        width: document.body.clientWidth,
-        height: document.body.clientHeight - navHeaderHeight,
+        width: window.innerWidth,
+        height: window.innerHeight,
       }),
     });
 
+    window.addEventListener('resize', this.onResizeWindow);
     window.addEventListener('message', this.receiveFromDrawio);
     this.setState({ shown: true });
   }
@@ -64,7 +69,32 @@ export default class DrawioIFrame extends React.PureComponent {
     if (event.data === 'ready') {
       event.source.postMessage(this.state.drawioMxFile, '*');
     }
-    else {
+    else if (event.data === '{"event":"configure"}') {
+      if (event.source == null) {
+        return;
+      }
+
+      // refs:
+      //  * https://desk.draw.io/support/solutions/articles/16000103852-how-to-customise-the-draw-io-interface
+      //  * https://desk.draw.io/support/solutions/articles/16000042544-how-does-embed-mode-work-
+      //  * https://desk.draw.io/support/solutions/articles/16000058316-how-to-configure-draw-io-
+      event.source.postMessage(JSON.stringify({
+        action: 'configure',
+        config: {
+          css: `
+          .geMenubarContainer { background-color: ${this.headerColor} !important; }
+          .geMenubar { background-color: ${this.headerColor} !important; }
+          .geEditor { font-family: ${this.fontFamily} !important; }
+          html td.mxPopupMenuItem {
+            font-family: ${this.fontFamily} !important;
+            font-size: 9pt !important;
+          }
+          `,
+          customFonts: ['Lato', 'Charter'],
+        },
+      }), '*');
+    }
+    else if (typeof event.data === 'string' && event.data.match(/mxfile/)) {
       if (event.data.length > 0) {
         const parser = new DOMParser();
         const dom = parser.parseFromString(event.data, 'text/xml');
@@ -72,9 +102,35 @@ export default class DrawioIFrame extends React.PureComponent {
         this.props.onSave(value);
       }
 
+      window.removeEventListener('resize', this.onResizeWindow);
       window.removeEventListener('message', this.receiveFromDrawio);
       this.hide();
     }
+    else {
+      // 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/');
+
+    // refs: https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported-
+    url.searchParams.append('spin', 1);
+    url.searchParams.append('embed', 1);
+    url.searchParams.append('lang', i18next.language);
+    url.searchParams.append('ui', 'atlas');
+    url.searchParams.append('configure', 1);
+
+    return url;
   }
 
   render() {
@@ -82,7 +138,14 @@ export default class DrawioIFrame extends React.PureComponent {
       <div>
         {
           this.state.shown
-          && <iframe ref={(c) => { this.drawioIFrame = c }} src="https://www.draw.io/?embed=1" style={this.state.style}></iframe>
+          && (
+            <iframe
+              ref={(c) => { this.drawioIFrame = c }}
+              src={this.drawioURL()}
+              style={this.state.style}
+            >
+            </iframe>
+          )
         }
       </div>
     );

src/client/styles/scss/_page.scss

@@ -219,8 +219,8 @@
     position: absolute;
     top: 11px;
     right: 10px;
-    z-index: 999;
-    font-size: 16px;
+    z-index: 14;
+    font-size: 12px;
     line-height: 1;
     color: $linktext;
     vertical-align: bottom;