ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Onboarding updates (#1967)

Browse Source 
* Make onboarding line references dynamic and error if they aren't found
Fixes https://github.com/KittyCAD/modeling-app/issues/1918

* More clear and correct Sketch onboarding step
Fixes https://github.com/KittyCAD/modeling-app/issues/1790
Fixes https://github.com/KittyCAD/modeling-app/issues/1789

* Make sample code line references dynamic and error on app start if they break so we can know before release
Fixes https://github.com/KittyCAD/modeling-app/issues/1918

* Better error message for searchText failure

* JB onboarding feedback

* Make list more explicit, instruct to hold down key first
This commit is contained in:
Frank Noirot
2024-03-29 12:56:32 -04:00
committed by GitHub
parent 6f36371e6d
commit 0360a4021b
6 changed files with 69 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/exampleKcl.ts
View File

@ -34,5 +34,28 @@ const bracket = startSketchOn('XY')
|> fillet({
radius: filletR + thickness,
tags: [getNextAdjacentEdge('outerEdge', %)]
}, %)
`
}, %)`
function findLineInExampleCode({
searchText,
example = bracket,
}: {
searchText: string
example?: string
}) {
const lines = example.split('\n')
const lineNumber = lines.findIndex((l) => l.includes(searchText)) + 1
if (lineNumber === 0) {
throw new Error(
`Could not find the line with search text "${searchText}" in the example code. Was it removed?`
)
}
return lineNumber
}
export const bracketWidthConstantLine = findLineInExampleCode({
searchText: 'const width',
})
export const bracketThicknessCalculationLine = findLineInExampleCode({
searchText: 'const thickness',
})

3
src/routes/Onboarding/Export.tsx
View File

@ -21,7 +21,8 @@ export default function Export() {
<section className="flex-1">
<h2 className="text-2xl font-bold">Export</h2>
<p className="my-4">
Try opening the project menu and clicking "Export Part".
Try opening the project menu and clicking the "Export Part" at the
bottom of the pane.
</p>
<p className="my-4">
{APP_NAME} uses{' '}

31
src/routes/Onboarding/InteractiveNumbers.tsx
View File

@ -2,6 +2,7 @@ import { OnboardingButtons, kbdClasses, useDismiss, useNextClick } from '.'
import { onboardingPaths } from 'routes/Onboarding/paths'
import { useStore } from '../../useStore'
import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
import { bracketWidthConstantLine } from 'lib/exampleKcl'
export default function InteractiveNumbers() {
const { buttonDownInStream } = useStore((s) => ({
@ -26,11 +27,25 @@ export default function InteractiveNumbers() {
<h2 className="text-3xl font-bold">Hybrid editing</h2>
<p className="my-4">
Try changing the value of <code>width</code> on line 2 by holding
the <kbd className={kbdClasses}>Alt</kbd> (or{' '}
<kbd className={kbdClasses}>Option</kbd>) key and dragging the
number left and right. You can hold down different modifier keys to
change the value by different increments:
We believe editing in Modeling App should feel fluid between code
and point-and-click, so that you can work in the way that feels most
natural to you. Let's try something out that demonstrates this
principle, by editing numbers without typing.
</p>
<ol className="pl-6 my-4 list-decimal">
<li className="list-decimal">
Press and hold the <kbd className={kbdClasses}>Alt</kbd> (or{' '}
<kbd className={kbdClasses}>Option</kbd>) key
</li>
<li>
Hover over the number assigned to <code>width</code> on line{' '}
{bracketWidthConstantLine}
</li>
<li>Drag the number left and right to change its value</li>
</ol>
<p className="my-4">
You can hold down different modifier keys to change the value by
different increments:
</p>
<ul className="flex flex-col text-sm my-4 mx-12 divide-y divide-chalkboard-20 dark:divide-chalkboard-70">
<li className="flex justify-between m-0 px-0 py-2">
@ -70,10 +85,8 @@ export default function InteractiveNumbers() {
lets you interact with numbers in your code by dragging them around.
</p>
<p className="my-4">
We believe editing in Modeling App should feel fluid between code
and point-and-click, so that you can work in the way that feels most
natural to you. We're going to keep extending the text editor, and
we'd love to hear your ideas for how to make it better.
We're going to keep extending the text editor, and we'd love to hear
your ideas for how to make it better.
</p>
</section>
<OnboardingButtons

11
src/routes/Onboarding/Introduction.tsx
View File

@ -141,10 +141,11 @@ export default function Introduction() {
<section className="my-12">
<p className="my-4">
Welcome to {APP_NAME}! This is a hardware design tool that lets you
edit visually, with code, or both. It's powered by the first API
created for anyone to build hardware design tools. The 3D view is
not running on your computer, but is instead being streamed to you
from a remote GPU as video.
edit visually, with code, or both. It's powered by the KittyCAD
Design API, the first API created for anyone to build hardware
design tools. The 3D view is not running on your computer, but is
instead being streamed to you from an instance of our Geometry
Engine on a remote GPU as video.
</p>
<p className="my-4">
This is an alpha release, so you will encounter bugs and missing
@ -173,7 +174,7 @@ export default function Introduction() {
className="mt-6"
dismiss={dismiss}
next={next}
nextText="Camera"
nextText="Mouse Controls"
/>
</div>
</div>

6
src/routes/Onboarding/ParametricModeling.tsx
View File

@ -4,6 +4,7 @@ import { useStore } from '../../useStore'
import { useBackdropHighlight } from 'hooks/useBackdropHighlight'
import { Themes, getSystemTheme } from 'lib/theme'
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import { bracketThicknessCalculationLine } from 'lib/exampleKcl'
export default function ParametricModeling() {
const { buttonDownInStream } = useStore((s) => ({
@ -61,7 +62,10 @@ export default function ParametricModeling() {
<p className="my-4">
We are able to easily calculate the thickness of the material based
on the width of the bracket to meet a set safety factor on{' '}
<em className="text-energy-60 dark:text-energy-20">line 14</em>.
<em className="text-energy-60 dark:text-energy-20">
line {bracketThicknessCalculationLine}
</em>
.
</p>
</section>
<OnboardingButtons

12
src/routes/Onboarding/Sketching.tsx
View File

@ -30,9 +30,15 @@ export default function Sketching() {
<h1 className="text-2xl font-bold">Sketching</h1>
<p className="my-4">
Our 3D modeling tools are still very much a work in progress, but we
want to show you some early features. Try creating a sketch by
clicking Create Sketch in the top toolbar, then clicking the Line
tool, and clicking in the 3D view.
want to show you some early features. Try sketching by clicking Start
Sketch in the top toolbar and selecting a plane to draw on. Now you
can start clicking to draw lines and shapes.
</p>
<p className="my-4">
The Line tool will be equipped by default, but you can switch it to as
you go by clicking another tool in the toolbar, or unequip it by
clicking the Line tool button. With no tool selected, you can move
points and add constraints to your sketch.
</p>
<p className="my-4">
Watch the code pane as you click. Point-and-click interactions are