From 13de5280b002d645739973a0ec580c719dd021d9 Mon Sep 17 00:00:00 2001
From: Ivan Shubin <ivan.ishubin@gmail.com>
Date: Sat, 9 Dec 2023 08:18:36 +0100
Subject: [PATCH] fixed diagram picker external link

---
 assets/css/main.css                        | 14 +++++++++-----
 src/common/fs/fileIndex.js                 |  2 +-
 src/common/fs/projectService.js            |  3 ++-
 src/electron/renderer/renderer.js          |  1 -
 src/server/fs/fs.js                        |  2 +-
 src/ui/app/client/clientCache.js           |  2 +-
 src/ui/app/client/googleDriveClient.js     |  2 +-
 src/ui/components/SchemeEditor.vue         | 14 --------------
 src/ui/components/editor/DiagramPicker.vue |  4 +++-
 src/ui/components/editor/LinkEditPopup.vue |  2 +-
 src/ui/main.app.drive.js                   |  2 --
 src/ui/main.app.static.js                  |  1 -
 src/ui/store/Store.js                      | 20 --------------------
 13 files changed, 19 insertions(+), 50 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index c34b1cdae..02a435612 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3929,21 +3929,25 @@ ul.patch-field-list {
     color: var(--faint-strong);
     font-style: italic;
 }
-.diagram-picker .diagram-picker-button {
-    padding: 2px;
+.diagram-picker .diagram-picker-external-link {
+    padding: 2px 5px;
     background: var(--accent-weak);
     color: var(--accent-strong);
+    opacity: 0.3;
     border-radius: 0 var(--control-border-radius) var(--control-border-radius) 0;
 }
-.diagram-picker.specified .diagram-picker-button {
+.diagram-picker.specified .diagram-picker-external-link {
     display: none;
 }
-.diagram-picker.specified:hover .diagram-picker-button {
+.diagram-picker.specified:hover .diagram-picker-external-link {
     display: inline-block;
 }
-.diagram-picker.disabled.specified:hover .diagram-picker-button {
+.diagram-picker.disabled.specified:hover .diagram-picker-external-link {
     display: none;
 }
+.diagram-picker .diagram-picker-external-link:hover {
+    opacity: 1;
+}
 
 
 
diff --git a/src/common/fs/fileIndex.js b/src/common/fs/fileIndex.js
index 7a8bdfc60..eac110672 100644
--- a/src/common/fs/fileIndex.js
+++ b/src/common/fs/fileIndex.js
@@ -205,7 +205,7 @@ function _indexScheme(index, schemeId, scheme, fsPath, previewURL) {
         name: scheme.name,
         lowerName: scheme.name.toLowerCase(),
         modifiedTime: scheme.modifiedTime,
-        publicLink: `/docs/${schemeId}`,
+        link: `/docs/${schemeId}`,
         previewURL
     }, folderPathFromPath(fsPath));
 }
diff --git a/src/common/fs/projectService.js b/src/common/fs/projectService.js
index 026285b56..99c37359a 100644
--- a/src/common/fs/projectService.js
+++ b/src/common/fs/projectService.js
@@ -255,7 +255,8 @@ export class ProjectService {
         }
         return Promise.resolve({
             id: docId,
-            name: doc.name
+            name: doc.name,
+            link: `/docs/${docId}`
         });
     }
 
diff --git a/src/electron/renderer/renderer.js b/src/electron/renderer/renderer.js
index b2118c1dc..682b9993a 100644
--- a/src/electron/renderer/renderer.js
+++ b/src/electron/renderer/renderer.js
@@ -17,7 +17,6 @@ applyVueFilters(Vue);
 
 store.dispatch('setApiClient', electronAPICLient());
 store.dispatch('setAssetsPath', 'media://assets');
-store.dispatch('setDocsLinkTarget', '_self');
 
 new Vue(Vue.util.extend({
     store,
diff --git a/src/server/fs/fs.js b/src/server/fs/fs.js
index da59c1619..e69aad17f 100644
--- a/src/server/fs/fs.js
+++ b/src/server/fs/fs.js
@@ -224,7 +224,7 @@ export function fsSaveScheme(config, projectService) {
         const scheme = req.body;
         scheme.id = schemeId;
         scheme.modifiedTime = new Date();
-        scheme.publicLink = `/docs/${schemeId}`;
+        scheme.link= `/docs/${schemeId}`;
 
         projectService.writeDiagram(filePath, scheme)
         .then(() => {
diff --git a/src/ui/app/client/clientCache.js b/src/ui/app/client/clientCache.js
index 772952de4..bcbab6e9d 100644
--- a/src/ui/app/client/clientCache.js
+++ b/src/ui/app/client/clientCache.js
@@ -15,7 +15,7 @@ export function getCachedSchemeInfo(schemeId, executor) {
 export function schemeSearchCacher(response) {
     if (Array.isArray(response.results)) {
         response.results.forEach(scheme => {
-            schemeInfoMap.set(scheme.id, {id: scheme.id, name: scheme.name});
+            schemeInfoMap.set(scheme.id, {id: scheme.id, name: scheme.name, link: scheme.link});
         });
     }
     return response;
diff --git a/src/ui/app/client/googleDriveClient.js b/src/ui/app/client/googleDriveClient.js
index 510800829..33862d3e6 100644
--- a/src/ui/app/client/googleDriveClient.js
+++ b/src/ui/app/client/googleDriveClient.js
@@ -374,7 +374,7 @@ export const googleDriveClientProvider = {
                                     id: file.id,
                                     name: convertSchemioFileTitle(file.name),
                                     modifiedTime: file.modifiedDate,
-                                    publicLink: `/docs/${file.id}`
+                                    link: `/docs/${file.id}`
                                 };
                             })
                         };
diff --git a/src/ui/components/SchemeEditor.vue b/src/ui/components/SchemeEditor.vue
index 3977e3a0d..3e81d7101 100644
--- a/src/ui/components/SchemeEditor.vue
+++ b/src/ui/components/SchemeEditor.vue
@@ -258,12 +258,6 @@
                                 :key="`selected-component-diagram-picker-${selectedItem.id}-${selectedItem.shapeProps.schemeId}`"
                                 :diagramId="selectedItem.shapeProps.schemeId"
                                 @diagram-selected="onDiagramPickedForSelectedComponent"/>
-                            <a v-if="selectedItem.shapeProps.schemeId"
-                                :href="`${docsPath}/${selectedItem.shapeProps.schemeId}`"
-                                :target="docsLinkTarget"
-                                title="Open diagram new tab">
-                                <i class="fa-solid fa-up-right-from-square"></i>
-                            </a>
                         </div>
                         <div v-if="selectedItem.shapeProps.kind == 'embedded'" class="diagram-controls">
                             <span class="label">Reference Item: </span>
@@ -2933,14 +2927,6 @@ export default {
             return this.$store.getters.assetsPath;
         },
 
-        docsPath() {
-            return this.$store.getters.docsPath;
-        },
-
-        docsLinkTarget() {
-            return this.$store.getters.docsLinkTarget;
-        },
-
         selectedItemTemplateArgs() {
             if (this.schemeContainer.selectedItems.length !== 1) {
                 return null;
diff --git a/src/ui/components/editor/DiagramPicker.vue b/src/ui/components/editor/DiagramPicker.vue
index 781ebbc18..27e5b4880 100644
--- a/src/ui/components/editor/DiagramPicker.vue
+++ b/src/ui/components/editor/DiagramPicker.vue
@@ -9,7 +9,7 @@
             <div v-else class="diagram-title" @click="toggleSearchModal">
                 <span class="diagram-placeholder">Search diagram...</span>
             </div>
-            <span class="diagram-picker-button" @click="toggleSearchModal"><i class="fas fa-search"></i></span>
+            <a v-if="diagramLink" title="Open diagram in another tab" target="_blank" class="diagram-picker-external-link" :href="diagramLink" ><i class="fa-solid fa-square-up-right"></i></a>
             <SchemeSearchModal v-if="searchModalShown" @close="searchModalShown = false" @selected-scheme="onDiagramPicked"/>
         </div>
     </div>
@@ -34,6 +34,7 @@ export default {
             .then(info => {
                 this.isLoading = false;
                 this.diagramTitle = info.name;
+                this.diagramLink = info.link;
             })
             .catch(err => {
                 console.error(err);
@@ -47,6 +48,7 @@ export default {
         return {
             searchModalShown: false,
             diagramTitle: null,
+            diagramLink: null,
             isLoading: false
         };
     },
diff --git a/src/ui/components/editor/LinkEditPopup.vue b/src/ui/components/editor/LinkEditPopup.vue
index c977f1ab1..4cfdc52c5 100644
--- a/src/ui/components/editor/LinkEditPopup.vue
+++ b/src/ui/components/editor/LinkEditPopup.vue
@@ -64,7 +64,7 @@ export default {
 
         onSchemeSelect(scheme) {
             this.editType = 'doc';
-            this.editUrl = scheme.publicLink;
+            this.editUrl = scheme.link;
 
             if (!this.editTitle) {
                 this.editTitle = scheme.name;
diff --git a/src/ui/main.app.drive.js b/src/ui/main.app.drive.js
index e34420e4d..f7105541e 100644
--- a/src/ui/main.app.drive.js
+++ b/src/ui/main.app.drive.js
@@ -34,8 +34,6 @@ function route(name, path, component, props) {
     return { name, path, component, props };
 }
 
-store.dispatch('setDocsPath', '#/docs');
-
 const routes = [
     route('SchemeEditorWebView',       '/docs/:schemeId',   SchemeEditorWebView, {clientProvider: googleDriveClientProvider, userStylesEnabled: false, projectArtEnabled: false}),
     route('OfflineSchemeEditorWebView','/offline-editor',   SchemeEditorWebView, {clientProvider: offlineClientProvider, isOfflineEditor: true , userStylesEnabled: false, projectArtEnabled: false}),
diff --git a/src/ui/main.app.static.js b/src/ui/main.app.static.js
index af39f51f2..9fdef4342 100644
--- a/src/ui/main.app.static.js
+++ b/src/ui/main.app.static.js
@@ -28,7 +28,6 @@ window.createSchemioStaticApp = function (options) {
 
     store.dispatch('setRootPath', './');
     store.dispatch('setAssetsPath', './assets');
-    store.dispatch('setDocsPath', '#/docs');
 
     Vue.use(VueRouter);
     applyVueFilters(Vue);
diff --git a/src/ui/store/Store.js b/src/ui/store/Store.js
index 0108dab49..855a1942d 100644
--- a/src/ui/store/Store.js
+++ b/src/ui/store/Store.js
@@ -21,8 +21,6 @@ const store = new Vuex.Store({
         //rootPath is used in the header for a home link, since if this is being hosted in GitHub Pages the we cannot use '/' as root path
         rootPath: '/',
         assetsPath: '/assets',
-        docsPath: '/docs',
-        docsLinkTarget: '_blank',
 
         apiClient: null,
 
@@ -114,14 +112,6 @@ const store = new Vuex.Store({
             state.rootPath = path;
         },
 
-        SET_DOCS_PATH(state, path) {
-            state.docsPath = path;
-        },
-
-        SET_DOCS_LINK_TARGET(state, target) {
-            state.docsLinkTarget = target;
-        },
-
         SET_ASSESTS_PATH(state, path) {
             state.assetsPath = path;
         },
@@ -363,14 +353,6 @@ const store = new Vuex.Store({
             commit('SET_ROOT_PATH', path);
         },
 
-        setDocsPath({commit}, path) {
-            commit('SET_DOCS_PATH', path);
-        },
-
-        setDocsLinkTarget({commit}, target) {
-            commit('SET_DOCS_LINK_TARGET', target);
-        },
-
         setAssetsPath({commit}, path) {
             commit('SET_ASSESTS_PATH', path);
         },
@@ -547,8 +529,6 @@ const store = new Vuex.Store({
         },
 
         rootPath: state => state.rootPath,
-        docsPath: state => state.docsPath,
-        docsLinkTarget: state => state.docsLinkTarget,
         assetsPath: state => state.assetsPath,
     }
 });