mirror of
https://github.com/PR0M3TH3AN/Artstr-Studio.git
synced 2026-10-27 08:40:39 +00:00
External embed: reuse designObjectFitWrap to scale-fit cleanly
The grid swap fixed the squish but introduced the inverse: the
renderer's 720px box stayed at 720px without scaling down to the
iframe viewport. fitMiniPreview was firing, but something in the
grid layout path was preventing the transform: scale() from
shrinking the visible artwork.
Reverted the wrap to the same pattern the existing linked-design
renderer uses for in-app layer previews — flex centering + the
.designObjectFitWrap CSS class, which sets
.designObjectFitWrap > * { flex: 0 0 auto; max-width: none;
max-height: none; transform-origin: center center;
margin: 0 !important; }
flex: 0 0 auto on the direct child explicitly disables both
flex-grow and flex-shrink, so the renderer's fixed 720×720 box
stays at its natural size in layout. fitMiniPreview then reads
naturalW=720, wrapW=iframe-width, and scales uniformly with
correct aspect.
This is the exact pattern that works for linked-design layers in
the editor; the embed inherits the same correctness guarantees.
This commit is contained in:
1 parent
a2a6de2211
commit
db2f6151a9
1 file changed
+7
-6
+7
-6
@@ -21372,12 +21372,13 @@
|
||||
if (!stage || !footer) return;
|
||||
stage.innerHTML = '';
|
||||
const wrap = document.createElement('div');
|
||||
// display:grid avoids flex-shrink crushing the renderer's
|
||||
// fixed-pixel box to wrap width (which makes fitMiniPreview's
|
||||
// uniform-scale calc squish the image non-uniformly). The box
|
||||
// stays at its natural PREVIEW_BASE_PX dimensions; fitMiniPreview
|
||||
// scales around transform-origin: center center.
|
||||
wrap.style.cssText = 'position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden';
|
||||
// Reuse the .designObjectFitWrap class — its `> * { flex: 0 0
|
||||
// auto }` rule keeps the renderer's fixed-720px box from
|
||||
// being flex-shrunk to wrap width (the source of the earlier
|
||||
// horizontal-squish bug). fitMiniPreview then scales around
|
||||
// transform-origin: center center, which the class also sets.
|
||||
wrap.className = 'designObjectFitWrap';
|
||||
wrap.style.cssText = 'position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center';
|
||||
stage.appendChild(wrap);
|
||||
try {
|
||||
renderDesignPayloadPreview(wrap, payload, { compact: true, transparentPixelArt: true });
|
||||
|
||||
Reference in new issue
Block a user