Currently, let's say your model is a wall: a Group with 5 Rects, 1 for the wall and 4 for windows. Currently if you want to use backface for this wall, you have to set it for all 5 Rects.

let wallGroup = new Group(...);
// wall
new Rect({
  addTo: wallGroup,
  backface: false,
  // ...
});

let wallWindow = new Rect({
  addTo: wallGroup,
  backface: false,
  // ...
});
wallWindow.copy(...);
wallWindow.copy(...);
wallWindow.copy(...);

Instead, Group should have backface that sets visibility for all of its descendant graph.

let wallGroup = new Group({
  backface: false,
  // ...
});
// wall
new Rect({
  addTo: wallGroup,
  // ...
});

let wallWindow = new Rect({
  addTo: wallGroup,
  // ...
});
wallWindow.copy(...);
wallWindow.copy(...);
wallWindow.copy(...);

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

Gitter (https://gitter.im/) would be probably the simplest & straightforward at this point, and it would point to the repository. But it can be created only by the repo owner(s)

When setting resize: true on a canvas based illustration, it doesn't behave as I'd expect. For demos 1 and 2 below, I'd expect them to both have the same behavior. The SVG demo resizes proportionally, but the canvas demo stays locked at 480px×240px.

Test Cases

1. Canvas Resize: https://codepen.io/desandro/pen/pmdqZv
2. SVG Resize: https://codepen.io/desandro/pen/wbPREZ
3. Fullscreen Canvas Resize: https://codepen.io/desandro/pen/dEJxaV

I realize that SVGs behave differently than canvases, since they retain their intrinsic proportions through their viewbox if explicit width/height is not defined, but that is not the case for canvas.

I'm not sure what the solution is here. I went down a few roads, but then realized that there might be a few different behaviors that people are trying to achieve. Perhaps it's one, or a combination of the following (don't mind the horrible names):

resize: false

Zdog does not attempt to resize the illustration. Currently Working

resize: 'fullscreen'

Zdog will resize the illustration to match the viewport width and height. Currently Working, demo 3 above

resize: 'fill-parent'

Zdog will resize the illustration to match the width and height of the element's parent.

resize: 'fill-parent-proportionally'

Zdog will resize the illustration to match the smallest dimension of the element's parent, while proportionally scaling the opposite axis. This means the initial aspect ratio will be retained, but will try to fill its container. Think background-size: contain; from CSS.

resize: 'respect-natural-dom-size-and-css'

Zdog will resize the illustration based on the element's natural manifestation in the DOM, including any CSS applied. This would require Zdog to strip any explicit widths and heights from the element, take a natural measurement of the element in the DOM, then reapply those settings explicitly after the fact the keep the rendering working properly.

There may be more options, and maybe I'm looking into this a little too closely, but I think resize solutions like this would cover most use cases. At a minimum, I'd expect resize: true to have some effect on the canvas, but that's not currently the case.

Any suggestions or guidance here?

P.S. - I'm loving Zdog, Dave, well done!

A possible enhancement of the cone shape: make it possible to define truncated cones (with a flat circular cap on each end).

The cylinder shape would then, in principle, be a special case of the cone shape, though I'm not sure you would want to go that far. Other kinds of frusta also a possibility.

Please can you add the ability to create alpha masks, like:

new Zdog.Mask({
new Zdog.Shape({
addTo: illo,
stroke: 20,
...
}),
linkedTo: [shape1, shape2...]
});

Essentially, this would hide any objects behind the mask and that are linked to the mask.

At the moment, you can make a pseudo mask by creating a blocking shape of the same colour as the background shape, but when you rotate the scene, it is possible to see the blocking shape.

It would be great to be able hide any parts of objects that are behind the mask, that are linked to the mask, so I have added a:

linkedTo:

Attribute to the mask.

So far with Zdog I've not had much luck with fluid dragRotate on anything other than desktop browser. If I try to drag on say Chrome on Android/iOS I can only drag a small amount before the drag stops. I've attached a GIF of the issue being replicated in the Chrome inspector.

Test case: https://codepen.io/desandro/pen/YbrLaO / zzz.dog

I've taken a look through the code and think I have an idea of where to debug the issue. I'll see if I can put some time into it 👍

The ability to save and load graphs from Zdog .json files could be quite useful in the future, at least in gamedev purposes.

Arranged in a tree structure, i.e.
illustration:{
children:[
shape:{
children:[{},{}]
}
]
}

I'm trying to create a flower pot with procedurally generated flowers, however, I've been stopped in my tracks by z-fighting which I can not for the life of me figure out how to prevent.

Here's a minimal demo (refresh to get a new pot): https://codepen.io/turbodev/pen/OYqVVo

Now from that perspective, it looks pretty good. But tilting the view up will reveal issues with the z ordering of stems and pot rim. The pot rim is actually a stack of circles (the only way I could think of to create a hollow cylinder). Another problem is that when I use a group to fix the ordering, rim and stems are always in the wrong order, since the "back" and "front" parts of the rim should mask differently.

Is this shape just no possible with zDog? I can live with some z-fighting, but stems belong inside of the pot IMO 😄.

Any tips appreciated.

If you like i could support it: https://github.com/drcmda/react-zdog

either by making a reconciler (with native elements for rect/ellipse/etc) or wraps - not sure yet. But zdog seems a little rough atm and i am encountering lots of bugs. Would it be ok to discuss this here?

This is how it looks atm:

Demo: https://codesandbox.io/s/nervous-feather-vk9uh

Of course that would allow you to create reactive components, and open it up to the react eco system. You would be able to transition these objects, use routes, animate them (react-spring, etc).

Hi, I'm giving ZDog a shot as my first foray into dealing with the HTML5 canvas. I'd really like to animate the logo I've been working on in my test case. I'm still toying with it, but I'm currently seeing some issues in the browser (Firefox latest, macOS).

The test case seems to render fine, but when using the exact same code in a static HTML and JS file, it flashes white to black a few times before seeming to run smoothly again. I'm not sure why this is. It doesn't seem like plain Z-fighting, as it happens before the illo is even rotated.

This might not be an issue with ZDog and could be more to do with how I'm approaching this.

Test case: https://codepen.io/anon/pen/mYzjqM

It would be good to be able to set each shape as union, intersection or difference, for modelling complex shapes. Here is a more in depth explanation - https://en.wikipedia.org/wiki/Constructive_solid_geometry

Also handy are extrusions - https://www.sciencedirect.com/topics/engineering/path-extrusion

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

Proposal: add addToPoint option for items, and named path points for easier point-to-point modeling. Currently you have to copy translate values. Consider this model for an arm

let chest = new Zdog.Shape({
  path: [
    { x: -4 },
    { x:  4 }
  ],
  // ...
});

let upperArm = new Zdog.Shape({
  addTo: chest,
  path: [
    { y: 0 },
    { y: 3 },
  ],
  // connect to shoulder
  translate: { x: -4 },
  // ...
});

let foreArm = new Zdog.Shape({
  addTo: upperArm,
  path: [
    { y: 0 },
    { y: 3 },
  ],
  // connect to elbow
  translate: { y: 3 },
  // ...
});
// hand
new Zdog.Shape({
  addTo: foreArm,
  // connect to wrist
  translate: { y: 3 },
  // ...
});

The translate values for upperArm, foreArm and hand are all taken from a point of the item's parent. With an addToPoint option and named path point, you could directly set that value without have to copy over the values.

let chest = new Zdog.Shape({
  path: [
    { x: -4, name: 'rightShoulder' },
    { x:  4 }
  ],
  // ...
});

let upperArm = new Zdog.Shape({
  addTo: chest,
  addToPoint: 'rightShoulder',
  path: [
    { y: 0 },
    { y: 3, name: 'elbow' },
  ],
  // ...
});

let foreArm = new Zdog.Shape({
  addTo: upperArm,
  addToPoint: 'elbow',
  path: [
    { y: 0 },
    { y: 3, name: 'wrist' },
  ],
  // ...
});
// hand
new Zdog.Shape({
  addTo: foreArm,
  addToPoint: 'wrist',
  // ...
});

I saw this Demo by Chris Gannon: https://codepen.io/chrisgannon/pen/PvVzRG
The ZDog in this demo is responsive. I went through the code and I didn't found which part of code made it responsive...
Can someone tell me which part of code make the demo responsive? Thank you!

The 25k size and easy api is perfect for some simple 3D case on mobile phone screen, great job!

But for our company(and many more), it can be a bit awkward with the workflow: definitely not easy for frontend developers to come up with the design, also not realistic to ask designers to code.

So maybe an editor for z-dog is on your roadmap? One that can be used by designer and generate javascript code as output. Just asking.

Hey there,
so i noticed a couple fo the bugs that have been logged so far are for the most part just issues with missing modules being imported from other files or other similar build related issues.

I was wondering if you would be open to someone contributing a PR that would update the build task to use a tool like rollup to generate all the boilerplate code required thus making the src files a bit easier to read and hopefully less susceptible to small build related bugs sneaking in.

It would also give you out of the box esm builds for modern systems that support import syntax as well as umd builds and cjs builds. I would hope it would relieve some of the burden of these small bugs to give you more chances to work on some more cool features.

I would love to hear your thoughts on this, if you would like to see what the code change would look like I maaaayy have already started the work so let me know.

Thanks

I think it's more familiar and user friendly to rotate elements using degrees.

Is it possible to set an optional global variable like Zdog.useDegrees = true;.

Then any value passed to a rotate property is converted to degrees (currently I have to use my own conversion function).

Is there a way to add depth to a custom shape like there is with the box? Would love this!

I have drawn out my shape in 2D. I have tried cloning in to z space and joining up points but there seems to be some buggy seethrough faces behaviour with this method.

https://codepen.io/xadz/pen/BeObVO

Hi 👋
First of all thanks for an awesome library. Really like it so far!

I wonder if there are any plans on implementing functionality to work with relative values as well as absolute? Support both uppercase and lowercase of the canvas path commands, that is.

Thanks
BR

https://github.com/metafizzy/zdog/compare/master@%7B1day%7D...master#diff-42f69825340f0b5fa628d80900a46daaL33

Wasn't included in the 1.0.1 npm publish making it impossible to import the module via a bundler.
You probably published the package by mistake before making these changes.
Could you please re-publish the package with these changes ?

Referencing this: #28 (comment)

It makes the lib larger, creates complexity, puts a fork into adoption. If this would be a small, focussed project it would benefit from existing eco systems, as well as creating one for its own.

3rd-party use-cases could be documented, i've already seen people use GSAP with it for instance. For gestures especially low level access pointers per element (click, over, out, up, down, etc) are more interesting that high-level abstracts (onDrag).

The values are definitely animating in GSAP but some are not updating the shape's property.

Diameter does not work
https://codepen.io/chrisgannon/pen/db98d513d1939929876ef03cccf3f8b1

Stroke does work
https://codepen.io/chrisgannon/pen/c5d9f322bb6c42d4c6d89f45a34e560e

Objects seems to jump ahead in the z-axis when viewed at certain angles.

Reduced test case: https://codepen.io/awebster/pen/Xwqqpx

The orange box is rendering in front of the blue cubes at various angles.

The ability to draw a bezier path (in a vector program) and convert that path data into usable Zdog code would be very useful.

Ability to start rotation when you reach a specific point on the page, and end when you reach a second point on the page

Hiya 👋

I'm currently digging through the source code and I see it's written in ES5. I see a lot of places where ES6+ code would have simplified both development and understanding the logic.
Have you considered rewriting it to ES6+ and use a bundler with transpiler to make the library browser ready?

If it's something you'd like I could look into it and see how much effort it would take. I have good experiences bundling with rollup so I could give that a try.

Thanks
BR

The current bezier path allows only for the two control points and an end point. I want to draw longer more complex lines.
Ideally allow me to add as many points as possible.
Or add a Bspline option and with N points.

I'm trying to use illo with WeChat miniprograms, which do support a Canvas to draw into.
However the environment is a bit different.

But even before hitting API differences I'm having problems importing the library.
I'm just using the raw dist.min

import Zdog from "../../vendor/zdog.dist.min.js";

also tried
const zdog = require('../../vendor/zdog.dist.min.js')

and getting the error below.

sorry I can't really create a test case as this is not for a normal browser env but a canvas that lives inside WeChat messaging app

here's info on wechat's canvas API
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

Placing a box within a group produces the following (drag around to see the result):

Test case: https://codepen.io/MarioD/pen/vwQErz

Take a look at the example below:

Test case: https://codepen.io/MarioD/pen/XwymyW

• When the can's x is set to 10, the z-index fighting issue occurs
• When the can's x is set to 11 it behaves perfectly

Is this just a limitation of the engine, or is there a way to render the can close to the box without having the fighting issues?

I read through https://zzz.dog/extras#z-fighting but it seems that you are able to have shapes much closer than my example before you get the z-index fighting issue.

Thanks!

Looks to me like the behaviour or of the dragger tool is working in euler angles, not quaternions. As is the vector.js has only euler rotation modes.
Is it planned to add this or even a known issue?

for an example of versor dragging see this
https://observablehq.com/@d3/versor-dragging
and the comparison here:
https://www.jasondavies.com/maps/rotate/

Maybe have a look if this versor library seems like a good dependency to add:
https://github.com/Fil/versor

I've had a look through both renderer implementations and the interface seems to only handle stroke and fill so far. Are there any plans to implement more intricate fills, like gradients and textures (https://codepen.io/allenchum/pen/yqVvEa)?

This could be useful for a number of things, like character creation (skin tones, clothes, ...) and 2.5 tricks (e.g. faking ambient occlusion).

This is a feature request -- a 3D Draw Command.

Back in the mid 1980's (when I first learned to program), we had a "draw" command that took a string a characters that defined a draw path (relative--not absolute position like SVG paths). It was like an ultra short-hand for the Logo language. In this language, you gave a sequence of instructions to a turtle crawling on the canvas, like turn 45 degree, move forward 100, lower pen.. etc..

In the draw command, I created a lot of things like 2D game spaceships and swords and such. I even created a scalable font for text that worked exceptionally well. It was very easy to build things.. much more so than SVG's paths. And it would be immensely useful if it were in 3D.

2D draw commands were like this, example of a square (F=forward, R=right):

draw "F100R90F100R90F100R90F100"

Now imagine extending that with:

D = define, e.g. "Dmyshape:", which names the shape "myshape" until the next "D".
U = use, e.g. "Umyshape;", which means to draw the shape named "myshape".
S = shape, e.g. "Smyshape;", which sets extrusions to that shape until changed to another.
F = forward, e.g. "F100", which means extrude 100 pixels forward
N = non-return, meaning when in front of "F", draw forward but keep the cursor local.
A = anchor, e.g. "Amyanchor;", which labels the cursor location to reference later..
T = return to anchor, e..g "Tmyanchor;" to return to it.. Or "NT" for draw to it but don't return.
R = turn right, e.g. "R45" for 45 degree turn right
L = turn left, e.g. "L90"...
Y = yaw, e.g. "Y45".. these are like flying an airplane (yaw, roll, and pitch)
R = roll..
P = pitch..
C = color, e.g. "CFFFFFF;" for white..

This kind of draw command makes it easier to imagine while drawing but also keeps the description small string memory foot-print, and enables easy programmatic manipulation of the object... For example, I scaled the font I made back the 1980's by simply running through the string and performing math on the various numbers after "F". It didn't always work, depending on how the letters and numbers were drawn but I quickly learned how to draw them so it would always work.. It was quite fun. Programming was a lot more fun back then because programming languages were so much easier.. access to hardware was easier.. everything was easier... and therefore you had so much more power at your finger tips.

IMPORT SVG PATHS:

Please could we have the ability to import SVG. I have tried to convert an SVG path into zDog bezier & paths, but the outcome is not good. So, it would be great if we could have either an SVG Path converter utility or just the ability to work directly with an SVG & its paths.

I was wondering how to change the rotation origin of a shape, is it possible?
Thank you!

Hey, thanks for this library! I love the design philosophy (embracing z-fighting!) and I'm excited to play around with it more.

Since you're the maintainer I think it's important for you to work in a code style that you're comfortable with. But I wanted to open discussion about the possibility of zdog using a module bundler like Rollup or Webpack -- or maybe even a zero-config tool like Microbundle that "just works" and would require even less configuration than exists now.

I think there'd be a bunch of benefits:

• Smaller output sizes! Bundlers have gotten very good at shrinking package sizes down. Not only that, they enable patterns (like tree-shaking) for consumers of the library to opt in to even smaller bundle sizes on their end by picking and choosing only the parts they need from the library.

• Much easier for others to contribute, since modules are now a familiar, conventional default style for most JS developers.

• As a corollary, the current reliance on Make makes it difficult for people who aren't on Mac or Linux to contribute (and even those folks may have to install extra tools and learn something new and un-javascripty just to get started). As I noted, something like microbundle might actually result in less complicated configuration, not more.

• Better static analysis! Tools like eslint (or TS for JS) can do a much better job of catching bugs when projects are set up in a more conventional way.

• Much easier to use external dependencies if you wanted to opt in to them in the future (for example, to simplify interaction code or polyfill functionality). For better or for worse, many libraries now assume you're using a bundler, especially if you don't want to pollute the global namespace or risk causing conflicts for a user of your library.

• You can use modern syntax without having to worry about lowest-common-denominator browser support.

• Relatedly, reduced boilerplate across all files! For example, rect.js's length gets cut by about half:

  before:

  ( function( root, factory ) {
    // module definition
    if ( typeof module == 'object' && module.exports ) {
      /* globals module, require */// CommonJS
      module.exports = factory( require('./shape') );
    } else {
      // browser global
      var Zdog = root.Zdog;
      Zdog.Rect = factory( Zdog.Shape );
    }
  }( this, function factory( Shape ) {
  
  var Rect = Shape.subclass({
    width: 1,
    height: 1,
  });
  
  Rect.prototype.setPath = function() {
    var x = this.width / 2;
    var y = this.height / 2;
    this.path = [
      { x: -x, y: -y },
      { x:  x, y: -y },
      { x:  x, y:  y },
      { x: -x, y:  y },
    ];
  };
  
  return Rect;
  
  }));

  after:

  import Shape from './shape';
  
  export default class Rect extends Shape {
    width = 1
    height = 1
  
    setPath() {
      let x = this.width / 2;
      let y = this.height / 2;
      this.path = [
        { x: -x, y: -y },
        { x:  x, y: -y },
        { x:  x, y:  y },
        { x: -x, y:  y },
      ];
    }
  }

  And some files, like index.js will basically disappear. No need to repeat each module's name four times anymore :)

I'm filing this on behalf of The_Amp_Walrus (https://news.ycombinator.com/item?id=20047206), who has an example CodePen of https://codepen.io/anon/pen/QRZKxy

Since calling scene.updateGraph() caches the flatGraph on its first call (as part of checkFlatGraph, (https://github.com/metafizzy/zdog/blob/v1.0.1/js/anchor.js#L124)), subsequent calls to updateGraph don't update the flatGraph to match the children of the scene.

Could the flatmap always be updated whenever updateGraph is called?

Hello, this is a feature request, and I guess it's not an easy one :)

It would be great to be able to edit, translate, rotate or scale an existing shape dynamically, and interpolate this transformation over a custom amount of time.

Ex:

let ell = new Zdog.Ellipse({
  addTo: illo,
  diameter: 80,
  translate: { z: 40 },
  stroke: 20,
  color: '#636',
});

ell.animate({
  diameter: 150,
  translate: {z: -40},
  transition: "500ms",
});

// Result: the ellipse will change diameter from 80 to 150 and move from 40 to -40 in 500ms.

Bonus points if you manage to implement transition-timing-function too (linear, ease-in-and-out, etc)

Thanks, and congrats for this lib!

Test case: https://codepen.io/desandro/pen/YbrLaO

Description:
Happens when the torus is in side profile.

Video:
https://imgur.com/a/ydWm9um

Still:

Browser:
iPhone 6s, iOS 12.3

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

Right now there's no easy way to access a child of a parent copied with copyGraph.

// right arm
let upperArm = new Zdog.Shape({
  //...
});
let foreArm = new Zdog.Shape({
  addTo: upperArm,
  // ...
});
// hand
new Zdog.Shape({
  addTo: foreArm,
  color: '#C25',
  // ...
});

// left arm
upperArm.copyGraph();

// How do set the left hand to a different color?

With the name option, you could access children via an Object property.

// right arm
let upperArm = new Zdog.Shape({
  //...
});
new Zdog.Shape({
  addTo: upperArm,
  name: 'foreArm', // accessible as parent.foreArm
  // ...
});
// hand
new Zdog.Shape({
  addTo: upperArm.foreArm,
  name: 'hand', // accessible as parent.hand
  color: '#C25',
  // ...
});

// left arm
let leftArm = upperArm.copyGraph();

// set left hand to different color
leftArm.foreArm.hand.color = '#EA0';

It maybe that ZDog is meant to be used for smaller animations and on the mobile. And I have noticed that all your demos are rendered on 240 width/height canvas. But, when you look at an animation on a desktop in Chrome with a canvas of 600 height etc, it is very easy to spot jagged edges when a shape is animated in rotation.

http://hub.establishmindfulness.com/zdog

This is a feature request.

I love the concept and I'm using it already, but just want to know, is it technically possible to create 3d text or to project images on shapes? For example, a flat circle with an image projected on it as a texture of sorts. I'm not sure if the engine would even allow that to happen.

An enhancement for more complex shapes will be to allow difference between two shapes. The second shape will not be seen but will create a empty space in the first shape.

Currently, there is only one easing option:

easeInOut()

It would be nice to offer some more options, like:

Bounce
Quad
Elastic
Custom Bezier

Maybe you could just attach a library to zDog like easing.js:

https://github.com/rdy/easing-js/blob/master/src/easing.js

In several SVG programs, you can set the corner type for stroke from three options: the current rounded corner one, a sharp corner one and a filleted one where it cuts off diagonally. I'm not sure about the feasibility of the last one because I'm not sure how well it would translate to three dimensions, but the sharp corner option would open up possibilities.

Example from inkscape:

v1.0.2 removed checkFlatGraph method, but renderGraphSvg still used it. I'll add a fix in v1.0.3. In the meantime, you can render with SVG by adding this duck punch. Add this code before your other Zdog code.

Zdog.Anchor.prototype.renderGraphSvg = function( svg ) {
  if ( !svg ) {
    throw new Error( 'svg is ' + svg + '. ' +
      'SVG required for render. Check .renderGraphSvg( svg ).' );
  }
  this.flatGraph.forEach( function( item ) {
    item.render( svg, Zdog.SvgRenderer );
  });
};

Currently composite shapes like Hemisphere, Cylinder, and Cone can only be rendered with fully circular bases. There is no easy way to render a quarter-sphere or half-cone.

One solution may be to add a quarters option, similar to Ellipse. For example, quarters: 2 would render a half-cone.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

When es6 import syntax none of the modules are exported or available on the Zdog class
Test case: https://codesandbox.io/embed/hungry-darwin-59jh7

EDIT: Please vote for for (👍) or against (👎) TypeScript support via declaration file on this comment. (It’s a "survey" to gauge interest)

I think especially a 3D engine can benefit immensely from typescript support. It reduces the amount of documentation reading that users have to do and prevents a lot of common bugs.

I’d also advocate for converting zdog to typescript internally. I’m sure it’ll be beneficial in this kind of project.

Currently Zdog uses orthogonal perspective, where all projected lines are parallel with no vanishing point. This works nice with stroke volume — as stroke volume is applied to the entire shape uniformly. So, with the same shape, a corner close to the camera will have the same stroke as the corner far from the camera.

That said, adding perspective would be a good feature to add. It's a relatively low-complexity addition that provides a wide range of capability. Vanishing point perspective is an expected feature of any 3D library. Zdog may be special, but it should get it the same.

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

If you try to load Zdog in outside an browser-less environment like on server-side, you will likely run into an error

dragger.js:84 Uncaught TypeError: window.addEventListener is not a function
    at Item.Dragger.dragStart (dragger.js:84)
    at Item.Illustration.dragStart (illustration.js:232)
    at Item.Dragger.onmousedown.Dragger.onpointerdown (dragger.js:73)
    at Item.Dragger.handleEvent (dragger.js:67)

Zdog currently expects browser environment for things like window and document. My basic recommendation is to add a conditional to disable loading Zdog on the server, and enable it for the browser. I'm not a server-side rendering expert, so any guidance here on how to manage would be appreciated.

Add a 👍 reaction to this issue if you've ran into this issue so I know how prevalent this is.