+
+
+
three.cad
@@ -194,11 +197,15 @@ export const NavBar = () => {
))
}
-
+
+
{
- dispatch({ type: 'set-help', status: true })
+ setModal(true)
}
} />
+
+ {/* */}
+
@@ -206,6 +213,11 @@ export const NavBar = () => {
+ {
+ modal &&
+
+
+ }
}
diff --git a/src/react/quickStart.jsx b/src/react/quickStart.jsx
new file mode 100644
index 0000000..e54d5dd
--- /dev/null
+++ b/src/react/quickStart.jsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
+import { useDispatch, useSelector } from "react-redux"
+
+import { Clip } from './clip'
+import { Modal } from './modal'
+
+import { MdZoomIn, MdSave, MdFolder, MdInsertDriveFile, MdHelpOutline } from 'react-icons/md'
+import { FaRegPlayCircle, FaEdit, FaLinkedin, FaGithub } from 'react-icons/fa'
+
+import * as Icon from "./icons";
+
+
+
+const clipArr = [
+ ['basic-workflow.mp4', 'Basic model creation workflow'],
+ ['load-file-and-edit.mp4', 'Loading and editing models'],
+ ['export-to-3dprint.mp4', 'Exporting model for 3D printing'],
+]
+
+const navArr = [
+ 'Mouse Navigation',
+ [Icon.Select, 'Select', [
+ Icon.MouseLeft, '+ drag'
+ ]],
+ [Icon.Rotate, 'Rotate', [
+ Icon.MouseRight
+ ]],
+ [MdZoomIn, 'Zoom', [
+ Icon.MouseScroll
+ ]],
+ [Icon.Pan, 'Pan', [
+ Icon.MouseMiddle, '(or', () =>
Ctrl
, ' + ', Icon.MouseRight, ') + drag'
+ ]],
+ '\u00A0',
+ 'Model Toolbar',
+ [FaEdit, 'Sketch', ['Initiates a new sketch based on the the user must first select a plane, or three points on existing extrusions.']],
+ [Icon.Extrude, 'Extrude', ['Intiates new extrusion dialog. before clickin gthis button. The user must firs select a sketch to extrude from']],
+ [Icon.Union, 'Union', ['Creates a new solid that is a boolean union or two selected solids.']],
+ [Icon.Subtract, 'Substract', ['Creates a new solid that is a boolean subtraction of the second selected solid from the first selected solid']],
+ [Icon.Intersect, 'Intersect', ['Creates a new solid that is a boolean intersection or two selected solids.']],
+ [MdInsertDriveFile, 'New Document', ['Wipes the current workspace and starts a fresh document']],
+ [MdSave, 'Save', ['saves current document. on the inital save the user can specify save location and file name']],
+ [MdFolder, 'Open', ['loads an existing document from the local disk.']],
+ [Icon.Stl, 'Export to STL', ['Exports selected solid to 3d print friendly stl format']],
+
+ '\u00A0',
+ 'Sketch Toolbar',
+ [Icon.Extrude, 'Extrude', ['Creates a new extrusion from the current sketch']],
+ [Icon.Line, 'Line', ['Subsequent clicks on the canvas define the vertices of the line segment chain.']],
+ [Icon.Arc, 'Arc', ['In the 3 subsequent mouse clicks, the first sets the start point, the seconds the endpoint, and the third the radius.']],
+ [Icon.Dimension, 'Dimension', ['Adds a distance when 2 points, or 1 point and 1 line are selected. Adds an angle when two lines are selected.']],
+ [Icon.Coincident, 'Coincident', ['Adds a coincident contraint between two points, or a line and a point.']],
+ [Icon.Vertical, 'Vertical', ['Aligns the the selected line, or two selected points with the y-axis']],
+ [Icon.Horizontal, 'Horizontal', ['Aligns the the selected line, or two selected points with the x-axis']],
+ [Icon.Tangent, 'Tangent', ['Adds a tangent constraint between selected two arcs, or a line and a arc. Entities must first be coincident']],
+
+
+]
+
+export const QuickStart = () => {
+
+
+ const [clip, setClip] = useState(null)
+ return
+
+
+
+
+ Common workflow walkthoughs
+
+
+ {
+ clipArr.map((ele, idx) => (
+
setClip(ele)}
+ key={idx}
+ >
+
+ {ele[1]}
+
+ ))
+ }
+
+
+ {
+ navArr.map((row, i) => (
+ typeof row === 'string' ?
+
+ {row}
+
+ :
+
+
+ {row[1]}
+ {React.createElement(row[0],
+ {
+ className: "fill-current text-gray-100 flex-shrink-0",
+ width: '2.5em', height: '2.5em', size: '2.5em',
+ style: { padding: '0.5em' }
+ }
+ )}
+
+
+
+ {
+ row[2].map(
+ (Col, key) => typeof Col === 'string' ?
+ Col
+ :
+
+ )
+ }
+
+
+ ))
+ }
+
+
+
+
+
+ {
+ clip &&
+
+
+ }
+
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/src/react/reducer.js b/src/react/reducer.js
index 57eb7cf..a7bde75 100644
--- a/src/react/reducer.js
+++ b/src/react/reducer.js
@@ -195,15 +195,6 @@ export function ui(state = defaultUIState, action) {
mode: { $set: action.mode }
})
- case 'set-help':
- return update(state, {
- help: { $set: action.status }
- })
- case 'toggle-help':
- return update(state, {
- help: { $set: !state.help }
- })
-
default:
return state
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5e98c0e..9cd4d9b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
gray: colors.trueGray,
green: colors.emerald,
red: colors.red,
- }
+ },
},
variants: {
extend: {},