From 76d54fa709a0cc569262711c732e63ee509fe04a Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 12 Sep 2024 00:13:29 +0300
Subject: [PATCH] B: Fix OSS image export. Use PNG for now

---
 .../frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx | 8 ++++----
 rsconcept/frontend/src/styling/color.ts                   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

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}
-      <div className='relative w-[100vw]' style={{ height: mainHeight }}>
+      <div className='relative w-[100vw]' style={{ height: mainHeight, fontFamily: 'Rubik' }}>
         {graph}
       </div>
     </AnimateFade>
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)',