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