refs https://github.com/TryGhost/Team/issues/1219
- added optional `adjustOnResize` argument to `{{movable}}` modifier
- when the movable element's size changes (based on a `ResizeObserver` event) the passed in action is called with the element and the current x/y position
- having this handled via the `{{movable}}` modifier is needed because that's what knows about any CSS translations that are present and allows the drag position to remain in sync with any resize-related adjustments
- return value of the action is expected to be a new `{x, y}` tuple
- used `adjustOnResize` in the `<KoenigSettingsPanel>` component so that any time the settings panel grows and causes part of it to be off-screen we re-position so that the whole panel is kept on-screen
refs https://github.com/TryGhost/Team/issues/1219
- added `dropdown.closeDropdowns()` to the `{{movable}}` modifier when dragging starts
- updated ember-power-select derived inputs to close their dropdowns when the dropdown service triggers it's `'close'` event
refs https://github.com/TryGhost/Team/issues/1208
- removing the click event listener in the same event loop as the `dragEnd` event is triggered meant Chrome still allowed the `click` event to trigger causing the card to become deselected and the movable panel closed when a drag ends outside of the central editor canvas
- adding a 1ms timeout means the event loop where the dragEnd is triggered fully completes before the next tick begins where the click handler is finally removed
closes https://github.com/TryGhost/Team/issues/1208
- clear and disable selection when drag starts
- ensure click-cancel event handler is removed when destroying (FF could trigger destroy without triggering drag end leaving you with nothing clickable)
no issue
- moved lifecycle hooks to top of file as they are framework-provided and control creation/destruction
- changed code order for `dragStart()`, `drag()`, `dragEnd()` so they follow the modifiers expected event cycle
no issue
- stops drag from being initiated from any element that matches `input` or `.ember-basic-dropdown-trigger` so that text can still be selected from inputs whilst dragging and we don't get left with orphaned dropdowns from dragging a dropdown-inducing element
no issue
- added a movement threshold for click+drag so we don't make the drag fully active until there's been a few pixels of movement whilst the mouse is held down, fixes issues where a slight bit of movement when clicking on elements would make drag active blocking the click from working
no issue
- moves disabling of scroll and pointer events into the `drag` handler so we don't inadvertently stop genuine clicks on elements inside the movable container
- adds a timeout for re-enabling pointer-events and clicks when drag finishes so we can still capture the unwanted events that would otherwise fire on mouseup
- uses a `click` event handler as that event is still fired even though we're preventing `mouseup`, fixes problems where the `pointer-events: none` on the movable container lets events through to the element behind it which could cause the movable container to be removed (eg, click event on the editor background moving a card out of edit mode)
no issue
- if the right button was pressed on the movable element it would start "drag" but also show the right-click menu meaning that once you clicked to close the menu the movable element was stuck to your pointer without the left button being held down
no issue
- adds `{{movable}}` render modifier that sets up basic mouse/touch event handlers that adjust the element's `translate` style when click/touched+dragged so it can be moved around the screen
