Skip to content
Snippets Groups Projects
Commit 8e2df5e4 authored by Remi PLANEL's avatar Remi PLANEL
Browse files

can download heatmap to png

parent 32801606
No related branches found
No related tags found
1 merge request!169Resolve "Being able to download the distributions in refseqDB as a svg/png/csv"
Pipeline #119768 failed with stages
in 1 minute and 18 seconds
Hide whitespace changes
Inline Side-by-side
components/content/RefseqDb.vue
+ 2
− 2
View file @ 8e2df5e4
...@@ -400,11 +400,11 @@ async function downloadPng(component: ComponentPublicInstance | null, filename: ...@@ -400,11 +400,11 @@ async function downloadPng(component: ComponentPublicInstance | null, filename:
svg</v-list-item-title> svg</v-list-item-title>
</v-list-item> </v-list-item>
<!-- <v-list-item value="png"> <v-list-item value="png">
<v-list-item-title <v-list-item-title
@click="downloadPng(heatmapPlot, 'df-heatmap-systems-taxonomy.png')">to @click="downloadPng(heatmapPlot, 'df-heatmap-systems-taxonomy.png')">to
png</v-list-item-title> png</v-list-item-title>
</v-list-item> --> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-toolbar> </v-toolbar>
......
composables/useRasterize.ts
+ 30
− 23
View file @ 8e2df5e4
import { useDownloadBlob } from './useDownloadBlob'; import { useDownloadBlob } from './useDownloadBlob';
import { useSerialize } from './useSerialize'; import { useSerialize } from './useSerialize';
import { useSvgPlot } from './useSvgPlot';
const { serialize } = useSerialize() const { serialize } = useSerialize()
export function useRasterize() { export function useRasterize() {
function rasterize(component: MaybeRef<ComponentPublicInstance | null>, filename: MaybeRef<string>) { function rasterize(component: MaybeRef<ComponentPublicInstance | null>, filename: MaybeRef<string>) {
const toValueCompo = toValue(component) const toValueCompo = toValue(component)
if (toValueCompo !== null) { if (toValueCompo !== null) {
let resolve, reject; const { svg } = useSvgPlot(toValueCompo)
const promise: Promise<Blob> = new Promise((y, n) => (resolve = y, reject = n)); const toValueSvg = toValue(svg)
const image = new Image; if (toValueSvg !== null) {
image.onerror = reject; let resolve, reject;
const promise: Promise<Blob> = new Promise((y, n) => (resolve = y, reject = n));
const svg = toValueCompo.$el.firstChild const image = new Image;
console.log(svg) image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect(); console.log(toValueSvg)
const canvas = document.createElement("canvas"); image.onload = () => {
canvas.width = rect.width console.log("try to get boundingclientRect")
canvas.height = rect.height const rect = toValueSvg.getBoundingClientRect();
const ctx = canvas.getContext("2d") console.log(rect)
const canvas = document.createElement("canvas");
canvas.width = rect.width
if (ctx !== null) { canvas.height = rect.height
ctx.drawImage(image, 0, 0, rect.width, rect.height); const ctx = canvas.getContext("2d")
ctx.canvas.toBlob(resolve);
if (ctx !== null) {
ctx.drawImage(image, 0, 0, rect.width, rect.height);
ctx.canvas.toBlob(resolve);
}
} }
const blob = toValue(serialize(component))
if (blob !== undefined) {
image.src = URL.createObjectURL(blob);
}
return promise;
} }
const blob = toValue(serialize(component))
if (blob !== undefined) {
image.src = URL.createObjectURL(blob);
}
return promise;
} }
} }
......
composables/useSerialize.ts
+ 19
− 14
View file @ 8e2df5e4
import { useSvgPlot } from './useSvgPlot';
export function useSerialize() { export function useSerialize() {
...@@ -9,23 +10,27 @@ export function useSerialize() { ...@@ -9,23 +10,27 @@ export function useSerialize() {
function serialize(compo: MaybeRef<ComponentPublicInstance | null>) { function serialize(compo: MaybeRef<ComponentPublicInstance | null>) {
const toValueCompo = toValue(compo) const toValueCompo = toValue(compo)
if (toValueCompo !== null) { if (toValueCompo !== null) {
const svg = toValueCompo.$el.firstChild const { svg } = useSvgPlot(toValueCompo)
const clonedSvg = svg.cloneNode(true); const toValueSvg = toValue(svg)
const fragment = window.location.href + "#"; if (toValueSvg !== null) {
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT); const clonedSvg = toValueSvg.cloneNode(true);
while (walker.nextNode()) { const fragment = window.location.href + "#";
for (const attr of walker.currentNode.attributes) { const walker = document.createTreeWalker(toValueSvg, NodeFilter.SHOW_ELEMENT);
if (attr.value.includes(fragment)) { while (walker.nextNode()) {
attr.value = attr.value.replace(fragment, "#"); for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
} }
} }
clonedSvg.setAttributeNS(xmlns.value, "xmlns", svgns.value);
clonedSvg.setAttributeNS(xmlns.value, "xmlns:xlink", xlinkns.value);
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(clonedSvg);
blob.value = new Blob([string], { type: "image/svg+xml" });
return blob
} }
clonedSvg.setAttributeNS(xmlns.value, "xmlns", svgns.value); else { return undefined }
clonedSvg.setAttributeNS(xmlns.value, "xmlns:xlink", xlinkns.value);
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(clonedSvg);
blob.value = new Blob([string], { type: "image/svg+xml" });
return blob
} }
} }
return { serialize } return { serialize }
......
composables/useSvgPlot.ts 0 → 100644
+ 8
− 0
View file @ 8e2df5e4
export function useSvgPlot(component: MaybeRef<ComponentPublicInstance>) {
const svg = ref<SVGElement | null>(null)
const toValueCompo = toValue(component)
const rootElem = toValueCompo.$el
svg.value = rootElem.querySelector("svg.plot")
return { svg }
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment