Skip to content

Commit 6a5105c

Browse files
mordachaimordachai
committed
coors for inks and notes
1 parent ca72fd9 commit 6a5105c

7 files changed

Lines changed: 233 additions & 9 deletions

File tree

‎scripts/apps/drawing-sheet.js‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MODULE_ID, PIN_COLORS } from "../config.js";
1+
import { MODULE_ID, PIN_COLORS, STICKY_TINTS, INK_COLORS } from "../config.js";
22
import { collaborativeUpdate } from "../utils/socket-handler.js";
33
import { applyTapeEffectToSound } from "../utils/audio-utils.js";
44
import {
@@ -67,6 +67,10 @@ export class CustomDrawingSheet extends DrawingConfig {
6767
context.font = customData.font;
6868
context.fontSize = customData.fontSize;
6969
context.audioEffectEnabled = customData.audioEffectEnabled;
70+
context.tint = customData.tint;
71+
context.textColor = customData.textColor;
72+
context.stickyTints = customData.stickyTints;
73+
context.inkColors = customData.inkColors;
7074

7175
// Enrich the linked object for display
7276
context.enrichedLinkedObject = context.linkedObject ? await TextEditor.enrichHTML(context.linkedObject, { async: true }) : "";
@@ -116,6 +120,10 @@ export class CustomDrawingSheet extends DrawingConfig {
116120
image: this.document.flags[MODULE_ID]?.image || (noteType === "handout" ? "modules/investigation-board/assets/newhandout.webp" : "modules/investigation-board/assets/placeholder.webp"),
117121
font: this.document.flags[MODULE_ID]?.font || game.settings.get(MODULE_ID, "font"),
118122
fontSize: this.document.flags[MODULE_ID]?.fontSize || defaultFontSize,
123+
tint: this.document.flags[MODULE_ID]?.tint || "#ffffff",
124+
textColor: this.document.flags[MODULE_ID]?.textColor || "#000000",
125+
stickyTints: STICKY_TINTS,
126+
inkColors: INK_COLORS,
119127
connections: formattedConnections,
120128
noteTypes: {
121129
sticky: "Sticky Note",
@@ -341,6 +349,35 @@ export class CustomDrawingSheet extends DrawingConfig {
341349
});
342350
}
343351

352+
// Handle color selection
353+
this.element.querySelectorAll(".color-option").forEach(opt => {
354+
opt.addEventListener("click", async (ev) => {
355+
ev.preventDefault();
356+
const color = opt.dataset.color;
357+
const type = opt.dataset.type; // 'tint' or 'textColor'
358+
const hiddenInput = this.element.querySelector(`input[name='${type}']`);
359+
360+
if (hiddenInput) {
361+
hiddenInput.value = color;
362+
363+
// Update UI
364+
opt.parentElement.querySelectorAll(".color-option").forEach(o => o.classList.remove("active"));
365+
opt.classList.add("active");
366+
367+
// Real-time update (collaborative)
368+
await collaborativeUpdate(this.document.id, {
369+
[`flags.${MODULE_ID}.${type}`]: color
370+
});
371+
372+
// Refresh the drawing on canvas
373+
const drawing = canvas.drawings.get(this.document.id);
374+
if (drawing) {
375+
await drawing.refresh();
376+
}
377+
}
378+
});
379+
});
380+
344381
const form = this.element.querySelector("form");
345382
if (form) {
346383
// Handle cancel button
@@ -418,6 +455,14 @@ export class CustomDrawingSheet extends DrawingConfig {
418455
}
419456
}
420457

458+
if (data.tint !== undefined) {
459+
updates[`flags.${MODULE_ID}.tint`] = data.tint;
460+
}
461+
462+
if (data.textColor !== undefined) {
463+
updates[`flags.${MODULE_ID}.textColor`] = data.textColor;
464+
}
465+
421466
// Process connection color changes
422467
const connections = this.document.flags[MODULE_ID]?.connections || [];
423468
connections.forEach((conn, index) => {

‎scripts/apps/note-previewer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@ export class NotePreviewer extends HandlebarsApplicationMixin(ApplicationV2) {
8080
fontClass: fontClass,
8181
previewFontSize: (noteData?.fontSize || 15) * 2.5 * fontBoost,
8282
showSeparateText: showSeparateText,
83+
tint: noteData?.tint || "#ffffff",
84+
textColor: noteData?.textColor || "#000000",
8385
isGM: game.user.isGM,
8486
isGlobalActive: isGlobalActive,
8587
linkedObject: noteData?.linkedObject || "",

‎scripts/canvas/custom-drawing.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -617,7 +617,7 @@ export class CustomDrawing extends Drawing {
617617
this.bgShadow.texture = texture;
618618
this.bgShadow.width = drawingWidth;
619619
this.bgShadow.height = drawingHeight;
620-
this.bgShadow.tint = 0x000000;
620+
try { this.bgShadow.tint = 0x000000; } catch(e) {}
621621
this.bgShadow.alpha = 0.4;
622622
this.bgShadow.position.set(6, 6); // Offset shadow
623623
this.bgShadow.filters = [new PIXI.BlurFilter(2)];
@@ -920,7 +920,7 @@ export class CustomDrawing extends Drawing {
920920
this.bgShadow.texture = texture;
921921
this.bgShadow.width = width;
922922
this.bgShadow.height = height;
923-
this.bgShadow.tint = 0x000000;
923+
try { this.bgShadow.tint = 0x000000; } catch(e) {}
924924
this.bgShadow.alpha = 0.4;
925925
this.bgShadow.position.set(6, 6);
926926
this.bgShadow.filters = [new PIXI.BlurFilter(3)];
@@ -930,6 +930,18 @@ export class CustomDrawing extends Drawing {
930930
this.bgSprite.texture = texture;
931931
this.bgSprite.width = width;
932932
this.bgSprite.height = height;
933+
934+
// Apply tint for sticky notes
935+
if (noteData.type === "sticky") {
936+
const tintColor = noteData.tint || "#ffffff";
937+
try {
938+
this.bgSprite.tint = tintColor;
939+
} catch (e) {
940+
this.bgSprite.tint = 0xFFFFFF;
941+
}
942+
} else {
943+
this.bgSprite.tint = 0xFFFFFF;
944+
}
933945
}
934946
}
935947
} catch (err) {
@@ -1057,7 +1069,7 @@ export class CustomDrawing extends Drawing {
10571069
const textStyle = new PIXI.TextStyle({
10581070
fontFamily: font,
10591071
fontSize: fontSize,
1060-
fill: "#000000",
1072+
fill: noteData.textColor || "#000000",
10611073
wordWrap: true,
10621074
wordWrapWidth: width - 2, // Increased from -15 to give more room for italics
10631075
align: "center",

‎scripts/config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,19 @@ export const MODULE_ID = "investigation-board";
22
export const BASE_FONT_SIZE = 15;
33
export const PIN_COLORS = ["redPin.webp", "bluePin.webp", "yellowPin.webp", "greenPin.webp"];
44
export const SOCKET_NAME = `module.${MODULE_ID}`;
5+
6+
export const STICKY_TINTS = {
7+
white: "#ffffff",
8+
lightRed: "#ffcccc",
9+
blue: "#99ccff",
10+
green: "#99ff99",
11+
yellow: "#ffff99",
12+
orange: "#ffcc99"
13+
};
14+
15+
export const INK_COLORS = {
16+
black: "#000000",
17+
red: "#cc0000",
18+
green: "#006600",
19+
blue: "#0000cc"
20+
};

‎styles/style.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -484,6 +484,78 @@ body.investigation-board-mode .drawing:not([data-investigation-note="true"]) {
484484
font-size: 14px;
485485
}
486486

487+
/* Color Mosaic Styles */
488+
.color-settings {
489+
display: flex;
490+
flex-direction: row;
491+
gap: 15px;
492+
margin: 5px 0;
493+
align-items: center;
494+
flex-wrap: nowrap;
495+
}
496+
497+
.color-mosaic-group {
498+
display: flex;
499+
flex-direction: row;
500+
align-items: center;
501+
gap: 6px;
502+
flex: 0 1 auto;
503+
}
504+
505+
.color-mosaic-group label {
506+
font-size: 12px;
507+
font-weight: 500;
508+
white-space: nowrap;
509+
margin: 0;
510+
}
511+
512+
.color-mosaic {
513+
display: flex;
514+
gap: 3px;
515+
flex-wrap: nowrap;
516+
}
517+
518+
.color-option {
519+
width: 24px;
520+
height: 24px;
521+
border-radius: 4px;
522+
border: 1px solid rgba(0,0,0,0.2);
523+
cursor: pointer;
524+
transition: transform 0.1s;
525+
position: relative;
526+
}
527+
528+
.color-option:hover {
529+
transform: scale(1.1);
530+
border-color: rgba(0,0,0,0.5);
531+
z-index: 1;
532+
}
533+
534+
.color-option.active {
535+
border: 2px solid #3f51b5;
536+
box-shadow: 0 0 5px rgba(63, 81, 181, 0.6);
537+
}
538+
539+
.color-option.active::after {
540+
content: '\f00c';
541+
font-family: 'Font Awesome 6 Pro';
542+
font-weight: 900;
543+
font-size: 10px;
544+
color: rgba(0,0,0,0.7);
545+
position: absolute;
546+
top: 50%;
547+
left: 50%;
548+
transform: translate(-50%, -50%);
549+
}
550+
551+
/* Light checkmark for dark ink colors */
552+
.color-option.active[data-color="#000000"]::after,
553+
.color-option.active[data-color="#cc0000"]::after,
554+
.color-option.active[data-color="#006600"]::after,
555+
.color-option.active[data-color="#0000cc"]::after {
556+
color: rgba(255,255,255,0.8);
557+
}
558+
487559
/* ========================= */
488560
/* Context Menu */
489561
/* ========================= */
@@ -920,6 +992,42 @@ body.investigation-board-mode .drawing:not([data-investigation-note="true"]) {
920992
isolation: isolate; /* Create a new stacking context */
921993
}
922994

995+
.preview-text-container.has-background {
996+
background: transparent !important;
997+
border: none !important;
998+
}
999+
1000+
/* Sticky note tinting in preview */
1001+
.preview-text-container.has-background.sticky-note-tinted {
1002+
background: transparent !important;
1003+
}
1004+
1005+
/* Fix for dark mode labels */
1006+
.theme-dark .ib-note-config-form label,
1007+
.theme-dark .ib-note-config-form .form-group label,
1008+
.theme-dark .color-mosaic-group label,
1009+
.theme-dark .investigation-board-hud label,
1010+
.theme-dark .size-input-group label,
1011+
.theme-dark .font-select-group label,
1012+
.theme-dark .font-size-group label {
1013+
color: #f0f0e0 !important;
1014+
}
1015+
1016+
.sticky-tint-layer {
1017+
position: absolute;
1018+
inset: 0;
1019+
background-color: var(--sticky-tint, #ffffff);
1020+
z-index: 1;
1021+
}
1022+
1023+
.sticky-tint-layer img {
1024+
width: 100%;
1025+
height: 100%;
1026+
object-fit: contain;
1027+
mix-blend-mode: multiply;
1028+
display: block;
1029+
}
1030+
9231031
.preview-text-container.has-background {
9241032
border: none;
9251033
padding: 10px; /* More padding for paper edges */

‎templates/drawing-sheet.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,39 @@
55
<textarea name="text" rows="4" placeholder="Enter note text...">{{text}}</textarea>
66
</div>
77

8+
{{!-- Color Selection --}}
9+
<div class="form-group color-settings">
10+
{{#if (eq noteType "sticky")}}
11+
<div class="color-mosaic-group">
12+
<label>Note Color:</label>
13+
<div class="color-mosaic sticky-tints">
14+
{{#each stickyTints}}
15+
<div class="color-option {{#if (eq ../tint this)}}active{{/if}}"
16+
data-color="{{this}}"
17+
data-type="tint"
18+
style="background-color: {{this}};"
19+
title="{{@key}}"></div>
20+
{{/each}}
21+
<input type="hidden" name="tint" value="{{tint}}" />
22+
</div>
23+
</div>
24+
{{/if}}
25+
26+
<div class="color-mosaic-group">
27+
<label>Ink Color:</label>
28+
<div class="color-mosaic ink-colors">
29+
{{#each inkColors}}
30+
<div class="color-option {{#if (eq ../textColor this)}}active{{/if}}"
31+
data-color="{{this}}"
32+
data-type="textColor"
33+
style="background-color: {{this}};"
34+
title="{{@key}}"></div>
35+
{{/each}}
36+
<input type="hidden" name="textColor" value="{{textColor}}" />
37+
</div>
38+
</div>
39+
</div>
40+
841
{{!-- Font Settings --}}
942
<div class="form-group font-settings">
1043
<div class="font-select-group">

‎templates/note-preview.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</div>
1010

1111
{{#if (ne boardMode "futuristic")}}
12-
<div class="photo-frame-text {{fontClass}}">
12+
<div class="photo-frame-text {{fontClass}}" style="color: {{textColor}};">
1313
{{text}}
1414
</div>
1515
{{/if}}
@@ -53,15 +53,23 @@
5353
{{/if}}
5454

5555
{{#if showSeparateText}}
56-
<div class="preview-text-container {{fontClass}} {{#if backgroundPath}}has-background{{/if}}">
56+
<div class="preview-text-container {{fontClass}} {{#if backgroundPath}}has-background{{/if}} {{#if (eq noteType "sticky")}}sticky-note-tinted{{/if}}"
57+
style="{{#if (eq noteType "sticky")}}--sticky-tint: {{tint}};{{/if}}">
5758
{{#if backgroundPath}}
58-
<img src="{{backgroundPath}}" class="preview-background-img" alt="Background" />
59+
{{#if (eq noteType "sticky")}}
60+
<div class="sticky-tint-layer">
61+
<img src="{{backgroundPath}}" alt="Background" />
62+
</div>
63+
{{else}}
64+
<img src="{{backgroundPath}}" class="preview-background-img" alt="Background" />
65+
{{/if}}
5966
{{/if}}
60-
<div class="preview-text" style="font-size: {{previewFontSize}}px;">{{text}}</div>
67+
<div class="preview-text" style="font-size: {{previewFontSize}}px; color: {{textColor}};">{{text}}</div>
6168
</div>
6269
{{/if}}
6370

64-
{{#if enrichedLinkedObject}}
71+
72+
{{#if enrichedLinkedObject}}
6573
<div class="preview-footer">
6674
<div class="preview-link-label">Linked Reference:</div>
6775
<div class="preview-link">

0 commit comments

Comments
 (0)