Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 163: Remove the static form + rename some components for clarity
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
The static form is hard to maintain so I am removing it + rename some components for clarity + moved some utils files
This commit is contained in:
Eric Nguyen 2022-08-22 14:37:25 +00:00
parent 7e3ccdee99
commit 66ea3b1b64
21 changed files with 150 additions and 523 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/Components/Editor/Save.ts
View file

@ -1,85 +0,0 @@
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { getCircularReplacer } from '../../utils/saveload';
import { ID } from '../SVG/SVG';
import { IEditorState } from '../../Interfaces/IEditorState';
export function SaveEditorAsJSON(
history: IHistoryState[],
historyCurrentStep: number,
configuration: IConfiguration
): void {
const exportName = 'state.json';
const spaces = import.meta.env.DEV ? 4 : 0;
const editorState: IEditorState = {
history,
historyCurrentStep,
configuration
};
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (window.Worker) {
// use webworker for the stringify to avoid freezing
const myWorker = new Worker('workers/worker.js');
myWorker.postMessage({ editorState, spaces });
myWorker.onmessage = (event) => {
const data = event.data;
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(data)}`;
createDownloadNode(exportName, dataStr);
myWorker.terminate();
};
return;
}
const data = JSON.stringify(editorState, getCircularReplacer(), spaces);
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(data)}`;
createDownloadNode(exportName, dataStr);
}
export function SaveEditorAsSVG(): void {
const svgWrapper = document.getElementById(ID) as HTMLElement;
let svg = svgWrapper.querySelector('svg') as SVGSVGElement;
if (svg === undefined) {
throw new Error('[SaveEditorAsSVG] Missing <svg> element');
}
// Recover svg from SVG Viewer
svg = svg.cloneNode(true) as SVGSVGElement;
svg.removeAttribute('height');
svg.removeAttribute('width');
const mainSvg = svg.children[1].children;
svg.replaceChildren(...mainSvg);
// remove the selector
const group = svg.children[svg.children.length - 1];
group.removeChild(group.children[group.children.length - 1]);
// get svg source.
const serializer = new XMLSerializer();
let source = serializer.serializeToString(svg);
// add name spaces.
if (source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/) == null) {
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if (source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/) == null) {
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
// add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
// convert svg source to URI data scheme.
const url = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
createDownloadNode('state.svg', url);
}
function createDownloadNode(filename: string, datastring: string): void {
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.href = datastring;
downloadAnchorNode.download = filename;
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}