feat: add annotation tool settings menus

This commit is contained in:
2026-07-08 16:20:51 +08:00
parent 7b290d9300
commit 18a9f53062
6 changed files with 587 additions and 149 deletions
+1
View File
@@ -82,6 +82,7 @@ interface OverlayAnnotation {
color: string
points: Array<{ x: number; y: number }>
text?: string
strokeWidth?: number
fontSize?: number
}
+230 -65
View File
@@ -33,6 +33,7 @@ interface Annotation {
color: string
points: Point[]
text?: string
strokeWidth?: number
fontSize?: number
}
@@ -65,11 +66,13 @@ const annotations = ref<Annotation[]>([])
const draftAnnotation = ref<Annotation | null>(null)
const activeTool = ref<Tool>('pen')
const activeColor = ref('#ef4444')
const paletteOpen = ref(false)
const activeStrokeWidth = ref(3)
const activeFontSize = ref(20)
const textDraft = ref<{
point: Point
value: string
color: string
fontSize: number
index: number | null
} | null>(null)
const textInputRef = ref<HTMLInputElement | null>(null)
@@ -90,19 +93,18 @@ const startRect = ref<Rect | null>(null)
const textDragStartPoint = ref<Point | null>(null)
const textDragOriginalPoint = ref<Point | null>(null)
const TEXT_FONT_SIZE = 20
const DEFAULT_TEXT_FONT_SIZE = 20
const STROKE_WIDTHS = [2, 4, 6]
const FONT_SIZES = [16, 20, 28, 36]
const colors = [
'#ef4444',
'#f97316',
'#facc15',
'#22c55e',
'#06b6d4',
'#3b82f6',
'#8b5cf6',
'#ec4899',
'#ffffff',
'#111827',
'#9ca3af',
'#ffffff',
]
const maskPath = computed(() => {
@@ -135,10 +137,32 @@ const sizeLabel = computed(() => {
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
})
const MARK_TOOLBAR_W = 222
const MARK_TOOLBAR_W = 178
const ACTION_TOOLBAR_W = 216
const TOOLBAR_GROUP_GAP = 8
const toolOrder: Tool[] = ['pen', 'rect', 'ellipse', 'text']
const toolSettingsPos = computed(() => {
if (!leftToolbarPos.value || !rect.value || !activeTool.value) return null
const menuW = activeTool.value === 'text' ? 462 : 398
const menuH = 58
const buttonIndex = toolOrder.indexOf(activeTool.value)
const buttonCenter = 4 + buttonIndex * 34 + 14
let x = leftToolbarPos.value.x
let y = leftToolbarPos.value.y + 44
if (y + menuH > props.height) {
y = leftToolbarPos.value.y - menuH - 8
}
x = clamp(x, 8, Math.max(8, props.width - menuW - 8))
return {
x,
y,
w: menuW,
arrowX: clamp(leftToolbarPos.value.x + buttonCenter - x, 18, menuW - 18),
}
})
const rightToolbarPos = computed(() => {
if (!rect.value) return null
return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
@@ -226,12 +250,12 @@ function insideRect(p: Point, r: Rect | null) {
let measureCanvas: HTMLCanvasElement | null = null
function textFont(fontSize = TEXT_FONT_SIZE) {
function textFont(fontSize = DEFAULT_TEXT_FONT_SIZE) {
return `600 ${fontSize}px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif`
}
function textSize(annotation: Pick<Annotation, 'text' | 'fontSize'>) {
const fontSize = annotation.fontSize || TEXT_FONT_SIZE
const fontSize = annotation.fontSize || DEFAULT_TEXT_FONT_SIZE
const lines = (annotation.text || ' ').split('\n')
if (typeof document === 'undefined') {
return {
@@ -254,6 +278,18 @@ function textSize(annotation: Pick<Annotation, 'text' | 'fontSize'>) {
}
}
function textEditorSize(draft: { value: string; fontSize: number }) {
const size = textSize({
text: draft.value || ' ',
fontSize: draft.fontSize,
})
return {
width: Math.max(180, Math.min(420, size.w + 28)),
height: Math.max(30, Math.ceil(draft.fontSize * 1.6)),
lineHeight: Math.ceil(draft.fontSize * 1.25),
}
}
function textRenderBox(annotation: Annotation) {
const point = annotation.points[0] || { x: 0, y: 0 }
const size = textSize(annotation)
@@ -319,7 +355,6 @@ function hitHandle(p: Point): ResizeHandle | null {
function onMouseDown(e: MouseEvent) {
if (e.button !== 0) return
commitTextDraft()
paletteOpen.value = false
textDragStartPoint.value = null
textDragOriginalPoint.value = null
const p = pointFromEvent(e)
@@ -348,12 +383,14 @@ function onSelectionMouseDown(e: MouseEvent) {
if (e.button !== 0 || !rect.value) return
e.stopPropagation()
commitTextDraft()
paletteOpen.value = false
const p = pointFromEvent(e)
const hitTextIndex = textAnnotationIndexAtPoint(p)
if (hitTextIndex !== null) {
selectedTextIndex.value = hitTextIndex
const annotation = annotations.value[hitTextIndex]
activeTool.value = 'text'
activeColor.value = annotation.color
activeFontSize.value = annotation.fontSize || DEFAULT_TEXT_FONT_SIZE
if (e.detail >= 2) {
beginTextAnnotation(annotation.points[0], hitTextIndex)
return
@@ -386,6 +423,7 @@ function onSelectionMouseDown(e: MouseEvent) {
draftAnnotation.value = {
tool: activeTool.value,
color: activeColor.value,
strokeWidth: activeStrokeWidth.value,
points: [local],
}
}
@@ -479,7 +517,38 @@ function selectTool(tool: Tool) {
function chooseColor(color: string) {
activeColor.value = color
paletteOpen.value = false
if (textDraft.value) {
textDraft.value.color = color
} else if (
activeTool.value === 'text' &&
selectedTextIndex.value !== null &&
annotations.value[selectedTextIndex.value]?.tool === 'text'
) {
annotations.value[selectedTextIndex.value].color = color
}
}
function chooseStrokeWidth(width: number) {
activeStrokeWidth.value = width
}
function chooseFontSize(size: number) {
activeFontSize.value = size
if (textDraft.value) {
textDraft.value.fontSize = size
textDraft.value.point = clampTextLocalPoint(textDraft.value.point, {
text: textDraft.value.value,
fontSize: size,
})
} else if (
activeTool.value === 'text' &&
selectedTextIndex.value !== null &&
annotations.value[selectedTextIndex.value]?.tool === 'text'
) {
const annotation = annotations.value[selectedTextIndex.value]
annotation.fontSize = size
annotation.points[0] = clampTextLocalPoint(annotation.points[0], annotation)
}
}
function onConfirm() {
@@ -538,7 +607,9 @@ function onKeydown(e: KeyboardEvent) {
}
function undoAnnotation() {
if (!textDraft.value && annotations.value.length === 0) return
cancelTextDraft()
if (annotations.value.length === 0) return
annotations.value.pop()
if (
selectedTextIndex.value !== null &&
@@ -561,10 +632,16 @@ function beginTextAnnotation(point: Point, index: number | null = null) {
draftAnnotation.value = null
const existing = index !== null ? annotations.value[index] : null
const color = existing?.color || activeColor.value
const fontSize = existing?.fontSize || activeFontSize.value
if (existing) {
activeColor.value = color
activeFontSize.value = fontSize
}
textDraft.value = {
point: clampTextLocalPoint(point, existing || { text: '', fontSize: TEXT_FONT_SIZE }),
point: clampTextLocalPoint(point, existing || { text: '', fontSize }),
value: existing?.text || '',
color,
fontSize,
index,
}
void nextTick(() => {
@@ -581,10 +658,10 @@ function commitTextDraft() {
const target = annotations.value[draft.index]
if (target?.tool === 'text') {
if (text !== '') {
target.points = [clampTextLocalPoint(draft.point, { text, fontSize: target.fontSize || TEXT_FONT_SIZE })]
target.points = [clampTextLocalPoint(draft.point, { text, fontSize: draft.fontSize })]
target.text = text
target.color = draft.color
target.fontSize = target.fontSize || TEXT_FONT_SIZE
target.fontSize = draft.fontSize
selectedTextIndex.value = draft.index
} else {
annotations.value.splice(draft.index, 1)
@@ -592,13 +669,13 @@ function commitTextDraft() {
}
}
} else if (text !== '') {
const point = clampTextLocalPoint(draft.point, { text, fontSize: TEXT_FONT_SIZE })
const point = clampTextLocalPoint(draft.point, { text, fontSize: draft.fontSize })
annotations.value.push({
tool: 'text',
color: draft.color,
points: [point],
text,
fontSize: TEXT_FONT_SIZE,
fontSize: draft.fontSize,
})
selectedTextIndex.value = annotations.value.length - 1
}
@@ -660,7 +737,7 @@ onUnmounted(() => {
v-if="annotation.tool === 'pen'"
:points="annotation.points.map((p) => `${p.x},${p.y}`).join(' ')"
:stroke="annotation.color"
stroke-width="3"
:stroke-width="annotation.strokeWidth || 3"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
@@ -672,7 +749,7 @@ onUnmounted(() => {
:width="Math.abs(annotation.points[1].x - annotation.points[0].x)"
:height="Math.abs(annotation.points[1].y - annotation.points[0].y)"
:stroke="annotation.color"
stroke-width="3"
:stroke-width="annotation.strokeWidth || 3"
fill="none"
/>
<ellipse
@@ -682,7 +759,7 @@ onUnmounted(() => {
:rx="Math.abs(annotation.points[1].x - annotation.points[0].x) / 2"
:ry="Math.abs(annotation.points[1].y - annotation.points[0].y) / 2"
:stroke="annotation.color"
stroke-width="3"
:stroke-width="annotation.strokeWidth || 3"
fill="none"
/>
<template v-else-if="annotation.tool === 'text' && annotation.points.length >= 1">
@@ -699,7 +776,7 @@ onUnmounted(() => {
:x="annotation.points[0].x"
:y="annotation.points[0].y"
:fill="annotation.color"
:font-size="annotation.fontSize || TEXT_FONT_SIZE"
:font-size="annotation.fontSize || DEFAULT_TEXT_FONT_SIZE"
font-weight="600"
dominant-baseline="hanging"
>
@@ -730,6 +807,10 @@ onUnmounted(() => {
left: rect.x + textDraft.point.x + 'px',
top: rect.y + textDraft.point.y + 'px',
color: textDraft.color,
fontSize: textDraft.fontSize + 'px',
width: textEditorSize(textDraft).width + 'px',
height: textEditorSize(textDraft).height + 'px',
lineHeight: textEditorSize(textDraft).lineHeight + 'px',
}"
spellcheck="false"
@mousedown.stop
@@ -813,15 +894,57 @@ onUnmounted(() => {
<path d="M9 19h6" />
</svg>
</button>
<div class="color-wrap">
<button
class="icon-btn color-btn"
title="选择标记颜色"
@click="paletteOpen = !paletteOpen"
class="icon-btn"
:class="{ muted: annotations.length === 0 }"
:aria-disabled="annotations.length === 0"
title="撤销上一处标记"
@click="undoAnnotation"
>
<span :style="{ background: activeColor }" />
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 7H4v5" />
<path d="M4 7c3-3 8-4 12-1 4 3 4 9 0 12-2 1-4 2-7 1" />
</svg>
</button>
<div v-if="paletteOpen" class="palette">
</div>
<div
v-if="toolSettingsPos && rect && rect.w >= 4 && rect.h >= 4"
class="tool-settings-menu"
:style="{
left: toolSettingsPos.x + 'px',
top: toolSettingsPos.y + 'px',
width: toolSettingsPos.w + 'px',
'--arrow-x': toolSettingsPos.arrowX + 'px',
}"
@mousedown.stop
>
<div v-if="activeTool !== 'text'" class="setting-group stroke-group">
<button
v-for="widthValue in STROKE_WIDTHS"
:key="widthValue"
class="stroke-choice"
:class="{ active: activeStrokeWidth === widthValue }"
:title="`${widthValue}px`"
@click="chooseStrokeWidth(widthValue)"
>
<span :style="{ width: widthValue * 4 + 'px', height: widthValue * 4 + 'px' }" />
</button>
</div>
<div v-else class="setting-group font-group">
<button
v-for="size in FONT_SIZES"
:key="size"
class="font-choice"
:class="{ active: activeFontSize === size }"
:title="`${size}px`"
@click="chooseFontSize(size)"
>
{{ size }}
</button>
</div>
<div class="settings-divider" />
<div class="setting-group color-group">
<button
v-for="color in colors"
:key="color"
@@ -833,18 +956,6 @@ onUnmounted(() => {
/>
</div>
</div>
<button
class="icon-btn"
:disabled="annotations.length === 0"
title="撤销上一处标记"
@click="undoAnnotation"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 7H4v5" />
<path d="M4 7c3-3 8-4 12-1 4 3 4 9 0 12-2 1-4 2-7 1" />
</svg>
</button>
</div>
<div
v-if="rightToolbarPos && rect && rect.w >= 4 && rect.h >= 4"
@@ -944,10 +1055,10 @@ onUnmounted(() => {
.text-editor {
position: absolute;
z-index: 6;
box-sizing: border-box;
min-width: 120px;
max-width: 320px;
height: 28px;
padding: 2px 6px;
max-width: 420px;
padding: 0 10px;
border: 1px solid currentColor;
border-radius: 4px;
outline: none;
@@ -1010,7 +1121,7 @@ onUnmounted(() => {
}
.mark-toolbar {
width: 222px;
width: 178px;
}
.action-toolbar {
width: 216px;
@@ -1018,7 +1129,9 @@ onUnmounted(() => {
.icon-btn,
.action-btn,
.swatch {
.swatch,
.stroke-choice,
.font-choice {
font-family: inherit;
}
@@ -1111,14 +1224,14 @@ onUnmounted(() => {
background: transparent;
cursor: pointer;
}
.icon-btn:hover:not(:disabled),
.icon-btn:hover:not(.muted),
.icon-btn.active {
color: #fff;
background: rgba(255, 255, 255, 0.12);
}
.icon-btn:disabled {
.icon-btn.muted {
opacity: 0.35;
cursor: not-allowed;
cursor: default;
}
.icon-btn svg {
width: 18px;
@@ -1130,36 +1243,88 @@ onUnmounted(() => {
stroke-linejoin: round;
}
.color-wrap {
position: relative;
.tool-settings-menu {
position: absolute;
z-index: 5;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
min-height: 42px;
padding: 8px 14px;
color: #1f2937;
background: rgba(255, 255, 255, 0.96);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
cursor: default;
}
.color-btn span {
.tool-settings-menu::before {
content: '';
position: absolute;
left: var(--arrow-x);
top: -8px;
transform: translateX(-50%) rotate(45deg);
width: 16px;
height: 16px;
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
background: rgba(255, 255, 255, 0.96);
border-radius: 3px;
}
.palette {
position: absolute;
left: 0;
bottom: 36px;
.setting-group {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
}
.stroke-choice,
.font-choice {
display: grid;
grid-template-columns: repeat(5, 22px);
gap: 6px;
padding: 8px;
background: rgba(28, 28, 32, 0.96);
border-radius: 8px;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 6px;
color: #1f2937;
background: transparent;
cursor: pointer;
}
.stroke-choice:hover,
.stroke-choice.active,
.font-choice:hover,
.font-choice.active {
color: #2563eb;
background: #eaf1ff;
}
.stroke-choice span {
display: block;
border-radius: 999px;
background: currentColor;
}
.font-choice {
min-width: 40px;
width: auto;
padding: 0 8px;
font-size: 14px;
font-weight: 700;
}
.settings-divider {
position: relative;
z-index: 1;
width: 1px;
height: 26px;
background: #d1d5db;
}
.swatch {
width: 22px;
height: 22px;
border: 1px solid rgba(255, 255, 255, 0.55);
padding: 0;
border: 1px solid rgba(17, 24, 39, 0.18);
border-radius: 4px;
cursor: pointer;
}
.swatch.selected {
outline: 2px solid #fff;
outline: 2px solid #2563eb;
outline-offset: 2px;
}
+2
View File
@@ -19,6 +19,7 @@ export namespace application {
color: string;
points: Point[];
text?: string;
strokeWidth?: number;
fontSize?: number;
static createFrom(source: any = {}) {
@@ -31,6 +32,7 @@ export namespace application {
this.color = source["color"];
this.points = this.convertValues(source["points"], Point);
this.text = source["text"];
this.strokeWidth = source["strokeWidth"];
this.fontSize = source["fontSize"];
}
+6 -1
View File
@@ -26,6 +26,7 @@ type Annotation struct {
Color string `json:"color"`
Points []Point `json:"points"`
Text string `json:"text,omitempty"`
StrokeWidth float64 `json:"strokeWidth,omitempty"`
FontSize float64 `json:"fontSize,omitempty"`
}
@@ -66,7 +67,11 @@ func ApplyAnnotationsWithScale(pngBytes []byte, annotations []Annotation, scaleX
if err != nil {
c = color.RGBA{R: 59, G: 130, B: 246, A: 255}
}
width := int(math.Max(2, math.Round(3*strokeScale)))
strokeWidth := ann.StrokeWidth
if strokeWidth <= 0 {
strokeWidth = 3
}
width := int(math.Max(1, math.Round(strokeWidth*strokeScale)))
switch ann.Tool {
case "pen":
drawPolyline(dst, ann.Points, scaleX, scaleY, width, c)
+31
View File
@@ -140,3 +140,34 @@ func TestApplyAnnotationsWithScaleDrawsTextAtDevicePosition(t *testing.T) {
t.Fatalf("expected text to be drawn near scaled x=100, min red x=%d", minX)
}
}
func TestApplyAnnotationsUsesStrokeWidth(t *testing.T) {
src := image.NewRGBA(image.Rect(0, 0, 80, 80))
draw.Draw(src, src.Bounds(), &image.Uniform{C: color.White}, image.Point{}, draw.Src)
var buf bytes.Buffer
if err := png.Encode(&buf, src); err != nil {
t.Fatalf("encode source: %v", err)
}
out, err := ApplyAnnotations(buf.Bytes(), []Annotation{
{
Tool: "rect",
Color: "#ef4444",
Points: []Point{{X: 20, Y: 20}, {X: 60, Y: 60}},
StrokeWidth: 8,
},
}, 1)
if err != nil {
t.Fatalf("apply annotations: %v", err)
}
img, err := png.Decode(bytes.NewReader(out))
if err != nil {
t.Fatalf("decode output: %v", err)
}
got := color.RGBAModel.Convert(img.At(20, 24)).(color.RGBA)
if got.R < 180 || got.G > 180 || got.B > 180 {
t.Fatalf("expected thick rectangle stroke to cover y=24, got %#v", got)
}
}
+306 -72
View File
@@ -81,6 +81,50 @@ static id nativeOverlayKeyMonitor = nil;
}
@end
@interface SnipToolSettingsView : NSView
@property CGFloat arrowX;
@end
@implementation SnipToolSettingsView
- (BOOL)isFlipped { return YES; }
- (void)drawRect:(NSRect)dirtyRect {
[[NSColor clearColor] setFill];
NSRectFill(dirtyRect);
CGFloat arrowHalf = 8;
CGFloat arrowH = 9;
CGFloat radius = 8;
NSRect body = NSMakeRect(0, arrowH, self.bounds.size.width, self.bounds.size.height - arrowH);
CGFloat arrowX = MAX(18, MIN(_arrowX, self.bounds.size.width - 18));
NSBezierPath *path = [NSBezierPath bezierPath];
[path moveToPoint:NSMakePoint(NSMinX(body) + radius, NSMinY(body))];
[path lineToPoint:NSMakePoint(arrowX - arrowHalf, NSMinY(body))];
[path lineToPoint:NSMakePoint(arrowX, 0)];
[path lineToPoint:NSMakePoint(arrowX + arrowHalf, NSMinY(body))];
[path lineToPoint:NSMakePoint(NSMaxX(body) - radius, NSMinY(body))];
[path curveToPoint:NSMakePoint(NSMaxX(body), NSMinY(body) + radius)
controlPoint1:NSMakePoint(NSMaxX(body) - radius / 2, NSMinY(body))
controlPoint2:NSMakePoint(NSMaxX(body), NSMinY(body) + radius / 2)];
[path lineToPoint:NSMakePoint(NSMaxX(body), NSMaxY(body) - radius)];
[path curveToPoint:NSMakePoint(NSMaxX(body) - radius, NSMaxY(body))
controlPoint1:NSMakePoint(NSMaxX(body), NSMaxY(body) - radius / 2)
controlPoint2:NSMakePoint(NSMaxX(body) - radius / 2, NSMaxY(body))];
[path lineToPoint:NSMakePoint(NSMinX(body) + radius, NSMaxY(body))];
[path curveToPoint:NSMakePoint(NSMinX(body), NSMaxY(body) - radius)
controlPoint1:NSMakePoint(NSMinX(body) + radius / 2, NSMaxY(body))
controlPoint2:NSMakePoint(NSMinX(body), NSMaxY(body) - radius / 2)];
[path lineToPoint:NSMakePoint(NSMinX(body), NSMinY(body) + radius)];
[path curveToPoint:NSMakePoint(NSMinX(body) + radius, NSMinY(body))
controlPoint1:NSMakePoint(NSMinX(body), NSMinY(body) + radius / 2)
controlPoint2:NSMakePoint(NSMinX(body) + radius / 2, NSMinY(body))];
[path closePath];
[[NSColor colorWithCalibratedWhite:1 alpha:0.96] setFill];
[path fill];
}
@end
@interface SnipNativeOverlayView : NSView
@property BOOL hasSelection;
@property BOOL creating;
@@ -94,6 +138,8 @@ static id nativeOverlayKeyMonitor = nil;
@property NSString *resizeHandle;
@property NSString *activeTool;
@property(strong) NSColor *activeColor;
@property CGFloat activeStrokeWidth;
@property CGFloat activeFontSize;
@property(strong) NSMutableArray<NSDictionary *> *annotations;
@property(strong) NSMutableDictionary *draftAnnotation;
@property(strong) NSButton *cancelButton;
@@ -109,9 +155,12 @@ static id nativeOverlayKeyMonitor = nil;
@property(strong) NSButton *rectButton;
@property(strong) NSButton *ellipseButton;
@property(strong) NSButton *textButton;
@property(strong) NSButton *colorButton;
@property(strong) NSButton *undoButton;
@property(strong) NSView *paletteView;
@property(strong) SnipToolSettingsView *toolSettingsView;
@property(strong) NSView *settingsDivider;
@property(strong) NSMutableArray<NSButton *> *strokeSettingButtons;
@property(strong) NSMutableArray<NSButton *> *fontSettingButtons;
@property(strong) NSMutableArray<NSButton *> *colorSettingButtons;
@property(strong) NSView *actionToolbarBg;
@property(strong) NSTextField *textEditor;
@property NSPoint textEditorLocalPoint;
@@ -137,6 +186,9 @@ static id nativeOverlayKeyMonitor = nil;
- (NSInteger)textAnnotationIndexAtPoint:(NSPoint)p;
- (NSRect)textAnnotationRectForItem:(NSDictionary *)item;
- (NSPoint)clampedTextLocalPoint:(NSPoint)localPoint text:(NSString *)text fontSize:(CGFloat)fontSize;
- (void)selectStrokeWidth:(NSButton *)sender;
- (void)selectFontSize:(NSButton *)sender;
- (void)selectToolColor:(NSButton *)sender;
- (BOOL)isEditingText;
- (void)commitTextEditor;
- (void)cancelTextEditor;
@@ -154,6 +206,8 @@ static id nativeOverlayKeyMonitor = nil;
_activeTool = nil;
_activeColor = [NSColor colorWithCalibratedRed:239.0/255.0 green:68.0/255.0 blue:68.0/255.0 alpha:1.0];
_activeStrokeWidth = 3.0;
_activeFontSize = 20.0;
_annotations = [NSMutableArray array];
_textEditorAnnotationIndex = -1;
_selectedTextAnnotationIndex = -1;
@@ -179,9 +233,12 @@ static id nativeOverlayKeyMonitor = nil;
_rectButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectRect)];
_ellipseButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectEllipse)];
_textButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectText)];
_colorButton = [NSButton buttonWithTitle:@"" target:self action:@selector(togglePalette)];
_undoButton = [NSButton buttonWithTitle:@"" target:self action:@selector(undoAnnotation)];
_paletteView = [[NSView alloc] initWithFrame:NSZeroRect];
_toolSettingsView = [[SnipToolSettingsView alloc] initWithFrame:NSZeroRect];
_settingsDivider = [[NSView alloc] initWithFrame:NSZeroRect];
_strokeSettingButtons = [NSMutableArray array];
_fontSettingButtons = [NSMutableArray array];
_colorSettingButtons = [NSMutableArray array];
// Dark rounded background container behind the action icon buttons,
// mirroring the look of `.action-toolbar` in the Vue overlay.
_actionToolbarBg = [[NSView alloc] initWithFrame:NSZeroRect];
@@ -195,10 +252,10 @@ static id nativeOverlayKeyMonitor = nil;
// Add the action toolbar background BEFORE the buttons so it sits
// behind them in the view hierarchy (AppKit z-order = subview order).
[self addSubview:_actionToolbarBg];
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _colorButton, _undoButton, _paletteView, _sizeLabel, _hintLabel]) {
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _undoButton, _toolSettingsView, _sizeLabel, _hintLabel]) {
[self addSubview:view];
}
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _colorButton, _undoButton, _paletteView, _actionToolbarBg]) {
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _undoButton, _toolSettingsView, _actionToolbarBg]) {
[view setHidden:YES];
}
[_sizeLabel setHidden:YES];
@@ -306,11 +363,62 @@ static id nativeOverlayKeyMonitor = nil;
[self styleIconButton:_rectButton image:[self iconFromSVG:@"<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path d='M96 96h832v832H96V96z m32 32v768h768V128H128z' fill='white'/></svg>"]];
[self styleIconButton:_ellipseButton image:[self iconFromSVG:@"<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path d='M512 928c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z m0-32C299.936 896 128 724.064 128 512S299.936 128 512 128s384 171.936 384 384-171.936 384-384 384z' fill='white'/></svg>"]];
[self styleIconButton:_textButton image:[self iconFromSVG:@"<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path d='M224 160h576v96H560v608h-96V256H224V160zM384 864h256v64H384v-64z' fill='white'/></svg>"]];
[self styleIconButton:_colorButton image:nil];
[self styleIconButton:_undoButton image:[self iconFromSVG:@"<svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><g transform='translate(1024 0) scale(-1 1)'><path d='M838.976 288l-169.344-162.56a16 16 0 1 1 22.144-23.04l213.632 204.992-213.312 215.84a16 16 0 0 1-22.784-22.464L847.936 320H454.56c-164.192 0-297.28 128.96-297.28 288s133.088 288 297.28 288H704v32h-242.784C266.88 928 128 784.736 128 608S266.88 288 461.248 288h377.728z' fill='white'/></g></svg>"]];
[_paletteView setWantsLayer:YES];
[[_paletteView layer] setCornerRadius:8];
[[_paletteView layer] setBackgroundColor:[[NSColor colorWithCalibratedWhite:0.11 alpha:0.96] CGColor]];
[_toolSettingsView setWantsLayer:NO];
[_settingsDivider setWantsLayer:YES];
[[_settingsDivider layer] setBackgroundColor:[[NSColor colorWithCalibratedWhite:0.82 alpha:1] CGColor]];
[_toolSettingsView addSubview:_settingsDivider];
for (NSNumber *width in @[@2, @4, @6]) {
NSButton *button = [NSButton buttonWithTitle:@"●" target:self action:@selector(selectStrokeWidth:)];
[button setTag:[width integerValue]];
[button setBordered:NO];
[button setWantsLayer:YES];
[[button layer] setCornerRadius:6];
NSMutableAttributedString *title = [[NSMutableAttributedString alloc] initWithString:@"●"];
[title addAttribute:NSFontAttributeName value:[NSFont systemFontOfSize:8 + [width doubleValue] * 2 weight:NSFontWeightBold] range:NSMakeRange(0, title.length)];
[button setAttributedTitle:title];
[_strokeSettingButtons addObject:button];
[_toolSettingsView addSubview:button];
}
for (NSNumber *size in @[@16, @20, @28, @36]) {
NSButton *button = [NSButton buttonWithTitle:[NSString stringWithFormat:@"%ld", (long)[size integerValue]] target:self action:@selector(selectFontSize:)];
[button setTag:[size integerValue]];
[button setBordered:NO];
[button setWantsLayer:YES];
[[button layer] setCornerRadius:6];
NSMutableAttributedString *title = [[NSMutableAttributedString alloc] initWithString:[button title]];
[title addAttribute:NSForegroundColorAttributeName value:[NSColor colorWithCalibratedWhite:0.12 alpha:1] range:NSMakeRange(0, title.length)];
[title addAttribute:NSFontAttributeName value:[NSFont systemFontOfSize:13 weight:NSFontWeightBold] range:NSMakeRange(0, title.length)];
[button setAttributedTitle:title];
[_fontSettingButtons addObject:button];
[_toolSettingsView addSubview:button];
}
NSArray *colors = @[
[NSColor colorWithCalibratedRed:239.0/255.0 green:68.0/255.0 blue:68.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:250.0/255.0 green:204.0/255.0 blue:21.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:34.0/255.0 green:197.0/255.0 blue:94.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:59.0/255.0 green:130.0/255.0 blue:246.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedWhite:0.0 alpha:1.0],
[NSColor colorWithCalibratedRed:156.0/255.0 green:163.0/255.0 blue:175.0/255.0 alpha:1.0],
[NSColor whiteColor]
];
for (NSUInteger i = 0; i < colors.count; i++) {
NSButton *button = [NSButton buttonWithTitle:@"" target:self action:@selector(selectToolColor:)];
[button setTag:(NSInteger)i];
[button setBordered:NO];
[button setWantsLayer:YES];
[[button layer] setCornerRadius:4];
[[button layer] setBorderWidth:1];
[[button layer] setBorderColor:[[NSColor colorWithCalibratedWhite:0.12 alpha:0.22] CGColor]];
[[button layer] setBackgroundColor:[colors[i] CGColor]];
[_colorSettingButtons addObject:button];
[_toolSettingsView addSubview:button];
}
objc_setAssociatedObject(_toolSettingsView, "snapgoColors", colors, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (void)drawRect:(NSRect)dirtyRect {
@@ -384,6 +492,14 @@ static id nativeOverlayKeyMonitor = nil;
return 20.0;
}
- (CGFloat)strokeWidthForItem:(NSDictionary *)item {
NSNumber *strokeWidth = item[@"strokeWidth"];
if (strokeWidth != nil && [strokeWidth doubleValue] > 0) {
return [strokeWidth doubleValue];
}
return 3.0;
}
- (NSDictionary *)textAttributesWithFontSize:(CGFloat)fontSize color:(NSColor *)color {
return @{
NSFontAttributeName: [NSFont systemFontOfSize:fontSize weight:NSFontWeightSemibold],
@@ -400,6 +516,32 @@ static id nativeOverlayKeyMonitor = nil;
return NSMakeSize(ceil(MAX(1.0, bounds.size.width)), ceil(MAX(fontSize * 1.2, bounds.size.height)));
}
- (NSSize)textEditorSizeForString:(NSString *)text fontSize:(CGFloat)fontSize {
NSSize textSize = [self textSizeForString:text fontSize:fontSize];
return NSMakeSize(MAX(180, MIN(420, textSize.width + 28)), MAX(30, ceil(fontSize * 1.6)));
}
- (NSRect)textEditorFrameForLocalPoint:(NSPoint)localPoint text:(NSString *)text fontSize:(CGFloat)fontSize {
NSSize editorSize = [self textEditorSizeForString:text fontSize:fontSize];
NSPoint clampedLocal = [self clampedTextLocalPoint:localPoint text:text fontSize:fontSize];
NSRect frame = NSMakeRect(_selection.origin.x + clampedLocal.x, _selection.origin.y + clampedLocal.y, editorSize.width, editorSize.height);
CGFloat maxX = self.bounds.size.width - frame.size.width - 8;
CGFloat maxY = self.bounds.size.height - frame.size.height - 8;
frame.origin.x = MAX(8, MIN(frame.origin.x, maxX));
frame.origin.y = MAX(8, MIN(frame.origin.y, maxY));
return frame;
}
- (void)resizeTextEditorForCurrentFont {
if (_textEditor == nil) {
return;
}
NSString *text = [_textEditor stringValue] ?: @"";
NSRect frame = [self textEditorFrameForLocalPoint:_textEditorLocalPoint text:text fontSize:_activeFontSize];
[_textEditor setFrame:frame];
_textEditorLocalPoint = [self localPoint:frame.origin];
}
- (NSRect)textAnnotationRectForItem:(NSDictionary *)item {
if (![item[@"tool"] isEqualToString:@"text"]) {
return NSZeroRect;
@@ -470,8 +612,9 @@ static id nativeOverlayKeyMonitor = nil;
continue;
}
[color setStroke];
CGFloat strokeWidth = [self strokeWidthForItem:item];
NSBezierPath *path = [NSBezierPath bezierPath];
[path setLineWidth:3];
[path setLineWidth:strokeWidth];
[path setLineCapStyle:NSLineCapStyleRound];
[path setLineJoinStyle:NSLineJoinStyleRound];
if ([tool isEqualToString:@"pen"]) {
@@ -492,11 +635,11 @@ static id nativeOverlayKeyMonitor = nil;
fabs(b.y - a.y));
if ([tool isEqualToString:@"rect"]) {
NSBezierPath *rectPath = [NSBezierPath bezierPathWithRect:r];
[rectPath setLineWidth:3];
[rectPath setLineWidth:strokeWidth];
[rectPath stroke];
} else if ([tool isEqualToString:@"ellipse"]) {
NSBezierPath *ellipsePath = [NSBezierPath bezierPathWithOvalInRect:r];
[ellipsePath setLineWidth:3];
[ellipsePath setLineWidth:strokeWidth];
[ellipsePath stroke];
}
}
@@ -596,6 +739,10 @@ static id nativeOverlayKeyMonitor = nil;
NSInteger textIndex = _hasSelection ? [self textAnnotationIndexAtPoint:p] : -1;
if (textIndex >= 0) {
_selectedTextAnnotationIndex = textIndex;
NSDictionary *item = _annotations[(NSUInteger)textIndex];
_activeTool = @"text";
_activeColor = item[@"nsColor"] ?: _activeColor;
_activeFontSize = [self fontSizeForTextItem:item];
_creating = NO;
_moving = NO;
_resizing = NO;
@@ -606,7 +753,6 @@ static id nativeOverlayKeyMonitor = nil;
[self setNeedsDisplay:YES];
return;
}
NSDictionary *item = _annotations[(NSUInteger)textIndex];
NSArray *points = item[@"points"];
if (points.count > 0) {
_draggingTextAnnotation = YES;
@@ -641,6 +787,7 @@ static id nativeOverlayKeyMonitor = nil;
@"tool": _activeTool,
@"color": [self hexForColor:_activeColor],
@"nsColor": _activeColor,
@"strokeWidth": @(_activeStrokeWidth),
@"points": [NSMutableArray arrayWithObject:[NSValue valueWithPoint:local]]
} mutableCopy];
} else if (_hasSelection && NSPointInRect(p, _selection)) {
@@ -772,8 +919,8 @@ static id nativeOverlayKeyMonitor = nil;
[_rectButton setHidden:!visible];
[_ellipseButton setHidden:!visible];
[_textButton setHidden:!visible];
[_colorButton setHidden:!visible];
[_undoButton setHidden:!visible];
[_toolSettingsView setHidden:!visible || _activeTool == nil];
[_sizeLabel setHidden:!visible];
[_hintLabel setHidden:_hasSelection];
@@ -812,18 +959,56 @@ static id nativeOverlayKeyMonitor = nil;
// Mark toolbar sits to the LEFT of the action toolbar (same row) with an
// 8px gap between the two groups, so they never overlap on tiny selections.
CGFloat markW = 202;
CGFloat markW = 178;
CGFloat markGap = 8;
CGFloat markX = MAX(0, x - markGap - markW);
[_penButton setFrame:NSMakeRect(markX + 4, y + 4, 28, 28)];
[_rectButton setFrame:NSMakeRect(markX + 36, y + 4, 28, 28)];
[_ellipseButton setFrame:NSMakeRect(markX + 68, y + 4, 28, 28)];
[_textButton setFrame:NSMakeRect(markX + 100, y + 4, 28, 28)];
[_colorButton setFrame:NSMakeRect(markX + 136, y + 7, 22, 22)];
[_undoButton setFrame:NSMakeRect(markX + 166, y + 4, 28, 28)];
[[_colorButton layer] setBackgroundColor:[_activeColor CGColor]];
[_undoButton setEnabled:_annotations.count > 0];
[_paletteView setFrame:NSMakeRect(markX, MAX(0, y - 78), 150, 70)];
[_rectButton setFrame:NSMakeRect(markX + 38, y + 4, 28, 28)];
[_ellipseButton setFrame:NSMakeRect(markX + 72, y + 4, 28, 28)];
[_textButton setFrame:NSMakeRect(markX + 106, y + 4, 28, 28)];
[_undoButton setFrame:NSMakeRect(markX + 144, y + 4, 28, 28)];
[_undoButton setEnabled:YES];
[[_undoButton layer] setOpacity:_annotations.count > 0 ? 1.0 : 0.35];
if (_activeTool != nil) {
BOOL isText = [_activeTool isEqualToString:@"text"];
CGFloat settingsW = isText ? 462 : 398;
CGFloat settingsH = 58;
CGFloat settingsX = MAX(8, MIN(markX, self.bounds.size.width - settingsW - 8));
CGFloat settingsY = y + toolbarH + 4;
if (settingsY + settingsH > self.bounds.size.height) {
settingsY = y - settingsH - 8;
}
CGFloat activeCenter = markX + 18;
if ([_activeTool isEqualToString:@"rect"]) activeCenter = markX + 52;
if ([_activeTool isEqualToString:@"ellipse"]) activeCenter = markX + 86;
if ([_activeTool isEqualToString:@"text"]) activeCenter = markX + 120;
[_toolSettingsView setFrame:NSMakeRect(settingsX, settingsY, settingsW, settingsH)];
[_toolSettingsView setArrowX:MAX(18, MIN(activeCenter - settingsX, settingsW - 18))];
[_toolSettingsView setNeedsDisplay:YES];
CGFloat contentY = 18;
CGFloat xCursor = 14;
for (NSButton *button in _strokeSettingButtons) {
[button setHidden:isText];
[button setFrame:NSMakeRect(xCursor, contentY, 32, 32)];
xCursor += 42;
}
xCursor = 14;
for (NSButton *button in _fontSettingButtons) {
[button setHidden:!isText];
[button setFrame:NSMakeRect(xCursor, contentY, 40, 32)];
xCursor += 48;
}
CGFloat groupW = isText ? (4 * 40 + 3 * 8) : (3 * 32 + 2 * 10);
CGFloat dividerX = 14 + groupW + 12;
[_settingsDivider setFrame:NSMakeRect(dividerX, contentY + 3, 1, 26)];
CGFloat colorX = dividerX + 18;
for (NSButton *button in _colorSettingButtons) {
[button setFrame:NSMakeRect(colorX, contentY + 5, 22, 22)];
colorX += 34;
}
}
[self updateToolButtonStates];
}
@@ -836,26 +1021,69 @@ static id nativeOverlayKeyMonitor = nil;
: [NSColor clearColor];
[[button layer] setBackgroundColor:[bg CGColor]];
}
[self updateToolSettingsStates];
}
- (void)toggleTool:(NSString *)tool {
_activeTool = [_activeTool isEqualToString:tool] ? nil : tool;
- (void)updateToolSettingsStates {
NSColor *activeBg = [NSColor colorWithCalibratedRed:234.0/255.0 green:241.0/255.0 blue:1.0 alpha:1.0];
NSColor *clear = [NSColor clearColor];
NSColor *activeFg = [NSColor colorWithCalibratedRed:37.0/255.0 green:99.0/255.0 blue:235.0/255.0 alpha:1.0];
NSColor *normalFg = [NSColor colorWithCalibratedWhite:0.12 alpha:1.0];
for (NSButton *button in _strokeSettingButtons) {
BOOL active = fabs((CGFloat)button.tag - _activeStrokeWidth) < 0.1;
[[button layer] setBackgroundColor:[(active ? activeBg : clear) CGColor]];
NSMutableAttributedString *title = [[button attributedTitle] mutableCopy];
if (title.length > 0) {
[title addAttribute:NSForegroundColorAttributeName value:(active ? activeFg : normalFg) range:NSMakeRange(0, title.length)];
[button setAttributedTitle:title];
}
}
for (NSButton *button in _fontSettingButtons) {
BOOL active = fabs((CGFloat)button.tag - _activeFontSize) < 0.1;
[[button layer] setBackgroundColor:[(active ? activeBg : clear) CGColor]];
NSMutableAttributedString *title = [[button attributedTitle] mutableCopy];
if (title.length > 0) {
[title addAttribute:NSForegroundColorAttributeName value:(active ? activeFg : normalFg) range:NSMakeRange(0, title.length)];
[button setAttributedTitle:title];
}
}
NSString *activeHex = [self hexForColor:_activeColor];
NSArray *colors = objc_getAssociatedObject(_toolSettingsView, "snapgoColors");
for (NSUInteger i = 0; i < _colorSettingButtons.count; i++) {
NSButton *button = _colorSettingButtons[i];
NSString *hex = i < colors.count ? [self hexForColor:colors[i]] : @"";
BOOL active = [hex isEqualToString:activeHex];
[[button layer] setBorderWidth:active ? 2 : 1];
[[button layer] setBorderColor:[(active ? activeFg : [NSColor colorWithCalibratedWhite:0.12 alpha:0.22]) CGColor]];
}
}
- (void)selectTool:(NSString *)tool {
_activeTool = tool;
[self syncControls];
}
- (void)selectPen { [self toggleTool:@"pen"]; }
- (void)selectRect { [self toggleTool:@"rect"]; }
- (void)selectEllipse { [self toggleTool:@"ellipse"]; }
- (void)selectText { [self toggleTool:@"text"]; }
- (void)selectPen { [self selectTool:@"pen"]; }
- (void)selectRect { [self selectTool:@"rect"]; }
- (void)selectEllipse { [self selectTool:@"ellipse"]; }
- (void)selectText { [self selectTool:@"text"]; }
- (void)undoAnnotation {
if (_annotations.count == 0 && _textEditor == nil) {
return;
}
[self cancelTextEditor];
if (_annotations.count > 0) {
if (_annotations.count == 0) {
[self syncControls];
[self setNeedsDisplay:YES];
return;
}
[_annotations removeLastObject];
if (_selectedTextAnnotationIndex >= (NSInteger)_annotations.count) {
_selectedTextAnnotationIndex = -1;
}
[self syncControls];
[self setNeedsDisplay:YES];
}
}
- (void)beginTextAnnotationAtPoint:(NSPoint)localPoint {
@@ -875,6 +1103,8 @@ static id nativeOverlayKeyMonitor = nil;
return;
}
NSColor *color = item[@"nsColor"] ?: _activeColor;
_activeColor = color;
_activeFontSize = [self fontSizeForTextItem:item];
[self beginTextEditorAtLocalPoint:[points[0] pointValue]
text:item[@"text"] ?: @""
color:color
@@ -883,19 +1113,17 @@ static id nativeOverlayKeyMonitor = nil;
- (void)beginTextEditorAtLocalPoint:(NSPoint)localPoint text:(NSString *)text color:(NSColor *)color annotationIndex:(NSInteger)index {
[self cancelTextEditor];
CGFloat fontSize = 20.0;
CGFloat fontSize = _activeFontSize;
if (index >= 0 && index < (NSInteger)_annotations.count) {
fontSize = [self fontSizeForTextItem:_annotations[(NSUInteger)index]];
_activeFontSize = fontSize;
}
NSPoint clampedLocal = [self clampedTextLocalPoint:localPoint text:text fontSize:fontSize];
_textEditorLocalPoint = clampedLocal;
_textEditorAnnotationIndex = index;
_textEditorColor = color ?: _activeColor;
NSSize textSize = [self textSizeForString:text fontSize:fontSize];
CGFloat editorWidth = MAX(180, MIN(360, textSize.width + 24));
NSRect frame = NSMakeRect(_selection.origin.x + clampedLocal.x, _selection.origin.y + clampedLocal.y, editorWidth, 30);
CGFloat maxX = self.bounds.size.width - frame.size.width - 8;
CGFloat maxY = self.bounds.size.height - frame.size.height - 8;
frame.origin.x = MAX(8, MIN(frame.origin.x, maxX));
frame.origin.y = MAX(8, MIN(frame.origin.y, maxY));
NSRect frame = [self textEditorFrameForLocalPoint:clampedLocal text:text fontSize:fontSize];
_textEditorLocalPoint = [self localPoint:frame.origin];
_textEditor = [[NSTextField alloc] initWithFrame:frame];
@@ -935,7 +1163,7 @@ static id nativeOverlayKeyMonitor = nil;
item[@"nsColor"] = textColor;
item[@"points"] = [NSMutableArray arrayWithObject:[NSValue valueWithPoint:_textEditorLocalPoint]];
item[@"text"] = text;
item[@"fontSize"] = @20.0;
item[@"fontSize"] = @(_activeFontSize);
_selectedTextAnnotationIndex = _textEditorAnnotationIndex;
} else {
[_annotations removeObjectAtIndex:(NSUInteger)_textEditorAnnotationIndex];
@@ -948,7 +1176,7 @@ static id nativeOverlayKeyMonitor = nil;
@"nsColor": textColor,
@"points": [NSMutableArray arrayWithObject:[NSValue valueWithPoint:_textEditorLocalPoint]],
@"text": text,
@"fontSize": @20.0
@"fontSize": @(_activeFontSize)
} mutableCopy]];
_selectedTextAnnotationIndex = (NSInteger)_annotations.count - 1;
}
@@ -973,40 +1201,44 @@ static id nativeOverlayKeyMonitor = nil;
[self setNeedsDisplay:YES];
}
- (void)togglePalette {
[_paletteView setHidden:![_paletteView isHidden]];
if (![_paletteView isHidden] && _paletteView.subviews.count == 0) {
NSArray *colors = @[
[NSColor colorWithCalibratedRed:239.0/255.0 green:68.0/255.0 blue:68.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:249.0/255.0 green:115.0/255.0 blue:22.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:250.0/255.0 green:204.0/255.0 blue:21.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:34.0/255.0 green:197.0/255.0 blue:94.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:59.0/255.0 green:130.0/255.0 blue:246.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:139.0/255.0 green:92.0/255.0 blue:246.0/255.0 alpha:1.0],
[NSColor colorWithCalibratedRed:236.0/255.0 green:72.0/255.0 blue:153.0/255.0 alpha:1.0],
[NSColor whiteColor],
[NSColor colorWithCalibratedWhite:0.07 alpha:1.0]
];
for (NSUInteger i = 0; i < colors.count; i++) {
NSButton *button = [NSButton buttonWithTitle:@"" target:self action:@selector(selectPaletteColor:)];
[button setBordered:NO];
[button setWantsLayer:YES];
[[button layer] setCornerRadius:4];
[[button layer] setBackgroundColor:[colors[i] CGColor]];
[button setTag:(NSInteger)i];
[button setFrame:NSMakeRect(8 + (i % 5) * 28, 38 - (i / 5) * 28, 22, 22)];
[_paletteView addSubview:button];
}
objc_setAssociatedObject(_paletteView, "snapgoColors", colors, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (void)selectStrokeWidth:(NSButton *)sender {
_activeStrokeWidth = MAX(1.0, (CGFloat)sender.tag);
[self updateToolSettingsStates];
}
- (void)selectPaletteColor:(NSButton *)sender {
NSArray *colors = objc_getAssociatedObject(_paletteView, "snapgoColors");
- (void)selectFontSize:(NSButton *)sender {
_activeFontSize = MAX(8.0, (CGFloat)sender.tag);
if (_textEditor != nil) {
[_textEditor setFont:[NSFont systemFontOfSize:_activeFontSize weight:NSFontWeightSemibold]];
[self resizeTextEditorForCurrentFont];
} else if ([_activeTool isEqualToString:@"text"] && _selectedTextAnnotationIndex >= 0 && _selectedTextAnnotationIndex < (NSInteger)_annotations.count) {
NSMutableDictionary *item = (NSMutableDictionary *)_annotations[(NSUInteger)_selectedTextAnnotationIndex];
item[@"fontSize"] = @(_activeFontSize);
NSMutableArray *points = (NSMutableArray *)item[@"points"];
if (points.count > 0) {
NSString *text = item[@"text"] ?: @"";
NSPoint p = [points[0] pointValue];
points[0] = [NSValue valueWithPoint:[self clampedTextLocalPoint:p text:text fontSize:_activeFontSize]];
}
[self setNeedsDisplay:YES];
}
[self syncControls];
}
- (void)selectToolColor:(NSButton *)sender {
NSArray *colors = objc_getAssociatedObject(_toolSettingsView, "snapgoColors");
if (sender.tag >= 0 && sender.tag < (NSInteger)colors.count) {
_activeColor = colors[(NSUInteger)sender.tag];
[_paletteView setHidden:YES];
[self syncControls];
if (_textEditor != nil) {
_textEditorColor = _activeColor;
[_textEditor setTextColor:_activeColor];
} else if ([_activeTool isEqualToString:@"text"] && _selectedTextAnnotationIndex >= 0 && _selectedTextAnnotationIndex < (NSInteger)_annotations.count) {
NSMutableDictionary *item = (NSMutableDictionary *)_annotations[(NSUInteger)_selectedTextAnnotationIndex];
item[@"color"] = [self hexForColor:_activeColor];
item[@"nsColor"] = _activeColor;
[self setNeedsDisplay:YES];
}
[self updateToolSettingsStates];
}
}
@@ -1024,6 +1256,8 @@ static id nativeOverlayKeyMonitor = nil;
if (text.length > 0) {
entry[@"text"] = text;
entry[@"fontSize"] = item[@"fontSize"] ?: @20.0;
} else {
entry[@"strokeWidth"] = item[@"strokeWidth"] ?: @3.0;
}
[payload addObject:entry];
}