Vite + React

85 |

99 | 100 | 116 |

117 | ); 118 | }; 119 | 120 | 121 | const WindowTitleBar = () => { 122 | const appState = useSelector((state) => state.appState); 123 | const dispatch = useDispatch(); 124 | 125 | return ( 126 |

127 |

128 |

129 |

130 |

131 |

132 | { 137 | dispatch(updateAppState({ 138 | filename: e.target.value 139 | })) 140 | }} 141 | className="w-auto min-w-0 bg-transparent outline-none p-0 border-0 text-center text-gray-600 dark:text-gray-300 flex-1" 142 | /> 143 |

144 |

145 |

146 |

147 |

148 |

149 | ); 150 | }; 151 | -------------------------------------------------------------------------------- /src/components/BackgroundPicker.jsx: -------------------------------------------------------------------------------- 1 | import * as Popover from "@radix-ui/react-popover"; 2 | import { useCallback, useState } from "react"; 3 | import { colors } from "../data/color"; 4 | import { gradients } from "../data/gradient"; 5 | import { useDispatch, useSelector } from "react-redux"; 6 | import { updateAppState } from "../store/slices/appStateSlice"; 7 | 8 | 9 | export const backgroundWindowTabs = [ 10 | { 11 | id: "colors", 12 | label: "Colors", 13 | }, 14 | { 15 | id: "gradients", 16 | label: "Gradients", 17 | }, 18 | 19 | ]; 20 | 21 | const BackgroundPicker = () => { 22 | 23 | const [tab, setTab] = useState(backgroundWindowTabs[0].id); 24 | const dispatch = useDispatch(); 25 | const appState = useSelector((state) => state.appState); 26 | 27 | return ( 28 |

29 | 30 | Background 31 | 32 | 33 | 34 | 58 | 59 | ))} 60 | 61 |

62 | { 63 | tab === "colors" ? ( 64 | 65 | ) : 66 | } 67 |

68 | 69 | 70 |

71 | ); 72 | }; 73 | export default BackgroundPicker 74 | 75 | 76 | 77 | const ColorsPanel = () => { 78 | const dispatch = useDispatch(); 79 | const appState = useSelector((state) => state.appState); 80 | const setColor = useCallback( 81 | (color) => { 82 | dispatch(updateAppState({ 83 | ...appState, 84 | backgroundImage: undefined, 85 | backgroundThumb: undefined, 86 | backgroundColor: color, 87 | }) 88 | ); 89 | }, 90 | [appState, dispatch] 91 | ); 92 | return ( 93 |

96 | 107 |

110 | ); 111 | }; 112 | 113 | const GradientsPanel = () => { 114 | const dispatch = useDispatch(); 115 | const appState = useSelector((state) => state.appState); 116 | 117 | const setGradient = useCallback( 118 | (gradient) => { 119 | dispatch( 120 | updateAppState({ 121 | ...appState, 122 | backgroundColor: gradient.color, 123 | backgroundImage: gradient.gradient, 124 | backgroundThumb: gradient.gradient, 125 | }) 126 | ) 127 | }, 128 | [appState, dispatch] 129 | ); 130 | 131 | return ( 132 |

135 | 145 |

148 | ); 149 | }; 150 | -------------------------------------------------------------------------------- /src/components/Toolbar.jsx: -------------------------------------------------------------------------------- 1 | import classNames from "classnames"; 2 | import { MdCheck } from "react-icons/md"; 3 | import BackgroundPicker from "./BackgroundPicker"; 4 | import * as Select from "@radix-ui/react-select"; 5 | import { toPng, toJpeg, toSvg } from "html-to-image"; 6 | import { updateAppState, initialState } from "../store/slices/appStateSlice"; 7 | import { useDispatch, useSelector } from "react-redux"; 8 | import { useEditor } from "../contexts/EditorContext"; 9 | import { useCallback } from "react"; 10 | 11 | 12 | 13 | 14 | const ToolBar = () => { 15 | 16 | const appState = useSelector((state) => state.appState) 17 | const dispatch = useDispatch(); 18 | const { canvasRef } = useEditor(); 19 | console.log(canvasRef) 20 | 21 | const onReset = () => { 22 | dispatch(updateAppState(initialState)); 23 | 24 | } 25 | 26 | const onExport = useCallback(async () => { 27 | if (!canvasRef.current) { 28 | return; 29 | } 30 | 31 | var imageUrl = null; 32 | const fileExtension = `.${appState.renderFormat.toLowerCase()}`; 33 | 34 | switch (fileExtension) { 35 | case ".jpeg": 36 | imageUrl = await toJpeg(canvasRef.current); 37 | break; 38 | case ".svg": 39 | imageUrl = await toSvg(canvasRef.current); 40 | break; 41 | default: 42 | imageUrl = await toPng(canvasRef.current); 43 | break; 44 | } 45 | 46 | if (!imageUrl) return; 47 | const filename = `${appState.filename || "Untitled"}${fileExtension}`; 48 | const link = document.createElement("a"); 49 | link.download = filename; 50 | link.href = imageUrl; 51 | link.click(); 52 | }, [appState.renderFormat, appState.filename, canvasRef]); 53 | 54 | 55 | return ( 56 |

57 |

58 |

59 |

60 | 61 | 65 | dispatch(updateAppState({ 66 | ...appState, darkMode: !appState.darkMode 67 | })) 68 | } 69 | /> 70 | 74 | dispatch(updateAppState({ 75 | showLineNumber: !appState.showLineNumber, 76 | })) 77 | } 78 | /> 79 | { 94 | dispatch(updateAppState({ 95 | ...appState, 96 | fontSize: value, 97 | })) 98 | 99 | }} 100 | /> 101 | { 106 | dispatch(updateAppState({ 107 | ...appState, 108 | padding: value, 109 | })) 110 | 111 | }} 112 | /> 113 | (a < b ? -1 : 1))} 138 | value={appState.language} 139 | onChange={(value) => { 140 | dispatch(updateAppState({ 141 | ...appState, 142 | language: value, 143 | })); 144 | }} 145 | /> 146 |

147 |

148 | 154 | 155 |

156 | 162 |

163 |

164 |

165 |

166 | ) 167 | } 168 | 169 | export default ToolBar; 170 | 171 | 172 | 173 | 174 | const SwitchItem = ({ 175 | label, 176 | value, 177 | onChange, 178 | }) => { 179 | return ( 180 |

181 | 185 | {label} 186 | 187 | 202 |

203 | ); 204 | }; 205 | 206 | 207 | 208 | const SelectItem = ({ 209 | label, 210 | value, 211 | onChange, 212 | options, 213 | 214 | }) => { 215 | return ( 216 |

217 | 218 | {label} 219 | 220 | onChange(e)} 224 | > 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | {options.map((option, i) => ( 233 | 238 | {option} 239 | 240 | 241 | 242 | 243 | ))} 244 | 245 | 246 | 247 | 248 |

249 | ); 250 | }; 251 | 252 | --------------------------------------------------------------------------------