260 lines
7.9 KiB
Svelte
260 lines
7.9 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/environment';
|
|
import Card from '$lib/components/card/card.svelte';
|
|
import { env } from '$lib/util/env';
|
|
import { pakoSerde } from '$lib/util/serde';
|
|
import { stateStore } from '$lib/util/state';
|
|
import { logEvent } from '$lib/util/stats';
|
|
import { toBase64 } from 'js-base64';
|
|
import moment from 'moment';
|
|
const { krokiRendererUrl, rendererUrl } = env;
|
|
|
|
type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
|
|
|
|
const getFileName = (ext: string) =>
|
|
`mermaid-diagram-${moment().format('YYYY-MM-DD-HHmmss')}.${ext}`;
|
|
|
|
const getBase64SVG = (svg?: HTMLElement, width?: number, height?: number): string => {
|
|
svg?.setAttribute('height', `${height}px`);
|
|
svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage
|
|
if (!svg) {
|
|
svg = getSvgEl();
|
|
}
|
|
const svgString = svg.outerHTML
|
|
.replaceAll('<br>', '<br/>')
|
|
.replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
|
|
return toBase64(svgString);
|
|
};
|
|
|
|
const exportImage = (event: Event, exporter: Exporter) => {
|
|
const canvas: HTMLCanvasElement = document.createElement('canvas');
|
|
const svg: HTMLElement = document.querySelector('#container svg');
|
|
const box: DOMRect = svg.getBoundingClientRect();
|
|
canvas.width = box.width;
|
|
canvas.height = box.height;
|
|
if (imagemodeselected === 'width') {
|
|
const ratio = box.height / box.width;
|
|
canvas.width = userimagesize;
|
|
canvas.height = userimagesize * ratio;
|
|
} else if (imagemodeselected === 'height') {
|
|
const ratio = box.width / box.height;
|
|
canvas.width = userimagesize * ratio;
|
|
canvas.height = userimagesize;
|
|
}
|
|
|
|
const context = canvas.getContext('2d');
|
|
context.fillStyle = 'white';
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const image = new Image();
|
|
image.onload = exporter(context, image);
|
|
image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`;
|
|
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
};
|
|
|
|
const getSvgEl = () => {
|
|
const svgEl: HTMLElement = document
|
|
.querySelector('#container svg')
|
|
.cloneNode(true) as HTMLElement;
|
|
svgEl.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
|
|
const fontAwesomeCdnUrl = Array.from(document.head.getElementsByTagName('link'))
|
|
.map((l) => l.href)
|
|
.find((h) => h && h.includes('font-awesome'));
|
|
if (fontAwesomeCdnUrl == null) {
|
|
return svgEl;
|
|
}
|
|
const styleEl = document.createElement('style');
|
|
styleEl.innerText = `@import url("${fontAwesomeCdnUrl}");'`;
|
|
svgEl.prepend(styleEl);
|
|
return svgEl;
|
|
};
|
|
|
|
const simulateDownload = (download: string, href: string): void => {
|
|
const a = document.createElement('a');
|
|
a.download = download;
|
|
a.href = href;
|
|
a.click();
|
|
a.remove();
|
|
};
|
|
const downloadImage: Exporter = (context, image) => {
|
|
return () => {
|
|
const { canvas } = context;
|
|
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
simulateDownload(
|
|
getFileName('png'),
|
|
canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
|
|
);
|
|
};
|
|
};
|
|
|
|
const isClipboardAvailable = (): boolean => {
|
|
return Object.prototype.hasOwnProperty.call(window, 'ClipboardItem') as boolean;
|
|
};
|
|
|
|
const clipboardCopy: Exporter = (context, image) => {
|
|
return () => {
|
|
const { canvas } = context;
|
|
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
canvas.toBlob((blob) => {
|
|
try {
|
|
// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files
|
|
void navigator.clipboard.write([
|
|
/* eslint-disable no-undef */
|
|
// @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821
|
|
new ClipboardItem({
|
|
[blob.type]: blob
|
|
})
|
|
]);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
};
|
|
};
|
|
|
|
const onCopyClipboard = (event: Event) => {
|
|
exportImage(event, clipboardCopy);
|
|
logEvent('copyClipboard');
|
|
};
|
|
|
|
const onDownloadPNG = (event: Event) => {
|
|
exportImage(event, downloadImage);
|
|
logEvent('download', {
|
|
type: 'png'
|
|
});
|
|
};
|
|
|
|
const onDownloadSVG = () => {
|
|
simulateDownload(getFileName('svg'), `data:image/svg+xml;base64,${getBase64SVG()}`);
|
|
logEvent('download', {
|
|
type: 'svg'
|
|
});
|
|
};
|
|
|
|
const onCopyMarkdown = () => {
|
|
(document.getElementById('markdown') as HTMLInputElement).select();
|
|
document.execCommand('Copy');
|
|
logEvent('copyMarkdown');
|
|
};
|
|
|
|
let gistURL = '';
|
|
stateStore.subscribe(({ loader }) => {
|
|
if (loader?.type === 'gist') {
|
|
// @ts-ignore Gist will have url
|
|
gistURL = loader.config.url;
|
|
}
|
|
});
|
|
|
|
const loadGist = () => {
|
|
if (!gistURL) {
|
|
alert('Please enter a Gist URL first');
|
|
}
|
|
window.location.href = `${window.location.pathname}?gist=${gistURL}`;
|
|
logEvent('loadGist');
|
|
};
|
|
|
|
let iUrl: string;
|
|
let svgUrl: string;
|
|
let krokiUrl: string;
|
|
let mdCode: string;
|
|
let imagemodeselected = 'auto';
|
|
let userimagesize = 1080;
|
|
|
|
let isNetlify = false;
|
|
if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
|
|
isNetlify = true;
|
|
}
|
|
stateStore.subscribe(({ code, serialized }) => {
|
|
iUrl = `${rendererUrl}/img/${serialized}?type=png`;
|
|
svgUrl = `${rendererUrl}/svg/${serialized}`;
|
|
krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}`;
|
|
mdCode = `[](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`;
|
|
});
|
|
</script>
|
|
|
|
<Card title="Actions" isOpen={true}>
|
|
<div class="flex flex-wrap gap-2 m-2">
|
|
{#if isClipboardAvailable()}
|
|
<button class="action-btn w-full" on:click={onCopyClipboard}
|
|
><i class="far fa-copy mr-2" /> Copy Image to clipboard
|
|
</button>
|
|
{/if}
|
|
<button id="downloadPNG" class="action-btn flex-grow" on:click={onDownloadPNG}>
|
|
<i class="fas fa-download mr-2" /> PNG
|
|
</button>
|
|
<button id="downloadSVG" class="action-btn flex-grow" on:click={onDownloadSVG}>
|
|
<i class="fas fa-download mr-2" /> SVG
|
|
</button>
|
|
<a target="_blank" rel="noreferrer" class="flex-grow" href={iUrl}>
|
|
<button class="action-btn w-full">
|
|
<i class="fas fa-external-link-alt mr-2" /> PNG
|
|
</button>
|
|
</a>
|
|
<a target="_blank" rel="noreferrer" class="flex-grow" href={svgUrl}>
|
|
<button class="action-btn w-full">
|
|
<i class="fas fa-external-link-alt mr-2" /> SVG
|
|
</button>
|
|
</a>
|
|
<a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
|
|
<button class="action-btn w-full">
|
|
<i class="fas fa-external-link-alt mr-2" /> Kroki
|
|
</button>
|
|
</a>
|
|
|
|
<div class="flex gap-2 items-center">
|
|
PNG size
|
|
<label for="autosize">
|
|
<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
|
|
</label>
|
|
|
|
<label for="width">
|
|
<input type="radio" value="width" id="width" bind:group={imagemodeselected} /> Width
|
|
</label>
|
|
|
|
<label for="height">
|
|
<input type="radio" value="height" id="height" bind:group={imagemodeselected} /> Height
|
|
</label>
|
|
|
|
{#if imagemodeselected !== 'auto'}
|
|
<input
|
|
id="height"
|
|
class="input"
|
|
type="number"
|
|
min="3"
|
|
max="10000"
|
|
bind:value={userimagesize} />
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="w-full flex gap-2 items-center">
|
|
<input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
|
|
<label for="markdown">
|
|
<button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
|
|
Copy Markdown
|
|
</button>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="w-full flex gap-2 items-center">
|
|
<input
|
|
class="input"
|
|
id="gist"
|
|
type="text"
|
|
bind:value={gistURL}
|
|
placeholder="Enter Gist URL" />
|
|
<label for="gist">
|
|
<button class="btn btn-primary btn-md flex-auto" on:click={loadGist}> Load Gist </button>
|
|
</label>
|
|
</div>
|
|
{#if isNetlify}
|
|
<div class="w-full flex items-center justify-center">
|
|
<a class="link underline text-gray-500 text-sm" href="https://netlify.com">
|
|
This site is powered by Netlify
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</Card>
|