thePR0M3TH3AN/Artstr-Studio
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/Artstr-Studio.git synced 2026-11-02 19:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Canvas crop marks for Custom Art + Slide modes (toggleable)

Browse Source 
Crop marks were a cover-only feature; Custom Art / Slide canvases
exported with no corner registration marks at all. Add a corner
crop-mark set for canvas modes with the existing showCrops /
printCrops toggles wired up.

Changes:

- New <div class="cropMarks canvasCrops"> sits inside .sheet
  alongside the existing cover cropMarks. Eight corner marks,
  positioned outside the canvas edges via new .cc-* classes that
  are scoped under .canvasCrops so they don't collide with the
  bleed-anchored cover .cm-* positions.
- CSS shows .canvasCrops only in body.template-customart and
  body.template-slide. It reuses the existing `--crop-display` /
  body.print-crops gating, so state.showCrops drives on-screen
  visibility and state.printCrops drives print visibility — the
  same toggles the cover mode has used all along.
- Move showCrops and printCrops <label>s from `cover-toggle` to a
  new `crops-toggle` class. Cover-toggle still hides showGuides /
  showBleed / printGuides in non-cover modes (those are bleed/safe
  concepts that don't apply to canvas modes); crops-toggle shows
  in cover / customart / slide, hidden only in disc + jewel sheets.

JPEG export was already unaffected — the direct canvas rasterizer
doesn't touch the DOM, so canvasCrops never appears there. The PDF
Print route does render the DOM, where printCrops now controls
inclusion.

Verified via CDP: in customart mode, both toggle labels render,
.canvasCrops is visible by default with a valid corner-span
bounding box, and `state.showCrops = false; render()` hides it.

Co-Authored-By: Claude Opus 4.7 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.7 committed 2026-05-27 10:17:12 -04:00
1 parent 119b14e1d3
commit 29dcdeea61
1 file changed
+31 -3
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+31 -3
View File
@@ -1270,13 +1270,19 @@
display: none !important;
}
/* Export toggles: fold/safe/trim/bleed/crops only apply to case covers */
/* Export toggles: fold/safe/trim/bleed guides only apply to case
covers. Crop-mark toggles apply more broadly — cover + Custom Art
+ Slide all render crop marks, only Disc / Jewel sheets don't. */
body.template-disc .cover-toggle,
body.template-jewel .cover-toggle,
body.template-customart .cover-toggle,
body.template-slide .cover-toggle {
display: none !important;
}
body.template-disc .crops-toggle,
body.template-jewel .crops-toggle {
display: none !important;
}
/* Custom Art / Slide mode: hide all the slot/region UI and decorations,
show only the canvas + layers (the Canvas panel serves both). */
@@ -1908,6 +1914,22 @@
.cm-br-h { left: calc(var(--bleed) + (var(--panel-w) * 2) + var(--spine-w) + .06in); top: calc(var(--bleed) + var(--trim-h)); }
.cm-br-v { left: calc(var(--bleed) + (var(--panel-w) * 2) + var(--spine-w)); top: calc(var(--bleed) + var(--trim-h) + .06in); }
/* Canvas-mode crop marks (Custom Art / Slide). The .sheet has no bleed
in canvas modes, so the corner marks sit just outside the canvas
edges. .cc- positions only kick in inside .canvasCrops to avoid
conflicting with the cover .cm- positions. */
.canvasCrops { display: none; }
body.template-customart .canvasCrops,
body.template-slide .canvasCrops { display: var(--crop-display, block); }
.canvasCrops .cc-tl-h { left: -.24in; top: 0; }
.canvasCrops .cc-tl-v { left: 0; top: -.24in; }
.canvasCrops .cc-tr-h { right: -.24in; top: 0; }
.canvasCrops .cc-tr-v { right: 0; top: -.24in; }
.canvasCrops .cc-bl-h { left: -.24in; bottom: 0; }
.canvasCrops .cc-bl-v { left: 0; bottom: -.24in; }
.canvasCrops .cc-br-h { right: -.24in; bottom: 0; }
.canvasCrops .cc-br-v { right: 0; bottom: -.24in; }
body.hide-guides .sheet { --guide-display: none; --safe-display: none; --label-display: none; }
body.hide-bleed .sheet { --bleed-display: none; }
body.hide-crops .sheet { --crop-display: none; }
@@ -2797,9 +2819,9 @@
<div class="toggles">
<label class="toggle cover-toggle"><input id="showGuides" type="checkbox" checked /> Show fold/safe/trim guides on screen</label>
<label class="toggle cover-toggle"><input id="showBleed" type="checkbox" checked /> Show bleed shading on screen</label>
<label class="toggle cover-toggle"><input id="showCrops" type="checkbox" checked /> Show crop marks on screen</label>
<label class="toggle crops-toggle"><input id="showCrops" type="checkbox" checked /> Show crop marks on screen</label>
<label class="toggle cover-toggle"><input id="printGuides" type="checkbox" /> Include guides in PDF</label>
<label class="toggle cover-toggle"><input id="printCrops" type="checkbox" checked /> Include crop marks in PDF</label>
<label class="toggle crops-toggle"><input id="printCrops" type="checkbox" checked /> Include crop marks in PDF</label>
</div>
<p class="hint">PDF export opens your browser print dialog. Choose <b>Save as PDF</b>, use <b>100% scale</b>, and disable headers/footers.</p>
</fieldset>
@@ -3534,6 +3556,12 @@
<span class="cm-h cm-bl-h"></span><span class="cm-v cm-bl-v"></span>
<span class="cm-h cm-br-h"></span><span class="cm-v cm-br-v"></span>
</div>
<div class="cropMarks canvasCrops" aria-hidden="true">
<span class="cm-h cc-tl-h"></span><span class="cm-v cc-tl-v"></span>
<span class="cm-h cc-tr-h"></span><span class="cm-v cc-tr-v"></span>
<span class="cm-h cc-bl-h"></span><span class="cm-v cc-bl-v"></span>
<span class="cm-h cc-br-h"></span><span class="cm-v cc-br-v"></span>
</div>
<div class="diskLayer" id="diskLayer" aria-hidden="true">
<div class="discSlot" data-label="DISC 1" id="disc-top">
<div class="placeholder">Assign a disc design</div>