imvenx · jabiertxof · Feb 4, 2023
diff --git a/src-electron/electron-main.ts b/src-electron/electron-main.ts
@@ -37,7 +37,7 @@ function createWindow() {
   });
 
   mainWindow.loadURL(process.env.APP_URL);
-
+  nativeTheme.themeSource = 'dark'
   if (process.env.DEBUGGING) {
     // if on DEV or Production with debug enabled
     mainWindow.webContents.openDevTools();
@@ -69,9 +69,11 @@ app.whenReady().then(async () => {
   ipcMain.handle('exportSvg', ({ }, fileStr: string) => projectH.exportSvg(fileStr))
 
   ipcMain.handle('openSvgWithInkscape', () => projectH.openSvgWithInkscape())
+  ipcMain.handle('askInkscapePath', () => projectH.askInkscapePath())
   ipcMain.handle('openSvgWithDefaultProgram', () => projectH.openSvgWithDefaultProgram())
   ipcMain.handle('closeApp', () => closeApp())
   mainWindow?.webContents.send('updatedSvg')
+  projectH.openSvgWithInkscape()
 });
 
 

diff --git a/src-electron/electron-preload.ts b/src-electron/electron-preload.ts
@@ -21,6 +21,7 @@ contextBridge.exposeInMainWorld('eapi', {
   exportSvg: (fileStr: string) => ipcRenderer.invoke('exportSvg', fileStr),
   openSvgWithDefaultProgram: () => ipcRenderer.invoke('openSvgWithDefaultProgram'),
   openSvgWithInkscape: () => ipcRenderer.invoke('openSvgWithInkscape'),
+  askInkscapePath: () => ipcRenderer.invoke('askInkscapePath'),
   closeApp: () => ipcRenderer.invoke('closeApp'),
   updatedSvg: (callback: any) => ipcRenderer.on('updatedSvg', callback),
 })
diff --git a/src-electron/handlers/project_h.ts b/src-electron/handlers/project_h.ts
@@ -21,6 +21,8 @@ try { watchTempSvg() } catch { }
 export const projectH = {
   async createProject({ doImportSvg }: createProjectParams) {
     let data = svgTemplate
+    writeTempSvg(data)
+    this.openSvgWithInkscape()
     if (doImportSvg) {
       const importedFilePath = (await dialog.showOpenDialog(mainWindow!,
         {
@@ -32,8 +34,9 @@ export const projectH = {
         })).filePaths[0]
       if (!importedFilePath) return false
       data = await p.readFile(importedFilePath, 'utf-8')
+      writeTempSvg(data)
+      this.openSvgWithInkscape()
     }
-    writeTempSvg(data)
     return true
   },
   async loadProject({ filePath }: loadProjectParams = {}): Promise<loadProjectResult> {
@@ -53,6 +56,7 @@ export const projectH = {
     let project = JSON.parse(projectStr) as any
 
     writeTempSvg(project.svgFile)
+    this.openSvgWithInkscape()
     // delete project.svgFile
 
     return { data: project, filePath: filePath }
@@ -157,7 +161,10 @@ export const projectH = {
 }
 
 async function refreshInkscapeUI() {
-  await exec(`gdbus call --session --dest org.inkscape.Inkscape --object-path /org/inkscape/Inkscape/window/1 --method org.gtk.Actions.Activate document-revert [] {}`)
+  const inkscapePath = await projectH.getInkscapePath()
+  if (!inkscapePath) return
+  console.log("_INKSCAPE_GC=disable " + inkscapePath + " --actions='file-rebase' -q")
+  exec(`_INKSCAPE_GC=disable "${inkscapePath}" --actions='file-rebase' -q`);
 }
 
 async function writeTempSvg(data: string) {

diff --git a/src/components/ActionButtons.vue b/src/components/ActionButtons.vue
@@ -10,8 +10,9 @@
             <q-item clickable v-close-popup @click="ProjectM.saveProject()">Save</q-item>
             <!-- <q-item clickable v-close-popup @click="importFile()">Import SVG</q-item> -->
             <q-item clickable v-close-popup @click="ExportM.exportToSvg()">Export</q-item>
-            <q-item clickable v-close-popup @click="ProjectM.openSvgWithInkscape()">Open SVG with
-              Inkscape</q-item>
+            <q-item clickable v-close-popup @click="ProjectM.askInkscapePath()">Select inkscape application</q-item>
+            <q-item clickable v-close-popup @click="ProjectM.openSvgWithDefaultProgram()">Open SVG with default
+              program</q-item>
             <q-item clickable v-close-popup @click="ProjectM.openSvgWithDefaultProgram()">Open SVG with default
               program</q-item>
             <!-- <q-item clickable v-close-popup @click="deleteAll()">Delete All</q-item> -->
@@ -89,11 +90,70 @@
     </div>
     <div style="position:absolute; display: flex; right:-.5em; ">
       <div id="windowButtons" v-bind="btnAttrs">
-        <div icon="resize" style="margin-right:-5px" id="dragWindow" title="keyframe">
-          <q-btn v-bind="btnAttrs">⚓</q-btn>
+        <div class="btnAttrs" icon="resize" id="dragWindow" title="keyframe">
+          <q-btn v-bind="btnAttrs">
+          <svg width="100%" height="auto" viewBox="0 0 100 100" version="1.1" id="svg5" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+            <defs
+              id="defs143">
+              <marker
+                style="overflow:visible"
+                id="marker1148"
+                refX="0"
+                refY="0"
+                orient="auto-start-reverse"
+                inkscape:stockid="Arrow1"
+                markerWidth="4.0606604"
+                markerHeight="6.7071066"
+                viewBox="0 0 4.0606602 6.7071068"
+                inkscape:isstock="true"
+                inkscape:collect="always"
+                preserveAspectRatio="xMidYMid">
+                <path
+                  style="fill:none;stroke:context-stroke;stroke-width:1;stroke-linecap:butt"
+                  d="M 3,-3 0,0 3,3"
+                  id="path1146"
+                  transform="rotate(180,0.125,0)"
+                  sodipodi:nodetypes="ccc" />
+              </marker>
+              <marker
+                style="overflow:visible"
+                id="Arrow1"
+                refX="0"
+                refY="0"
+                orient="auto-start-reverse"
+                inkscape:stockid="Arrow1"
+                markerWidth="4.0606604"
+                markerHeight="6.7071066"
+                viewBox="0 0 4.0606602 6.7071068"
+                inkscape:isstock="true"
+                inkscape:collect="always"
+                preserveAspectRatio="xMidYMid">
+                <path
+                  style="fill:none;stroke:context-stroke;stroke-width:1;stroke-linecap:butt"
+                  d="M 3,-3 0,0 3,3"
+                  id="path5057"
+                  transform="rotate(180,0.125,0)"
+                  sodipodi:nodetypes="ccc" />
+              </marker>
+            </defs>
+            <path
+              style="marker-start:url(#Arrow1);marker-end:url(#marker1148)"
+              d="M 13.549034,51.004801 H 85.994552"
+              id="path357" />
+            <path
+              style="marker-start:url(#Arrow1);marker-end:url(#marker1148)"
+              d="M 49.771793,14.782043 V 87.22756"
+              id="path373" />
+          </svg>
+          </q-btn>
         </div>
       </div>
-      <q-btn style="color:red" v-bind="btnAttrs" title="close" @click="closeApp()">✖</q-btn>
+      <q-btn class="close btnAttrs" v-bind="btnAttrs" title="close" @click="closeApp()">
+        <svg width="100%" height="auto" viewBox="0 0 100 100" version="1.1" id="svg5" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+          <path d="M 24.386641,24.386641 75.613359,75.613359" id="path357" />
+          <path d="M 75.613358,24.386641 24.386642,75.613359" id="path373" />
+        </svg>
+      </q-btn>
     </div>
   </div>
 </template>
@@ -182,7 +242,6 @@ const closeApp = async () => await eapi.closeApp()
   display: grid;
   grid-template-columns: 70% auto;
   width: 99%;
-  gap: 1%;
   position: absolute;
   top: 0;
 }
@@ -192,6 +251,11 @@ const closeApp = async () => await eapi.closeApp()
   user-select: none;
   -webkit-app-region: drag;
 }
+.btnAttrs * {
+  height: 18px !important;
+  stroke: var(--lightWhite);
+  stroke-width: 5px;
+}
 
 /* #windowButtons {
   display: flex;
@@ -203,5 +267,11 @@ const closeApp = async () => await eapi.closeApp()
   height: 1.2rem;
   background-color: var(--bgColor1);
   color: var(--fontColor1);
+  border-style:solid;
+  border-width:1px;
+  margin-left:-1px;
+  border-color:var(--bgColor2);
+  margin:2px -1px 2px 0;
+  font-size:0.8rem;
 }
 </style>
diff --git a/src/components/AnimEditor/AnimEditor.vue b/src/components/AnimEditor/AnimEditor.vue
@@ -31,7 +31,6 @@ const zoomTime = (e: WheelEvent) => ConfigM.zoomPx -= e.deltaY / ConfigM.numDeci
 
 <style scoped>
 #animatorCont {
-  border: 1px solid var(--bgColor1);
   /* box-shadow: 0 0 5px black; */
   /* height: 100%; */
   display: grid;

diff --git a/src/components/AnimEditor/ElsList/.ListAttr.vue.swp b/src/components/AnimEditor/ElsList/.ListAttr.vue.swp
diff --git a/src/components/AnimEditor/ElsList/ElsList.vue b/src/components/AnimEditor/ElsList/ElsList.vue
@@ -30,7 +30,7 @@ watch(() => ConfigM.editorScroll.y, (val) => {
 
 <style scoped>
 #elsListCont {
-  /* border-right: 1px solid black; */
+  border-right: 1px dashed #333;
   white-space: nowrap;
   /* overflow: hidden; */
   overflow-x: hidden;
@@ -42,8 +42,4 @@ watch(() => ConfigM.editorScroll.y, (val) => {
   padding-bottom: v-bind(timeSideOffsetPx + 'px');
 }
 
-::-webkit-scrollbar {
-  width: 0px;
-  /* height: 0px; */
-}
 </style>
diff --git a/src/components/AnimEditor/ElsList/ListAttr.vue b/src/components/AnimEditor/ElsList/ListAttr.vue
@@ -2,7 +2,7 @@
   <div class="list-el attr-cont" @click="toggleShowAttrs()"
     :title="JSON.stringify(el.attrs.map(x => `${x.key}: ${x.val}`))">
     &nbsp;<span v-for="d in el.depth">&nbsp;</span>
-    <span>{{ el.showAttrs ? '▲' : '▼' }}</span>
+    <span :class="`${ el.showAttrs ? 'rotate90' : '' } nav`">&gt;</span>
     <q-icon name="folder" title="attributes" /> attrs
     <!-- <q-icon name="add_circle_outline" title="add attribute" /> -->
   </div>

diff --git a/src/components/AnimEditor/ElsList/ListEl.vue b/src/components/AnimEditor/ElsList/ListEl.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="list-el" @click="toggleCollapse()" ref="cont">
     <span v-for="depth in el.depth">&nbsp;</span>
-    <span>{{ el.isUncollapsed ? '▲' : '▼' }}</span>
+    <span :class="`${ el.isUncollapsed ? 'rotate90' : '' } nav`">&gt;</span>
     <q-icon :name="getIcon(el.tagName ?? '')" :title="`<${el.tagName}>`" />
     {{ el.name }}
   </div>

diff --git a/src/components/AnimEditor/TimePicker.vue b/src/components/AnimEditor/TimePicker.vue
@@ -77,6 +77,8 @@ watch(() => ConfigM.editorScroll.x, (val) => {
   overflow-y: hidden;
   font-weight: 1000;
   font-size: .55rem;
+  padding:5px;
+  vertical-align:middle;
   user-select: none;
   /* margin-left: .5em; */
   /* border-left: .5em solid black; */

diff --git a/src/css/app.css b/src/css/app.css
@@ -6,7 +6,8 @@
   --listAttrsBgColor:  rgb(180, 180, 130); */
 
   --fontColor1: rgb(167, 167, 167);
-  --bgColor1: black;
+  --lightWhite: rgb(220, 220, 220);
+  --bgColor1: rgb(20, 20, 20);
   --bgColor2: rgb(70, 70, 70);
 
   --listElBgColor: rgb(14, 14, 14);
@@ -25,7 +26,6 @@ main {
   /* box-shadow: inset 0 0 0 1px orange;
   z-index: 9999;
   border: 1px solid var(--fontColor1); */
-  padding: 3px 4px;
 }
 
 .stepStyle {
@@ -41,26 +41,16 @@ main {
   margin: 0 .2em;
 }
 
-::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
-}
-
-::-webkit-scrollbar-track {
-  background: #ffffff00;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgb(0, 0, 0);
-  border-radius: 4px;
-  /* box-shadow: 0 0 5px black; IT WAS GLITCHING :( */
-  border: 1px solid grey;
+.close {
+  background-color: var(--bgColor2);
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: grey;
+.nav {
+  font-size:14px;
+  line-height:1;
+  margin-right:3px;
 }
-
-::-webkit-scrollbar-corner {
-  background: transparent;
+.rotate90.nav {
+  transform:rotate(90deg);
+  display:inline-block;
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -18,13 +18,10 @@ import ActionButtons from 'src/components/ActionButtons.vue';
 <style scoped>
 #qHeader {
   height: 1.4rem;
-  background-color: black;
+  background-color: #333;;
 }
 
 #qPageContainer {
-  /* margin-top: .2rem; */
-  /* height: calc(100vh - 1.8rem); */
-  /* box-shadow: inset 0 0 0px 1px yellow; */
   height: 100vh;
 }
 </style>
diff --git a/src/modules/eapi_m.ts b/src/modules/eapi_m.ts
@@ -15,7 +15,7 @@ export const eapi = {
     loadProject: async (p?: loadProjectParams): Promise<loadProjectResult> => _eapi.loadProject(p),
     saveProject: async (p: saveProjectParams) => _eapi.saveProject(p),
     exportSvg: async (svgStr: string) => _eapi.exportSvg(svgStr),
-
+    askInkscapePath: async () => _eapi.askInkscapePath(),
     updatedSvg: async (cb: any) => _eapi.updatedSvg(cb),
 
     updateTempSvg: async (p: updateTempSvgParams) => _eapi.updateTempSvg(p),

diff --git a/src/modules/project_m.ts b/src/modules/project_m.ts
@@ -22,6 +22,7 @@ export abstract class ProjectM {
 
 
     static async openSvgWithInkscape() { eapi.openSvgWithInkscape() }
+    static async askInkscapePath() { eapi.askInkscapePath() }
     static async openSvgWithDefaultProgram() { eapi.openSvgWithDefaultProgram() }
 
     static async loadProject(p?: loadProjectParams): Promise<boolean> {

diff --git a/src/pages/AnimatorPage.vue b/src/pages/AnimatorPage.vue
@@ -27,7 +27,6 @@ onBeforeMount(() => {
 #page {
   display: grid;
   grid-template-columns: 70% auto;
-  gap: 1%;
   /* overflow: visible; */
   height: inherit;
 }

diff --git a/src/pages/CodePage.vue b/src/pages/CodePage.vue
@@ -21,6 +21,5 @@ import AnimViewer from "../components/AnimViewer.vue";
   display: grid;
   grid-template-columns: 70% auto;
   width: 99%;
-  gap: 1%;
 }
 </style>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
@@ -20,6 +20,7 @@
           {{ filePath }}
         </q-item>
       </q-list>
+      <q-btn class="homeItem" icon="download" @click="askInkscapePath()">Change inkscape path</q-btn>
     </div>
   </q-page>
 </template>
@@ -39,6 +40,10 @@ async function createProject(doImportSvg = false) {
   if (success) await router.push({ path: '/', query: { refreshApp: true } as any })
 }
 
+async function askInkscapePath() {
+  const newInkscapePath = await ProjectM.askInkscapePath()
+  if (newInkscapePath) exec(`"${newInkscapePath}" ${tempFilePath()}`)
+}
 const searchStr = ref('')
 
 const loadProject = async (path: string) => {