@redbuck/resizable

Install

pnpm i @redbuck/resizable

Usage

<div id="box">
<!-- use data-effect to make element be drag-handler -->
    <div class="child resize-item" data-effect="start.x,start.y,end.x,end.y">
        <span class="move-rect move-rect-tl" data-effect="start.x,start.y"></span>
        <span class="move-rect move-rect-tr" data-effect="end.x,start.y"></span>
        <span class="move-rect move-rect-rb" data-effect="end.x,end.y"></span>
        <span class="move-rect move-rect-lb" data-effect="start.x,end.y"></span>

        <span class="move-line move-line-top" data-effect="start.y"></span>
        <span class="move-line move-line-bottom" data-effect="end.y"></span>
        <span class="move-line move-line-left" data-effect="start.x"></span>
        <span class="move-line move-line-right" data-effect="end.x"></span>
    </div>
</div>

<!-- linking default style and of course you can modify it-->
<link rel="stylesheet" href="../dist/index.css">

<script type="module">
    import Resizable from '../dist/es/index.js'
    
    const resizer = new Resizable('#box')
    
    resizer.on('effect', console.log)
</script>

API

options

Method	Description	default
container	The container element or selector	-
itemClassName	Which child element under el will effect	resize-item
effectManual	Should resizer instance effect dom manual	false
getItemOnStart	When drag start, carry the touched element call this function to get which item should be effect	find ancestors(include self) which one`s classList contain itemClassName
getEffectOnStart	When drag start, carry the touched element call this function to get effect in this drag	el => el.dataset.effect.split(',')
getPointsOnStart	When drag start, carry the touched element call this function to get initial points in this drag	el => el.dataset.effect.split(',')
listenerFactory	You can use this option to provide your own Listener	web-listener

events

Method	Description
effect	Emitted when drag move , carry the target and it`s shape