if/SymphonyElectron
1
0
Fork 0
mirror of https://github.com/finos/SymphonyElectron.git synced 2025-02-25 18:55:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

SDA-2710 Fix broken image icon bug on windows

Browse Source
This commit is contained in:
psjostrom 2020-12-01 16:35:29 +01:00
parent 128bb9c0e3
commit a0b2a22ae2
4 changed files with 29 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -166,6 +166,7 @@
"react-dom": "16.13.0",
"ref-napi": "1.4.3",
"rimraf": "^3.0.2",
"save-svg-as-png": "^1.4.17",
"shell-path": "2.1.0"
},
"optionalDependencies": {

2
spec/snippingTool.spec.tsx
View File

@ -82,7 +82,7 @@ describe('Snipping Tool', () => {
wrapper.update();
await waitForPromisesToResolve();
expect(spy).toBeCalledWith('upload-snippet', {
base64PngData: 'NO CANVAS',
mergedImageData: 'MERGE_FAIL',
screenSnippetPath: '',
});
});

37
src/app/screen-snippet-handler.ts
View File

@ -287,20 +287,29 @@ class ScreenSnippet {
* @param webContents A browser window's web contents object
*/
private uploadSnippet(webContents: Electron.webContents) {
ipcMain.once('upload-snippet', async (_event, snippetData: { screenSnippetPath: string, base64PngData: string }) => {
windowHandler.closeSnippingToolWindow();
const [type, data] = snippetData.base64PngData.split(',');
const payload = {
message: 'SUCCESS',
data,
type,
};
this.deleteFile(snippetData.screenSnippetPath);
logger.info(
`screen-snippet-handler: Snippet captured! Sending data to SFE`,
);
webContents.send('screen-snippet-data', payload);
await this.verifyAndUpdateAlwaysOnTop();
ipcMain.once('upload-snippet', async (_event, snippetData: { screenSnippetPath: string, mergedImageData: string }) => {
try {
windowHandler.closeSnippingToolWindow();
const [type, data] = snippetData.mergedImageData.split(',');
const payload = {
message: 'SUCCESS',
data,
type,
};
this.deleteFile(snippetData.screenSnippetPath);
logger.info(
`screen-snippet-handler: Snippet captured! Sending data to SFE`,
);
webContents.send('screen-snippet-data', payload);
await this.verifyAndUpdateAlwaysOnTop();
}
catch (error) {
await this.verifyAndUpdateAlwaysOnTop();
logger.error(
`screen-snippet-handler: screen capture failed with error: ${error}!`,
);
}
});
}
}

57
src/renderer/components/snipping-tool.tsx
View File

@ -1,5 +1,6 @@
import { ipcRenderer } from 'electron';
import * as React from 'react';
import { svgAsPngUri } from 'save-svg-as-png';
import { i18n } from '../../common/i18n-preload';
import { analytics, AnalyticsElements, ScreenSnippetActionTypes } from './../../app/analytics-handler';
import AnnotateArea from './annotate-area';
@ -168,57 +169,6 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ existingPat
// Utility functions
const getBase64PngData = () => {
const canvas = document.createElement('canvas');
canvas.width = imageDimensions.width;
canvas.height = imageDimensions.height;
// Creates an in memory canvas for mounting img data without adding it to the DOM
const ctx = canvas?.getContext('2d') as CanvasRenderingContext2D;
if (!ctx) {
// Will only be the case in headless browsers, such as with unit tests
return 'NO CANVAS';
}
const backgroundImage = document.getElementById('backgroundImage') as HTMLImageElement;
// Fast lane in case there is no drawn SVG paths
if (paths.length === 0) {
ctx.drawImage(backgroundImage, 0, 0);
// Extracts base 64 png img data from the canvas
const data = canvas.toDataURL('image/png');
return data;
}
// Creates an in memory img without adding it to the DOM
const img = document.createElement('img');
const svg = document.getElementById('annotate-area') as HTMLImageElement;
// Parses SVG image to XML data
const svgData = new XMLSerializer().serializeToString(svg);
// Adds the extracted XML data to the in memory img
img.setAttribute(
'src',
'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))),
);
return new Promise((resolve, reject) => {
// Listens to when the img is loaded in memory and adds the data from the SVG paths + screenSnippet to the canvas
img.onload = () => {
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(img, 0, 0);
try {
// Extracts base 64 png img data from the canvas
const data = canvas.toDataURL('image/png');
resolve(data);
} catch (e) {
reject(e);
}
};
});
};
const markChosenColor = (colors: IColor[], chosenColor: string) => {
return colors.map((color) => {
if (color.rgbaColor === chosenColor) {
@ -246,12 +196,13 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ existingPat
};
const done = async () => {
const base64PngData = await getBase64PngData();
const svg = document.getElementById('annotate-area');
const mergedImageData = svg ? await svgAsPngUri(document.getElementById('annotate-area'), {}) : 'MERGE_FAIL';
analytics.track({
element: AnalyticsElements.SCREEN_SNIPPET,
action_type: ScreenSnippetActionTypes.CAPTURE_SENT,
});
ipcRenderer.send('upload-snippet', { screenSnippetPath, base64PngData });
ipcRenderer.send('upload-snippet', { screenSnippetPath, mergedImageData });
};
return (