code-slide · ducquando · May 4, 2024 · Apr 29, 2024 · Apr 29, 2024 · Apr 30, 2024
diff --git a/codecov.yml b/codecov.yml
@@ -1,3 +1,4 @@
 ignore:
   - "**/snap-manager.ts"
-  - "**/shapes/**/*.ts"
+  - "**/shapes/**/*.ts"
+  - "**/loading.ts"
diff --git a/index.html b/index.html
@@ -3,19 +3,20 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="A presentation tool for quick animation creations using clicks and codes">
 
     <!-- Facebook Meta Tags -->
     <meta property='og:url' content='https://www.codeslide.net'>
     <meta property='og:type' content='website'>
     <meta property='og:title' content='CodeSlide'>
-    <meta property='og:description' content='A presentation tool for simplified sequential animations'>
+    <meta property='og:description' content='A presentation tool for quick animation creations using clicks and codes'>
 
     <!-- Twitter Meta Tags -->
     <meta name='twitter:card' content='summary_large_image'>
     <meta property='twitter:domain' content='codeslide.net'>
     <meta property='twitter:url' content='https://www.codeslide.net'>
     <meta name='twitter:title' content='CodeSlide'>
-    <meta name='twitter:description' content='A presentation tool for simplified sequential animations'>
+    <meta name='twitter:description' content='A presentation tool for quick animation creations using clicks and codes'>
 
     <!-- Favicon -->
     <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codeslide.net",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -51,36 +51,42 @@ export const App = () => {
             target: () => tourRefs[1].current,
         },
         {
-            title: 'Add Shapes',
+            title: 'Add Objects',
             description: 'Add visual elements to your canvas by clicking on any shape.',
+            placement: 'rightTop',
             target: () => tourRefs[2].current,
         },
         {
             title: 'Modify Appearance',
             description: 'Edit your objects\'s appearance such as color, font size, and stroke.',
+            placement: 'bottom',
             target: () => tourRefs[3].current,
         },
         {
             title: 'Write 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.',
+            placement: 'bottomLeft',
             target: () => tourRefs[4].current,
         },
         {
             title: 'Manage Pages',
             description: 'Add new pages and continue unfolding your presentation.',
+            placement: 'top',
             target: () => tourRefs[5].current,
         },
         {
-            title: 'Launch Your Presentation',
+            title: 'Launch Presentation',
             description: 'Start your presentation. If you need to make changes, you can always come back and edit. Enjoy!',
+            placement: 'bottomLeft',
             target: () => tourRefs[6].current,
         },
     ];
 
     const firstTour: TourProps['steps'] = [
         {
             title: 'Welcome to CodeSlide',
-            description: 'CodeSlide is a tool for creating presentations with code. You can create slides with shapes, text, and images, and animate them with code. Let\'s get started!',
+            description: 'CodeSlide is a tool for creating presentations with code. You can create slides with shapes, text, and images, and animate them with code.',
+            cover: <img src="https://imgur.com/XYeNUob.png" alt="CodeSlide Thumbnail" />,
             target: null,
         },
         ...walkthroughTour

diff --git a/src/const/keys.ts b/src/const/keys.ts
@@ -12,6 +12,7 @@ export const keys = {
         group: 'MOD + G',
         redo: 'MOD + Y',
         save: 'MOD + S',
+        download: 'MOD + SHIFT + S',
         selectAll: 'MOD + A',
         undo: 'MOD + Z',
         ungroup: 'MOD + SHIFT + G',

diff --git a/src/const/texts.ts b/src/const/texts.ts
@@ -81,14 +81,17 @@ export const texts = {
         properties: 'Properties',
         recent: 'Recent',
         redo: 'Redo',
-        remove: 'Delete',
         rename: 'Rename',
         renameTooltip: 'Rename presentation',
+        remove: 'Delete',
         removeTooltip: 'Delete selected items',
         reportIssue: 'Report',
-        saveDiagram: 'Download',
+        saveDiagram: 'Save As',
+        saveDiagramTooltip: 'Save As',
+        saveDiagramTemp: 'Save',
+        saveDiagramTempTooltip: 'Save',
+        saveDiagramToFile: 'Export',
         saveDiagramToFileTooltip: 'Export to PDF',
-        saveDiagramTooltip: 'Download',
         savingDiagram: 'Saving presentation...',
         savingDiagramDone: 'Saving presentation completed successfully.',
         savingDiagramFailed: 'Saving presentation failed with internal error.',

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -11,8 +11,6 @@ export * from './react/ColorPicker';
 export * from './react/Clipboard';
 export * from './react/Grid';
 export * from './react/hooks';
-export * from './react/MarkerButton';
 export * from './react/Shortcut';
 export * from './react/Title';
-export * from './react/UserReport';
 export * from './utils';
diff --git a/src/core/react/ColorPicker.tsx b/src/core/react/ColorPicker.tsx
@@ -140,6 +140,7 @@ export const ColorPicker = React.memo((props: ColorPickerProps) => {
             { (!icon)
                 ? <Button 
                     className='color-picker-circle tool-menu-item' type='text'
+                    aria-label='Select Color'
                     style={{ display: disabled ? 'none' : '' }}
                 >
                     <div className='color-picker-color'>
@@ -148,6 +149,7 @@ export const ColorPicker = React.memo((props: ColorPickerProps) => {
                 </Button>
                 : <Button 
                     className='color-picker-button tool-menu-item' type='text' 
+                    aria-label='Select Color'
                     icon={icon} style={{ fill: colorHex, display: disabled ? 'none' : '' }} 
                 />
             }

diff --git a/src/core/react/MarkerButton.tsx b/src/core/react/MarkerButton.tsx
diff --git a/src/core/react/UserReport.tsx b/src/core/react/UserReport.tsx
diff --git a/src/style/_common.scss b/src/style/_common.scss
@@ -249,6 +249,27 @@ tspan {
     margin-right: .5rem;
 }
 
+.ant-tour-next-btn {
+    background-color: $color-theme-blue-lightest; 
+    color: $color-text !important;
+    font-weight: 500;
+    box-shadow: none;
+
+    &:hover {
+        background-color: $color-border !important;
+    }
+}
+
+.ant-tour-prev-btn {
+    color: $color-text !important;
+    box-shadow: none;
+
+    &:hover {
+        background-color: $color-border !important;
+        border-color: $color-border !important;
+    }
+}
+
 //
 // > Properties
 //

diff --git a/src/wireframes/components/ShapeView.tsx b/src/wireframes/components/ShapeView.tsx
@@ -156,7 +156,7 @@ export const ShapeView = React.memo(() => {
                 align={{ offset: OFFSET_DROPDOWN }}
                 trigger={['click']}
             >
-                <Button className='item' type='text' >
+                <Button className='item' type='text' aria-label='Add Text'>
                     <TextIcon />
                 </Button>
             </Dropdown>
@@ -170,7 +170,7 @@ export const ShapeView = React.memo(() => {
                 align={{ offset: OFFSET_DROPDOWN }}
                 trigger={['click']}
             >
-                <Button className='item' type='text' >
+                <Button className='item' type='text' aria-label='Add table'>
                     <TableIcon />
                 </Button>
             </Dropdown>
@@ -184,7 +184,7 @@ export const ShapeView = React.memo(() => {
                 align={{ offset: OFFSET_DROPDOWN }}
                 trigger={['click']}
             >
-                <Button className='item' type='text' >
+                <Button className='item' type='text' aria-label='Add Shape'>
                     <ShapesIcon />
                 </Button>
             </Dropdown>
@@ -198,7 +198,7 @@ export const ShapeView = React.memo(() => {
                 align={{ offset: OFFSET_DROPDOWN }}
                 trigger={['click']}
             >
-                <Button className='item' type='text' >
+                <Button className='item' type='text' aria-label='Add Line'>
                     <LineUpIcon />
                 </Button>
             </Dropdown>
@@ -212,7 +212,7 @@ export const ShapeView = React.memo(() => {
                 align={{ offset: OFFSET_DROPDOWN }}
                 trigger={['click']}
             >
-                <Button className='item' type='text' >
+                <Button className='item' type='text' aria-label='Add Image'>
                     <ImageIcon />
                 </Button>
             </Dropdown>

diff --git a/src/wireframes/components/actions/Components.tsx b/src/wireframes/components/actions/Components.tsx
@@ -47,7 +47,7 @@ export const ActionMenuButton = React.memo((props: ActionProps & ButtonProps) =>
     return (
         <>
             <Tooltip mouseEnterDelay={1} title={title}>
-                <Button {...other} type={type} className={'tool-menu-item'} disabled={disabled} onClick={onAction}>
+                <Button {...other} type={type} className={'tool-menu-item'} disabled={disabled} onClick={onAction} aria-label={tooltip}>
                     <ButtonContent icon={icon} label={label} displayMode={displayMode || 'Icon'} />
                 </Button>
             </Tooltip>

diff --git a/src/wireframes/components/actions/use-loading.ts b/src/wireframes/components/actions/use-loading.ts
@@ -10,7 +10,7 @@ import * as React from 'react';
 import { useAppDispatch } from '@app/store';
 import { useEventCallback, useOpenFile } from '@app/core';
 import { texts } from '@app/const';
-import { downloadDiagramToFile, getDiagrams, loadDiagramFromFile, newDiagram, useStore } from '@app/wireframes/model';
+import { downloadDiagramToFile, getDiagrams, loadDiagramFromFile, newDiagram, saveDiagramTemp, useStore } from '@app/wireframes/model';
 import { keys } from '@app/const';
 import { UIAction } from './shared';
 
@@ -39,6 +39,10 @@ export function useLoading() {
         dispatch(downloadDiagramToFile());
     });
 
+    const doSave = useEventCallback(() => {
+        dispatch(saveDiagramTemp());
+    });
+
     const newDiagramAction: UIAction = React.useMemo(() => ({
         disabled: false,
         icon: 'icon-new',
@@ -48,15 +52,24 @@ export function useLoading() {
         onAction: doNew,
     }), [doNew]);
 
-    const downloadDiagram: UIAction = React.useMemo(() => ({
+    const downloadDiagramAction: UIAction = React.useMemo(() => ({
         disabled: !canSave,
         icon: 'icon-floppy-o',
         label: texts.common.saveDiagramTooltip,
-        shortcut: keys.common.save,
+        shortcut: keys.common.download,
         tooltip: texts.common.saveDiagramTooltip,
         onAction: doDownload,
     }), [doDownload, canSave]);
 
+    const saveDiagramAction: UIAction = React.useMemo(() => ({
+        disabled: !canSave,
+        icon: 'icon-floppy-o',
+        label: texts.common.saveDiagramTempTooltip,
+        shortcut: keys.common.save,
+        tooltip: texts.common.saveDiagramTempTooltip,
+        onAction: doSave,
+    }), [doSave, canSave]);
+
     const openDiagramAction: UIAction = React.useMemo(() => ({
         disabled: false,
         icon: 'icon-folder-open',
@@ -65,5 +78,5 @@ export function useLoading() {
         onAction: openHandler,
     }), [openHandler]);
 
-    return { newDiagram: newDiagramAction, openDiagramAction, downloadDiagram };
+    return { newDiagram: newDiagramAction, openDiagramAction, downloadDiagram: downloadDiagramAction, saveDiagram: saveDiagramAction };
 }
diff --git a/src/wireframes/components/headers/ArrangeHeader.tsx b/src/wireframes/components/headers/ArrangeHeader.tsx
@@ -11,12 +11,15 @@ import { useAppDispatch } from '@app/store';
 import { Shortcut, useEventCallback } from '@app/core';
 import { calculateSelection, getDiagram, selectItems, useStore } from '@app/wireframes/model';
 import { keys } from '@app/const';
-import { useRemove } from '../actions';
+import { useLoading, useRemove } from '../actions';
 
 export const ArrangeHeader = React.memo(() => {
     const dispatch = useAppDispatch();
     const forRemove = useRemove();
+    const forLoading = useLoading();
     const selectedDiagram = useStore(getDiagram);
+    const saveDiagram = forLoading.saveDiagram;
+    const downloadDiagram = forLoading.downloadDiagram;
 
     const doSelectAll = useEventCallback(() => {
         if (selectedDiagram) {
@@ -38,6 +41,10 @@ export const ArrangeHeader = React.memo(() => {
             }
 
             <Shortcut disabled={!selectedDiagram} onPressed={doSelectAll} keys={keys.common.selectAll} />
+
+            <Shortcut disabled={saveDiagram.disabled} onPressed={saveDiagram.onAction} keys={saveDiagram.shortcut ?? keys.common.save} />
+
+            <Shortcut disabled={downloadDiagram.disabled} onPressed={downloadDiagram.onAction} keys={downloadDiagram.shortcut ?? keys.common.download} />
         </>
     );
 });

diff --git a/src/wireframes/components/headers/IdHeader.tsx b/src/wireframes/components/headers/IdHeader.tsx
@@ -56,6 +56,7 @@ export const IdHeader = () => {
                         <Button 
                             className='shape-cta'
                             type='text'
+                            aria-label='Update ID'
                             icon={<CheckOutlined />}
                             onClick={handleUpdateId} />
                         : <></>

diff --git a/src/wireframes/components/headers/ModeHeader.tsx b/src/wireframes/components/headers/ModeHeader.tsx
@@ -42,6 +42,7 @@ export const ModeHeader = React.memo(() => {
                 <Tooltip title={`${isPageOn ? 'Hide' : 'Show'} Pages Panel`} >
                     <Button
                         type="text" shape="circle"
+                        aria-label={`${isPageOn ? 'Hide' : 'Show'} Pages Panel`}
                         icon={<IconOutline icon={PageIcon} />}
                         style={{ backgroundColor: isPageOn ? vogues.color.white : ''}}
                         onClick={togglePagePanel}
@@ -51,6 +52,7 @@ export const ModeHeader = React.memo(() => {
                     <Button
                         type="text" shape="circle"
                         icon={<IconOutline icon={AnimationIcon} />}
+                        aria-label={`Open ${isAnimationOn ? 'Animation' : 'Design'} Mode`}
                         style={{ backgroundColor: isAnimationOn ? vogues.color.white : ''}}
                         onClick={toggleAnimationPanel}
                     />