Select an image in the Word document and then load it.
44 |In the add-in, place a callout by clicking the mouse.
45 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/src/media/groupIcon1_default16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/groupIcon1_default16.png
--------------------------------------------------------------------------------
/src/media/groupIcon1_default32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/groupIcon1_default32.png
--------------------------------------------------------------------------------
/src/media/groupIcon1_default80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/groupIcon1_default80.png
--------------------------------------------------------------------------------
/src/media/icon_default16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/icon_default16.png
--------------------------------------------------------------------------------
/src/media/icon_default32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/icon_default32.png
--------------------------------------------------------------------------------
/src/media/icon_default80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/icon_default80.png
--------------------------------------------------------------------------------
/src/media/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Word-Add-in-TypeScript-Canvas/e8dde8996e1a8d3fb9da4cea64a43226e75dee84/src/media/map.png
--------------------------------------------------------------------------------
/src/sample.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the project root for license information.
4 | */
5 |
6 | class App {
7 |
8 | constructor() {
9 | // The initialize function is run each time the page is loaded.
10 | Office.initialize = (reason) => {
11 | $(document).ready(() => {
12 | // Use this to check whether the new API is supported in the Word client.
13 | if (Office.context.requirements.isSetSupported("WordApi", 1.2)) {
14 |
15 | console.log('This code is using Word 2016 or greater.');
16 |
17 | // Setup the event handlers for UI.
18 | $('#loadSelectedImage').click(this.loadSelectedImageHandler.bind(this));
19 | $('#insertImageAtSelection').click(this.insertImageHandler.bind(this));
20 |
21 | // Scale the size of the canvas so that it scales
22 | // when a user resizes the add-in.
23 | window.addEventListener('resize', this.resizeCanvas.bind(this), false);
24 |
25 | // Setup the canvas event listener(s).
26 | this.initCanvas();
27 |
28 | // Automatically load an image if one is selected in Word when the task pane is launched.
29 | this.loadSelectedImageHandler();
30 |
31 | } else {
32 | // Just letting you know that this code will not work with your version of Word.
33 | console.log('This add-in requires the WordAPI 1.2 requirement set or greater. Check your version of Word and the requirement set version.');
34 | }
35 | });
36 | };
37 | }
38 |
39 | /*********************/
40 | /* Globals */
41 | /*********************/
42 |
43 | private _calloutEnabled: boolean = false; // we only want to add callout when an image is loaded.
44 | private _calloutNumber: number; // set/reset when an image is loaded.
45 | private _resizeRatio: number; // set when an image has been loaded in to the canvas.
46 | private _windowWidth: number; // we are setting the canvas width to the window width.
47 | private _image; // the image added to the canvas.
48 |
49 | /*********************/
50 | /* Canvas functions */
51 | /*********************/
52 |
53 |
54 | /**
55 | * Initialize the canvas with the click event. Click event inserts callouts into the canvas image.
56 | */
57 | initCanvas(): void {
58 |
59 | this._windowWidth = window.innerWidth;
60 |
61 | var canvas = document.getElementById('canvas') as HTMLCanvasElement;
62 |
63 | var ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
64 |
65 | // Add callouts when the user clicks in the canvas.
66 | ctx.canvas.addEventListener('click', (event) => {
67 |
68 | // Let's make sure that we have an image loaded before
69 | // we add callouts to the canvas.
70 | if (this._calloutEnabled) {
71 |
72 | // Increment callout number. We will use this later when we stub out
73 | // descriptions for the callouts by using the Word JS API.
74 | this._calloutNumber++;
75 |
76 | // Get the bounds of the canvas element in relationship to the top-left of the viewport.
77 | // We will get the coordinates in canvas, not the window.
78 | var canvasBounds = canvas.getBoundingClientRect();
79 |
80 | // Use the event coordinates, canvas boundaries, and the window width
81 | // to get the coordinates where the callouts can be placed.
82 | var height = this._windowWidth * this._resizeRatio;
83 | var mouseX = (event.clientX - canvasBounds.left) * canvas.width / this._windowWidth;
84 | var mouseY = (event.clientY - canvasBounds.top) * canvas.height / height;
85 |
86 | // Draw circle for the callout.
87 | var radius = 12;
88 | ctx.fillStyle = 'red';
89 | ctx.beginPath();
90 | ctx.arc(mouseX, mouseY, radius, 0, Math.PI * 2, true);
91 | ctx.closePath();
92 | ctx.fill();
93 |
94 | // Insert the callout number in the circle.
95 | var width = ctx.measureText(this._calloutNumber.toString());
96 | ctx.font = 'bold 16px calabri ';
97 | ctx.fillStyle = 'white';
98 | ctx.textAlign = 'center';
99 | ctx.fillText(this._calloutNumber.toString(), mouseX, mouseY + (radius / 3)); // this last argument is approximately correct for placement.
100 | }
101 | });
102 | }
103 |
104 | /**
105 | * Changes the canvas size according to the window width and the image aspect ratio.
106 | */
107 | resizeCanvas(): void {
108 |
109 | // Canvas must fit width of add-in.
110 | this._windowWidth = window.innerWidth;
111 |
112 | // Set the resize ratio only if it hasn't already been captured,
113 | // and only if there is an image loaded in the add-in.
114 | if (!this._resizeRatio && this._image)
115 | this._resizeRatio = this._image.height / this._image.width;
116 |
117 | // Resize the canvas only if there is an image loaded into it.
118 | if (this._image) {
119 | var height = this._windowWidth * this._resizeRatio;
120 | var canvas = document.getElementById('canvas');
121 | canvas.style.width = this._windowWidth + 'px';
122 | canvas.style.height = height + 'px';
123 | }
124 | }
125 |
126 |
127 | /**
128 | * Loads the image into the HTML canvas. loadSelectedImageHandler() checks whether you have an image.
129 | * @param base64EncodedImage The image to load into the canvas.
130 | */
131 | loadImageIntoCanvas(base64EncodedImage): void {
132 |
133 | // Callouts should only be added once the image is loaded into canvas.
134 | this._calloutEnabled = false;
135 |
136 | // Create an image and load it onto the canvas, set the canvas to the image
137 | // dimensions, and draw it on the canvas.
138 | this._image = new Image();
139 | this._image.onload = () => {
140 |
141 | var canvas = document.getElementById('canvas') as HTMLCanvasElement;
142 | var ctx = canvas.getContext("2d");
143 |
144 | canvas.height = this._image.height;
145 | canvas.width = this._image.width;
146 | ctx.drawImage(this._image, 0, 0);
147 |
148 | // Reset the this._calloutNumber when I load a new image.
149 | this._calloutNumber = 0;
150 |
151 | // Enable adding callouts to the canvas.
152 | this._calloutEnabled = true;
153 |
154 | // Make the canvas scale to the window.
155 | this.resizeCanvas();
156 | };
157 |
158 | // ASSUMPTION: we are assuming only png files. You will need to determine file type.
159 | // Load the image we got from Word.
160 | this._image.src = "data:image/png;base64," + base64EncodedImage.value;
161 | }
162 |
163 | /*********************/
164 | /* Word JS functions */
165 | /*********************/
166 |
167 | /**
168 | * Load the the selected image from Word into the add-in. This assumes that a single image was selected.
169 | */
170 | loadSelectedImageHandler(): void {
171 | Word.run((context) => {
172 |
173 | // Create a proxy object for the range that is assumed to contain an image.
174 | var imageRange = context.document.getSelection();
175 |
176 | // Load the selected range.
177 | context.load(imageRange, 'inlinePictures');
178 |
179 | // Synchronize the document state by executing the queued commands,
180 | // and return a promise to indicate task completion.
181 | return context.sync()
182 | .then(() => {
183 | // If there is more than one inline picture, then we need to tell the user to choose a single picture.
184 | if (imageRange.inlinePictures.items.length === 1) {
185 |
186 | // Queue a command to get the image source.
187 | var imageString = imageRange.inlinePictures.items[0].getBase64ImageSrc();
188 |
189 | // Synchronize the document state by executing the queued commands,
190 | // and return a promise to indicate task completion.
191 | return context.sync().then(() => {
192 | this.loadImageIntoCanvas(imageString);
193 | });
194 |
195 | }
196 | //
197 | else {
198 | throw "You need to select a single image."
199 | }
200 |
201 | });
202 | })
203 | .catch((error) => {
204 | console.log('Error: ' + JSON.stringify(error));
205 | if (error instanceof OfficeExtension.Error) {
206 | console.log('Debug info: ' + JSON.stringify(error.debugInfo));
207 | }
208 | });
209 | }
210 |
211 | /**
212 | * Insert the contents of the canvas into the Word document.
213 | */
214 | insertImageHandler(): void {
215 |
216 | // Only insert the contents of the canvas if we an image in it.
217 | if (this._image) {
218 |
219 | var canvas = document.getElementById('canvas') as HTMLCanvasElement;
220 |
221 | // Get the data URL for the image in the canvas.
222 | var pngDataUrl = canvas.toDataURL(); // data uri scheme
223 |
224 | // Extract the encoding format information. Word only accepts the base64 content.
225 | // ASSUMPTION: that this is a png file.
226 | var base64ImgString = pngDataUrl.replace('data:image/png;base64,', '');
227 |
228 | Word.run((context) => {
229 |
230 | // Create a proxy object for the range at the current selection.
231 | var imageRange = context.document.getSelection();
232 |
233 | // Load the selected range.
234 | context.load(imageRange, 'text');
235 |
236 | // Synchronize the document state by executing the queued commands,
237 | // and return a promise to indicate task completion.
238 | return context.sync()
239 | .then(() => {
240 |
241 | // Queue a command to insert the image into the document.
242 | var insertedImage = imageRange.insertInlinePictureFromBase64(base64ImgString, Word.InsertLocation.replace);
243 |
244 | // Queue a command to navigate the UI to the insert picture.
245 | insertedImage.select();
246 |
247 | // Queue an indefinite number of commands to insert paragraphs
248 | // based on the number of callouts added to the image.
249 | if (this._calloutNumber > 0) {
250 | var lastParagraph = insertedImage.insertParagraph('Here are your callout descriptions:', Word.InsertLocation.after) as Word.Paragraph;
251 |
252 | for (var i = 0; i < this._calloutNumber; i++) {
253 | lastParagraph = lastParagraph.insertParagraph((i + 1) + ') [enter callout description].', Word.InsertLocation.after);
254 | }
255 | }
256 | })
257 | // Synchronize the document state by executing the queued commands.
258 | .then(context.sync);
259 | })
260 | .catch((error) => {
261 | console.log('Error: ' + JSON.stringify(error));
262 | if (error instanceof OfficeExtension.Error) {
263 | console.log('Debug info: ' + JSON.stringify(error.debugInfo));
264 | }
265 | });
266 | }
267 | }
268 | }
269 |
270 | var app = new App();
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See License.txt in the project root.
3 | */
4 |
5 | html,
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | width: 100%;
10 | height: 100%;
11 | }
12 |
13 | .home {
14 | width: 100%;
15 | height: 100%;
16 | }
17 |
18 | .header {
19 | padding: 20px;
20 | &__titleBar {
21 | margin-bottom: 45px;
22 | text-transform: uppercase;
23 | }
24 | &__button {
25 | margin: 15px 0px 10px 0px;
26 | }
27 | &--text {
28 | margin: 0 0 6px 0;
29 | padding: 0;
30 | }
31 | &--spacer {
32 | margin-top: 15px;
33 | }
34 | }
35 |
36 | canvas {
37 | display: block;
38 | margin: 0 auto;
39 | }
40 |
41 | .flex-container {
42 | display: -ms-flexbox;
43 | display: -webkit-flex;
44 | display: flex;
45 | -webkit-flex-direction: column;
46 | -ms-flex-direction: column;
47 | flex-direction: column;
48 | -webkit-flex-wrap: nowrap;
49 | -ms-flex-wrap: nowrap;
50 | flex-wrap: nowrap;
51 | -webkit-justify-content: center;
52 | -ms-flex-pack: center;
53 | justify-content: center;
54 | -webkit-align-content: stretch;
55 | -ms-flex-line-pack: stretch;
56 | align-content: stretch;
57 | -webkit-align-items: stretch;
58 | -ms-flex-align: stretch;
59 | align-items: stretch;
60 | }
61 |
62 | .flex-item:nth-child(1) {
63 | -webkit-order: 0;
64 | -ms-flex-order: 0;
65 | order: 0;
66 | -webkit-flex: 0 1 auto;
67 | -ms-flex: 0 1 auto;
68 | flex: 0 1 auto;
69 | -webkit-align-self: stretch;
70 | -ms-flex-item-align: stretch;
71 | align-self: stretch;
72 | }
73 |
74 | .flex-item:nth-child(2) {
75 | -webkit-order: 0;
76 | -ms-flex-order: 0;
77 | order: 0;
78 | -webkit-flex: 1 1 auto;
79 | -ms-flex: 1 1 auto;
80 | flex: 1 1 auto;
81 | -webkit-align-self: stretch;
82 | -ms-flex-item-align: stretch;
83 | align-self: stretch;
84 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "commonjs",
6 | "moduleResolution": "node",
7 | "sourceMap": true,
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "noImplicitAny": false,
11 | "removeComments": false,
12 | "rootDir": "./src",
13 | "outDir": "./www"
14 | },
15 | "filesGlob": [
16 | "./src/**/*.ts",
17 | "./typings/browser.d.ts"
18 | ],
19 | "version": "1.8",
20 | "atom": {
21 | "rewriteTsconfig": true
22 | },
23 | "files": [
24 | "./typings/browser.d.ts",
25 | "./src/sample.ts"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "word-add-in-canvas",
3 | "ambientDependencies": {
4 | "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#d1f6bde13f2209be42e86c3686761e8bfcbb50a5",
5 | "office-js": "github:DefinitelyTyped/DefinitelyTyped/office-js/office-js.d.ts"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------