diff --git a/frontend/package.json b/frontend/package.json index a975a50..6295a3a 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -59,6 +59,7 @@ "react": "18.2.0", "react-ace": "^10.1.0", "react-dom": "18.2.0", + "react-svg-pan-zoom": "^3.12.1", "sass": "^1.69.5", "styled-components": "6.1.5" }, diff --git a/frontend/src/components/MapEnvironment.js b/frontend/src/components/MapEnvironment.js index 4956951..65043a0 100644 --- a/frontend/src/components/MapEnvironment.js +++ b/frontend/src/components/MapEnvironment.js @@ -61,10 +61,9 @@ function convertToImage(base64Data, contentType) { } const getHeight = () => { - var winHeight = window.innerHeight; - var topNavHeight = document.getElementById('top-nav-wrapper').clientHeight; - var titleHeight = document.getElementById('title').clientHeight; - return winHeight - topNavHeight - titleHeight - 95; + const winHeight = window.innerHeight; + const topNavHeight = document.getElementById('top-nav-wrapper').clientHeight; + return winHeight - topNavHeight - 95; }; const getWidth = () => { return document.getElementById('map').clientWidth - 50; @@ -116,6 +115,9 @@ function Environment(props) { ); const [mapIterations, setMapIterations] = useState([]); const [mapDimensions, setMapDimensions] = useState(Defaults.MapDimensions); + const [mapCanvasDimensions, setMapCanvasDimensions] = useState( + Defaults.MapDimensions + ); const [mapEvolutionStates, setMapEvolutionStates] = useState( Defaults.EvolutionStages ); @@ -137,7 +139,6 @@ function Environment(props) { const [hideNav, setHideNav] = useState(false); const mutateMapText = (newText) => { - console.log('mutate'); setMapText(newText); setSaveOutstanding(true); if (currentIteration !== null && currentIteration > -1) { @@ -291,13 +292,25 @@ function Environment(props) { } function downloadMap() { - html2canvas(mapRef.current).then((canvas) => { - const base64image = canvas.toDataURL('image/png'); - const link = document.createElement('a'); - link.download = mapTitle; - link.href = base64image; - link.click(); - }); + const svgMapText = mapRef.current.getElementsByTagName('svg')[0].outerHTML; + const tempElement = document.createElement('div'); + tempElement.innerHTML = svgMapText; + tempElement.style.position = 'absolute'; + tempElement.style.left = '-9999px'; + document.body.appendChild(tempElement); + html2canvas(tempElement, { useCORS: true, allowTaint: true }) + .then((canvas) => { + const base64image = canvas.toDataURL('image/png'); + const link = document.createElement('a'); + link.download = mapTitle; + link.href = base64image; + link.click(); + tempElement.remove(); + }) + .catch((x) => { + console.log(x); + tempElement.remove(); + }); } function downloadMapAsSVG() { @@ -389,7 +402,6 @@ function Environment(props) { useEffect(() => { document.title = mapTitle + ' - ' + Defaults.PageTitle; }, [mapTitle]); - useEffect(() => { setMapDimensions({ width: mapSize.width > 0 ? mapSize.width : getWidth(), @@ -467,31 +479,53 @@ function Environment(props) { useEffect(() => { const debouncedHandleResize = debounce(() => { - setMapDimensions({ + const dimensions = { width: mapSize.width > 0 ? mapSize.width : getWidth(), height: mapSize.height > 0 ? mapSize.height : getHeight(), - }); - }, 0); + }; + setMapDimensions(dimensions); + }, 1); - if (mapSize.width === 0 || mapSize.height === 0) { - window.addEventListener('resize', debouncedHandleResize); - debouncedHandleResize(); - } + window.addEventListener('resize', debouncedHandleResize); + debouncedHandleResize(); return function cleanup() { window.removeEventListener('resize', debouncedHandleResize); }; }, [mapSize]); + useEffect(() => { + const newDimensions = { + width: mapSize.width > 0 ? mapSize.width : getWidth(), + height: mapSize.height > 0 ? mapSize.height : getHeight(), + }; + setMapDimensions(newDimensions); + setMapCanvasDimensions({ + width: getWidth(), + height: getHeight(), + }); + }, [mapOnlyView, hideNav]); + useEffect(() => { const initialLoad = () => { - setMapDimensions({ + setMapCanvasDimensions({ width: getWidth(), height: getHeight(), }); }; + + const debouncedHandleCanvasResize = debounce(() => { + setMapCanvasDimensions({ + width: getWidth(), + height: getHeight(), + }); + }, 500); + window.addEventListener('load', initialLoad); + window.addEventListener('resize', debouncedHandleCanvasResize); + return function cleanup() { + window.removeEventListener('resize', debouncedHandleCanvasResize); window.removeEventListener('load', initialLoad); }; }, []); @@ -616,6 +650,7 @@ function Environment(props) { mapMethods={mapMethods} mapStyleDefs={mapStyleDefs} mapDimensions={mapDimensions} + mapCanvasDimensions={mapCanvasDimensions} mapEvolutionStates={mapEvolutionStates} mapRef={mapRef} mapText={mapText} diff --git a/frontend/src/components/editor/Editor.js b/frontend/src/components/editor/Editor.js index 97e37b3..70d80ef 100644 --- a/frontend/src/components/editor/Editor.js +++ b/frontend/src/components/editor/Editor.js @@ -37,10 +37,10 @@ function Editor(props) { }; const getHeight = () => { - var winHeight = window.innerHeight; - var topNavHeight = document.getElementById('top-nav-wrapper').clientHeight; - var titleHeight = document.getElementById('title').clientHeight; - return winHeight - topNavHeight - titleHeight + 35; + const winHeight = window.innerHeight; + const topNavHeight = + document.getElementById('top-nav-wrapper').clientHeight; + return winHeight - topNavHeight + 35; }; useEffect(() => { diff --git a/frontend/src/components/map/Anchor.js b/frontend/src/components/map/Anchor.js index a88da6b..3718372 100644 --- a/frontend/src/components/map/Anchor.js +++ b/frontend/src/components/map/Anchor.js @@ -56,6 +56,7 @@ const Anchor = (props) => { fixedY={false} fixedX={false} isModKeyPressed={isModKeyPressed} + scaleFactor={props.scaleFactor} > { y={y} fixedY={false} fixedX={false} + scaleFactor={props.scaleFactor} > )} {featureSwitches.enableLinkContext && link.context && ( diff --git a/frontend/src/components/map/ComponentText.js b/frontend/src/components/map/ComponentText.js index c8e5955..cff0bcc 100644 --- a/frontend/src/components/map/ComponentText.js +++ b/frontend/src/components/map/ComponentText.js @@ -125,6 +125,7 @@ function ComponentText(props) { onMove={overrideDrag ? overrideDrag : endDrag} x={element.label.x} y={element.label.y} + scaleFactor={props.scaleFactor} > {showTextField === false && ( { onMove={flowLabelEndDrag} y={flowLabelPosition.y} x={flowLabelPosition.x} + scaleFactor={props.scaleFactor} > { - setPosition((position) => { - const xDiff = position.coords.x - e.pageX; - const yDiff = position.coords.y - e.pageY; - return { - x: position.x - xDiff, - y: position.y - yDiff, - coords: { - x: e.pageX, - y: e.pageY, - }, - }; - }); - }; + const handleMouseMove = useCallback( + (e) => { + setPosition((position) => { + const scaleFactor = props.scaleFactor || 1; // Use scaleFactor from props, default to 1 if not provided + const xDiff = (position.coords.x - e.pageX) / scaleFactor; + const yDiff = (position.coords.y - e.pageY) / scaleFactor; + return { + x: position.x - xDiff, + y: position.y - yDiff, + coords: { + x: e.pageX, + y: e.pageY, + }, + }; + }); + }, + [props.scaleFactor] + ); useEffect(() => { const pageX = origClick.pageX; diff --git a/frontend/src/components/map/MapAccelerator.js b/frontend/src/components/map/MapAccelerator.js index dfd42f9..8bf0d1e 100644 --- a/frontend/src/components/map/MapAccelerator.js +++ b/frontend/src/components/map/MapAccelerator.js @@ -43,6 +43,7 @@ function MapAccelerator(props) { fixedX={false} shouldShowMoving={false} isModKeyPressed={false} + scaleFactor={props.scaleFactor} > <>{children} diff --git a/frontend/src/components/map/MapCanvas.js b/frontend/src/components/map/MapCanvas.js index f0faccb..64cef95 100644 --- a/frontend/src/components/map/MapCanvas.js +++ b/frontend/src/components/map/MapCanvas.js @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useEffect } from 'react'; +import React, { useMemo, useState, useEffect, useRef } from 'react'; import MethodElement from './MethodElement'; import MapElements from '../../MapElements'; import MapGrid from './foundation/MapGrid'; @@ -16,6 +16,7 @@ import Note from './Note'; import Attitude from './Attitude'; import LinksBuilder from '../../linkStrategies/LinksBuilder'; import MapGraphics from './foundation/MapGraphics'; +import MapTitle from './MapTitle'; import MapBackground from './foundation/MapBackground'; import SubMapSymbol from '../symbols/SubMapSymbol'; import ComponentSymbol from '../symbols/ComponentSymbol'; @@ -28,6 +29,22 @@ import { featureSwitches } from '../../constants/featureswitches'; import styles from '../../styles/MapCanvas.module.css'; import MapAccelerator from './MapAccelerator'; import AcceleratorSymbol from '../symbols/AcceleratorSymbol'; +import ZoomInIcon from '@mui/icons-material/ZoomIn'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; +import PanIcon from '@mui/icons-material/ControlCamera'; +import HandIcon from '@mui/icons-material/PanToolAlt'; +import FitScreenIcon from '@mui/icons-material/FitScreen'; +import FullscreenIcon from '@mui/icons-material/Fullscreen'; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; + +import { + UncontrolledReactSVGPanZoom, + TOOL_PAN, + TOOL_ZOOM_IN, + TOOL_ZOOM_OUT, + TOOL_NONE, +} from 'react-svg-pan-zoom'; +import { ButtonGroup, IconButton } from '@mui/material'; function MapCanvas(props) { const { @@ -41,7 +58,7 @@ function MapCanvas(props) { mapLinks, showLinkedEvolved, mapMethods, - svgRef, + mapRef, mapEvolutionStates, mapAttitudes, setMetaText, @@ -57,12 +74,55 @@ function MapCanvas(props) { setHighlightLine, mapAnchors, evolutionOffsets, - mapPadding, mapAccelerators, handleMapCanvasClick, + mapTitle, } = props; const isModKeyPressed = useModKeyPressedConsumer(); const [mapElementsClicked, setMapElementsClicked] = useState([]); + + const Viewer = useRef(null); + const [tool, setTool] = useState(TOOL_NONE); + const [scaleFactor, setScaleFactor] = useState(1); + const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); + + const _fitToViewer = () => { + Viewer.current.fitSelection( + -35, + -45, + props.mapDimensions.width + 70, + props.mapDimensions.height + 92 + ); + }; + + const handleMouseMove = (event) => { + setMousePosition({ x: event.x, y: event.y }); + }; + + const handleZoom = (value) => { + setScaleFactor(value.a); + }; + + const handleChangeTool = (event, newTool) => { + setTool(newTool); + }; + + const SelectedIconButtonStyle = { color: '#90caf9' }; + const IconButtonStyle = { color: 'rgba(0, 0, 0, 0.54)' }; + const textColour = { + wardley: 'black', + colour: 'black', + plain: 'black', + handwritten: 'black', + dark: 'white', + }; + + useEffect(() => { + if (Viewer.current) { + _fitToViewer(); + } + }, []); + const mapElements = new MapElements( [ { collection: mapComponents, type: 'component' }, @@ -96,8 +156,8 @@ function MapCanvas(props) { }; const newElementAt = function (e) { - var svg = document.getElementById('svgMap'); - var pt = svg.createSVGPoint(); + const svg = Viewer.current.Viewer.ViewerDOM; + let pt = svg.createSVGPoint(); function getCursor(evt) { pt.x = evt.clientX; @@ -105,8 +165,7 @@ function MapCanvas(props) { return pt.matrixTransform(svg.getScreenCTM().inverse()); } - var loc = getCursor(e); - + const loc = getCursor(e); const positionCalc = new PositionCalculator(); const x = positionCalc.xToMaturity(loc.x, mapDimensions.width); const y = positionCalc.yToVisibility(loc.y, mapDimensions.height); @@ -176,306 +235,393 @@ function MapCanvas(props) { return asMethod(toTransform); }); const allMeths = methods.concat(decoratedComponentsMethods); - return ( - quickAddAt(e)} + { + // console.log('click', event.x, event.y, event.originalEvent); + // console.log(Svg.current); + // }} onDoubleClick={(e) => newElementAt(e)} - fontFamily={mapStyleDefs.fontFamily} - fontSize={mapStyleDefs.fontSize} - className={[mapStyleDefs.className, styles.mapCanvas].join(' ')} - id="svgMap" - ref={svgRef} - width={mapDimensions.width + 2 * mapPadding} - height={mapDimensions.height + 4 * mapPadding} - viewBox={ - '-' + - mapPadding + - ' 0 ' + - (mapDimensions.width + mapPadding) + - ' ' + - (mapDimensions.height + mapPadding) - } - version="1.1" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" + onMouseMove={handleMouseMove} + onZoom={handleZoom} + onZoomReset={() => setScaleFactor(1)} > - - - - - - - - - {mapAttitudes.map((a, i) => ( - - ))} - - - - {allMeths.map((m, i) => ( - - ))} + quickAddAt(e)} + onDoubleClick={(e) => newElementAt(e)} + fontFamily={mapStyleDefs.fontFamily} + fontSize={mapStyleDefs.fontSize} + className={[mapStyleDefs.className, styles.mapCanvas].join(' ')} + id="svgMap" + width={mapDimensions.width + 80} + height={mapDimensions.height} + viewBox={ + '-30' + + ' -50 ' + + mapDimensions.width + + ' ' + + (mapDimensions.height + 80) + } + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + + + + + {mapAttitudes.map((a, i) => ( + + ))} + - - {mapElementsClicked.map((current, i) => { - return ( - + {allMeths.map((m, i) => ( + - ); - })} - + ))} + - {links.map((current) => { - return ( - - {current.links.map((l, i) => ( - + {mapElementsClicked.map((current, i) => { + return ( + + ); + })} + + + {links.map((current) => { + return ( + + {current.links.map((l, i) => ( + + ))} + + ); + })} + + + {mapElements.getEvolveElements().map((e, i) => ( + + ))} + ; + + + {mapAnchors.map((el, i) => ( + clicked({ el, e })} + scaleFactor={scaleFactor} + /> + ))} + + + {featureSwitches.enableAccelerators && + mapAccelerators.map((el, l) => ( + + setHighlightLine(el.line)} + /> + ))} - - ); - })} - - - {mapElements.getEvolveElements().map((e, i) => ( - - ))} - ; - - - {mapAnchors.map((el, i) => ( - clicked({ el, e })} - /> - ))} - - - {featureSwitches.enableAccelerators && - mapAccelerators.map((el, l) => ( - + + {featureSwitches.enableNewPipelines && + mapElements + .getMapPipelines() + .filter((p) => p.hidden == false) + .map((p, i) => ( + + {featureSwitches.enableNewPipelines && + p.components != undefined && + p.components.length > 0 ? ( + + ) : ( + + )} + + ))} + + + {mapElements.getMergedElements().map((el, i) => ( + - setHighlightLine(el.line)} - /> - + {el.type === 'component' && ( + clicked({ el, e })} + /> + )} + + {el.pipeline && ( + clicked({ el, e })} + /> + )} + + {(el.decorators && el.decorators.ecosystem) || + el.type === 'ecosystem' ? ( + clicked({ el, e })} + /> + ) : null} + + {(el.decorators && el.decorators.market) || + el.type === 'market' ? ( + clicked({ el, e })} + /> + ) : null} + + {el.type === 'submap' && ( + clicked({ el, e })} + launchUrl={() => launchUrl(el.url)} + /> + )} + ))} - - - {featureSwitches.enableNewPipelines && - mapElements - .getMapPipelines() - .filter((p) => p.hidden == false) - .map((p, i) => ( - - {featureSwitches.enableNewPipelines && - p.components != undefined && - p.components.length > 0 ? ( - - ) : ( - - )} - - ))} - - - {mapElements.getMergedElements().map((el, i) => ( - - {el.type === 'component' && ( - clicked({ el, e })} - /> - )} - - {el.pipeline && ( - clicked({ el, e })} - /> - )} - - {(el.decorators && el.decorators.ecosystem) || - el.type === 'ecosystem' ? ( - clicked({ el, e })} - /> - ) : null} - - {(el.decorators && el.decorators.market) || - el.type === 'market' ? ( - clicked({ el, e })} - /> - ) : null} - - {el.type === 'submap' && ( - clicked({ el, e })} - launchUrl={() => launchUrl(el.url)} - /> - )} - - ))} - + - - {mapNotes.map((el, i) => ( - - ))} - + + {mapNotes.map((el, i) => ( + + ))} + - - {mapAnnotations.map((a, i) => ( - - {a.occurances.map((o, i1) => ( - - ))} - - ))} - {mapAnnotations.length === 0 ? null : ( - - )} + + {mapAnnotations.map((a, i) => ( + + {a.occurances.map((o, i1) => ( + + ))} + + ))} + {mapAnnotations.length === 0 ? null : ( + + )} + - - + + + + handleChangeTool(event, TOOL_NONE)} + sx={tool === TOOL_NONE ? SelectedIconButtonStyle : IconButtonStyle} + > + + + handleChangeTool(event, TOOL_PAN)} + sx={tool === TOOL_PAN ? SelectedIconButtonStyle : IconButtonStyle} + > + + + handleChangeTool(event, TOOL_ZOOM_IN)} + > + + + handleChangeTool(event, TOOL_ZOOM_OUT)} + > + + + _fitToViewer()} + > + + + + {props.hideNav ? ( + + ) : ( + + )} + + ); } diff --git a/frontend/src/components/map/MapComponent.js b/frontend/src/components/map/MapComponent.js index 185a5a6..51a1062 100644 --- a/frontend/src/components/map/MapComponent.js +++ b/frontend/src/components/map/MapComponent.js @@ -108,6 +108,7 @@ function MapComponent(props) { fixedX={false} shouldShowMoving={true} isModKeyPressed={isModKeyPressed} + scaleFactor={props.scaleFactor} > <>{props.children} @@ -126,6 +127,7 @@ function MapComponent(props) { mapText={props.mapText} mutateMapText={props.mutateMapText} onClick={onElementClick} + scaleFactor={props.scaleFactor} /> diff --git a/frontend/src/components/map/MapTitle.js b/frontend/src/components/map/MapTitle.js new file mode 100644 index 0000000..0795fea --- /dev/null +++ b/frontend/src/components/map/MapTitle.js @@ -0,0 +1,20 @@ +import React from 'react'; + +function MapTitle(props) { + const { mapTitle } = props; + + return ( + + {mapTitle} + + ); +} + +export default MapTitle; diff --git a/frontend/src/components/map/MapView.js b/frontend/src/components/map/MapView.js index 0bbe295..8ebf19c 100644 --- a/frontend/src/components/map/MapView.js +++ b/frontend/src/components/map/MapView.js @@ -1,8 +1,5 @@ -import { IconButton, Typography } from '@mui/material'; import React, { useState } from 'react'; import MapCanvas from './MapCanvas'; -import FullscreenIcon from '@mui/icons-material/Fullscreen'; -import FullscreenExitIcon from '@mui/icons-material/FullscreenExit'; import CanvasSpeedDial from './CanvasSpeedDial'; import { featureSwitches } from '../../constants/featureswitches'; import ReactDOMServer from 'react-dom/server'; @@ -22,14 +19,6 @@ export default function MapView(props) { dark: '#353347', }; - const textColour = { - wardley: 'black', - colour: 'black', - plain: 'black', - handwritten: 'black', - dark: 'white', - }; - const setQuickAdd = (quickAdd) => { setQuickAddInProgress(true); const i = svgToBase64Url( @@ -67,7 +56,6 @@ export default function MapView(props) { return ( <> - {/* Wrapping div required to ensure that images aren't generated with a ton of whitespace */}
)} - - {props.mapTitle} -
- +
- - {props.hideNav ? ( - - ) : ( - - )} -
); diff --git a/frontend/src/components/map/Movable.js b/frontend/src/components/map/Movable.js index b77929c..30ea03e 100644 --- a/frontend/src/components/map/Movable.js +++ b/frontend/src/components/map/Movable.js @@ -20,20 +20,24 @@ function Movable(props) { coords: {}, }); - const handleMouseMove = React.useRef((e) => { - setPosition((position) => { - const xDiff = position.coords.x - e.pageX; - const yDiff = position.coords.y - e.pageY; - return { - x: position.x - xDiff, - y: position.y - yDiff, - coords: { - x: e.pageX, - y: e.pageY, - }, - }; - }); - }); + const handleMouseMove = useCallback( + (e) => { + setPosition((position) => { + const scaleFactor = props.scaleFactor || 1; // Use scaleFactor from props, default to 1 if not provided + const xDiff = (position.coords.x - e.pageX) / scaleFactor; + const yDiff = (position.coords.y - e.pageY) / scaleFactor; + return { + x: position.x - xDiff, + y: position.y - yDiff, + coords: { + x: e.pageX, + y: e.pageY, + }, + }; + }); + }, + [props.scaleFactor] + ); const handleMouseDown = (e) => { if (props.isModKeyPressed) return; @@ -49,13 +53,13 @@ function Movable(props) { }, }) ); - document.addEventListener('mousemove', handleMouseMove.current); + document.addEventListener('mousemove', handleMouseMove); document.addEventListener('keyup', handleEscape); }; const handleEscape = (k) => { if (k.key === 'Escape' && moving) { - document.removeEventListener('mousemove', handleMouseMove.current); + document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('keyup', handleEscape); setMoving(false); endDrag(); @@ -65,7 +69,7 @@ function Movable(props) { const handleMouseUp = () => { if (props.isModKeyPressed) return; - document.removeEventListener('mousemove', handleMouseMove.current); + document.removeEventListener('mousemove', handleMouseMove); setPosition((position) => Object.assign({}, position, { coords: {}, @@ -89,7 +93,6 @@ function Movable(props) { y: y(), coords: {}, }); - //if (props.onEffects !== undefined) props.onEffects(); }, [x, y]); const filter = shouldHighlight(props); return ( diff --git a/frontend/src/components/map/Note.js b/frontend/src/components/map/Note.js index 0a1dedb..c82b6fb 100644 --- a/frontend/src/components/map/Note.js +++ b/frontend/src/components/map/Note.js @@ -47,6 +47,7 @@ function Note(props) { y={y()} fixedY={false} fixedX={false} + scaleFactor={props.scaleFactor} > diff --git a/frontend/src/components/map/RelativeMovable.js b/frontend/src/components/map/RelativeMovable.js index 5823136..ab6440f 100644 --- a/frontend/src/components/map/RelativeMovable.js +++ b/frontend/src/components/map/RelativeMovable.js @@ -10,26 +10,30 @@ function RelativeMovable(props) { coords: {}, }); - const handleMouseMove = React.useRef((e) => { - setPosition((position) => { - const xDiff = position.coords.x - e.pageX; - const yDiff = position.coords.y - e.pageY; - return { - x: position.x - xDiff, - y: position.y - yDiff, - coords: { - x: e.pageX, - y: e.pageY, - }, - }; - }); - }); + const handleMouseMove = useCallback( + (e) => { + setPosition((position) => { + const scaleFactor = props.scaleFactor || 1; // Use scaleFactor from props, default to 1 if not provided + const xDiff = (position.coords.x - e.pageX) / scaleFactor; + const yDiff = (position.coords.y - e.pageY) / scaleFactor; + return { + x: position.x - xDiff, + y: position.y - yDiff, + coords: { + x: e.pageX, + y: e.pageY, + }, + }; + }); + }, + [props.scaleFactor] + ); const handleEscape = (k) => { if (k.key === 'Escape' && moving) { setMoving(false); endDrag(); - document.removeEventListener('mousemove', handleMouseMove.current); + document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('keyup', handleEscape); setPosition({ x: x(), y: y() }); console.log('pressed'); @@ -48,12 +52,12 @@ function RelativeMovable(props) { }, }) ); - document.addEventListener('mousemove', handleMouseMove.current); + document.addEventListener('mousemove', handleMouseMove); document.addEventListener('keyup', handleEscape); }; const handleMouseUp = () => { - document.removeEventListener('mousemove', handleMouseMove.current); + document.removeEventListener('mousemove', handleMouseMove); setPosition((position) => Object.assign({}, position, { coords: {}, diff --git a/frontend/src/constants/mapstyles.js b/frontend/src/constants/mapstyles.js index b86f42a..fbcd7f2 100644 --- a/frontend/src/constants/mapstyles.js +++ b/frontend/src/constants/mapstyles.js @@ -5,7 +5,7 @@ const mergeIntoDefault = (style) => merge({}, Plain, style); export const Plain = { className: 'plain', - containerBackground: 'white', + containerBackground: '#eee', fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif', fontSize: '13px', stroke: 'black', diff --git a/frontend/yarn.lock b/frontend/yarn.lock index b98e0c7..9b8cf08 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -5493,6 +5493,14 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" +react-svg-pan-zoom@^3.12.1: + version "3.12.1" + resolved "https://registry.yarnpkg.com/react-svg-pan-zoom/-/react-svg-pan-zoom-3.12.1.tgz#971de6163fbad0d2a98d3ad7eb09bd1941564376" + integrity sha512-ug1LHCN5qed56C64xFypr/ClajuMFkig1OKvwJrIgGeSyHOjWM7XGgSgeP3IfHAkNw8QEc6a31ggZRpTijWYRw== + dependencies: + prop-types "^15.8.1" + transformation-matrix "^2.14.0" + react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" @@ -6057,6 +6065,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +transformation-matrix@^2.14.0: + version "2.16.1" + resolved "https://registry.yarnpkg.com/transformation-matrix/-/transformation-matrix-2.16.1.tgz#4a2de06331b94ae953193d1b9a5ba002ec5f658a" + integrity sha512-tdtC3wxVEuzU7X/ydL131Q3JU5cPMEn37oqVLITjRDSDsnSHVFzW2JiCLfZLIQEgWzZHdSy3J6bZzvKEN24jGA== + tslib@2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"