diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx index 1eb2d3c6..eb71b74d 100644 --- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx +++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx @@ -1,6 +1,6 @@ 'use client'; -import { toSvg } from 'html-to-image'; +import { toPng } from 'html-to-image'; import { useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { toast } from 'react-toastify'; import { @@ -256,7 +256,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) { const imageHeight = PARAMETER.ossImageHeight; const nodesBounds = getNodesBounds(nodes); const viewport = getViewportForBounds(nodesBounds, imageWidth, imageHeight, 0.5, 2); - toSvg(canvas, { + toPng(canvas, { backgroundColor: colors.bgDefault, width: imageWidth, height: imageHeight, @@ -268,7 +268,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) { }) .then(dataURL => { const a = document.createElement('a'); - a.setAttribute('download', `${model.schema?.alias ?? 'oss'}.svg`); + a.setAttribute('download', `${model.schema?.alias ?? 'oss'}.png`); a.setAttribute('href', dataURL); a.click(); }) @@ -416,7 +416,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) { {...menuProps} /> ) : null} -
+
{graph}
diff --git a/rsconcept/frontend/src/styling/color.ts b/rsconcept/frontend/src/styling/color.ts index bf86ac2a..80d1673f 100644 --- a/rsconcept/frontend/src/styling/color.ts +++ b/rsconcept/frontend/src/styling/color.ts @@ -51,7 +51,7 @@ export interface IColorTheme { */ // prettier-ignore export const lightT: IColorTheme = { - bgDefault: 'var(--cl-bg-100)', + bgDefault: 'hsl(000, 000%, 098%)', //var(--cl-bg-100)', bgInput: 'var(--cl-bg-120)', bgControls: 'var(--cl-bg-80)', bgDisabled: 'var(--cl-bg-60)', @@ -91,7 +91,7 @@ export const lightT: IColorTheme = { */ // prettier-ignore export const darkT: IColorTheme = { - bgDefault: 'var(--cd-bg-100)', + bgDefault: 'hsl(000, 000%, 005%)', //'var(--cd-bg-100)', bgInput: 'var(--cd-bg-120)', bgControls: 'var(--cd-bg-80)', bgDisabled: 'var(--cd-bg-60)',