From 65d50c3c03bf58da0a7d049f6d917247a26cd17a Mon Sep 17 00:00:00 2001 From: Grant Forrest Date: Sun, 6 Oct 2024 14:15:55 -0400 Subject: [PATCH] [pa] touch support with new toolbar --- apps/palette/web/package.json | 2 +- .../src/components/projects/ProjectCanvas.tsx | 71 ++++++++++++++----- .../src/components/projects/ProjectView.tsx | 11 +-- apps/palette/web/src/pages/ProjectPage.tsx | 63 +++++++--------- pnpm-lock.yaml | 10 +-- 5 files changed, 87 insertions(+), 70 deletions(-) diff --git a/apps/palette/web/package.json b/apps/palette/web/package.json index 0946763..b32aec1 100644 --- a/apps/palette/web/package.json +++ b/apps/palette/web/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@a-type/react-space": "^0.2.10", + "@a-type/react-space": "^0.2.12", "@a-type/ui": "1.1.16", "@a-type/utils": "1.1.3", "@biscuits/client": "workspace:*", diff --git a/apps/palette/web/src/components/projects/ProjectCanvas.tsx b/apps/palette/web/src/components/projects/ProjectCanvas.tsx index 793eb35..b918ec0 100644 --- a/apps/palette/web/src/components/projects/ProjectCanvas.tsx +++ b/apps/palette/web/src/components/projects/ProjectCanvas.tsx @@ -19,17 +19,15 @@ import { useClaimGesture, useCanvas, } from '@a-type/react-space'; +import { proxy, useSnapshot } from 'valtio'; +import { Button } from '@a-type/ui/components/button'; +import { Icon } from '@a-type/ui/components/icon'; export interface ProjectCanvasProps { project: Project; className?: string; - showBubbles: boolean; } -export function ProjectCanvas({ - project, - className, - showBubbles, -}: ProjectCanvasProps) { +export function ProjectCanvas({ project, className }: ProjectCanvasProps) { const { image, colors } = hooks.useWatch(project); const [_, setSelected] = useColorSelection(); const addColor = (init: ProjectColorsItemInit) => { @@ -38,6 +36,7 @@ export function ProjectCanvas({ setSelected(newColor.get('id')); }; const [picking, setPicking] = useState(false); + const { showBubbles } = useSnapshot(toolState); const viewport = useCreateViewport({ panLimitMode: 'viewport', @@ -49,17 +48,21 @@ export function ProjectCanvas({ }); return ( -
- -
- - {showBubbles && !picking && } -
+
+ + + {showBubbles && !picking && } +
); } @@ -171,12 +174,14 @@ function BubblePicker({ }) { const previewRef = useRef(null); + const { tool } = useSnapshot(toolState); + useClaimGesture( 'tool', 'bubble', (detail) => { console.log('detail', detail); - return detail.isTouch || detail.isLeftMouse; + return (tool === 'bubble' && detail.isTouch) || detail.isLeftMouse; }, { onCanvas: true, @@ -272,8 +277,8 @@ function Bubble({ color: colorVal }: { color: ProjectColorsItem }) { + +
+ ); +} + +const toolState = proxy({ + tool: null as 'bubble' | null, + showBubbles: true, +}); diff --git a/apps/palette/web/src/components/projects/ProjectView.tsx b/apps/palette/web/src/components/projects/ProjectView.tsx index 0eade9f..b5b76ef 100644 --- a/apps/palette/web/src/components/projects/ProjectView.tsx +++ b/apps/palette/web/src/components/projects/ProjectView.tsx @@ -5,18 +5,13 @@ import { ProjectColorSpotlight } from './ProjectColorSpotlight.jsx'; export interface ProjectViewProps { project: Project; - showBubbles: boolean; } -export function ProjectView({ project, showBubbles }: ProjectViewProps) { +export function ProjectView({ project }: ProjectViewProps) { return (
- - + +
); diff --git a/apps/palette/web/src/pages/ProjectPage.tsx b/apps/palette/web/src/pages/ProjectPage.tsx index 37f03f8..00965d9 100644 --- a/apps/palette/web/src/pages/ProjectPage.tsx +++ b/apps/palette/web/src/pages/ProjectPage.tsx @@ -5,49 +5,38 @@ import { Icon } from '@a-type/ui/components/icon'; import { PageContent } from '@a-type/ui/components/layouts'; import { H1 } from '@a-type/ui/components/typography'; import { Link, useParams } from '@verdant-web/react-router'; -import { useState } from 'react'; export interface ProjectPageProps {} export function ProjectPage({}: ProjectPageProps) { - const id = useParams().id; - const project = hooks.useProject(id); + const id = useParams().id; + const project = hooks.useProject(id); - const [showBubbles, setShowBubbles] = useState(true); + if (!project) { + return ( + +

Project missing

+

Sorry, couldn't find this project. Maybe it was deleted?

+ + + ); + } - if (!project) { - return ( - -

Project missing

-

Sorry, couldn't find this project. Maybe it was deleted?

- - - ); - } - - return ( -
-
- - -
- -
- ); + return ( +
+
+ +
+ +
+ ); } export default ProjectPage; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ebcabe8..1744a36 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -676,8 +676,8 @@ importers: apps/palette/web: dependencies: '@a-type/react-space': - specifier: ^0.2.10 - version: 0.2.10(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.2.12 + version: 0.2.12(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@a-type/ui': specifier: 1.1.16 version: 1.1.16(@types/react-dom@18.3.0)(@types/react@18.3.3)(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1770,8 +1770,8 @@ packages: peerDependencies: kysely: ^0.27.2 - '@a-type/react-space@0.2.10': - resolution: {integrity: sha512-WovQ6KOqLCnGb+8vg4rE3bUbANXcikwwnkb3U3HxxtquaZZ9Ta1L5Q/CRVTy+jlasaNxyakn/0HjQdjbLleSCg==} + '@a-type/react-space@0.2.12': + resolution: {integrity: sha512-INk8T7h6SBTF0+Fofx/sTDtSMeUGioxkXtRzvQ5X5puZz/wzG7TsOWxJScb6FHxApwdw8JeBOS4Q5tL+WL3jEg==} peerDependencies: react: ^18.3.1 react-dom: ^18.3.1 @@ -12555,7 +12555,7 @@ snapshots: - encoding - supports-color - '@a-type/react-space@0.2.10(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@a-type/react-space@0.2.12(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@a-type/utils': 1.1.3 '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)