diff --git a/apps/web-e2e/src/example.spec.ts b/apps/web-e2e/src/example.spec.ts index fa8f1f3..22997c3 100644 --- a/apps/web-e2e/src/example.spec.ts +++ b/apps/web-e2e/src/example.spec.ts @@ -4,5 +4,5 @@ test('has title', async ({ page }) => { await page.goto('/'); // Expect h1 to contain a substring. - expect(await page.locator('h1').innerText()).toContain('Welcome'); + expect(await page.locator('drawnix')).toBeTruthy(); }); diff --git a/packages/drawnix/src/components/toolbar/app-toolbar/app-toolbar.tsx b/packages/drawnix/src/components/toolbar/app-toolbar/app-toolbar.tsx index abb09a8..34beb77 100644 --- a/packages/drawnix/src/components/toolbar/app-toolbar/app-toolbar.tsx +++ b/packages/drawnix/src/components/toolbar/app-toolbar/app-toolbar.tsx @@ -23,7 +23,7 @@ import { OpenFile, SaveAsImage, SaveToFile, Socials } from './app-menu-items'; import Menu from '../../menu/menu'; import MenuSeparator from '../../menu/menu-separator'; -export const AppToolbar: React.FC = () => { +export const AppToolbar = () => { const board = useBoard(); const container = PlaitBoard.getBoardContainer(board); const selectedElements = getSelectedElements(board); diff --git a/packages/drawnix/src/components/toolbar/popup-toolbar/popup-toolbar.tsx b/packages/drawnix/src/components/toolbar/popup-toolbar/popup-toolbar.tsx index 5af9181..ce9620c 100644 --- a/packages/drawnix/src/components/toolbar/popup-toolbar/popup-toolbar.tsx +++ b/packages/drawnix/src/components/toolbar/popup-toolbar/popup-toolbar.tsx @@ -44,9 +44,7 @@ import { PopupFillButton } from './fill-button'; import { isWhite, removeHexAlpha } from '../../../utils/color'; import { NO_COLOR } from '../../../constants/color'; -export type PopupToolbarProps = null; - -export const PopupToolbar: React.FC = () => { +export const PopupToolbar = () => { const board = useBoard(); const selectedElements = getSelectedElements(board); const [movingOrDragging, setMovingOrDragging] = useState(false); diff --git a/packages/drawnix/src/components/toolbar/zoom-toolbar.tsx b/packages/drawnix/src/components/toolbar/zoom-toolbar.tsx index 44806f8..b05e249 100644 --- a/packages/drawnix/src/components/toolbar/zoom-toolbar.tsx +++ b/packages/drawnix/src/components/toolbar/zoom-toolbar.tsx @@ -14,7 +14,7 @@ import { useState } from 'react'; import Menu from '../menu/menu'; import MenuItem from '../menu/menu-item'; -export const ZoomToolbar: React.FC = () => { +export const ZoomToolbar = () => { const board = useBoard(); const container = PlaitBoard.getBoardContainer(board); const [zoomMenuOpen, setZoomMenuOpen] = useState(false); diff --git a/packages/drawnix/src/data/blob.ts b/packages/drawnix/src/data/blob.ts index 1cb391e..5046bbd 100644 --- a/packages/drawnix/src/data/blob.ts +++ b/packages/drawnix/src/data/blob.ts @@ -1,7 +1,7 @@ import { PlaitBoard } from '@plait/core'; import { isValidDrawnixData } from './json'; import { MIME_TYPES } from '../constants'; -import { ValueOf } from '../utility-types'; +import { ValueOf } from '../utils/utility-types'; export const loadFromBlob = async (board: PlaitBoard, blob: Blob | File) => { const contents = await parseFileContents(blob); diff --git a/packages/drawnix/src/hooks/use-outside-click.ts b/packages/drawnix/src/hooks/use-outside-click.ts deleted file mode 100644 index 2c79143..0000000 --- a/packages/drawnix/src/hooks/use-outside-click.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { useEffect } from 'react'; -import { EVENT } from '../constants'; - -export function useOutsideClick( - ref: React.RefObject, - /** if performance is of concern, memoize the callback */ - callback: (event: Event) => void, - /** - * Optional callback which is called on every click. - * - * Should return `true` if click should be considered as inside the container, - * and `false` if it falls outside and should call the `callback`. - * - * Returning `true` overrides the default behavior and `callback` won't be - * called. - * - * Returning `undefined` will fallback to the default behavior. - */ - isInside?: ( - event: Event & { target: HTMLElement }, - /** the element of the passed ref */ - container: T - ) => boolean | undefined -) { - useEffect(() => { - function onOutsideClick(event: Event) { - const _event = event as Event & { target: T }; - - if (!ref.current) { - return; - } - - const isInsideOverride = isInside?.(_event, ref.current); - - if (isInsideOverride === true) { - return; - } else if (isInsideOverride === false) { - return callback(_event); - } - - // clicked element is in the descenendant of the target container - if ( - ref.current.contains(_event.target) || - // target is detached from DOM (happens when the element is removed - // on a pointerup event fired *before* this handler's pointerup is - // dispatched) - !document.documentElement.contains(_event.target) - ) { - return; - } - - const isClickOnRadixPortal = - _event.target.closest('[data-radix-portal]') || - // when radix popup is in "modal" mode, it disables pointer events on - // the `body` element, so the target element is going to be the `html` - // (note: this won't work if we selectively re-enable pointer events on - // specific elements as we do with navbar or excalidraw UI elements) - (_event.target === document.documentElement && - document.body.style.pointerEvents === 'none'); - - // if clicking on radix portal, assume it's a popup that - // should be considered as part of the UI. Obviously this is a terrible - // hack you can end up click on radix popups that outside the tree, - // but it works for most cases and the downside is minimal for now - if (isClickOnRadixPortal) { - return; - } - - // clicking on a container that ignores outside clicks - if (_event.target.closest('[data-prevent-outside-click]')) { - return; - } - - callback(_event); - } - - // note: don't use `click` because it often reports incorrect `event.target` - document.addEventListener(EVENT.POINTER_DOWN, onOutsideClick); - document.addEventListener(EVENT.TOUCH_START, onOutsideClick); - - return () => { - document.removeEventListener(EVENT.POINTER_DOWN, onOutsideClick); - document.removeEventListener(EVENT.TOUCH_START, onOutsideClick); - }; - }, [ref, callback, isInside]); -} diff --git a/packages/drawnix/src/hooks/use-stable.ts b/packages/drawnix/src/hooks/use-stable.ts deleted file mode 100644 index 708a3f2..0000000 --- a/packages/drawnix/src/hooks/use-stable.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useRef } from 'react'; - -export const useStable = >(value: T) => { - const ref = useRef(value); - Object.assign(ref.current, value); - return ref.current; -}; diff --git a/packages/react-board/src/hooks/use-board-event.ts b/packages/react-board/src/hooks/use-board-event.ts index 8bff8c2..65aebaa 100644 --- a/packages/react-board/src/hooks/use-board-event.ts +++ b/packages/react-board/src/hooks/use-board-event.ts @@ -5,7 +5,6 @@ import { initializeViewBox, initializeViewportContainer, isFromViewportChange, - isPreventTouchMove, setIsFromViewportChange, updateViewportByScrolling, updateViewportOffset,