Commit graph

31 commits

Author SHA1 Message Date
Ed Sanders f9a2c75b21 Show a label with the current dimensions while resizing
* Add config option to disable if required
* Centre label within resize handles
* Only show when resizing
* Sexy opacity transitions, rounded corners and multiplication
  character

Bug: 54297
Change-Id: Ic49430ce3302f780ae4b05d1fa29e14db1192c84
2013-10-16 16:42:12 +01:00
jenkins-bot 5d772e1dae Merge "Misc UI fixes" 2013-10-16 12:42:19 +00:00
Ed Sanders 79f4755850 Resizable node live preview
Resizes the $resizable element as you drag.
Can be disabled by setting the 'outline' config option.

FocusableNode
* Redraw on resize

ProtectedNode
* Destroy and prevent creation of phantoms on resize

MWInlineImageNode
* Correctly pass this.$image to ResizableNode

Bug: 54298
Change-Id: I7d6d345af8bb4712bbf154072b4704943a5a620d
2013-10-16 14:25:00 +02:00
Trevor Parscal bb03e8f17e Misc UI fixes
* Followup 75270e24: use this.surface directly in MWMetaDialog
* Document that MWDialogTools need a SurfaceToolbar
* Namespace CE events and CSS classes with ve-ce- rather than ve-ui-
* Namespace SurfaceToolbar CSS classes correctly and put them in their
  own CSS file

Change-Id: I9e70917d9c220b39e68833f67ed49fae7f7cbe6a
2013-10-16 12:40:40 +02:00
Ed Sanders d539fa1ea0 Use dimensions cached in resizeInfo for resize calculations
The logic requires the size of $resizable when the resizing started.
This is already stored in this.resizeInfo, but for some reason the
code recalculates every time, which is both inefficient and wrong
(but not a problem at the moment as $resizable doesn't change size
until resizeEnd).

Change-Id: I37a3c98e24b9e7d5e1970212975cef5ce9ef8a99
2013-10-14 12:21:59 +01:00
Ed Sanders 600110b9c5 Split out setResizableHandlesPosition in ResizableNode
Change-Id: I254fc1851abdc7477e2067d1a6b5406f286e8668
2013-10-14 12:19:17 +01:00
Ed Sanders e73c97154d Add more resize events
'resize' is actually 'resizeEnd'. Added 'resizeStart' and 'resizing'
which is triggered on mouse move.

Change-Id: I13c6e426cbcc965b3db50082c5294ca76979fe57
2013-10-14 12:18:57 +01:00
Ed Sanders 98230889ab Resizeable node updates context after mouse up
Was previously calling show(), which showed the context regardless
of whether one was required or not. Changed this to update().

Change-Id: I2c6c37b6b988cca60f3f3f2429476ab4b429184b
2013-10-10 13:34:54 +01:00
Ed Sanders 6445a77cec Snap resizables to a grid when the shift key is held
Defaults to 10px.

Change-Id: Idf760c446778b437edbc3cb209b04cbee1d96fb7
2013-10-10 01:10:28 +02:00
Ed Sanders 81d8699249 Various context menu display issues
* Check the popup fits within the node horizontally as well
  as vertically before embedding.
* Calculate the position of the node relative to the document.
  Previously we assumed the parent was the document and so used
  jQuery#position but this is not the case if a custom $focusable
  is passed to FocusableNode.
* Forcefully re-show the context menu on resizable node mouse up.
  This is apparently done automatically by a redraw event, but if
  the user just clicked on a resize node without dragging the context
  menu would be lost.

Change-Id: Id477a30827c9393a446e9c44466c83dabc7e0ab4
2013-09-25 21:54:59 +01:00
Ed Sanders 56ef8cb5b5 Create MWResizeableNode mixin to control defaultSize flag
Previously wasn't being updated to 'false' after a width/height
attribute change.

Bug: 50645
Change-Id: Id5dcd6998e0125757238426f8052505d131d712d
2013-07-16 23:13:40 +01:00
Rob Moen c472b2fe4a Make local overlays local to surface and remove insane z-indexes
ve.ui.Surface.js
* Make local overlay a child of ve-ui-surface and a sibling to
  ve-ce-surface elements.
