mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-06 08:25:19 +01:00
updates to docs
This commit is contained in:
Mike Molinari
Val Erastov
parent
d5a3c5084b
commit
26bda73d05
2 changed files with 97 additions and 74 deletions
|
|
@ -25,14 +25,12 @@ JSketcher is a **parametric** 2D and 3D CAD modeler written in pure javascript
|
|||
|
||||
Please consider supporting this project by becoming a backer
|
||||
==============
|
||||
<object type="image/svg+xml" data="https://opencollective.com/jsketcher-ad3d/tiers/backer.svg?avatarHeight=100&width=3000"></object>
|
||||
<object type="image/svg+xml" data="https://opencollective.com/jsketcher-ad3d/tiers/badge.svg"></object>
|
||||
|
||||
<a href="https://opencollective.com/jsketcher-ad3d/"><image src="https://opencollective.com/jsketcher-ad3d/tiers/backer.svg?avatarHeight=300&width=3000"></image><image src="https://opencollective.com/jsketcher-ad3d/tiers/badge.svg"></image></a>
|
||||
|
||||
Current Status
|
||||
==============
|
||||
|
||||
JSketcher is a parametric 3d modeler employing a 2D constraint solver for sketches and the feature/history metaphor to build models. The 2D constraint solver is completely written in javascript/typescript and is implemented in both the 3D CAD and the 2D sketcher. Originally developed by xibyte to make models for 3d printing. Today JSketcher provides a rich set of tools for visualizing, selecting/interacting with 3D geometry, tracking and storing model history all built on the foundation of the 2D sketcher engine and employing OpenCascade for solid modeling operations. d
|
||||
JSketcher is a parametric 3d modeler employing a 2D constraint solver for sketches and the feature/history metaphor to build models. The 2D constraint solver is completely written in javascript/typescript and is implemented in both the 3D CAD and the 2D sketcher. Originally developed by xibyte to make models for 3d printing. Today JSketcher provides a rich set of tools for visualizing, selecting/interacting with 3D geometry, tracking and storing model history all built on the foundation of the 2D sketcher engine and employing OpenCascade for solid modeling operations.
|
||||
|
||||
Major Components and features
|
||||
==============
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
# Welcome to the JSketcher workbench developer guide!
|
||||
|
||||
This guide will describe how to create work bench commands and dialogs used as steps in the part history. JSketcher provides a standard way to define new part history commands that create both the new feature geometry and track the user input fields for a particular command. Input fields are standard user interface elements providing text boxes, numeric inputs and drop downs in addition to rich intelligent geometry selection widgets for sketches, edges, faces, ect.
|
||||
|
|
@ -6,6 +5,7 @@ This guide will describe how to create work bench commands and dialogs used as s
|
|||
JSketcher provides a structured mechanism for tracking part history operations and their related inputs. This history can be though of a short program. Each step in the series can generate new geometry and build off of references to the previous steps. Tracking IDs of geometry such as edges, faces and bodies is handled automatically and UI widgets are provided for the selection of these entities from feature command dialogs.
|
||||
|
||||
All part history feature commands are added to a folder where you define the:
|
||||
|
||||
- Command UI data model
|
||||
- Command execution code
|
||||
- Help file documentation for command
|
||||
|
|
@ -13,8 +13,6 @@ All part history feature commands are added to a folder where you define the:
|
|||
|
||||
Full list of OCC commands available here: web/app/cad/craft/e0/OCI.d.ts
|
||||
|
||||
|
||||
|
||||
# Files
|
||||
|
||||
When developing or extending existing workbenches each command needs its own folder under the workbench features folder.
|
||||
|
|
@ -24,6 +22,7 @@ When developing or extending existing workbenches each command needs its own fol
|
|||
**Example** : "jsketcher/workbenches/modeler/features/primitive_box/"
|
||||
|
||||
With in your feature folder you must create the following files.
|
||||
|
||||
- **./index.ts**
|
||||
- **./icon.svg (optional if not using an icon provided in the base package)**
|
||||
- **./docs/readme.md**
|
||||
|
|
@ -43,6 +42,7 @@ The export default object requires the following things to be defined.
|
|||
- **[paramsInfo](#paramsInfo-tool-tip-information)**: Template for history item info popup. Can be used to expose the current values and description info about the operation for tool tips and hover over context cues.
|
||||
- **[schema](#Schema-fields-widget-types)**: Model defining the feature dialogs list of input fields, labels and input types. Both the user interface and the feature input properties storage is defined by this unified schema. User interface input widgets are laid out in a vertical stack with in the feature dialog in the order you define here.
|
||||
- **run**: This is the actual code that will be executed when the preview button or the "OK" button in the feature dialog is pressed. The values defined in the schema are passed in and can be referenced by the simplified OpenCASCADE api provided by the JSKetcher OpenCASCADE wasm interface library. You can find more information about the functions exposed by this **[here](../web/app/cad/craft/e0/OCI.d.ts)**. The run function must return an object with the following format. This format for the return object is required for all feature commands.
|
||||
|
||||
```
|
||||
let resultsOfCommand ={
|
||||
created:[],
|
||||
|
|
@ -51,8 +51,8 @@ The export default object requires the following things to be defined.
|
|||
return resultsOfCommand;
|
||||
```
|
||||
|
||||
|
||||
**Example index.ts file**:
|
||||
|
||||
```
|
||||
import {roundValueForPresentation as r} from 'cad/craft/operationHelper';
|
||||
import {MFace} from "cad/model/mface";
|
||||
|
|
@ -158,27 +158,33 @@ export const ExtrudeOperation: OperationDescriptor<ExtrudeParams> = {
|
|||
```
|
||||
|
||||
# Schema fields widget types
|
||||
|
||||
The following widgets are provided to allow rapid development of new modeling feature types. The schema is used to build the stack of UI elements show to the user when a new feature is being added or edited.
|
||||
|
||||
Normal Form widgets for values:
|
||||
|
||||
- **[string](#string-widget)**
|
||||
- **[number](#number-widget)**
|
||||
- **[checkbox](#checkbox-widget)**
|
||||
- **[choice](#choice-widget)**
|
||||
|
||||
Special widgets for interaction with 3d geometry:
|
||||
|
||||
- **[select](#select-widget)**
|
||||
- **[vector](#vector-widget)**
|
||||
- **[boolean](#boolean-widget)**
|
||||
|
||||
Organization:
|
||||
|
||||
- **[image](#image-widget)**
|
||||
- **[text](#text-widget)**
|
||||
|
||||
Special Widgets:
|
||||
|
||||
- **[file](#file-widget)**
|
||||
|
||||
Example of adding a field to the schema. What ever order you place the items in the schema is the order they will be displayed in the resulting dialog.
|
||||
|
||||
```
|
||||
export default {
|
||||
//. . .
|
||||
|
|
@ -194,10 +200,11 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
## string widget
|
||||
|
||||
A simple text entry text entry field.
|
||||
Returns a string.
|
||||
|
||||
```
|
||||
{
|
||||
type: 'string',
|
||||
|
|
@ -206,10 +213,13 @@ Returns a string.
|
|||
defaultValue: "hello world",
|
||||
},
|
||||
```
|
||||
|
||||
## number widget
|
||||
|
||||
A simple numeric value entry field.
|
||||
Optionally if style property is set can be used as a spinner or slider instead of the regular textbox if left undefined.
|
||||
Returns a string.
|
||||
|
||||
```
|
||||
{
|
||||
type: 'number',
|
||||
|
|
@ -219,9 +229,12 @@ Returns a string.
|
|||
defaultValue: 50,
|
||||
},
|
||||
```
|
||||
|
||||
## checkbox widget
|
||||
|
||||
A simple checkbox.
|
||||
Returns a true or false value.
|
||||
|
||||
```
|
||||
{
|
||||
type: 'checkbox',
|
||||
|
|
@ -230,12 +243,15 @@ Returns a true or false value.
|
|||
defaultValue: false,
|
||||
},
|
||||
```
|
||||
|
||||
## choice widget
|
||||
|
||||
A choice selection widget providing two styles,
|
||||
Options are provided as an array of values.
|
||||
The style property can be either "dropdown" or "radio".
|
||||
|
||||
Dropdown example:
|
||||
|
||||
```
|
||||
{
|
||||
type: 'choice',
|
||||
|
|
@ -246,7 +262,9 @@ Dropdown example:
|
|||
defaultValue: "Round",
|
||||
},
|
||||
```
|
||||
|
||||
Radio example:
|
||||
|
||||
```
|
||||
{
|
||||
type: 'choice',
|
||||
|
|
@ -259,7 +277,8 @@ Radio example:
|
|||
```
|
||||
|
||||
## Select widget
|
||||
The select widget allows for user selection of objects from the 3d environnement.
|
||||
|
||||
The select widget allows for user selection of objects from the 3d environnement. fggfgf
|
||||
|
||||
The multi property dictates if the user is allowed to select more than one object from the model. When set to true an array is returned. When set as false only a single object is returned.
|
||||
|
||||
|
|
@ -268,6 +287,7 @@ The capture property is an array of object types permitted for user selection. T
|
|||
Default value is optional and provides a way to allow user selection performed before the command started to automatically populate with the users selection. For example in the extrude command if a user has a face selected before executing the extrude operation the face will be captured as a selection automatically.
|
||||
|
||||
example:
|
||||
|
||||
```
|
||||
{
|
||||
type: 'selection',
|
||||
|
|
@ -282,8 +302,8 @@ example:
|
|||
},
|
||||
```
|
||||
|
||||
|
||||
## Vector widget
|
||||
|
||||
Vector widget provides a method to select a direction in JSketcher.
|
||||
The direction can be derived from several input types.
|
||||
If a face is selected this will return the normal to the face.
|
||||
|
|
@ -293,6 +313,7 @@ A datum axis can also be used to specify a direction.
|
|||
A checkbox is also provided with his widget that allows the user to invert or "flip" the direction.
|
||||
|
||||
example:
|
||||
|
||||
```
|
||||
{
|
||||
type: 'vector',
|
||||
|
|
@ -303,10 +324,12 @@ example:
|
|||
```
|
||||
|
||||
## boolean widget
|
||||
|
||||
Boolean widget is a special widget that provides a mechanism to capture the intent of the boolean modeling operation and the target shell from the users 3d selection.
|
||||
A drop down menu is provided to pick the type of boolean operation with the following options. "None", "Unite", "Subtract" or "Intersect".
|
||||
|
||||
example:
|
||||
|
||||
```
|
||||
{
|
||||
type: 'boolean',
|
||||
|
|
@ -317,12 +340,17 @@ example:
|
|||
```
|
||||
|
||||
There is a special function that is ued in conjunction with the boolean widget placed as the return from the run section of the feature code:
|
||||
|
||||
```
|
||||
return occ.utils.applyBooleanModifier(tools, params.boolean);
|
||||
```
|
||||
|
||||
Normally the return would consist of an object containing the arrays for consumed and created objects. This bit of code takes care of the business of populating these arrays and is the preferred method for performing all boolean operations in JSketcher.
|
||||
|
||||
## image widget
|
||||
|
||||
Allows for an image to be inserted in to the command dialog to illustrate a commands intent. For example you might show an illustration of what each parameter the user sets would be used in generating a feature.
|
||||
|
||||
```
|
||||
{
|
||||
type: 'image',
|
||||
|
|
@ -332,12 +360,15 @@ Allows for an image to be inserted in to the command dialog to illustrate a comm
|
|||
```
|
||||
|
||||
You must add an import at the top of the command typescript file to use an image in a dialog.
|
||||
|
||||
```
|
||||
import imageStringLoadedFromImport from './icon.svg';
|
||||
```
|
||||
|
||||
## text widget
|
||||
|
||||
Allows for text to be added to the dialog with instructions or more sophisticated descriptions of an operation to be shown to the user.
|
||||
|
||||
```
|
||||
{
|
||||
type: 'text',
|
||||
|
|
@ -347,7 +378,9 @@ Allows for text to be added to the dialog with instructions or more sophisticate
|
|||
```
|
||||
|
||||
## file widget
|
||||
|
||||
Allows for from the local file system to be selected and the contents be made avaiable to the feature.
|
||||
|
||||
```
|
||||
{
|
||||
type: 'file',
|
||||
|
|
@ -357,10 +390,10 @@ Allows for from the local file system to be selected and the contents be made av
|
|||
},
|
||||
```
|
||||
|
||||
## paramsInfo tool tip information
|
||||
|
||||
|
||||
# paramsInfo tool tip information
|
||||
The paramsInfo section is used to define a string that shows up when you mouse over a feature from the time line. You can pass in items defined in the schema and use them to form the string template for the tool top text. The tooltip text is displayed when mousing over the feature in the part history.
|
||||
|
||||
```
|
||||
export default {
|
||||
//. . .
|
||||
|
|
@ -369,11 +402,8 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Entity types
|
||||
|
||||
- EntityKind.SHELL
|
||||
- Shell objects represent a solid object. In other cad systems these are some times referred to as bodies.
|
||||
- EntityKind.FACE
|
||||
|
|
@ -392,9 +422,4 @@ export default {
|
|||
- EntityKind.LOOP
|
||||
- A loop is a 3D curve.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# More documentation to come
|
||||
|
|
|
|||
Loading…
Reference in a new issue