[xmind file view] rewrote it with react (#3002)

frontend/config/webpack.config.dev.js

@@ -108,6 +108,11 @@ module.exports = {
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/view-file-image.js",
+    ],
+    viewFileXmind: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/view-file-xmind.js",
     ]
   },
 

frontend/config/webpack.config.prod.js

@@ -70,6 +70,7 @@ module.exports = {
     sharedFileViewImage: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-image.js"],
     viewFileText: [require.resolve('./polyfills'), paths.appSrc + "/view-file-text.js"],
     viewFileImage: [require.resolve('./polyfills'), paths.appSrc + "/view-file-image.js"],
+    viewFileXmind: [require.resolve('./polyfills'), paths.appSrc + "/view-file-xmind.js"],
   },
 
   output: {

frontend/src/view-file-xmind.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import watermark from 'watermark-dom';
+import { seafileAPI } from './utils/seafile-api';
+import { siteRoot, siteName } from './utils/constants';
+import FileInfo from './components/file-view/file-info';
+import FileToolbar from './components/file-view/file-toolbar';
+import FileViewTip from './components/file-view/file-view-tip';
+import CommentPanel from './components/file-view/comment-panel';
+
+import './assets/css/fa-solid.css';
+import './assets/css/fa-regular.css';
+import './assets/css/fontawesome.css';
+import './css/file-view.css';
+import './css/image-file-view.css';
+
+const { isStarred, isLocked, lockedByMe,
+  repoID, filePath, err, enableWatermark, userNickName,
+  // the following are only for xmind file view
+  fileName, xmindImageSrc
+} = window.app.pageOptions;
+
+class ViewFileXmind extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isStarred: isStarred,
+      isLocked: isLocked,
+      lockedByMe: lockedByMe,
+      isCommentPanelOpen: false
+    };
+  }
+
+  toggleCommentPanel = () => {
+    this.setState({
+      isCommentPanelOpen: !this.state.isCommentPanelOpen
+    });
+  }
+
+  toggleStar = () => {
+    if (this.state.isStarred) {
+      seafileAPI.unStarFile(repoID, filePath).then((res) => {
+        this.setState({
+          isStarred: false
+        });
+      });
+    } else {
+      seafileAPI.starFile(repoID, filePath).then((res) => {
+        this.setState({
+          isStarred: true
+        });
+      });
+    }
+  }
+
+  toggleLockFile = () => {
+    if (this.state.isLocked) {
+      seafileAPI.unlockfile(repoID, filePath).then((res) => {
+        this.setState({
+          isLocked: false, 
+          lockedByMe: false 
+        });
+      });
+    } else {
+      seafileAPI.lockfile(repoID, filePath).then((res) => {
+        this.setState({
+          isLocked: true,
+          lockedByMe: true
+        });
+      });
+    }    
+  }
+
+  render() {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="file-view-header d-flex justify-content-between">
+          <FileInfo
+            isStarred={this.state.isStarred}
+            isLocked={this.state.isLocked}
+            toggleStar={this.toggleStar}
+          />
+          <FileToolbar 
+            isLocked={this.state.isLocked}
+            lockedByMe={this.state.lockedByMe}
+            toggleLockFile={this.toggleLockFile}
+            toggleCommentPanel={this.toggleCommentPanel}
+          />
+        </div>
+        <div className="file-view-body flex-auto d-flex">
+          <FileContent />
+          {this.state.isCommentPanelOpen &&
+            <CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+class FileContent extends React.Component {
+
+  render() {
+    if (err) {
+      return <FileViewTip />;
+    }
+    return (
+      <div className="file-view-content flex-1 image-file-view">
+        <img src={`${siteRoot}${xmindImageSrc}`} alt={fileName} id="image-view" />
+      </div>
+    );
+  }
+}
+
+if (enableWatermark) {
+  watermark.init({
+    watermark_txt: `${siteName} ${userNickName}`,
+    watermark_alpha: 0.075
+  });
+}
+
+ReactDOM.render (
+  <ViewFileXmind />,
+  document.getElementById('wrapper')
+);

seahub/templates/xmind_file_view_react.html

@@ -0,0 +1,11 @@
+{% extends 'file_view_react.html' %}
+{% load render_bundle from webpack_loader %}
+{% load seahub_tags %}
+
+{% block extra_data %}
+  xmindImageSrc: '{{ xmind_image_src|escapejs }}'
+{% endblock %}
+
+{% block render_bundle %}
+{% render_bundle 'viewFileXmind' %}
+{% endblock %}

seahub/views/file.py

@@ -707,10 +707,12 @@ def view_lib_file(request, repo_id, path):
             return render(request, template, return_dict)
 
     elif filetype == XMIND:
-
         xmind_dir = os.path.join(THUMBNAIL_ROOT, str(XMIND_IMAGE_SIZE))
         xmind_image = os.path.join(xmind_dir, file_id)
-        if not os.path.exists(xmind_image):
+        if os.path.exists(xmind_image):
+            return_dict['xmind_image_src'] = get_thumbnail_src(repo_id,
+                    XMIND_IMAGE_SIZE, path)
+        else:
             try:
                 extract_xmind_image(repo_id, path)
                 return_dict['xmind_image_src'] = get_thumbnail_src(repo_id,
@@ -720,7 +722,8 @@ def view_lib_file(request, repo_id, path):
                 error_msg = _(u'Unable to view file')
                 return_dict['err'] = error_msg
 
-        return render(request, 'view_file_image.html', return_dict)
+        template = '%s_file_view_react.html' % filetype.lower()
+        return render(request, template, return_dict)
 
     elif filetype == IMAGE:
         template = '%s_file_view_react.html' % filetype.lower()