** This keeps local overlays relative to their surface and eliminates the
   need for insane z-indexes.

ve.ui.PopupWidget.js
* PopupWidget boundaries are now relative to ve-ce-surface and no longer
  protrude out

ve.ce.Node.css, ve.ui.Window.css
* Removal or replacement of insane z-indexes.

ve.ce.FocusableNode.js, ve.ce.ProtectedNode.js, ve.ce.ResizableNode.js,
ve.ui.Context.js
* Translate offsets from local overlay

ve.init.mw.ViewPageTarget-monobook.css,
ve.init.mw.ViewPageTarget-vector.css
* Skin specific z-indexes for global overlay

ve.init.mw.ViewPageTarget.js
* Applied direction specific mw class to ce.Surface vs ui.Surface to
  prevent mw content styles from being applied to ui elements.

ve.ui.Dialog.css
* Adjustments to surface inside of dialog so that relative offsets for
  local overlays can be properly calculated.

ve.ui.Surface.css
* Explicitly force .ve-ui-surface to be relative so that it's children can
  be relatively positioned.

ve.ui.Widget.css
* Removal of unnecessary font-size properties now that local overlay is
  sibling of surface.

ve.js
* Added get relative position helper method to translate position offsets
  from target parent

Bug: 50241
Change-Id: Ibadce404a2286bc5dcec48f0d9da89004dbbd867
2013-07-02 19:35:43 +00:00
Christian Williams f2a51d7383 Resizing Images Sometimes Sets Unusable Size
Resize handle event handling was set up to bind on focus and
unbind on document mouse up. The problem is that focus can be
set programmatically and sometimes more than once. This would
cause the image to be properly resized once, but immediately
resized again to 0x0. Now, before binding events to the resize
handles, all resize handle events are unbound.

Change-Id: I22b7902d303b5ca43e132c121d743d6815980fc6
2013-07-02 12:12:39 -07:00
Christian Williams 5d44800b53 Correct Rendering for Block Images After Resize Undo
If a block image is resized and undone, there are lots of problems.

* The block image gets the wrong size. When rolling back the
transaction, height and width are passed as strings.
MWBlockImage tries to set the width to: width + 2. A 300px image
became 3002px.

* Resize handles didn't reposition and resize

* Relocatable drag marker didn't reposition and resize

* Focusable highlights didn't reposition and resize.

Change-Id: I8792b567b77da90ce5a2ad132e306705c5706606
2013-07-02 12:08:42 -07:00
Inez Korczyński a08da9ffe4 Make node resizing happen inside onAttributeChange
This change fixed not yet reported bug that undo/redo for resizable nodes wasn't working.

Change-Id: Id61389bc6dcfffdd6df1d22cdb5c85e58513fb8c
2013-06-30 12:59:42 -07:00
Inez Korczyński 59e7a7bdcf Simplify ve.ce.ResizableNode by removing code for 'transition' which is not used anyway
Change-Id: I561395cab3271a93f43d14d17db0c2dcee74ae4a
2013-06-29 21:47:58 -07:00
Christian Williams 68f635b482 Local Overlay Stacks
After a spirited discussion, localOverlay is getting some children.

* localOverlayBlockers - UI elements that are meant to prevent
interaction with the element. This includes Phantoms and
Highlights.

*localOverlayControls - UI elements that are meant to be
interacted with in order to modify the element. This includes
resize handles and drag marker.

*localOverlayMenus - UI elements that should always position
above all other controls. This includes the context menu.

Bug: 50159
Change-Id: Ic69c2ad275389a31c9fbaf47f3665dcdbb7ac2af
2013-06-28 00:30:54 +00:00
Ed Sanders 2352613b66 Code style fix: (X) -> ( X )
Change-Id: I7f3ac95621f70d9a89e70e9a51905673240cb51f
2013-06-24 18:51:59 +01:00
Christian Williams e71655304e RelocatableNode for Inline and Block Images
HTML5's drag and drop has a ton of benefits and a couple of
limitations. To achieve a native drag marker, an image tag helper
is used to indicate the size of the relocatable node. Chrome
shades the marker gray natively, Firefox is styled to match.

