Copy the map image to clipboard #428

ruchimotwaniBC · 2024-09-16T13:36:07Z

This PR implements the map export feature which closes #290 .
The camera icon button on map's action bar allows user to take the snapshot of current state of map and copy it to the clipboard.

forman

Please align your branch with main first. Then I'll do another review.

forman · 2024-09-17T16:00:43Z

CHANGES.md

+* Users can now copy snapshots of a map into the clipboard by clicking a new camera icon on a map's action bar.(#290)
+


This is the section for the changes of version 1.3, which has already been release. Please align your branch with main first. Then I'll do another review.

Also limit lines to 80 characters in markdown.

…be-viewer into ruchi_290_map_export

clarasb

tested from a user perspective:

feature works fine (tested with Firefox and Edge)
explanation in the docs might be necessary. Because the function does not work like Ctrl+C, the images must first be copied into a document in order to be saved. This can be a bit confusing at first.

AliceBalfanz

Tested from a user perspective. For me it works as expected. The tooltip "copy snapshot to clipboard" is explaining well the behaviour. @clarasb, for me it worked well with taking the snapshot and then pasting the image somewhere with Ctrl + V. I would not expect it to save e.g. a png automatically.

ruchimotwaniBC · 2024-10-30T08:59:06Z

explanation in the docs might be necessary. Because the function does not work like Ctrl+C, the images must first be copied into a document in order to be saved. This can be a bit confusing at first.

Yes it wont work like Ctrl + C but after clicking on the snapshot button you can use Ctrl+ V to paste it in any document( eg: paint, word)

forman · 2024-11-13T16:37:11Z

src/components/SnapshotButton.tsx

+  elementRef?: RefObject<HTMLDivElement | null>;
+  mapRef?: string;


Property elementRef was correct, property mapRef is not appropriate here.

forman · 2024-11-13T16:38:21Z

src/components/SnapshotButton.tsx


 import i18n from "@/i18n";
 import { WithLocale } from "@/util/lang";
 import { MessageType } from "@/states/messageLogState";
 import { exportElement } from "@/util/export";
 import ToolButton from "@/components/ToolButton";
+import { MAP_OBJECTS } from "@/states/controlState";


Wrong dependency. Create a higher level component MapSnapshotButton instead that uses SnapshotButton.

Make MapSnapshotButton a private component of MapInteractionsBar.

forman · 2024-11-13T16:39:20Z

src/components/SnapshotButton.tsx

+    const targetElement: HTMLElement | null = mapRef && MAP_OBJECTS[mapRef]
+      ? (MAP_OBJECTS[mapRef] as OlMap).getTargetElement()
+      : elementRef?.current || null;
+    const controlDiv: HTMLElement | null = targetElement
+      ? targetElement.querySelector(".ol-unselectable.ol-control.MuiBox-root.css-0")
+      : null;
+    const zoomDiv: HTMLElement | null = targetElement
+      ? targetElement.querySelector(".ol-zoom.ol-unselectable.ol-control")
+      : null;


Code not appropriate here.

forman · 2024-11-13T16:40:22Z

src/components/ol/layer/Tile.tsx

+    const source = layer.getSource() as OlTileSource & { crossOrigin?: string };
+    if (source && 'crossOrigin' in source) {
+      source.crossOrigin = "Anonymous";
+    }


Please add a comment that explains why this is needed. Add a link to the source too.

forman · 2024-11-13T16:41:30Z

src/selectors/controlSelectors.tsx

