From 5f8e6a75125fe6d511f96fe40c24b038ca668f9c Mon Sep 17 00:00:00 2001 From: Michel Dastous Date: Mon, 7 Mar 2022 10:19:53 -0500 Subject: [PATCH 1/6] Replaced useResizeDerector by UseLayoutResizeObserver --- extensions/map-layers/src/ui/widget/SubLayersTree.scss | 3 +++ extensions/map-layers/src/ui/widget/SubLayersTree.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.scss b/extensions/map-layers/src/ui/widget/SubLayersTree.scss index b7da97dca722..776628ea44d3 100644 --- a/extensions/map-layers/src/ui/widget/SubLayersTree.scss +++ b/extensions/map-layers/src/ui/widget/SubLayersTree.scss @@ -61,4 +61,7 @@ .map-manager-sublayer-tree-content { flex-grow: 1; + width: "100%", + height: "100%", + overflow: "hidden" } \ No newline at end of file diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.tsx b/extensions/map-layers/src/ui/widget/SubLayersTree.tsx index 7c965f736577..b9a4ce766620 100644 --- a/extensions/map-layers/src/ui/widget/SubLayersTree.tsx +++ b/extensions/map-layers/src/ui/widget/SubLayersTree.tsx @@ -12,7 +12,7 @@ import { } from "@itwin/components-react"; import { ImageMapLayerSettings, MapSubLayerProps, MapSubLayerSettings } from "@itwin/core-common"; import { IModelApp, ScreenViewport } from "@itwin/core-frontend"; -import { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, WebFontIcon } from "@itwin/core-react"; +import { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, useLayoutResizeObserver, useRefState, WebFontIcon } from "@itwin/core-react"; import { Input } from "@itwin/itwinui-react"; import * as React from "react"; import { useResizeDetector } from "react-resize-detector"; @@ -137,7 +137,8 @@ export function SubLayersTree(props: { mapLayer: StyleMapLayerSettings }) { setLayerFilterString(event.target.value); }, []); - const { width, height, ref } = useResizeDetector(); + const [divRef, divElement] = useRefState(); + const [width, height] = useLayoutResizeObserver(divElement ?? null); return <>
@@ -159,7 +160,8 @@ export function SubLayersTree(props: { mapLayer: StyleMapLayerSettings }) { , ]} -
+ {/*
*/} +
{width && height ? Date: Tue, 8 Mar 2022 08:34:03 -0500 Subject: [PATCH 2/6] changelog --- .../geo-fix_ResizeObserver_2022-03-08-13-33.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@itwin/map-layers/geo-fix_ResizeObserver_2022-03-08-13-33.json diff --git a/common/changes/@itwin/map-layers/geo-fix_ResizeObserver_2022-03-08-13-33.json b/common/changes/@itwin/map-layers/geo-fix_ResizeObserver_2022-03-08-13-33.json new file mode 100644 index 000000000000..83f01b898748 --- /dev/null +++ b/common/changes/@itwin/map-layers/geo-fix_ResizeObserver_2022-03-08-13-33.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/map-layers", + "comment": "Fix 'ResizeObserver loop limit exceeded' error in MapLayers widget", + "type": "none" + } + ], + "packageName": "@itwin/map-layers" +} \ No newline at end of file From af1ca78c0facb42fbbbd5eb4ede39c1706160229 Mon Sep 17 00:00:00 2001 From: Michel Dastous Date: Tue, 8 Mar 2022 08:34:43 -0500 Subject: [PATCH 3/6] fixed CSS typo --- extensions/map-layers/src/ui/widget/SubLayersTree.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.scss b/extensions/map-layers/src/ui/widget/SubLayersTree.scss index 776628ea44d3..cd543cc42607 100644 --- a/extensions/map-layers/src/ui/widget/SubLayersTree.scss +++ b/extensions/map-layers/src/ui/widget/SubLayersTree.scss @@ -61,7 +61,7 @@ .map-manager-sublayer-tree-content { flex-grow: 1; - width: "100%", - height: "100%", + width: "100%"; + height: "100%"; overflow: "hidden" } \ No newline at end of file From 50bec492dd1adc9c8d2521ce267c2f7661baaadf Mon Sep 17 00:00:00 2001 From: Michel Dastous Date: Wed, 9 Mar 2022 08:03:06 -0500 Subject: [PATCH 4/6] Removed no longer needed react-resize-detector from package.json --- extensions/map-layers/package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/extensions/map-layers/package.json b/extensions/map-layers/package.json index 49221e99ed52..c4bec2be1da3 100644 --- a/extensions/map-layers/package.json +++ b/extensions/map-layers/package.json @@ -85,8 +85,7 @@ }, "dependencies": { "classnames": "^2.3.1", - "react-beautiful-dnd": "^13.0.0", - "react-resize-detector": "^6.7.6" + "react-beautiful-dnd": "^13.0.0" }, "peerDependencies": { "@itwin/core-bentley": "workspace:*", @@ -136,4 +135,4 @@ "mochaFile=lib/test/junit_results.xml" ] } -} +} \ No newline at end of file From 30040d2996a3aff271f85aa76b88f2820fd48363 Mon Sep 17 00:00:00 2001 From: Michel Dastous Date: Wed, 9 Mar 2022 08:42:27 -0500 Subject: [PATCH 5/6] Removed no longer needed react-resize-detector from package.json --- common/config/rush/pnpm-lock.yaml | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index acdea3a78b3a..e7a885e18201 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -1483,7 +1483,6 @@ importers: nyc: ^15.1.0 react: ^17.0.0 react-beautiful-dnd: ^13.0.0 - react-resize-detector: ^6.7.6 rimraf: ^3.0.2 sinon: ^9.0.2 sinon-chai: ^3.2.0 @@ -1492,7 +1491,6 @@ importers: dependencies: classnames: 2.3.1 react-beautiful-dnd: 13.1.0_react@17.0.2 - react-resize-detector: 6.7.8_react@17.0.2 devDependencies: '@itwin/appui-abstract': link:../../ui/appui-abstract '@itwin/appui-layout-react': link:../../ui/appui-layout-react @@ -19514,18 +19512,6 @@ packages: resize-observer-polyfill: 1.5.1 dev: false - /react-resize-detector/6.7.8_react@17.0.2: - resolution: {integrity: sha512-0FaEcUBAbn+pq3PT5a9hHRebUfuS1SRLGLpIw8LydU7zX429I6XJgKerKAMPsJH0qWAl6o5bVKNqFJqr6tGPYw==} - peerDependencies: - react: ^16.0.0 || ^17.0.0 - react-dom: ^16.0.0 || ^17.0.0 - dependencies: - '@types/resize-observer-browser': 0.1.7 - lodash: 4.17.21 - react: 17.0.2 - resize-observer-polyfill: 1.5.1 - dev: false - /react-select-event/5.0.0: resolution: {integrity: sha512-bESECffhi//x1nlMoRJtwI0nGl5n6OKaVYeIEcPTV8flVPycvUoBGank/1RIoxVc6WtoQ4QbPbU8xMvX0xAiOA==} dependencies: From 2b48902c6f4d4e415765a59620cf0edeebcdc1ef Mon Sep 17 00:00:00 2001 From: Michel Dastous Date: Wed, 9 Mar 2022 09:00:35 -0500 Subject: [PATCH 6/6] Removed import of react-resize-detector --- extensions/map-layers/src/ui/widget/SubLayersTree.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions/map-layers/src/ui/widget/SubLayersTree.tsx b/extensions/map-layers/src/ui/widget/SubLayersTree.tsx index b9a4ce766620..7c7e4ad61a81 100644 --- a/extensions/map-layers/src/ui/widget/SubLayersTree.tsx +++ b/extensions/map-layers/src/ui/widget/SubLayersTree.tsx @@ -15,7 +15,6 @@ import { IModelApp, ScreenViewport } from "@itwin/core-frontend"; import { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, useLayoutResizeObserver, useRefState, WebFontIcon } from "@itwin/core-react"; import { Input } from "@itwin/itwinui-react"; import * as React from "react"; -import { useResizeDetector } from "react-resize-detector"; import { StyleMapLayerSettings } from "../Interfaces"; import { SubLayersDataProvider } from "./SubLayersDataProvider"; import "./SubLayersTree.scss";