fixed diagram picker external link

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;
+}
 
 
 

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));
 }

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}`
         });
     }
 

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,

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(() => {

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;

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}`
                                 };
                             })
                         };

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;

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
         };
     },

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;

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}),

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

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,
     }
 });