From 23a895b07a5f37d897f5b796463b5bc2bd0afcf1 Mon Sep 17 00:00:00 2001 From: Dawid Poliszak Date: Wed, 4 Dec 2024 11:51:19 +0100 Subject: [PATCH 1/2] fix: window position --- src/components/window/WindowFrame.tsx | 41 +++++++++++++++++++++------ 1 file changed, 33 insertions(+), 8 deletions(-) diff --git a/src/components/window/WindowFrame.tsx b/src/components/window/WindowFrame.tsx index 3b23b867..8026846b 100644 --- a/src/components/window/WindowFrame.tsx +++ b/src/components/window/WindowFrame.tsx @@ -1,10 +1,11 @@ import { css, cx } from "@emotion/css"; +import { isEqual } from "lodash"; import { mapValues } from "lodash/fp"; import React, { forwardRef, PropsWithChildren, RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import FocusLock from "react-focus-lock"; import { Position, Rnd } from "react-rnd"; import { CSSTransition } from "react-transition-group"; -import { useMutationObserver, usePreviousDifferent, usePreviousImmediate } from "rooks"; +import { useDebounce, useMutationObserver, usePreviousDifferent, usePreviousImmediate } from "rooks"; import { DRAG_HANDLE_CLASS_NAME, DRAG_PREVENT_CLASS_NAME } from "../../consts"; import { useViewportSize } from "../../hooks"; import { useScrollFix } from "../../hooks/useScrollFix"; @@ -113,7 +114,6 @@ export const WindowFrame = forwardRef((props: PropsWithChildren { - if (ref.current && !wasMaximized) { + if (ref.current) { const randomize = mapValues((v: number) => Math.max(0, v + random(randomizePosition))); const { height, width } = ref.current.getBoundingClientRect(); const x = (viewport.width - width) / 2; - const y = (viewport.height * 0.65 - height) / 2; + const y = (viewport.height * 0.75 - height) / 2; const center = randomize({ x, y }); setPosition( roundCoords({ - x: initialPosition.x ?? calcCoord(center.x, center.x + width, width, viewport.width, windowMargin), - y: initialPosition.y ?? calcCoord(center.y, center.y + height, height, viewport.height, windowMargin), + x: initialPosition.x ?? center.x, + y: initialPosition.y ?? center.y, }), ); } }, - [randomizePosition, viewport.height, viewport.width, wasMaximized, windowMargin], + [randomizePosition, viewport.height, viewport.width], ); const onContentChanged = useCallback(() => { @@ -154,6 +154,31 @@ export const WindowFrame = forwardRef((props: PropsWithChildren { + const width = size?.width || box?.width || 0; + const height = size?.height || box?.height || 0; + return roundCoords({ + x: calcCoord(box.x, box.x + box.width, width, viewport.width, windowMargin), + y: calcCoord(box.y, box.y + box.height, height, viewport.height, windowMargin), + }); + }, + [size, windowMargin], + ); + + // it fixes an issue with Maximum update depth exceeded error + const debounceSetPosition = useDebounce(setPosition, 0, { leading: true }); + + useLayoutEffect(() => { + if (contentAvailable && position && !(maximized || wasMaximized)) { + const newValue = calcEdgePosition(viewport); + debounceSetPosition((current) => (isEqual(newValue, current) ? current : newValue)); + } + }, [contentAvailable, wasMaximized, calcEdgePosition, maximized, position, viewport, debounceSetPosition]); + const savePosition = useCallback((position: Position) => !maximized && setPosition(roundCoords(position)), [maximized]); const [side, setSide] = useState(Side.none); @@ -238,7 +263,7 @@ export const WindowFrame = forwardRef((props: PropsWithChildren ({ width: `calc(100% - ${position?.x <= windowMargin ? windowMargin * 2 : position?.x || 0}px)`, - height: viewport.height - (position?.y <= windowMargin ? windowMargin * 2 : position?.y + windowMargin || 0), + height: viewport.height - (position?.y <= windowMargin ? windowMargin * 2 : position?.y || 0), }), [windowMargin, position, viewport.height], ); From 437697d07d664882ba67e1c480f31cdddc0eff51 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 27 Nov 2024 13:43:40 +0000 Subject: [PATCH 2/2] chore(release): 1.9.1-beta.3 [skip ci] ## [1.9.1-beta.3](https://github.com/touk/nk-windows/compare/v1.9.1-beta.2...v1.9.1-beta.3) (2024-11-27) ### Bug Fixes * Maximum update depth exceeded error ([e15935a](https://github.com/touk/nk-windows/commit/e15935acb84771237fee072b58109153741ae61c)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c7d65cf6..e7c5d7e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## [1.9.1-beta.3](https://github.com/touk/nk-windows/compare/v1.9.1-beta.2...v1.9.1-beta.3) (2024-11-27) + + +### Bug Fixes + +* Maximum update depth exceeded error ([e15935a](https://github.com/touk/nk-windows/commit/e15935acb84771237fee072b58109153741ae61c)) + ## [1.9.1-beta.2](https://github.com/touk/nk-windows/compare/v1.9.1-beta.1...v1.9.1-beta.2) (2024-11-27) diff --git a/package-lock.json b/package-lock.json index eda93045..f72c4210 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@touk/window-manager", - "version": "1.9.1-beta.2", + "version": "1.9.1-beta.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@touk/window-manager", - "version": "1.9.1-beta.2", + "version": "1.9.1-beta.3", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 1f907bb5..eab679e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@touk/window-manager", - "version": "1.9.1-beta.2", + "version": "1.9.1-beta.3", "types": "./cjs/index.d.ts", "main": "./cjs/index.js", "module": "./esm/index.js",