diff --git a/react-components/package.json b/react-components/package.json index b806b0ccdb8..74905ae251d 100644 --- a/react-components/package.json +++ b/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@cognite/reveal-react-components", - "version": "0.45.1", + "version": "0.46.0", "exports": { ".": { "import": "./dist/index.js", diff --git a/react-components/src/architecture/base/renderTarget/ToolController.ts b/react-components/src/architecture/base/renderTarget/ToolController.ts index b4826e873c3..df0aadb2a9f 100644 --- a/react-components/src/architecture/base/renderTarget/ToolController.ts +++ b/react-components/src/architecture/base/renderTarget/ToolController.ts @@ -171,17 +171,18 @@ export class ToolControllers extends PointerEvents { domElement.addEventListener('wheel', this._onWheel); domElement.addEventListener('focus', this._onFocus); domElement.addEventListener('blur', this._onBlur); + domElement.addEventListener('contextmenu', this._onContextMenu); this._pointerEventsTarget.addEventListeners(); } public removeEventListeners(): void { const domElement = this._domElement; domElement.removeEventListener('keydown', this._onKeyDown); - domElement.addEventListener('contextmenu', this._onContextMenu); domElement.removeEventListener('keyup', this._onKeyUp); domElement.removeEventListener('wheel', this._onWheel); domElement.removeEventListener('focus', this._onFocus); domElement.removeEventListener('blur', this._onBlur); + domElement.removeEventListener('contextmenu', this._onContextMenu); this._pointerEventsTarget.removeEventListeners(); for (const commands of this._commands) { commands.removeEventListeners(); @@ -194,8 +195,6 @@ export class ToolControllers extends PointerEvents { private readonly _onKeyDown = (event: KeyboardEvent): void => { this.onKey(event, true); - event.stopPropagation(); - event.preventDefault(); }; private readonly _onContextMenu = (event: MouseEvent): void => { @@ -205,8 +204,6 @@ export class ToolControllers extends PointerEvents { private readonly _onKeyUp = (event: KeyboardEvent): void => { this.onKey(event, false); - event.stopPropagation(); - event.preventDefault(); }; private readonly _onWheel = async (event: WheelEvent): Promise => { diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx index f5a32649a66..8f81600c371 100644 --- a/react-components/src/components/Architecture/CommandButton.tsx +++ b/react-components/src/components/Architecture/CommandButton.tsx @@ -2,7 +2,7 @@ * Copyright 2023 Cognite AS */ -import { type ReactElement, useState, useEffect } from 'react'; +import { type ReactElement, useState, useEffect, useMemo } from 'react'; import { useRenderTarget } from '../RevealCanvas/ViewerContext'; import { Button, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js'; import { useTranslation } from '../i18n/I18n'; @@ -17,9 +17,8 @@ export const CreateButton = (command: BaseCommand): ReactElement => { export const CommandButton = ({ command }: { command: BaseCommand }): ReactElement => { const renderTarget = useRenderTarget(); const { t } = useTranslation(); - const [newCommand] = useState(getDefaultCommand(command, renderTarget)); + const newCommand = useMemo(() => getDefaultCommand(command, renderTarget), []); - // These are redundant, but react fore me to add these to update const [isChecked, setChecked] = useState(false); const [isEnabled, setEnabled] = useState(true); const [isVisible, setVisible] = useState(true); diff --git a/react-components/src/components/RevealContext/RevealContext.tsx b/react-components/src/components/RevealContext/RevealContext.tsx index 3f95b28954d..03da7a53a93 100644 --- a/react-components/src/components/RevealContext/RevealContext.tsx +++ b/react-components/src/components/RevealContext/RevealContext.tsx @@ -101,13 +101,14 @@ const useRevealFromKeepAlive = ({ function getOrInitializeRenderTarget(): RevealRenderTarget { let renderTarget = revealKeepAliveData?.renderTargetRef.current; if (renderTarget === undefined) { - const viewer = new Cognite3DViewer({ ...viewerOptions, sdk }); + const viewer = new Cognite3DViewer({ ...viewerOptions, sdk, hasEventListeners: false }); renderTarget = new RevealRenderTarget(viewer); if (revealKeepAliveData !== undefined) { revealKeepAliveData.renderTargetRef.current = renderTarget; } } renderTarget.viewer.setBackgroundColor({ color, alpha: 1 }); + renderTarget.initialize(); setRenderTarget(renderTarget); return renderTarget; } diff --git a/react-components/tests/unit-tests/components/RevealContainer.test.tsx b/react-components/tests/unit-tests/components/RevealContainer.test.tsx index 928f7d3dc85..490c8f63ea9 100644 --- a/react-components/tests/unit-tests/components/RevealContainer.test.tsx +++ b/react-components/tests/unit-tests/components/RevealContainer.test.tsx @@ -35,7 +35,8 @@ describe(RevealCanvas.name, () => { .setup((viewer) => viewer.domElement) .returns(domElement) .object(); - } + }, + initialize(): void {} } as unknown as RevealRenderTarget); const isRevealContainerMountedRef = useRef(true); const sceneLoadedRef = useRef();