fix #121: adding SVG support

lacymorrow · Apr 5, 2022 · 9473597 · 9473597
1 parent 9c0bec3
commit 9473597
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 18 deletions.
diff --git a/src/main/actions.js b/src/main/actions.js
@@ -1,5 +1,5 @@
 const keyboard = require( './keyboard' )
-const log = require( './windows' )
+const log = require( './log' )
 const windows = require( './windows' )
 
 const escape = () => {

diff --git a/src/main/crossover.js b/src/main/crossover.js
@@ -431,9 +431,9 @@ const syncSettings = ( options = preferences.preferences ) => {
 		set.sight( options.crosshair?.reticle, win )
 		set.size( options.crosshair?.size, win )
 
-		// set.fillColor( options.crosshair?.fillColor, win )
-		// set.strokeColor( options.crosshair?.strokeColor, win )
-		// set.strokeColor( options.crosshair?.strokeColor, win )
+		set.fillColor( options.crosshair?.fillColor, win )
+		set.strokeColor( options.crosshair?.strokeColor, win )
+		set.strokeColor( options.crosshair?.strokeColor, win )
 
 	} )
 

diff --git a/src/main/electron-preferences.js b/src/main/electron-preferences.js
@@ -33,6 +33,9 @@ const preferences = new ElectronPreferences( {
 			opacity: 80,
 			reticle: 'dot',
 			reticleSize: 80,
+			fillColor: 'inherit',
+			strokeColor: 'inherit',
+			strokeWidth: 0,
 		},
 		mouse: {
 			followMouse: [],
@@ -166,8 +169,8 @@ const preferences = new ElectronPreferences( {
 						label: 'Stroke Width',
 						key: 'strokeWidth',
 						type: 'slider',
-						min: 1,
-						max: 25,
+						min: 0,
+						max: 20,
 						help: 'SVG stroke width.',
 					},
 				],

diff --git a/src/main/register.js b/src/main/register.js
@@ -9,6 +9,13 @@ const windows = require( './windows' )
 
 const appEvents = () => {
 
+	app.on( 'activate', async () => {
+
+		// Will return current window if exists
+		await windows.init()
+
+	} )
+
 	// Opening 2nd instance focuses app
 	app.on( 'second-instance', async () => {
 
@@ -57,13 +64,6 @@ const appEvents = () => {
 
 	app.on( 'window-all-closed', app.quit )
 
-	app.on( 'activate', async () => {
-
-		// Will return current window if exists
-		await windows.init()
-
-	} )
-
 }
 
 const events = () => {

diff --git a/src/main/reset.js b/src/main/reset.js
@@ -0,0 +1,72 @@
+const electron = require( 'electron' )
+const actions = require( './actions' )
+const log = require( './log' )
+const electronPreferences = require( './electron-preferences' )
+const sound = require( './sound' )
+const windows = require( './windows' )
+
+const app = skipFullReset => {
+
+	sound.play( 'RESET' )
+
+	// Close extra crosshairs
+	windows.closeAllShadows()
+
+	// Hides chooser and preferences
+	actions.escape()
+
+	windows.center()
+	reset.preferences()
+
+	if ( !skipFullReset ) {
+
+		// todo - circular dependency using:
+		// init()
+		// Using app.relaunch to cheat
+
+		// or, to restart completely
+		electron.app.relaunch()
+		electron.app.exit()
+
+	}
+
+}
+
+const preference = key => {
+
+	try {
+
+		const [ groupId, id ] = key.split( '.' )
+		const group = electronPreferences.defaults[groupId]
+		const defaultValue = group[id]
+
+		log.info( `Setting default value ${defaultValue} for ${key}` )
+		electronPreferences.value( key, defaultValue )
+
+	} catch ( error ) {
+
+		log.warn( error )
+
+	}
+
+}
+
+// Temp until implemented in electron-preferences
+const preferences = () => {
+
+	const { defaults } = electronPreferences
+	for ( const [ key, value ] of Object.entries( defaults ) ) {
+
+		electronPreferences.value( key, value )
+
+	}
+
+}
+
+const reset = {
+	app,
+	preference,
+	preferences,
+}
+
+module.exports = reset
diff --git a/src/renderer/chooser.js b/src/renderer/chooser.js
@@ -81,6 +81,8 @@
 
 		img.addEventListener( 'click', event => {
 
+			console.log( `Select crosshair: ${file}` )
+
 			setCrosshair( file )
 
 			// Set 'selected' border color

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -6,6 +6,7 @@
 		<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
 		<link rel="stylesheet" href="styles/dist/index.css">
 		<script type="text/javascript" src="vendor/feather/feather-icons.min.js"></script>
+		<script type="text/javascript" src="vendor/inline-svg/inline-svg.min.js"></script>
 		<script type="text/javascript" src="vendor/random-color/randomColor.min.js"></script>
 	</head>
 	<body>

diff --git a/src/renderer/renderer.js b/src/renderer/renderer.js
@@ -1,4 +1,4 @@
-/* global feather, randomColor */
+/* global feather, inlineSVG, randomColor */
 
 ( () => {
 
@@ -10,7 +10,13 @@
 	const settingsBtn = document.querySelector( '.settings-button' )
 	const container = document.querySelector( '.container' )
 	const crosshairElement = document.querySelector( '#crosshair' )
-	const crosshairImg = document.querySelector( '#crosshairImg' )
+	let crosshairImg = document.querySelector( '#crosshairImg' )
+
+	const img = document.createElement( 'IMG' )
+	img.id = 'crosshairImg'
+	img.draggable = false
+	img.addEventListener( 'error', event => console.log( event ) )
+	img.src = '../static/crosshairs/Actual/leupold-dot.png'
 
 	// OS Specific
 	if ( window.crossover?.isMacOs ) {
@@ -81,14 +87,45 @@
 
 	const setCrosshair = crosshair => {
 
+		// Don't set if same image already set
+		if ( document.querySelector( '#crosshairImg' ).dataset.src === crosshair ) {
+
+			return
+
+		}
+
+		// Reset to IMG element if SVG
+		if ( document.querySelector( 'svg#crosshairImg' ) ) {
+
+			document.querySelector( '#crosshairImg' ).remove()
+			crosshairElement.prepend( img.cloneNode( true ) )
+
+		}
+
+		crosshairImg = document.querySelector( '#crosshairImg' )
+
+		// Hide if no crosshair selected
 		if ( crosshair === 'none' ) {
 
 			crosshairImg.style.display = 'none'
 
-		} else {
+		}
+
+		// Set image
+		crosshairImg.src = crosshair
+		crosshairImg.dataset.src = crosshair
+		crosshairImg.style.display = 'block'
 
-			crosshairImg.src = crosshair
-			crosshairImg.style.display = 'block'
+		// Inline if SVG
+		if ( crosshair.split( '.' ).pop() === 'svg' ) {
+
+			inlineSVG.init( {
+				svgSelector: '#crosshairImg', // the class attached to all images that should be inlined
+			}, () => {
+
+				console.log( 'SVG inlined' )
+
+			} )
 
 		}
 

diff --git a/src/renderer/vendor/inline-svg/inline-svg.min.js b/src/renderer/vendor/inline-svg/inline-svg.min.js