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 { 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

    //   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

  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

            <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 clarasb and forman November 20, 2024 16:20

clarasb approved these changes Nov 21, 2024

View reviewed changes

clarasb merged commit bd8745e into main Jul 1, 2025
3 checks passed

forman deleted the ruchi_290_map_export branch September 26, 2025 08:58

		* 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

Copy the map image to clipboard #428

Uh oh!

Conversation

ruchimotwaniBC commented Sep 16, 2024

Uh oh!

forman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

clarasb left a comment

Choose a reason for hiding this comment

Uh oh!

AliceBalfanz left a comment

Choose a reason for hiding this comment

Uh oh!

ruchimotwaniBC commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

forman commented Nov 13, 2024

Uh oh!

clarasb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ruchimotwaniBC commented Oct 30, 2024 •

edited

Loading