interact.js

Making interact.js resizable pixel perfect

由 有些话、适合烂在心里 提交于 2020-05-09 07:52:07
问题 In this jsFiddle I have an SVG rect that is resizable using interact.js . There's also a 10px by 10px grid and the .resizable function has included a 10px by 10 px snap. The objective is to resize the rect and have the edges snap exactly on the grid. In most cases it works fine, but many times it is not, as you can see in the picture below. Maybe an adjustment needs to be done manually on resizeend ? How to fix this problem? 回答1: As Erik said: With this target.setAttribute(attr/a, Math.round

Resizing with snap in interact.js

由 强颜欢笑 提交于 2020-04-11 18:41:12
问题 In this jsFiddle I have an interact.js rect that can be resized with a snap of 10px by 10px. The rect is positioned in x = 95px, and when I move the left side to the left, it moves to x = 90x. This is fine, however the right side also moves to the right and it shouldn't. What's wrong with this code? The rect has handles, is that creating the problem? .on('resizemove', function(event) { const target = event.target.querySelector('rect'); for (const attr of ['width', 'height']) { let v = Number

Integrating Interact.js with an Angular Project

由 吃可爱长大的小学妹 提交于 2020-01-13 09:11:29
问题 I need to use the functionality provided by Interact.js, such as draggable, resizable and such, in an Angular project, but i can't find a solid way of importing it in typescript. I've read about some work-arounds by defining it as a function, but i just want to know if that's the proper way to do it. 回答1: Interactjs team added type definition so you can use with typescript . Use NPM install instead of separate file like npm install interactjs Then the regular import should work import * as

disable wrong typescript error

由 这一生的挚爱 提交于 2019-12-31 01:48:12
问题 I have installed 'interact.js' with jspm (and npm for typescript to be happy). The app runs fine but my code shows errors: import { interact } from 'interact.js/interact' // ==> typescript error: TS2307: Cannot find module 'interact.js/interact' I suppose the problem has something to do with the npm module containing '.js' but I am not sure. Anyway, is there a way to fix this either by A. Help Typescript find the module B. Disable this specific error (since it works fine) PS: here is my

Interact JS, Drag svg elements inside viewboxed svg?

由 陌路散爱 提交于 2019-12-21 20:24:30
问题 My problem, when I drag elements, the element is far behind the cursor, so it looks like it's a ratio issue potentially? The code: interact('.element', { context: '.lipstick__plane' }) .draggable({ snap: { targets: [ interact.createSnapGrid({x: 10, y: 10}) ], range: Infinity }, inertia: true, restrict: { restriction: '#lipstick__plane__main', elementRect: {top: 0, left: 0, bottom: 1, right: 1}, endOnly: true } }) .on('dragmove', function (event) { $scope.$apply(function () { var target =

disable wrong typescript error

由 假如想象 提交于 2019-12-01 22:08:39
I have installed 'interact.js' with jspm (and npm for typescript to be happy). The app runs fine but my code shows errors: import { interact } from 'interact.js/interact' // ==> typescript error: TS2307: Cannot find module 'interact.js/interact' I suppose the problem has something to do with the npm module containing '.js' but I am not sure. Anyway, is there a way to fix this either by A. Help Typescript find the module B. Disable this specific error (since it works fine) PS: here is my tsconfig.json file: { "exclude": [ "node_modules" , "jspm_packages" , ".git" , "typings/browser" , "typings

Get ComponentRef from DOM element

由 那年仲夏 提交于 2019-11-30 20:11:42
It has already been answered how to get the DOM element from an Angular 2 component: ComponentRef.location.nativeElement (ComponentRef.location gives the ElementRef that gives a direct access to DOM). But how to do the opposite, i.e. get the reference to the ComponentRef when I only have the native DOM object? I am in the case when I try to drag/drop Angular 2 components using interact.js. The library uses callback functions to notify which element is dragged, and on which element we are trying to drop. An event object is provided, and the only useful information I found was the DOM element (

Get ComponentRef from DOM element

由 Deadly 提交于 2019-11-30 16:58:38
问题 It has already been answered how to get the DOM element from an Angular 2 component: ComponentRef.location.nativeElement (ComponentRef.location gives the ElementRef that gives a direct access to DOM). But how to do the opposite, i.e. get the reference to the ComponentRef when I only have the native DOM object? I am in the case when I try to drag/drop Angular 2 components using interact.js. The library uses callback functions to notify which element is dragged, and on which element we are
订阅 interact.js