Light

kimuraz / vue-interact Goto Github PK

View Code? Open in Web Editor NEW

48.0 3.0 7.0 1.38 MB

A VueJS port for InteractJS

Home Page: https://vue-interact.netlify.com/

JavaScript 3.56% TypeScript 96.44%

interactjs interact vue vuejs vue-interact javascript hacktoberfest hacktoberfest2022

vue-interact's Introduction

vue-interact

A VueJS implementation of InteractJS

📖 Checkout the documentation

Build Setup

npm install vue-interact --save
# or
yarn add vue-interact

Back-To-Work Plan

Any contribuition is welcome ⬆️

©️ License

MIT

vue-interact's People

Contributors

Stargazers

Watchers

Forkers

pieterjandesmedt darrelfrancis dev7ch yoroshikudozo lzq920 alanrostin 0xstride

vue-interact's Issues

Prevent overlapping

Prevent an InteractPanel to overlapping another.

Does this work with Vue 2?

If it does, can the documentation be updated to show how to use this package?

[v1] Re-create all examples on InteractJS website

[v1] Add interact instance as vue prototype

[v1] Add each manipulation method as directive

Minimal example

Is there some minimal example on how to use the provided components?

Avoid fail silently in behavior oriented components

The lines below allow for fail silently on components that require user action, this is problematic as it has no indication on why it failed for the user, neither for the developer (when passing a NaN for example). Perhaps a better approach would be to launch an indicative exception but to keep the state consistent.

vue-interact/src/directives/resizable.js

Line 25 in 587f8dd

x = parseFloat(x) || 0;

vue-interact/src/directives/resizable.js

Line 26 in 587f8dd

y = parseFloat(y) || 0;

vue-interact/src/mixins/ResizingMixin.js

Line 47 in 587f8dd

let x = parseFloat(target.getAttribute('data-x')) || 0;

vue-interact/src/mixins/ResizingMixin.js

Line 48 in 587f8dd

let y = parseFloat(target.getAttribute('data-y')) || 0;

vue-interact/src/mixins/DraggingMixin.js

Line 58 in 587f8dd

const x = (parseFloat(target.getAttribute('data-x')) || 0) + evt.dx;

vue-interact/src/mixins/DraggingMixin.js

Line 59 in 587f8dd

const y = (parseFloat(target.getAttribute('data-y')) || 0) + evt.dy;

Gesturable mixin

https://interactjs.io/docs/gesturable

Resize from any corner

For some reason, when you push any of the left corners it stills grows from the right corner.

[v1] Replace CircleCI by Github Actions

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.