1+ order : 2
2+ id : word-shapes-manage-geometric-shapes
3+ name : Manage geometric shapes
4+ description : Shows how to work with geometric shapes.
5+ host : WORD
6+ api_set :
7+ WordApiDesktop : ' 1.2'
8+ script :
9+ content : |
10+ document.getElementById("insert-heptagon").addEventListener("click", () => tryCatch(insertGeometricShape_Heptagon));
11+ document.getElementById("insert-moon").addEventListener("click", () => tryCatch(insertGeometricShape_Moon));
12+ document.getElementById("get-geometric-shapes").addEventListener("click", () => tryCatch(getGeometricShapes));
13+ document.getElementById("get-moons").addEventListener("click", () => tryCatch(getMoonGeometricShapes));
14+ document.getElementById("get-first-geometric-shape").addEventListener("click", () => tryCatch(getFirstGeometricShape));
15+ document.getElementById("get-first-heptagon").addEventListener("click", () => tryCatch(getFirstHeptagon));
16+
17+ async function insertGeometricShape_Heptagon() {
18+ await Word.run(async (context) => {
19+ // Inserts a heptagon geometric shape at the beginning of the selection.
20+ const selection: Word.Range = context.document.getSelection();
21+ const shapeOptions: Word.InsertShapeOptions = {
22+ height: 120,
23+ width: 120,
24+ };
25+ selection.insertGeometricShape(Word.GeometricShapeType.heptagon, shapeOptions);
26+ await context.sync();
27+
28+ console.log("Inserted a heptagon.");
29+ });
30+ }
31+
32+ async function insertGeometricShape_Moon() {
33+ await Word.run(async (context) => {
34+ // Inserts a moon geometric shape at the beginning of the selection.
35+ const selection: Word.Range = context.document.getSelection();
36+ const shapeOptions: Word.InsertShapeOptions = {
37+ height: 120,
38+ width: 120,
39+ left: 120,
40+ };
41+ selection.insertGeometricShape(Word.GeometricShapeType.moon, shapeOptions);
42+ await context.sync();
43+
44+ console.log("Inserted a heptagon.");
45+ });
46+ }
47+
48+ async function getGeometricShapes() {
49+ await Word.run(async (context) => {
50+ // Gets the geometric shapes from the document body.
51+ const geometricShapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
52+ Word.ShapeType.geometricShape,
53+ ]);
54+ geometricShapes.load();
55+ await context.sync();
56+
57+ console.log("Geometric shapes found in the document body:", geometricShapes);
58+ });
59+ }
60+
61+ async function getMoonGeometricShapes() {
62+ await Word.run(async (context) => {
63+ // Gets the moon geometric shapes from the document body.
64+ const moons: Word.ShapeCollection = context.document.body.shapes.getByGeometricTypes([
65+ Word.GeometricShapeType.moon,
66+ ]);
67+ moons.load();
68+ await context.sync();
69+
70+ console.log("Moons found in the document body:", moons);
71+ });
72+ }
73+
74+ async function getFirstGeometricShape() {
75+ await Word.run(async (context) => {
76+ // Gets the first geometric shape found in the document body.
77+ const geometricShape: Word.Shape = context.document.body.shapes
78+ .getByTypes([Word.ShapeType.geometricShape])
79+ .getFirstOrNullObject();
80+ geometricShape.load();
81+ await context.sync();
82+
83+ if (geometricShape.isNullObject) {
84+ console.log("No geometric shapes found in the document body.");
85+ return;
86+ }
87+
88+ console.log(
89+ `First geometric shape found in the document body is of type ${geometricShape.geometricShapeType}:`,
90+ geometricShape,
91+ );
92+ });
93+ }
94+
95+ async function getFirstHeptagon() {
96+ await Word.run(async (context) => {
97+ // Gets the first heptagon found in the document body.
98+ const heptagon: Word.Shape = context.document.body.shapes
99+ .getByGeometricTypes([Word.GeometricShapeType.heptagon])
100+ .getFirstOrNullObject();
101+ heptagon.load();
102+ await context.sync();
103+
104+ if (heptagon.isNullObject) {
105+ console.log("No heptagons found in the document body.");
106+ return;
107+ }
108+
109+ console.log("First heptagon found in the document body:", heptagon);
110+ });
111+ }
112+
113+ // Default helper for invoking an action and handling errors.
114+ async function tryCatch(callback) {
115+ try {
116+ await callback();
117+ } catch (error) {
118+ // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
119+ console.error(error);
120+ }
121+ }
122+ language : typescript
123+ template :
124+ content : |-
125+ <section class="ms-Fabric ms-font-m">
126+ This sample demonstrates how to work with geometric shapes.
127+ </section>
128+ <section class="ms-Fabric samples ms-font-m">
129+ <h3>Try it out</h3>
130+ <button id="insert-heptagon" class="ms-Button">
131+ <span class="ms-Button-label">Insert heptagon</span>
132+ </button>
133+ <button id="insert-moon" class="ms-Button">
134+ <span class="ms-Button-label">Insert moon</span>
135+ </button>
136+ <button id="get-geometric-shapes" class="ms-Button">
137+ <span class="ms-Button-label">Get geometric shapes</span>
138+ </button>
139+ <button id="get-moons" class="ms-Button">
140+ <span class="ms-Button-label">Get moons</span>
141+ </button>
142+ <button id="get-first-geometric-shape" class="ms-Button">
143+ <span class="ms-Button-label">Get first geometric shape</span>
144+ </button>
145+ <button id="get-first-heptagon" class="ms-Button">
146+ <span class="ms-Button-label">Get first heptagon</span>
147+ </button>
148+ </section>
149+ language : html
150+ style :
151+ content : |-
152+ section.samples {
153+ margin-top: 20px;
154+ }
155+
156+ section.samples .ms-Button, section.setup .ms-Button {
157+ display: block;
158+ margin-bottom: 5px;
159+ margin-left: 20px;
160+ min-width: 80px;
161+ }
162+ language : css
163+ libraries : |-
164+ https://appsforoffice.microsoft.com/lib/1/hosted/office.js
165+ https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
166+
167+ https://unpkg.com/[email protected] /dist/css/fabric.min.css 168+ https://unpkg.com/[email protected] /dist/css/fabric.components.min.css
0 commit comments