@univerjs-pro/engine-shape 0.21.1 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +19 -67
  2. package/lib/cjs/index.js +1 -1
  3. package/lib/es/index.js +1 -1
  4. package/lib/index.js +1 -1
  5. package/lib/umd/index.js +1 -1
  6. package/package.json +7 -8
package/README.md CHANGED
@@ -1,82 +1,34 @@
1
1
  # @univerjs-pro/engine-shape
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/@univerjs-pro/engine-shape)](https://npmjs.org/packages/@univerjs-pro/engine-shape)
4
- [![license](https://img.shields.io/npm/l/@univerjs-pro/engine-shape)](https://img.shields.io/npm/l/@univerjs-pro/engine-shape)
3
+ [![npm version](https://img.shields.io/npm/v/@univerjs-pro/engine-shape?style=flat-square)](https://npmjs.com/package/@univerjs-pro/engine-shape)
4
+ [![downloads](https://img.shields.io/npm/dm/@univerjs-pro/engine-shape?style=flat-square)](https://npmjs.com/package/@univerjs-pro/engine-shape)
5
5
 
6
- ## Introduction
6
+ `@univerjs-pro/engine-shape` provides preset shape model and rendering utilities for Univer Pro.
7
7
 
8
- Engine Shape is the core shape definition and rendering engine for Univer. It provides 180+ preset shapes compatible with Excel/OOXML, covering basic shapes, arrows, flowcharts, callouts, connectors, and more. This package handles shape geometry computation, path rendering, fill/stroke styling, adjust points, connection sites, and connector routing.
8
+ ## Package Overview
9
9
 
10
- ## Usage
11
-
12
- ### Installation
10
+ | Package | UMD global | CSS | Locales | Facade entry |
11
+ | --- | --- | :---: | :---: | :---: |
12
+ | `@univerjs-pro/engine-shape` | `UniverProEngineShape` | No | No | No |
13
13
 
14
- ```shell
15
- # Using npm
16
- npm install @univerjs-pro/engine-shape
14
+ ## Installation
17
15
 
18
- # Using pnpm
16
+ ```sh
19
17
  pnpm add @univerjs-pro/engine-shape
18
+ # or
19
+ npm install @univerjs-pro/engine-shape
20
20
  ```
21
21
 
22
- ## Features
23
-
24
- ### Preset Shapes
25
-
26
- The library provides 180+ preset shape types organized into the following categories:
27
-
28
- | Category | Examples |
29
- |---|---|
30
- | **Basic Shapes** | Rectangle, RoundRectangle, Ellipse, Diamond, Triangle, Hexagon, Octagon, Star, etc. |
31
- | **Arrows** | RightArrow, LeftArrow, UpArrow, BentArrow, CurvedArrow, StripedRightArrow, Chevron, etc. |
32
- | **Flowcharts** | Process, Decision, InputOutput, Document, Terminator, Preparation, ManualInput, etc. |
33
- | **Callouts** | WedgeRectCallout, WedgeEllipseCallout, CloudCallout, BorderCallout, AccentCallout, etc. |
34
- | **Stars & Ribbons** | Star4–Star32, Ribbon, EllipseRibbon, VerticalScroll, HorizontalScroll, Wave, etc. |
35
- | **Math** | MathPlus, MathMinus, MathMultiply, MathDivide, MathEqual, MathNotEqual |
36
- | **Connectors** | StraightConnector, BentConnector (2–5), CurvedConnector (2–5), Line |
37
- | **Action Buttons** | Home, Help, Information, Return, BackPrevious, ForwardNext, etc. |
38
- | **Others** | Cube, Can, Heart, Sun, Moon, SmileyFace, Cloud, Funnel, Gear, etc. |
39
-
40
- ### Fill & Stroke
41
-
42
- All shapes support three fill modes:
43
-
44
- - **No fill** — transparent background.
45
- - **Solid fill** — a single solid color.
46
- - **Gradient fill** — linear or radial gradients.
47
-
48
- Stroke styling is fully configurable, including color, width, dash patterns (solid, dash, dot, etc.), and line join/cap styles.
22
+ Keep all `@univerjs/*` and `@univerjs-pro/*` packages on the same version.
49
23
 
50
- ### Text in Shapes
51
-
52
- Most shapes support inline text editing via double-click. Rich text formatting is supported within shape text, including font size, color, bold, italic, and alignment.
53
-
54
- ### Adjust Points
55
-
56
- Adjust points provide parameterized editing of shape geometry. Each shape may have zero or more adjust points, which fall into the following types:
57
-
58
- - **XY adjust points** — control position offsets along the X/Y axes.
59
- - **Angle adjust points** — control angular parameters.
60
- - **Radius adjust points** — control radial dimensions.
61
-
62
- Adjust points can be manipulated through the UI (drag handles) or programmatically via API. For example, the `SmileyFace` shape has an adjust point that controls the mouth curvature — dragging it can turn a smile into a frown.
63
-
64
- ### Connection Sites
65
-
66
- Connection sites are predefined anchor points on a shape's boundary, used for snapping connectors. When a connector is attached to a connection site, moving the shape automatically updates the connector's path.
67
-
68
- ### Connectors
24
+ ## Usage
69
25
 
70
- Three connector line types are supported:
26
+ ```ts
27
+ import { ShapeModel, ShapeTypeEnum } from '@univerjs-pro/engine-shape';
28
+ ```
71
29
 
72
- - **Straight** — a direct line between two points.
73
- - **Bent (elbow)** — an orthogonal polyline with right-angle bends.
74
- - **Curved** — a smooth Bezier curve.
30
+ ## Resources
75
31
 
76
- All connectors feature:
32
+ - [Documentation](https://docs.univer.ai/guides/pro)
33
+ - [NPM package](https://npmjs.com/package/@univerjs-pro/engine-shape)
77
34
 
78
- - **Auto-routing** — automatically computes the optimal path around obstacles, similar to Excel.
79
- - **Shape binding** — attach connector endpoints to connection sites on shapes; moving the shape updates the connector path automatically. Dragging the connector itself detaches it from the bound shape.
80
- - **Arrow heads** — configurable start and end arrow styles.
81
- - **Dash styles** — solid, dashed, dotted, and other dash patterns.
82
- - **Adjust points** — fine-tune the connector path by dragging intermediate control points.