Skip to content
This repository has been archived by the owner on Apr 2, 2021. It is now read-only.

Image resizing #747

Merged
merged 63 commits into from Oct 28, 2015
Merged

Image resizing #747

merged 63 commits into from Oct 28, 2015

Conversation

mightyiam
Copy link
Contributor

Spec

  • Allows resizing images easily and intuitively
  • Maintains original image proportions

After Merging

  • File issue: in IE 8 through 11 SVGs are not scaled but cropped
  • File issue: Drag and drop of images disabled in IE9.

@mightyiam mightyiam changed the title Re-enable image resizing Enable image resizing Oct 6, 2015
@mightyiam mightyiam changed the title Enable image resizing Enable native image resizing Oct 6, 2015
@mightyiam
Copy link
Contributor Author

There was some work in #641. That is good work. That is the best way that I've found to handle selection of images in designMode consistently.

That is selecting images like text.

Selecting images like text contradicts with the native image selection interface, which provides the resize handles.

I don't think that this is good.

@winhamwr
Copy link
Member

winhamwr commented Oct 7, 2015

Is there no way to mix the two so that selection is like text, but image resizing is still possible?

@mightyiam
Copy link
Contributor Author

@winhamwr I'm working on a resizing handle, which looks like this at the moment:
screenshot_2015-10-07_19-36-32

  • It gets created only on image click. It then just remains there.
  • While user drags to resize the height, the width remains proportional. The interaction is smooth, along with the mouse drag.
  • The cursor on the drag handle changes to an appropriate north/west resize arrows thing.
  • The code should be rather simple and straightforward.

What do you think about the UI, the UX and these points?

@vintprox
Copy link

vintprox commented Oct 7, 2015

@mightyiam Nice, I personnely don't see nothing frustrating in "drag to resize". It's like as it meant to be in WYSIWYM: you mean it, so editor directs numerous user to "drag" this and then get expected result - "resize". By other side, when developer uses markers, they are kinda "invisible" for newbies (or the most annoying - markers may be too little to catch). Your solution is good enough for this time.
But in future, maybe if this kind of image manipulation will be outdated, we shall think about more sensitive interaction form with user: via borders/outline, striplines, etc.

@winhamwr
Copy link
Member

winhamwr commented Oct 7, 2015

I think a custom resize controller is probably a good idea from a first-best scenario. How long do you think it will take to get something like that done and up to the same level of usability as the native controls?

@mightyiam
Copy link
Contributor Author

I'll probably get most of the functionality working today.

Then, the parser part, which needs to extract the image from the container. I'm not sure how that is done at all, since we have support in the parser for ignoring editor-only elements, but here we have the element we'd like to ignore containing elements we'd like to keep, instead of it.

Perhaps I'll unwrap all the images in DOM, before any .html call.

@mightyiam
Copy link
Contributor Author

Wonderful and smooth in Chrome and Firefox, so far. A few issues remain. I've listed them in the description.

The first item, the image cropping instead of scaling in IE is the only thing I don't have a clue on.

@mightyiam
Copy link
Contributor Author

Perhaps cause a reload of the image onmouseup. Yeah, that should do it, I guess.

@mightyiam mightyiam changed the title Enable native image resizing Image resizing Oct 14, 2015
@@ -51,9 +51,6 @@ WYMeditor.WymClassTrident7.prototype._docEventQuirks = function () {
jQuery(wym._doc).bind("keyup", function (evt) {
wym._keyup(evt);
});
jQuery(wym._doc).bind("click", function (evt) {
wym._click(evt);
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is unrelated and was completely useless.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was as if we had a Trident 7 specific click handler. But we don't

@mightyiam mightyiam self-assigned this Oct 26, 2015
@mightyiam mightyiam modified the milestones: v1.0.8, v1.1.0 Oct 26, 2015
* SVG images are not scaled.
* They are cropped. That's right.
* And applying style to them does not help,
* as well. Ideas are welcome.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that sucks, wish I knew more about SVG to help. I know there are weird quirks between img & object and the other ways of embedding svg, but I don't know the specifics

@caffodian
Copy link
Contributor

I tried. :) some comments in resizehandler to consider, besides that it looks good.

mightyiam added a commit that referenced this pull request Oct 28, 2015
@mightyiam mightyiam merged commit 83200f2 into master Oct 28, 2015
@mightyiam mightyiam deleted the issue_747 branch October 28, 2015 14:15
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants