Implement export as SVG + improve style
This commit is contained in:
parent
2dcdf769f1
commit
aa29cd37ff
3 changed files with 49 additions and 24 deletions
|
@ -15,14 +15,14 @@ const toggleState = (
|
||||||
|
|
||||||
const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
|
const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
|
||||||
const [isHidden, setHidden] = React.useState(true);
|
const [isHidden, setHidden] = React.useState(true);
|
||||||
const buttonListClasses = isHidden ? 'opacity-0' : 'opacity-100';
|
const buttonListClasses = isHidden ? 'invisible opacity-0' : 'visible opacity-100';
|
||||||
const icon = isHidden
|
const icon = isHidden
|
||||||
? <MenuIcon className="floating-btn" />
|
? <MenuIcon className="floating-btn" />
|
||||||
: <XIcon className="floating-btn" />;
|
: <XIcon className="floating-btn" />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={props.className}>
|
<div className={props.className}>
|
||||||
<div className={`transition-all ${buttonListClasses}`}>
|
<div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
|
||||||
{ props.children }
|
{ props.children }
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
|
|
|
@ -18,6 +18,7 @@ interface ISVGState {
|
||||||
|
|
||||||
export class SVG extends React.PureComponent<ISVGProps> {
|
export class SVG extends React.PureComponent<ISVGProps> {
|
||||||
public state: ISVGState;
|
public state: ISVGState;
|
||||||
|
public static ID = 'svg';
|
||||||
|
|
||||||
constructor(props: ISVGProps) {
|
constructor(props: ISVGProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -47,6 +48,7 @@ export class SVG extends React.PureComponent<ISVGProps> {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div id={SVG.ID}>
|
||||||
<ReactSVGPanZoom
|
<ReactSVGPanZoom
|
||||||
width={window.innerWidth}
|
width={window.innerWidth}
|
||||||
height={window.innerHeight}
|
height={window.innerHeight}
|
||||||
|
@ -66,6 +68,8 @@ export class SVG extends React.PureComponent<ISVGProps> {
|
||||||
<Selector selected={this.props.selected} />
|
<Selector selected={this.props.selected} />
|
||||||
</svg>
|
</svg>
|
||||||
</ReactSVGPanZoom>
|
</ReactSVGPanZoom>
|
||||||
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { UploadIcon } from '@heroicons/react/outline';
|
import { UploadIcon, PhotographIcon } from '@heroicons/react/outline';
|
||||||
import './Editor.scss';
|
import './Editor.scss';
|
||||||
import Sidebar from './Components/Sidebar/Sidebar';
|
import Sidebar from './Components/Sidebar/Sidebar';
|
||||||
import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
|
import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
|
||||||
|
@ -258,7 +258,7 @@ class Editor extends React.Component<IEditorProps> {
|
||||||
} as IEditorState);
|
} as IEditorState);
|
||||||
}
|
}
|
||||||
|
|
||||||
public SaveEditor() {
|
public SaveEditorAsJSON() {
|
||||||
const exportName = 'state';
|
const exportName = 'state';
|
||||||
const spaces = import.meta.env.DEV ? 4 : 0;
|
const spaces = import.meta.env.DEV ? 4 : 0;
|
||||||
const data = JSON.stringify(this.state, getCircularReplacer(), spaces);
|
const data = JSON.stringify(this.state, getCircularReplacer(), spaces);
|
||||||
|
@ -271,6 +271,20 @@ class Editor extends React.Component<IEditorProps> {
|
||||||
downloadAnchorNode.remove();
|
downloadAnchorNode.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public SaveEditorAsSVG() {
|
||||||
|
const svgWrapper = document.getElementById(SVG.ID) as HTMLElement;
|
||||||
|
const svg = svgWrapper.querySelector('svg') as SVGSVGElement;
|
||||||
|
const preface = '<?xml version="1.0" standalone="no"?>\r\n';
|
||||||
|
const svgBlob = new Blob([preface, svg.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
|
||||||
|
const svgUrl = URL.createObjectURL(svgBlob);
|
||||||
|
const downloadLink = document.createElement('a');
|
||||||
|
downloadLink.href = svgUrl;
|
||||||
|
downloadLink.download = 'newesttree.svg';
|
||||||
|
document.body.appendChild(downloadLink);
|
||||||
|
downloadLink.click();
|
||||||
|
document.body.removeChild(downloadLink);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Render the application
|
* Render the application
|
||||||
* @returns {JSX.Element} Rendered JSX element
|
* @returns {JSX.Element} Rendered JSX element
|
||||||
|
@ -339,10 +353,17 @@ class Editor extends React.Component<IEditorProps> {
|
||||||
<button
|
<button
|
||||||
className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
|
className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
|
||||||
title='Export as JSON'
|
title='Export as JSON'
|
||||||
onClick={() => this.SaveEditor()}
|
onClick={() => this.SaveEditorAsJSON()}
|
||||||
>
|
>
|
||||||
<UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
|
<UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
|
||||||
|
title='Export as SVG'
|
||||||
|
onClick={() => this.SaveEditorAsSVG()}
|
||||||
|
>
|
||||||
|
<PhotographIcon className="h-full w-full text-white align-middle items-center justify-center" />
|
||||||
|
</button>
|
||||||
</FloatingButton>
|
</FloatingButton>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue