From ef6f6580df6e8fbce913eecc1fe7e0f8caf1315b Mon Sep 17 00:00:00 2001 From: rejbasket <39080670+rejbasket@users.noreply.github.com> Date: Mon, 22 May 2023 22:33:19 +0200 Subject: Update electron version to v14.2.9 (#2214) Authored-by: rejbasket Co-authored-by: Kaalleen Co-authored-by: Lex Neva --- electron/src/index.ejs | 32 ---- electron/src/index.html | 20 +++ electron/src/lib/api.js | 18 ++- electron/src/lib/i18n.js | 22 ++- electron/src/main/index.dev.js | 32 ---- electron/src/main/index.js | 169 ++++++++++----------- electron/src/main/preload.js | 7 + electron/src/renderer/App.vue | 11 -- electron/src/renderer/assets/js/simulator.js | 64 ++++---- electron/src/renderer/assets/style/simulator.css | 41 +++-- .../src/renderer/components/InstallPalettes.vue | 123 --------------- electron/src/renderer/components/NotFound.vue | 12 ++ electron/src/renderer/components/Preferences.vue | 55 ++++--- electron/src/renderer/components/Simulator.vue | 17 +-- electron/src/renderer/main.js | 151 +++++++----------- electron/src/renderer/router/index.js | 44 +++--- 16 files changed, 323 insertions(+), 495 deletions(-) delete mode 100644 electron/src/index.ejs create mode 100644 electron/src/index.html delete mode 100644 electron/src/main/index.dev.js create mode 100644 electron/src/main/preload.js delete mode 100644 electron/src/renderer/components/InstallPalettes.vue create mode 100644 electron/src/renderer/components/NotFound.vue (limited to 'electron/src') diff --git a/electron/src/index.ejs b/electron/src/index.ejs deleted file mode 100644 index 381a86c7..00000000 --- a/electron/src/index.ejs +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - inkstitch-gui - <% if (htmlWebpackPlugin.options.nodeModules) { %> - - - <% } %> - - -
- - <% if (!process.browser) { %> - - <% } %> - - - - diff --git a/electron/src/index.html b/electron/src/index.html new file mode 100644 index 00000000..1eb6fbab --- /dev/null +++ b/electron/src/index.html @@ -0,0 +1,20 @@ + + + + + + + +
+ + + diff --git a/electron/src/lib/api.js b/electron/src/lib/api.js index b6aa74e2..63818541 100644 --- a/electron/src/lib/api.js +++ b/electron/src/lib/api.js @@ -6,11 +6,19 @@ * */ -const axios = require('axios') -const queryString = require('query-string') +import axios from 'axios'; +import flaskserverport from './flaskserverport.json' -var port = queryString.parse(global.location.search).port +if (flaskserverport.port === undefined) { + var theflaskport = window.inkstitchAPI.flaskport() + console.log("Installed mode") + console.log(theflaskport) +} else { + var theflaskport = flaskserverport.port + console.log("Dev mode") + console.log(theflaskport) +} -module.exports = axios.create({ - baseURL: `http://127.0.0.1:${port}/` +export const inkStitch = axios.create({ + baseURL: `http://127.0.0.1:${theflaskport}` }) diff --git a/electron/src/lib/i18n.js b/electron/src/lib/i18n.js index de56fc8f..2a7c4f66 100644 --- a/electron/src/lib/i18n.js +++ b/electron/src/lib/i18n.js @@ -6,22 +6,33 @@ * */ -module.exports.selectLanguage = function (translations) { +export function selectLanguage(translations, flaskport) { + var port = flaskport + // get language from flask server, process in modern electron isn't exposed to renderer + const request = new XMLHttpRequest(); + request.open('GET', `http://127.0.0.1:${port}/languages`, false) + request.send(null) + var process = undefined + + if (request.status === 200) { + process = JSON.parse(request.responseText) + } // get a list of available translations var availableTranslations = ['en_US']; - for(var k in translations) availableTranslations.push(k); + for (var k in translations) availableTranslations.push(k); var lang = undefined; // get system language / Inkscape language ['LANG', 'LC_MESSAGES', 'LC_ALL', 'LANGUAGE'].forEach(language => { - if (process.env[language]) { + if (process[language]) { // split encoding information, we don't need it - var current_lang = process.env[language].split(".")[0]; + var current_lang = process[language].split('.')[0]; + if (current_lang.length == 2) { // current language has only two letters (e.g. en), // compare with available languages and if present, set to a long locale name (e.g. en_US) - lang = availableTranslations.find(elem => elem.startsWith(current_lang)); + lang = availableTranslations.find((elem) => elem.startsWith(current_lang)); } else { lang = current_lang; } @@ -33,3 +44,4 @@ module.exports.selectLanguage = function (translations) { } return lang } + diff --git a/electron/src/main/index.dev.js b/electron/src/main/index.dev.js deleted file mode 100644 index 7fc8c159..00000000 --- a/electron/src/main/index.dev.js +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Authors: see git history - * - * Copyright (c) 2010 Authors - * Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details. - * - */ - -/** - * This file is used specifically and only for development. It installs - * `electron-debug` & `vue-devtools`. There shouldn't be any need to - * modify this file, but it can be used to extend your development - * environment. - */ - -/* eslint-disable */ - -// Install `electron-debug` with `devtron` -require('electron-debug')({ showDevTools: true }) - -// Install `vue-devtools` -require('electron').app.on('ready', () => { - let installExtension = require('electron-devtools-installer') - installExtension.default(installExtension.VUEJS_DEVTOOLS) - .then(() => {}) - .catch(err => { - console.log('Unable to install `vue-devtools`: \n', err) - }) -}) - -// Require `main` process to boot app -require('./index') diff --git a/electron/src/main/index.js b/electron/src/main/index.js index d6f259fe..546580ea 100644 --- a/electron/src/main/index.js +++ b/electron/src/main/index.js @@ -8,113 +8,104 @@ 'use strict' -import {app, BrowserWindow, ipcMain, dialog, shell} from 'electron' -var fs = require('fs'); -var path = require('path'); -var tmp = require('tmp'); - +const path = require('path') +const fs = require('fs') +const tmp = require('tmp') const url = require('url') +const { app, BrowserWindow, ipcMain, dialog, shell, Menu} = require('electron') +// url for printPDF flask server which is used in development and production mode -/** - * Set `__static` path to static files in production - * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html - */ -if (process.env.NODE_ENV === 'development') { - // we were run as electron --inspect=5858 path/to/main.js - // so get rid of the first two args - console.log("args " + process.argv) - process.argv.shift() - process.argv.shift() -} else { - global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\') -} +var port = process.env.FLASKPORT +const printPdfUrl = `http://127.0.0.1:${port}/` -let mainWindow +const isDev = process.env.BABEL_ENV === 'development' -var target = process.argv[1] || ""; +var target = null +// Finds this url in the argv array and sets to target value +if (process.argv.includes(printPdfUrl)) { + target = printPdfUrl +} else { + target = process.argv[1] || ""; +} var targetURL = url.parse(target) -var winURL = null; +var winURL = null -// Print PDF will give us a full URL to a flask server, bypassing Vue entirely. // Eventually this will be migrated to Vue. if (targetURL.protocol) { - winURL = target + winURL = target } else { - if (process.env.NODE_ENV === 'development') { - winURL = `http://localhost:9080/?${targetURL.query || ""}#${targetURL.pathname || ""}` - } else { - winURL = `file://${__dirname}/index.html?${targetURL.query || ""}#${targetURL.pathname || ""}`; - } + winURL = `file://${__dirname}/index.html?${targetURL.query || ""}#${targetURL.pathname || ""}` } function createWindow() { - /** - * Initial window options - */ - mainWindow = new BrowserWindow({ - height: 563, - useContentSize: true, - width: 1000, - webPreferences: {nodeIntegration: true} - }) - - mainWindow.loadURL(winURL) - mainWindow.maximize() - - mainWindow.on('closed', () => { - mainWindow = null - }) -} - -app.on('ready', createWindow) - -app.on('window-all-closed', () => { - app.quit() -}) - -app.on('activate', () => { - if (mainWindow === null) { - createWindow() - } -}) - -ipcMain.on('save-pdf', function (event, pageSize) { - mainWindow.webContents.printToPDF({"pageSize": pageSize}, function(error, data) { - dialog.showSaveDialog(mainWindow, {"defaultPath": "inkstitch.pdf", - "filters": [{ name: 'PDF', extensions: ['pdf'] }] - }, function(filename, bookmark) { - if (typeof filename !== 'undefined') - fs.writeFileSync(filename, data, 'utf-8'); + const mainWindow = new BrowserWindow({ + useContentSize: true, + webPreferences: { + preload: path.join(__dirname, 'preload.js'), + nodeIntegration: false, + contextIsolation: true, + }, + }) + if (isDev) { + // printPDF in development mode will have dev tools activated + // Vuejs parts of Ink/Stich will not and dev tools must be accessed though the menu of electron window + mainWindow.loadURL(winURL) + mainWindow.webContents.openDevTools() + } else { + mainWindow.loadURL(winURL) + } + // This will remove the menu from the release, in dev mode the menu is available. + if(process.platform === "darwin" && !isDev) { + Menu.setApplicationMenu(Menu.buildFromTemplate([])); + } if(process.platform === "win32" || process.platform === "linux" && !isDev) { + mainWindow.removeMenu(); + } + mainWindow.maximize() + // save to PDF + ipcMain.on('save-pdf', (event, pageSize) => { + const webContents = event.sender + const win = BrowserWindow.fromWebContents(webContents) + const saveOpt = { + title: "Save PDF", + defaultPath: "Inkstitch.pdf", + bookmark: "true", + } + win.webContents.printToPDF({}).then(pageSize => { + dialog.showSaveDialog(saveOpt).then(filename => { + const { filePath } = filename; + fs.writeFileSync(filePath, pageSize, (error) => { + if (error) { + throw error + } + console.log(`Wrote PDF successfully to ${pdfPath}`) + }) + }).catch(error => { + console.log(`Failed to write PDF to ${pdfPath}: `, error) }) + }) }) -}) - -ipcMain.on('open-pdf', function (event, pageSize) { - mainWindow.webContents.printToPDF({"pageSize": pageSize}, function(error, data) { + // openPDF + ipcMain.on('open-pdf', (event, pageSize) => { + const webContents = event.sender + const win = BrowserWindow.fromWebContents(webContents) + win.webContents.printToPDF({}).then(pageSize => { tmp.file({keep: true, discardDescriptor: true}, function(err, path, fd, cleanupCallback) { - fs.writeFileSync(path, data, 'utf-8'); - shell.openItem(path); + fs.writeFileSync(path, pageSize, 'utf-8'); + shell.openPath(path); + }) }) }) -}) - - -/** - * Auto Updater - * - * Uncomment the following code below and install `electron-updater` to - * support auto updating. Code Signing with a valid certificate is required. - * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating - */ - -/* -import { autoUpdater } from 'electron-updater' +} -autoUpdater.on('update-downloaded', () => { - autoUpdater.quitAndInstall() +app.whenReady().then(() => { + createWindow() + app.on('activate', () => { + if(BrowserWindow.getAllWindows().length === 0) { + createWindow() + } + }) }) -app.on('ready', () => { - if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() +app.on('window-all-closed', () => { + app.quit() }) - */ diff --git a/electron/src/main/preload.js b/electron/src/main/preload.js new file mode 100644 index 00000000..b7d1c02a --- /dev/null +++ b/electron/src/main/preload.js @@ -0,0 +1,7 @@ +const { contextBridge, ipcRenderer } = require ('electron') + +contextBridge.exposeInMainWorld('inkstitchAPI', { + savepdf: (pageSize) => { ipcRenderer.send('save-pdf', pageSize) }, + openpdf: (pageSize) => { ipcRenderer.send('open-pdf', pageSize) }, + flaskport: () => process.env.FLASKPORT, +}) diff --git a/electron/src/renderer/App.vue b/electron/src/renderer/App.vue index 2e5bbb9d..b98b1399 100644 --- a/electron/src/renderer/App.vue +++ b/electron/src/renderer/App.vue @@ -9,20 +9,9 @@ - - - diff --git a/electron/src/renderer/assets/js/simulator.js b/electron/src/renderer/assets/js/simulator.js index 186e3e30..8a0423f3 100644 --- a/electron/src/renderer/assets/js/simulator.js +++ b/electron/src/renderer/assets/js/simulator.js @@ -5,19 +5,18 @@ * Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details. * */ +import { inkStitch } from '../../../lib/api.js' -const inkStitch = require("../../../lib/api") -const Mousetrap = require("mousetrap") import { SVG } from '@svgdotjs/svg.js' -require('@svgdotjs/svg.panzoom.js/src/svg.panzoom.js') -require('@svgdotjs/svg.filter.js') -const svgpath = require('svgpath') +import '@svgdotjs/svg.panzoom.js' +import '@svgdotjs/svg.filter.js' +import svgpath from 'svgpath' import Loading from 'vue-loading-overlay'; import 'vue-loading-overlay/dist/vue-loading.css'; +import { reactive, toRefs } from 'vue' import VueSlider from 'vue-slider-component' -import 'vue-slider-component/theme/default.css' - -const throttle = require('lodash.throttle') +import 'vue-slider-component/theme/antd.css' +import throttle from 'lodash/throttle' function SliderMark(command, icon) { this.label = "" @@ -31,6 +30,10 @@ export default { Loading, VueSlider }, + setup() { + const data = reactive({ value: 0 }) + return toRefs(data) + }, data: function () { return { loading: false, @@ -511,15 +514,23 @@ export default { }, generatePage () { this.$refs.simulator.style.backgroundColor = this.page_specs.deskcolor + let page = this.svg.rect(this.page_specs.width, this.page_specs.height) .move(-this.stitchPlan.bounding_box[0],-this.stitchPlan.bounding_box[1]) .fill(this.page_specs.pagecolor) - .stroke({width: 1, color: 'black'}) - .filterWith(add => { - let blur = add.offset(2,2).in(add.$sourceAlpha).gaussianBlur(2) - add.blend(add.$source, blur) - }) + .stroke({width: 0.1, color: this.page_specs.bordercolor}) .back() + + if (this.page_specs.showpageshadow === "true") { + let shadow = this.svg.rect(this.page_specs.width, this.page_specs.height) + .move(-this.stitchPlan.bounding_box[0],-this.stitchPlan.bounding_box[1]) + .fill(this.page_specs.bordercolor) + .filterWith(add => { + let blur = add.offset(.5,.5).in(add.$source).gaussianBlur(.5) + }) + .back() + } + this.page_specs["bbox"] = page.bbox() }, zoomDesign () { @@ -606,29 +617,30 @@ export default { this.generateColorSections() this.generateScale() this.generateCursor() - + this.resizeCursor() + this.loading = false // v-on:keydown doesn't seem to work, maybe an Electron issue? - Mousetrap.bind("up", this.animationSpeedUp) - Mousetrap.bind("down", this.animationSlowDown) - Mousetrap.bind("left", this.animationReverse) - Mousetrap.bind("right", this.animationForward) - Mousetrap.bind("pagedown", this.animationPreviousCommand) - Mousetrap.bind("pageup", this.animationNextCommand) - Mousetrap.bind("space", this.toggleAnimation) - Mousetrap.bind("+", this.animationForwardOneStitch) - Mousetrap.bind("-", this.animationBackwardOneStitch) - Mousetrap.bind("]", this.zoomDesign) - Mousetrap.bind("[", this.zoomPage) + this.$mousetrap.bind("up", this.animationSpeedUp) + this.$mousetrap.bind("down", this.animationSlowDown) + this.$mousetrap.bind("left", this.animationReverse) + this.$mousetrap.bind("right", this.animationForward) + this.$mousetrap.bind("pagedown", this.animationPreviousCommand) + this.$mousetrap.bind("pageup", this.animationNextCommand) + this.$mousetrap.bind("space", this.toggleAnimation) + this.$mousetrap.bind("+", this.animationForwardOneStitch) + this.$mousetrap.bind("-", this.animationBackwardOneStitch) + this.$mousetrap.bind("]", this.zoomDesign) + this.$mousetrap.bind("[", this.zoomPage) this.svg.on('zoom', this.resizeCursor) - this.resizeCursor() inkStitch.get('page_specs').then(response => { this.page_specs = response.data this.generatePage() }) + this.start() }) } diff --git a/electron/src/renderer/assets/style/simulator.css b/electron/src/renderer/assets/style/simulator.css index 64047a7e..e938cbe3 100644 --- a/electron/src/renderer/assets/style/simulator.css +++ b/electron/src/renderer/assets/style/simulator.css @@ -5,11 +5,10 @@ * Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details. * */ - -* { - box-sizing: border-box; + * { + padding: 1px; + margin: 1px; } - .loading-icon { text-align: center; margin-bottom: 1rem; @@ -32,7 +31,7 @@ button { align-items: flex-start; text-align: center; cursor: default; - background-color: buttonface; + background: linear-gradient(0deg, rgba(169,169,169,1) 0%, rgba(255,255,255,1) 68%, rgba(227,227,227,1) 100%); box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; @@ -183,7 +182,7 @@ button.pressed { } .vue-slider { - height: 25px !important; + height: 10px !important; margin-bottom: 14px; } @@ -203,7 +202,7 @@ button.pressed { margin-right: 10px; } -.slider-container::v-deep .vue-slider-mark-step { +.slider-container :deep(.vue-slider-mark-step) { width: 2px; height: 20px; border-radius: 2px; @@ -212,26 +211,26 @@ button.pressed { box-shadow: inset 1px 0 1px #ffffffbd, inset -1px 0 1px black; } -.slider-container::v-deep .vue-slider-mark:first-child .vue-slider-mark-step, -.slider-container::v-deep .vue-slider-mark:last-child .vue-slider-mark-step { +.slider-container :deep(.vue-slider-mark:first-child .vue-slider-mark-step), +.slider-container :deep(.vue-slider-mark:last-child .vue-slider-mark-step) { display: block; } -.slider-container::v-deep .vue-slider-rail { +.slider-container :deep(.vue-slider-rail) { border: 1px solid #dedede; } -.slider-container::v-deep .vue-slider-process { +.slider-container :deep(.vue-slider-process) { border-radius: 0; box-shadow: inset 0px 2px 2px #ffffff80, inset 0px -2px 2px #0000002e; } -.slider-container::v-deep .vue-slider-process:first-child { +.slider-container :deep(.vue-slider-process:first-child) { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } -.slider-container::v-deep .vue-slider-process:nth-last-child(3) { +.slider-container :deep(.vue-slider-process:nth-last-child(3)) { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } @@ -247,20 +246,20 @@ button.pressed { } .slider-label-trim { - transform: scale(1, 0.75) translate(-50%, -9px); + transform: scale(1, 0.75) translate(-50%, -9px) !important;; } .slider-label-stop { font-size: 1.2rem; - transform: translate(-50%, 12px); + transform: translate(-50%, 12px) !important;; } .slider-label-jump { - transform: translate(-50%, -50px); + transform: translate(-50%, -50px) !important;; } .slider-label-color-change { - transform: translate(-50%, 10px); + transform: translate(-50%, 10px) !important;; } .current-stitch-input { @@ -286,23 +285,23 @@ button.pressed { /* we need ::v-deep here because the svg tag is added by svg.js and so Vue can't add the data-v-* attribute */ -div.simulator::v-deep svg.simulation { +div.simulator :deep(svg.simulation) { flex-grow: 1; flex-shrink: 1; order: -2; margin-bottom: -48px; } -div.simulator::v-deep svg.simulation-scale { +div.simulator :deep(svg.simulation-scale) { height: 50px; order: -1; margin-left: 5px; } -div.simulator::v-deep .simulation-scale-label { +div.simulator :deep(.simulation-scale-label) { font-size: 14px; } -div.simulator::v-deep .cursor { +div.simulator :deep(.cursor) { /* not sure what to add here to make it more visible */ } diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue deleted file mode 100644 index 3608f858..00000000 --- a/electron/src/renderer/components/InstallPalettes.vue +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - diff --git a/electron/src/renderer/components/NotFound.vue b/electron/src/renderer/components/NotFound.vue new file mode 100644 index 00000000..4accf901 --- /dev/null +++ b/electron/src/renderer/components/NotFound.vue @@ -0,0 +1,12 @@ + + + diff --git a/electron/src/renderer/components/Preferences.vue b/electron/src/renderer/components/Preferences.vue index f68c942d..101f1b8a 100644 --- a/electron/src/renderer/components/Preferences.vue +++ b/electron/src/renderer/components/Preferences.vue @@ -1,13 +1,22 @@ + +