From e428d458c38da33dad775cefa01269c0bac158c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Fri, 5 Jul 2024 09:48:24 +0200 Subject: [PATCH] chore: More cleanup and lint tsx files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- package.json | 9 +++-- src/App.tsx | 63 +++++++--------------------------- src/main.tsx | 5 +-- src/sidebar/ExampleSidebar.tsx | 37 -------------------- 4 files changed, 21 insertions(+), 93 deletions(-) delete mode 100644 src/sidebar/ExampleSidebar.tsx diff --git a/package.json b/package.json index 0999faa..6be6319 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "build": "vite --mode production build", "dev": "vite --mode development build", "watch": "vite --mode development build --watch", - "lint": "eslint --ext .js,.ts,.vue src websocket_server", - "lint:fix": "eslint --ext .js,.ts,.vue src websocket_server --fix", + "lint": "eslint --ext .js,.ts,.tsx,.vue src websocket_server", + "lint:fix": "eslint --ext .js,.ts,.tsx,.vue src websocket_server --fix", "stylelint": "stylelint 'src/**/*.{css,scss,sass}'", "stylelint:fix": "stylelint 'src/**/*.{css,scss,sass}' --fix", "server:start": "node websocket_server/server.js", @@ -65,7 +65,10 @@ "eslintConfig": { "extends": [ "@nextcloud/eslint-config/typescript" - ] + ], + "rules": { + "jsdoc/require-jsdoc": "off" + } }, "engines": { "node": "^20", diff --git a/src/App.tsx b/src/App.tsx index ac32521..bff7cf3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,33 +10,18 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { Excalidraw, - LiveCollaborationTrigger, MainMenu, - sceneCoordsToViewportCoords, useHandleLibrary, - viewportCoordsToSceneCoords } from '@excalidraw/excalidraw' import './App.scss' -import { distance2d, resolvablePromise, withBatchedUpdates, withBatchedUpdatesThrottled } from './utils' +import { resolvablePromise } from './utils' import type { - AppState, ExcalidrawImperativeAPI, ExcalidrawInitialDataState, - PointerDownState } from '@excalidraw/excalidraw/types/types' import { Collab } from './collaboration/collab' import type { ResolvablePromise } from '@excalidraw/excalidraw/types/utils' import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types' - -type Comment = { - x: number; - y: number; - value: string; - id?: string; -}; - -const COMMENT_ICON_DIMENSION = 32 - interface WhiteboardAppProps { fileId: number; isEmbedded: boolean; @@ -44,23 +29,13 @@ interface WhiteboardAppProps { export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches - const appRef = useRef(null) - const [viewModeEnabled, setViewModeEnabled] = useState(isEmbedded) - const [zenModeEnabled, setZenModeEnabled] = useState(isEmbedded) - const [gridModeEnabled, setGridModeEnabled] = useState(false) - const [blobUrl, setBlobUrl] = useState('') - const [canvasUrl, setCanvasUrl] = useState('') - const [exportWithDarkMode, setExportWithDarkMode] = useState(false) - const [exportEmbedScene, setExportEmbedScene] = useState(false) - const [theme, setTheme] = useState(darkMode ? 'dark' : 'light') - const [isCollaborating, setIsCollaborating] = useState(false) - const [commentIcons, setCommentIcons] = useState<{ [id: string]: Comment }>( - {} - ) - const [comment, setComment] = useState(null) + const [viewModeEnabled] = useState(isEmbedded) + const [zenModeEnabled] = useState(isEmbedded) + const [gridModeEnabled] = useState(false) + const [theme] = useState(darkMode ? 'dark' : 'light') const initialData = { elements: [], - scrollToContent: true + scrollToContent: true, } const initialStatePromiseRef = useRef<{ @@ -72,7 +47,7 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { const [ excalidrawAPI, - setExcalidrawAPI + setExcalidrawAPI, ] = useState(null) const [collab, setCollab] = useState(null) @@ -103,7 +78,7 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { element: NonDeletedExcalidrawElement, event: CustomEvent<{ nativeEvent: MouseEvent | React.PointerEvent; - }> + }>, ) => { const link = element.link! const { nativeEvent } = event.detail @@ -118,19 +93,9 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { // ... } }, - [] + [], ) - const onPointerDown = ( - activeTool: AppState['activeTool'], - pointerDownState: any - ) => { - if (activeTool.type === 'custom' && activeTool.customType === 'comment') { - const { x, y } = pointerDownState.origin - setComment({ x, y, value: '' }) - } - } - const renderMenu = () => { return ( @@ -144,7 +109,7 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { } return ( -
+
{ @@ -153,9 +118,6 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { setExcalidrawAPI(api) }} initialData={initialStatePromiseRef.current.promise} - onChange={(elements, state) => { - - }} onPointerUpdate={collab?.onPointerUpdate} viewModeEnabled={viewModeEnabled} zenModeEnabled={zenModeEnabled} @@ -164,11 +126,10 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) { name="Custom name of drawing" UIOptions={{ canvasActions: { - loadScene: false - } + loadScene: false, + }, }} onLinkOpen={onLinkOpen} - onPointerDown={onPointerDown} > {renderMenu()} diff --git a/src/main.tsx b/src/main.tsx index 29a1ed9..1c07ff9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -13,10 +13,11 @@ window.EXCALIDRAW_ASSET_PATH = linkTo('whiteboard', 'dist/') const Component = { name: 'Whiteboard', + /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ render(createElement: (arg0: string, arg1: { attrs: { id: string } }, arg2: string) => any) { - const App = React.lazy(() => import('./App')) + const App = lazy(() => import('./App')) this.$emit('update:loaded', true) - const randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10); + const randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10) this.$nextTick(() => { const rootElement = document.getElementById('whiteboard-' + randomId) this.root = createRoot(rootElement) diff --git a/src/sidebar/ExampleSidebar.tsx b/src/sidebar/ExampleSidebar.tsx deleted file mode 100644 index 3652b5e..0000000 --- a/src/sidebar/ExampleSidebar.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * SPDX-FileCopyrightText: 2020 Excalidraw - * SPDX-License-Identifier: MIT - */ - -// https://github.com/excalidraw/excalidraw/blob/4dc4590f247a0a0d9c3f5d39fe09c00c5cef87bf/examples/excalidraw - -import { useState } from "react"; -import "./ExampleSidebar.scss"; -export default function Sidebar({ children }: { children: React.ReactNode }) { - const [open, setOpen] = useState(false); - - return ( - <> -
- -
- - {" "} -
-
-
- - {children} -
- - ); -}