search

moleculemaker / digital-molecule-maker

Digital Molecule Maker web application for the Molecule Maker Lab Institute
MIT License
1 stars 0 forks source link

Create the SVG workspace and enable various user actions. #17

Closed yashdeep97 closed 1 year ago

yashdeep97 commented 2 years ago

The code changes implement the following features:

  1. Convert the workspace on the right to a nested SVG, for easier scaling and leveraging the benefits of using vector graphics.
  2. Add functionality to allow user to drag and drop blocks into the workspace. (code based on https://stackblitz.com/edit/cdk-drag-drop?file=app%2Fapp.component.html)
  3. Allow user to zoom in and out, as well as pan the SVG workspace.
matthewberry commented 1 year ago

Hi Yashdeep, this looks great! Nice work addressing so many foundational aspects of the app.

I left a few comments about little things but none need to be addressed in the MVP timeframe, as far as I'm concerned.

One thing we might want to discuss soon (and where Chad's input would be very valuable) is dragging a block to add to an existing molecule. It seems that in the current implementation, the user has to release the block while hovering over existing blocks in the molecule. I wonder whether it'd help to have a drop target extending into empty space on the right and/or left side of the current molecule. Thoughts on that? (If my question isn't clear, we can have a quick slack huddle soon to show what I mean.)