SVG-Edit / svgedit

Powerful SVG-Editor for your browser
MIT License
6.6k stars 1.54k forks source link

Enhancement: Eyedropper #948

Closed olekhshch closed 8 months ago

olekhshch commented 8 months ago

PR description

More intuitive Eyedropper tool:

-- Tool can have one of 2 states - empty (no style is picked, click on an element picks its style) and where style was picked (click on an element applies a picked style on it). By default once the tool is chosen it has an empty state, if some elements are selected by that time it picks the first selected element's style (same as before);

-- The helper near the cursor was added to help differentiate between 2 states - it doesn't appear if the state is empty and, once some style was picked, it appears as a small div styled according to a picked style

-- Esc resets picked style (if the state is non-empty) or sets Select mode (if the state is empty).

https://github.com/SVG-Edit/svgedit/assets/96601180/5c965154-22b2-481e-947b-704a0a661e78

-- Shortcut changed to Ctrl + I since I is reserved for Italic text

-- Fixed a bug where an element with a dashed stroke doesn't inherit style with the solid stroke. To reproduce:

  1. Set dash-array style as solid
  2. Create an element (e.g. Ellipse) with a solid stroke
  3. Create a second element (e.g. Rectangle) and apply any dashed stroke style to it
  4. Select an element with a solid stroke only (so its style will be picked by the old eyedropper)
  5. Click the Eyedropper tool and try to apply the picked style (with a solid stroke) to the second element (with a dashed stroke) - the second element will inherit the picked style but the stroke will remain dashed
jfhenon commented 8 months ago

👍