v1.0.4

README.md

@@ -23,7 +23,7 @@
 
 ## Download
 
-- <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.3/PlainColor_1.0.3_aarch64.dmg">macOS: dmg</a>
+- <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.4/PlainColor_1.0.4_aarch64.dmg">macOS: dmg</a>
 - Windows: Coming soon...
 - Linux: Coming soon...
 
@@ -35,56 +35,26 @@
 
 ## Todo
 
-### v1.0.4
-
-- Fix: “PlainColor.app” is damaged and can’t be opened
-- macOS permissions: Better user experience
-- More quick copy options
-  - Common:
-    - ✅ #HEX/HEXA `#5C2D91`
-    - ✅ HEX/HEXA `5C2D91`
-    - ✅ RGB/RGBA `92, 45, 145`
-    - RGB/RGBA from 0 to 1 `0,36; 0,18; 0,57`
-    - CMYK % `37, 69, 0, 43`
-    - HSL/HSLA `268, 53, 37`
-    - HSB/HSV `268, 69, 57`
-  - WEB:
-    - ✅ 🌐 CSS RGB/RGBA
-    - 🌐 CSS HSL/HSLA
-    - 🌐 CSS Display P3
-  - Native:
-    - 🖥️ NSColor RGB
-    - 🖥️ NSColor HSB
-    - 📱 UIColor RGB
-    - 📱 UIColor HSB
-    - 🐦‍⬛ SwiftUI Color HSB
-    - 🐦‍⬛ Swift Color Literal
-    - 🖥️ Obj-C NSColor Calibrated RGB
-    - 📱 Obj-C UIColor RGB
-    - 🌊 .NET RGB/ARGB
-    - ☕ Java RGB/RGBA
-    - 📱 Android RGB/ARGB
-- Lense: Control zoom level with `+` and `-` keys
-- Lense: Move picker with arrows (step = 1px) (make sure it cannot be out of screen bounds)
-
-### v1.0.5
-
-- Lense: Press `C` to copy color instantly (what to copy? - need a setting for this)
-- ColorCard: Checkboard background for alpha colors
-
 ### Critical
 
+- macOS permissions: Better user experience
 - Lense cannot be dragged on top of fullscreen windows
 - Lense is lagging when picking on another screen and virtual desktop
   - Optimize picker loop: Move `setInterval` to rust, FE invokes only event loop start and end
 - PlainColor process is active after app closed (?)
+- ColorCard: Checkboard background for alpha colors
 
 ### Palette
 
 - Palettes tab
 - Save color to palette
 - Manage palettes
 
+### Lense
+
+- Move picker with arrows (step = 1px) (make sure it cannot be out of screen bounds)
+- Press `C` to copy color instantly (what to copy? - need a setting for this)
+
 ### Shortcuts (?)
 
 - Tray icon
@@ -97,3 +67,21 @@
 - Prepend one color (Use different color on every new release)
 - Prepend default palette (Apple colors)
 - <a href="https://v2.tauri.app/plugin/updater/">Add updater</a>
+- More quick copy options
+  - Common:
+    - RGB/RGBA from 0 to 1 `0,36; 0,18; 0,57`
+    - HSB/HSV `268, 69, 57`
+  - WEB:
+    - 🌐 CSS Display P3
+  - Native:
+    - 🖥️ NSColor RGB
+    - 🖥️ NSColor HSB
+    - 📱 UIColor RGB
+    - 📱 UIColor HSB
+    - 🐦‍⬛ SwiftUI Color HSB
+    - 🐦‍⬛ Swift Color Literal
+    - 🖥️ Obj-C NSColor Calibrated RGB
+    - 📱 Obj-C UIColor RGB
+    - 🌊 .NET RGB/ARGB
+    - ☕ Java RGB/RGBA
+    - 📱 Android RGB/ARGB

package.json

