titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add instructions for custom templates tab

Browse Source
This commit is contained in:
1ilit 2024-01-29 11:39:06 +02:00
parent ba1dd5ab54
commit 78d0a26807
4 changed files with 119 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
package-lock.json generated
View File

@ -8,7 +8,7 @@
"name": "client-vite", "name": "client-vite",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@douyinfe/semi-ui": "^2.49.0", "@douyinfe/semi-ui": "^2.51.3",
"@lexical/react": "^0.12.5", "@lexical/react": "^0.12.5",
"@monaco-editor/react": "^4.6.0", "@monaco-editor/react": "^4.6.0",
"axios": "^1.6.2", "axios": "^1.6.2",
@ -469,34 +469,34 @@
} }
}, },
"node_modules/@douyinfe/semi-animation": { "node_modules/@douyinfe/semi-animation": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.51.3.tgz",
"integrity": "sha512-2x+mMAG/+yiEMWUNUepEkBwwCeurAZH6pCNJVyXufTLeU+yZab+/S9NK2y+lmEbZ9wvOE6nE2csHSGLaNsv7lg==", "integrity": "sha512-S9MUvbzHQoV70G29QNpdJvOnGvU5NoQjZDEgcBSBVLcuAVXVTgbl3Syld0CYSzWfVUIdTbK9l7eHYPN2D1Bf0w==",
"dependencies": { "dependencies": {
"bezier-easing": "^2.1.0" "bezier-easing": "^2.1.0"
} }
}, },
"node_modules/@douyinfe/semi-animation-react": { "node_modules/@douyinfe/semi-animation-react": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-react/-/semi-animation-react-2.51.3.tgz",
"integrity": "sha512-z0mEdPOl3gPwJVMr4uCQFN6F6xIjlOOQ6SkOVZ6aMIEw1St/QD+HXgPAtP/LvBZZpu7T62rJquTk/gIqbeNEZw==", "integrity": "sha512-esalw4JW6IkzH6BkLvxHmogBlEuFDVmcPN5XNgpjpZCWUGk/qYHExxQ4Fcyp5BCNJDrKNgah4OOUDVPAzBiFPQ==",
"dependencies": { "dependencies": {
"@douyinfe/semi-animation": "2.49.0", "@douyinfe/semi-animation": "2.51.3",
"@douyinfe/semi-animation-styled": "2.49.0", "@douyinfe/semi-animation-styled": "2.51.3",
"classnames": "^2.2.6" "classnames": "^2.2.6"
} }
}, },
"node_modules/@douyinfe/semi-animation-styled": { "node_modules/@douyinfe/semi-animation-styled": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.51.3.tgz",
"integrity": "sha512-v7WjtR7toe2q62L+jsbRB8e9HuAq+GrYy7mZs1NyeQqo29eH7098rwzawqBUsTJSDn9U4ptsNTVe2LJJmKyNDA==" "integrity": "sha512-wb59wgq23ZRh/ma47CW6KDOU9U8PH/j12sk6pvLRPVmCsKQC+Ir3t+TIGOsEAAuaNN860KnW6ks2iJKfgS/2DQ=="
}, },
"node_modules/@douyinfe/semi-foundation": { "node_modules/@douyinfe/semi-foundation": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.51.3.tgz",
"integrity": "sha512-uUUxPZKkNrgghZdnhI+/SMnAQjvmE7PiqcUH1vWMi5VNjmMkWIFXVnNOHZX6YurgEFtloWSuIWU7kj2wxPUaoQ==", "integrity": "sha512-Tx9AVTkLhgaSsUo36XZP6OJhNPKE3qUv8u9STy/eDfCdZtBeqG0Zy5A6AkAR3Mnhp4PHyT8Nu8ix+XEcFS/tQQ==",
"dependencies": { "dependencies": {
"@douyinfe/semi-animation": "2.49.0", "@douyinfe/semi-animation": "2.51.3",
"async-validator": "^3.5.0", "async-validator": "^3.5.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"date-fns": "^2.29.3", "date-fns": "^2.29.3",
@ -507,9 +507,9 @@
} }
}, },
"node_modules/@douyinfe/semi-icons": { "node_modules/@douyinfe/semi-icons": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.51.3.tgz",
"integrity": "sha512-1ZHyIAWNkspQybsaNNzeJTn3mNDC/AvZwwqYXTtMVUSGQhFBZnVUbzKazC8T8395PoqyZlcMQfy9EQco9DOJ2w==", "integrity": "sha512-jH2XEF3CIvMkPjTc0tNMw+VMFx+xP4DthGmfsyqDR2+wUMqtW+mW8Z5wee/rumyBuEKNEwifHNU6NskNNywLHw==",
"dependencies": { "dependencies": {
"classnames": "^2.2.6" "classnames": "^2.2.6"
}, },
@ -518,35 +518,35 @@
} }
}, },
"node_modules/@douyinfe/semi-illustrations": { "node_modules/@douyinfe/semi-illustrations": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.51.3.tgz",
"integrity": "sha512-zvm31F7zoO+gUHQwCna575wvrw2rRCQEikcBjr7pUkSuV5Q+ru9f1BU7I5XZ1+EgEEhxz6c/o/uwT8a0OkAfQA==", "integrity": "sha512-UK7i8+MT/pDwRMgOOint+JjnjdL2XsAGiMVKXsaxB4dz2OO+xa4QYcXg5Y62ggJwebKeKXJP0J22Dm3SG+hpxw==",
"peerDependencies": { "peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0" "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
} }
}, },
"node_modules/@douyinfe/semi-theme-default": { "node_modules/@douyinfe/semi-theme-default": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-theme-default/-/semi-theme-default-2.51.3.tgz",
"integrity": "sha512-ndhZZqKAK9zXU7Hn892Mh2QkPtTA38F1T01rlRTZ/OVPHj3wUsLHBblvJ6j44YwbmEiDBtpg00AmouvxzKg+Tg==", "integrity": "sha512-WH3O3igZiYR2s2tPCyMz6GJmrITcP32gAgPCth7W6KofD3ez2JNDYhtSmwnsKEya9N3ER8ADRroZNbVrI4gK8A==",
"dependencies": { "dependencies": {
"glob": "^7.1.6" "glob": "^7.1.6"
} }
}, },
"node_modules/@douyinfe/semi-ui": { "node_modules/@douyinfe/semi-ui": {
"version": "2.49.0", "version": "2.51.3",
"resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.49.0.tgz", "resolved": "https://registry.npmjs.org/@douyinfe/semi-ui/-/semi-ui-2.51.3.tgz",
"integrity": "sha512-wqgOPeKF+AwGiTnqGeP0cWjTTpuH08O6H6fpWwk+cRAN7pXYFIWnm1etk4ZzumCySN9Uwa07Q967SyFfPElNSw==", "integrity": "sha512-uqyEeH9OrNpp4VOK/wKzpteEYoGaYv4IIJ9oYyyGGFpZgF4ev2azRs/rNGWgrPMYDCw/jAc32QD/edaBIsNbVQ==",
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.0.8", "@dnd-kit/core": "^6.0.8",
"@dnd-kit/sortable": "^7.0.2", "@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1", "@dnd-kit/utilities": "^3.2.1",
"@douyinfe/semi-animation": "2.49.0", "@douyinfe/semi-animation": "2.51.3",
"@douyinfe/semi-animation-react": "2.49.0", "@douyinfe/semi-animation-react": "2.51.3",
"@douyinfe/semi-foundation": "2.49.0", "@douyinfe/semi-foundation": "2.51.3",
"@douyinfe/semi-icons": "2.49.0", "@douyinfe/semi-icons": "2.51.3",
"@douyinfe/semi-illustrations": "2.49.0", "@douyinfe/semi-illustrations": "2.51.3",
"@douyinfe/semi-theme-default": "2.49.0", "@douyinfe/semi-theme-default": "2.51.3",
"async-validator": "^3.5.0", "async-validator": "^3.5.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"copy-text-to-clipboard": "^2.1.1", "copy-text-to-clipboard": "^2.1.1",
@ -2187,9 +2187,9 @@
} }
}, },
"node_modules/classnames": { "node_modules/classnames": {
"version": "2.3.2", "version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
}, },
"node_modules/clsx": { "node_modules/clsx": {
"version": "1.2.1", "version": "1.2.1",

2
package.json
View File

@ -10,7 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@douyinfe/semi-ui": "^2.49.0", "@douyinfe/semi-ui": "^2.51.3",
"@lexical/react": "^0.12.5", "@lexical/react": "^0.12.5",
"@monaco-editor/react": "^4.6.0", "@monaco-editor/react": "^4.6.0",
"axios": "^1.6.2", "axios": "^1.6.2",

BIN
src/assets/template_screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

54
src/pages/Templates.jsx
View File

@ -1,7 +1,8 @@
import { useEffect } from "react"; import { useEffect } from "react";
import logo_light from "../assets/logo_light_46.png"; import logo_light from "../assets/logo_light_46.png";
import template_screenshot from "../assets/template_screenshot.png"
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Tabs, TabPane } from "@douyinfe/semi-ui"; import { Tabs, TabPane, Banner, Steps } from "@douyinfe/semi-ui";
import { IconDeleteStroked } from "@douyinfe/semi-icons"; import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { db } from "../data/db"; import { db } from "../data/db";
import { useLiveQuery } from "dexie-react-hooks"; import { useLiveQuery } from "dexie-react-hooks";
@ -81,8 +82,7 @@ function Thumbnail({ diagram, i }) {
</div> </div>
{table.fields.map((f, j) => ( {table.fields.map((f, j) => (
<div <div
className={`flex justify-between items-center py-[2px] px-[3px] ${ className={`flex justify-between items-center py-[2px] px-[3px] ${j < table.fields.length - 1 ? "border-b" : ""
j < table.fields.length - 1 ? "border-b" : ""
}`} }`}
key={j} key={j}
> >
@ -127,12 +127,9 @@ function Thumbnail({ diagram, i }) {
return ( return (
<g key={n.id}> <g key={n.id}>
<path <path
d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${ d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${x + w
x + w } ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${x + w - r
} ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${ } ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${y + h - r
x + w - r
} ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
y + h - r
} L${x} ${y + fold}`} } L${x} ${y + fold}`}
fill={n.color} fill={n.color}
stroke="rgb(168 162 158)" stroke="rgb(168 162 158)"
@ -140,10 +137,8 @@ function Thumbnail({ diagram, i }) {
strokeWidth="0.5" strokeWidth="0.5"
/> />
<path <path
d={`M${x} ${y + fold} L${x + fold - r} ${ d={`M${x} ${y + fold} L${x + fold - r} ${y + fold
y + fold } A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${x + fold
} A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
x + fold
} ${y} L${x} ${y + fold} Z`} } ${y} L${x} ${y + fold} Z`}
fill={n.color} fill={n.color}
stroke={"rgb(168 162 158)"} stroke={"rgb(168 162 158)"}
@ -255,6 +250,8 @@ export default function Templates() {
tab={<span className="mx-2">Your templates</span>} tab={<span className="mx-2">Your templates</span>}
itemKey="2" itemKey="2"
> >
{
customTemplates?.length > 0 ?
<div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6"> <div className="grid xl:grid-cols-3 grid-cols-2 sm:grid-cols-1 gap-8 my-6">
{customTemplates?.map((c, i) => ( {customTemplates?.map((c, i) => (
<div <div
@ -296,7 +293,38 @@ export default function Templates() {
</div> </div>
</div> </div>
))} ))}
</div> :
<div className="py-5">
<Banner
fullMode={false}
type="info"
bordered
icon={null}
closeIcon={null}
description={<div>You have no custom templates saved.</div>}
/>
<div className="grid grid-cols-5 sm:grid-cols-1 gap-4 place-content-center my-4">
<img src={template_screenshot} className="border col-span-3 sm:cols-span-1 rounded" />
<div className="col-span-2 sm:cols-span-1">
<div className="text-xl font-bold my-4">How to save a template</div>
<Steps direction="vertical" style={{ margin: "12px" }}>
<Steps.Step
title="Build a diagram"
description="Build the template in the editor"
/>
<Steps.Step
title="Save as template"
description="Editor > File > Save as template"
/>
<Steps.Step
title="Load a template"
description="Fork a template to build on"
/>
</Steps>
</div> </div>
</div>
</div>
}
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>