Add walkthrough and documentation

code-slide · Apr 18, 2024 · 3d43058 · 3d43058
1 parent c004b0c
commit 3d43058
Show file tree

Hide file tree

Showing 14 changed files with 311 additions and 173 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,16 +6,17 @@
  * Copyright (c) Do Duc Quan. All rights reserved.
 */
 
-import { ConfigProvider, Layout } from 'antd';
+import { ConfigProvider, Layout, Tour, TourProps } from 'antd';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { useRouteMatch } from 'react-router';
 import { ClipboardContainer } from '@app/core';
 import { EditorView, ShapeView, PagesView, HeaderView, AnimationView, ToolView } from '@app/wireframes/components';
-import { getSelectedItems, getSelectedShape, loadDiagramFromServer, newDiagram, useStore } from '@app/wireframes/model';
+import { getSelectedItems, getSelectedShape, loadDiagramFromServer, newDiagram, setIsTourOpen, useStore } from '@app/wireframes/model';
 import { vogues } from './const';
 import { CustomDragLayer } from './wireframes/components/CustomDragLayer';
 import { OverlayContainer } from './wireframes/contexts/OverlayContext';
+import { useEffect, useRef } from 'react';
 
 export const App = () => {
     const dispatch = useDispatch();
@@ -27,16 +28,10 @@ export const App = () => {
     const sidebarWidth = useStore(s => s.ui.sidebarSize);
     const footerHeight = useStore(s => s.ui.footerSize);
     const applicationMode = useStore(s => s.ui.selectedMode);
+    const isTourOpen = useStore(s => s.ui.isTourOpen);
+    const tourRefs = Array(7).fill(0).map(() => useRef(null));
 
-    const margin = {
-        tool: `${vogues.common.editorPad}px 0`,
-        sideLeft: `${vogues.common.editorPad}px ${vogues.common.editorPad}px ${vogues.common.editorPad}px 0`,
-        sideMid: `0 ${vogues.common.editorPad}px 0 0`,
-        sideRight: `0 0 ${vogues.common.editorPad}px ${vogues.common.editorPad}px`,
-        editor: `0 ${vogues.common.editorMargin}px`,
-    }
-
-    React.useEffect(() => {
+    useEffect(() => {
         const token = routeTokenSnapshot.current;
 
         if (token && token.length > 0) {
@@ -46,15 +41,61 @@ export const App = () => {
         }
     }, [dispatch]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         const handleContextmenu = (e: MouseEvent) => { e.preventDefault() };
         document.addEventListener('contextmenu', handleContextmenu);
-        
+
         return function cleanup() {
             document.removeEventListener('contextmenu', handleContextmenu)
         }
     }, [])
 
+    const margin = {
+        tool: `${vogues.common.editorPad}px 0`,
+        sideLeft: `${vogues.common.editorPad}px ${vogues.common.editorPad}px ${vogues.common.editorPad}px 0`,
+        sideMid: `0 ${vogues.common.editorPad}px 0 0`,
+        sideRight: `0 0 ${vogues.common.editorPad}px ${vogues.common.editorPad}px`,
+        editor: `0 ${vogues.common.editorMargin}px`,
+    }
+
+    const walkthroughTour: TourProps['steps'] = [
+        {
+            title: 'Step 1: Starting Your Project',
+            description: 'Start a fresh project, open an existing one, or save your work to your local machine. The documentation for coding syntax is also here.',
+            target: () => tourRefs[0].current,
+        },
+        {
+            title: 'Step 2: Designing Your Presentation',
+            description: 'Use the canvas to layout and customize your presentation\'s structure.',
+            target: () => tourRefs[1].current,
+        },
+        {
+            title: 'Step 3: Adding Shapes',
+            description: 'Add visual elements to your canvas by clicking on any shape.',
+            target: () => tourRefs[2].current,
+        },
+        {
+            title: 'Step 4: Modifying Appearance',
+            description: 'Edit your objects\'s appearance, including color, font size, stroke, and more, to match your vision.',
+            target: () => tourRefs[3].current,
+        },
+        {
+            title: 'Step 5: Writing Code',
+            description: 'Switch to coding mode to set object\'s occurrences. If you\'re stuck on syntax, the documentation is under the button at the top left corner.',
+            target: () => tourRefs[4].current,
+        },
+        {
+            title: 'Step 6: Managing Pages',
+            description: 'Add new pages and continue unfolding your presentation.',
+            target: () => tourRefs[5].current,
+        },
+        {
+            title: 'Step 7: Launching Your Presentation',
+            description: 'Start your presentation. If you need to make changes, you can always come back and edit.',
+            target: () => tourRefs[6].current,
+        },
+    ];
+
     return (
         <ConfigProvider
             theme={{
@@ -79,28 +120,31 @@ export const App = () => {
                 <ClipboardContainer>
                     <Layout className='screen-mode'>
                         <Layout.Header>
-                            <HeaderView />
+                            <HeaderView refs={[tourRefs[0], tourRefs[4], tourRefs[6]]}  />
                         </Layout.Header>
 
                         <Layout className='content' style={{ padding: margin.editor }}>
-                            <Layout.Header 
-                                className='header-toolbar-left' 
+                            <Layout.Header
+                                ref={tourRefs[3]}
+                                className='header-toolbar-left'
                                 style={{ margin: margin.tool }}>
-                                    <ToolView item={selectedItem} set={selectedSet} mode={applicationMode}  />
+                                    <ToolView item={selectedItem} set={selectedSet} mode={applicationMode} />
                             </Layout.Header>
 
                             <Layout>
                                 <Layout style={{ margin: margin.sideMid }}>
-                                    <Layout.Sider width={vogues.common.sidebarShape} className='sidebar-shape'>
-                                        <ShapeView />
+                                    <Layout.Sider 
+                                        ref={tourRefs[2]}
+                                        width={vogues.common.sidebarShape} className='sidebar-shape'>
+                                            <ShapeView />
                                     </Layout.Sider>
 
-                                    <Layout.Content >
+                                    <Layout.Content ref={tourRefs[1]}>
                                         <EditorView spacing={vogues.common.editorMargin} />
                                     </Layout.Content>
                                 </Layout>
 
-                                <Layout.Sider 
+                                <Layout.Sider
                                     width={vogues.common.sidebarCode} className='sidebar-right'
                                     style={{ display: sidebarWidth == 0 ? 'none' : '', margin: margin.sideRight }}
                                 >
@@ -109,10 +153,17 @@ export const App = () => {
                             </Layout>
                         </Layout>
 
-                        <Layout.Footer style={{ padding: 0, display: footerHeight == 0 ? 'none' : '' }} >
-                            <PagesView prevWidth={vogues.common.previewWidth} prevHeight={vogues.common.previewHeight} />
+                        <Layout.Footer 
+                            ref={tourRefs[5]}
+                            style={{ padding: 0, display: footerHeight == 0 ? 'none' : '' }} >
+                                <PagesView prevWidth={vogues.common.previewWidth} prevHeight={vogues.common.previewHeight} />
                         </Layout.Footer>
                     </Layout>
+                    <Tour
+                        open={isTourOpen}
+                        onClose={() => dispatch(setIsTourOpen(false))}
+                        steps={walkthroughTour}
+                    />
                     <CustomDragLayer />
                 </ClipboardContainer>
             </OverlayContainer>

diff --git a/src/const/texts.ts b/src/const/texts.ts
@@ -32,6 +32,7 @@ export const texts = {
         diagram: 'Canvas',
         distributeHorizontally: 'Distribute Horizontally',
         distributeVertically: 'Distribute Vertically',
+        documentation: 'Documentation',
         duplicate: 'Duplicate',
         error: 'Output',
         findIcon: 'Find Icon',
@@ -42,6 +43,7 @@ export const texts = {
         group: 'Group',
         groupTooltip: 'Group Items',
         height: 'Height',
+        help: 'Help',
         id: 'ID',
         icons: 'Icons',
         imageChangeURL: 'Change Image by URL',
@@ -104,6 +106,7 @@ export const texts = {
         ungroupTooltip: 'Ungroup Items',
         unsaved: 'unsaved',
         visual: 'Visual',
+        walkthrough: 'Walkthrough',
         width: 'Width',
         zoomIn: 'Zoom In',
         zoomOut: 'Zoom Out',

diff --git a/src/style/icomoon/demo-files/demo.css b/src/style/icomoon/demo-files/demo.css
@@ -147,15 +147,18 @@ p {
   font-size: 16px;
 }
 .fs1 {
-  font-size: 24px;
+  font-size: 20px;
 }
 .fs2 {
   font-size: 32px;
 }
 .fs3 {
-  font-size: 32px;
+  font-size: 24px;
 }
 .fs4 {
+  font-size: 32px;
+}
+.fs5 {
   font-size: 28px;
 }