|
5152 | 5152 |
|
5153 | 5153 | this.saveData(filename, ext, data.substring(data.lastIndexOf(',') + 1), 'image/' + format, true); |
5154 | 5154 | }; |
5155 | | - |
| 5155 | + |
| 5156 | + /** |
| 5157 | + * Shows the animated GIF export dialog. |
| 5158 | + */ |
| 5159 | + EditorUi.prototype.showAnimatedGifExportDialog = function() |
| 5160 | + { |
| 5161 | + var div = document.createElement('div'); |
| 5162 | + div.style.whiteSpace = 'nowrap'; |
| 5163 | + |
| 5164 | + var hd = document.createElement('h3'); |
| 5165 | + mxUtils.write(hd, mxResources.get('formatAnimatedGif', null, 'Animated GIF')); |
| 5166 | + hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:10px'; |
| 5167 | + div.appendChild(hd); |
| 5168 | + |
| 5169 | + // Speed (FPS) |
| 5170 | + mxUtils.write(div, mxResources.get('speed', null, 'Speed') + ':'); |
| 5171 | + var fpsSelect = document.createElement('select'); |
| 5172 | + fpsSelect.style.marginLeft = '4px'; |
| 5173 | + fpsSelect.style.width = '80px'; |
| 5174 | + |
| 5175 | + var fpsOptions = [ |
| 5176 | + {label: mxResources.get('slow', null, 'Slow'), value: 8}, |
| 5177 | + {label: mxResources.get('medium', null, 'Medium'), value: 15}, |
| 5178 | + {label: mxResources.get('fast', null, 'Fast'), value: 24} |
| 5179 | + ]; |
| 5180 | + |
| 5181 | + for (var i = 0; i < fpsOptions.length; i++) |
| 5182 | + { |
| 5183 | + var opt = document.createElement('option'); |
| 5184 | + mxUtils.write(opt, fpsOptions[i].label); |
| 5185 | + opt.setAttribute('value', fpsOptions[i].value); |
| 5186 | + |
| 5187 | + if (fpsOptions[i].value == 15) |
| 5188 | + { |
| 5189 | + opt.setAttribute('selected', 'selected'); |
| 5190 | + } |
| 5191 | + |
| 5192 | + fpsSelect.appendChild(opt); |
| 5193 | + } |
| 5194 | + |
| 5195 | + div.appendChild(fpsSelect); |
| 5196 | + mxUtils.br(div); |
| 5197 | + |
| 5198 | + // Zoom |
| 5199 | + var zoomContainer = document.createElement('div'); |
| 5200 | + zoomContainer.style.marginTop = '10px'; |
| 5201 | + mxUtils.write(zoomContainer, mxResources.get('zoom') + ':'); |
| 5202 | + var zoomInput = document.createElement('input'); |
| 5203 | + zoomInput.setAttribute('type', 'text'); |
| 5204 | + zoomInput.style.width = '60px'; |
| 5205 | + zoomInput.style.marginLeft = '4px'; |
| 5206 | + zoomInput.value = '100%'; |
| 5207 | + zoomContainer.appendChild(zoomInput); |
| 5208 | + div.appendChild(zoomContainer); |
| 5209 | + |
| 5210 | + // Border |
| 5211 | + var borderContainer = document.createElement('div'); |
| 5212 | + borderContainer.style.marginTop = '10px'; |
| 5213 | + mxUtils.write(borderContainer, mxResources.get('borderWidth', null, 'Border Width') + ':'); |
| 5214 | + var borderInput = document.createElement('input'); |
| 5215 | + borderInput.setAttribute('type', 'text'); |
| 5216 | + borderInput.style.width = '60px'; |
| 5217 | + borderInput.style.marginLeft = '4px'; |
| 5218 | + borderInput.value = '0'; |
| 5219 | + borderContainer.appendChild(borderInput); |
| 5220 | + div.appendChild(borderContainer); |
| 5221 | + |
| 5222 | + // Loop |
| 5223 | + var loopContainer = document.createElement('div'); |
| 5224 | + loopContainer.style.marginTop = '10px'; |
| 5225 | + mxUtils.write(loopContainer, mxResources.get('loops', null, 'Loops') + ':'); |
| 5226 | + var loopSelect = document.createElement('select'); |
| 5227 | + loopSelect.style.marginLeft = '4px'; |
| 5228 | + loopSelect.style.width = '80px'; |
| 5229 | + |
| 5230 | + var loopOptions = [ |
| 5231 | + {label: mxResources.get('forever', null, 'Forever'), value: 0}, |
| 5232 | + {label: '1', value: 1}, |
| 5233 | + {label: '3', value: 3}, |
| 5234 | + {label: '5', value: 5} |
| 5235 | + ]; |
| 5236 | + |
| 5237 | + for (var i = 0; i < loopOptions.length; i++) |
| 5238 | + { |
| 5239 | + var opt = document.createElement('option'); |
| 5240 | + mxUtils.write(opt, loopOptions[i].label); |
| 5241 | + opt.setAttribute('value', loopOptions[i].value); |
| 5242 | + |
| 5243 | + if (loopOptions[i].value == 0) |
| 5244 | + { |
| 5245 | + opt.setAttribute('selected', 'selected'); |
| 5246 | + } |
| 5247 | + |
| 5248 | + loopSelect.appendChild(opt); |
| 5249 | + } |
| 5250 | + |
| 5251 | + loopContainer.appendChild(loopSelect); |
| 5252 | + div.appendChild(loopContainer); |
| 5253 | + |
| 5254 | + // Transparent background |
| 5255 | + var transparent = this.addCheckbox(div, mxResources.get('transparentBackground', |
| 5256 | + null, 'Transparent Background'), false); |
| 5257 | + |
| 5258 | + var dlg = new CustomDialog(this, div, mxUtils.bind(this, function() |
| 5259 | + { |
| 5260 | + var zoomVal = parseInt(zoomInput.value); |
| 5261 | + |
| 5262 | + if (isNaN(zoomVal) || zoomVal <= 0) |
| 5263 | + { |
| 5264 | + zoomVal = 100; |
| 5265 | + } |
| 5266 | + |
| 5267 | + this.exportAnimatedGif({ |
| 5268 | + fps: parseInt(fpsSelect.value), |
| 5269 | + scale: zoomVal / 100, |
| 5270 | + border: parseInt(borderInput.value) || 0, |
| 5271 | + repeat: parseInt(loopSelect.value), |
| 5272 | + transparent: transparent.checked, |
| 5273 | + background: transparent.checked ? null : |
| 5274 | + ((this.editor.graph.background != null && |
| 5275 | + this.editor.graph.background != mxConstants.NONE) ? |
| 5276 | + this.editor.graph.background : '#ffffff') |
| 5277 | + }); |
| 5278 | + }), null, mxResources.get('export'), |
| 5279 | + 'https://www.drawio.com/doc/faq/export-diagram'); |
| 5280 | + |
| 5281 | + this.showDialog(dlg.container, 300, 260, true, true, null, null, null, null, true); |
| 5282 | + }; |
| 5283 | + |
| 5284 | + /** |
| 5285 | + * Exports the current diagram as an animated GIF. |
| 5286 | + */ |
| 5287 | + EditorUi.prototype.exportAnimatedGif = function(options) |
| 5288 | + { |
| 5289 | + if (this.spinner.spin(document.body, mxResources.get('exporting'))) |
| 5290 | + { |
| 5291 | + try |
| 5292 | + { |
| 5293 | + var exp = new AnimatedGifExport(this); |
| 5294 | + |
| 5295 | + exp.doExport(options, mxUtils.bind(this, function(blob) |
| 5296 | + { |
| 5297 | + this.spinner.stop(); |
| 5298 | + |
| 5299 | + if (blob != null) |
| 5300 | + { |
| 5301 | + var filename = this.getBaseFilename() + '.gif'; |
| 5302 | + |
| 5303 | + if (typeof navigator.msSaveBlob === 'function') |
| 5304 | + { |
| 5305 | + navigator.msSaveBlob(blob, filename); |
| 5306 | + } |
| 5307 | + else |
| 5308 | + { |
| 5309 | + var a = document.createElement('a'); |
| 5310 | + a.href = URL.createObjectURL(blob); |
| 5311 | + a.download = filename; |
| 5312 | + document.body.appendChild(a); |
| 5313 | + a.click(); |
| 5314 | + |
| 5315 | + setTimeout(function() |
| 5316 | + { |
| 5317 | + document.body.removeChild(a); |
| 5318 | + URL.revokeObjectURL(a.href); |
| 5319 | + }, 0); |
| 5320 | + } |
| 5321 | + } |
| 5322 | + }), mxUtils.bind(this, function(e) |
| 5323 | + { |
| 5324 | + this.spinner.stop(); |
| 5325 | + this.handleError(e); |
| 5326 | + })); |
| 5327 | + } |
| 5328 | + catch (e) |
| 5329 | + { |
| 5330 | + this.spinner.stop(); |
| 5331 | + this.handleError(e); |
| 5332 | + } |
| 5333 | + } |
| 5334 | + }; |
| 5335 | + |
5156 | 5336 | /** |
5157 | 5337 | * Returns true if files should be saved using <saveLocalFile>. |
5158 | 5338 | */ |
|
11303 | 11483 | return graphIsEnabled.apply(this, arguments) && !ui.isLocked(); |
11304 | 11484 | }; |
11305 | 11485 |
|
| 11486 | + // Shows link icons in main graph |
| 11487 | + graph.showLinkIcons = Editor.showLinkIcons; |
| 11488 | + |
11306 | 11489 | // Stops panning while freehand is active |
11307 | 11490 | if (Graph.touchStyle) |
11308 | 11491 | { |
|
0 commit comments