Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
rect",id:"rect",level:4},{value:"circle",id:"circle",level:4},{value:"path",id:"path",level:4},{value:"polygon",id:"polygon",level:4},{value:"Pixel standalone",id:"pixel-standalone",level:3}];function o(e){const r={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.h1,{id:"pixel-renderer",children:"Pixel renderer"}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Pixel"})," is the 2D renderer that's built into Posthoc. It's designed for large-scale pathfinding search problems. It stays performant when there are millions of elements."]}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.img,{alt:"Alt text",src:i(3135).Z+"",width:"2560",height:"1600"})}),"\n",(0,s.jsx)(r.h2,{id:"coordinate-system",children:"Coordinate system"}),"\n",(0,s.jsxs)(r.p,{children:["In ",(0,s.jsx)(r.strong,{children:"Pixel"}),", the ",(0,s.jsx)(r.code,{children:"x"})," axis is horizontal, spanning left to right, and the ",(0,s.jsx)(r.code,{children:"y"})," axis is vertical, spanning top to bottom. Lengths are measured in ",(0,s.jsx)(r.code,{children:"px"})," units."]}),"\n",(0,s.jsx)(r.h2,{id:"performance",children:"Performance"}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Pixel"})," uses multi-threaded, tile-based rendering with viewport culling. You can zoom in and out infinitely without loss in quality.\nIt also uses dynamic resolution, dropping the resolution down when the framerate decreases to help make playback smoother."]}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.img,{alt:"Alt text",src:i(8241).Z+"",width:"2560",height:"1600"})}),"\n",(0,s.jsxs)(r.p,{children:["If you find that ",(0,s.jsx)(r.strong,{children:"Pixel"})," is starting to get laggy, here are some tips to improve rendering performance."]}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Turn off acrylic"}),(0,s.jsx)("br",{}),"The ",(0,s.jsx)(r.strong,{children:"Settings > General > Acrylic"})," option can decrease general UI performance. You can turn this off to make ",(0,s.jsx)(r.strong,{children:"Pixel"})," faster."]}),"\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Combine elements"}),(0,s.jsx)("br",{}),(0,s.jsx)(r.strong,{children:"Pixel"}),"'s performance declines roughly linearly with the amount of elements. You can try to minimise the amount of elements by combining them. For example, draw a single large rectangle rather than several small rectangles."]}),"\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Avoid text"}),(0,s.jsx)("br",{}),"Text rendering is considerably slower than shapes. Consider storing additional information in ",(0,s.jsx)(r.code,{children:"$info"})," instead."]}),"\n"]}),"\n",(0,s.jsx)(r.h2,{id:"api",children:"API"}),"\n",(0,s.jsx)(r.h3,{id:"primitives",children:"Primitives"}),"\n",(0,s.jsx)(r.h4,{id:"rect",children:(0,s.jsx)(r.code,{children:"rect"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"x"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Horizontal position of the top left corner of this rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"y"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Vertical position of the top left corner of this rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"width"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Width of this rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"height"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Height of the rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this rect."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this rect."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"Display a label on top of this element. By default, its baseline left-aligned to the top left corner of the rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-x"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount horizontally."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-y"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount vertically."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-size"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsxs)(r.td,{children:["Required if a label is defined. The font size of the label. ",(0,s.jsx)(r.code,{children:"1px"})," makes the label about ",(0,s.jsx)(r.code,{children:"1px"})," tall."]})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-color"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required if a label is defined. The color of the label."})]})]})]}),"\n",(0,s.jsx)(r.h4,{id:"circle",children:(0,s.jsx)(r.code,{children:"circle"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"x"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"Required. The horizontal position of this circle's center."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"y"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"Required. The vertical position of this circle's center."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"radius"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"Required. The radius of this circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"Display a label on top of this element. By default, its baseline left-aligned to the center of the circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-x"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount horizontally."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-y"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount vertically."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-size"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsxs)(r.td,{children:["Required if a label is defined. The font size of the label. ",(0,s.jsx)(r.code,{children:"1px"})," makes the label about ",(0,s.jsx)(r.code,{children:"1px"})," tall."]})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-color"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required if a label is defined. The color of the label."})]})]})]}),"\n",(0,s.jsx)(r.h4,{id:"path",children:(0,s.jsx)(r.code,{children:"path"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"points"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"{ x: number, y: number }[]"})}),(0,s.jsx)(r.td,{children:"Required. The points on the path."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this path."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"line-width"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"The width of this path."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this path."})]})]})]}),"\n",(0,s.jsx)(r.h4,{id:"polygon",children:(0,s.jsx)(r.code,{children:"polygon"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"points"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"{ x: number, y: number }[]"})}),(0,s.jsx)(r.td,{children:"Required. The points on this polygon."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this polygon."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this polygon."})]})]})]}),"\n",(0,s.jsx)(r.h3,{id:"pixel-standalone",children:"Pixel standalone"}),"\n",(0,s.jsx)(r.admonition,{type:"warning",children:(0,s.jsx)(r.p,{children:"This section is incomplete."})}),"\n",(0,s.jsxs)(r.p,{children:["You can use the ",(0,s.jsx)(r.strong,{children:"Pixel"})," renderer without ",(0,s.jsx)(r.strong,{children:"Posthoc"}),"."]})]})}function x(e={}){const{wrapper:r}={...(0,d.a)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},3135:(e,r,i)=>{i.d(r,{Z:()=>s});const s=i.p+"assets/images/image-6-0a43433df4a57628a66524ad2e4cd66a.png"},8241:(e,r,i)=>{i.d(r,{Z:()=>s});const s=i.p+"assets/images/image-7-60472e8979c06c3fa6ab103a9c84b9db.png"},1151:(e,r,i)=>{i.d(r,{Z:()=>t,a:()=>l});var s=i(7294);const d={},n=s.createContext(d);function l(e){const r=s.useContext(n);return s.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function t(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:l(e.components),s.createElement(n.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/7cccdef3.e081584d.js b/assets/js/7cccdef3.e081584d.js
new file mode 100644
index 0000000..7e21c31
--- /dev/null
+++ b/assets/js/7cccdef3.e081584d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[8145],{7980:(e,r,i)=>{i.r(r),i.d(r,{assets:()=>c,contentTitle:()=>l,default:()=>x,frontMatter:()=>n,metadata:()=>t,toc:()=>h});var s=i(5893),d=i(1151);const n={sidebar_position:3,title:"Pixel renderer"},l="Pixel",t={id:"visualiser/pixel-renderer",title:"Pixel renderer",description:"Pixel is the 2D renderer that's built into Posthoc. It's designed for large-scale pathfinding search problems. It stays performant when there are millions of elements.",source:"@site/docs/3-visualiser/pixel-renderer.md",sourceDirName:"3-visualiser",slug:"/visualiser/pixel-renderer",permalink:"/docs/visualiser/pixel-renderer",draft:!1,unlisted:!1,editUrl:"https://github.com/ShortestPathLab/posthoc/tree/master/docs/3-visualiser/pixel-renderer.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Pixel renderer"},sidebar:"tutorialSidebar",previous:{title:"Extensions",permalink:"/docs/visualiser/3-1-user-guide/extensions"},next:{title:"Pixel Nano renderer",permalink:"/docs/visualiser/pixel-nano-renderer"}},c={},h=[{value:"Coordinate system",id:"coordinate-system",level:2},{value:"Performance",id:"performance",level:2},{value:"API",id:"api",level:2},{value:"Primitives",id:"primitives",level:3},{value:"rect",id:"rect",level:4},{value:"circle",id:"circle",level:4},{value:"path",id:"path",level:4},{value:"polygon",id:"polygon",level:4},{value:"Pixel standalone",id:"pixel-standalone",level:3}];function o(e){const r={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.h1,{id:"pixel",children:"Pixel"}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Pixel"})," is the 2D renderer that's built into Posthoc. It's designed for large-scale pathfinding search problems. It stays performant when there are millions of elements."]}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.img,{alt:"Alt text",src:i(3135).Z+"",width:"2560",height:"1600"})}),"\n",(0,s.jsx)(r.h2,{id:"coordinate-system",children:"Coordinate system"}),"\n",(0,s.jsxs)(r.p,{children:["In ",(0,s.jsx)(r.strong,{children:"Pixel"}),", the ",(0,s.jsx)(r.code,{children:"x"})," axis is horizontal, spanning left to right, and the ",(0,s.jsx)(r.code,{children:"y"})," axis is vertical, spanning top to bottom. Lengths are measured in ",(0,s.jsx)(r.code,{children:"px"})," units."]}),"\n",(0,s.jsx)(r.h2,{id:"performance",children:"Performance"}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Pixel"})," uses multi-threaded, tile-based rendering with viewport culling. You can zoom in and out infinitely without loss in quality.\nIt also uses dynamic resolution, dropping the resolution down when the framerate decreases to help make playback smoother."]}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.img,{alt:"Alt text",src:i(8241).Z+"",width:"2560",height:"1600"})}),"\n",(0,s.jsxs)(r.p,{children:["If you find that ",(0,s.jsx)(r.strong,{children:"Pixel"})," is starting to get laggy, here are some tips to improve rendering performance."]}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Turn off acrylic"}),(0,s.jsx)("br",{}),"The ",(0,s.jsx)(r.strong,{children:"Settings > General > Acrylic"})," option can decrease general UI performance. You can turn this off to make ",(0,s.jsx)(r.strong,{children:"Pixel"})," faster."]}),"\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Combine elements"}),(0,s.jsx)("br",{}),(0,s.jsx)(r.strong,{children:"Pixel"}),"'s performance declines roughly linearly with the amount of elements. You can try to minimise the amount of elements by combining them. For example, draw a single large rectangle rather than several small rectangles."]}),"\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"Avoid text"}),(0,s.jsx)("br",{}),"Text rendering is considerably slower than shapes. Consider storing additional information in ",(0,s.jsx)(r.code,{children:"$info"})," instead."]}),"\n"]}),"\n",(0,s.jsx)(r.h2,{id:"api",children:"API"}),"\n",(0,s.jsx)(r.h3,{id:"primitives",children:"Primitives"}),"\n",(0,s.jsx)(r.h4,{id:"rect",children:(0,s.jsx)(r.code,{children:"rect"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"x"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Horizontal position of the top left corner of this rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"y"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Vertical position of the top left corner of this rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"width"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Width of this rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"height"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Required. Height of the rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this rect."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this rect."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"Display a label on top of this element. By default, its baseline left-aligned to the top left corner of the rectangle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-x"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount horizontally."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-y"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount vertically."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-size"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsxs)(r.td,{children:["Required if a label is defined. The font size of the label. ",(0,s.jsx)(r.code,{children:"1px"})," makes the label about ",(0,s.jsx)(r.code,{children:"1px"})," tall."]})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-color"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required if a label is defined. The color of the label."})]})]})]}),"\n",(0,s.jsx)(r.h4,{id:"circle",children:(0,s.jsx)(r.code,{children:"circle"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"x"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"Required. The horizontal position of this circle's center."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"y"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"Required. The vertical position of this circle's center."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"radius"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"number"})}),(0,s.jsx)(r.td,{children:"Required. The radius of this circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"string"})}),(0,s.jsx)(r.td,{children:"Display a label on top of this element. By default, its baseline left-aligned to the center of the circle."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-x"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount horizontally."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-y"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"Offset the label by this amount vertically."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-size"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsxs)(r.td,{children:["Required if a label is defined. The font size of the label. ",(0,s.jsx)(r.code,{children:"1px"})," makes the label about ",(0,s.jsx)(r.code,{children:"1px"})," tall."]})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"label-color"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required if a label is defined. The color of the label."})]})]})]}),"\n",(0,s.jsx)(r.h4,{id:"path",children:(0,s.jsx)(r.code,{children:"path"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"points"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"{ x: number, y: number }[]"})}),(0,s.jsx)(r.td,{children:"Required. The points on the path."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this path."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"line-width"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (px)"]}),(0,s.jsx)(r.td,{children:"The width of this path."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this path."})]})]})]}),"\n",(0,s.jsx)(r.h4,{id:"polygon",children:(0,s.jsx)(r.code,{children:"polygon"})}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Property"}),(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Description"})]})}),(0,s.jsxs)(r.tbody,{children:[(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"points"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"{ x: number, y: number }[]"})}),(0,s.jsx)(r.td,{children:"Required. The points on this polygon."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"fill"})}),(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value",children:(0,s.jsx)(r.code,{children:"CSSColor"})})}),(0,s.jsx)(r.td,{children:"Required. Color of this polygon."})]}),(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.code,{children:"alpha"})}),(0,s.jsxs)(r.td,{children:[(0,s.jsx)(r.code,{children:"number"})," (0-1)"]}),(0,s.jsx)(r.td,{children:"Opaqueness of this polygon."})]})]})]}),"\n",(0,s.jsx)(r.h3,{id:"pixel-standalone",children:"Pixel standalone"}),"\n",(0,s.jsx)(r.admonition,{type:"warning",children:(0,s.jsx)(r.p,{children:"This section is incomplete."})}),"\n",(0,s.jsxs)(r.p,{children:["You can use the ",(0,s.jsx)(r.strong,{children:"Pixel"})," renderer without ",(0,s.jsx)(r.strong,{children:"Posthoc"}),"."]})]})}function x(e={}){const{wrapper:r}={...(0,d.a)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},3135:(e,r,i)=>{i.d(r,{Z:()=>s});const s=i.p+"assets/images/image-6-0a43433df4a57628a66524ad2e4cd66a.png"},8241:(e,r,i)=>{i.d(r,{Z:()=>s});const s=i.p+"assets/images/image-7-60472e8979c06c3fa6ab103a9c84b9db.png"},1151:(e,r,i)=>{i.d(r,{Z:()=>t,a:()=>l});var s=i(7294);const d={},n=s.createContext(d);function l(e){const r=s.useContext(n);return s.useMemo((function(){return"function"==typeof e?e(r):{...r,...e}}),[r,e])}function t(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:l(e.components),s.createElement(n.Provider,{value:r},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/935f2afb.4621fc34.js b/assets/js/935f2afb.4621fc34.js
deleted file mode 100644
index a42250b..0000000
--- a/assets/js/935f2afb.4621fc34.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Get started","href":"/docs/get-started","docId":"get-started","unlisted":false},{"type":"link","label":"Overview","href":"/docs/overview","docId":"overview","unlisted":false},{"type":"link","label":"Search trace","href":"/docs/search-trace","docId":"search-trace","unlisted":false},{"type":"category","label":"Posthoc visualiser","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Overview","href":"/docs/visualiser/overview","docId":"visualiser/overview","unlisted":false},{"type":"category","label":"User guide","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"UI","href":"/docs/visualiser/3-1-user-guide/interface","docId":"visualiser/3-1-user-guide/interface","unlisted":false},{"type":"link","label":"Layers","href":"/docs/visualiser/3-1-user-guide/layers","docId":"visualiser/3-1-user-guide/layers","unlisted":false},{"type":"link","label":"Extensions","href":"/docs/visualiser/3-1-user-guide/extensions","docId":"visualiser/3-1-user-guide/extensions","unlisted":false}],"href":"/docs/category/user-guide"},{"type":"link","label":"Pixel renderer","href":"/docs/visualiser/pixel-renderer","docId":"visualiser/pixel-renderer","unlisted":false},{"type":"link","label":"Contributing","href":"/docs/visualiser/contributing","docId":"visualiser/contributing","unlisted":false}],"href":"/docs/category/posthoc-visualiser"},{"type":"link","label":"Visualiser Adapter Protocol \u26a0\ufe0f","href":"/docs/visualiser-adapter-protocol","docId":"visualiser-adapter-protocol","unlisted":false},{"type":"category","label":"Tutorials","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Single Agent Grid Search","href":"/docs/tutorials/single-agent-grid","docId":"tutorials/single-agent-grid","unlisted":false},{"type":"link","label":"Decision Tree","href":"/docs/tutorials/tile","docId":"tutorials/tile","unlisted":false}],"href":"/docs/category/tutorials"}]},"docs":{"get-started":{"id":"get-started","title":"Get started","description":"We\'re excited to have you here. \ud83d\ude0a","sidebar":"tutorialSidebar"},"overview":{"id":"overview","title":"Overview","description":"Posthoc is a way to build simple and effective visualisations \u2728 for sequential decision-making algorithms, such as search algorithms \ud83d\ude80.","sidebar":"tutorialSidebar"},"search-trace":{"id":"search-trace","title":"Search trace","description":"This is the centrepiece of Posthoc. \u2728","sidebar":"tutorialSidebar"},"tutorials/single-agent-grid":{"id":"tutorials/single-agent-grid","title":"Single Agent Grid Search","description":"Follow these steps to visualise a single-agent search, in our case A\\\\*, on a grid map.","sidebar":"tutorialSidebar"},"tutorials/tile":{"id":"tutorials/tile","title":"Decision Tree","description":"Posthoc comes with a built-in decision tree viewer for searches that may have no spatial embedding.","sidebar":"tutorialSidebar"},"visualiser-adapter-protocol":{"id":"visualiser-adapter-protocol","title":"Visualiser Adapter Protocol \u26a0\ufe0f","description":"The Visualiser Adapter Protocol connects solvers directly to the visualiser to enable interactivity and integrations that would otherwise not be possible with search trace files.","sidebar":"tutorialSidebar"},"visualiser/3-1-user-guide/extensions":{"id":"visualiser/3-1-user-guide/extensions","title":"Extensions","description":"Adapters","sidebar":"tutorialSidebar"},"visualiser/3-1-user-guide/interface":{"id":"visualiser/3-1-user-guide/interface","title":"UI","description":"Posthoc\'s interface is composed of views, a titlebar, and a sidebar. You can add, remove, and rearrange views to your desire.","sidebar":"tutorialSidebar"},"visualiser/3-1-user-guide/layers":{"id":"visualiser/3-1-user-guide/layers","title":"Layers","description":"Posthoc uses a layering system to help you create complex visualisations with tons of parts.","sidebar":"tutorialSidebar"},"visualiser/contributing":{"id":"visualiser/contributing","title":"Contributing","description":"We welcome new issues, discussions, and PRs on our GitHub repository.","sidebar":"tutorialSidebar"},"visualiser/overview":{"id":"visualiser/overview","title":"Overview","description":"Posthoc visualises search traces. It gives you a variety of","sidebar":"tutorialSidebar"},"visualiser/pixel-renderer":{"id":"visualiser/pixel-renderer","title":"Pixel renderer","description":"Pixel is the 2D renderer that\'s built into Posthoc. It\'s designed for large-scale pathfinding search problems. It stays performant when there are millions of elements.","sidebar":"tutorialSidebar"}}}')}}]);
\ No newline at end of file
diff --git a/assets/js/935f2afb.f40837d4.js b/assets/js/935f2afb.f40837d4.js
new file mode 100644
index 0000000..1e091a1
--- /dev/null
+++ b/assets/js/935f2afb.f40837d4.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Get started","href":"/docs/get-started","docId":"get-started","unlisted":false},{"type":"link","label":"Overview","href":"/docs/overview","docId":"overview","unlisted":false},{"type":"link","label":"Search trace","href":"/docs/search-trace","docId":"search-trace","unlisted":false},{"type":"category","label":"Posthoc visualiser","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Overview","href":"/docs/visualiser/overview","docId":"visualiser/overview","unlisted":false},{"type":"category","label":"User guide","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"UI","href":"/docs/visualiser/3-1-user-guide/interface","docId":"visualiser/3-1-user-guide/interface","unlisted":false},{"type":"link","label":"Layers","href":"/docs/visualiser/3-1-user-guide/layers","docId":"visualiser/3-1-user-guide/layers","unlisted":false},{"type":"link","label":"Extensions","href":"/docs/visualiser/3-1-user-guide/extensions","docId":"visualiser/3-1-user-guide/extensions","unlisted":false}],"href":"/docs/category/user-guide"},{"type":"link","label":"Pixel renderer","href":"/docs/visualiser/pixel-renderer","docId":"visualiser/pixel-renderer","unlisted":false},{"type":"link","label":"Pixel Nano renderer","href":"/docs/visualiser/pixel-nano-renderer","docId":"visualiser/pixel-nano-renderer","unlisted":false},{"type":"link","label":"Contributing","href":"/docs/visualiser/contributing","docId":"visualiser/contributing","unlisted":false}],"href":"/docs/category/posthoc-visualiser"},{"type":"link","label":"Visualiser Adapter Protocol \u26a0\ufe0f","href":"/docs/visualiser-adapter-protocol","docId":"visualiser-adapter-protocol","unlisted":false},{"type":"category","label":"Tutorials","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Single Agent Grid Search","href":"/docs/tutorials/single-agent-grid","docId":"tutorials/single-agent-grid","unlisted":false},{"type":"link","label":"Decision Tree","href":"/docs/tutorials/tile","docId":"tutorials/tile","unlisted":false}],"href":"/docs/category/tutorials"}]},"docs":{"get-started":{"id":"get-started","title":"Get started","description":"We\'re excited to have you here. \ud83d\ude0a","sidebar":"tutorialSidebar"},"overview":{"id":"overview","title":"Overview","description":"Posthoc is a way to build simple and effective visualisations \u2728 for sequential decision-making algorithms, such as search algorithms \ud83d\ude80.","sidebar":"tutorialSidebar"},"search-trace":{"id":"search-trace","title":"Search trace","description":"This is the centrepiece of Posthoc. \u2728","sidebar":"tutorialSidebar"},"tutorials/single-agent-grid":{"id":"tutorials/single-agent-grid","title":"Single Agent Grid Search","description":"Follow these steps to visualise a single-agent search, in our case A\\\\*, on a grid map.","sidebar":"tutorialSidebar"},"tutorials/tile":{"id":"tutorials/tile","title":"Decision Tree","description":"Posthoc comes with a built-in decision tree viewer for searches that may have no spatial embedding.","sidebar":"tutorialSidebar"},"visualiser-adapter-protocol":{"id":"visualiser-adapter-protocol","title":"Visualiser Adapter Protocol \u26a0\ufe0f","description":"The Visualiser Adapter Protocol connects solvers directly to the visualiser to enable interactivity and integrations that would otherwise not be possible with search trace files.","sidebar":"tutorialSidebar"},"visualiser/3-1-user-guide/extensions":{"id":"visualiser/3-1-user-guide/extensions","title":"Extensions","description":"Adapters","sidebar":"tutorialSidebar"},"visualiser/3-1-user-guide/interface":{"id":"visualiser/3-1-user-guide/interface","title":"UI","description":"Posthoc\'s interface is composed of views, a titlebar, and a sidebar. You can add, remove, and rearrange views to your desire.","sidebar":"tutorialSidebar"},"visualiser/3-1-user-guide/layers":{"id":"visualiser/3-1-user-guide/layers","title":"Layers","description":"Posthoc uses a layering system to help you create complex visualisations with tons of parts.","sidebar":"tutorialSidebar"},"visualiser/contributing":{"id":"visualiser/contributing","title":"Contributing","description":"We welcome new issues, discussions, and PRs on our GitHub repository.","sidebar":"tutorialSidebar"},"visualiser/overview":{"id":"visualiser/overview","title":"Overview","description":"Posthoc visualises search traces. It gives you a variety of","sidebar":"tutorialSidebar"},"visualiser/pixel-nano-renderer":{"id":"visualiser/pixel-nano-renderer","title":"Pixel Nano renderer","description":"Pixel Nano is a minimalist renderer. It works just like Pixel, except it runs on the main thread, doesn\'t support fancy features like tiling, dynamic resolution or infinite zoom, and doesn\'t scale as well for large problems.","sidebar":"tutorialSidebar"},"visualiser/pixel-renderer":{"id":"visualiser/pixel-renderer","title":"Pixel renderer","description":"Pixel is the 2D renderer that\'s built into Posthoc. It\'s designed for large-scale pathfinding search problems. It stays performant when there are millions of elements.","sidebar":"tutorialSidebar"}}}')}}]);
\ No newline at end of file
diff --git a/assets/js/b939bac7.b4f1a0de.js b/assets/js/b939bac7.b4f1a0de.js
new file mode 100644
index 0000000..a298490
--- /dev/null
+++ b/assets/js/b939bac7.b4f1a0de.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[4957],{9785:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>t,metadata:()=>l,toc:()=>d});var s=n(5893),r=n(1151);const t={sidebar_position:4,title:"Pixel Nano renderer"},o="Pixel Nano",l={id:"visualiser/pixel-nano-renderer",title:"Pixel Nano renderer",description:"Pixel Nano is a minimalist renderer. It works just like Pixel, except it runs on the main thread, doesn't support fancy features like tiling, dynamic resolution or infinite zoom, and doesn't scale as well for large problems.",source:"@site/docs/3-visualiser/pixel-nano-renderer.md",sourceDirName:"3-visualiser",slug:"/visualiser/pixel-nano-renderer",permalink:"/docs/visualiser/pixel-nano-renderer",draft:!1,unlisted:!1,editUrl:"https://github.com/ShortestPathLab/posthoc/tree/master/docs/3-visualiser/pixel-nano-renderer.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4,title:"Pixel Nano renderer"},sidebar:"tutorialSidebar",previous:{title:"Pixel renderer",permalink:"/docs/visualiser/pixel-renderer"},next:{title:"Contributing",permalink:"/docs/visualiser/contributing"}},a={},d=[{value:"Getting Pixel Nano",id:"getting-pixel-nano",level:2},{value:"Primitives",id:"primitives",level:2}];function c(e){const i={a:"a",h1:"h1",h2:"h2",img:"img",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(i.h1,{id:"pixel-nano",children:"Pixel Nano"}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Pixel Nano"})," is a minimalist renderer. It works just like ",(0,s.jsx)(i.strong,{children:"Pixel"}),", except it runs on the main thread, doesn't support fancy features like tiling, dynamic resolution or infinite zoom, and doesn't scale as well for large problems."]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{alt:"Pixel Nano",src:n(7543).Z+"",width:"2560",height:"1528"})}),"\n",(0,s.jsxs)(i.p,{children:["However because there's much less overhead to run ",(0,s.jsx)(i.strong,{children:"Pixel Nano"}),", you might find that for smaller problems, it looks and performs better."]}),"\n",(0,s.jsx)(i.h2,{id:"getting-pixel-nano",children:"Getting Pixel Nano"}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Pixel Nano"})," is bundled with ",(0,s.jsx)(i.strong,{children:"Posthoc"}),", but not enabled by default."]}),"\n",(0,s.jsxs)(i.p,{children:["To enable Pixel Nano, add ",(0,s.jsx)(i.a,{href:"/docs/visualiser/3-1-user-guide/extensions#built-in-renderers",children:"Pixel Nano's URL"})," to the Renderers list in ",(0,s.jsx)(i.a,{href:"/docs/visualiser/3-1-user-guide/interface#settings",children:"Posthoc's settings"}),". Then, select ",(0,s.jsx)(i.strong,{children:"Pixel Nano"})," as the renderer for a viewport:"]}),"\n",(0,s.jsx)(i.p,{children:(0,s.jsx)(i.img,{alt:"Selecting Pixel Nano",src:n(8486).Z+"",width:"361",height:"222"})}),"\n",(0,s.jsx)(i.h1,{id:"api",children:"API"}),"\n",(0,s.jsx)(i.h2,{id:"primitives",children:"Primitives"}),"\n",(0,s.jsxs)(i.p,{children:[(0,s.jsx)(i.strong,{children:"Pixel Nano"})," supports the same primitives as ",(0,s.jsx)(i.strong,{children:"Pixel"}),". ",(0,s.jsx)(i.a,{href:"/docs/visualiser/pixel-renderer#primitives",children:"See here"}),"."]})]})}function h(e={}){const{wrapper:i}={...(0,r.a)(),...e.components};return i?(0,s.jsx)(i,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},7543:(e,i,n)=>{n.d(i,{Z:()=>s});const s=n.p+"assets/images/pixel-nano-04a072696c6f8996f330fd9779e64bcf.png"},8486:(e,i,n)=>{n.d(i,{Z:()=>s});const s=n.p+"assets/images/select-pixel-nano-e0e83961a56d22f9bf26a4a6462e30df.png"},1151:(e,i,n)=>{n.d(i,{Z:()=>l,a:()=>o});var s=n(7294);const r={},t=s.createContext(r);function o(e){const i=s.useContext(t);return s.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function l(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(t.Provider,{value:i},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/eae09382.996b981a.js b/assets/js/eae09382.996b981a.js
new file mode 100644
index 0000000..1daf430
--- /dev/null
+++ b/assets/js/eae09382.996b981a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[4857],{1299:(t,e,s)=>{s.r(e),s.d(e,{assets:()=>c,contentTitle:()=>o,default:()=>l,frontMatter:()=>r,metadata:()=>a,toc:()=>u});var i=s(5893),n=s(1151);const r={sidebar_position:5},o="Contributing",a={id:"visualiser/contributing",title:"Contributing",description:"We welcome new issues, discussions, and PRs on our GitHub repository.",source:"@site/docs/3-visualiser/contributing.md",sourceDirName:"3-visualiser",slug:"/visualiser/contributing",permalink:"/docs/visualiser/contributing",draft:!1,unlisted:!1,editUrl:"https://github.com/ShortestPathLab/posthoc/tree/master/docs/3-visualiser/contributing.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Pixel Nano renderer",permalink:"/docs/visualiser/pixel-nano-renderer"},next:{title:"Visualiser Adapter Protocol \u26a0\ufe0f",permalink:"/docs/visualiser-adapter-protocol"}},c={},u=[];function d(t){const e={a:"a",h1:"h1",p:"p",...(0,n.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"contributing",children:"Contributing"}),"\n",(0,i.jsxs)(e.p,{children:["We welcome new issues, discussions, and PRs on our ",(0,i.jsx)(e.a,{href:"https://github.com/ShortestPathLab/posthoc-app",children:"GitHub repository"}),"."]}),"\n",(0,i.jsxs)(e.p,{children:["Check out our roadmap ",(0,i.jsx)(e.a,{href:"https://github.com/orgs/path-visualiser/projects/2/views/2",children:"here"}),"."]})]})}function l(t={}){const{wrapper:e}={...(0,n.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(d,{...t})}):d(t)}},1151:(t,e,s)=>{s.d(e,{Z:()=>a,a:()=>o});var i=s(7294);const n={},r=i.createContext(n);function o(t){const e=i.useContext(r);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function a(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:o(t.components),i.createElement(r.Provider,{value:e},t.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/eae09382.d2ea1da4.js b/assets/js/eae09382.d2ea1da4.js
deleted file mode 100644
index 4f5df91..0000000
--- a/assets/js/eae09382.d2ea1da4.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[4857],{1299:(t,e,s)=>{s.r(e),s.d(e,{assets:()=>a,contentTitle:()=>o,default:()=>l,frontMatter:()=>n,metadata:()=>c,toc:()=>u});var i=s(5893),r=s(1151);const n={sidebar_position:4},o="Contributing",c={id:"visualiser/contributing",title:"Contributing",description:"We welcome new issues, discussions, and PRs on our GitHub repository.",source:"@site/docs/3-visualiser/contributing.md",sourceDirName:"3-visualiser",slug:"/visualiser/contributing",permalink:"/docs/visualiser/contributing",draft:!1,unlisted:!1,editUrl:"https://github.com/ShortestPathLab/posthoc/tree/master/docs/3-visualiser/contributing.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Pixel renderer",permalink:"/docs/visualiser/pixel-renderer"},next:{title:"Visualiser Adapter Protocol \u26a0\ufe0f",permalink:"/docs/visualiser-adapter-protocol"}},a={},u=[];function d(t){const e={a:"a",h1:"h1",p:"p",...(0,r.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"contributing",children:"Contributing"}),"\n",(0,i.jsxs)(e.p,{children:["We welcome new issues, discussions, and PRs on our ",(0,i.jsx)(e.a,{href:"https://github.com/ShortestPathLab/posthoc-app",children:"GitHub repository"}),"."]}),"\n",(0,i.jsxs)(e.p,{children:["Check out our roadmap ",(0,i.jsx)(e.a,{href:"https://github.com/orgs/path-visualiser/projects/2/views/2",children:"here"}),"."]})]})}function l(t={}){const{wrapper:e}={...(0,r.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(d,{...t})}):d(t)}},1151:(t,e,s)=>{s.d(e,{Z:()=>c,a:()=>o});var i=s(7294);const r={},n=i.createContext(r);function o(t){const e=i.useContext(n);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:o(t.components),i.createElement(n.Provider,{value:e},t.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/main.035cd694.js b/assets/js/main.035cd694.js
deleted file mode 100644
index e3f7e08..0000000
--- a/assets/js/main.035cd694.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*! For license information please see main.035cd694.js.LICENSE.txt */
-(self.webpackChunkdocs_2=self.webpackChunkdocs_2||[]).push([[179],{8417:(e,t,n)=>{"use strict";n.d(t,{Z:()=>oe});var r=function(){function e(e){var t=this;this._insertTag=function(e){var n;n=0===t.tags.length?t.insertionPoint?t.insertionPoint.nextSibling:t.prepend?t.container.firstChild:t.before:t.tags[t.tags.length-1].nextSibling,t.container.insertBefore(e,n),t.tags.push(e)},this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container,this.prepend=e.prepend,this.insertionPoint=e.insertionPoint,this.before=null}var t=e.prototype;return t.hydrate=function(e){e.forEach(this._insertTag)},t.insert=function(e){this.ctr%(this.isSpeedy?65e3:1)==0&&this._insertTag(function(e){var t=document.createElement("style");return t.setAttribute("data-emotion",e.key),void 0!==e.nonce&&t.setAttribute("nonce",e.nonce),t.appendChild(document.createTextNode("")),t.setAttribute("data-s",""),t}(this));var t=this.tags[this.tags.length-1];if(this.isSpeedy){var n=function(e){if(e.sheet)return e.sheet;for(var t=0;tYour Docusaurus site did not load properly.
\nA very common reason is a wrong site baseUrl configuration.
\nCurrent configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\nWe suggest trying baseUrl =
\n.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const r=n(9901),o=n(9642),i=new Set;function a(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...i,...Object.keys(Prism.languages)];o(r,e,t).load((e=>{if(!(e in r.languages))return void(a.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),i.add(e)}))}a.silent=!1,e.exports=a},6854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,o,i){if(n.language===r){var a=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof i&&!i(e))return e;for(var o,l=a.length;-1!==n.code.indexOf(o=t(r,l));)++l;return a[l]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var o=0,i=Object.keys(n.tokenStack);!function a(l){for(var s=0;sYour Docusaurus site did not load properly.
\nA very common reason is a wrong site