Skip to content

Commit

Permalink
add drop eventListener for files
Browse files Browse the repository at this point in the history
Signed-off-by: grnd-alt <[email protected]>
  • Loading branch information
grnd-alt committed Nov 22, 2024
1 parent 162cad8 commit e05b3b8
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import type { ResolvablePromise } from '@excalidraw/excalidraw/types/utils'
import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
import { useExcalidrawLang } from './hooks/useExcalidrawLang'
import { registerFilesHandler } from './files/files'

interface WhiteboardAppProps {
fileId: number
Expand Down Expand Up @@ -95,6 +96,10 @@ export default function App({
if (excalidrawAPI && !collab) { setCollab(new Collab(excalidrawAPI, fileId, publicSharingToken, setViewModeEnabled)) }
if (collab && !collab.portal.socket) collab.startCollab()
useEffect(() => {
if (excalidrawAPI) {
registerFilesHandler(excalidrawAPI)
}

const extraTools = document.getElementsByClassName(
'App-toolbar__extra-tools-trigger',
)[0]
Expand Down
45 changes: 45 additions & 0 deletions src/files/files.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { convertToExcalidrawElements } from "@excalidraw/excalidraw";

Check failure on line 1 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Strings must use singlequote

Check failure on line 1 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Extra semicolon
import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types/types"

Check failure on line 2 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Strings must use singlequote

function addCustomFileElement(excalidrawApi: ExcalidrawImperativeAPI, link: string) {
let elements = excalidrawApi.getSceneElementsIncludingDeleted().slice();

Check failure on line 5 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

'elements' is never reassigned. Use 'const' instead

Check failure on line 5 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Extra semicolon
const newElements = convertToExcalidrawElements([{
text: link,
type: "text",

Check failure on line 8 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Strings must use singlequote
fontSize: 16,
textAlign: "left",

Check failure on line 10 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Strings must use singlequote
fontFamily: 1,
x: 0,
y: 0,
}])
elements.push(newElements[0])
excalidrawApi.updateScene({ elements })
}

// TODO: Implement uploading to nextcloud
function UploadFileToNextcloud(file: File) {

Check failure on line 20 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

'file' is defined but never used
return

Check failure on line 21 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Unnecessary return statement
}

function filesEventListener(ev: Event, excalidrawApi: ExcalidrawImperativeAPI) {
if (ev instanceof DragEvent) {
UploadFileToNextcloud(ev.dataTransfer?.files[0]!)

Check failure on line 26 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
const types = ["image/webp"]
if (!types.includes(ev.dataTransfer?.files[0].type || "")) {
addCustomFileElement(excalidrawApi, ev.dataTransfer?.files[0].name || "no file name")
ev.stopImmediatePropagation()
}
}
}

/**

Check warning on line 35 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Missing JSDoc @param "excalidrawApi" declaration
* adds drop eventlistener to excalidraw
* uploads file to nextcloud server, to be shared with all users
* if filetype not supported by excalidraw inserts link to file
*/

Check warning on line 39 in src/files/files.ts

View workflow job for this annotation

GitHub Actions / NPM lint

Expected JSDoc block to be aligned
export function registerFilesHandler(excalidrawApi: ExcalidrawImperativeAPI) {
const containerRef = document.getElementsByClassName("excalidraw-container")[0]
if (containerRef) {
containerRef.addEventListener('drop', (ev) => filesEventListener(ev, excalidrawApi))
}
}

0 comments on commit e05b3b8

Please sign in to comment.