Fix slide elements selecting across all slides

ably · Aug 7, 2023 · 55be5f5 · 55be5f5
1 parent d36efc4
commit 55be5f5
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 14 deletions.
diff --git 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
@@ -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<HTMLImageElement> {
   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
@@ -3,13 +3,15 @@ import { useElementSelect, useMembers } from '../hooks';
 import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils';
 
 interface Props extends React.HTMLAttributes<HTMLParagraphElement> {
+  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
@@ -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
@@ -3,14 +3,16 @@ import { useElementSelect, useMembers } from '../hooks';
 import { findActiveMember, getMemberFirstName, getOutlineClasses } from '../utils';
 
 interface Props extends React.HTMLAttributes<HTMLHeadingElement> {
+  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
@@ -9,11 +9,15 @@ export const slides = [
         <div>
           <Title
             id="1"
+            slide="0"
             className="md:mb-24"
           >
             Key Design Principles
           </Title>
-          <Paragraph id="2">
+          <Paragraph
+            id="2"
+            slide="0"
+          >
             Effective design centres on four basic principles: contrast, repetition, alignment and proximity. These
             appear in every design.
           </Paragraph>
@@ -22,17 +26,20 @@ export const slides = [
           <Image
             src="/contrast.svg"
             id="3"
+            slide="0"
           >
             <div className="absolute top-5 scale-50 md:scale-100 w-[176px] -left-8 md:top-20 md:left-6 md:right-6 md:mx-auto">
               <Title
                 variant="h2"
                 id="4"
+                slide="0"
               >
                 Contrast
               </Title>
               <Paragraph
                 variant="aside"
                 id="5"
+                slide="0"
               >
                 When a design uses several elements, the goal is to make each one distinct.
               </Paragraph>
@@ -41,17 +48,20 @@ export const slides = [
           <Image
             src="/repetition.svg"
             id="6"
+            slide="0"
           >
             <div className="absolute top-3 scale-50 md:scale-100 w-[176px] -left-8 md:top-20 md:left-6 md:right-6 md:mx-auto">
               <Title
                 variant="h2"
                 id="7"
+                slide="0"
               >
                 Repetition
               </Title>
               <Paragraph
                 variant="aside"
                 id="8"
+                slide="0"
               >
                 Repetition helps designers establish relationships, develop organization and strengthen unity.
               </Paragraph>
@@ -60,6 +70,7 @@ export const slides = [
           <Image
             src="/alignment.svg"
             id="9"
+            slide="0"
           >
             <div
               data-id="slide-figcaption-placeholder"
@@ -68,12 +79,14 @@ export const slides = [
               <Title
                 variant="h2"
                 id="10"
+                slide="0"
               >
                 Alignment
               </Title>
               <Paragraph
                 variant="aside"
                 id="11"
+                slide="0"
               >
                 Alignment creates a clean, sophisticated look. All elements should relate to all others in some way.
               </Paragraph>
@@ -82,6 +95,7 @@ export const slides = [
           <Image
             src="/proximity.svg"
             id="12"
+            slide="0"
           >
             <div
               data-id="slide-figcaption-placeholder"
@@ -90,12 +104,14 @@ export const slides = [
               <Title
                 variant="h2"
                 id="13"
+                slide="0"
               >
                 Proximity
               </Title>
               <Paragraph
                 variant="aside"
                 id="14"
+                slide="0"
               >
                 When items are grouped, they become a single visual unit, rather than several separate entities.
               </Paragraph>
@@ -112,25 +128,31 @@ export const slides = [
           <Title
             variant="h3"
             id="1"
+            slide="1"
           >
             How users read
           </Title>
           <Title
             variant="h1"
             className="mb-12"
             id="2"
+            slide="1"
           >
             Add graphics
           </Title>
           <Paragraph
             className="!mb-8"
             id="3"
+            slide="1"
           >
             No one likes boring text blocks on a website. And{' '}
             <span className="text-ably-avatar-stack-demo-slide-title-highlight font-semibold">images and icons</span>{' '}
             are the fastest way to get information.
           </Paragraph>
-          <Paragraph id="4">
+          <Paragraph
+            id="4"
+            slide="1"
+          >
             But <span className="text-ably-avatar-stack-demo-slide-title-highlight font-semibold">don't overdo it</span>
             . If you can't explain for what purpose you put this line or icon, it's better to abandon it.
           </Paragraph>
@@ -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"
         />
       </div>
     ),
@@ -151,12 +174,14 @@ export const slides = [
             variant="h1"
             className="mb-12"
             id="1"
+            slide="2"
           >
             Design Statistics
           </Title>
           <Paragraph
             className="md:!mb-[350px]"
             id="2"
+            slide="2"
           >
             How do SMBs rate the importance of graphic design to their success?
           </Paragraph>
@@ -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"
         />
       </div>
     ),

diff --git 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) => {