react-free-transform icon indicating copy to clipboard operation
react-free-transform copied to clipboard

Added more configurable options

Open beasteers opened this issue 7 years ago • 4 comments

Now you can enable/disable handles using props.

rotateEnabled={false} lets you turn off rotation. translateEnabled={false} lets you turn off dragging. scaleEnabled={false} lets you turn off scaling. This definitely has a problematic name similarity to disableScale. I'm not quite sure how best to resolve that. open={false} allows you to disable free transform all together. scaleHandles={['tl', 'tr', ...]} lets you specify exactly which handles you want to use. I added some shortcuts for convenience corners and sides as those are probably the most frequently used.

I also attempted to add props for scaleFromCenter and aspectRatio so they could be enabled all the time, but free-transform didn't seem to be listening to those settings. It seems that when you pass them into free-transform::scale, their values are being overwritten. The problem is being caused on line 77 of free-transform/lib/scale.js and I'm not really sure why that line is being used. But I can't find the repo to fork it or anything so they just won't do anything.

beasteers avatar Nov 05 '18 23:11 beasteers

Codecov Report

Merging #1 into master will not change coverage. The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff          @@
##           master     #1   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           3      3           
  Lines          45     62   +17     
=====================================
+ Hits           45     62   +17
Impacted Files Coverage Δ
src/ScalePoint.js 100% <ø> (ø) :arrow_up:
src/Transform.js 100% <100%> (ø) :arrow_up:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 573e7b9...2051c28. Read the comment docs.

codecov[bot] avatar Nov 06 '18 00:11 codecov[bot]

Hi Ben, a big thanks for your PR, i will make some modifications and merge

Regards

skmail avatar Nov 06 '18 19:11 skmail

Additions: I added these events to allow users more control over their transformations.

// these three fallback to onUpdate if they're not specified
onTranslate
onRotate
onScale

onTranslateStart
onRotateStart
onScaleStart

onTranslateEnd
onRotateEnd
onScaleEnd

I also updated it to work with this pull request on free-transform which fixed the behavior of scaleFromCenter and aspectRatio as mentioned above.

Aspect ratio can also be a float specifying a fixed aspect ratio to snap the transformation to. This isn't necessary most of the time, but I'm planning on having a toggle for that in an app I'm working on so I figured I'd include it.

I updated the example to reflect some of the added features.

beasteers avatar Nov 06 '18 19:11 beasteers

Yeah no problem! This is a really nice repo. It solves a problem I've been having and cleans up my code significantly.

beasteers avatar Nov 06 '18 19:11 beasteers