@@ -1,7 +1,7 @@
 {
   "name": "plain-color",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "PlainColor"
-version = "1.0.3"
+version = "1.0.4"
 description = "A Tauri App"
 authors = ["Eugene Volynko <volynko.ua@gmail.com>"]
 edition = "2021"

src-tauri/src/lib.rs

@@ -159,7 +159,7 @@ fn fetch_preview(app: AppHandle, size: u32) {
             app.emit_to(
                 EventTarget::labeled("picker"),
                 "preview_fetched",
-                (img_base64, color),
+                (img_base64, color, size),
             )
             .unwrap();
         }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "PlainColor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "identifier": "com.moduleart.plaincolor",
   "build": {
     "beforeDevCommand": "yarn dev",
@@ -65,6 +65,9 @@
   "bundle": {
     "active": true,
     "targets": "all",
-    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"]
+    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
+    "macOS": {
+      "signingIdentity": "-"
+    }
   }
 }

src/components/ColorCard/index.scss

@@ -41,4 +41,12 @@
     z-index: 1;
     margin: 0;
   }
+
+  &__copy-variants {
+    margin: -0.25rem;
+
+    & > * {
+      padding: 0.25rem;
+    }
+  }
 }

src/components/ColorCard/index.tsx

@@ -94,11 +94,11 @@ export const ColorCard: FC<IColorCardProps> = ({
         </Stack>
       </Stack>
       <Stack>
-        <Stack grow>
+        <Stack grow wrap gap="none" className="color-card__copy-variants">
           {quickCopyVariants.map((copyVariant) => (
             <Button
               key={copyVariant.id}
-              label={copyVariant.shortLabel}
+              label={copyVariant.label}
               size="inline"
               variant="clear"
               iconPre={Copy}

src/components/Stack/index.scss

@@ -1,6 +1,10 @@
 .stack {
   display: flex;
 
+  &--wrap {
+    flex-wrap: wrap;
+  }
+
   &--justify-start {
     justify-content: flex-start;
   }

src/components/Stack/index.tsx

@@ -12,6 +12,7 @@ export const Stack: FC<PropsWithChildren<IStackProps>> = ({
   align,
   gap = 'small',
   padding = 'none',
+  wrap = false,
   containerRef,
   ...props
 }) => {
@@ -26,6 +27,7 @@ export const Stack: FC<PropsWithChildren<IStackProps>> = ({
         [`stack--padding-${padding}`],
         {
           [`stack--align-${align}`]: align,
+          'stack--wrap': wrap,
         },
         commonComponentClasses(props)
       )}

src/components/Stack/props.ts

@@ -8,4 +8,5 @@ export interface IStackProps extends IPlainlibComponentProps<HTMLDivElement> {
   align?: 'start' | 'end' | 'center'
   gap?: 'none' | 'extra-small' | 'small' | 'medium' | 'large'
   padding?: 'none' | 'extra-small' | 'small' | 'medium' | 'large'
+  wrap?: boolean
 }

src/layouts/AppLayout/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { WindowTitlebar } from '@/components/WindowTitlebar'
 import { WindowContent } from '@/components/WindowContent'
 import { Outlet } from 'react-router-dom'
@@ -20,6 +20,7 @@ export const AppLayout: FC = () => {
   const colorsStore = useColorsStore()
   const [pickingInterval, setPickingInterval] = useState<NodeJS.Timeout | null>(null)
   const platform = getPlatform()
+  const previewSize = useRef(12) // should be even
 
   useEffect(() => {
     if (pickerStore.isPicking) {
@@ -29,7 +30,8 @@ export const AppLayout: FC = () => {
             pickerWindow.show()
 
             const interval = setInterval(() => {
-              invoke('fetch_preview', { size: 12 }) // should be even
+              console.log('previewSize.current', previewSize.current)
+              invoke('fetch_preview', { size: previewSize.current })
             }, 50)
             setPickingInterval(interval)
           }
@@ -74,6 +76,22 @@ export const AppLayout: FC = () => {
       })
     )
 
+    listeners.push(
+      listen<string>('preview_zoom_out', () => {
+        if (previewSize.current < 32) {
+          previewSize.current += 2
+        }
+      })
+    )
+
+    listeners.push(
+      listen<string>('preview_zoom_in', () => {
+        if (previewSize.current > 4) {
+          previewSize.current -= 2
+        }
+      })
+    )
+
     listeners.push(
       listen<string>('color_canceled', () => {
         pickerStore.closePicker()

src/layouts/PickerLayout/index.scss

@@ -1,11 +1,9 @@
 .picker-layout {
-  $pixel: calc(100% / 11);
-
   position: fixed;
   left: 0;
   top: 0;
-  width: calc(100% + $pixel);
-  height: calc(100% + $pixel);
+  width: calc(100% + var(--pixel));
+  height: calc(100% + var(--pixel));
   cursor: none;
 
   &__image {
@@ -26,17 +24,19 @@
 
   &__color-text {
     &--inverted {
-      color: var(--color_window);
+      * {
+        color: var(--color_window);
+      }
     }
   }
 
   &::after {
     content: '';
     position: fixed;
-    left: calc(50% - calc($pixel / 2));
-    top: calc(50% - calc($pixel / 2));
-    width: $pixel;
-    height: $pixel;
+    left: calc(50% - calc(var(--pixel) / 2));
+    top: calc(50% - calc(var(--pixel) / 2));
+    width: var(--pixel);
+    height: var(--pixel);
     border: var(--size_borderWidth) solid var(--color_text);
     display: block;
     pointer-events: none;

src/layouts/PickerLayout/index.tsx

@@ -10,30 +10,50 @@ import { Image } from '@/components/Image'
 export const PickerLayout: FC = () => {
   const [image, setImage] = useState('')
   const [color, setColor] = useState('000000')
+  const [previewSize, setPreviewSize] = useState(1)
+
+  const listenHotkeys = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'Escape':
+        cancel()
+        break
+
+      case '-':
+      case '_':
+        zoomOut()
+        break
+
+      case '=':
+      case '+':
+        zoomIn()
+        break
+    }
+  }
 
   useEffect(() => {
     const listeners: Promise<UnlistenFn>[] = []
 
     listeners.push(
-      listen<[string, [number, number, number, number]?]>('preview_fetched', (event) => {
-        if (event.payload.length) {
+      listen<[string, [number, number, number, number], number]>('preview_fetched', (event) => {
+        if (event.payload.length > 0 && event.payload[0]) {
           setImage(event.payload[0])
 
-          if (event.payload[1]) {
+          if (event.payload.length > 1 && event.payload[1]) {
             const color = rgbToHex({ red: event.payload[1][0], green: event.payload[1][1], blue: event.payload[1][2] })
             setColor(color)
+
+            if (event.payload.length > 2 && event.payload[2]) {
+              setPreviewSize(event.payload[2])
+            }
           }
         }
       })
     )
 
-    document.addEventListener('keypress', (e) => {
-      if (e.key === 'Escape') {
-        cancel()
-      }
-    })
+    document.addEventListener('keypress', listenHotkeys)
 
     return () => {
+      document.removeEventListener('keypress', listenHotkeys)
       listeners.map((unlisten) => unlisten.then((f) => f()))
     }
   }, [])
@@ -42,12 +62,24 @@ export const PickerLayout: FC = () => {
     emitTo('main', 'color_picked', color)
   }
 
+  const zoomIn = () => {
+    emitTo('main', 'preview_zoom_in')
+  }
+
+  const zoomOut = () => {
+    emitTo('main', 'preview_zoom_out')
+  }
+
   const cancel = () => {
     emitTo('main', 'color_canceled')
   }
 
   return (
-    <div className="picker-layout" onClick={pickColor}>
+    <div
+      className="picker-layout"
+      onClick={pickColor}
+      style={{ '--pixel': `calc(100% / ${previewSize - 1}` } as React.CSSProperties}
+    >
       <Image src={image} className="picker-layout__image" pointerEvents="disable" />
       <Stack
         className="picker-layout__color"