add thumbnails in saved paged

src/common/components/atoms/projectCard.tsx

@@ -1,25 +1,32 @@
+import { themeAtom } from "@core/atoms/common";
+import { useBoardSnapshot } from "@core/utils/snapshot";
 import { DotsVerticalIcon, TrashIcon } from "@heroicons/react/outline";
 import { useDataProvider } from "@hooks/useDataProvider";
 import { SmithProject } from "@localtypes/smith";
 import { useLanguageQuery, useTranslation } from "@modules/i18n";
 import { useRouter } from "@modules/router";
 import { cn } from "@utils/styles";
-import { HTMLAttributes } from "react";
+import { useAtomValue } from "jotai";
+import { HTMLAttributes, useEffect, useState } from "react";
 
 
 interface ProjectCard extends HTMLAttributes<HTMLDivElement> {
     project: SmithProject
+    initialImage?: string
 }
 
 const ProjectCard = (props: ProjectCard) => {
-    const { project, className, ...rest } = props
+    const { project, className, initialImage, ...rest } = props
     const { id, name, description } = project
-    const image = '/images/smith-app.png'
+    const [image, setImage] = useState(initialImage ?? '')
+    const { getImageUrl } = useBoardSnapshot()
+    // const image = useBoardSnapshot(project.data) //'/images/smith-app.png'
     const { t } = useTranslation()
     const [query] = useLanguageQuery()
     const { useHistory } = useRouter()
     const { push } = useHistory();
     const { data } = useDataProvider()
+    const theme = useAtomValue(themeAtom)
 
     const goToSavedProject = (id: string) => {
         push('/', { ...query, id: id })
@@ -30,6 +37,14 @@ const ProjectCard = (props: ProjectCard) => {
         await deleteOne({ resource: 'projects', id: id })
     }
 
+    useEffect(() => {
+        setTimeout(() => {
+            const uri = getImageUrl(project.data, { theme })
+            // console.log(uri)
+            setImage(uri)
+        }, 200)
+    }, [theme])
+
     return (
         <div className={cn('border-neutral border-2 hover:border-4 hover:border-primary card bg-base-100',
             'rounded-b-none w-80 h-80 md:h-72 flex flex-col shadow-md cursor-pointer relative', className)}
@@ -41,7 +56,7 @@ const ProjectCard = (props: ProjectCard) => {
                 <p>{description}</p>
                 <div className="absolute right-0 bottom-0 dropdown dropdown-end" onClick={e => e.stopPropagation()}>
                     <label tabIndex={0} className="btn btn-ghost"><DotsVerticalIcon className="w-6" /></label>
-                    <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                    <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 z-10">
                         <li><a role="button" onClick={(e) => { e.stopPropagation(); removeProject(id) }}><TrashIcon className="w-6" />{t.saved.delete()}</a></li>
                     </ul>
                 </div>

src/common/components/molecules/projectList.tsx

@@ -1,8 +1,12 @@
 import { RefreshIcon } from "@heroicons/react/outline"
-import { useDataProvider, useList } from "@hooks/useDataProvider"
+import { useList } from "@hooks/useDataProvider"
 import { SmithProject } from "@localtypes/smith"
 import { useTranslation } from "@modules/i18n"
 import ProjectCard from "@components/atoms/projectCard"
+import { useAtomValue } from "jotai"
+import { useBoardSnapshot } from "@core/utils/snapshot"
+import { useEffect, useState } from "react"
+import { themeAtom } from "@core/atoms/common"
 
 
 interface ProjectListProps {
@@ -13,10 +17,18 @@ export const ProjectList = (props: ProjectListProps) => {
     const { t } = useTranslation()
     // const db = useDataProvider()
     const projects = useList({ resource: 'projects' }) as SmithProject[]
+    const { getImageUrl, BoardComponent } = useBoardSnapshot() //TODO: investigate non-blocking form to render images
+    const theme = useAtomValue(themeAtom)
+    const [img, setImg] = useState('')
+
+    useEffect(() => {
+        setImg(getImageUrl('', { theme }))
+    }, [])
 
     // console.log(db)
     // console.log(projects)
     return <>
+        <BoardComponent />
         {!projects ? <div className="flex items-center justify-center">
             <RefreshIcon className="animate-spin w-8 h-8 mr-2 my-4" />
             <h3 className="text-xl uppercase">{t.common.loading()}...</h3>
@@ -29,6 +41,7 @@ export const ProjectList = (props: ProjectListProps) => {
                     {projects.map((item, i) =>
                         <ProjectCard
                             key={i}
+                            initialImage={img}
                             className="m-4"
                             project={item}
                         />

src/common/styles/index.css

@@ -5,5 +5,5 @@
 @import "./screen.css";
 @import "./fonts.css";
 @import "./jsxgraph.css";
-/* @import "./animations.css"; */
-/* @import "./custom.css"; */
+@import "./animations.css";
+@import "./custom.css";

src/common/types/smith.d.ts

@@ -30,12 +30,12 @@ export type RuntimeProject = {
 }
 
 export interface BoardConfigOptions {
-  theme: string;
-  screen: string | number[];
+  theme?: string;
+  screen?: string | number[];
   name: string;
-  digits: number;
-  translations: Record<string, any>;
-  infobox: {
+  digits?: number;
+  translations?: Record<string, any>;
+  infobox?: {
       x: number,
       y: number
   }

src/modules/core/atoms/smith.ts

@@ -18,9 +18,9 @@ import ImCircleAdTooltip from "@tooltips/imCircleAd";
 import { Getter, PrimitiveAtom, Setter, WritableAtom, atom } from "jotai";
 import { initBoard } from "@core/jxg/initBoard";
 import { getCurrentBreakpoint } from "@hooks/useScreen";
-import { atomWithReset, atomWithStorage } from "jotai/utils";
+import { atomWithReset } from "jotai/utils";
 import { _dataRxdbProviderAtom } from "./db";
-import { Board } from "jsxgraph";
+import { Board, GeometryElement } from "jsxgraph";
 import { BoardConfigOptions, RuntimeProject, SmithProject } from "@localtypes/smith";
 import { DataProvider } from "@db/db";
 
@@ -84,6 +84,20 @@ function populateBoard(send, board) {
     }
 }
 
+
+
+const initBoardWrapper = (get: Getter, set: Setter, options: BoardConfigOptions) => {
+    const brd = initBoard(options)
+
+    brd.highlightInfobox = function (x: number, y: number, el: GeometryElement) {
+        set(infoboxAtom, { x, y, el })
+        this.infobox.setText('')
+        return this
+    }
+
+    return brd
+}
+
 export function recreateBoard(get: Getter, set: Setter, params: BoardConfigOptions, oldBoard: any) {
     try {
         const send = (event) => set(drawServiceAtom, event)
@@ -97,7 +111,7 @@ export function recreateBoard(get: Getter, set: Setter, params: BoardConfigOptio
         // if (!this.recreatingBoard) {
         // this.recreatingBoard = true
         // console.log(boardName, options, boundingBox)
-        const board = initBoard(get, set, { ...rest, screen: boundingBox })
+        const board = initBoardWrapper(get, set, { ...rest, screen: boundingBox })
 
         populateBoard(send, board)
         return board
@@ -120,10 +134,11 @@ export const boardAtom = atom(
 
         return {}
     },
-    (get, set, params: BoardConfigOptions = null) => {
+    (get, set, params: Partial<BoardConfigOptions> = null) => {
         // console.log(params)
         const board = recreateBoard(get, set, { ...get(boardConfigAtom), ...params }, get(cachedBoardAtom))
         set(cachedBoardAtom, board)
+        return board
     }
 )
 

src/modules/core/jxg/initBoard.ts

@@ -34,7 +34,7 @@ export const changeBoardTheme = (theme: string) => {
     }
 }
 
-export const initBoard = (get: Getter, set: Setter, options: BoardConfigOptions) => {
+export const initBoard = (options: BoardConfigOptions) => {
     // console.log(options)
     changeBoardTheme(options?.theme || 'light')
 
@@ -89,11 +89,6 @@ export const initBoard = (get: Getter, set: Setter, options: BoardConfigOptions)
 
     // JXG.Options.infobox.strokeColor = 'red';
 
-    brd.highlightInfobox = function (x: number, y: number, el: GeometryElement) {
-        set(infoboxAtom, { x, y, el })
-        this.infobox.setText('')
-        return this
-    }
 
     brd.infobox.visProp.distancex = options.infobox?.x ?? 0
     brd.infobox.visProp.distancey = options.infobox?.y ?? 0

src/modules/core/utils/snapshot.tsx

@@ -0,0 +1,29 @@
+import { boardAtom, boardConfigAtom } from "@core/atoms/smith";
+import { BoardConfigOptions } from "@localtypes/smith";
+import { useAtomValue, useSetAtom } from "jotai";
+
+
+export function useBoardSnapshot() {
+    const setBrd = useSetAtom(boardAtom)
+    const boardConfig = useAtomValue(boardConfigAtom)
+
+    return {
+        getImageUrl: (code: string, options?: Partial<BoardConfigOptions>) => {
+            const brd = setBrd({ ...options, screen: [-1.5, 1.7, 1.5, -1.7] })
+            // console.log(code)
+            // const _code = `point(1,1);`
+            try {
+                brd.jc.parse(code)
+            } catch(err) {
+                console
+            }
+            const txt = brd.renderer.dumpToDataURI();
+            return txt
+        },
+        BoardComponent: () =>
+            <div id={boardConfig.name} className="jxgbox hidden" style={{ width: '512px', height: '512px' }}>
+                <img src="/images/smith-chart-dark.svg" alt="smith-board-img-dark" srcSet="" className="hidden" loading={'lazy'} />
+                <img src="/images/smith-chart.svg" alt="smith-board-img" srcSet="" className="hidden" loading={'lazy'} />
+            </div>
+    }
+}

src/pages/saved.page.tsx

@@ -7,6 +7,17 @@ import { useDataProvider, useList } from "@hooks/useDataProvider";
 import createModal from "@components/molecules/createModal";
 import { ProjectList } from "@components/molecules/projectList";
 
+// custom elements
+import "@core/elements/common"
+import "@core/elements/smithPoint"
+import "@core/elements/point"
+import "@core/elements/reCircle"
+import "@core/elements/imCircle"
+import "@core/elements/imCircleAd"
+import "@core/elements/reCircleAd"
+
+import '@styles/jsxgraph.css';
+
 export { Saved as Page }
 
 const SavedProjects = () => {