Lark

I figured out that this only works with g that has an initial transform: translate${x}, ${y}). An svg breaks for some reason, and I wonder why.

Sandbox URL (it's with React): https://codesandbox.io/s/floral-feather-o4du95?file=/src/Box.tsx:642-648 I would like to control a draggable via SVG, like in the example. I create an svg (instead of a g, because I want to easily position children elements relative to it), then I instantiate the draggable in a single-time useEffect, to work on the group but be triggered by the rect. Add a new box by clicking anywhere on the blue part. A box is created and should be placed in the clicked part by calling gsap.set, but it doesn't. I added a console.log during dragging so that you can see that the draggable IS moving, but not the element. How do I solve this?

In actuality I do call kill, this was an example of how I tried using the context, but I see what I did wrong. Either way you did explain the problem by blaming React 18 and it does not exist in production . In my current codebase, I am calling kill on all four draggables in cleanup, with no context. Either way I get it now, thank you.

Sorry for the misunderstanding, the bug only happens in development. In production it does not: https://larkranger.github.io/beyond-annotations/ What you say explains why using the context makes no difference, but I am already killing all the instances in cleanup so I still just as lost as before.

I'm sad to say that even with the context this issue does not go away in development. useLayoutEffect(() => { const ctx = gsap.context(() => { const gId = `#${elementIds.getGroupId(annotation.id)}`; const getDisplay = () => document.getElementsByClassName(elementIds.transformWrapper)[0]!; const getDisplayBounds = () => getDisplay().getBoundingClientRect(); const getBox = () => document.getElementById(elementIds.getRectId(annotation.id))!; const getBoxBounds = () => getBox().getBoundingClientRect(); const getWrapper = () => document.getElementById(elementIds.imageWrapper)!; const getWrapperBounds = () => getWrapper().getBoundingClientRect(); const updateBox = () => gsap.set(`${gId}`, { x: annotation.box.x, y: annotation.box.y, }); const $right = document.createElement('div'); const $top = document.createElement('div'); const $bottom = document.createElement('div'); const $left = document.createElement('div'); const topDraggable = new Draggable($top, { trigger: `${gId} .top, ${gId} .topRight, ${gId} .topLeft`, onDrag(event) { const scale = annotation.scale; const { top, bottom, height } = getBoxBounds(); const { top: wTop } = getWrapperBounds(); const { top: dTop } = getDisplayBounds(); const mouse = Math.max(event.clientY, dTop, wTop); if (mouse >= bottom) { const diff = (mouse - bottom) / scale; const relativeBottom = annotation.box.y + annotation.box.height; annotation.box = { y: relativeBottom, height: diff }; topDraggable.endDrag(event); bottomDraggable.startDrag(event); } else { const diff = (top - mouse) / scale; const relativeTop = annotation.box.y; annotation.box = { height: height / scale + diff, y: relativeTop - diff, }; } }, onPress() { annotation.draggable.disable(); }, onRelease() { annotation.draggable.enable(); updateBox(); annotation.draggable.update(); }, }); const bottomDraggable = new Draggable($bottom, { trigger: `${gId} .bottom, ${gId} .bottomRight, ${gId} .bottomLeft`, onDrag(event) { const scale = annotation.scale; const { top, bottom, height } = getBoxBounds(); const { top: wTop, height: wHeight } = getWrapperBounds(); const { top: dTop, height: dHeight } = getDisplayBounds(); const mouse = Math.min(event.clientY, dTop + dHeight, wTop + wHeight); if (mouse <= top) { const diff = (top - mouse) / scale; const relativeTop = annotation.box.y; annotation.box = { y: relativeTop - diff, height: diff }; bottomDraggable.endDrag(event); topDraggable.startDrag(event); } else { const diff = (mouse - bottom) / scale; annotation.box = { height: height / scale + diff }; } }, onPress() { annotation.draggable.disable(); }, onRelease() { annotation.draggable.enable(); updateBox(); annotation.draggable.update(); }, }); const rightDraggable = new Draggable($right, { trigger: `${gId} .right, ${gId} .topRight, ${gId} .bottomRight`, onDrag(event: PointerEvent) { const scale = annotation.scale; const { left, right, width } = getBoxBounds(); const { left: wLeft, width: wWidth } = getWrapperBounds(); const { left: dLeft, width: dWidth } = getDisplayBounds(); const mouse = Math.min(event.clientX, dWidth + dLeft, wWidth + wLeft); if (mouse <= left) { const diff = (left - mouse) / scale; const relativeLeft = annotation.box.x; annotation.box = { x: relativeLeft - diff, width: diff }; rightDraggable.endDrag(event); leftDraggable.startDrag(event); } else { const diff = (mouse - right) / scale; annotation.box = { width: width / scale + diff }; } }, onPress() { annotation.draggable.disable(); }, onRelease() { annotation.draggable.enable(); updateBox(); annotation.draggable.update(); }, }); const leftDraggable = new Draggable($left, { trigger: `${gId} .left, ${gId} .bottomLeft, ${gId} .topLeft`, onDrag(event: PointerEvent) { const scale = annotation.scale; const { left, right, width } = getBoxBounds(); const { left: wLeft } = getWrapperBounds(); const { left: dLeft } = getDisplayBounds(); const mouse = Math.max(event.clientX, dLeft, wLeft); if (mouse >= right) { const diff = (mouse - right) / scale; const relativeRight = annotation.box.x + annotation.box.width; annotation.box = { x: relativeRight, width: diff }; leftDraggable.endDrag(event); rightDraggable.startDrag(event); } else { const diff = (mouse - left) / scale; const relativeLeft = annotation.box.x; annotation.box = { width: width / scale - diff, x: relativeLeft + diff, }; } }, onPress() { annotation.draggable.disable(); }, onRelease() { annotation.draggable.enable(); updateBox(); annotation.draggable.update(); }, }); reaction( () => annotation.creationEvent, creationEvent => { if (creationEvent) { annotation.select(); topDraggable.startDrag(creationEvent); leftDraggable.startDrag(creationEvent); annotation.setCreationEvent(); } }, ); }); return () => ctx.revert(); }, []); In production (after build) everything works fine (startDrag work as expected) but something must be breaking here in development. While this isn't a huge issue, I would still like to understand how to remedy this.

I'm back and I rana build preview and saw that the behaviour works as expected, so that means I'm probably not cleaning up. I'll go ahead and try the react context and let yall know!

Well, in the codepen, the lines are: const d = Draggable.create(box); --> presumably an array container.addEventListener("click", (e) => { d.startDrag(e); --> calling d instead of d[0] }); It's clear that something isn't adding up, if d was an array it should have been called as d[0], no? I am also not using Draggable.create, I'm using new Draggable. Could this have something to do with it?

I'm very confused, in this codepen d is also not an array. How does this align with your first comment?

Thank you for checking this out! I actually did not change this part of code from the version I'm trying to recreate, which means this definitely worked in the past. Was this changed to an array recently (i.e. in the past year)? Also, if what you're saying is true, how come calling startDrag doesn't throw a "not a function" error?

Hello friends. I'm making an annotation tool as a personal projcet. I made it once before and you guys were great help, but now I'm rewriting the code I have and one thing doesn't work: when I trigger startDrag on a draggable it doesn't catch. I expect that, when the mouse is still pressed, the same mouse event would start dragging . The logic is there and it worked before and I must have broken it so I now ask for you help. I couldn't possibly reproduce this in a sandbox but I'm happily sharing my repo (just clone, yarn and yarn dev). https://github.com/LarkRanger/beyond-annotations The lines in question are in the file src/components/annotation/pieces/resize/Resize.tsx lines 171-174. The code definitely reaches there, but startDrag just won't trigger (or perhaps, it does but then immediately breaks). You can reproduce the issue by uploading any image, then hitting "Annotate" and clicking and dragging. What should happen is that the box appears and drags in the same event, but it doesn't drag and you end up clicking it again. I would greatly appreciate it if anyone reads this, it's quite hefty but I'm truely stuck. ❤️

That is actually really cool. I tried repeatRefresh but couldn't get it to work with the randomizer functions being outer scope, but I guess that if you implement all the colors like this it works just fine, haven't tried that. Thanks!

Hello! I'm trying to make a rain effect that's is at least midly efficient. In the below example, when an element reaches its destination it is deleted, then a new element is created. I would like to, instead, have an element reshuffle its size and color, then move to a new initial position and just fall again. I tried rewriting the generateRainDrop function, to have it take an existing drop and just set its size , color, and position. This worked to the extent that the boxes did reshuffle, but then they stopped spinning - they just fell down. I tried using pause and play in between setting, and also tried using invalidate, to varying degrees of failure. At no point could I get a box to: randomly change size, color and initial position then continue falling and spinning, without recreating the box fully.

Well it still calls a function every single time, but it does look like it fits here. Thanks though Cassie, you've been very helpful the past few days!

In the codepen, the spinning box should swap colors every iteration. I used `onComplete` to call a function that moves the color index further, and the tween should take the current index color from the array at the top. This... well... doesn't work as I expect it to, but I couldn't quite find a way to do this. Checking the colorIndex in the console after every spin shows that it doesn, in fact, change. But the Tween doesn't pick up the new value on the next spin. I wonder why, and I also wonder what the correct way is to do this. EDIT: I solved it myself by making background into a function, figuring that unlike the value, the function would be called every time. However, this doesn't seem right, and I'd still like to know if there's a better way to do this!

Oh, fabulous! That DID do it! replacing `onRepeate` with `repeatRefrtesh` definitely solved it. The callback must have been interfering with something. Thanks so much!