jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Desktop: Fix the Text tool not working with the hole punch (#3012) 

* Make viewport element transparent when hole punch is enabled

Instead of removing the viewport element completely we make it transparent
Allows the text tool to work

* Fix formatting
This commit is contained in:
Timon 2025-08-07 13:49:03 +02:00 committed by GitHub
parent 5d17f5dcce
commit b491cfcd2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/panels/Document.svelte
View File

@ -533,16 +533,24 @@
y={cursorTop} y={cursorTop}
/> />
{/if} {/if}
{#if !$appWindow.viewportHolePunch} <div
<div class="viewport" on:pointerdown={(e) => canvasPointerDown(e)} bind:this={viewport} data-viewport> class:viewport={!$appWindow.viewportHolePunch}
class:viewport-transparent={$appWindow.viewportHolePunch}
on:pointerdown={(e) => canvasPointerDown(e)}
bind:this={viewport}
data-viewport
>
{#if !$appWindow.viewportHolePunch}
<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}> <svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
{@html artworkSvg} {@html artworkSvg}
</svg> </svg>
<div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}> {/if}
{#if showTextInput} <div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}>
<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} /> {#if showTextInput}
{/if} <div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
</div> {/if}
</div>
{#if !$appWindow.viewportHolePunch}
<canvas <canvas
class="overlays" class="overlays"
width={canvasWidthScaledRoundedToEven} width={canvasWidthScaledRoundedToEven}
@ -552,8 +560,9 @@
data-overlays-canvas data-overlays-canvas
> >
</canvas> </canvas>
</div> {/if}
{/if} </div>
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph> <div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
<Graph /> <Graph />
</div> </div>
@ -757,6 +766,10 @@
.viewport { .viewport {
background: var(--color-2-mildblack); background: var(--color-2-mildblack);
}
.viewport,
.viewport-transparent {
width: 100%; width: 100%;
height: 100%; height: 100%;
// Allows the SVG to be placed at explicit integer values of width and height to prevent non-pixel-perfect SVG scaling // Allows the SVG to be placed at explicit integer values of width and height to prevent non-pixel-perfect SVG scaling