From a6e137db6194b18159e0217e0eb87e5a89b02e61 Mon Sep 17 00:00:00 2001 From: Stukova Olya Date: Fri, 24 Jun 2022 21:38:17 +0500 Subject: [PATCH] React component style adjustments #7 --- package-lock.json | 66 ++++++++++++++-- package.json | 2 + src/DimensionsApp.js | 4 +- src/VOSviewerApp.js | 4 +- src/ZetaAlphaApp.js | 4 +- src/component.js | 8 +- src/components/ui/ControlPanel/styles.js | 6 +- src/components/ui/Fullscreen/index.js | 43 +---------- .../VisualizationComponent/index.js | 76 ++++++++++--------- .../VisualizationComponent/styles.js | 1 + src/pages/Dimensions/index.js | 4 +- src/pages/Dimensions/style.js | 4 +- src/pages/VOSviewer/index.js | 4 +- src/pages/VOSviewer/style.js | 4 +- src/pages/ZetaAlpha/index.js | 4 +- src/pages/ZetaAlpha/style.js | 4 +- 16 files changed, 136 insertions(+), 102 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4fb242e..d0f1332 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,8 @@ "papaparse": "^5.3.1", "qrcode.react": "^1.0.1", "qs": "^6.10.2", + "react-full-screen": "^1.1.1", + "react-resize-detector": "^7.1.2", "use-debounce": "0.0.7" }, "devDependencies": { @@ -2748,9 +2750,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.0.14", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz", - "integrity": "sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==", + "version": "17.0.47", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz", + "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -6671,6 +6673,11 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, + "node_modules/fscreen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz", + "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==" + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -9595,6 +9602,20 @@ "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==", "dev": true }, + "node_modules/react-full-screen": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz", + "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==", + "dependencies": { + "fscreen": "^1.0.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/react-helmet": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", @@ -9628,6 +9649,18 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "node_modules/react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "dependencies": { + "lodash": "^4.17.21" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", @@ -13818,9 +13851,9 @@ "dev": true }, "@types/react": { - "version": "18.0.14", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz", - "integrity": "sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==", + "version": "17.0.47", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz", + "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==", "dev": true, "requires": { "@types/prop-types": "*", @@ -17017,6 +17050,11 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, + "fscreen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz", + "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==" + }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -19226,6 +19264,14 @@ "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==", "dev": true }, + "react-full-screen": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz", + "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==", + "requires": { + "fscreen": "^1.0.2" + } + }, "react-helmet": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", @@ -19253,6 +19299,14 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "react-resize-detector": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.2.tgz", + "integrity": "sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw==", + "requires": { + "lodash": "^4.17.21" + } + }, "react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", diff --git a/package.json b/package.json index 402b18c..ee25463 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,8 @@ "papaparse": "^5.3.1", "qrcode.react": "^1.0.1", "qs": "^6.10.2", + "react-full-screen": "^1.1.1", + "react-resize-detector": "^7.1.2", "use-debounce": "0.0.7" }, "devDependencies": { diff --git a/src/DimensionsApp.js b/src/DimensionsApp.js index e63da1f..cc7f924 100644 --- a/src/DimensionsApp.js +++ b/src/DimensionsApp.js @@ -2,8 +2,8 @@ import React from 'react'; import Dimensions from './pages/Dimensions'; -const DimensionsApp = ({ parameters }) => ( - +const DimensionsApp = ({ parameters, fullscreenHandle }) => ( + ); export default DimensionsApp; diff --git a/src/VOSviewerApp.js b/src/VOSviewerApp.js index 1f18756..2a31947 100644 --- a/src/VOSviewerApp.js +++ b/src/VOSviewerApp.js @@ -2,8 +2,8 @@ import React from 'react'; import VOSviewer from './pages/VOSviewer'; -const VOSviewerApp = ({ parameters }) => ( - +const VOSviewerApp = ({ parameters, fullscreenHandle }) => ( + ); diff --git a/src/ZetaAlphaApp.js b/src/ZetaAlphaApp.js index e6e7632..8b14bdf 100644 --- a/src/ZetaAlphaApp.js +++ b/src/ZetaAlphaApp.js @@ -2,8 +2,8 @@ import React from 'react'; import ZetaAlpha from './pages/ZetaAlpha'; -const ZetaAlphaApp = ({ parameters }) => ( - +const ZetaAlphaApp = ({ parameters, fullscreenHandle }) => ( + ); export default ZetaAlphaApp; diff --git a/src/component.js b/src/component.js index 5cd0fed..1d066f6 100644 --- a/src/component.js +++ b/src/component.js @@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite'; import levenSort from 'leven-sort'; import _isUndefined from 'lodash/isUndefined'; import _isPlainObject from 'lodash/isPlainObject'; +import { FullScreen, useFullScreenHandle } from "react-full-screen"; import { parameterKeys } from 'utils/variables'; import { @@ -23,6 +24,7 @@ const VOSviewer = observer(({ parameters = {}, data }) => { const queryStringStore = useContext(QueryStringStoreContext); const webworkerStore = useContext(WebworkerStoreContext); const [firstRender, setFirstRender] = useState(true); + const fullscreenHandle = useFullScreenHandle(); if (firstRender) { setFirstRender(false); @@ -200,7 +202,11 @@ const VOSviewer = observer(({ parameters = {}, data }) => { } return ( - +
+ + + +
); }); diff --git a/src/components/ui/ControlPanel/styles.js b/src/components/ui/ControlPanel/styles.js index ae0c37a..38f6ef3 100644 --- a/src/components/ui/ControlPanel/styles.js +++ b/src/components/ui/ControlPanel/styles.js @@ -3,16 +3,20 @@ import { controlPanelWidth } from 'utils/variables'; export const open = css` label: control-panel-open; + + z-index: 0; `; export const closed = css` label: control-panel-closed; + + z-index: 0; `; export const controlPanel = css` label: control-panel; top: 0; - position: fixed; + position: absolute; width: ${controlPanelWidth - 2}px; height: 100%; background-color: rgba(255, 255, 255, 0.95); diff --git a/src/components/ui/Fullscreen/index.js b/src/components/ui/Fullscreen/index.js index 1095d22..885844f 100644 --- a/src/components/ui/Fullscreen/index.js +++ b/src/components/ui/Fullscreen/index.js @@ -7,47 +7,12 @@ import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; import { ConfigStoreContext } from 'store/stores'; import * as s from './styles'; -const Fullscreen = observer(() => { +const Fullscreen = observer(({ enter, exit, active }) => { const configStore = useContext(ConfigStoreContext); useEffect(() => { - document.addEventListener("fullscreenchange", () => { - configStore.setFullscreen(document.fullscreen); - }, false); - - document.addEventListener("mozfullscreenchange", () => { - configStore.setFullscreen(document.fullscreen); - }, false); - - document.addEventListener("webkitfullscreenchange", () => { - configStore.setFullscreen(document.fullscreen); - }, false); - }, []); - - // https://gist.github.com/simonewebdesign/6183356 - - const changeFullscreen = () => { - if (configStore.fullscreen) { - if (document.cancelFullScreen) { - document.cancelFullScreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } - } else { - const el = document.body; - if (el.requestFullscreen) { - el.requestFullscreen(); - } else if (el.msRequestFullscreen) { - el.msRequestFullscreen(); - } else if (el.mozRequestFullScreen) { - el.mozRequestFullScreen(); - } else if (el.webkitRequestFullscreen) { - el.webkitRequestFullscreen(); - } - } - }; + configStore.setFullscreen(active); + }, [active]); return ( <> @@ -55,7 +20,7 @@ const Fullscreen = observer(() => { && (
diff --git a/src/components/visualization/VisualizationComponent/index.js b/src/components/visualization/VisualizationComponent/index.js index 2f3948f..cbaba9d 100644 --- a/src/components/visualization/VisualizationComponent/index.js +++ b/src/components/visualization/VisualizationComponent/index.js @@ -1,5 +1,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import { observer } from 'mobx-react-lite'; +import { withResizeDetector } from 'react-resize-detector'; import { ConfigStoreContext, FileDataStoreContext, UiStoreContext, VisualizationStoreContext, WebworkerStoreContext @@ -11,29 +12,33 @@ import HighlightedItemCircleLinkCanvas from 'components/visualization/Highlighte import ItemLabelCanvas from 'components/visualization/ItemLabelCanvas'; import * as s from './styles'; -const VisualizationComponent = observer(({ withoutUrlPreviewPanel, withoutLinks, withoutItemLabels, customFont }) => { +const VisualizationComponent = observer(({ + width, height, withoutUrlPreviewPanel, withoutLinks, withoutItemLabels, customFont +}) => { const configStore = useContext(ConfigStoreContext); const fileDataStore = useContext(FileDataStoreContext); const uiStore = useContext(UiStoreContext); const visualizationStore = useContext(VisualizationStoreContext); const webworkerStore = useContext(WebworkerStoreContext); const visEl = useRef(null); - const [canvasSize, setCanvasSize] = useState([window.innerWidth, window.innerHeight]); + const [canvasSize, setCanvasSize] = useState(undefined); const updateCanvasSize = () => { setCanvasSize([ - window.innerWidth - ((configStore.urlPreviewPanel && !withoutUrlPreviewPanel) ? configStore.urlPreviewPanelWidth : 0), - window.innerHeight + visEl.current.offsetWidth - ((configStore.urlPreviewPanel && !withoutUrlPreviewPanel) ? configStore.urlPreviewPanelWidth : 0), + visEl.current.offsetHeight ]); uiStore.setWindowInnerWidth(window.innerWidth); }; useEffect(() => { - visualizationStore.setCanvasSize(canvasSize[0], canvasSize[1]); - visualizationStore.updateItemPixelPositionAndScaling(); - visualizationStore.updateLabelScalingFactors(); - visualizationStore.updateItems(); - visualizationStore.updateLinks(); + if (canvasSize) { + visualizationStore.setCanvasSize(canvasSize[0], canvasSize[1]); + visualizationStore.updateItemPixelPositionAndScaling(); + visualizationStore.updateLabelScalingFactors(); + visualizationStore.updateItems(); + visualizationStore.updateLinks(); + } }, [canvasSize]); useEffect(() => { @@ -41,11 +46,10 @@ const VisualizationComponent = observer(({ withoutUrlPreviewPanel, withoutLinks, }, [configStore.urlPreviewPanel]); useEffect(() => { - window.addEventListener('resize', updateCanvasSize); - return () => { - window.removeEventListener('resize', updateCanvasSize); - }; - }, []); + if (width && height) { + updateCanvasSize(); + } + }, [width, height]); useEffect(() => { if (visEl) { @@ -88,35 +92,39 @@ const VisualizationComponent = observer(({ withoutUrlPreviewPanel, withoutLinks, onClick={handleClick} ref={visEl} > - - {!withoutLinks ? ( - + + {!withoutLinks ? ( + ) : null} - - - {!withoutItemLabels ? ( - + + {!withoutItemLabels ? ( + ) : null} + + )}
); }); -export default VisualizationComponent; +export default withResizeDetector(VisualizationComponent); diff --git a/src/components/visualization/VisualizationComponent/styles.js b/src/components/visualization/VisualizationComponent/styles.js index bbc5528..85945d6 100644 --- a/src/components/visualization/VisualizationComponent/styles.js +++ b/src/components/visualization/VisualizationComponent/styles.js @@ -6,4 +6,5 @@ export const visContainer = (urlPreviewPanel, previewPanelWidth) => css` top: 0; height: 100%; width: calc(100% - ${urlPreviewPanel ? previewPanelWidth : 0}px); + background: inherit; `; diff --git a/src/pages/Dimensions/index.js b/src/pages/Dimensions/index.js index 762f822..ab654f2 100644 --- a/src/pages/Dimensions/index.js +++ b/src/pages/Dimensions/index.js @@ -35,7 +35,7 @@ import { getProxyUrl } from 'utils/helpers'; import { parameterKeys, panelBackgroundColors, visualizationBackgroundColors } from 'utils/variables'; import * as s from './style'; -const Dimensions = observer(({ queryString = {} }) => { +const Dimensions = observer(({ queryString = {}, fullscreenHandle }) => { const clusteringStore = useContext(ClusteringStoreContext); const configStore = useContext(ConfigStoreContext); const layoutStore = useContext(LayoutStoreContext); @@ -236,7 +236,7 @@ const Dimensions = observer(({ queryString = {} }) => { - + diff --git a/src/pages/Dimensions/style.js b/src/pages/Dimensions/style.js index 1abecdf..98016f7 100644 --- a/src/pages/Dimensions/style.js +++ b/src/pages/Dimensions/style.js @@ -4,9 +4,7 @@ import { visualizationBackgroundColors } from 'utils/variables'; export const app = (isDark) => css` label: app; - &:fullscreen { - background: ${isDark ? visualizationBackgroundColors.DARK : visualizationBackgroundColors.LIGHT}; - } + background: ${isDark ? visualizationBackgroundColors.DARK : visualizationBackgroundColors.LIGHT}; `; export const previewIsOpen = css` diff --git a/src/pages/VOSviewer/index.js b/src/pages/VOSviewer/index.js index 59b75af..560b870 100644 --- a/src/pages/VOSviewer/index.js +++ b/src/pages/VOSviewer/index.js @@ -33,7 +33,7 @@ import { getProxyUrl } from 'utils/helpers'; import { parameterKeys, panelBackgroundColors, visualizationBackgroundColors } from 'utils/variables'; import * as s from './style'; -const VOSviewer = observer(({ queryString = {} }) => { +const VOSviewer = observer(({ queryString = {}, fullscreenHandle }) => { const clusteringStore = useContext(ClusteringStoreContext); const configStore = useContext(ConfigStoreContext); const layoutStore = useContext(LayoutStoreContext); @@ -226,8 +226,8 @@ const VOSviewer = observer(({ queryString = {} }) => { - + diff --git a/src/pages/VOSviewer/style.js b/src/pages/VOSviewer/style.js index 58449a2..6c4a1f5 100644 --- a/src/pages/VOSviewer/style.js +++ b/src/pages/VOSviewer/style.js @@ -4,9 +4,7 @@ import { visualizationBackgroundColors } from 'utils/variables'; export const app = (isDark) => css` label: app; - &:fullscreen { - background: ${isDark ? visualizationBackgroundColors.DARK : visualizationBackgroundColors.LIGHT}; - } + background: ${isDark ? visualizationBackgroundColors.DARK : visualizationBackgroundColors.LIGHT}; `; export const previewIsOpen = css` diff --git a/src/pages/ZetaAlpha/index.js b/src/pages/ZetaAlpha/index.js index bfe9eba..6bb3bf2 100644 --- a/src/pages/ZetaAlpha/index.js +++ b/src/pages/ZetaAlpha/index.js @@ -35,7 +35,7 @@ import { getProxyUrl } from 'utils/helpers'; import { parameterKeys, panelBackgroundColors, visualizationBackgroundColors } from 'utils/variables'; import * as s from './style'; -const ZetaAlpha = observer(({ queryString = {} }) => { +const ZetaAlpha = observer(({ queryString = {}, fullscreenHandle }) => { const clusteringStore = useContext(ClusteringStoreContext); const configStore = useContext(ConfigStoreContext); const layoutStore = useContext(LayoutStoreContext); @@ -236,7 +236,7 @@ const ZetaAlpha = observer(({ queryString = {} }) => { - + diff --git a/src/pages/ZetaAlpha/style.js b/src/pages/ZetaAlpha/style.js index a3fb19a..5bdbdf3 100644 --- a/src/pages/ZetaAlpha/style.js +++ b/src/pages/ZetaAlpha/style.js @@ -4,9 +4,7 @@ import { visualizationBackgroundColors } from 'utils/variables'; export const app = (isDark) => css` label: app; - &:fullscreen { - background: ${isDark ? visualizationBackgroundColors.DARK : visualizationBackgroundColors.LIGHT}; - } + background: ${isDark ? visualizationBackgroundColors.DARK : visualizationBackgroundColors.LIGHT}; `; export const previewIsOpen = css`