Image resizer #94

mlewand · 2019-07-22T09:35:42Z

Suggested merge commit message (convention)

Feature: Introduced image widget resizer. See ckeditor/ckeditor5#5167.

Additional information

PoC focused on image resizer.
This PoC includes three interchangeable resizing strategies.
Unit tests might fail for the time being as I did not add test coverage yet.

Reason why I'm adding a plugin is that in the end resizer feature needs editor instance.

…r is clicked.

…teSize method.

Note current implementation supports only top-left corner.

Although it's a very simplified approach, also it's triggered upon first resize activation.

… placed in editable in order to obtain image offset from widget wrapper. The same offset is applied to the resizer wrapper so that it is aligned with the image.

…quire access to model item of resized element (here an image). Most of the logic has been moved to the ResizeContext type. Now the idea is to create a ResizeManager that will include zero or more contexts during the runtime and will manage (only one) active context during the resize.

…ndered.

…erter. Upcast converter is still missing, will follow soon.

…d after an initial resize.

…low to customize resize host.

…s within the editable.

The goal is to always pick the largest resized size allowed by resize cursor position.

…les.

… context's method are now observable.

…ember.

mlewand added 30 commits June 24, 2019 17:46

Internal: Initial resizer API mocks.

9e6d7ce

Internal: Some basic logic to show up the resizers.

d16d34b

Added WidgetResizer plugin class.

2a51e26

Reason why I'm adding a plugin is that in the end resizer feature needs editor instance.

Internal: dirty version that just shows an overlay when resize handle…

df924cf

…r is clicked.

Internal: mocked very basic implementation for the ResizeContext.upda…

d37af34

…teSize method.

Internal: more precise resizing.

bdb110d

Note current implementation supports only top-left corner.

Internal: mocked aligning the resize shadow with resize host width.

d7d17ef

Although it's a very simplified approach, also it's triggered upon first resize activation.

Internal: workaround to use render event to catch dom element that is…

866de28

… placed in editable in order to obtain image offset from widget wrapper. The same offset is applied to the resizer wrapper so that it is aligned with the image.

Internal: redraw the resizer's overlay once commit change has been re…

8874fad

…ndered.

Internal: added img[height] entry to schema and a basic downcast conv…

6d9a991

…erter. Upcast converter is still missing, will follow soon.

Internal: introduced img[height] upcast converter.

da6528b

Internal: enhanced CSS colors for the resized elements.

da3836c

Internal: added a support for resizing height using bottom handlers.

c9aa59a

Internal: added extra render, otherwise handler would be mispositione…

a989d0f

…d after an initial resize.

Internal: now widget resizer accepts additional options. This will al…

b636ee6

…low to customize resize host.

Internal: adjusted resizer CSS so that it doesn't block pointer event…

d3b96bd

…s within the editable.

Internal: keep the resized object scale when using handlers.

9751add

Internal: simplified resizing logic.

97e1c8f

Internal: made the resizing shadow follow the mouse cursor.

f68aeb1

The goal is to always pick the largest resized size allowed by resize cursor position.

Internal: removed unused context properties.

75cf6e4

Internal: introduced resized dimension information, also adjusted sty…

620d14c

…les.

Internal: adjusted resizing styles.

9e63118

Internal: make the sizer UI appear next to the dragged handler.

12ef207

Internal: fixed sizer alignment for bottom left corner.

62f7d7f

Internal: [WIP] delegating resizer strategy into a dedicated type.

45a1b8e

Internal: refined resizing relative to the center point.

2184992

Internal: improved resizer visuals.

837288f

Internal: allow for providing a custom pixel ratio function.

c9f3486

Internal: added top-bound resizer.

769a0c4

mlewand and others added 5 commits August 13, 2019 09:14

Internal: WidgetResizer.apply will now return a created context. Also…

e0bb0da

… context's method are now observable.

Merge branch 'master' into t/ckeditor5-image/241

fdff936

Cleanup, use px unit for width.

05261ff

Refactoring.

c529432

Refactoring.

0f09252

Reinmar force-pushed the t/ckeditor5-image/241 branch from 54e0650 to 0f09252 Compare August 13, 2019 09:37

Reinmar and others added 22 commits August 13, 2019 11:48

Simplfied observers.

f360a43

Refactoring.

45df167

Intenral: Removed unused class.

11415d9

Internal: Extracted resizer state class.

fdb76ee

Internal: Removed unused variables.

293dfc7

Move things around.

310661b

Merge branch 'master' into t/ckeditor5-image/241

c6d778f

Moar refactoring.

b0d9081

Removed the shadow thing concept.

bc97672

Fixed classes naming.

d5e67fc

Naming.

0fe6ebd

Use RTL-proof character.

e4a62d8

Improved naming.

97919bb

Expose onCommit to the consumer.

28971ce

Round sizes.

5a589f3

Introduced Resizer#isEnabled.

5f4e014

Internal: Added generic support for percent-based resizing.

197b0da

Added support for percents.

51bbc5f

Docs: Improved API docs.

5688291

Docs: Added more docs to the options.onCommit.

9797970

Docs: Removed aspect ratio resizer option.

2e704e7

Internal: SizeUI property of the resizer has now become a protected m…

1a31082

…ember.

Reinmar merged commit c84cd73 into master Aug 19, 2019

Reinmar deleted the t/ckeditor5-image/241 branch August 19, 2019 08:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image resizer #94

Image resizer #94

mlewand commented Jul 22, 2019 •

edited by pomek

Loading

Image resizer #94

Image resizer #94

Conversation

mlewand commented Jul 22, 2019 • edited by pomek Loading

Suggested merge commit message (convention)

Additional information

mlewand commented Jul 22, 2019 •

edited by pomek

Loading