mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
76 KiB
165 lines
76 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.10">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.21.10"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.2c61df29.css" as="style"><link rel="preload" href="/docs/assets/js/app.424ab1f7.js" as="script"><link rel="preload" href="/docs/assets/js/4.0070552e.js" as="script"><link rel="preload" href="/docs/assets/js/2.6fefd022.js" as="script"><link rel="preload" href="/docs/assets/js/1.d23e9fed.js" as="script"><link rel="preload" href="/docs/assets/js/41.725a5d92.js" as="script"><link rel="prefetch" href="/docs/assets/js/12.fcd6c1b3.js"><link rel="prefetch" href="/docs/assets/js/13.f8ba6288.js"><link rel="prefetch" href="/docs/assets/js/14.37d1e434.js"><link rel="prefetch" href="/docs/assets/js/15.6e77df13.js"><link rel="prefetch" href="/docs/assets/js/16.c5f433ca.js"><link rel="prefetch" href="/docs/assets/js/17.de56d7c2.js"><link rel="prefetch" href="/docs/assets/js/18.bf39ac98.js"><link rel="prefetch" href="/docs/assets/js/19.ca87c57f.js"><link rel="prefetch" href="/docs/assets/js/20.68039d84.js"><link rel="prefetch" href="/docs/assets/js/21.2b429912.js"><link rel="prefetch" href="/docs/assets/js/22.27b0a8c5.js"><link rel="prefetch" href="/docs/assets/js/23.d9e75a94.js"><link rel="prefetch" href="/docs/assets/js/24.96337353.js"><link rel="prefetch" href="/docs/assets/js/25.fe03e194.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.bdeec887.js"><link rel="prefetch" href="/docs/assets/js/28.cf1f128d.js"><link rel="prefetch" href="/docs/assets/js/29.5888c207.js"><link rel="prefetch" href="/docs/assets/js/3.4e94790f.js"><link rel="prefetch" href="/docs/assets/js/30.bace5f23.js"><link rel="prefetch" href="/docs/assets/js/31.2b0fa15d.js"><link rel="prefetch" href="/docs/assets/js/32.fdf463ac.js"><link rel="prefetch" href="/docs/assets/js/33.1b7b6b41.js"><link rel="prefetch" href="/docs/assets/js/34.2a27db4f.js"><link rel="prefetch" href="/docs/assets/js/35.4c1b458d.js"><link rel="prefetch" href="/docs/assets/js/36.80ac7652.js"><link rel="prefetch" href="/docs/assets/js/37.a813e6f1.js"><link rel="prefetch" href="/docs/assets/js/38.b5848cbf.js"><link rel="prefetch" href="/docs/assets/js/39.ac3b74a5.js"><link rel="prefetch" href="/docs/assets/js/40.0fad8f56.js"><link rel="prefetch" href="/docs/assets/js/42.34d5f071.js"><link rel="prefetch" href="/docs/assets/js/43.49e4b43f.js"><link rel="prefetch" href="/docs/assets/js/44.dcce613b.js"><link rel="prefetch" href="/docs/assets/js/45.851c5425.js"><link rel="prefetch" href="/docs/assets/js/46.61478c36.js"><link rel="prefetch" href="/docs/assets/js/47.3743426b.js"><link rel="prefetch" href="/docs/assets/js/48.f36e3619.js"><link rel="prefetch" href="/docs/assets/js/49.4692ff79.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.92c87e88.js"><link rel="prefetch" href="/docs/assets/js/51.6c005fbf.js"><link rel="prefetch" href="/docs/assets/js/52.ede5d238.js"><link rel="prefetch" href="/docs/assets/js/53.14d8e525.js"><link rel="prefetch" href="/docs/assets/js/54.e4f036ef.js"><link rel="prefetch" href="/docs/assets/js/55.510d4705.js"><link rel="prefetch" href="/docs/assets/js/56.96abc2ed.js"><link rel="prefetch" href="/docs/assets/js/57.5452e0eb.js"><link rel="prefetch" href="/docs/assets/js/58.659c993f.js"><link rel="prefetch" href="/docs/assets/js/59.34f9eaca.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.2f610937.js"><link rel="prefetch" href="/docs/assets/js/61.f4e5be3d.js"><link rel="prefetch" href="/docs/assets/js/62.c1df51fe.js"><link rel="prefetch" href="/docs/assets/js/63.0486448b.js"><link rel="prefetch" href="/docs/assets/js/64.1b7300e4.js"><link rel="prefetch" href="/docs/assets/js/65.624d0a0a.js"><link rel="prefetch" href="/docs/assets/js/66.7fe4797b.js"><link rel="prefetch" href="/docs/assets/js/67.925c35aa.js"><link rel="prefetch" href="/docs/assets/js/68.31c90117.js"><link rel="prefetch" href="/docs/assets/js/69.5f040bea.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.6f1ee486.js"><link rel="prefetch" href="/docs/assets/js/71.cbc449e7.js"><link rel="prefetch" href="/docs/assets/js/72.e0d79003.js"><link rel="prefetch" href="/docs/assets/js/73.ca348e41.js"><link rel="prefetch" href="/docs/assets/js/74.0f693fad.js"><link rel="prefetch" href="/docs/assets/js/75.435fb2cb.js"><link rel="prefetch" href="/docs/assets/js/76.05d616a1.js"><link rel="prefetch" href="/docs/assets/js/77.9cf43035.js"><link rel="prefetch" href="/docs/assets/js/78.1139cca5.js"><link rel="prefetch" href="/docs/assets/js/79.4581c86c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/80.e8ee32b0.js"><link rel="prefetch" href="/docs/assets/js/81.afcc1145.js"><link rel="prefetch" href="/docs/assets/js/82.3c8f4a16.js"><link rel="prefetch" href="/docs/assets/js/83.4c69a7a0.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.584a0e94.js"><link rel="prefetch" href="/docs/assets/js/86.a3fa56ac.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.b2f8cd57.js"><link rel="prefetch" href="/docs/assets/js/89.12fa0df4.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.383ffdcc.js"><link rel="prefetch" href="/docs/assets/js/91.b721141c.js"><link rel="prefetch" href="/docs/assets/js/92.7e85069f.js"><link rel="prefetch" href="/docs/assets/js/93.0d4acb59.js"><link rel="prefetch" href="/docs/assets/js/94.036e5ed0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.0da9b1d4.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.2c61df29.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/api/" aria-current="page" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" class="sidebar-link">Editor</a></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" aria-current="page" class="active sidebar-link">Canvas</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#canvas" class="sidebar-link">Canvas</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#available-events" class="sidebar-link">Available Events</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getelement" class="sidebar-link">getElement</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getframeel" class="sidebar-link">getFrameEl</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getwindow" class="sidebar-link">getWindow</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getdocument" class="sidebar-link">getDocument</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getbody" class="sidebar-link">getBody</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setcustombadgelabel" class="sidebar-link">setCustomBadgeLabel</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getrect" class="sidebar-link">getRect</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#hasfocus" class="sidebar-link">hasFocus</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#scrollto" class="sidebar-link">scrollTo</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setzoom" class="sidebar-link">setZoom</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getzoom" class="sidebar-link">getZoom</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#setcoords" class="sidebar-link">setCoords</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getcoords" class="sidebar-link">getCoords</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getlastdragresult" class="sidebar-link">getLastDragResult</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#addspot" class="sidebar-link">addSpot</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getspots" class="sidebar-link">getSpots</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#removespots" class="sidebar-link">removeSpots</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#hascustomspot" class="sidebar-link">hasCustomSpot</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#getworldrecttoscreen" class="sidebar-link">getWorldRectToScreen</a></li><li class="sidebar-sub-header"><a href="/docs/api/canvas.html#refresh" class="sidebar-link">refresh</a></li></ul></li><li><a href="/docs/api/frame.html" class="sidebar-link"> Frame</a></li><li><a href="/docs/api/canvas_spot.html" class="sidebar-link"> CanvasSpot</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/asset.html" class="sidebar-link"> Asset</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/block.html" class="sidebar-link"> Block</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/api/page.html" class="sidebar-link"> Page</a></li><li><a href="/docs/api/layer_manager.html" class="sidebar-link">Layers</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/sector.html" class="sidebar-link"> Sector</a></li><li><a href="/docs/api/property.html" class="sidebar-link"> Property</a></li><li><a href="/docs/api/property_number.html" class="sidebar-link"> PropertyNumber</a></li><li><a href="/docs/api/property_select.html" class="sidebar-link"> PropertySelect</a></li><li><a href="/docs/api/property_composite.html" class="sidebar-link"> PropertyComposite</a></li><li><a href="/docs/api/property_stack.html" class="sidebar-link"> PropertyStack</a></li><li><a href="/docs/api/layer.html" class="sidebar-link"> Layer</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/device.html" class="sidebar-link"> Device</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/selector.html" class="sidebar-link"> Selector</a></li><li><a href="/docs/api/state.html" class="sidebar-link"> State</a></li><li><a href="/docs/api/trait_manager.html" class="sidebar-link">Trait Manager</a></li><li><a href="/docs/api/trait.html" class="sidebar-link"> Trait</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/css_rule.html" class="sidebar-link"> CssRule</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li><li><a href="/docs/api/parser.html" class="sidebar-link">Parser</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="canvas"><a href="#canvas" class="header-anchor">#</a> Canvas</h2> <p>You can customize the initial state of the module from the editor initialization, by passing the following <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/canvas/config/config.ts" target="_blank" rel="noopener noreferrer">Configuration Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">canvas</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// options</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
</code></pre></div><p>Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Listen to events</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:drop'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Use the API</span>
|
|
<span class="token keyword">const</span> canvas <span class="token operator">=</span> editor<span class="token punctuation">.</span>Canvas<span class="token punctuation">;</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">setCoords</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="available-events"><a href="#available-events" class="header-anchor">#</a> Available Events</h2> <ul><li><p><code>canvas:dragenter</code> Something is dragged inside the canvas, <code>DataTransfer</code> instance passed as an argument.</p></li> <li><p><code>canvas:dragover</code> Something is dragging on the canvas, <code>DataTransfer</code> instance passed as an argument.</p></li> <li><p><code>canvas:dragend</code> When a drag operation is ended, <code>DataTransfer</code> instance passed as an argument.</p></li> <li><p><code>canvas:dragdata</code> On any dataTransfer parse, <code>DataTransfer</code> instance and the <code>result</code> are passed as arguments.
|
|
By changing <code>result.content</code> you're able to customize what is dropped.</p></li> <li><p><code>canvas:drop</code> Something is dropped in canvas, <code>DataTransfer</code> instance and the dropped model are passed as arguments.</p></li> <li><p><code>canvas:spot</code> Spots updated.</p></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:spot'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Spots'</span><span class="token punctuation">,</span> editor<span class="token punctuation">.</span>Canvas<span class="token punctuation">.</span><span class="token function">getSpots</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:spot:add</code> New canvas spot added.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:spot:add'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> spot <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Spot added'</span><span class="token punctuation">,</span> spot<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:spot:update</code> Canvas spot updated.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:spot:update'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> spot <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Spot updated'</span><span class="token punctuation">,</span> spot<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:spot:remove</code> Canvas spot removed.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:spot:remove'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> spot <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Spot removed'</span><span class="token punctuation">,</span> spot<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:coords</code> Canvas coordinates updated.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:coords'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Canvas coordinates updated:'</span><span class="token punctuation">,</span> editor<span class="token punctuation">.</span>Canvas<span class="token punctuation">.</span><span class="token function">getCoords</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:zoom</code> Canvas zoom updated.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:zoom'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Canvas zoom updated:'</span><span class="token punctuation">,</span> editor<span class="token punctuation">.</span>Canvas<span class="token punctuation">.</span><span class="token function">getZoom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:pointer</code> Canvas pointer updated.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:pointer'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Canvas pointer updated:'</span><span class="token punctuation">,</span> editor<span class="token punctuation">.</span>Canvas<span class="token punctuation">.</span><span class="token function">getPointer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:refresh</code> Canvas was refreshed to update elements on top,
|
|
like spots/tools (eg. via <code>editor.Canvas.refresh()</code> or on frame resize).</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:refresh'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">canvasRefreshOptions</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Canvas refreshed with options:'</span><span class="token punctuation">,</span> canvasRefreshOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:frame:load</code> Frame loaded in canvas.
|
|
The event is triggered right after iframe's <code>onload</code>.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:frame:load'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> window <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Frame loaded'</span><span class="token punctuation">,</span> window<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:frame:load:head</code> Frame head loaded in canvas.
|
|
The event is triggered right after iframe's finished to load the head elemenets (eg. scripts)</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:frame:load:head'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> window <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Frame head loaded'</span><span class="token punctuation">,</span> window<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li><code>canvas:frame:load:body</code> Frame body loaded in canvas.
|
|
The event is triggered when the body is rendered with components.</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'canvas:frame:load:body'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> window <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Frame completed the body render'</span><span class="token punctuation">,</span> window<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="getconfig"><a href="#getconfig" class="header-anchor">#</a> getConfig</h2> <p>Get configuration object</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getelement"><a href="#getelement" class="header-anchor">#</a> getElement</h2> <p>Get the canvas element</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getframeel"><a href="#getframeel" class="header-anchor">#</a> getFrameEl</h2> <p>Get the main frame element of the canvas</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement" target="_blank" rel="noopener noreferrer">HTMLIFrameElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getwindow"><a href="#getwindow" class="header-anchor">#</a> getWindow</h2> <p>Get the main frame window instance</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/API/Window" target="_blank" rel="noopener noreferrer">Window<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getdocument"><a href="#getdocument" class="header-anchor">#</a> getDocument</h2> <p>Get the main frame document element</p> <p>Returns <strong>HTMLDocument</strong></p> <h2 id="getbody"><a href="#getbody" class="header-anchor">#</a> getBody</h2> <p>Get the main frame body element</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element/body" target="_blank" rel="noopener noreferrer">HTMLBodyElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="setcustombadgelabel"><a href="#setcustombadgelabel" class="header-anchor">#</a> setCustomBadgeLabel</h2> <p>Set custom badge naming strategy</p> <h3 id="parameters"><a href="#parameters" class="header-anchor">#</a> Parameters</h3> <ul><li><code>f</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></li></ul> <h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">setCustomBadgeLabel</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">component</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> component<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="getrect"><a href="#getrect" class="header-anchor">#</a> getRect</h2> <p>Get canvas rectangular data</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="hasfocus"><a href="#hasfocus" class="header-anchor">#</a> hasFocus</h2> <p>Check if the canvas is focused</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="scrollto"><a href="#scrollto" class="header-anchor">#</a> scrollTo</h2> <p>Scroll canvas to the element if it's not visible. The scrolling is
|
|
executed via <code>scrollIntoView</code> API and options of this method are
|
|
passed to it. For instance, you can scroll smoothly by using
|
|
<code>{ behavior: 'smooth' }</code>.</p> <h3 id="parameters-2"><a href="#parameters-2" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>el</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="/docs/api/component.html">Component</a>)</strong></p></li> <li><p><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Options, same as options for <code>scrollIntoView</code> (optional, default <code>{}</code>)</p> <ul><li><code>opts.force</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Force the scroll, even if the element is already visible (optional, default <code>false</code>)</li></ul></li></ul> <h3 id="examples-2"><a href="#examples-2" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> selected <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Scroll smoothly (this behavior can be polyfilled)</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">behavior</span><span class="token operator">:</span> <span class="token string">'smooth'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Force the scroll, even if the element is alredy visible</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span>selected<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">force</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="setzoom"><a href="#setzoom" class="header-anchor">#</a> setZoom</h2> <p>Set canvas zoom value</p> <h3 id="parameters-3"><a href="#parameters-3" class="header-anchor">#</a> Parameters</h3> <ul><li><code>value</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> The zoom value, from 0 to 100</li></ul> <h3 id="examples-3"><a href="#examples-3" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">setZoom</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// set zoom to 50%</span>
|
|
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="getzoom"><a href="#getzoom" class="header-anchor">#</a> getZoom</h2> <p>Get canvas zoom value</p> <h3 id="examples-4"><a href="#examples-4" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">setZoom</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// set zoom to 50%</span>
|
|
<span class="token keyword">const</span> zoom <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getZoom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 50</span>
|
|
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="setcoords"><a href="#setcoords" class="header-anchor">#</a> setCoords</h2> <p>Set canvas position coordinates</p> <h3 id="parameters-4"><a href="#parameters-4" class="header-anchor">#</a> Parameters</h3> <ul><li><code>x</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Horizontal position</li> <li><code>y</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">Number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Vertical position</li> <li><code>opts</code> <strong>ToWorldOption</strong> (optional, default <code>{}</code>)</li></ul> <h3 id="examples-5"><a href="#examples-5" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">setCoords</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="getcoords"><a href="#getcoords" class="header-anchor">#</a> getCoords</h2> <p>Get canvas position coordinates</p> <h3 id="examples-6"><a href="#examples-6" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">setCoords</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> coords <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getCoords</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// { x: 100, y: 100 }</span>
|
|
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Object containing coordinates</p> <h2 id="getlastdragresult"><a href="#getlastdragresult" class="header-anchor">#</a> getLastDragResult</h2> <p>Get the last created Component from a drag & drop to the canvas.</p> <p>Returns <strong>(<a href="/docs/api/component.html">Component</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined" target="_blank" rel="noopener noreferrer">undefined<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong></p> <h2 id="addspot"><a href="#addspot" class="header-anchor">#</a> addSpot</h2> <p>Add or update canvas spot.</p> <h3 id="parameters-5"><a href="#parameters-5" class="header-anchor">#</a> Parameters</h3> <ul><li><code>props</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Canvas spot properties.</li> <li><code>opts</code> <strong>AddOptions</strong> (optional, default <code>{}</code>)</li></ul> <h3 id="examples-7"><a href="#examples-7" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Add new canvas spot</span>
|
|
<span class="token keyword">const</span> spot <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token comment">// 'select' is one of the built-in spots</span>
|
|
<span class="token literal-property property">component</span><span class="token operator">:</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Add custom canvas spot</span>
|
|
<span class="token keyword">const</span> spot <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'my-custom-spot'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">component</span><span class="token operator">:</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Update the same spot by reusing its ID</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> spot<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
|
|
<span class="token literal-property property">component</span><span class="token operator">:</span> anotherComponent<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Returns <strong><a href="/docs/api/canvas_spot.html">CanvasSpot</a></strong></p> <h2 id="getspots"><a href="#getspots" class="header-anchor">#</a> getSpots</h2> <p>Get canvas spots.</p> <h3 id="parameters-6"><a href="#parameters-6" class="header-anchor">#</a> Parameters</h3> <ul><li><code>spotProps</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Canvas spot properties for filtering the result. With no properties, all available spots will be returned. (optional, default <code>{}</code>)</li></ul> <h3 id="examples-8"><a href="#examples-8" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> cmp1 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> cmp2 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'target'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> cmp3 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Get all spots</span>
|
|
<span class="token keyword">const</span> allSpots <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getSpots</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
allSpots<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 3</span>
|
|
|
|
<span class="token comment">// Get all 'select' spots</span>
|
|
<span class="token keyword">const</span> allSelectSpots <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getSpots</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
allSelectSpots<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 2</span>
|
|
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><<a href="/docs/api/canvas_spot.html">CanvasSpot</a>></strong></p> <h2 id="removespots"><a href="#removespots" class="header-anchor">#</a> removeSpots</h2> <p>Remove canvas spots.</p> <h3 id="parameters-7"><a href="#parameters-7" class="header-anchor">#</a> Parameters</h3> <ul><li><code>spotProps</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><<a href="/docs/api/canvas_spot.html">CanvasSpot</a>>)?</strong> Canvas spot properties for filtering spots to remove or an array of spots to remove. With no properties, all available spots will be removed. (optional, default <code>{}</code>)</li></ul> <h3 id="examples-9"><a href="#examples-9" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> cmp1 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> cmp2 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">addSpot</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'target'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> cmp3 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Remove all 'select' spots</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">removeSpots</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Remove spots by an array of canvas spots</span>
|
|
<span class="token keyword">const</span> filteredSpots <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getSpots</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">spot</span> <span class="token operator">=></span> myCustomCondition<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">removeSpots</span><span class="token punctuation">(</span>filteredSpots<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Remove all spots</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">removeSpots</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><<a href="/docs/api/canvas_spot.html">CanvasSpot</a>></strong></p> <h2 id="hascustomspot"><a href="#hascustomspot" class="header-anchor">#</a> hasCustomSpot</h2> <p>Check if the built-in canvas spot has a declared custom rendering.</p> <h3 id="parameters-8"><a href="#parameters-8" class="header-anchor">#</a> Parameters</h3> <ul><li><code>type</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Built-in canvas spot type</li></ul> <h3 id="examples-10"><a href="#examples-10" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">canvas</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// avoid rendering the built-in 'target' canvas spot</span>
|
|
<span class="token literal-property property">customSpots</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// ...</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">hasCustomSpot</span><span class="token punctuation">(</span><span class="token string">'select'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
|
|
canvas<span class="token punctuation">.</span><span class="token function">hasCustomSpot</span><span class="token punctuation">(</span><span class="token string">'target'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
|
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getworldrecttoscreen"><a href="#getworldrecttoscreen" class="header-anchor">#</a> getWorldRectToScreen</h2> <p>Transform a box rect from the world coordinate system to the screen one.</p> <h3 id="parameters-9"><a href="#parameters-9" class="header-anchor">#</a> Parameters</h3> <ul><li><code>boxRect</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></li></ul> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="refresh"><a href="#refresh" class="header-anchor">#</a> refresh</h2> <p>Update canvas for spots/tools positioning.</p> <h3 id="parameters-10"><a href="#parameters-10" class="header-anchor">#</a> Parameters</h3> <ul><li><p><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Options. (optional, default <code>{}</code>)</p> <ul><li><code>opts.spots</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Update the position of spots. (optional, default <code>false</code>)</li></ul></li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/canvas.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/9/2024, 2:20:14 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/api/i18n.html" class="prev">
|
|
I18n
|
|
</a></span> <span class="next"><a href="/docs/api/frame.html">
|
|
Frame
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.424ab1f7.js" defer></script><script src="/docs/assets/js/4.0070552e.js" defer></script><script src="/docs/assets/js/2.6fefd022.js" defer></script><script src="/docs/assets/js/1.d23e9fed.js" defer></script><script src="/docs/assets/js/41.725a5d92.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|