From 55be5f529bc9f4ba25c72677b2919c4b6316ffa6 Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Mon, 7 Aug 2023 12:21:24 +0200 Subject: [PATCH] Fix slide elements selecting across all slides --- demo/src/App.tsx | 2 +- demo/src/components/Image.tsx | 9 +++++---- demo/src/components/Paragraph.tsx | 6 ++++-- demo/src/components/SlidePreview.tsx | 2 +- demo/src/components/Title.tsx | 6 ++++-- demo/src/components/slides.tsx | 30 ++++++++++++++++++++++++++-- demo/src/utils/active-member.ts | 4 ++-- 7 files changed, 45 insertions(+), 14 deletions(-) diff --git a/demo/src/App.tsx b/demo/src/App.tsx index e78bc9f3..ab5f8215 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -14,7 +14,7 @@ const App = () => { const enter = async () => { const name = getRandomName(); await space.enter({ name, color: getRandomColor() }); - space.locations.set({ slide: 0, element: null }); + space.locations.set({ slide: `${0}`, element: null }); }; enter(); diff --git a/demo/src/components/Image.tsx b/demo/src/components/Image.tsx index b3805359..d78c8bf0 100644 --- a/demo/src/components/Image.tsx +++ b/demo/src/components/Image.tsx @@ -2,17 +2,18 @@ import cn from 'classnames'; import { useElementSelect, useMembers } from '../hooks'; import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils'; -interface Props { +interface Props extends React.HTMLAttributes { src: string; children?: React.ReactNode; className?: string; - id?: string; + id: string; + slide: string; } -export const Image = ({ src, children, className, id }: Props) => { +export const Image = ({ src, children, className, id, slide }: Props) => { const { members } = useMembers(); const { handleSelect } = useElementSelect(id); - const activeMember = findActiveMember(id, members); + const activeMember = findActiveMember(id, slide, members); const name = getMemberFirstName(activeMember); const outlineClasses = getOutlineClasses(activeMember); diff --git a/demo/src/components/Paragraph.tsx b/demo/src/components/Paragraph.tsx index 44997952..9150a5e6 100644 --- a/demo/src/components/Paragraph.tsx +++ b/demo/src/components/Paragraph.tsx @@ -3,13 +3,15 @@ import { useElementSelect, useMembers } from '../hooks'; import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils'; interface Props extends React.HTMLAttributes { + id: string; + slide: string; variant?: 'regular' | 'aside'; } -export const Paragraph = ({ variant = 'regular', id, className, ...props }: Props) => { +export const Paragraph = ({ variant = 'regular', id, slide, className, ...props }: Props) => { const { members } = useMembers(); const { handleSelect } = useElementSelect(id); - const activeMember = findActiveMember(id, members); + const activeMember = findActiveMember(id, slide, members); const name = getMemberFirstName(activeMember); const outlineClasses = getOutlineClasses(activeMember); diff --git a/demo/src/components/SlidePreview.tsx b/demo/src/components/SlidePreview.tsx index bed87c84..0345ca65 100644 --- a/demo/src/components/SlidePreview.tsx +++ b/demo/src/components/SlidePreview.tsx @@ -17,7 +17,7 @@ export const SlidePreview = ({ children, index }: SlidePreviewProps) => { const handleSlideClick = () => { if (!space || !self) return; - space.locations.set({ slide: index, element: null }); + space.locations.set({ slide: `${index}`, element: null }); }; return ( diff --git a/demo/src/components/Title.tsx b/demo/src/components/Title.tsx index f9933090..48b322ff 100644 --- a/demo/src/components/Title.tsx +++ b/demo/src/components/Title.tsx @@ -3,14 +3,16 @@ import { useElementSelect, useMembers } from '../hooks'; import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils'; interface Props extends React.HTMLAttributes { + id: string; + slide: string; variant?: 'h1' | 'h2' | 'h3'; } -export const Title = ({ variant = 'h1', className, id, ...props }: Props) => { +export const Title = ({ variant = 'h1', className, id, slide, ...props }: Props) => { const Component = variant; const { members } = useMembers(); const { handleSelect } = useElementSelect(id); - const activeMember = findActiveMember(id, members); + const activeMember = findActiveMember(id, slide, members); const name = getMemberFirstName(activeMember); const outlineClasses = getOutlineClasses(activeMember); diff --git a/demo/src/components/slides.tsx b/demo/src/components/slides.tsx index 98d5e7a8..f9e23d40 100644 --- a/demo/src/components/slides.tsx +++ b/demo/src/components/slides.tsx @@ -9,11 +9,15 @@ export const slides = [
Key Design Principles - + Effective design centres on four basic principles: contrast, repetition, alignment and proximity. These appear in every design. @@ -22,17 +26,20 @@ export const slides = [
Contrast When a design uses several elements, the goal is to make each one distinct. @@ -41,17 +48,20 @@ export const slides = [
Repetition Repetition helps designers establish relationships, develop organization and strengthen unity. @@ -60,6 +70,7 @@ export const slides = [
Alignment Alignment creates a clean, sophisticated look. All elements should relate to all others in some way. @@ -82,6 +95,7 @@ export const slides = [
Proximity When items are grouped, they become a single visual unit, rather than several separate entities. @@ -112,6 +128,7 @@ export const slides = [ How users read @@ -119,18 +136,23 @@ export const slides = [ variant="h1" className="mb-12" id="2" + slide="1" > Add graphics No one likes boring text blocks on a website. And{' '} images and icons{' '} are the fastest way to get information. - + But don't overdo it . If you can't explain for what purpose you put this line or icon, it's better to abandon it. @@ -139,6 +161,7 @@ export const slides = [ src="/collaborative-document.svg" className="absolute w-72 -right-1 md:-right-4 md:w-[477px]" id="5" + slide="1" />
), @@ -151,12 +174,14 @@ export const slides = [ variant="h1" className="mb-12" id="1" + slide="2" > Design Statistics How do SMBs rate the importance of graphic design to their success? @@ -165,6 +190,7 @@ export const slides = [ src="/bubble-diagram.svg" className="absolute md:w-[688px] md:right-60 md:top-20" id="3" + slide="2" />
), diff --git a/demo/src/utils/active-member.ts b/demo/src/utils/active-member.ts index ffe65205..ecfb84ab 100644 --- a/demo/src/utils/active-member.ts +++ b/demo/src/utils/active-member.ts @@ -1,8 +1,8 @@ import { SpaceMember } from '@ably-labs/spaces'; -export const findActiveMember = (id?: string, members?: SpaceMember[]) => { +export const findActiveMember = (id: string, slide: string, members?: SpaceMember[]) => { if (!members) return; - return members.find((member) => member.location?.element === id); + return members.find((member) => member.location?.element === id && member.location?.slide === slide); }; export const getMemberFirstName = (member?: SpaceMember) => {