Resize with spring animation

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, ducimus officiis accusantium sunt error quod magnam, optio suscipit nostrum ea, quia eius praesentium voluptas soluta minus enim facilis culpa. Repellendus?

HTML

<div class="container" data-vel-plugin="ResizePlugin" data-vel-view="resizable">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, ducimus
  officiis accusantium sunt error quod magnam, optio suscipit nostrum ea, quia
  eius praesentium voluptas soluta minus enim facilis culpa. Repellendus?
</div>

CSS

.container {
  background: whitesmoke;
  overflow: hidden;
  padding: 10px;
  border-radius: 10px;
  color: #222;
  width: 200px;
  transform-origin: left top;
}

JavaScript

API Style:

Functions

Classes

import {
  createApp,
  DragEvent,
  DragEventPlugin
} from 'veloxi'

const ResizePlugin = (context) => {
  let resizable
  const dragPlugin = context.useEventPlugin(DragEventPlugin)

  context.setup(() => {
    resizable = context.getView('resizable')!
    resizable.size.animator.set('spring')
    dragPlugin.addView(resizable)
    let initialSize = {
      width: resizable.size.width,
      height: resizable.size.height
    }
    dragPlugin.on(DragEvent, (drag) => {
      if (drag.isDragging) {
        const newWidth = initialSize.width + drag.width
        const maxWidth = context.config.maxWidth
        resizable.size.set({
          width:
            maxWidth !== undefined && newWidth > maxWidth
              ? maxWidth
              : newWidth,
          height: initialSize.height + drag.height
        })
      } else {
        initialSize = {
          width: resizable.size.widthAfterScale,
          height: resizable.size.heightAfterScale
        }
      }
    })
  })
}

ResizePlugin.pluginName = 'ResizePlugin'
ResizePlugin.scope = 'resizable'

const app = createApp()
app.addPlugin(ResizePlugin, { maxWidth: 500 })

app.run()

import {
  createApp,
  Plugin,
  DragEvent,
  DragEventPlugin
} from 'veloxi'

class ResizePlugin extends Plugin {
  static pluginName = 'ResizePlugin'
  static scope = 'resizable'

  dragPlugin = this.useEventPlugin(DragEventPlugin)

  setup() {
    const resizable = this.getView('resizable')!

    resizable.size.animator.set('spring')

    dragPlugin.addView(resizable)

    let initialSize = {
      width: resizable.size.width,
      height: resizable.size.height
    }

    dragPlugin.on(DragEvent, (drag) => {
      if (drag.isDragging) {
        const newWidth = initialSize.width + drag.width
        const maxWidth = context.config.maxWidth

        resizable.size.set({
          width:
            maxWidth !== undefined && newWidth > maxWidth
              ? maxWidth
              : newWidth,
          height: initialSize.height + drag.height
        })

      } else {
        initialSize = {
          width: resizable.size.widthAfterScale,
          height: resizable.size.heightAfterScale
        }
      }
    })
  }
}

const app = createApp()
app.addPlugin(ResizePlugin, { maxWidth: 500 })

app.run()