Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more features #3

Merged
merged 3 commits into from
Apr 18, 2024
Merged

Add more features #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72db6ad
Fix line shape and prevent right click
ducquando Apr 17, 2024
c004b0c
Remove border from Code editor
ducquando Apr 18, 2024
3d43058
Add walkthrough and documentation
ducquando Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 81 additions & 21 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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) {
Expand All @@ -46,6 +41,61 @@ export const App = () => {
}
}, [dispatch]);

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={{
Expand All @@ -70,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 }}
>
Expand All @@ -100,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>
Expand Down
5 changes: 4 additions & 1 deletion src/const/texts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const texts = {
diagram: 'Canvas',
distributeHorizontally: 'Distribute Horizontally',
distributeVertically: 'Distribute Vertically',
documentation: 'Documentation',
duplicate: 'Duplicate',
error: 'Output',
findIcon: 'Find Icon',
Expand All @@ -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',
Expand Down Expand Up @@ -82,7 +84,7 @@ export const texts = {
renameTooltip: 'Rename presentation',
removeTooltip: 'Delete selected items',
saveDiagram: 'Download',
saveDiagramToFileTooltip: 'Export',
saveDiagramToFileTooltip: 'Export to PDF',
saveDiagramTooltip: 'Download',
savingDiagram: 'Saving presentation...',
savingDiagramDone: 'Saving presentation completed successfully.',
Expand All @@ -104,6 +106,7 @@ export const texts = {
ungroupTooltip: 'Ungroup Items',
unsaved: 'unsaved',
visual: 'Visual',
walkthrough: 'Walkthrough',
width: 'Width',
zoomIn: 'Zoom In',
zoomOut: 'Zoom Out',
Expand Down
7 changes: 5 additions & 2 deletions src/style/icomoon/demo-files/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Loading