KineticJS: make dropped elements be draggable as a Kinetic.Group - javascript

Well.. so it's the same problem that I face with Kinetic.Group. I tried several things to make this work, but always the same result: it does not work, and even worse, the basic drag and drop functionality disappears!
I already know how to do this inside one container, the difficulty comes when I try to adapt it to the drag and drop from DOM to container. After the drop, I need the images and shapes to be moved all together. That's why I created a group for each item and made it draggable.
This is the fiddle I'm changing to make the dropped elements in the canvas, be draggable as a whole group (the non-working fiddle) http://jsfiddle.net/gkefk/15/. What is wrong with this code?
PS1: this one is the main functionality of drag and drop http://jsfiddle.net/gkefk/14/ which I'm editing.
PS2: I'm a beginner, so if you find "stupidities" in that code, please report.

A simple guide how to get what you want out of this:
Get rid of jQuery and start over.
1. Create a new Stage
2. Create two layers, one taking up the left half of the Stage, the other the right half.
3. put all your objects on the left side, make them clone-able on mousedown and fire the drag event so you can place them in the other layer on mouse up.
4. if your item is a rectangle - I'm assuming this is a group which is will have children, create a new group, and a rectangle inside it, place it in the right layer on drop.
5. if your item is a house, check for mouse intersection with a rectangle, if mouse is over a rectangle, get the parent of the rectangle on drop (which will be a group), and then place the house in that group, else place in right layer freely.

Related

Draggable line with draggable points in ReactJS or plain JS?

I've been working on trying to create a draggable line with draggable points on my website. I'm working on a really simple proof of concept.
So far, I have been able to get two draggable points, and a line that gets drawn between the two points, but I am really stumped on how I can also make the line itself draggable and just have the lines move along with it. (Basically like the behavior in DrawIO for editing a plain line https://app.diagrams.net - draggable dots with a draggable line)
Here's some of the proof of concept code that I have so far: https://codesandbox.io/s/stupefied-fermat-qpigl
I'm thinking I might have to create my own listeners on the line and have it manually update the coordinates of the endpoints since I don't think I can get Drawable to work with both the line and the points without it exploding.
Anyone have options or tips on how I could get this working?
Update: I was able to get the whole line to move but only by kind of working around the issue. I made a midpoint between the two endpoints and made that midpoint draggable. Based on how much that midpoint was dragged, I also dragged the endpoints. The line will always be calculated to be drawn between the endpoints. It's still not ideal though, as I was hoping to make the whole line draggable itself. Still would appreciate ideas!
Updated sandbox: https://codesandbox.io/s/jovial-pascal-8s6x2

Three.js TextGeometry Wordwrap - drag as group

I am working on a panorama site and want to be able to add a text label that can be dragged to the right location. It is a spherical pano for what it is worth :) The next 4 paragraphs are good info in general, especially if you are stuck like I was, but the real question starts below the +++
I originally tried using the regular canvas trick, but the canvas was too large vertically. For instance if I wanted to say "Hello World" that might be 120px wide and 15px tall, but the "transparent" canvas would be 150px tall, which would overlap other text objects, but not the panorama.
The other issue was if I wanted it to be more than a single line, so for instance if I wanted to say "Did you see this cool stream?" that could be broken up into 2-3 lines. After playing with it I got wordwrapping to work on both the canvas and the sprites, but ultimately the canvas problem killed it for me.
After that I tried Sprites, which was better about not overlapping visually the other text objects, but the canvas size was still too large which created issues in the onMouseOver intersects where if it was too close together you were likely to start dragging the wrong one around, or if you just wanted to pan / tilt the camera around to look at the panorama you may inadvertently click on the oversized canvas.
I tried multiple times to get the TextGeometry working, but always got this error "THREE.TextGeometry: font parameter is not an instance of THREE.Font." till I finally found out the API changed in the latest version which made all the examples on the web useless. After I found out about the API change, I was able to get it working, here is a fiddle for anyone that needs it: https://jsfiddle.net/287rumst/1/
++++++++++
In my app, this previous example using TextGeometry works out just fine, but only when it is a single line. When I loop through and do the next line, it becomes an extra object that you drag around individually, which becomes a problem when I want to be able to click on it to edit the text, size, color and so on.
I am not sure what to do about the issue of dragging all lines as a group. I expected it to work when I added the group to the objects array, which is how I did it before with the lines, but it doesn't work, so I was thinking it would be great if it could be wrapped in a transparent box with the faces pressed against the side and then use the transparent box as the handle for dragging.
Here is the example of it working with wordwrap: https://jsfiddle.net/ajhalls/73dhu192/
Outstanding issues would be dragging the group, and causing it to face the camera from the center of the group, rather than the corner when being dragged. group.geometry.center() I would have thought would work, like it does when it is a single line, but again it has issues.

what is the algorithm for updating tile position in Gridster.js

Gridster.js allows to drag and drop tiles of variable size and rearrange tiles as we drag one tile.
Does anyone know the algorithm for rearranging the tiles?
I want to make this type of grid layout in action script and I am not much familiar with Javascript, I have already tried to read the code but don't understand most of the things, so if someone can give me the algorithm I will try to implement logic using action script.
i tired a little bit more and made a grid layout as per my requirement.
here is a demo link
i'll try to write an abstract algorithm for updating this type of tile layout,
As the time Drag is Started:
Calculate new drop location for the dragged item and move the drag item to the new location.
Check if their is any collision after moving.
if collision , fix the collision(i.e. move the collision tile down) go to step 2.
Update other tiles positions.(i.e check if any tile can be move upward if free space is available)

Rotate objects around a point

I'm currently working on a 3d "cloud" which consists of some div elements. These div elements should rotate around a point. This works like a charme on the x-axis but i can't get it working on the y-axis too. I've put the important things into a jsfiddle project:
http://jsfiddle.net/Lggdq/19/
If you click and move with your mouse, the items are rotating. How can i get it to work on the y-axis (the items are moving but not as i want them to do)? The items should rotate like on the x-axis.
Thanks in advance

using Raphael JS to scale a group of elements at once

I have a simple scene in Raphael JS which contains mainly basic elements, circles, rect, images, etc.
I want to scale up a circle on the mouseover event, which I can do, but I want to add an image over the top of the circle and have that scale as well when the mouse is over the circle OR the image.
Is there a way that I can scale two (or X) items instead of one at a time? Is there some kind of "container" element that I cant find?
Also, when then mouse is over the circle, the event fires, but then when the mouse goes over the image, the mouseout event of the circle fires, how can I stop this so that it looks like the circle and image are one element?
I think what you have to do here is create a transparent circle over the circle/image combination you already have. So, circle,image,circle. The second circle is where you put your event handling. By doing it this way, the top transparent circle will get focus even when it looks like you're hovering over the image.
Stick the lot of them in a set and scale the set in the mouseover. I'd do an example for you, but I'm inherently lazy. If you're really stuck, I'll give it a go.
Hope that makes sense.

Categories