[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"quirekit-doc:\u002Fen\u002Fbuild\u002Fview":3},{"id":4,"title":5,"body":6,"description":334,"extension":335,"keywords":336,"locale":337,"meta":338,"navigation":90,"order":87,"path":339,"section":340,"seo":341,"stem":342,"__hash__":343},"docs\u002Fbuild\u002Fview.en.md","Display content with Canvas\u002FSVG",{"type":7,"value":8,"toc":328},"minimark",[9,13,27,32,47,186,192,195,199,203,210,245,255,259,270,281,285,292,324],[10,11,12],"p",{},"View handles document display and input. Replace the native DOM view from chapter one with Canvas; Core still uses the same nodes, commands and history mechanisms.",[10,14,15,16,20,21,26],{},"Obtain a matching version of ",[17,18,19],"code",{},"@quirekit\u002Fview",". Its licensing differs from Core; see ",[22,23,25],"a",{"href":24},"\u002Fen\u002Fsupport","licensing",".",[28,29,31],"h2",{"id":30},"_1-install-the-view","1. Install the view",[10,33,34,35,38,39,42,43,46],{},"Replace ",[17,36,37],{},"DomViewExtension"," with the Canvas adapter and select ",[17,40,41],{},"mode: 'canvas'",". This creation excerpt belongs inside the previous component's ",[17,44,45],{},"onMounted",":",[48,49,55],"pre",{"className":50,"code":51,"filename":52,"language":53,"meta":54,"style":54},"language-ts shiki shiki-themes github-light github-light github-dark","import { canvasViewExtension } from '@quirekit\u002Fview'\nimport '@quirekit\u002Fview\u002Fstyles.css'\n\neditor = new Editor({\n  element: element.value,\n  mode: 'canvas',\n  extensions: [\n    StarterKit,\n    canvasViewExtension({ runtime: { width: 720, height: 900 } }),\n  ],\n  content: '\u003Cp>Content displayed by Canvas.\u003C\u002Fp>',\n})\n","Create a Canvas view","ts","",[17,56,57,77,85,92,111,117,129,135,141,163,169,180],{"__ignoreMap":54},[58,59,62,66,70,73],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sDD9d","import",[58,67,69],{"class":68},"sVPnS"," { canvasViewExtension } ",[58,71,72],{"class":64},"from",[58,74,76],{"class":75},"s-HEn"," '@quirekit\u002Fview'\n",[58,78,80,82],{"class":60,"line":79},2,[58,81,65],{"class":64},[58,83,84],{"class":75}," '@quirekit\u002Fview\u002Fstyles.css'\n",[58,86,88],{"class":60,"line":87},3,[58,89,91],{"emptyLinePlaceholder":90},true,"\n",[58,93,95,98,101,104,108],{"class":60,"line":94},4,[58,96,97],{"class":68},"editor ",[58,99,100],{"class":64},"=",[58,102,103],{"class":64}," new",[58,105,107],{"class":106},"sgQzM"," Editor",[58,109,110],{"class":68},"({\n",[58,112,114],{"class":60,"line":113},5,[58,115,116],{"class":68},"  element: element.value,\n",[58,118,120,123,126],{"class":60,"line":119},6,[58,121,122],{"class":68},"  mode: ",[58,124,125],{"class":75},"'canvas'",[58,127,128],{"class":68},",\n",[58,130,132],{"class":60,"line":131},7,[58,133,134],{"class":68},"  extensions: [\n",[58,136,138],{"class":60,"line":137},8,[58,139,140],{"class":68},"    StarterKit,\n",[58,142,144,147,150,154,157,160],{"class":60,"line":143},9,[58,145,146],{"class":106},"    canvasViewExtension",[58,148,149],{"class":68},"({ runtime: { width: ",[58,151,153],{"class":152},"sUNQB","720",[58,155,156],{"class":68},", height: ",[58,158,159],{"class":152},"900",[58,161,162],{"class":68}," } }),\n",[58,164,166],{"class":60,"line":165},10,[58,167,168],{"class":68},"  ],\n",[58,170,172,175,178],{"class":60,"line":171},11,[58,173,174],{"class":68},"  content: ",[58,176,177],{"class":75},"'\u003Cp>Content displayed by Canvas.\u003C\u002Fp>'",[58,179,128],{"class":68},[58,181,183],{"class":60,"line":182},12,[58,184,185],{"class":68},"})\n",[10,187,188,191],{},[17,189,190],{},"runtime"," configures the view; dimensions use CSS pixels. Structure styles position content, input and selection layers and must be imported with the adapter.",[10,193,194],{},"This single-file example uses its container width. Click to edit; its source includes all imports and Vue lifecycle hooks.",[196,197],"docs-demo",{"name":198},"tutorial\u002Fcanvas",[28,200,202],{"id":201},"_2-switch-to-svg-while-keeping-content","2. Switch to SVG while keeping content",[10,204,205,206,209],{},"Install ",[17,207,208],{},"svgViewExtension()"," too when creating the editor, then call:",[48,211,214],{"className":50,"code":212,"filename":213,"language":53,"meta":54,"style":54},"editor.changeMode('svg')\neditor.changeMode('canvas')\n","Switch display",[17,215,216,233],{"__ignoreMap":54},[58,217,218,221,224,227,230],{"class":60,"line":61},[58,219,220],{"class":68},"editor.",[58,222,223],{"class":106},"changeMode",[58,225,226],{"class":68},"(",[58,228,229],{"class":75},"'svg'",[58,231,232],{"class":68},")\n",[58,234,235,237,239,241,243],{"class":60,"line":79},[58,236,220],{"class":68},[58,238,223],{"class":106},[58,240,226],{"class":68},[58,242,125],{"class":75},[58,244,232],{"class":68},[10,246,247,250,251,254],{},[17,248,249],{},"changeMode()"," replaces the primary view without creating new content. Another ",[17,252,253],{},"mount()"," adds a view instead. Destroy the owned Editor when the component exits.",[28,256,258],{"id":257},"_3-let-the-workspace-manage-scroll-and-zoom","3. Let the workspace manage scroll and zoom",[10,260,261,262,265,266,269],{},"For scrolling inside your container, pass it as ",[17,263,264],{},"scrollViewport"," with ",[17,267,268],{},"scrollSource: 'viewport'",". View can then handle input and selection using the correct scroll position.",[10,271,272,273,276,277,280],{},"The complete example calculates display zoom in ",[17,274,275],{},"workspace.vue"," and reports page counts and content dimensions from ",[17,278,279],{},"runtime.ts",". Display zoom must not rewrite paper dimensions in the document.",[28,282,284],{"id":283},"_4-pagination-comes-from-the-model","4. Pagination comes from the model",[10,286,287,288,291],{},"Canvas does not itself add Word pagination. Articles can use continuous layout; the Word model supplies page rules. ",[17,289,290],{},"pageStack: true"," displays resulting pages separately without inventing section, header or footer rules.",[10,293,294,295,298,299,301,302,304,305,309,310,314,315,319,320,26],{},"For pagination, inspect ",[17,296,297],{},"assembly\u002Fword.ts",", ",[17,300,279],{}," and ",[17,303,275],{}," in the ",[22,306,308],{"href":307},"\u002Fen\u002Fbuild\u002Freference","complete reference",", alongside ",[22,311,313],{"href":312},"\u002Fen\u002Fbuild\u002Fmodel","document models",". Next: ",[22,316,318],{"href":317},"\u002Fen\u002Fbuild\u002Fcommands","connect your toolbar",". Detailed parameters are in ",[22,321,323],{"href":322},"\u002Fen\u002Fapi\u002Fview","View API",[325,326,327],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":54,"searchDepth":79,"depth":79,"links":329},[330,331,332,333],{"id":30,"depth":79,"text":31},{"id":201,"depth":79,"text":202},{"id":257,"depth":79,"text":258},{"id":283,"depth":79,"text":284},"Replace DOM with Canvas and understand scrolling, zoom and pagination responsibilities.","md",null,"en",{},"\u002Fen\u002Fbuild\u002Fview","Build a product",{"title":5,"description":334},"build\u002Fview.en","HLlQZnkpDcp1KH-G4q7Xg9blUAs5IlPQpVIZwWGC_zI",1793045208528]