Comments (9)
fixed it, built deploying
from projectvisbug.
Hey Adam! Did you ever get around to playing with this a bit more? Would love to try my hand at this (and maybe open a PR?) if you can point me in the right direction. 🤓
from projectvisbug.
I didnt no, though I think about it often!
Here's some leads to help you kick it off:
- selected elements are given the
[data-selected="true"]
attribute and could have the resize styles added to here - here's where selected elements are given that attribute
- here's where hover guards are, so elements bind the cursor dont highlight while resizing
- could add a mousedown or pointerdown event listener here to try and infer if the element is being resized?
- adding
overflow: hidden
is a bummer, it'll probably have side effects in some ways. the betters solution is likely to put events on the handle dots of the pink bounding box. then we could lock the axis they're dragging, complete the visual cues (like those circles look like handles already..), and ultimately give the design like experience instead of theresize: both
experience.
lemme know how serious you are in doing this! i could video chat with you, walk you through a few things, and help you along 🙂
from projectvisbug.
hm, thanks for logging the error! a recent build went out with a new plugin, and the build was uploaded by a github action (which was broken for a bit while an api shifted around). maybe something around that happened?
looking at the console:
const handlesEl = e.path.find(el => el.tagName === 'VISBUG-HANDLES')
// e.path is undefined, so find can't be called/found
i'll check more later, but that's what i can see now.
from projectvisbug.
https://youtu.be/Q2jzq_2Spds?t=28
from projectvisbug.
Spent 5 minutes trying out resize
and i think with a few ux tweaks it could be super viable. need to try it out more, make a branch and give it a shot.
- remove
transition: all
while dragging - remove hover listeners while dragging
https://www.w3schools.com/cssref/css3_pr_resize.asp
from projectvisbug.
Thanks for the response! The code actually looks much more than approachable than I was expecting 👀 and I agree custom events would be better than resize
.
I'm down for a chat some time in the next few days. What would be the best place to reach out?
from projectvisbug.
This may be user error but when trying to resize elements nothing seems to happen. I've tried with different tools (position, measure, etc.), I've tried both in the playground and with the extension, and I've also tried in different browsers. Oh and I also tried with an external mouse and the built in trackpad on my MacBook.
from projectvisbug.
@EllyLoel You're right, it's not working for me either 😕 must be a recent regression because I remember using it fairly recently.
from projectvisbug.
Related Issues (20)
- Undo Changes Made With VisBug HOT 5
- Add styleLint
- .
- Where is Firefox add-on HOT 19
- Possible to change visual order or z-index? HOT 1
- Popup breaks with some css resets HOT 2
- (maintenance) Cross platform dev environment HOT 1
- Publish releases that include the firefox and chromium add-on HOT 1
- HD color support
- simulate translated text size expansion? HOT 2
- Resize has stopped working HOT 1
- Load visbug from a CDN HOT 1
- Possible typo in metatip.element.js HOT 3
- Project via bug
- Play Quiz Online, Win Coins, Contest & Win : AtmeQuiz.com HOT 1
- Play Quiz Online, Win Coins, Contest & Win : AtmeQuiz.com
- Play Quiz Online, Multiple Quiz, Contest & Win Coin : AtmeQuiz.com
- hotkey for select parent element HOT 1
- VisBug should render in `:top-layer` HOT 4
- Better rotate and delete
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.
from projectvisbug.