Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| baec01610c |
@@ -3,12 +3,10 @@
|
|||||||
package main
|
package main
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"bytes"
|
|
||||||
"context"
|
"context"
|
||||||
"encoding/json"
|
"encoding/json"
|
||||||
"fmt"
|
"fmt"
|
||||||
"image"
|
"image"
|
||||||
"image/png"
|
|
||||||
"log/slog"
|
"log/slog"
|
||||||
"os"
|
"os"
|
||||||
"path/filepath"
|
"path/filepath"
|
||||||
@@ -564,8 +562,7 @@ func (a *App) captureSelectedPNG(result CaptureResult, pc *pendingCapture) ([]by
|
|||||||
return nil, err
|
return nil, err
|
||||||
}
|
}
|
||||||
if len(result.Annotations) > 0 {
|
if len(result.Annotations) > 0 {
|
||||||
scaleX, scaleY := annotationScalesForCapture(cropped, rect, pc.Display.Scale)
|
cropped, err = application.ApplyAnnotations(cropped, result.Annotations, pc.Display.Scale)
|
||||||
cropped, err = application.ApplyAnnotationsWithScale(cropped, result.Annotations, scaleX, scaleY)
|
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return nil, err
|
return nil, err
|
||||||
}
|
}
|
||||||
@@ -573,33 +570,6 @@ func (a *App) captureSelectedPNG(result CaptureResult, pc *pendingCapture) ([]by
|
|||||||
return cropped, nil
|
return cropped, nil
|
||||||
}
|
}
|
||||||
|
|
||||||
func annotationScalesForCapture(pngBytes []byte, rect RegionRect, fallback float64) (float64, float64) {
|
|
||||||
if fallback <= 0 {
|
|
||||||
fallback = 1
|
|
||||||
}
|
|
||||||
scaleX := fallback
|
|
||||||
scaleY := fallback
|
|
||||||
|
|
||||||
cfg, err := png.DecodeConfig(bytes.NewReader(pngBytes))
|
|
||||||
if err != nil {
|
|
||||||
return scaleX, scaleY
|
|
||||||
}
|
|
||||||
if rect.W > 0 && cfg.Width > 0 {
|
|
||||||
scaleX = saneAnnotationScale(float64(cfg.Width)/float64(rect.W), fallback)
|
|
||||||
}
|
|
||||||
if rect.H > 0 && cfg.Height > 0 {
|
|
||||||
scaleY = saneAnnotationScale(float64(cfg.Height)/float64(rect.H), fallback)
|
|
||||||
}
|
|
||||||
return scaleX, scaleY
|
|
||||||
}
|
|
||||||
|
|
||||||
func saneAnnotationScale(scale, fallback float64) float64 {
|
|
||||||
if scale >= 0.25 && scale <= 8 {
|
|
||||||
return scale
|
|
||||||
}
|
|
||||||
return fallback
|
|
||||||
}
|
|
||||||
|
|
||||||
func (a *App) chooseSaveDirectory() (string, error) {
|
func (a *App) chooseSaveDirectory() (string, error) {
|
||||||
return wruntime.OpenDirectoryDialog(a.ctx, wruntime.OpenDialogOptions{
|
return wruntime.OpenDirectoryDialog(a.ctx, wruntime.OpenDialogOptions{
|
||||||
Title: "Save screenshot to folder",
|
Title: "Save screenshot to folder",
|
||||||
|
|||||||
+78
-25
@@ -79,25 +79,6 @@ interface OverlayPayload {
|
|||||||
}
|
}
|
||||||
const overlayPayload = ref<OverlayPayload | null>(null)
|
const overlayPayload = ref<OverlayPayload | null>(null)
|
||||||
|
|
||||||
interface OverlayAnnotation {
|
|
||||||
tool: string
|
|
||||||
color: string
|
|
||||||
points: Array<{ x: number; y: number }>
|
|
||||||
text?: string
|
|
||||||
strokeWidth?: number
|
|
||||||
fontSize?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OverlayResult {
|
|
||||||
rect: {
|
|
||||||
x: number
|
|
||||||
y: number
|
|
||||||
w: number
|
|
||||||
h: number
|
|
||||||
}
|
|
||||||
annotations: OverlayAnnotation[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const capturing = ref(false)
|
const capturing = ref(false)
|
||||||
|
|
||||||
const toast = ref<{ kind: 'success' | 'error'; text: string } | null>(null)
|
const toast = ref<{ kind: 'success' | 'error'; text: string } | null>(null)
|
||||||
@@ -142,7 +123,19 @@ async function retryHotkey() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onOverlayConfirm(rect: OverlayResult) {
|
async function onOverlayConfirm(rect: {
|
||||||
|
rect: {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
w: number
|
||||||
|
h: number
|
||||||
|
}
|
||||||
|
annotations: Array<{
|
||||||
|
tool: string
|
||||||
|
color: string
|
||||||
|
points: Array<{ x: number; y: number }>
|
||||||
|
}>
|
||||||
|
}) {
|
||||||
// Optimistically swap back so the window does not visually lag the
|
// Optimistically swap back so the window does not visually lag the
|
||||||
// Go-side hide. If upload fails, the toast surfaces the reason.
|
// Go-side hide. If upload fails, the toast surfaces the reason.
|
||||||
mode.value = 'settings'
|
mode.value = 'settings'
|
||||||
@@ -154,7 +147,19 @@ async function onOverlayConfirm(rect: OverlayResult) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onOverlayCopy(rect: OverlayResult) {
|
async function onOverlayCopy(rect: {
|
||||||
|
rect: {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
w: number
|
||||||
|
h: number
|
||||||
|
}
|
||||||
|
annotations: Array<{
|
||||||
|
tool: string
|
||||||
|
color: string
|
||||||
|
points: Array<{ x: number; y: number }>
|
||||||
|
}>
|
||||||
|
}) {
|
||||||
mode.value = 'settings'
|
mode.value = 'settings'
|
||||||
overlayPayload.value = null
|
overlayPayload.value = null
|
||||||
try {
|
try {
|
||||||
@@ -164,7 +169,19 @@ async function onOverlayCopy(rect: OverlayResult) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onOverlaySave(rect: OverlayResult) {
|
async function onOverlaySave(rect: {
|
||||||
|
rect: {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
w: number
|
||||||
|
h: number
|
||||||
|
}
|
||||||
|
annotations: Array<{
|
||||||
|
tool: string
|
||||||
|
color: string
|
||||||
|
points: Array<{ x: number; y: number }>
|
||||||
|
}>
|
||||||
|
}) {
|
||||||
mode.value = 'settings'
|
mode.value = 'settings'
|
||||||
overlayPayload.value = null
|
overlayPayload.value = null
|
||||||
try {
|
try {
|
||||||
@@ -174,7 +191,19 @@ async function onOverlaySave(rect: OverlayResult) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onOverlaySaveRemote(rect: OverlayResult) {
|
async function onOverlaySaveRemote(rect: {
|
||||||
|
rect: {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
w: number
|
||||||
|
h: number
|
||||||
|
}
|
||||||
|
annotations: Array<{
|
||||||
|
tool: string
|
||||||
|
color: string
|
||||||
|
points: Array<{ x: number; y: number }>
|
||||||
|
}>
|
||||||
|
}) {
|
||||||
mode.value = 'settings'
|
mode.value = 'settings'
|
||||||
overlayPayload.value = null
|
overlayPayload.value = null
|
||||||
try {
|
try {
|
||||||
@@ -184,7 +213,19 @@ async function onOverlaySaveRemote(rect: OverlayResult) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onOverlaySummarize(rect: OverlayResult) {
|
async function onOverlaySummarize(rect: {
|
||||||
|
rect: {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
w: number
|
||||||
|
h: number
|
||||||
|
}
|
||||||
|
annotations: Array<{
|
||||||
|
tool: string
|
||||||
|
color: string
|
||||||
|
points: Array<{ x: number; y: number }>
|
||||||
|
}>
|
||||||
|
}) {
|
||||||
mode.value = 'settings'
|
mode.value = 'settings'
|
||||||
overlayPayload.value = null
|
overlayPayload.value = null
|
||||||
try {
|
try {
|
||||||
@@ -194,7 +235,19 @@ async function onOverlaySummarize(rect: OverlayResult) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onOverlayOCR(rect: OverlayResult) {
|
async function onOverlayOCR(rect: {
|
||||||
|
rect: {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
w: number
|
||||||
|
h: number
|
||||||
|
}
|
||||||
|
annotations: Array<{
|
||||||
|
tool: string
|
||||||
|
color: string
|
||||||
|
points: Array<{ x: number; y: number }>
|
||||||
|
}>
|
||||||
|
}) {
|
||||||
mode.value = 'settings'
|
mode.value = 'settings'
|
||||||
overlayPayload.value = null
|
overlayPayload.value = null
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -33,8 +33,6 @@ interface Annotation {
|
|||||||
color: string
|
color: string
|
||||||
points: Point[]
|
points: Point[]
|
||||||
text?: string
|
text?: string
|
||||||
strokeWidth?: number
|
|
||||||
fontSize?: number
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -70,45 +68,28 @@ const annotations = ref<Annotation[]>([])
|
|||||||
const draftAnnotation = ref<Annotation | null>(null)
|
const draftAnnotation = ref<Annotation | null>(null)
|
||||||
const activeTool = ref<Tool>('pen')
|
const activeTool = ref<Tool>('pen')
|
||||||
const activeColor = ref('#ef4444')
|
const activeColor = ref('#ef4444')
|
||||||
const activeStrokeWidth = ref(3)
|
const paletteOpen = ref(false)
|
||||||
const activeFontSize = ref(20)
|
const textDraft = ref<{ point: Point; value: string } | null>(null)
|
||||||
const textDraft = ref<{
|
|
||||||
point: Point
|
|
||||||
value: string
|
|
||||||
color: string
|
|
||||||
fontSize: number
|
|
||||||
index: number | null
|
|
||||||
} | null>(null)
|
|
||||||
const textInputRef = ref<HTMLInputElement | null>(null)
|
const textInputRef = ref<HTMLInputElement | null>(null)
|
||||||
const selectedTextIndex = ref<number | null>(null)
|
|
||||||
|
|
||||||
type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'
|
type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'
|
||||||
type DragMode =
|
type DragMode = 'idle' | 'creating' | 'moving' | 'resizing' | 'annotating'
|
||||||
| 'idle'
|
|
||||||
| 'creating'
|
|
||||||
| 'moving'
|
|
||||||
| 'resizing'
|
|
||||||
| 'annotating'
|
|
||||||
| 'moving-text'
|
|
||||||
const dragMode = ref<DragMode>('idle')
|
const dragMode = ref<DragMode>('idle')
|
||||||
const resizeHandle = ref<ResizeHandle | null>(null)
|
const resizeHandle = ref<ResizeHandle | null>(null)
|
||||||
const dragAnchor = ref({ x: 0, y: 0 })
|
const dragAnchor = ref({ x: 0, y: 0 })
|
||||||
const startRect = ref<Rect | null>(null)
|
const startRect = ref<Rect | null>(null)
|
||||||
const textDragStartPoint = ref<Point | null>(null)
|
|
||||||
const textDragOriginalPoint = ref<Point | null>(null)
|
|
||||||
|
|
||||||
const DEFAULT_TEXT_FONT_SIZE = 20
|
|
||||||
const STROKE_WIDTHS = [2, 4, 6]
|
|
||||||
const FONT_SIZES = [16, 20, 28, 36]
|
|
||||||
|
|
||||||
const colors = [
|
const colors = [
|
||||||
'#ef4444',
|
'#ef4444',
|
||||||
|
'#f97316',
|
||||||
'#facc15',
|
'#facc15',
|
||||||
'#22c55e',
|
'#22c55e',
|
||||||
|
'#06b6d4',
|
||||||
'#3b82f6',
|
'#3b82f6',
|
||||||
'#111827',
|
'#8b5cf6',
|
||||||
'#9ca3af',
|
'#ec4899',
|
||||||
'#ffffff',
|
'#ffffff',
|
||||||
|
'#111827',
|
||||||
]
|
]
|
||||||
|
|
||||||
const maskPath = computed(() => {
|
const maskPath = computed(() => {
|
||||||
@@ -141,32 +122,10 @@ const sizeLabel = computed(() => {
|
|||||||
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
|
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
|
||||||
})
|
})
|
||||||
|
|
||||||
const MARK_TOOLBAR_W = 178
|
const MARK_TOOLBAR_W = 222
|
||||||
const ACTION_TOOLBAR_W = 252
|
const ACTION_TOOLBAR_W = 252
|
||||||
const TOOLBAR_GROUP_GAP = 8
|
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(() => {
|
const rightToolbarPos = computed(() => {
|
||||||
if (!rect.value) return null
|
if (!rect.value) return null
|
||||||
return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
|
return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
|
||||||
@@ -252,89 +211,6 @@ function insideRect(p: Point, r: Rect | null) {
|
|||||||
return p.x >= r.x && p.x <= r.x + r.w && p.y >= r.y && p.y <= r.y + r.h
|
return p.x >= r.x && p.x <= r.x + r.w && p.y >= r.y && p.y <= r.y + r.h
|
||||||
}
|
}
|
||||||
|
|
||||||
let measureCanvas: HTMLCanvasElement | null = null
|
|
||||||
|
|
||||||
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 || DEFAULT_TEXT_FONT_SIZE
|
|
||||||
const lines = (annotation.text || ' ').split('\n')
|
|
||||||
if (typeof document === 'undefined') {
|
|
||||||
return {
|
|
||||||
w: Math.max(1, ...lines.map((line) => line.length * fontSize)),
|
|
||||||
h: Math.max(fontSize * 1.2, lines.length * fontSize * 1.2),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
measureCanvas ||= document.createElement('canvas')
|
|
||||||
const ctx = measureCanvas.getContext('2d')
|
|
||||||
if (!ctx) {
|
|
||||||
return {
|
|
||||||
w: Math.max(1, ...lines.map((line) => line.length * fontSize)),
|
|
||||||
h: Math.max(fontSize * 1.2, lines.length * fontSize * 1.2),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ctx.font = textFont(fontSize)
|
|
||||||
return {
|
|
||||||
w: Math.ceil(Math.max(1, ...lines.map((line) => ctx.measureText(line || ' ').width))),
|
|
||||||
h: Math.ceil(Math.max(fontSize * 1.2, lines.length * fontSize * 1.2)),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
return {
|
|
||||||
x: point.x - 4,
|
|
||||||
y: point.y - 3,
|
|
||||||
w: size.w + 8,
|
|
||||||
h: size.h + 6,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function textAnnotationIndexAtPoint(p: Point) {
|
|
||||||
if (!rect.value) return null
|
|
||||||
for (let i = annotations.value.length - 1; i >= 0; i--) {
|
|
||||||
const annotation = annotations.value[i]
|
|
||||||
if (annotation.tool !== 'text' || annotation.points.length === 0) continue
|
|
||||||
const point = annotation.points[0]
|
|
||||||
const size = textSize(annotation)
|
|
||||||
const x = rect.value.x + point.x
|
|
||||||
const y = rect.value.y + point.y
|
|
||||||
if (
|
|
||||||
p.x >= x - 6 &&
|
|
||||||
p.x <= x + size.w + 6 &&
|
|
||||||
p.y >= y - 6 &&
|
|
||||||
p.y <= y + size.h + 6
|
|
||||||
) {
|
|
||||||
return i
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function clampTextLocalPoint(point: Point, annotation: Pick<Annotation, 'text' | 'fontSize'>) {
|
|
||||||
if (!rect.value) return point
|
|
||||||
const size = textSize(annotation)
|
|
||||||
return {
|
|
||||||
x: clamp(point.x, 0, Math.max(0, rect.value.w - size.w)),
|
|
||||||
y: clamp(point.y, 0, Math.max(0, rect.value.h - size.h)),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hitHandle(p: Point): ResizeHandle | null {
|
function hitHandle(p: Point): ResizeHandle | null {
|
||||||
if (!rect.value) return null
|
if (!rect.value) return null
|
||||||
const tolerance = 9
|
const tolerance = 9
|
||||||
@@ -359,8 +235,7 @@ function hitHandle(p: Point): ResizeHandle | null {
|
|||||||
function onMouseDown(e: MouseEvent) {
|
function onMouseDown(e: MouseEvent) {
|
||||||
if (e.button !== 0) return
|
if (e.button !== 0) return
|
||||||
commitTextDraft()
|
commitTextDraft()
|
||||||
textDragStartPoint.value = null
|
paletteOpen.value = false
|
||||||
textDragOriginalPoint.value = null
|
|
||||||
const p = pointFromEvent(e)
|
const p = pointFromEvent(e)
|
||||||
const handle = hitHandle(p)
|
const handle = hitHandle(p)
|
||||||
if (handle && rect.value) {
|
if (handle && rect.value) {
|
||||||
@@ -379,34 +254,15 @@ function onMouseDown(e: MouseEvent) {
|
|||||||
dragAnchor.value = p
|
dragAnchor.value = p
|
||||||
rect.value = { x: p.x, y: p.y, w: 0, h: 0 }
|
rect.value = { x: p.x, y: p.y, w: 0, h: 0 }
|
||||||
annotations.value = []
|
annotations.value = []
|
||||||
selectedTextIndex.value = null
|
|
||||||
draftAnnotation.value = null
|
draftAnnotation.value = null
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSelectionMouseDown(e: MouseEvent) {
|
function onSelectionMouseDown(e: MouseEvent) {
|
||||||
if (e.button !== 0 || !rect.value) return
|
if (e.button !== 0 || !rect.value) return
|
||||||
e.stopPropagation()
|
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
|
|
||||||
}
|
|
||||||
dragMode.value = 'moving-text'
|
|
||||||
textDragStartPoint.value = localPoint(p)
|
|
||||||
textDragOriginalPoint.value = { ...annotation.points[0] }
|
|
||||||
return
|
|
||||||
}
|
|
||||||
selectedTextIndex.value = null
|
|
||||||
if (activeTool.value === 'text') {
|
if (activeTool.value === 'text') {
|
||||||
beginTextAnnotation(localPoint(p))
|
beginTextAnnotation(localPoint(pointFromEvent(e)))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (e.detail >= 2) {
|
if (e.detail >= 2) {
|
||||||
@@ -414,6 +270,7 @@ function onSelectionMouseDown(e: MouseEvent) {
|
|||||||
onCopy()
|
onCopy()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
const p = pointFromEvent(e)
|
||||||
const handle = hitHandle(p)
|
const handle = hitHandle(p)
|
||||||
if (handle) {
|
if (handle) {
|
||||||
dragMode.value = 'resizing'
|
dragMode.value = 'resizing'
|
||||||
@@ -427,7 +284,6 @@ function onSelectionMouseDown(e: MouseEvent) {
|
|||||||
draftAnnotation.value = {
|
draftAnnotation.value = {
|
||||||
tool: activeTool.value,
|
tool: activeTool.value,
|
||||||
color: activeColor.value,
|
color: activeColor.value,
|
||||||
strokeWidth: activeStrokeWidth.value,
|
|
||||||
points: [local],
|
points: [local],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -445,21 +301,6 @@ function onMouseMove(e: MouseEvent) {
|
|||||||
}
|
}
|
||||||
} else if (dragMode.value === 'resizing') {
|
} else if (dragMode.value === 'resizing') {
|
||||||
resizeSelection(p)
|
resizeSelection(p)
|
||||||
} else if (
|
|
||||||
dragMode.value === 'moving-text' &&
|
|
||||||
selectedTextIndex.value !== null &&
|
|
||||||
textDragStartPoint.value &&
|
|
||||||
textDragOriginalPoint.value
|
|
||||||
) {
|
|
||||||
const annotation = annotations.value[selectedTextIndex.value]
|
|
||||||
if (annotation?.tool === 'text') {
|
|
||||||
const local = localPoint(p)
|
|
||||||
const next = {
|
|
||||||
x: textDragOriginalPoint.value.x + local.x - textDragStartPoint.value.x,
|
|
||||||
y: textDragOriginalPoint.value.y + local.y - textDragStartPoint.value.y,
|
|
||||||
}
|
|
||||||
annotation.points[0] = clampTextLocalPoint(next, annotation)
|
|
||||||
}
|
|
||||||
} else if (dragMode.value === 'annotating' && draftAnnotation.value) {
|
} else if (dragMode.value === 'annotating' && draftAnnotation.value) {
|
||||||
if (activeTool.value === 'pen') {
|
if (activeTool.value === 'pen') {
|
||||||
draftAnnotation.value.points.push(localPoint(p))
|
draftAnnotation.value.points.push(localPoint(p))
|
||||||
@@ -487,8 +328,6 @@ function onMouseUp() {
|
|||||||
dragMode.value = 'idle'
|
dragMode.value = 'idle'
|
||||||
resizeHandle.value = null
|
resizeHandle.value = null
|
||||||
startRect.value = null
|
startRect.value = null
|
||||||
textDragStartPoint.value = null
|
|
||||||
textDragOriginalPoint.value = null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function resizeSelection(p: Point) {
|
function resizeSelection(p: Point) {
|
||||||
@@ -521,38 +360,7 @@ function selectTool(tool: Tool) {
|
|||||||
|
|
||||||
function chooseColor(color: string) {
|
function chooseColor(color: string) {
|
||||||
activeColor.value = color
|
activeColor.value = color
|
||||||
if (textDraft.value) {
|
paletteOpen.value = false
|
||||||
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() {
|
function onConfirm() {
|
||||||
@@ -616,16 +424,8 @@ function onKeydown(e: KeyboardEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function undoAnnotation() {
|
function undoAnnotation() {
|
||||||
if (!textDraft.value && annotations.value.length === 0) return
|
|
||||||
cancelTextDraft()
|
cancelTextDraft()
|
||||||
if (annotations.value.length === 0) return
|
|
||||||
annotations.value.pop()
|
annotations.value.pop()
|
||||||
if (
|
|
||||||
selectedTextIndex.value !== null &&
|
|
||||||
selectedTextIndex.value >= annotations.value.length
|
|
||||||
) {
|
|
||||||
selectedTextIndex.value = null
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSinglePointAnnotation() {
|
function removeSinglePointAnnotation() {
|
||||||
@@ -635,24 +435,11 @@ function removeSinglePointAnnotation() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function beginTextAnnotation(point: Point, index: number | null = null) {
|
function beginTextAnnotation(point: Point) {
|
||||||
commitTextDraft()
|
commitTextDraft()
|
||||||
dragMode.value = 'idle'
|
dragMode.value = 'idle'
|
||||||
draftAnnotation.value = null
|
draftAnnotation.value = null
|
||||||
const existing = index !== null ? annotations.value[index] : null
|
textDraft.value = { point, value: '' }
|
||||||
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 }),
|
|
||||||
value: existing?.text || '',
|
|
||||||
color,
|
|
||||||
fontSize,
|
|
||||||
index,
|
|
||||||
}
|
|
||||||
void nextTick(() => {
|
void nextTick(() => {
|
||||||
textInputRef.value?.focus()
|
textInputRef.value?.focus()
|
||||||
textInputRef.value?.select()
|
textInputRef.value?.select()
|
||||||
@@ -662,31 +449,13 @@ function beginTextAnnotation(point: Point, index: number | null = null) {
|
|||||||
function commitTextDraft() {
|
function commitTextDraft() {
|
||||||
if (!textDraft.value) return
|
if (!textDraft.value) return
|
||||||
const text = textDraft.value.value.trim()
|
const text = textDraft.value.value.trim()
|
||||||
const draft = textDraft.value
|
|
||||||
if (draft.index !== null) {
|
|
||||||
const target = annotations.value[draft.index]
|
|
||||||
if (target?.tool === 'text') {
|
|
||||||
if (text !== '') {
|
if (text !== '') {
|
||||||
target.points = [clampTextLocalPoint(draft.point, { text, fontSize: draft.fontSize })]
|
|
||||||
target.text = text
|
|
||||||
target.color = draft.color
|
|
||||||
target.fontSize = draft.fontSize
|
|
||||||
selectedTextIndex.value = draft.index
|
|
||||||
} else {
|
|
||||||
annotations.value.splice(draft.index, 1)
|
|
||||||
selectedTextIndex.value = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (text !== '') {
|
|
||||||
const point = clampTextLocalPoint(draft.point, { text, fontSize: draft.fontSize })
|
|
||||||
annotations.value.push({
|
annotations.value.push({
|
||||||
tool: 'text',
|
tool: 'text',
|
||||||
color: draft.color,
|
color: activeColor.value,
|
||||||
points: [point],
|
points: [textDraft.value.point],
|
||||||
text,
|
text,
|
||||||
fontSize: draft.fontSize,
|
|
||||||
})
|
})
|
||||||
selectedTextIndex.value = annotations.value.length - 1
|
|
||||||
}
|
}
|
||||||
textDraft.value = null
|
textDraft.value = null
|
||||||
}
|
}
|
||||||
@@ -746,7 +515,7 @@ onUnmounted(() => {
|
|||||||
v-if="annotation.tool === 'pen'"
|
v-if="annotation.tool === 'pen'"
|
||||||
:points="annotation.points.map((p) => `${p.x},${p.y}`).join(' ')"
|
:points="annotation.points.map((p) => `${p.x},${p.y}`).join(' ')"
|
||||||
:stroke="annotation.color"
|
:stroke="annotation.color"
|
||||||
:stroke-width="annotation.strokeWidth || 3"
|
stroke-width="3"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -758,7 +527,7 @@ onUnmounted(() => {
|
|||||||
:width="Math.abs(annotation.points[1].x - annotation.points[0].x)"
|
:width="Math.abs(annotation.points[1].x - annotation.points[0].x)"
|
||||||
:height="Math.abs(annotation.points[1].y - annotation.points[0].y)"
|
:height="Math.abs(annotation.points[1].y - annotation.points[0].y)"
|
||||||
:stroke="annotation.color"
|
:stroke="annotation.color"
|
||||||
:stroke-width="annotation.strokeWidth || 3"
|
stroke-width="3"
|
||||||
fill="none"
|
fill="none"
|
||||||
/>
|
/>
|
||||||
<ellipse
|
<ellipse
|
||||||
@@ -768,30 +537,20 @@ onUnmounted(() => {
|
|||||||
:rx="Math.abs(annotation.points[1].x - annotation.points[0].x) / 2"
|
:rx="Math.abs(annotation.points[1].x - annotation.points[0].x) / 2"
|
||||||
:ry="Math.abs(annotation.points[1].y - annotation.points[0].y) / 2"
|
:ry="Math.abs(annotation.points[1].y - annotation.points[0].y) / 2"
|
||||||
:stroke="annotation.color"
|
:stroke="annotation.color"
|
||||||
:stroke-width="annotation.strokeWidth || 3"
|
stroke-width="3"
|
||||||
fill="none"
|
fill="none"
|
||||||
/>
|
/>
|
||||||
<template v-else-if="annotation.tool === 'text' && annotation.points.length >= 1">
|
|
||||||
<rect
|
|
||||||
v-if="selectedTextIndex === index && index < annotations.length"
|
|
||||||
class="text-selection-box"
|
|
||||||
:x="textRenderBox(annotation).x"
|
|
||||||
:y="textRenderBox(annotation).y"
|
|
||||||
:width="textRenderBox(annotation).w"
|
|
||||||
:height="textRenderBox(annotation).h"
|
|
||||||
/>
|
|
||||||
<text
|
<text
|
||||||
class="annotation-text"
|
v-else-if="annotation.tool === 'text' && annotation.points.length >= 1"
|
||||||
:x="annotation.points[0].x"
|
:x="annotation.points[0].x"
|
||||||
:y="annotation.points[0].y"
|
:y="annotation.points[0].y"
|
||||||
:fill="annotation.color"
|
:fill="annotation.color"
|
||||||
:font-size="annotation.fontSize || DEFAULT_TEXT_FONT_SIZE"
|
font-size="20"
|
||||||
font-weight="600"
|
font-weight="600"
|
||||||
dominant-baseline="hanging"
|
dominant-baseline="hanging"
|
||||||
>
|
>
|
||||||
{{ annotation.text }}
|
{{ annotation.text }}
|
||||||
</text>
|
</text>
|
||||||
</template>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
@@ -815,11 +574,7 @@ onUnmounted(() => {
|
|||||||
:style="{
|
:style="{
|
||||||
left: rect.x + textDraft.point.x + 'px',
|
left: rect.x + textDraft.point.x + 'px',
|
||||||
top: rect.y + textDraft.point.y + 'px',
|
top: rect.y + textDraft.point.y + 'px',
|
||||||
color: textDraft.color,
|
color: activeColor,
|
||||||
fontSize: textDraft.fontSize + 'px',
|
|
||||||
width: textEditorSize(textDraft).width + 'px',
|
|
||||||
height: textEditorSize(textDraft).height + 'px',
|
|
||||||
lineHeight: textEditorSize(textDraft).lineHeight + 'px',
|
|
||||||
}"
|
}"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
@mousedown.stop
|
@mousedown.stop
|
||||||
@@ -903,57 +658,15 @@ onUnmounted(() => {
|
|||||||
<path d="M9 19h6" />
|
<path d="M9 19h6" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
<div class="color-wrap">
|
||||||
<button
|
<button
|
||||||
class="icon-btn"
|
class="icon-btn color-btn"
|
||||||
:class="{ muted: annotations.length === 0 }"
|
title="选择标记颜色"
|
||||||
:aria-disabled="annotations.length === 0"
|
@click="paletteOpen = !paletteOpen"
|
||||||
title="撤销上一处标记"
|
|
||||||
@click="undoAnnotation"
|
|
||||||
>
|
>
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
<span :style="{ background: activeColor }" />
|
||||||
<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>
|
</button>
|
||||||
</div>
|
<div v-if="paletteOpen" class="palette">
|
||||||
|
|
||||||
<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
|
<button
|
||||||
v-for="color in colors"
|
v-for="color in colors"
|
||||||
:key="color"
|
:key="color"
|
||||||
@@ -965,6 +678,18 @@ onUnmounted(() => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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
|
<div
|
||||||
v-if="rightToolbarPos && rect && rect.w >= 4 && rect.h >= 4"
|
v-if="rightToolbarPos && rect && rect.w >= 4 && rect.h >= 4"
|
||||||
@@ -1060,17 +785,6 @@ onUnmounted(() => {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.annotation-text {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-selection-box {
|
|
||||||
fill: transparent;
|
|
||||||
stroke: #3b82f6;
|
|
||||||
stroke-width: 1.5;
|
|
||||||
stroke-dasharray: 4 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selection-hit-area {
|
.selection-hit-area {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
@@ -1079,10 +793,10 @@ onUnmounted(() => {
|
|||||||
.text-editor {
|
.text-editor {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
max-width: 420px;
|
max-width: 320px;
|
||||||
padding: 0 10px;
|
height: 28px;
|
||||||
|
padding: 2px 6px;
|
||||||
border: 1px solid currentColor;
|
border: 1px solid currentColor;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@@ -1145,7 +859,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mark-toolbar {
|
.mark-toolbar {
|
||||||
width: 178px;
|
width: 222px;
|
||||||
}
|
}
|
||||||
.action-toolbar {
|
.action-toolbar {
|
||||||
width: 252px;
|
width: 252px;
|
||||||
@@ -1153,9 +867,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.icon-btn,
|
.icon-btn,
|
||||||
.action-btn,
|
.action-btn,
|
||||||
.swatch,
|
.swatch {
|
||||||
.stroke-choice,
|
|
||||||
.font-choice {
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1248,14 +960,14 @@ onUnmounted(() => {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.icon-btn:hover:not(.muted),
|
.icon-btn:hover:not(:disabled),
|
||||||
.icon-btn.active {
|
.icon-btn.active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: rgba(255, 255, 255, 0.12);
|
||||||
}
|
}
|
||||||
.icon-btn.muted {
|
.icon-btn:disabled {
|
||||||
opacity: 0.35;
|
opacity: 0.35;
|
||||||
cursor: default;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
.icon-btn svg {
|
.icon-btn svg {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
@@ -1267,88 +979,36 @@ onUnmounted(() => {
|
|||||||
stroke-linejoin: round;
|
stroke-linejoin: round;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-settings-menu {
|
.color-wrap {
|
||||||
position: absolute;
|
position: relative;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.tool-settings-menu::before {
|
.color-btn span {
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: var(--arrow-x);
|
|
||||||
top: -8px;
|
|
||||||
transform: translateX(-50%) rotate(45deg);
|
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: rgba(255, 255, 255, 0.96);
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
border-radius: 3px;
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
|
||||||
}
|
}
|
||||||
.setting-group {
|
.palette {
|
||||||
position: relative;
|
position: absolute;
|
||||||
z-index: 1;
|
left: 0;
|
||||||
display: flex;
|
bottom: 36px;
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.stroke-choice,
|
|
||||||
.font-choice {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
grid-template-columns: repeat(5, 22px);
|
||||||
width: 32px;
|
gap: 6px;
|
||||||
height: 32px;
|
padding: 8px;
|
||||||
padding: 0;
|
background: rgba(28, 28, 32, 0.96);
|
||||||
border: 0;
|
border-radius: 8px;
|
||||||
border-radius: 6px;
|
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
|
||||||
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 {
|
.swatch {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
padding: 0;
|
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||||
border: 1px solid rgba(17, 24, 39, 0.18);
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.swatch.selected {
|
.swatch.selected {
|
||||||
outline: 2px solid #2563eb;
|
outline: 2px solid #fff;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -19,8 +19,6 @@ export namespace application {
|
|||||||
color: string;
|
color: string;
|
||||||
points: Point[];
|
points: Point[];
|
||||||
text?: string;
|
text?: string;
|
||||||
strokeWidth?: number;
|
|
||||||
fontSize?: number;
|
|
||||||
|
|
||||||
static createFrom(source: any = {}) {
|
static createFrom(source: any = {}) {
|
||||||
return new Annotation(source);
|
return new Annotation(source);
|
||||||
@@ -32,8 +30,6 @@ export namespace application {
|
|||||||
this.color = source["color"];
|
this.color = source["color"];
|
||||||
this.points = this.convertValues(source["points"], Point);
|
this.points = this.convertValues(source["points"], Point);
|
||||||
this.text = source["text"];
|
this.text = source["text"];
|
||||||
this.strokeWidth = source["strokeWidth"];
|
|
||||||
this.fontSize = source["fontSize"];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
convertValues(a: any, classs: any, asMap: boolean = false): any {
|
convertValues(a: any, classs: any, asMap: boolean = false): any {
|
||||||
@@ -349,3 +345,4 @@ export namespace main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -26,8 +26,6 @@ type Annotation struct {
|
|||||||
Color string `json:"color"`
|
Color string `json:"color"`
|
||||||
Points []Point `json:"points"`
|
Points []Point `json:"points"`
|
||||||
Text string `json:"text,omitempty"`
|
Text string `json:"text,omitempty"`
|
||||||
StrokeWidth float64 `json:"strokeWidth,omitempty"`
|
|
||||||
FontSize float64 `json:"fontSize,omitempty"`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type Point struct {
|
type Point struct {
|
||||||
@@ -37,22 +35,12 @@ type Point struct {
|
|||||||
|
|
||||||
// ApplyAnnotations decodes a PNG, draws all annotations, and re-encodes it.
|
// ApplyAnnotations decodes a PNG, draws all annotations, and re-encodes it.
|
||||||
func ApplyAnnotations(pngBytes []byte, annotations []Annotation, scale float64) ([]byte, error) {
|
func ApplyAnnotations(pngBytes []byte, annotations []Annotation, scale float64) ([]byte, error) {
|
||||||
return ApplyAnnotationsWithScale(pngBytes, annotations, scale, scale)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ApplyAnnotationsWithScale decodes a PNG, draws all annotations using the
|
|
||||||
// actual device-pixel scale of the captured image, and re-encodes it.
|
|
||||||
func ApplyAnnotationsWithScale(pngBytes []byte, annotations []Annotation, scaleX, scaleY float64) ([]byte, error) {
|
|
||||||
if len(annotations) == 0 {
|
if len(annotations) == 0 {
|
||||||
return pngBytes, nil
|
return pngBytes, nil
|
||||||
}
|
}
|
||||||
if scaleX <= 0 {
|
if scale <= 0 {
|
||||||
scaleX = 1
|
scale = 1
|
||||||
}
|
}
|
||||||
if scaleY <= 0 {
|
|
||||||
scaleY = scaleX
|
|
||||||
}
|
|
||||||
strokeScale := math.Max(scaleX, scaleY)
|
|
||||||
|
|
||||||
src, err := png.Decode(bytes.NewReader(pngBytes))
|
src, err := png.Decode(bytes.NewReader(pngBytes))
|
||||||
if err != nil {
|
if err != nil {
|
||||||
@@ -67,20 +55,16 @@ func ApplyAnnotationsWithScale(pngBytes []byte, annotations []Annotation, scaleX
|
|||||||
if err != nil {
|
if err != nil {
|
||||||
c = color.RGBA{R: 59, G: 130, B: 246, A: 255}
|
c = color.RGBA{R: 59, G: 130, B: 246, A: 255}
|
||||||
}
|
}
|
||||||
strokeWidth := ann.StrokeWidth
|
width := int(math.Max(2, math.Round(3*scale)))
|
||||||
if strokeWidth <= 0 {
|
|
||||||
strokeWidth = 3
|
|
||||||
}
|
|
||||||
width := int(math.Max(1, math.Round(strokeWidth*strokeScale)))
|
|
||||||
switch ann.Tool {
|
switch ann.Tool {
|
||||||
case "pen":
|
case "pen":
|
||||||
drawPolyline(dst, ann.Points, scaleX, scaleY, width, c)
|
drawPolyline(dst, ann.Points, scale, width, c)
|
||||||
case "rect":
|
case "rect":
|
||||||
drawRectOutline(dst, ann.Points, scaleX, scaleY, width, c)
|
drawRectOutline(dst, ann.Points, scale, width, c)
|
||||||
case "ellipse":
|
case "ellipse":
|
||||||
drawEllipseOutline(dst, ann.Points, scaleX, scaleY, width, c)
|
drawEllipseOutline(dst, ann.Points, scale, width, c)
|
||||||
case "text":
|
case "text":
|
||||||
drawTextAnnotation(dst, ann, scaleX, scaleY, c)
|
drawTextAnnotation(dst, ann, scale, c)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -108,22 +92,22 @@ func parseHexColor(hex string) (color.RGBA, error) {
|
|||||||
}, nil
|
}, nil
|
||||||
}
|
}
|
||||||
|
|
||||||
func drawPolyline(img *image.RGBA, points []Point, scaleX, scaleY float64, width int, c color.RGBA) {
|
func drawPolyline(img *image.RGBA, points []Point, scale float64, width int, c color.RGBA) {
|
||||||
if len(points) == 1 {
|
if len(points) == 1 {
|
||||||
drawDot(img, scalePoint(points[0], scaleX, scaleY), width, c)
|
drawDot(img, scalePoint(points[0], scale), width, c)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
for i := 1; i < len(points); i++ {
|
for i := 1; i < len(points); i++ {
|
||||||
drawLine(img, scalePoint(points[i-1], scaleX, scaleY), scalePoint(points[i], scaleX, scaleY), width, c)
|
drawLine(img, scalePoint(points[i-1], scale), scalePoint(points[i], scale), width, c)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func drawRectOutline(img *image.RGBA, points []Point, scaleX, scaleY float64, width int, c color.RGBA) {
|
func drawRectOutline(img *image.RGBA, points []Point, scale float64, width int, c color.RGBA) {
|
||||||
if len(points) < 2 {
|
if len(points) < 2 {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
a := scalePoint(points[0], scaleX, scaleY)
|
a := scalePoint(points[0], scale)
|
||||||
b := scalePoint(points[len(points)-1], scaleX, scaleY)
|
b := scalePoint(points[len(points)-1], scale)
|
||||||
x1, x2 := ordered(a.X, b.X)
|
x1, x2 := ordered(a.X, b.X)
|
||||||
y1, y2 := ordered(a.Y, b.Y)
|
y1, y2 := ordered(a.Y, b.Y)
|
||||||
drawLine(img, Point{X: x1, Y: y1}, Point{X: x2, Y: y1}, width, c)
|
drawLine(img, Point{X: x1, Y: y1}, Point{X: x2, Y: y1}, width, c)
|
||||||
@@ -132,12 +116,12 @@ func drawRectOutline(img *image.RGBA, points []Point, scaleX, scaleY float64, wi
|
|||||||
drawLine(img, Point{X: x1, Y: y2}, Point{X: x1, Y: y1}, width, c)
|
drawLine(img, Point{X: x1, Y: y2}, Point{X: x1, Y: y1}, width, c)
|
||||||
}
|
}
|
||||||
|
|
||||||
func drawEllipseOutline(img *image.RGBA, points []Point, scaleX, scaleY float64, width int, c color.RGBA) {
|
func drawEllipseOutline(img *image.RGBA, points []Point, scale float64, width int, c color.RGBA) {
|
||||||
if len(points) < 2 {
|
if len(points) < 2 {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
a := scalePoint(points[0], scaleX, scaleY)
|
a := scalePoint(points[0], scale)
|
||||||
b := scalePoint(points[len(points)-1], scaleX, scaleY)
|
b := scalePoint(points[len(points)-1], scale)
|
||||||
x1, x2 := ordered(a.X, b.X)
|
x1, x2 := ordered(a.X, b.X)
|
||||||
y1, y2 := ordered(a.Y, b.Y)
|
y1, y2 := ordered(a.Y, b.Y)
|
||||||
rx := (x2 - x1) / 2
|
rx := (x2 - x1) / 2
|
||||||
@@ -196,8 +180,8 @@ func drawDot(img *image.RGBA, p Point, width int, c color.RGBA) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func scalePoint(p Point, scaleX, scaleY float64) Point {
|
func scalePoint(p Point, scale float64) Point {
|
||||||
return Point{X: p.X * scaleX, Y: p.Y * scaleY}
|
return Point{X: p.X * scale, Y: p.Y * scale}
|
||||||
}
|
}
|
||||||
|
|
||||||
func ordered(a, b float64) (float64, float64) {
|
func ordered(a, b float64) (float64, float64) {
|
||||||
@@ -207,7 +191,7 @@ func ordered(a, b float64) (float64, float64) {
|
|||||||
return b, a
|
return b, a
|
||||||
}
|
}
|
||||||
|
|
||||||
func drawTextAnnotation(img *image.RGBA, ann Annotation, scaleX, scaleY float64, c color.RGBA) {
|
func drawTextAnnotation(img *image.RGBA, ann Annotation, scale float64, c color.RGBA) {
|
||||||
if len(ann.Points) == 0 {
|
if len(ann.Points) == 0 {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -215,20 +199,16 @@ func drawTextAnnotation(img *image.RGBA, ann Annotation, scaleX, scaleY float64,
|
|||||||
if text == "" {
|
if text == "" {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
fontSize := ann.FontSize
|
face := annotationFontFace(20 * scale)
|
||||||
if fontSize <= 0 {
|
|
||||||
fontSize = 20
|
|
||||||
}
|
|
||||||
face := annotationFontFace(fontSize * scaleY)
|
|
||||||
if face == nil {
|
if face == nil {
|
||||||
face = basicfont.Face7x13
|
face = basicfont.Face7x13
|
||||||
}
|
}
|
||||||
|
|
||||||
origin := scalePoint(ann.Points[0], scaleX, scaleY)
|
origin := scalePoint(ann.Points[0], scale)
|
||||||
metrics := face.Metrics()
|
metrics := face.Metrics()
|
||||||
lineHeight := metrics.Height
|
lineHeight := metrics.Height
|
||||||
if lineHeight <= 0 {
|
if lineHeight <= 0 {
|
||||||
lineHeight = fixed.I(int(math.Ceil(fontSize * 1.2 * scaleY)))
|
lineHeight = fixed.I(int(math.Ceil(24 * scale)))
|
||||||
}
|
}
|
||||||
d := &xfont.Drawer{
|
d := &xfont.Drawer{
|
||||||
Dst: img,
|
Dst: img,
|
||||||
|
|||||||
@@ -93,81 +93,3 @@ func TestApplyAnnotationsDrawsTextIntoPNG(t *testing.T) {
|
|||||||
t.Fatalf("expected red text pixels near annotation point")
|
t.Fatalf("expected red text pixels near annotation point")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func TestApplyAnnotationsWithScaleDrawsTextAtDevicePosition(t *testing.T) {
|
|
||||||
src := image.NewRGBA(image.Rect(0, 0, 220, 120))
|
|
||||||
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 := ApplyAnnotationsWithScale(buf.Bytes(), []Annotation{
|
|
||||||
{
|
|
||||||
Tool: "text",
|
|
||||||
Color: "#ef4444",
|
|
||||||
Points: []Point{{X: 50, Y: 20}},
|
|
||||||
Text: "T",
|
|
||||||
FontSize: 20,
|
|
||||||
},
|
|
||||||
}, 2, 2)
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
minX := 999
|
|
||||||
found := false
|
|
||||||
for y := 0; y < img.Bounds().Dy(); y++ {
|
|
||||||
for x := 0; x < img.Bounds().Dx(); x++ {
|
|
||||||
got := color.RGBAModel.Convert(img.At(x, y)).(color.RGBA)
|
|
||||||
if got.R > 180 && got.G < 180 && got.B < 180 {
|
|
||||||
found = true
|
|
||||||
if x < minX {
|
|
||||||
minX = x
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if !found {
|
|
||||||
t.Fatalf("expected red text pixels")
|
|
||||||
}
|
|
||||||
if minX < 90 {
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
+82
-492
@@ -82,50 +82,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
}
|
}
|
||||||
@end
|
@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
|
@interface SnipNativeOverlayView : NSView
|
||||||
@property BOOL hasSelection;
|
@property BOOL hasSelection;
|
||||||
@property BOOL creating;
|
@property BOOL creating;
|
||||||
@@ -139,8 +95,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
@property NSString *resizeHandle;
|
@property NSString *resizeHandle;
|
||||||
@property NSString *activeTool;
|
@property NSString *activeTool;
|
||||||
@property(strong) NSColor *activeColor;
|
@property(strong) NSColor *activeColor;
|
||||||
@property CGFloat activeStrokeWidth;
|
|
||||||
@property CGFloat activeFontSize;
|
|
||||||
@property(strong) NSMutableArray<NSDictionary *> *annotations;
|
@property(strong) NSMutableArray<NSDictionary *> *annotations;
|
||||||
@property(strong) NSMutableDictionary *draftAnnotation;
|
@property(strong) NSMutableDictionary *draftAnnotation;
|
||||||
@property(strong) NSButton *cancelButton;
|
@property(strong) NSButton *cancelButton;
|
||||||
@@ -157,21 +111,12 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
@property(strong) NSButton *rectButton;
|
@property(strong) NSButton *rectButton;
|
||||||
@property(strong) NSButton *ellipseButton;
|
@property(strong) NSButton *ellipseButton;
|
||||||
@property(strong) NSButton *textButton;
|
@property(strong) NSButton *textButton;
|
||||||
|
@property(strong) NSButton *colorButton;
|
||||||
@property(strong) NSButton *undoButton;
|
@property(strong) NSButton *undoButton;
|
||||||
@property(strong) SnipToolSettingsView *toolSettingsView;
|
@property(strong) NSView *paletteView;
|
||||||
@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) NSView *actionToolbarBg;
|
||||||
@property(strong) NSTextField *textEditor;
|
@property(strong) NSTextField *textEditor;
|
||||||
@property NSPoint textEditorLocalPoint;
|
@property NSPoint textEditorLocalPoint;
|
||||||
@property NSInteger textEditorAnnotationIndex;
|
|
||||||
@property(strong) NSColor *textEditorColor;
|
|
||||||
@property NSInteger selectedTextAnnotationIndex;
|
|
||||||
@property BOOL draggingTextAnnotation;
|
|
||||||
@property NSPoint textDragStartLocalPoint;
|
|
||||||
@property NSPoint textDragOriginalLocalPoint;
|
|
||||||
@property(strong) NSTextField *sizeLabel;
|
@property(strong) NSTextField *sizeLabel;
|
||||||
@property(strong) NSTextField *hintLabel;
|
@property(strong) NSTextField *hintLabel;
|
||||||
- (void)syncControls;
|
- (void)syncControls;
|
||||||
@@ -185,13 +130,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
- (void)summarizeSelection;
|
- (void)summarizeSelection;
|
||||||
- (void)cancelSelection;
|
- (void)cancelSelection;
|
||||||
- (void)beginTextAnnotationAtPoint:(NSPoint)localPoint;
|
- (void)beginTextAnnotationAtPoint:(NSPoint)localPoint;
|
||||||
- (void)beginEditingTextAnnotationAtIndex:(NSInteger)index;
|
|
||||||
- (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;
|
- (BOOL)isEditingText;
|
||||||
- (void)commitTextEditor;
|
- (void)commitTextEditor;
|
||||||
- (void)cancelTextEditor;
|
- (void)cancelTextEditor;
|
||||||
@@ -209,11 +147,7 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
|
|
||||||
_activeTool = nil;
|
_activeTool = nil;
|
||||||
_activeColor = [NSColor colorWithCalibratedRed:239.0/255.0 green:68.0/255.0 blue:68.0/255.0 alpha:1.0];
|
_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];
|
_annotations = [NSMutableArray array];
|
||||||
_textEditorAnnotationIndex = -1;
|
|
||||||
_selectedTextAnnotationIndex = -1;
|
|
||||||
|
|
||||||
// Use SnipHoverButton for the action buttons so we get hover-color
|
// Use SnipHoverButton for the action buttons so we get hover-color
|
||||||
// animation. Annotation buttons stay as plain NSButton because they
|
// animation. Annotation buttons stay as plain NSButton because they
|
||||||
@@ -238,12 +172,9 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
_rectButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectRect)];
|
_rectButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectRect)];
|
||||||
_ellipseButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectEllipse)];
|
_ellipseButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectEllipse)];
|
||||||
_textButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectText)];
|
_textButton = [NSButton buttonWithTitle:@"" target:self action:@selector(selectText)];
|
||||||
|
_colorButton = [NSButton buttonWithTitle:@"" target:self action:@selector(togglePalette)];
|
||||||
_undoButton = [NSButton buttonWithTitle:@"" target:self action:@selector(undoAnnotation)];
|
_undoButton = [NSButton buttonWithTitle:@"" target:self action:@selector(undoAnnotation)];
|
||||||
_toolSettingsView = [[SnipToolSettingsView alloc] initWithFrame:NSZeroRect];
|
_paletteView = [[NSView 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,
|
// Dark rounded background container behind the action icon buttons,
|
||||||
// mirroring the look of `.action-toolbar` in the Vue overlay.
|
// mirroring the look of `.action-toolbar` in the Vue overlay.
|
||||||
_actionToolbarBg = [[NSView alloc] initWithFrame:NSZeroRect];
|
_actionToolbarBg = [[NSView alloc] initWithFrame:NSZeroRect];
|
||||||
@@ -257,10 +188,10 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
// Add the action toolbar background BEFORE the buttons so it sits
|
// Add the action toolbar background BEFORE the buttons so it sits
|
||||||
// behind them in the view hierarchy (AppKit z-order = subview order).
|
// behind them in the view hierarchy (AppKit z-order = subview order).
|
||||||
[self addSubview:_actionToolbarBg];
|
[self addSubview:_actionToolbarBg];
|
||||||
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _ocrButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _undoButton, _toolSettingsView, _sizeLabel, _hintLabel]) {
|
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _ocrButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _colorButton, _undoButton, _paletteView, _sizeLabel, _hintLabel]) {
|
||||||
[self addSubview:view];
|
[self addSubview:view];
|
||||||
}
|
}
|
||||||
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _ocrButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _undoButton, _toolSettingsView, _actionToolbarBg]) {
|
for (NSView *view in @[_cancelButton, _clipboardButton, _saveButton, _saveRemoteButton, _ocrButton, _summaryButton, _uploadButton, _penButton, _rectButton, _ellipseButton, _textButton, _colorButton, _undoButton, _paletteView, _actionToolbarBg]) {
|
||||||
[view setHidden:YES];
|
[view setHidden:YES];
|
||||||
}
|
}
|
||||||
[_sizeLabel setHidden:YES];
|
[_sizeLabel setHidden:YES];
|
||||||
@@ -372,62 +303,11 @@ 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:_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:_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:_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>"]];
|
[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];
|
||||||
[_toolSettingsView setWantsLayer:NO];
|
[[_paletteView layer] setCornerRadius:8];
|
||||||
[_settingsDivider setWantsLayer:YES];
|
[[_paletteView layer] setBackgroundColor:[[NSColor colorWithCalibratedWhite:0.11 alpha:0.96] CGColor]];
|
||||||
[[_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 {
|
- (void)drawRect:(NSRect)dirtyRect {
|
||||||
@@ -493,107 +373,12 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
- (CGFloat)fontSizeForTextItem:(NSDictionary *)item {
|
|
||||||
NSNumber *fontSize = item[@"fontSize"];
|
|
||||||
if (fontSize != nil && [fontSize doubleValue] > 0) {
|
|
||||||
return [fontSize doubleValue];
|
|
||||||
}
|
|
||||||
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],
|
|
||||||
NSForegroundColorAttributeName: color ?: [NSColor whiteColor]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
- (NSSize)textSizeForString:(NSString *)text fontSize:(CGFloat)fontSize {
|
|
||||||
NSString *measured = text.length > 0 ? text : @" ";
|
|
||||||
NSDictionary *attrs = [self textAttributesWithFontSize:fontSize color:[NSColor whiteColor]];
|
|
||||||
NSRect bounds = [measured boundingRectWithSize:NSMakeSize(CGFLOAT_MAX, CGFLOAT_MAX)
|
|
||||||
options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
|
|
||||||
attributes:attrs];
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
NSArray *points = item[@"points"];
|
|
||||||
NSString *text = item[@"text"];
|
|
||||||
if (points.count == 0 || text.length == 0) {
|
|
||||||
return NSZeroRect;
|
|
||||||
}
|
|
||||||
NSPoint p = [points[0] pointValue];
|
|
||||||
CGFloat fontSize = [self fontSizeForTextItem:item];
|
|
||||||
NSSize size = [self textSizeForString:text fontSize:fontSize];
|
|
||||||
return NSMakeRect(_selection.origin.x + p.x, _selection.origin.y + p.y, size.width, size.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
- (NSPoint)clampedTextLocalPoint:(NSPoint)localPoint text:(NSString *)text fontSize:(CGFloat)fontSize {
|
|
||||||
NSSize size = [self textSizeForString:text fontSize:fontSize];
|
|
||||||
CGFloat maxX = MAX(0, _selection.size.width - size.width);
|
|
||||||
CGFloat maxY = MAX(0, _selection.size.height - size.height);
|
|
||||||
return NSMakePoint(MAX(0, MIN(localPoint.x, maxX)), MAX(0, MIN(localPoint.y, maxY)));
|
|
||||||
}
|
|
||||||
|
|
||||||
- (NSInteger)textAnnotationIndexAtPoint:(NSPoint)p {
|
|
||||||
for (NSInteger i = (NSInteger)_annotations.count - 1; i >= 0; i--) {
|
|
||||||
NSDictionary *item = _annotations[(NSUInteger)i];
|
|
||||||
if (![item[@"tool"] isEqualToString:@"text"]) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
NSRect hitRect = NSInsetRect([self textAnnotationRectForItem:item], -6, -6);
|
|
||||||
if (!NSIsEmptyRect(hitRect) && NSPointInRect(p, hitRect)) {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
- (void)drawAnnotations {
|
- (void)drawAnnotations {
|
||||||
NSMutableArray *items = [NSMutableArray arrayWithArray:_annotations];
|
NSMutableArray *items = [NSMutableArray arrayWithArray:_annotations];
|
||||||
if (_draftAnnotation != nil) {
|
if (_draftAnnotation != nil) {
|
||||||
[items addObject:_draftAnnotation];
|
[items addObject:_draftAnnotation];
|
||||||
}
|
}
|
||||||
for (NSUInteger index = 0; index < items.count; index++) {
|
for (NSDictionary *item in items) {
|
||||||
NSDictionary *item = items[index];
|
|
||||||
NSString *tool = item[@"tool"];
|
NSString *tool = item[@"tool"];
|
||||||
NSColor *color = item[@"nsColor"];
|
NSColor *color = item[@"nsColor"];
|
||||||
NSArray *points = item[@"points"];
|
NSArray *points = item[@"points"];
|
||||||
@@ -606,24 +391,16 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
NSPoint p = [points[0] pointValue];
|
NSPoint p = [points[0] pointValue];
|
||||||
CGFloat fontSize = [self fontSizeForTextItem:item];
|
NSDictionary *attrs = @{
|
||||||
NSDictionary *attrs = [self textAttributesWithFontSize:fontSize color:color];
|
NSFontAttributeName: [NSFont systemFontOfSize:20 weight:NSFontWeightSemibold],
|
||||||
|
NSForegroundColorAttributeName: color ?: [NSColor whiteColor]
|
||||||
|
};
|
||||||
[text drawAtPoint:NSMakePoint(_selection.origin.x + p.x, _selection.origin.y + p.y) withAttributes:attrs];
|
[text drawAtPoint:NSMakePoint(_selection.origin.x + p.x, _selection.origin.y + p.y) withAttributes:attrs];
|
||||||
if ((NSInteger)index == _selectedTextAnnotationIndex && index < _annotations.count) {
|
|
||||||
NSRect rect = NSInsetRect([self textAnnotationRectForItem:item], -4, -3);
|
|
||||||
NSBezierPath *selectionPath = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:4 yRadius:4];
|
|
||||||
[selectionPath setLineWidth:1.5];
|
|
||||||
CGFloat dash[] = {4.0, 3.0};
|
|
||||||
[selectionPath setLineDash:dash count:2 phase:0];
|
|
||||||
[[NSColor colorWithCalibratedRed:59.0/255.0 green:130.0/255.0 blue:246.0/255.0 alpha:0.95] setStroke];
|
|
||||||
[selectionPath stroke];
|
|
||||||
}
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
[color setStroke];
|
[color setStroke];
|
||||||
CGFloat strokeWidth = [self strokeWidthForItem:item];
|
|
||||||
NSBezierPath *path = [NSBezierPath bezierPath];
|
NSBezierPath *path = [NSBezierPath bezierPath];
|
||||||
[path setLineWidth:strokeWidth];
|
[path setLineWidth:3];
|
||||||
[path setLineCapStyle:NSLineCapStyleRound];
|
[path setLineCapStyle:NSLineCapStyleRound];
|
||||||
[path setLineJoinStyle:NSLineJoinStyleRound];
|
[path setLineJoinStyle:NSLineJoinStyleRound];
|
||||||
if ([tool isEqualToString:@"pen"]) {
|
if ([tool isEqualToString:@"pen"]) {
|
||||||
@@ -644,11 +421,11 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
fabs(b.y - a.y));
|
fabs(b.y - a.y));
|
||||||
if ([tool isEqualToString:@"rect"]) {
|
if ([tool isEqualToString:@"rect"]) {
|
||||||
NSBezierPath *rectPath = [NSBezierPath bezierPathWithRect:r];
|
NSBezierPath *rectPath = [NSBezierPath bezierPathWithRect:r];
|
||||||
[rectPath setLineWidth:strokeWidth];
|
[rectPath setLineWidth:3];
|
||||||
[rectPath stroke];
|
[rectPath stroke];
|
||||||
} else if ([tool isEqualToString:@"ellipse"]) {
|
} else if ([tool isEqualToString:@"ellipse"]) {
|
||||||
NSBezierPath *ellipsePath = [NSBezierPath bezierPathWithOvalInRect:r];
|
NSBezierPath *ellipsePath = [NSBezierPath bezierPathWithOvalInRect:r];
|
||||||
[ellipsePath setLineWidth:strokeWidth];
|
[ellipsePath setLineWidth:3];
|
||||||
[ellipsePath stroke];
|
[ellipsePath stroke];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -733,7 +510,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
if (_textEditor != nil) {
|
if (_textEditor != nil) {
|
||||||
[self commitTextEditor];
|
[self commitTextEditor];
|
||||||
}
|
}
|
||||||
_draggingTextAnnotation = NO;
|
|
||||||
NSString *handle = [self resizeHandleAtPoint:p];
|
NSString *handle = [self resizeHandleAtPoint:p];
|
||||||
if (handle != nil) {
|
if (handle != nil) {
|
||||||
_resizing = YES;
|
_resizing = YES;
|
||||||
@@ -745,34 +521,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
[self syncControls];
|
[self syncControls];
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
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;
|
|
||||||
_annotating = NO;
|
|
||||||
if ([event clickCount] >= 2) {
|
|
||||||
[self beginEditingTextAnnotationAtIndex:textIndex];
|
|
||||||
[self syncControls];
|
|
||||||
[self setNeedsDisplay:YES];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
NSArray *points = item[@"points"];
|
|
||||||
if (points.count > 0) {
|
|
||||||
_draggingTextAnnotation = YES;
|
|
||||||
_textDragStartLocalPoint = [self localPoint:p];
|
|
||||||
_textDragOriginalLocalPoint = [points[0] pointValue];
|
|
||||||
}
|
|
||||||
[self syncControls];
|
|
||||||
[self setNeedsDisplay:YES];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
_selectedTextAnnotationIndex = -1;
|
|
||||||
if (_hasSelection && NSPointInRect(p, _selection) && [_activeTool isEqualToString:@"text"]) {
|
if (_hasSelection && NSPointInRect(p, _selection) && [_activeTool isEqualToString:@"text"]) {
|
||||||
_creating = NO;
|
_creating = NO;
|
||||||
_moving = NO;
|
_moving = NO;
|
||||||
@@ -796,7 +544,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
@"tool": _activeTool,
|
@"tool": _activeTool,
|
||||||
@"color": [self hexForColor:_activeColor],
|
@"color": [self hexForColor:_activeColor],
|
||||||
@"nsColor": _activeColor,
|
@"nsColor": _activeColor,
|
||||||
@"strokeWidth": @(_activeStrokeWidth),
|
|
||||||
@"points": [NSMutableArray arrayWithObject:[NSValue valueWithPoint:local]]
|
@"points": [NSMutableArray arrayWithObject:[NSValue valueWithPoint:local]]
|
||||||
} mutableCopy];
|
} mutableCopy];
|
||||||
} else if (_hasSelection && NSPointInRect(p, _selection)) {
|
} else if (_hasSelection && NSPointInRect(p, _selection)) {
|
||||||
@@ -815,7 +562,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
_selection = NSMakeRect(p.x, p.y, 0, 0);
|
_selection = NSMakeRect(p.x, p.y, 0, 0);
|
||||||
[_annotations removeAllObjects];
|
[_annotations removeAllObjects];
|
||||||
_draftAnnotation = nil;
|
_draftAnnotation = nil;
|
||||||
_selectedTextAnnotationIndex = -1;
|
|
||||||
}
|
}
|
||||||
[self syncControls];
|
[self syncControls];
|
||||||
}
|
}
|
||||||
@@ -846,17 +592,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
top = MAX(0, MIN(top, self.bounds.size.height));
|
top = MAX(0, MIN(top, self.bounds.size.height));
|
||||||
bottom = MAX(0, MIN(bottom, self.bounds.size.height));
|
bottom = MAX(0, MIN(bottom, self.bounds.size.height));
|
||||||
_selection = NSMakeRect(MIN(left, right), MIN(top, bottom), fabs(right - left), fabs(bottom - top));
|
_selection = NSMakeRect(MIN(left, right), MIN(top, bottom), fabs(right - left), fabs(bottom - top));
|
||||||
} else if (_draggingTextAnnotation && _selectedTextAnnotationIndex >= 0 && _selectedTextAnnotationIndex < (NSInteger)_annotations.count) {
|
|
||||||
NSMutableDictionary *item = (NSMutableDictionary *)_annotations[(NSUInteger)_selectedTextAnnotationIndex];
|
|
||||||
NSMutableArray *points = (NSMutableArray *)item[@"points"];
|
|
||||||
if (points.count > 0) {
|
|
||||||
NSPoint local = [self localPoint:p];
|
|
||||||
NSPoint delta = NSMakePoint(local.x - _textDragStartLocalPoint.x, local.y - _textDragStartLocalPoint.y);
|
|
||||||
NSPoint next = NSMakePoint(_textDragOriginalLocalPoint.x + delta.x, _textDragOriginalLocalPoint.y + delta.y);
|
|
||||||
NSString *text = item[@"text"] ?: @"";
|
|
||||||
CGFloat fontSize = [self fontSizeForTextItem:item];
|
|
||||||
points[0] = [NSValue valueWithPoint:[self clampedTextLocalPoint:next text:text fontSize:fontSize]];
|
|
||||||
}
|
|
||||||
} else if (_annotating && _draftAnnotation != nil) {
|
} else if (_annotating && _draftAnnotation != nil) {
|
||||||
NSMutableArray *points = _draftAnnotation[@"points"];
|
NSMutableArray *points = _draftAnnotation[@"points"];
|
||||||
NSPoint local = [self localPoint:p];
|
NSPoint local = [self localPoint:p];
|
||||||
@@ -878,7 +613,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
_creating = NO;
|
_creating = NO;
|
||||||
_moving = NO;
|
_moving = NO;
|
||||||
_resizing = NO;
|
_resizing = NO;
|
||||||
_draggingTextAnnotation = NO;
|
|
||||||
if (_annotating && _draftAnnotation != nil) {
|
if (_annotating && _draftAnnotation != nil) {
|
||||||
[_annotations addObject:_draftAnnotation];
|
[_annotations addObject:_draftAnnotation];
|
||||||
_draftAnnotation = nil;
|
_draftAnnotation = nil;
|
||||||
@@ -929,8 +663,8 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
[_rectButton setHidden:!visible];
|
[_rectButton setHidden:!visible];
|
||||||
[_ellipseButton setHidden:!visible];
|
[_ellipseButton setHidden:!visible];
|
||||||
[_textButton setHidden:!visible];
|
[_textButton setHidden:!visible];
|
||||||
|
[_colorButton setHidden:!visible];
|
||||||
[_undoButton setHidden:!visible];
|
[_undoButton setHidden:!visible];
|
||||||
[_toolSettingsView setHidden:!visible || _activeTool == nil];
|
|
||||||
[_sizeLabel setHidden:!visible];
|
[_sizeLabel setHidden:!visible];
|
||||||
[_hintLabel setHidden:_hasSelection];
|
[_hintLabel setHidden:_hasSelection];
|
||||||
|
|
||||||
@@ -970,56 +704,18 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
|
|
||||||
// Mark toolbar sits to the LEFT of the action toolbar (same row) with an
|
// 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.
|
// 8px gap between the two groups, so they never overlap on tiny selections.
|
||||||
CGFloat markW = 178;
|
CGFloat markW = 202;
|
||||||
CGFloat markGap = 8;
|
CGFloat markGap = 8;
|
||||||
CGFloat markX = MAX(0, x - markGap - markW);
|
CGFloat markX = MAX(0, x - markGap - markW);
|
||||||
[_penButton setFrame:NSMakeRect(markX + 4, y + 4, 28, 28)];
|
[_penButton setFrame:NSMakeRect(markX + 4, y + 4, 28, 28)];
|
||||||
[_rectButton setFrame:NSMakeRect(markX + 38, y + 4, 28, 28)];
|
[_rectButton setFrame:NSMakeRect(markX + 36, y + 4, 28, 28)];
|
||||||
[_ellipseButton setFrame:NSMakeRect(markX + 72, y + 4, 28, 28)];
|
[_ellipseButton setFrame:NSMakeRect(markX + 68, y + 4, 28, 28)];
|
||||||
[_textButton setFrame:NSMakeRect(markX + 106, y + 4, 28, 28)];
|
[_textButton setFrame:NSMakeRect(markX + 100, y + 4, 28, 28)];
|
||||||
[_undoButton setFrame:NSMakeRect(markX + 144, y + 4, 28, 28)];
|
[_colorButton setFrame:NSMakeRect(markX + 136, y + 7, 22, 22)];
|
||||||
[_undoButton setEnabled:YES];
|
[_undoButton setFrame:NSMakeRect(markX + 166, y + 4, 28, 28)];
|
||||||
[[_undoButton layer] setOpacity:_annotations.count > 0 ? 1.0 : 0.35];
|
[[_colorButton layer] setBackgroundColor:[_activeColor CGColor]];
|
||||||
|
[_undoButton setEnabled:_annotations.count > 0];
|
||||||
if (_activeTool != nil) {
|
[_paletteView setFrame:NSMakeRect(markX, MAX(0, y - 78), 150, 70)];
|
||||||
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];
|
[self updateToolButtonStates];
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1032,125 +728,46 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
: [NSColor clearColor];
|
: [NSColor clearColor];
|
||||||
[[button layer] setBackgroundColor:[bg CGColor]];
|
[[button layer] setBackgroundColor:[bg CGColor]];
|
||||||
}
|
}
|
||||||
[self updateToolSettingsStates];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
- (void)updateToolSettingsStates {
|
- (void)toggleTool:(NSString *)tool {
|
||||||
NSColor *activeBg = [NSColor colorWithCalibratedRed:234.0/255.0 green:241.0/255.0 blue:1.0 alpha:1.0];
|
_activeTool = [_activeTool isEqualToString:tool] ? nil : tool;
|
||||||
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];
|
[self syncControls];
|
||||||
}
|
}
|
||||||
- (void)selectPen { [self selectTool:@"pen"]; }
|
- (void)selectPen { [self toggleTool:@"pen"]; }
|
||||||
- (void)selectRect { [self selectTool:@"rect"]; }
|
- (void)selectRect { [self toggleTool:@"rect"]; }
|
||||||
- (void)selectEllipse { [self selectTool:@"ellipse"]; }
|
- (void)selectEllipse { [self toggleTool:@"ellipse"]; }
|
||||||
- (void)selectText { [self selectTool:@"text"]; }
|
- (void)selectText { [self toggleTool:@"text"]; }
|
||||||
- (void)undoAnnotation {
|
- (void)undoAnnotation {
|
||||||
if (_annotations.count == 0 && _textEditor == nil) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
[self cancelTextEditor];
|
[self cancelTextEditor];
|
||||||
if (_annotations.count == 0) {
|
if (_annotations.count > 0) {
|
||||||
[self syncControls];
|
|
||||||
[self setNeedsDisplay:YES];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
[_annotations removeLastObject];
|
[_annotations removeLastObject];
|
||||||
if (_selectedTextAnnotationIndex >= (NSInteger)_annotations.count) {
|
|
||||||
_selectedTextAnnotationIndex = -1;
|
|
||||||
}
|
|
||||||
[self syncControls];
|
[self syncControls];
|
||||||
[self setNeedsDisplay:YES];
|
[self setNeedsDisplay:YES];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
- (void)beginTextAnnotationAtPoint:(NSPoint)localPoint {
|
- (void)beginTextAnnotationAtPoint:(NSPoint)localPoint {
|
||||||
[self beginTextEditorAtLocalPoint:localPoint text:@"" color:_activeColor annotationIndex:-1];
|
|
||||||
}
|
|
||||||
|
|
||||||
- (void)beginEditingTextAnnotationAtIndex:(NSInteger)index {
|
|
||||||
if (index < 0 || index >= (NSInteger)_annotations.count) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
NSDictionary *item = _annotations[(NSUInteger)index];
|
|
||||||
if (![item[@"tool"] isEqualToString:@"text"]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
NSArray *points = item[@"points"];
|
|
||||||
if (points.count == 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
NSColor *color = item[@"nsColor"] ?: _activeColor;
|
|
||||||
_activeColor = color;
|
|
||||||
_activeFontSize = [self fontSizeForTextItem:item];
|
|
||||||
[self beginTextEditorAtLocalPoint:[points[0] pointValue]
|
|
||||||
text:item[@"text"] ?: @""
|
|
||||||
color:color
|
|
||||||
annotationIndex:index];
|
|
||||||
}
|
|
||||||
|
|
||||||
- (void)beginTextEditorAtLocalPoint:(NSPoint)localPoint text:(NSString *)text color:(NSColor *)color annotationIndex:(NSInteger)index {
|
|
||||||
[self cancelTextEditor];
|
[self cancelTextEditor];
|
||||||
CGFloat fontSize = _activeFontSize;
|
_textEditorLocalPoint = localPoint;
|
||||||
if (index >= 0 && index < (NSInteger)_annotations.count) {
|
NSRect frame = NSMakeRect(_selection.origin.x + localPoint.x, _selection.origin.y + localPoint.y, 180, 30);
|
||||||
fontSize = [self fontSizeForTextItem:_annotations[(NSUInteger)index]];
|
CGFloat maxX = self.bounds.size.width - frame.size.width - 8;
|
||||||
_activeFontSize = fontSize;
|
CGFloat maxY = self.bounds.size.height - frame.size.height - 8;
|
||||||
}
|
frame.origin.x = MAX(8, MIN(frame.origin.x, maxX));
|
||||||
NSPoint clampedLocal = [self clampedTextLocalPoint:localPoint text:text fontSize:fontSize];
|
frame.origin.y = MAX(8, MIN(frame.origin.y, maxY));
|
||||||
_textEditorLocalPoint = clampedLocal;
|
|
||||||
_textEditorAnnotationIndex = index;
|
|
||||||
_textEditorColor = color ?: _activeColor;
|
|
||||||
|
|
||||||
NSRect frame = [self textEditorFrameForLocalPoint:clampedLocal text:text fontSize:fontSize];
|
|
||||||
_textEditorLocalPoint = [self localPoint:frame.origin];
|
|
||||||
|
|
||||||
_textEditor = [[NSTextField alloc] initWithFrame:frame];
|
_textEditor = [[NSTextField alloc] initWithFrame:frame];
|
||||||
[_textEditor setBezeled:YES];
|
[_textEditor setBezeled:YES];
|
||||||
[_textEditor setBordered:YES];
|
[_textEditor setBordered:YES];
|
||||||
[_textEditor setDrawsBackground:YES];
|
[_textEditor setDrawsBackground:YES];
|
||||||
[_textEditor setBackgroundColor:[NSColor colorWithCalibratedWhite:0.08 alpha:0.78]];
|
[_textEditor setBackgroundColor:[NSColor colorWithCalibratedWhite:0.08 alpha:0.78]];
|
||||||
[_textEditor setTextColor:_textEditorColor];
|
[_textEditor setTextColor:_activeColor];
|
||||||
[_textEditor setFont:[NSFont systemFontOfSize:fontSize weight:NSFontWeightSemibold]];
|
[_textEditor setFont:[NSFont systemFontOfSize:20 weight:NSFontWeightSemibold]];
|
||||||
[_textEditor setStringValue:text ?: @""];
|
|
||||||
[_textEditor setFocusRingType:NSFocusRingTypeNone];
|
[_textEditor setFocusRingType:NSFocusRingTypeNone];
|
||||||
[_textEditor setTarget:self];
|
[_textEditor setTarget:self];
|
||||||
[_textEditor setAction:@selector(commitTextEditorFromSender:)];
|
[_textEditor setAction:@selector(commitTextEditorFromSender:)];
|
||||||
[self addSubview:_textEditor];
|
[self addSubview:_textEditor];
|
||||||
[[self window] makeFirstResponder:_textEditor];
|
[[self window] makeFirstResponder:_textEditor];
|
||||||
[_textEditor selectText:nil];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
- (BOOL)isEditingText {
|
- (BOOL)isEditingText {
|
||||||
@@ -1166,35 +783,17 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
NSString *text = [[_textEditor stringValue] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
|
NSString *text = [[_textEditor stringValue] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
|
||||||
NSColor *textColor = _textEditorColor ?: _activeColor;
|
|
||||||
if (_textEditorAnnotationIndex >= 0 && _textEditorAnnotationIndex < (NSInteger)_annotations.count) {
|
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
NSMutableDictionary *item = (NSMutableDictionary *)_annotations[(NSUInteger)_textEditorAnnotationIndex];
|
|
||||||
item[@"color"] = [self hexForColor:textColor];
|
|
||||||
item[@"nsColor"] = textColor;
|
|
||||||
item[@"points"] = [NSMutableArray arrayWithObject:[NSValue valueWithPoint:_textEditorLocalPoint]];
|
|
||||||
item[@"text"] = text;
|
|
||||||
item[@"fontSize"] = @(_activeFontSize);
|
|
||||||
_selectedTextAnnotationIndex = _textEditorAnnotationIndex;
|
|
||||||
} else {
|
|
||||||
[_annotations removeObjectAtIndex:(NSUInteger)_textEditorAnnotationIndex];
|
|
||||||
_selectedTextAnnotationIndex = -1;
|
|
||||||
}
|
|
||||||
} else if (text.length > 0) {
|
|
||||||
[_annotations addObject:[@{
|
[_annotations addObject:[@{
|
||||||
@"tool": @"text",
|
@"tool": @"text",
|
||||||
@"color": [self hexForColor:textColor],
|
@"color": [self hexForColor:_activeColor],
|
||||||
@"nsColor": textColor,
|
@"nsColor": _activeColor,
|
||||||
@"points": [NSMutableArray arrayWithObject:[NSValue valueWithPoint:_textEditorLocalPoint]],
|
@"points": [NSMutableArray arrayWithObject:[NSValue valueWithPoint:_textEditorLocalPoint]],
|
||||||
@"text": text,
|
@"text": text
|
||||||
@"fontSize": @(_activeFontSize)
|
|
||||||
} mutableCopy]];
|
} mutableCopy]];
|
||||||
_selectedTextAnnotationIndex = (NSInteger)_annotations.count - 1;
|
|
||||||
}
|
}
|
||||||
[_textEditor removeFromSuperview];
|
[_textEditor removeFromSuperview];
|
||||||
_textEditor = nil;
|
_textEditor = nil;
|
||||||
_textEditorAnnotationIndex = -1;
|
|
||||||
_textEditorColor = nil;
|
|
||||||
[[self window] makeFirstResponder:self];
|
[[self window] makeFirstResponder:self];
|
||||||
[self syncControls];
|
[self syncControls];
|
||||||
[self setNeedsDisplay:YES];
|
[self setNeedsDisplay:YES];
|
||||||
@@ -1206,50 +805,44 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
}
|
}
|
||||||
[_textEditor removeFromSuperview];
|
[_textEditor removeFromSuperview];
|
||||||
_textEditor = nil;
|
_textEditor = nil;
|
||||||
_textEditorAnnotationIndex = -1;
|
|
||||||
_textEditorColor = nil;
|
|
||||||
[[self window] makeFirstResponder:self];
|
[[self window] makeFirstResponder:self];
|
||||||
[self setNeedsDisplay:YES];
|
[self setNeedsDisplay:YES];
|
||||||
}
|
}
|
||||||
|
|
||||||
- (void)selectStrokeWidth:(NSButton *)sender {
|
- (void)togglePalette {
|
||||||
_activeStrokeWidth = MAX(1.0, (CGFloat)sender.tag);
|
[_paletteView setHidden:![_paletteView isHidden]];
|
||||||
[self updateToolSettingsStates];
|
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)selectFontSize:(NSButton *)sender {
|
- (void)selectPaletteColor:(NSButton *)sender {
|
||||||
_activeFontSize = MAX(8.0, (CGFloat)sender.tag);
|
NSArray *colors = objc_getAssociatedObject(_paletteView, "snapgoColors");
|
||||||
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) {
|
if (sender.tag >= 0 && sender.tag < (NSInteger)colors.count) {
|
||||||
_activeColor = colors[(NSUInteger)sender.tag];
|
_activeColor = colors[(NSUInteger)sender.tag];
|
||||||
if (_textEditor != nil) {
|
[_paletteView setHidden:YES];
|
||||||
_textEditorColor = _activeColor;
|
[self syncControls];
|
||||||
[_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];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1266,9 +859,6 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
NSString *text = item[@"text"];
|
NSString *text = item[@"text"];
|
||||||
if (text.length > 0) {
|
if (text.length > 0) {
|
||||||
entry[@"text"] = text;
|
entry[@"text"] = text;
|
||||||
entry[@"fontSize"] = item[@"fontSize"] ?: @20.0;
|
|
||||||
} else {
|
|
||||||
entry[@"strokeWidth"] = item[@"strokeWidth"] ?: @3.0;
|
|
||||||
}
|
}
|
||||||
[payload addObject:entry];
|
[payload addObject:entry];
|
||||||
}
|
}
|
||||||
@@ -1293,8 +883,8 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
NSRect r = [self globalRectForSelection:_selection];
|
NSRect r = [self globalRectForSelection:_selection];
|
||||||
NSString *json = [self annotationsJSON];
|
|
||||||
[self closeOverlayWindow];
|
[self closeOverlayWindow];
|
||||||
|
NSString *json = [self annotationsJSON];
|
||||||
nativeOverlayConfirm((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
nativeOverlayConfirm((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1303,8 +893,8 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
NSRect r = [self globalRectForSelection:_selection];
|
NSRect r = [self globalRectForSelection:_selection];
|
||||||
NSString *json = [self annotationsJSON];
|
|
||||||
[self closeOverlayWindow];
|
[self closeOverlayWindow];
|
||||||
|
NSString *json = [self annotationsJSON];
|
||||||
nativeOverlayCopy((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
nativeOverlayCopy((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1346,8 +936,8 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
NSRect r = [self globalRectForSelection:_selection];
|
NSRect r = [self globalRectForSelection:_selection];
|
||||||
NSString *json = [self annotationsJSON];
|
|
||||||
[self closeOverlayWindow];
|
[self closeOverlayWindow];
|
||||||
|
NSString *json = [self annotationsJSON];
|
||||||
nativeOverlaySaveRemote((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
nativeOverlaySaveRemote((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1358,8 +948,8 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
NSRect r = [self globalRectForSelection:_selection];
|
NSRect r = [self globalRectForSelection:_selection];
|
||||||
NSString *json = [self annotationsJSON];
|
|
||||||
[self closeOverlayWindow];
|
[self closeOverlayWindow];
|
||||||
|
NSString *json = [self annotationsJSON];
|
||||||
nativeOverlayOCR((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
nativeOverlayOCR((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1370,8 +960,8 @@ static id nativeOverlayKeyMonitor = nil;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
NSRect r = [self globalRectForSelection:_selection];
|
NSRect r = [self globalRectForSelection:_selection];
|
||||||
NSString *json = [self annotationsJSON];
|
|
||||||
[self closeOverlayWindow];
|
[self closeOverlayWindow];
|
||||||
|
NSString *json = [self annotationsJSON];
|
||||||
nativeOverlaySummarize((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
nativeOverlaySummarize((int)llround(r.origin.x), (int)llround(r.origin.y), (int)llround(r.size.width), (int)llround(r.size.height), [json UTF8String]);
|
||||||
}
|
}
|
||||||
@end
|
@end
|
||||||
|
|||||||
Reference in New Issue
Block a user