skmail / vue-free-transform Goto Github PK

View Code? Open in Web Editor NEW

180.0 10.0 29.0 3.61 MB

VueJS Free transform tool component

License: MIT License

JavaScript 1.35% HTML 4.12% Vue 94.52%

aspect-ratio rotation css

vue-free-transform's Introduction

VueJS Free Transform Tool

VueJS component for resizing, dragging and rotating html elements using css transform matrix

Installation

yarn install vue-free-transform or npm install vue-free-transform --save

Demo

https://codesandbox.io/s/1jl7z9p3q

Usage

import FreeTransform from 'vue-free-transform'

  
<FreeTransform 
    :x="0"
    :y="0"
    :scale-x="1"
    :scale-y="1"
    :width="100"
    :height="100"
    :angle="0"
    :offset-x="0"
    :offset-y="0"
    @update="update($event)"
>
    <div class="element" :style="{width: `100px`,height: `100px`}">
        <img src="..."/>
    </div>

</FreeTransform>

Optional Attributes

selected selectOn styles

Attribute	Description
styles	additional styles for parent wrapper usefull for z-index
selected	hide the controls when values is false
selectOn	trigger selection on `mousedown`, `click` or `dblclick`
aspect-ratio	enable aspect ratio resizing default (true)
scale-from-center	enable scale from center resizing default (true)

Events

onSelect dblclick click mousedown

css

    
    .tr-transform--active{
        position: absolute;
        z-index: 5;
    }
    
    .tr-transform__content{
        user-select: none;
    }
    .tr-transform__rotator {
        top: -45px;
        left: calc(50% - 7px);
    }

    .tr-transform__rotator,
    .tr-transform__scale-point {
        background: #fff;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        position: absolute;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .tr-transform__rotator:hover,
    .tr-transform__scale-point:hover {
        background: #F1F5F8;
    }

    .tr-transform__rotator:active,
    .tr-transform__scale-point:active {
        background: #DAE1E7;
    }

    .tr-transform__scale-point {

    }

    .tr-transform__scale-point--tl {
        top: -7px;
        left: -7px;
    }

    .tr-transform__scale-point--ml {
        top: calc(50% - 7px);
        left: -7px;
    }

    .tr-transform__scale-point--tr {
        left: calc(100% - 7px);
        top: -7px;
    }

    .tr-transform__scale-point--tm {
        left: calc(50% - 7px);
        top: -7px;
    }

    .tr-transform__scale-point--mr {
        left: calc(100% - 7px);
        top: calc(50% - 7px);
    }

    .tr-transform__scale-point--bl {
        left: -7px;
        top: calc(100% - 7px);
    }

    .tr-transform__scale-point--bm {
        left: calc(50% - 7px);
        top: calc(100% - 7px);
    }

    .tr-transform__scale-point--br {
        left: calc(100% - 7px);
        top: calc(100% - 7px);
    }

Keyboard shortcuts

shift for aspect ratio resizing

alt for scaling from center

shift + alt scaling from center based on aspect ratio

shift while rotation will snap rotation using 15 degrees

vue-free-transform's People

Contributors

Stargazers

Watchers

vue-free-transform's Issues

Add custom control feature "aspectRatio" and "scaleFromCenter"

Hello! Thank you for your plugin! Could you add custom control feature "aspectRatio" and "scaleFromCenter", so that i can manage it in props, like that:

or something similar...

Thank you!)

Request: Use with jQuery or a version in plain JS would be awesome !

Hey,

The component looks awesome !

It would be great if there were a version to use with jQuery or in plain js, that provides the same functionality but without vue or react. Any plans ?

Thanks.
Norman.

Why does scaling effect the "x", "y"

first of all, this plugin seems very nice, but I don't understand what happens when you scale the object with the scale handlers.

It seems that inside the payload object returned by the update event the x and y attribute changes as well even if you use the right bottom handler.

It seems to me this should only be the case if the top corner changes it's position (as I understand that that is what "x" and "y" is.

I forked your example and added some logging: https://codesandbox.io/s/l49ryyjjom

Am I misunderstanding what is going on?

Transform does not work in mobile phones

Hello,
Transform does not working on mobile phone. What can I do for move element with finger on mobile phones?
Thank you

restricting transformable area

Hi.

Vue-free-transform is great. Translatable area restriction capability make it better, I guess. In many cases, area restriction is useful. Without it, translation is so free that object can be released in a area where horizontal position is negative and selection is impossible.

I found that the restriction is possible by checking payload in update(). But it looks much better to have certain component's property for restriction.

When the "workspace" is zoomed via CSS, the object is not resized as it should

So I added zoom:50% to the css class definition for "workspace". As you can see the rescaling now is a little weird.
See this example: https://codesandbox.io/s/y27rpz7mnj

I that is because you use event.pageX and event.pageY for calculation without taking into account if there is a zoom level applied or not.

onSelect event name is camelcase, which does not work with binding

At least this is a problem in Vue 2.

See this topic on Stack Overflow

The eventname should probably be something like on-select.

My workaround: Just bind to a click, mousedown or other event and set selected property from there.