Change-Id: I755b698a3d968cc7e6ff125109d68ac83fd8a8a2
2013-06-21 14:53:10 -07:00
Trevor Parscal fc8c46dd74 Reference name and group editing
Objective:

* Allow editing reference groups and names in the reference dialog

Bonus:

* Modify attribute transaction builder to support multiple attribute
  changes in a single transaction

Changes:

ve.ui.MWReferenceDialog.js
* Load ref name and group from model
* Save ref name and group, if changed, to model

ve.ui.ListAction.js, ve.ui.Transaction.test.js, ve.ce.ResizableNode.js
* Update use of newFromAttributeChange to newFromAttributeChanges

ve.dm.SurfaceFragment.test.js
* Add test for new changeAttributes method

ve.dm.InternalList.js
* Missing new line at end of file

ve.dm.Transaction.js
* Change newFromAttributeChange to accept an list of attribute changes and
  produce a single transaction that applies one or more attribute changes
  at once

ve.dm.SurfaceFragment.js
* Fix bug in getCoveredNodes where the wrong mode name was being used
* Add changeAttributes method, which applies attributes to all covered
  nodes and allows filtering of which types of nodes the attributes are
  applied to

ve.dm.MWReferenceNode.js
* Actually write key and group back to DOM
* Separate onRoot functionality into addToInternalList so it can be called
  separately (similarly onUnroot/removeFromInternalList)

ve.ce.MWReferenceListNode.js
* Clone internal item CE node before appending to avoid rendering bug.

*.php
* Add links to messages and sort them

Change-Id: Ic4121e4fcfc09265d5863af6f078cdeb77926c8e
2013-06-14 15:29:56 -07:00
Christian Williams babaa4118d FocusedNode Selection
Introduction of fake selection for single focused nodes. This
change specifically makes the selection much nicer in appearance
for Chrome users selecting floated FocusableNodes (block images)
for example.

Added ve-ce-surface-highlights DOM element to contain styled
highlight elements.

Made adjustments to getSelectionRect to return fake selection
bounds if necessary.

Replaced old uses of showSelection with model.change().

Change-Id: I96e66567cdce6455ef3eb77568e72f23140448ff
2013-06-07 17:49:35 -07:00
Trevor Parscal 5aac2f756c Block Image Resizing
Allow block images to be resized by mixing in ResizableNode.

Made transitioning optional, and disabled it for block image nodes.

Change-Id: If89948d285ffb5efb104c44cbc9553a3d56f52e7
2013-06-07 10:52:04 -07:00
Timo Tijhof b463c5d377 jshint: Fix trailing comma
Due to the "es5: true" jshint option we enabled, these
warnings were surpressed. I've disabled the option since
we no longer require it. It was enabled in 07c86fc to fix
a bug with jshint. This bug has now been fixed.

Change-Id: I55b7d031eb5581af5f733f050cf2ea98dacb2af6
2013-06-05 13:00:49 +02:00
Trevor Parscal 8eb0efab9b Fix resizable nodes
Making sure resize handle events are bound and unbound on focus, and that elements are created in the right window.

Change-Id: Ie90bb82aa6c81c372d76278dab3665bd49bf573c
2013-05-28 17:36:31 +01:00
Ed Sanders e14defc76f Attach resize handles to $localOverlay
Because that's where they should be.

Change-Id: I2dc0c1511f459fea6bf7db86eff9a55c07dd911b
2013-05-24 22:43:15 +02:00
Ed Sanders 80a37e9df3 Remove resize handles on surface teardown
Add teardown call to surface destruction in mw target, and
teardown listener to resizeable node.

Bug: 48530
Change-Id: I807a0f32d3d1eb490456d887f7bf867bdb896df4
2013-05-24 22:19:18 +02:00
Trevor Parscal 2e76271b4e The Great ve.ui.Surface refactor of 2013
Prologue:

Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't
see you there! In a world where iframes are outlaws, and symbols like
document and window are global, there were more than a few assumptions
about which document or window was being used. But fear not - for this
commit (probably) tracks them all down, leaving a trail of
iframe-compatible awesomeness in its wake. With the great ve.ui.Surface
now able to be used inside of iframes, let the reference editing
commence. But there, lurking in the darkness is a DM issue so fierce it
may take Roan and/or Ed up to 3 whole hours to sort it out.