@@ -837,6 +837,7 @@ function getOlXYZSource(
    //   level at minZoom when zooming out!
    // minZoom: tileLevelMin,
    maxZoom: tileLevelMax,
+    crossOrigin: "Anonymous",


Comment why this is needed.

forman · 2024-11-13T16:42:56Z

src/util/export.ts

+  controlDiv?: HTMLElement | null;
+  zoomDiv?: HTMLElement | null;


Not appropriate here. Add an array parameter instead providing the elements that may be excluded from the export.

forman · 2024-11-13T16:43:30Z

src/util/export.ts

@@ -37,6 +37,9 @@ export interface ExportOptions {
  height?: number;
  handleSuccess?: () => void;
  handleError?: (error: unknown) => void;
+  pixelratio?: number;


Suggested change

pixelratio?: number;

pixelRatio?: number;

forman · 2024-11-13T16:44:18Z

src/components/MapInteractionsBar.tsx

@@ -124,6 +128,7 @@ export default function MapInteractionsBar({
            <FileUploadIcon />
          </Tooltip>
        </ToggleButton>
+        <SnapshotButton mapRef={"map"} postMessage={postMessage} fontSize="medium" isToggle={true} />


mapRef not appropriate here

forman · 2024-11-13T16:46:26Z

Please align your branch again with main.

clarasb

Tested from a user-perspective.
Works fine !

ruchimotwaniBC added 9 commits July 8, 2024 13:23

export map changes

b9e5a31

now the images is getting downloaded but size is not proper

2c4cc8d

changes

1d584dc

change

ef1216c

Merge branch 'main' into ruchi_290_map_export

feddba2

used snapshot button cmp and all origin set to anonymous

4e4f5a1

export map image

7aff3eb

removed unnecessary packages

4b68e3b

changes.md updates and removed any

102d75b

ruchimotwaniBC requested a review from forman September 16, 2024 13:37

translation updated

0e7f1ce

forman assigned forman and unassigned forman Sep 17, 2024

forman requested changes Sep 17, 2024

View reviewed changes

ruchimotwaniBC and others added 4 commits September 18, 2024 09:40

Merge branch 'main' into ruchi_290_map_export

0ae464a

changes file updated

15f8c23

removed space

e3353be

Update CHANGES.md

0986fa0

ruchimotwaniBC requested a review from forman September 18, 2024 08:48

ruchimotwaniBC marked this pull request as draft September 18, 2024 08:49

ruchimotwaniBC removed the request for review from forman September 18, 2024 08:49

ruchimotwaniBC marked this pull request as ready for review September 18, 2024 08:58

ruchimotwaniBC requested a review from forman September 18, 2024 08:58

ruchimotwaniBC added 3 commits September 20, 2024 15:24

removed unnecessary code

ff3fa86

Merge branch 'ruchi_290_map_export' of https://github.com/dcs4cop/xcu…

b65ae6e

…be-viewer into ruchi_290_map_export

changes

5f822e3

ruchimotwaniBC requested review from AliceBalfanz and clarasb October 24, 2024 10:15

ruchimotwaniBC and others added 2 commits October 24, 2024 12:28

Merge branch 'main' into ruchi_290_map_export

90dd30d

Update CHANGES.md

281e631

clarasb reviewed Oct 28, 2024

View reviewed changes

AliceBalfanz approved these changes Oct 29, 2024

View reviewed changes

forman requested changes Nov 13, 2024

View reviewed changes

ruchimotwaniBC added 2 commits November 20, 2024 11:44

Merge branch 'main' into ruchi_290_map_export

8cb56bd

comments resolved

f8d67ad

ruchimotwaniBC requested review from forman and clarasb November 20, 2024 16:20

clarasb approved these changes Nov 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Copy the map image to clipboard #428

Copy the map image to clipboard #428

ruchimotwaniBC commented Sep 16, 2024

forman left a comment

forman Sep 17, 2024

ruchimotwaniBC Sep 18, 2024

clarasb left a comment

AliceBalfanz left a comment

ruchimotwaniBC commented Oct 30, 2024 •

edited

Loading

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman Nov 13, 2024

forman commented Nov 13, 2024

clarasb left a comment

		* Users can now copy snapshots of a map into the clipboard by clicking a new camera icon on a map's action bar.(#290)

		elementRef?: RefObject<HTMLDivElement \| null>;
		mapRef?: string;

		controlDiv?: HTMLElement \| null;
		zoomDiv?: HTMLElement \| null;

Copy the map image to clipboard #428

Are you sure you want to change the base?

Copy the map image to clipboard #428

Conversation

ruchimotwaniBC commented Sep 16, 2024

forman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clarasb left a comment

Choose a reason for hiding this comment

AliceBalfanz left a comment

Choose a reason for hiding this comment

ruchimotwaniBC commented Oct 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

forman commented Nov 13, 2024

clarasb left a comment

Choose a reason for hiding this comment

ruchimotwaniBC commented Oct 30, 2024 •

edited

Loading