[Story] Composite Maps (Multiple images)

# User Story

As a user, I can create maps composed of multiple images

## Details

- [x] Map area contains no image when it's first created
- [x] Images can be dragged onto the map from the desktop
- [x] Map images can be moved, scaled, and rotate
- [x] Map images z-ordering can be rearranged 

## Notes

- https://konvajs.org/docs/select_and_transform/Basic_demo.html
- https://konvajs.org/docs/vue/Transformer.html
- https://konvajs.org/docs/select_and_transform/Transformer_Styling.html
- https://konvajs.org/docs/sandbox/Canvas_Context_Menu.html
- https://stackoverflow.com/questions/63455286/is-it-possible-to-use-an-icon-as-a-rotater-in-react-konva-transformer
- https://konvajs.org/api/Konva.Transformer.html
- [Support selecting multiple (possible update for FoW too)](https://konvajs.org/api/Konva.Util.html#.haveIntersection__anchor) 

## Steps

### Tech Spikes
#### Base element
- [x] Create a new layer to play in
- [x] Assume in map editing mode
#### Adding Images
- [x] Drag an image onto layer to have it add
- [x] Click something to add an image 
- [x] See how easy it is to support multiple types
#### Editing 
- ~~Use konva shapes instead of images~~
##### Resize and rotate
- [x] Can scale the shape
- [x] Can rotate the shape
  - [x] How easy to make snap to points around 90deg markers?
- [x] How easy to style the sizing points?
- [x] Maintain aspect ratio? 
  - If possible, should corner assume aspect ratio or hotkey it?
##### Position
- [x] How easy to drag around? 
- [x] Reordering logic

### Progress Points
#### Map Area
- [x] Canvas exists without map image
  - [x] Can add an image to start filling the map
    - [x] Dragging and dropping map into the space
    - [x] Add image from file navigator
    - [x] Support as many file types as possible (ie: jpg, png, gif, etc)
      - [x] Communicate supported files
- [x] Grid behaves in a consistent and predictable manner
  - Does the grid want to fill the entire screen and not be dependent on the map canvas?
- [x] Can withstand a map image never being added
#### Image(s) exist 
- [x] Editing mode
  - Replace current modal with editing mode
    - [x] Clear screen of everything not related to editing mode
    - [x] Edit the map on canvas
      - [x] Resize the map image 
      - [x] Rotate the map image
    - [x] Add multiple images to form a map
      - Due to how the canvas renders, will need to be ordered. Likely meaning a list.
        - [x] Reorder the elements
      - [x] Move map images independently on the canvas
    - [x] Screen border similar to grid finder experience.
- [x] Save option ideal, close editing necessary 
- [x] Assume user is editing map upon map creation
- [x] Communicate with user what they are doing
  - [x] Drag and drop or add map image
#### Clean up
- [x] Does the tutorial map still load in correctly? 
  - Set up view for tutorial map?
- [x] Does it handle maps that existed before well? 

## Acceptance Criteria (To be checked off **only** during Review)

- [ ] Previous Functionality
  - [x] No visual difference when loading in existing maps. 
  - [x] Grid should cover entirety of screen. 
    - [x] This includes screen resizing. 
  - [x] When panning the grid should not appear to move.
    - The grid may not extend as far as the drag takes it, but should fill entire screen after release and not visually change where the intersections fall.
  - [x] The tokens and grid should visually align.
    - [x] All sizes of tokens.
    - [x] All shapes of tokens.
    - [x] After panning and zooming. 
  - [x] Grid Find should align the grid and tokens to the map
    - [x] Should maintain the token and grid alignment
    - [x] Panning and zooming
- [ ] Composite Map Functionality
  - [x] Creating a new map will open the map editor on save.
  - [x] Clicking `Edit Map` inside of the map editor should open the map editor
    - Map Library > Pencil Icon/Edit > Lower Left `Edit Map`
    - [x] When creating a new map, this option is not present
  - [x] Map Editor Modal is fully functional. 
    - [x] Name and notes will update and persist refresh
    - [x] Grid color should update on Save
    - [x] The size of the intersections should change on Save with the Fullness slider
      - Maximum fullness should create full squares
      - Minimum fullness should create tiny intersections
    - [x] Size should change square size of the grid
      - This should not break the token/grid alignment
    - [x] Trash still deletes the map.
  - [ ] Map Editing Mode
    - [x] Macrobar minimizes on entering mode.
    - [x] Sidebar (on the right) minimizes
    - [x] Can add images
      - [x] Instructions are intuitive
      - [x] Instructions easily found 
      - [x] Dragging and dropping adds and image
      - [x] Clicking the element will open the system file navigator
      - [x] Can add one or many images using either method. 
      - [x] If not a `gif`, `jpeg/jpg`, or `png` should communicate the file is not supported and the type of file
    - [x] Transforming images
      - [x] Click image to select.
        - [x] Should highlight standard transformable areas. 
        - [x] Should have a mild appearance change across entire image.
          - Unfortunately this could not be done with a filter or overlay in a timely manner, so opacity was used.
        - [x] Cursor should update when hovering over selected images to indicate they can be moved.
      - [x] Click an image again to deselect. 
      - [x] Clicking several images, several should be selected.
      - [x] Clicking an image in a group selection should remove it from group selection
      - [x] Only selected images can be dragged across canvas
      - [x] Clicking and dragging a corner of a selected image should scale the image(s).
      - [x] Clicking and dragging a node in the center of a side should stretch the image(s).
      - [x] Clicking and dragging the handle node should rotate the image(s).
    - [ ] Editing Menu
      - First button
        - [x] Selected image(s) move down the visual stack of images
        - [x] Icon communicates it's purpose
          - If there is a placeholder, this should not be marked complete.
      - Second Button
        - [x] Selected image(s) move up the visual stack of images
        - [x] Icon communicates it's purpose
          - If there is a placeholder, this should not be marked complete.
      - Third Button
        - [x] Selected image(s) are removed. 
        - [x] Icon communicates it's purpose
      - Fourth Button
        - [x] Exit map editing. 
        - [x] Icon communicates it's purpose
      - Information Icon
        - [x] Opens an explanatory modal.
        - [x] Easy to find and out of the way
        - [x] Icon communicates it's purpose
- Feel free to add anything that was missed by this list.

Story points: 8.0