add support for resizing elements #569

mayank99 · 2022-10-02T23:44:53Z

Closes #17

Changed the svg circles in visbug-handles to the new visbug-handle element.
Pluralized existing variables for handle-css and HandleStyles and added new singular ones for the element
The new element takes an attribute called placement. e.g. <visbug-handle placement="top-end">.
This attribute handles both the conditional styling as well as the conditional logic for resizing.

Order of events is as follows:

pointerdown on visbug-handle triggers on_element_resize_start
- this saves the initial state of the resizing
- adds listeners for pointermove and pointerup on document
pointermove on document triggers on_element_resize_move
- this is where the resizing is calculated and triggered via requestAnimationFrame
pointerup on document triggers on_element_resize_end
- this is where we detach the pointermove listener
- also restore any original styles that we modified for the resize (e.g. cursor and transition)

google-cla · 2022-10-02T23:44:58Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

argyleink

overall i saw no issues with the new feature 🤘🏻
the local dev website rocks, and it performed super well on all sorts of live websites.
it was super fun! this should land awesomely!

there's a couple little suggestions in review comments, but nothing major.

i did notice some transform drift when resizing from the top? i think it's acceptable given the illusion working so well. the handles don't drift is what i mean, and i think that was a good choice and this is an ok side effect.

any closing thoughts for you before this merges and you contribute a rad feature?

argyleink · 2022-10-04T03:46:13Z

app/components/selection/handle.element.css

+	grid-area: 1 / -1;
+	place-self: var(--align-self, center) var(--justify-self, center);
+	transform: translate(var(--translate-x, 0), var(--translate-y, 0));


love this ❤️

argyleink · 2022-10-04T03:48:59Z

app/components/selection/handle.element.css

+	background-color: white;
+	border: 1px solid hotpink;
+	padding: 0;
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;


thx for stickin close to the original style while updating it to something interactive 👍🏻

aka, nice intuitive design decisions here

argyleink · 2022-10-04T03:50:27Z

app/components/selection/handle.element.css

+	position: relative;
+	cursor: var(--cursor);
+
+	/* increase tap target size */


i noticed this UX and went looking for what you did! rad inset style yo

argyleink · 2022-10-04T03:51:19Z

app/components/selection/handle.element.css

+	}
+}
+
+:host([placement^="top"]) {


they tweeted about you 😉 https://twitter.com/devongovett/status/1576635415024390144?s=20&t=H_wzo5sqqz0BKfhHEQ3O1w

argyleink · 2022-10-04T04:02:04Z

app/components/selection/handle.element.js

+
+  connectedCallback() {
+    this.$shadow.adoptedStyleSheets = this.styles
+		this.$shadow.innerHTML = this.render();


Suggested change

this.$shadow.innerHTML = this.render();

this.$shadow.innerHTML = this.render()

😅

Fixed in b1c9084. I also noticed that the project uses spaces everywhere, whereas my IDE default is tabs so fixed that too.

Might help to set up prettier

theres an editor config, but not everyone has that plugin installed

argyleink · 2022-10-04T04:03:57Z

app/components/selection/handle.element.js

+		this.$shadow.innerHTML = this.render();
+
+		this.button = this.$shadow.querySelector('button')
+		this.button.addEventListener('pointerdown', this.on_element_resize_start.bind(this))


i bet this'll work with touch because of this choice 👍🏻
should be fine to try!

i dont have a touch device (that supports browser extensions) to try this but yeah that's the idea behind using pointerdown vs mousedown

i think there are additional optimizations that can be made in touch events that are not available in pointer events. one example is the touches to prevent unexpected behavior when using gestures.

but the code is much simpler with pointerdown 🤷

argyleink · 2022-10-04T04:23:22Z

app/components/selection/handle.element.js

+					requestAnimationFrame(() => {
+						sourceEl.style.width = `${newWidth}px`
+						sourceEl.style.height = `${newHeight}px`
+						sourceEl.style.transform = `translate(${newTranslate.x}px, ${newTranslate.y}px)`


very clever to transform here! awesome UX attention to detail here, really sells the illusion. the same technique would probably support margin and padding visuals being grab-able 🤔

also cool you used the DOMMatrix to do the math 🤘🏻

not two things i would have reached for immediately, but find they totally rock for this scenario. cool math and programming plus a great user experience. 😍

Jake deserves the credit for DOMMatrix 😄 https://youtu.be/VdNzD4lhidw

i was wonderin!!! seemed like appropriate timing

app/components/selection/handle.element.js

argyleink · 2022-10-04T15:00:50Z

everyone will get the update within the hour!
thank you for this, it's raddddd!

mayank99 · 2022-10-04T15:04:40Z

thanks for the lovely comments and for accepting the contribution 💜

the process was mostly smooth, but i couldn't get dev:extension to work on windows (it uses cp) so i only tested in the local dev environment

i did notice some transform drift when resizing from the top? i think it's acceptable given the illusion working so well. the handles don't drift is what i mean, and i think that was a good choice and this is an ok side effect.

yeah... i noticed that this issue happens only on some elements but not others. i could not figure out why, it might have something to do with the layout?

argyleink · 2022-10-04T16:08:19Z

i couldn't get dev:extension to work on windows (it uses cp) so i only tested in the local dev environment

i was wondering if you'd tried loading the extension unpacked..! i'm sad that cp prevented that, sorry about that! there's certainly some infra updates that could be done in the codebase to smooth out cross platform and cross IDE dev. need to block out some maintenance time. also need to update to manifest v3. thanks for letting me know tho! want to log a bug about it?

p.s.
looks like auto publishing github action stopped working, just manually uploaded

mayank99 added 2 commits October 2, 2022 18:24

Add UI

13e3cf1

Implement resizing 🎉

89fd717

mayank99 added 2 commits October 2, 2022 19:54

Improve readability

7870196

Fix user-select

f6741ff

argyleink approved these changes Oct 4, 2022

View reviewed changes

mayank99 added 2 commits October 4, 2022 10:43

Fix formatting (semicolon and whitespace)

b1c9084

Move clamp to utilities folder

ec8d08a

argyleink merged commit 317ab7d into GoogleChromeLabs:main Oct 4, 2022

mayank99 deleted the mayank/resize branch October 4, 2022 15:04

mayank99 mentioned this pull request Oct 4, 2022

(maintenance) Cross platform dev environment #573

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add support for resizing elements #569

add support for resizing elements #569

mayank99 commented Oct 2, 2022

google-cla bot commented Oct 2, 2022

argyleink left a comment

argyleink Oct 4, 2022

argyleink Oct 4, 2022

argyleink Oct 4, 2022

argyleink Oct 4, 2022

argyleink Oct 4, 2022

mayank99 Oct 4, 2022

argyleink Oct 4, 2022

argyleink Oct 4, 2022

mayank99 Oct 4, 2022

argyleink Oct 4, 2022

mayank99 Oct 4, 2022

argyleink Oct 4, 2022

argyleink commented Oct 4, 2022

mayank99 commented Oct 4, 2022

argyleink commented Oct 4, 2022

	this.$shadow.innerHTML = this.render();
	this.$shadow.innerHTML = this.render()

add support for resizing elements #569

add support for resizing elements #569

Conversation

mayank99 commented Oct 2, 2022

google-cla bot commented Oct 2, 2022

argyleink left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

argyleink commented Oct 4, 2022

mayank99 commented Oct 4, 2022

argyleink commented Oct 4, 2022