packages/@interactjs/actions/resize/plugin.ts
import type { Interactable } from '@interactjs/core/Interactable'
import type { EventPhase, InteractEvent } from '@interactjs/core/InteractEvent'
import type { Interaction } from '@interactjs/core/Interaction'
import type { PerActionDefaults } from '@interactjs/core/options'
import type { Scope, Plugin } from '@interactjs/core/scope'
import type {
ActionName,
ActionProps,
EdgeOptions,
FullRect,
ListenersArg,
OrBoolean,
Point,
Rect,
} from '@interactjs/core/types'
import * as dom from '@interactjs/utils/domUtils'
import extend from '@interactjs/utils/extend'
import is from '@interactjs/utils/is'
export type EdgeName = 'top' | 'left' | 'bottom' | 'right'
declare module '@interactjs/core/Interactable' {
interface Interactable {
resizable(): ResizableOptions
resizable(options: Partial<OrBoolean<ResizableOptions>> | boolean): this
/**
* ```js
* interact(element).resizable({
* onstart: function (event) {},
* onmove : function (event) {},
* onend : function (event) {},
*
* edges: {
* top : true, // Use pointer coords to check for resize.
* left : false, // Disable resizing from left edge.
* bottom: '.resize-s',// Resize if pointer target matches selector
* right : handleEl // Resize if pointer target is the given Element
* },
*
* // Width and height can be adjusted independently. When `true`, width and
* // height are adjusted at a 1:1 ratio.
* square: false,
*
* // Width and height can be adjusted independently. When `true`, width and
* // height maintain the aspect ratio they had when resizing started.
* preserveAspectRatio: false,
*
* // a value of 'none' will limit the resize rect to a minimum of 0x0
* // 'negate' will allow the rect to have negative width/height
* // 'reposition' will keep the width/height positive by swapping
* // the top and bottom edges and/or swapping the left and right edges
* invert: 'none' || 'negate' || 'reposition'
*
* // limit multiple resizes.
* // See the explanation in the {@link Interactable.draggable} example
* max: Infinity,
* maxPerElement: 1,
* })
*
* var isResizeable = interact(element).resizable()
* ```
*
* Gets or sets whether resize actions can be performed on the target
*
* @param options - true/false or An object with event
* listeners to be fired on resize events (object makes the Interactable
* resizable)
* @returns A boolean indicating if this can be the
* target of resize elements, or this Interactable
*/
resizable(options?: Partial<OrBoolean<ResizableOptions>> | boolean): this | ResizableOptions
}
}
declare module '@interactjs/core/Interaction' {
interface Interaction<T extends ActionName | null = ActionName> {
resizeAxes: 'x' | 'y' | 'xy'
styleCursor(newValue: boolean): this
styleCursor(): boolean
resizeStartAspectRatio: number
}
}
declare module '@interactjs/core/options' {
interface ActionDefaults {
resize: ResizableOptions
}
}
declare module '@interactjs/core/types' {
interface ActionMap {
resize?: typeof resize
}
}
export interface ResizableOptions extends PerActionDefaults {
square?: boolean
preserveAspectRatio?: boolean
edges?: EdgeOptions | null
axis?: 'x' | 'y' | 'xy' // deprecated
invert?: 'none' | 'negate' | 'reposition'
margin?: number
squareResize?: boolean
oninertiastart?: ListenersArg
onstart?: ListenersArg
onmove?: ListenersArg
onend?: ListenersArg
}
export interface ResizeEvent<P extends EventPhase = EventPhase> extends InteractEvent<'resize', P> {
deltaRect?: FullRect
edges?: ActionProps['edges']
}
function install(scope: Scope) {
const {
actions,
browser,
Interactable, // tslint:disable-line no-shadowed-variable
defaults,
} = scope
// Less Precision with touch input
resize.cursors = initCursors(browser)
resize.defaultMargin = browser.supportsTouch || browser.supportsPointerEvent ? 20 : 10
Interactable.prototype.resizable = function (this: Interactable, options: ResizableOptions | boolean) {
return resizable(this, options, scope)
} as Interactable['resizable']
actions.map.resize = resize
actions.methodDict.resize = 'resizable'
defaults.actions.resize = resize.defaults
}
function resizeChecker(arg) {
const { interaction, interactable, element, rect, buttons } = arg
if (!rect) {
return undefined
}
const page = extend({}, interaction.coords.cur.page)
const resizeOptions = interactable.options.resize
if (
!(resizeOptions && resizeOptions.enabled) ||
// check mouseButton setting if the pointer is down
(interaction.pointerIsDown &&
/mouse|pointer/.test(interaction.pointerType) &&
(buttons & resizeOptions.mouseButtons) === 0)
) {
return undefined
}
// if using resize.edges
if (is.object(resizeOptions.edges)) {
const resizeEdges = {
left: false,
right: false,
top: false,
bottom: false,
}
for (const edge in resizeEdges) {
resizeEdges[edge] = checkResizeEdge(
edge,
resizeOptions.edges[edge],
page,
interaction._latestPointer.eventTarget,
element,
rect,
resizeOptions.margin || resize.defaultMargin,
)
}
resizeEdges.left = resizeEdges.left && !resizeEdges.right
resizeEdges.top = resizeEdges.top && !resizeEdges.bottom
if (resizeEdges.left || resizeEdges.right || resizeEdges.top || resizeEdges.bottom) {
arg.action = {
name: 'resize',
edges: resizeEdges,
}
}
} else {
const right = resizeOptions.axis !== 'y' && page.x > rect.right - resize.defaultMargin
const bottom = resizeOptions.axis !== 'x' && page.y > rect.bottom - resize.defaultMargin
if (right || bottom) {
arg.action = {
name: 'resize',
axes: (right ? 'x' : '') + (bottom ? 'y' : ''),
}
}
}
return arg.action ? false : undefined
}
function resizable(interactable: Interactable, options: OrBoolean<ResizableOptions> | boolean, scope: Scope) {
if (is.object(options)) {
interactable.options.resize.enabled = options.enabled !== false
interactable.setPerAction('resize', options)
interactable.setOnEvents('resize', options)
if (is.string(options.axis) && /^x$|^y$|^xy$/.test(options.axis)) {
interactable.options.resize.axis = options.axis
} else if (options.axis === null) {
interactable.options.resize.axis = scope.defaults.actions.resize.axis
}
if (is.bool(options.preserveAspectRatio)) {
interactable.options.resize.preserveAspectRatio = options.preserveAspectRatio
} else if (is.bool(options.square)) {
interactable.options.resize.square = options.square
}
return interactable
}
if (is.bool(options)) {
interactable.options.resize.enabled = options
return interactable
}
return interactable.options.resize
}
function checkResizeEdge(
name: string,
value: any,
page: Point,
element: Node,
interactableElement: Element,
rect: Rect,
margin: number,
) {
// false, '', undefined, null
if (!value) {
return false
}
// true value, use pointer coords and element rect
if (value === true) {
// if dimensions are negative, "switch" edges
const width = is.number(rect.width) ? rect.width : rect.right - rect.left
const height = is.number(rect.height) ? rect.height : rect.bottom - rect.top
// don't use margin greater than half the relevent dimension
margin = Math.min(margin, Math.abs((name === 'left' || name === 'right' ? width : height) / 2))
if (width < 0) {
if (name === 'left') {
name = 'right'
} else if (name === 'right') {
name = 'left'
}
}
if (height < 0) {
if (name === 'top') {
name = 'bottom'
} else if (name === 'bottom') {
name = 'top'
}
}
if (name === 'left') {
const edge = width >= 0 ? rect.left : rect.right
return page.x < edge + margin
}
if (name === 'top') {
const edge = height >= 0 ? rect.top : rect.bottom
return page.y < edge + margin
}
if (name === 'right') {
return page.x > (width >= 0 ? rect.right : rect.left) - margin
}
if (name === 'bottom') {
return page.y > (height >= 0 ? rect.bottom : rect.top) - margin
}
}
// the remaining checks require an element
if (!is.element(element)) {
return false
}
return is.element(value)
? // the value is an element to use as a resize handle
value === element
: // otherwise check if element matches value as selector
dom.matchesUpTo(element, value, interactableElement)
}
/* eslint-disable multiline-ternary */
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
function initCursors(browser: typeof import('@interactjs/utils/browser').default) {
return browser.isIe9
? {
x: 'e-resize',
y: 's-resize',
xy: 'se-resize',
top: 'n-resize',
left: 'w-resize',
bottom: 's-resize',
right: 'e-resize',
topleft: 'se-resize',
bottomright: 'se-resize',
topright: 'ne-resize',
bottomleft: 'ne-resize',
}
: {
x: 'ew-resize',
y: 'ns-resize',
xy: 'nwse-resize',
top: 'ns-resize',
left: 'ew-resize',
bottom: 'ns-resize',
right: 'ew-resize',
topleft: 'nwse-resize',
bottomright: 'nwse-resize',
topright: 'nesw-resize',
bottomleft: 'nesw-resize',
}
}
/* eslint-enable multiline-ternary */
function start({ iEvent, interaction }: { iEvent: InteractEvent<any, any>; interaction: Interaction }) {
if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) {
return
}
const resizeEvent = iEvent as ResizeEvent
const rect = interaction.rect
interaction._rects = {
start: extend({}, rect),
corrected: extend({}, rect),
previous: extend({}, rect),
delta: {
left: 0,
right: 0,
width: 0,
top: 0,
bottom: 0,
height: 0,
},
}
resizeEvent.edges = interaction.prepared.edges
resizeEvent.rect = interaction._rects.corrected
resizeEvent.deltaRect = interaction._rects.delta
}
function move({ iEvent, interaction }: { iEvent: InteractEvent<any, any>; interaction: Interaction }) {
if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) return
const resizeEvent = iEvent as ResizeEvent
const resizeOptions = interaction.interactable.options.resize
const invert = resizeOptions.invert
const invertible = invert === 'reposition' || invert === 'negate'
const current = interaction.rect
const { start: startRect, corrected, delta: deltaRect, previous } = interaction._rects
extend(previous, corrected)
if (invertible) {
// if invertible, copy the current rect
extend(corrected, current)
if (invert === 'reposition') {
// swap edge values if necessary to keep width/height positive
if (corrected.top > corrected.bottom) {
const swap = corrected.top
corrected.top = corrected.bottom
corrected.bottom = swap
}
if (corrected.left > corrected.right) {
const swap = corrected.left
corrected.left = corrected.right
corrected.right = swap
}
}
} else {
// if not invertible, restrict to minimum of 0x0 rect
corrected.top = Math.min(current.top, startRect.bottom)
corrected.bottom = Math.max(current.bottom, startRect.top)
corrected.left = Math.min(current.left, startRect.right)
corrected.right = Math.max(current.right, startRect.left)
}
corrected.width = corrected.right - corrected.left
corrected.height = corrected.bottom - corrected.top
for (const edge in corrected) {
deltaRect[edge] = corrected[edge] - previous[edge]
}
resizeEvent.edges = interaction.prepared.edges
resizeEvent.rect = corrected
resizeEvent.deltaRect = deltaRect
}
function end({ iEvent, interaction }: { iEvent: InteractEvent<any, any>; interaction: Interaction }) {
if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) return
const resizeEvent = iEvent as ResizeEvent
resizeEvent.edges = interaction.prepared.edges
resizeEvent.rect = interaction._rects.corrected
resizeEvent.deltaRect = interaction._rects.delta
}
function updateEventAxes({
iEvent,
interaction,
}: {
iEvent: InteractEvent<any, any>
interaction: Interaction
}) {
if (interaction.prepared.name !== 'resize' || !interaction.resizeAxes) return
const options = interaction.interactable.options
const resizeEvent = iEvent as ResizeEvent
if (options.resize.square) {
if (interaction.resizeAxes === 'y') {
resizeEvent.delta.x = resizeEvent.delta.y
} else {
resizeEvent.delta.y = resizeEvent.delta.x
}
resizeEvent.axes = 'xy'
} else {
resizeEvent.axes = interaction.resizeAxes
if (interaction.resizeAxes === 'x') {
resizeEvent.delta.y = 0
} else if (interaction.resizeAxes === 'y') {
resizeEvent.delta.x = 0
}
}
}
const resize: Plugin = {
id: 'actions/resize',
before: ['actions/drag'],
install,
listeners: {
'interactions:new': ({ interaction }) => {
interaction.resizeAxes = 'xy'
},
'interactions:action-start': (arg) => {
start(arg)
updateEventAxes(arg)
},
'interactions:action-move': (arg) => {
move(arg)
updateEventAxes(arg)
},
'interactions:action-end': end,
'auto-start:check': resizeChecker,
},
defaults: {
square: false,
preserveAspectRatio: false,
axis: 'xy',
// use default margin
margin: NaN,
// object with props left, right, top, bottom which are
// true/false values to resize when the pointer is over that edge,
// CSS selectors to match the handles for each direction
// or the Elements for each handle
edges: null,
// a value of 'none' will limit the resize rect to a minimum of 0x0
// 'negate' will alow the rect to have negative width/height
// 'reposition' will keep the width/height positive by swapping
// the top and bottom edges and/or swapping the left and right edges
invert: 'none',
} as ResizableOptions,
cursors: null as ReturnType<typeof initCursors>,
getCursor({ edges, axis, name }: ActionProps) {
const cursors = resize.cursors
let result: string = null
if (axis) {
result = cursors[name + axis]
} else if (edges) {
let cursorKey = ''
for (const edge of ['top', 'bottom', 'left', 'right']) {
if (edges[edge]) {
cursorKey += edge
}
}
result = cursors[cursorKey]
}
return result
},
filterEventType: (type: string) => type.search('resize') === 0,
defaultMargin: null as number,
}
export default resize