Note to Roan and/or Ed:

Editing references seems to work fine, but when saving the page there
are "no changes" which is a reasonable indication to the contrary.

Objectives:

* Make it possible to have multiple surfaces be instantiated, get along
  nicely, and be embedded inside of iframes if needed.
* Make reference content editable within a dialog

Approach:

* Move what's left of ve.Editor to ve.ui.Surface and essentially
  obliterate all use of it
* Make even more stuff inherit from ve.Element (long live this.$$)
* Use the correct document or window anywhere it was being assumed to be
  the top level one
* Resolve stacking order issues by removing the excessive use of z-index
  and introducing global and local overlay elements for each editor
* Add a surface to the reference dialog, load up the reference contents
  and save them back on apply
* Actually destroy what we create in ce and ui surfaces
* Add recursive frame offset calculation method to ve.Element
* Moved ve.ce.Surface's getSelectionRect method to the prototype

Bonus:

* Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it
  was separate in the first place, but I'm likely the one to blame)
* Fix blatant lies in documentation
* Whitespace cleanup here and there
* Get rid of ve.ui.Window overlays - not used or needed

Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-24 14:01:02 +02:00
Trevor Parscal 7233ea8f1b EventEmitter API cleanup
The EventEmitter API we inherited from Node.js and then bastardized was
getting awkward and cumbersome. The number of uses of ve.bind was getting
out of control, and removing events meant caching the bound method in a
property. Many of the "features" of EventEmitter wasn't even being used,
some causing overhead, others just causing bloat. This change cleans up
how EventEmitter is used throughout the codebase.

The new event emitter API includes:
* emit - identical to the previous API, no longer throws an error if you
  emit error without a handler
* once - identical to the previous API, still introduces a wrapper* on -
  compatible with the previous API but has some new features
* off - identical to removeListener in the previous API
* connect - very similar to addListenerMethods but doesn't wrap callbacks
  in closures anymore
* disconnect - new, basically the opposite of addListenerMethods

Another change that is made in this commit is mixing in rather than
inheriting from EventEmitter.

Finally, there are changes throughout the codebase anywhere
connect/disconnect could be used.

Change-Id: Ic3085d39172a8a719ce7f036690f673e59848d3a
2013-05-02 15:05:59 -07:00
Trevor Parscal f8621f9ef8 Improve resizable node rendering
* Only place them in a high z-index while resizing so they don't render
  above dialogs and menus
* Add resize transition

ve.ce.ImageNode.js
* Switch from element attributes to CSS for setting dimensions

ve.ce.Node.css
* Add resizing class for resizable nodes for z-index
* Add transitioning class for resizable nodes for transitions
* Switch from border to inset box-shadow to not affect handle position
  calculation

ve.ce.ResizableNode.js
* Add/remove resizing class while resizing
* Switch from using $image to $resiable to make the class useful for
  non-image node
* Enable transition and set new dimensions before transaction processing
  which will cause re-rendering)
* Delay transaction processing for resize until after transition is
  complete
* Add hiding of context menu on resize start

ve.ce.Surface.js
* Add getSurface method so we can get to the context menu

Change-Id: I4667e394d0af4a80b651c2a0f6d11d30e196bf60
2013-04-25 11:45:11 -07:00
Inez Korczyński 939985ccd8 Create and process transaction only if the value of given attribute (width or height) really changed
Change-Id: I4177478171e1d417634adb06f3bf74af0c77c15e
2013-04-24 15:49:33 -07:00
Trevor Parscal b3cd473f33 Allow resizing nodes
Actually really resizing the image

Show bounding box on mouseover with 4 handles. Bounding box is resizable. Image resizes to match bounding box on mouse up.

Change-Id: I1f3dac64eb86dd1f258937e4915af101b3ac19d8
2013-04-19 12:44:33 -07:00