diff --git a/404.html b/404.html index 8692b88f..aff7b16b 100644 --- a/404.html +++ b/404.html @@ -3,14 +3,14 @@ -deck.gl-community - - +deck.gl-community + +
- - + + \ No newline at end of file diff --git a/assets/js/09dbb192.1716487d.js b/assets/js/09dbb192.1716487d.js deleted file mode 100644 index ea8a9ca4..00000000 --- a/assets/js/09dbb192.1716487d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[109],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=s(r),m=o,y=d["".concat(c,".").concat(m)]||d[m]||u[m]||a;return r?n.createElement(y,l(l({ref:t},p),{},{components:r})):n.createElement(y,l({ref:t},p))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:o,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},l="SelectionLayer",i={unversionedId:"modules/editor-layers/api-reference/selection-layer",id:"modules/editor-layers/api-reference/selection-layer",title:"SelectionLayer",description:"This layer can be used to select deck.gl objects using mouse drawing.",source:"@site/../docs/modules/editor-layers/api-reference/selection-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/selection-layer",permalink:"/docs/modules/editor-layers/api-reference/selection-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/selection-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EditableGeoJsonLayer",permalink:"/docs/modules/editor-layers/api-reference/editable-geojson-layer"},next:{title:"PathMarkerLayer",permalink:"/docs/modules/editor-layers/api-reference/path-marker-layer"}},c={},s=[{value:"Properties",id:"properties",level:2},{value:"selectionType (String, required)",id:"selectiontype-string-required",level:4},{value:"onSelect (Function, required)",id:"onselect-function-required",level:4},{value:"layerIds (String[], required)",id:"layerids-string-required",level:4}],p={toc:s},d="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"selectionlayer"},"SelectionLayer"),(0,o.kt)("p",null,"This layer can be used to select deck.gl objects using mouse drawing."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport DeckGL from '@deck.gl/react';\nimport { ScatterplotLayer } from '@deck.gl/layers';\nimport { SelectionLayer } from '@nebula.gl/layers';\nimport { StaticMap } from 'react-map-gl';\n\nconst MAPBOX_ACCESS_TOKEN = ''; // add your mapbox token here\n\nconst initialViewState = {\n longitude: -73.986022,\n latitude: 40.730743,\n zoom: 12,\n};\n\nconst MALE_COLOR = [0, 128, 255];\nconst FEMALE_COLOR = [255, 0, 128];\nconst DATA_URL =\n 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'; // eslint-disable-line\n\nconst App = function () {\n const radius = 30;\n const maleColor = MALE_COLOR;\n const femaleColor = FEMALE_COLOR;\n const data = fetch(DATA_URL).then((resp) => resp.json());\n\n const layers = [\n new ScatterplotLayer({\n id: 'scatter-plot',\n data,\n radiusScale: radius,\n radiusMinPixels: 0.25,\n getPosition: (d) => [d[0], d[1], 0],\n getFillColor: (d) => (d[2] === 1 ? maleColor : femaleColor),\n getRadius: 1,\n pickable: true,\n updateTriggers: {\n getFillColor: [maleColor, femaleColor],\n },\n }),\n new SelectionLayer({\n id: 'selection',\n selectionType: 'rectangle',\n onSelect: ({ pickingInfos }) => {},\n layerIds: ['scatter-plot'],\n getTentativeFillColor: () => [255, 0, 255, 100],\n getTentativeLineColor: () => [0, 0, 255, 255],\n getTentativeLineDashArray: () => [0, 0],\n lineWidthMinPixels: 1,\n }),\n ];\n\n return (\n \n \n \n );\n};\n")),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("p",null,"Inherits all ",(0,o.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/layer"},"deck.gl's Base Layer")," properties."),(0,o.kt)("p",null,"Also inherites ",(0,o.kt)("strong",{parentName:"p"},"some")," EditableGeoJsonLayer properties."),(0,o.kt)("blockquote",null,(0,o.kt)("p",{parentName:"blockquote"},"Note: do not pass a data property.")),(0,o.kt)("h4",{id:"selectiontype-string-required"},(0,o.kt)("inlineCode",{parentName:"h4"},"selectionType")," (String, required)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"null"))),(0,o.kt)("p",null,"Either ",(0,o.kt)("inlineCode",{parentName:"p"},"rectangle")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"polygon")),(0,o.kt)("h4",{id:"onselect-function-required"},(0,o.kt)("inlineCode",{parentName:"h4"},"onSelect")," (Function, required)"),(0,o.kt)("p",null,"Called when selection is completed."),(0,o.kt)("h4",{id:"layerids-string-required"},(0,o.kt)("inlineCode",{parentName:"h4"},"layerIds")," (String[], required)"),(0,o.kt)("p",null,"Array of layer ids where we will search."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/09dbb192.2b21148c.js b/assets/js/09dbb192.2b21148c.js new file mode 100644 index 00000000..683ba0f8 --- /dev/null +++ b/assets/js/09dbb192.2b21148c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[109],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,l=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=s(r),m=o,y=d["".concat(c,".").concat(m)]||d[m]||u[m]||l;return r?n.createElement(y,a(a({ref:t},p),{},{components:r})):n.createElement(y,a({ref:t},p))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=r.length,a=new Array(l);a[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:o,a[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>l,metadata:()=>i,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const l={},a="SelectionLayer",i={unversionedId:"modules/editor-layers/api-reference/selection-layer",id:"modules/editor-layers/api-reference/selection-layer",title:"SelectionLayer",description:"This layer can be used to select deck.gl objects using mouse drawing.",source:"@site/../docs/modules/editor-layers/api-reference/selection-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/selection-layer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/selection-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"EditableGeoJsonLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer"},next:{title:"PathMarkerLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer"}},c={},s=[{value:"Properties",id:"properties",level:2},{value:"selectionType (String, required)",id:"selectiontype-string-required",level:4},{value:"onSelect (Function, required)",id:"onselect-function-required",level:4},{value:"layerIds (String[], required)",id:"layerids-string-required",level:4}],p={toc:s},d="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"selectionlayer"},"SelectionLayer"),(0,o.kt)("p",null,"This layer can be used to select deck.gl objects using mouse drawing."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport DeckGL from '@deck.gl/react';\nimport { ScatterplotLayer } from '@deck.gl/layers';\nimport { SelectionLayer } from '@nebula.gl/layers';\nimport { StaticMap } from 'react-map-gl';\n\nconst MAPBOX_ACCESS_TOKEN = ''; // add your mapbox token here\n\nconst initialViewState = {\n longitude: -73.986022,\n latitude: 40.730743,\n zoom: 12,\n};\n\nconst MALE_COLOR = [0, 128, 255];\nconst FEMALE_COLOR = [255, 0, 128];\nconst DATA_URL =\n 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'; // eslint-disable-line\n\nconst App = function () {\n const radius = 30;\n const maleColor = MALE_COLOR;\n const femaleColor = FEMALE_COLOR;\n const data = fetch(DATA_URL).then((resp) => resp.json());\n\n const layers = [\n new ScatterplotLayer({\n id: 'scatter-plot',\n data,\n radiusScale: radius,\n radiusMinPixels: 0.25,\n getPosition: (d) => [d[0], d[1], 0],\n getFillColor: (d) => (d[2] === 1 ? maleColor : femaleColor),\n getRadius: 1,\n pickable: true,\n updateTriggers: {\n getFillColor: [maleColor, femaleColor],\n },\n }),\n new SelectionLayer({\n id: 'selection',\n selectionType: 'rectangle',\n onSelect: ({ pickingInfos }) => {},\n layerIds: ['scatter-plot'],\n getTentativeFillColor: () => [255, 0, 255, 100],\n getTentativeLineColor: () => [0, 0, 255, 255],\n getTentativeLineDashArray: () => [0, 0],\n lineWidthMinPixels: 1,\n }),\n ];\n\n return (\n \n \n \n );\n};\n")),(0,o.kt)("h2",{id:"properties"},"Properties"),(0,o.kt)("p",null,"Inherits all ",(0,o.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/layer"},"deck.gl's Base Layer")," properties."),(0,o.kt)("p",null,"Also inherites ",(0,o.kt)("strong",{parentName:"p"},"some")," EditableGeoJsonLayer properties."),(0,o.kt)("blockquote",null,(0,o.kt)("p",{parentName:"blockquote"},"Note: do not pass a data property.")),(0,o.kt)("h4",{id:"selectiontype-string-required"},(0,o.kt)("inlineCode",{parentName:"h4"},"selectionType")," (String, required)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"null"))),(0,o.kt)("p",null,"Either ",(0,o.kt)("inlineCode",{parentName:"p"},"rectangle")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"polygon")),(0,o.kt)("h4",{id:"onselect-function-required"},(0,o.kt)("inlineCode",{parentName:"h4"},"onSelect")," (Function, required)"),(0,o.kt)("p",null,"Called when selection is completed."),(0,o.kt)("h4",{id:"layerids-string-required"},(0,o.kt)("inlineCode",{parentName:"h4"},"layerIds")," (String[], required)"),(0,o.kt)("p",null,"Array of layer ids where we will search."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0f5083b6.373eca4a.js b/assets/js/0f5083b6.373eca4a.js new file mode 100644 index 00000000..35227645 --- /dev/null +++ b/assets/js/0f5083b6.373eca4a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9793],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>m});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=o.createContext({}),d=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},p=function(e){var t=d(e.components);return o.createElement(l.Provider,{value:t},e.children)},u="mdxType",h={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},c=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=d(n),c=a,m=u["".concat(l,".").concat(c)]||u[c]||h[c]||i;return n?o.createElement(m,r(r({ref:t},p),{},{components:n})):o.createElement(m,r({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,r=new Array(i);r[0]=c;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,r[1]=s;for(var d=2;d{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});var o=n(7462),a=(n(7294),n(3905));const i={},r="Write your own custom layout",s={unversionedId:"modules/react-graph-layers/advanced/custom-layout",id:"modules/react-graph-layers/advanced/custom-layout",title:"Write your own custom layout",description:"Here's the method you will likely to implement when creating your own custom layout:",source:"@site/../docs/modules/react-graph-layers/advanced/custom-layout.md",sourceDirName:"modules/react-graph-layers/advanced",slug:"/modules/react-graph-layers/advanced/custom-layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/advanced/custom-layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Edge Class",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge"},next:{title:"Experimental Layouts",permalink:"/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery"}},l={},d=[{value:"Lifecycles",id:"lifecycles",level:3},{value:"constructor",id:"constructor",level:3},{value:"Update the graph data",id:"update-the-graph-data",level:3},{value:"Compute layout",id:"compute-layout",level:3},{value:"Update layout",id:"update-layout",level:3},{value:"Getters",id:"getters",level:3},{value:"Full source code",id:"full-source-code",level:3}],p={toc:d},u="wrapper";function h(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"write-your-own-custom-layout"},"Write your own custom layout"),(0,a.kt)("p",null,"Here's the method you will likely to implement when creating your own custom layout:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import {BaseLayout} from 'react-graph-layers';\n\nexport default class MyLayout extends BaseLayout {\n // initialize the layout\n constructor(options) {}\n // first time to pass the graph data into this layout\n initializeGraph(graph) {}\n // update the existing graph\n updateGraph(grpah) {}\n // start the layout calculation\n start() {}\n // update the layout calculation\n update() {}\n // resume the layout calculation manually\n resume() {}\n // stop the layout calculation manually\n stop() {}\n // Access the position of the node in the layout\n // If the position is not available (not calculated), returning nullish will hide the node.\n getNodePosition(node) {}\n // access the layout information of the edge\n getEdgePosition(edge) {}\n // Pin the node to a designated position, and the node won't move anymore\n lockNodePosition(node, x, y) {}\n // Unlock the node, the node will be able to move freely.\n unlockNodePosition(node) {}\n}\n")),(0,a.kt)("p",null,"We will start with a ",(0,a.kt)("inlineCode",{parentName:"p"},"RandomLayout")," as an example, you can follow the steps one by one and find the source code at the bottom."),(0,a.kt)("h3",{id:"lifecycles"},"Lifecycles"),(0,a.kt)("p",null,"For a graph layout, everything goes through a set of events. In each event, the layout will need to take the inputs and do the different computations. Lifecycle methods are various methods which are invoked at different phases of the lifecycle of a graph layout. If you are aware of these lifecycle events, it will enable you to control their entire flow and it will definitely help us to produce better results."),(0,a.kt)("p",null,"A layout goes through the following phases:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Mounting:\n",(0,a.kt)("inlineCode",{parentName:"li"},"constructor")," => ",(0,a.kt)("inlineCode",{parentName:"li"},"initializeGraph")," => ",(0,a.kt)("inlineCode",{parentName:"li"},"start")),(0,a.kt)("li",{parentName:"ul"},"Updating:\n",(0,a.kt)("inlineCode",{parentName:"li"},"updateGraph")," => ",(0,a.kt)("inlineCode",{parentName:"li"},"update"))),(0,a.kt)("p",null,"There are a few events that should be triggered when the layout changes:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutStart()"),"\nWhen the layout starts, ",(0,a.kt)("inlineCode",{parentName:"p"},"onLayoutStart")," should be triggered to notify GraphGL/User. Some users might also want to leverage this event hook to perform different interactions, ex: show a spinner on the UI to indicate a new layout is computing.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutChange()"),"\nEvery time when the layout changes, ",(0,a.kt)("inlineCode",{parentName:"p"},"onLayoutChange")," should be triggered to notify GraphGL to re-render and update the view. Then GraphGL will use ",(0,a.kt)("inlineCode",{parentName:"p"},"getNodePosition")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"getEdgePosition")," to get the position information to render the graph. Some users might also want to leverage this event hook to perform different interactions, ex: show a spinner on the UI to indicate the layout is computing.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutDone()"),"\nWhen the layout is completed, 'onLayoutDone' should be triggered to notify GraphGL/User. Some users might also want to leverage this event hook to perform different interactions, ex: remove the spinner from the UI."))),(0,a.kt)("p",null,"If you want to implement the drag & drag interaction on nodes, you will have to implement:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"lockNodePosition"),": pin the node at the designated position."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"unlockNodePosition"),": free the node from the position."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"resume"),": resume the layout calculation.")),(0,a.kt)("p",null,"The sequence of the events is like:\nstartDragging => lockNodePosition => release => unlockNodePosition => resume"),(0,a.kt)("h3",{id:"constructor"},"constructor"),(0,a.kt)("p",null,"In the constructor, you can initialize some internal object you'll need for the layout state.\nThe most important part is to create a 'map' to keep the position of nodes."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"export default class RandomLayout extends BaseLayout {\n static defaultOptions = {\n viewportWidth: 1000,\n viewportHeight: 1000\n };\n\n constructor(options) {\n // init BaseLayout\n super(options);\n // give a name to this layout\n this._name = 'RandomLayout';\n // combine the default options with user input\n this._options = {\n ...this.defaultOptions,\n ...options\n };\n // a map to persis the position of nodes.\n this._nodePositionMap = {};\n }\n}\n")),(0,a.kt)("h3",{id:"update-the-graph-data"},"Update the graph data"),(0,a.kt)("p",null,"GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"initializeGraph")," to pass the graph data into the layout.\nIf the graph is the same one but part ofthe data is changed, GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"updateGraph")," method to notify the layout."),(0,a.kt)("p",null,"In this case, we can just simply update the ",(0,a.kt)("inlineCode",{parentName:"p"},"this._nodePositionMap")," by going through all nodes in the graph."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," initializeGraph(graph) {\n this.updateGraph(graph);\n }\n\n updateGraph(grpah) {\n this._graph = graph;\n this._nodePositionMap = graph.getNodes().reduce((res, node) => {\n res[node.getId()] = this._nodePositionMap[node.getId()] || [0, 0];\n return res;\n }, {});\n }\n")),(0,a.kt)("h3",{id:"compute-layout"},"Compute layout"),(0,a.kt)("p",null,"GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"start()")," of the layout to kick start the layout calculation.\nBefore starting the calculation you should call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutStart()")," to notify that a new layout has been started\nIn this case, the computation is easy as assigning random position for each node only.\nOnce the layout is completed, you will need to call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutChange()")," to notify the render redraw.\nThen call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutDone()")," to notify the render that layout is completed."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," start() {\n const {viewportWidth, viewportHeight} = this._options;\n this._onLayoutStart();\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n")),(0,a.kt)("h3",{id:"update-layout"},"Update layout"),(0,a.kt)("p",null,"GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"update()")," of the layout to update the layout calculation when a full new layout is not required.\nMost commonly this will be when nodes or edges of the graph are updated.\nIn this case we will simply assign a random position for each node.\nOnce the layout is completed, you will need to call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutChange()")," to notify the render redraw.\nThen call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutDone()")," to notify the render that layout is completed."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," update() {\n const {viewportWidth, viewportHeight} = this._options;\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n")),(0,a.kt)("h3",{id:"getters"},"Getters"),(0,a.kt)("p",null,"GraphGL will keep retrieving the position of nodes and edges from the layout. You will need to provide two getters ",(0,a.kt)("inlineCode",{parentName:"p"},"getNodePosition")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"getEdgePosition"),"."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"getNodePosition: return the position of the node ","[x, y]",". If the position is not available (not calculated), returning nullish will hide the node."),(0,a.kt)("li",{parentName:"ul"},"getEdgePosition: return the rendering information of the edge, including:\n-- type: the type of the edge, it should be 'LINE', 'SPLINE_CURVE', or 'PATH'.\n-- sourcePosition: the position of source node.\n-- targetPosition: the position of target node.\n-- controlPoints: a set of control points for 'SPLINE_CURVE', or 'PATH' edge.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"getNodePosition = (node) => this._nodePositionMap[node.getId()];\n\ngetEdgePosition = (edge) => {\n const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];\n const targetPos = this._nodePositionMap[edge.getTargetNodeId()];\n return {\n type: EDGE_TYPE.LINE,\n sourcePosition: sourcePos,\n targetPosition: targetPos,\n controlPoints: []\n };\n};\n")),(0,a.kt)("h3",{id:"full-source-code"},"Full source code"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import {BaseLayout} from 'react-graph-layers';\n\nexport default class RandomLayout extends BaseLayout {\n constructor(options) {\n super(options);\n this._name = 'RandomLayout';\n this._options = {\n ...defaultOptions,\n ...options\n };\n this._nodePositionMap = {};\n }\n\n // first time to pass the graph data into this layout\n initializeGraph(graph) {\n this.updateGraph(graph);\n }\n // update the existing graph\n updateGraph(grpah) {\n this._graph = graph;\n this._nodePositionMap = graph.getNodes().reduce((res, node) => {\n res[node.getId()] = this._nodePositionMap[node.getId()] || [0, 0];\n return res;\n }, {});\n }\n\n start() {\n const {viewportWidth, viewportHeight} = this._options;\n this._onLayoutStart();\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n\n update() {\n const {viewportWidth, viewportHeight} = this._options;\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n\n getNodePosition = (node) => this._nodePositionMap[node.getId()];\n\n getEdgePosition = (edge) => {\n const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];\n const targetPos = this._nodePositionMap[edge.getTargetNodeId()];\n return {\n type: EDGE_TYPE.LINE,\n sourcePosition: sourcePos,\n targetPosition: targetPos,\n controlPoints: []\n };\n };\n}\n")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0f5083b6.b1e0841c.js b/assets/js/0f5083b6.b1e0841c.js deleted file mode 100644 index 92333b76..00000000 --- a/assets/js/0f5083b6.b1e0841c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9793],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>m});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=o.createContext({}),p=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},d=function(e){var t=p(e.components);return o.createElement(l.Provider,{value:t},e.children)},u="mdxType",h={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},c=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),u=p(n),c=a,m=u["".concat(l,".").concat(c)]||u[c]||h[c]||i;return n?o.createElement(m,r(r({ref:t},d),{},{components:n})):o.createElement(m,r({ref:t},d))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,r=new Array(i);r[0]=c;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,r[1]=s;for(var p=2;p{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>p});var o=n(7462),a=(n(7294),n(3905));const i={},r="Write your own custom layout",s={unversionedId:"modules/react-graph-layers/advanced/custom-layout",id:"modules/react-graph-layers/advanced/custom-layout",title:"Write your own custom layout",description:"Here's the method you will likely to implement when creating your own custom layout:",source:"@site/../docs/modules/react-graph-layers/advanced/custom-layout.md",sourceDirName:"modules/react-graph-layers/advanced",slug:"/modules/react-graph-layers/advanced/custom-layout",permalink:"/docs/modules/react-graph-layers/advanced/custom-layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/advanced/custom-layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Edge Class",permalink:"/docs/modules/react-graph-layers/api-reference/edge"},next:{title:"Experimental Layouts",permalink:"/docs/modules/react-graph-layers/advanced/gallery"}},l={},p=[{value:"Lifecycles",id:"lifecycles",level:3},{value:"constructor",id:"constructor",level:3},{value:"Update the graph data",id:"update-the-graph-data",level:3},{value:"Compute layout",id:"compute-layout",level:3},{value:"Update layout",id:"update-layout",level:3},{value:"Getters",id:"getters",level:3},{value:"Full source code",id:"full-source-code",level:3}],d={toc:p},u="wrapper";function h(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,o.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"write-your-own-custom-layout"},"Write your own custom layout"),(0,a.kt)("p",null,"Here's the method you will likely to implement when creating your own custom layout:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import {BaseLayout} from 'react-graph-layers';\n\nexport default class MyLayout extends BaseLayout {\n // initialize the layout\n constructor(options) {}\n // first time to pass the graph data into this layout\n initializeGraph(graph) {}\n // update the existing graph\n updateGraph(grpah) {}\n // start the layout calculation\n start() {}\n // update the layout calculation\n update() {}\n // resume the layout calculation manually\n resume() {}\n // stop the layout calculation manually\n stop() {}\n // Access the position of the node in the layout\n // If the position is not available (not calculated), returning nullish will hide the node.\n getNodePosition(node) {}\n // access the layout information of the edge\n getEdgePosition(edge) {}\n // Pin the node to a designated position, and the node won't move anymore\n lockNodePosition(node, x, y) {}\n // Unlock the node, the node will be able to move freely.\n unlockNodePosition(node) {}\n}\n")),(0,a.kt)("p",null,"We will start with a ",(0,a.kt)("inlineCode",{parentName:"p"},"RandomLayout")," as an example, you can follow the steps one by one and find the source code at the bottom."),(0,a.kt)("h3",{id:"lifecycles"},"Lifecycles"),(0,a.kt)("p",null,"For a graph layout, everything goes through a set of events. In each event, the layout will need to take the inputs and do the different computations. Lifecycle methods are various methods which are invoked at different phases of the lifecycle of a graph layout. If you are aware of these lifecycle events, it will enable you to control their entire flow and it will definitely help us to produce better results."),(0,a.kt)("p",null,"A layout goes through the following phases:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Mounting:\n",(0,a.kt)("inlineCode",{parentName:"li"},"constructor")," => ",(0,a.kt)("inlineCode",{parentName:"li"},"initializeGraph")," => ",(0,a.kt)("inlineCode",{parentName:"li"},"start")),(0,a.kt)("li",{parentName:"ul"},"Updating:\n",(0,a.kt)("inlineCode",{parentName:"li"},"updateGraph")," => ",(0,a.kt)("inlineCode",{parentName:"li"},"update"))),(0,a.kt)("p",null,"There are a few events that should be triggered when the layout changes:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutStart()"),"\nWhen the layout starts, ",(0,a.kt)("inlineCode",{parentName:"p"},"onLayoutStart")," should be triggered to notify GraphGL/User. Some users might also want to leverage this event hook to perform different interactions, ex: show a spinner on the UI to indicate a new layout is computing.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutChange()"),"\nEvery time when the layout changes, ",(0,a.kt)("inlineCode",{parentName:"p"},"onLayoutChange")," should be triggered to notify GraphGL to re-render and update the view. Then GraphGL will use ",(0,a.kt)("inlineCode",{parentName:"p"},"getNodePosition")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"getEdgePosition")," to get the position information to render the graph. Some users might also want to leverage this event hook to perform different interactions, ex: show a spinner on the UI to indicate the layout is computing.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutDone()"),"\nWhen the layout is completed, 'onLayoutDone' should be triggered to notify GraphGL/User. Some users might also want to leverage this event hook to perform different interactions, ex: remove the spinner from the UI."))),(0,a.kt)("p",null,"If you want to implement the drag & drag interaction on nodes, you will have to implement:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"lockNodePosition"),": pin the node at the designated position."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"unlockNodePosition"),": free the node from the position."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"resume"),": resume the layout calculation.")),(0,a.kt)("p",null,"The sequence of the events is like:\nstartDragging => lockNodePosition => release => unlockNodePosition => resume"),(0,a.kt)("h3",{id:"constructor"},"constructor"),(0,a.kt)("p",null,"In the constructor, you can initialize some internal object you'll need for the layout state.\nThe most important part is to create a 'map' to keep the position of nodes."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"export default class RandomLayout extends BaseLayout {\n static defaultOptions = {\n viewportWidth: 1000,\n viewportHeight: 1000\n };\n\n constructor(options) {\n // init BaseLayout\n super(options);\n // give a name to this layout\n this._name = 'RandomLayout';\n // combine the default options with user input\n this._options = {\n ...this.defaultOptions,\n ...options\n };\n // a map to persis the position of nodes.\n this._nodePositionMap = {};\n }\n}\n")),(0,a.kt)("h3",{id:"update-the-graph-data"},"Update the graph data"),(0,a.kt)("p",null,"GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"initializeGraph")," to pass the graph data into the layout.\nIf the graph is the same one but part ofthe data is changed, GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"updateGraph")," method to notify the layout."),(0,a.kt)("p",null,"In this case, we can just simply update the ",(0,a.kt)("inlineCode",{parentName:"p"},"this._nodePositionMap")," by going through all nodes in the graph."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," initializeGraph(graph) {\n this.updateGraph(graph);\n }\n\n updateGraph(grpah) {\n this._graph = graph;\n this._nodePositionMap = graph.getNodes().reduce((res, node) => {\n res[node.getId()] = this._nodePositionMap[node.getId()] || [0, 0];\n return res;\n }, {});\n }\n")),(0,a.kt)("h3",{id:"compute-layout"},"Compute layout"),(0,a.kt)("p",null,"GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"start()")," of the layout to kick start the layout calculation.\nBefore starting the calculation you should call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutStart()")," to notify that a new layout has been started\nIn this case, the computation is easy as assigning random position for each node only.\nOnce the layout is completed, you will need to call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutChange()")," to notify the render redraw.\nThen call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutDone()")," to notify the render that layout is completed."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," start() {\n const {viewportWidth, viewportHeight} = this._options;\n this._onLayoutStart();\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n")),(0,a.kt)("h3",{id:"update-layout"},"Update layout"),(0,a.kt)("p",null,"GraphGL will call ",(0,a.kt)("inlineCode",{parentName:"p"},"update()")," of the layout to update the layout calculation when a full new layout is not required.\nMost commonly this will be when nodes or edges of the graph are updated.\nIn this case we will simply assign a random position for each node.\nOnce the layout is completed, you will need to call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutChange()")," to notify the render redraw.\nThen call ",(0,a.kt)("inlineCode",{parentName:"p"},"this._onLayoutDone()")," to notify the render that layout is completed."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," update() {\n const {viewportWidth, viewportHeight} = this._options;\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n")),(0,a.kt)("h3",{id:"getters"},"Getters"),(0,a.kt)("p",null,"GraphGL will keep retrieving the position of nodes and edges from the layout. You will need to provide two getters ",(0,a.kt)("inlineCode",{parentName:"p"},"getNodePosition")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"getEdgePosition"),"."),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"getNodePosition: return the position of the node ","[x, y]",". If the position is not available (not calculated), returning nullish will hide the node."),(0,a.kt)("li",{parentName:"ul"},"getEdgePosition: return the rendering information of the edge, including:\n-- type: the type of the edge, it should be 'LINE', 'SPLINE_CURVE', or 'PATH'.\n-- sourcePosition: the position of source node.\n-- targetPosition: the position of target node.\n-- controlPoints: a set of control points for 'SPLINE_CURVE', or 'PATH' edge.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"getNodePosition = (node) => this._nodePositionMap[node.getId()];\n\ngetEdgePosition = (edge) => {\n const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];\n const targetPos = this._nodePositionMap[edge.getTargetNodeId()];\n return {\n type: EDGE_TYPE.LINE,\n sourcePosition: sourcePos,\n targetPosition: targetPos,\n controlPoints: []\n };\n};\n")),(0,a.kt)("h3",{id:"full-source-code"},"Full source code"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import {BaseLayout} from 'react-graph-layers';\n\nexport default class RandomLayout extends BaseLayout {\n constructor(options) {\n super(options);\n this._name = 'RandomLayout';\n this._options = {\n ...defaultOptions,\n ...options\n };\n this._nodePositionMap = {};\n }\n\n // first time to pass the graph data into this layout\n initializeGraph(graph) {\n this.updateGraph(graph);\n }\n // update the existing graph\n updateGraph(grpah) {\n this._graph = graph;\n this._nodePositionMap = graph.getNodes().reduce((res, node) => {\n res[node.getId()] = this._nodePositionMap[node.getId()] || [0, 0];\n return res;\n }, {});\n }\n\n start() {\n const {viewportWidth, viewportHeight} = this._options;\n this._onLayoutStart();\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n\n update() {\n const {viewportWidth, viewportHeight} = this._options;\n this._nodePositionMap = Object.keys(this._nodePositionMap).reduce((res, nodeId) => {\n res[nodeId] = [Math.random() * viewportWidth, Math.random() * viewportHeight];\n return res;\n }, {});\n this._onLayoutChange();\n this._onLayoutDone();\n }\n\n getNodePosition = (node) => this._nodePositionMap[node.getId()];\n\n getEdgePosition = (edge) => {\n const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];\n const targetPos = this._nodePositionMap[edge.getTargetNodeId()];\n return {\n type: EDGE_TYPE.LINE,\n sourcePosition: sourcePos,\n targetPosition: targetPos,\n controlPoints: []\n };\n };\n}\n")))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/122a4404.b3a8ad63.js b/assets/js/122a4404.b3a8ad63.js deleted file mode 100644 index cd9faf98..00000000 --- a/assets/js/122a4404.b3a8ad63.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5059],{3905:(e,r,t)=>{t.d(r,{Zo:()=>u,kt:()=>m});var l=t(7294);function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r&&(l=l.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,l)}return t}function i(e){for(var r=1;r=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var c=l.createContext({}),s=function(e){var r=l.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},u=function(e){var r=s(e.components);return l.createElement(c.Provider,{value:r},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var r=e.children;return l.createElement(l.Fragment,{},r)}},f=l.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=s(t),f=n,m=d["".concat(c,".").concat(f)]||d[f]||p[f]||a;return t?l.createElement(m,i(i({ref:r},u),{},{components:t})):l.createElement(m,i({ref:r},u))}));function m(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,i=new Array(a);i[0]=f;var o={};for(var c in r)hasOwnProperty.call(r,c)&&(o[c]=r[c]);o.originalType=e,o[d]="string"==typeof e?e:n,i[1]=o;for(var s=2;s{t.r(r),t.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>o,toc:()=>s});var l=t(7462),n=(t(7294),t(3905));const a={},i="MARKER",o={unversionedId:"modules/react-graph-layers/api-reference/node-style-marker",id:"modules/react-graph-layers/api-reference/node-style-marker",title:"MARKER",description:"marker (String | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-marker.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-marker",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-marker",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-marker.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"RECTANGLE",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-rectangle"},next:{title:"LABEL",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-label"}},c={},s=[{value:"marker (String | Function, required)",id:"marker-string--function-required",level:3},{value:"size (Number | Function, optional)",id:"size-number--function-optional",level:3},{value:"fill (String | Array | Function, optional)",id:"fill-string--array--function-optional",level:3}],u={toc:s},d="wrapper";function p(e){let{components:r,...t}=e;return(0,n.kt)(d,(0,l.Z)({},u,t,{components:r,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"marker"},"MARKER"),(0,n.kt)("p",{align:"center"},(0,n.kt)("img",{src:"/gatsby/images/node-styles/marker.png",height:"100"})),(0,n.kt)("h3",{id:"marker-string--function-required"},(0,n.kt)("inlineCode",{parentName:"h3"},"marker")," (String | Function, required)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Marker can be one of the following types:")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},'"location-marker-filled", "bell-filled", "bookmark-filled", "bookmark", "cd-filled", "cd", "checkmark",\n"circle-check-filled", "circle-check", "circle-filled", "circle-i-filled", "circle-i", "circle-minus-filled",\n"circle-minus", "circle-plus-filled", "circle-plus", "circle-questionmark-filled", "circle-questionmark",\n"circle-slash-filled", "circle-slash", "circle-x-filled", "circle-x", "circle", "diamond-filled", "diamond",\n"flag-filled", "flag", "gear", "heart-filled", "heart", "bell", "location-marker", "octagonal-star-filled",\n"octagonal-star", "person-filled", "person", "pin-filled", "pin", "plus-small", "plus", "rectangle-filled",\n"rectangle", "star-filled", "star", "tag-filled", "tag", "thumb-down-filled", "thumb-down", "thumb-up",\n"thumb_up-filled", "triangle-down-filled", "triangle-down", "triangle-left-filled", "triangle-left",\n"triangle-right-filled", "triangle-right", "triangle-up-filled", "triangle-up", "x-small", "x"\n')),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"If a string is provided for ",(0,n.kt)("inlineCode",{parentName:"li"},"marker"),", all the objects will use the same marker."),(0,n.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the marker of each marker.")),(0,n.kt)("h3",{id:"size-number--function-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"size")," (Number | Function, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"12")),(0,n.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,n.kt)("inlineCode",{parentName:"li"},"size"),", all the markers will have the same size."),(0,n.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the size of each marker.")),(0,n.kt)("h3",{id:"fill-string--array--function-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"fill")," (String | Array | Function, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,n.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,n.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range).\nIf a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,n.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color.")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/122a4404.d4a6adbe.js b/assets/js/122a4404.d4a6adbe.js new file mode 100644 index 00000000..3879f7d8 --- /dev/null +++ b/assets/js/122a4404.d4a6adbe.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5059],{3905:(e,r,t)=>{t.d(r,{Zo:()=>u,kt:()=>f});var l=t(7294);function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r&&(l=l.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,l)}return t}function i(e){for(var r=1;r=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(l=0;l=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var c=l.createContext({}),s=function(e){var r=l.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},u=function(e){var r=s(e.components);return l.createElement(c.Provider,{value:r},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var r=e.children;return l.createElement(l.Fragment,{},r)}},m=l.forwardRef((function(e,r){var t=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=s(t),m=n,f=d["".concat(c,".").concat(m)]||d[m]||p[m]||a;return t?l.createElement(f,i(i({ref:r},u),{},{components:t})):l.createElement(f,i({ref:r},u))}));function f(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var a=t.length,i=new Array(a);i[0]=m;var o={};for(var c in r)hasOwnProperty.call(r,c)&&(o[c]=r[c]);o.originalType=e,o[d]="string"==typeof e?e:n,i[1]=o;for(var s=2;s{t.r(r),t.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>o,toc:()=>s});var l=t(7462),n=(t(7294),t(3905));const a={},i="MARKER",o={unversionedId:"modules/react-graph-layers/api-reference/node-style-marker",id:"modules/react-graph-layers/api-reference/node-style-marker",title:"MARKER",description:"marker (String | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-marker.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-marker",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-marker.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"RECTANGLE",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle"},next:{title:"LABEL",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label"}},c={},s=[{value:"marker (String | Function, required)",id:"marker-string--function-required",level:3},{value:"size (Number | Function, optional)",id:"size-number--function-optional",level:3},{value:"fill (String | Array | Function, optional)",id:"fill-string--array--function-optional",level:3}],u={toc:s},d="wrapper";function p(e){let{components:r,...t}=e;return(0,n.kt)(d,(0,l.Z)({},u,t,{components:r,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"marker"},"MARKER"),(0,n.kt)("p",{align:"center"},(0,n.kt)("img",{src:"/gatsby/images/node-styles/marker.png",height:"100"})),(0,n.kt)("h3",{id:"marker-string--function-required"},(0,n.kt)("inlineCode",{parentName:"h3"},"marker")," (String | Function, required)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Marker can be one of the following types:")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},'"location-marker-filled", "bell-filled", "bookmark-filled", "bookmark", "cd-filled", "cd", "checkmark",\n"circle-check-filled", "circle-check", "circle-filled", "circle-i-filled", "circle-i", "circle-minus-filled",\n"circle-minus", "circle-plus-filled", "circle-plus", "circle-questionmark-filled", "circle-questionmark",\n"circle-slash-filled", "circle-slash", "circle-x-filled", "circle-x", "circle", "diamond-filled", "diamond",\n"flag-filled", "flag", "gear", "heart-filled", "heart", "bell", "location-marker", "octagonal-star-filled",\n"octagonal-star", "person-filled", "person", "pin-filled", "pin", "plus-small", "plus", "rectangle-filled",\n"rectangle", "star-filled", "star", "tag-filled", "tag", "thumb-down-filled", "thumb-down", "thumb-up",\n"thumb_up-filled", "triangle-down-filled", "triangle-down", "triangle-left-filled", "triangle-left",\n"triangle-right-filled", "triangle-right", "triangle-up-filled", "triangle-up", "x-small", "x"\n')),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"If a string is provided for ",(0,n.kt)("inlineCode",{parentName:"li"},"marker"),", all the objects will use the same marker."),(0,n.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the marker of each marker.")),(0,n.kt)("h3",{id:"size-number--function-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"size")," (Number | Function, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"12")),(0,n.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,n.kt)("inlineCode",{parentName:"li"},"size"),", all the markers will have the same size."),(0,n.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the size of each marker.")),(0,n.kt)("h3",{id:"fill-string--array--function-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"fill")," (String | Array | Function, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,n.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,n.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range).\nIf a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,n.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color.")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1a9ac22a.cf47d613.js b/assets/js/1a9ac22a.cf47d613.js new file mode 100644 index 00000000..16601bb1 --- /dev/null +++ b/assets/js/1a9ac22a.cf47d613.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6706],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),c=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=c(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",y={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=c(n),u=r,g=p["".concat(s,".").concat(u)]||p[u]||y[u]||o;return n?a.createElement(g,i(i({ref:t},d),{},{components:n})):a.createElement(g,i({ref:t},d))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:r,i[1]=l;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>y,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var a=n(7462),r=(n(7294),n(3905));const o={},i="Experimental Layouts",l={unversionedId:"modules/react-graph-layers/advanced/gallery",id:"modules/react-graph-layers/advanced/gallery",title:"Experimental Layouts",description:"",source:"@site/../docs/modules/react-graph-layers/advanced/gallery.md",sourceDirName:"modules/react-graph-layers/advanced",slug:"/modules/react-graph-layers/advanced/gallery",permalink:"/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/advanced/gallery.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Write your own custom layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout"},next:{title:"Overview",permalink:"/deck.gl-community/docs/modules/editor-core/"}},s={},c=[],d={toc:c},p="wrapper";function y(e){let{components:t,...n}=e;return(0,r.kt)(p,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"experimental-layouts"},"Experimental Layouts"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css"},'\n\n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n')))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1a9ac22a.dca52629.js b/assets/js/1a9ac22a.dca52629.js deleted file mode 100644 index b59fa499..00000000 --- a/assets/js/1a9ac22a.dca52629.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6706],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),c=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=c(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",y={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=c(n),u=r,g=p["".concat(s,".").concat(u)]||p[u]||y[u]||o;return n?a.createElement(g,i(i({ref:t},d),{},{components:n})):a.createElement(g,i({ref:t},d))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=u;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:r,i[1]=l;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>y,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var a=n(7462),r=(n(7294),n(3905));const o={},i="Experimental Layouts",l={unversionedId:"modules/react-graph-layers/advanced/gallery",id:"modules/react-graph-layers/advanced/gallery",title:"Experimental Layouts",description:"",source:"@site/../docs/modules/react-graph-layers/advanced/gallery.md",sourceDirName:"modules/react-graph-layers/advanced",slug:"/modules/react-graph-layers/advanced/gallery",permalink:"/docs/modules/react-graph-layers/advanced/gallery",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/advanced/gallery.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Write your own custom layout",permalink:"/docs/modules/react-graph-layers/advanced/custom-layout"},next:{title:"Overview",permalink:"/docs/modules/editor-core/"}},s={},c=[],d={toc:c},p="wrapper";function y(e){let{components:t,...n}=e;return(0,r.kt)(p,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"experimental-layouts"},"Experimental Layouts"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css"},'\n\n
\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n
\n')))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1b252c8c.4efebb1a.js b/assets/js/1b252c8c.4efebb1a.js new file mode 100644 index 00000000..8dcd9d36 --- /dev/null +++ b/assets/js/1b252c8c.4efebb1a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5116],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),u=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return n.createElement(i.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(r),d=a,y=p["".concat(i,".").concat(d)]||p[d]||m[d]||o;return r?n.createElement(y,c(c({ref:t},s),{},{components:r})):n.createElement(y,c({ref:t},s))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,c=new Array(o);c[0]=d;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[p]="string"==typeof e?e:a,c[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var n=r(7462),a=(r(7294),r(3905));const o={},c="What's New",l={unversionedId:"whats-new",id:"whats-new",title:"What's New",description:"@deck.gl-community/layers@9.0.0",source:"@site/../docs/whats-new.md",sourceDirName:".",slug:"/whats-new",permalink:"/deck.gl-community/docs/whats-new",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/whats-new.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"deck.gl-community",permalink:"/deck.gl-community/docs/"},next:{title:"Upgrade Guide",permalink:"/deck.gl-community/docs/upgrade-guide"}},i={},u=[{value:"@deck.gl-community/layers@9.0.0",id:"deckgl-communitylayers900",level:3},{value:"0.0.1",id:"001",level:2}],s={toc:u},p="wrapper";function m(e){let{components:t,...r}=e;return(0,a.kt)(p,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"whats-new"},"What's New"),(0,a.kt)("h3",{id:"deckgl-communitylayers900"},"@deck.gl-community/",(0,a.kt)("a",{parentName:"h3",href:"mailto:layers@9.0.0"},"layers@9.0.0")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Release date: March 26, 2024"),(0,a.kt)("li",{parentName:"ul"},"New version of the ",(0,a.kt)("inlineCode",{parentName:"li"},"@deck.gl-community/layers")," module for deck.gl v9.")),(0,a.kt)("h2",{id:"001"},"0.0.1"),(0,a.kt)("p",null,"Initial release."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1b252c8c.a758bb96.js b/assets/js/1b252c8c.a758bb96.js deleted file mode 100644 index 30e4cf69..00000000 --- a/assets/js/1b252c8c.a758bb96.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5116],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=s(r),d=a,y=p["".concat(c,".").concat(d)]||p[d]||m[d]||o;return r?n.createElement(y,l(l({ref:t},u),{},{components:r})):n.createElement(y,l({ref:t},u))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[p]="string"==typeof e?e:a,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const o={},l="What's New",i={unversionedId:"whats-new",id:"whats-new",title:"What's New",description:"@deck.gl-community/layers@9.0.0",source:"@site/../docs/whats-new.md",sourceDirName:".",slug:"/whats-new",permalink:"/docs/whats-new",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/whats-new.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"deck.gl-community",permalink:"/docs/"},next:{title:"Upgrade Guide",permalink:"/docs/upgrade-guide"}},c={},s=[{value:"@deck.gl-community/layers@9.0.0",id:"deckgl-communitylayers900",level:3},{value:"0.0.1",id:"001",level:2}],u={toc:s},p="wrapper";function m(e){let{components:t,...r}=e;return(0,a.kt)(p,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"whats-new"},"What's New"),(0,a.kt)("h3",{id:"deckgl-communitylayers900"},"@deck.gl-community/",(0,a.kt)("a",{parentName:"h3",href:"mailto:layers@9.0.0"},"layers@9.0.0")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Release date: March 26, 2024"),(0,a.kt)("li",{parentName:"ul"},"New version of the ",(0,a.kt)("inlineCode",{parentName:"li"},"@deck.gl-community/layers")," module for deck.gl v9.")),(0,a.kt)("h2",{id:"001"},"0.0.1"),(0,a.kt)("p",null,"Initial release."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/26bd9e1b.a0f0ba7e.js b/assets/js/26bd9e1b.a0f0ba7e.js deleted file mode 100644 index e1eac9b2..00000000 --- a/assets/js/26bd9e1b.a0f0ba7e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4432],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=c(r),d=a,y=m["".concat(s,".").concat(d)]||m[d]||u[d]||o;return r?n.createElement(y,l(l({ref:t},p),{},{components:r})):n.createElement(y,l({ref:t},p))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[m]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},l="HtmlOverlayItem",i={unversionedId:"modules/react-overlays/api-reference/html-overlay-item",id:"modules/react-overlays/api-reference/html-overlay-item",title:"HtmlOverlayItem",description:"This is an HTML item that will be rendered inside",source:"@site/../docs/modules/react-overlays/api-reference/html-overlay-item.md",sourceDirName:"modules/react-overlays/api-reference",slug:"/modules/react-overlays/api-reference/html-overlay-item",permalink:"/docs/modules/react-overlays/api-reference/html-overlay-item",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-overlays/api-reference/html-overlay-item.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"HtmlClusterOverlay",permalink:"/docs/modules/react-overlays/api-reference/html-cluster-overlay"}},s={},c=[{value:"Props",id:"props",level:2},{value:"coordinates",id:"coordinates",level:3},{value:"Best practices",id:"best-practices",level:2},{value:"Anchor point",id:"anchor-point",level:3},{value:"Mouse events",id:"mouse-events",level:3},{value:"Key property",id:"key-property",level:3}],p={toc:c},m="wrapper";function u(e){let{components:t,...r}=e;return(0,a.kt)(m,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"htmloverlayitem"},"HtmlOverlayItem"),(0,a.kt)("p",null,"This is an HTML item that will be rendered inside\n",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay"},"HtmlOverlay")," or\n",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-cluster-overlay"},"HtmlClusterOverlay"),"."),(0,a.kt)("p",null,"Note: ",(0,a.kt)("inlineCode",{parentName:"p"},"HtmlOverlayItem")," ",(0,a.kt)("strong",{parentName:"p"},"must")," be direct children of ",(0,a.kt)("inlineCode",{parentName:"p"},"HtmlOverlay")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"HtmlClusterOverlay"),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"return (\n \n YOUR CONTENT HERE.\n \n);\n")),(0,a.kt)("h2",{id:"props"},"Props"),(0,a.kt)("h3",{id:"coordinates"},"coordinates"),(0,a.kt)("p",null,"Array of two (or three if you want to specify elevation) numbers where this will be displayed."),(0,a.kt)("h2",{id:"best-practices"},"Best practices"),(0,a.kt)("h3",{id:"anchor-point"},"Anchor point"),(0,a.kt)("p",null,"By default the top-left corner will align with the provided ",(0,a.kt)("inlineCode",{parentName:"p"},"coordinates"),".\nYou can use CSS to change the ",(0,a.kt)("strong",{parentName:"p"},"anchor point"),".\nFor example use ",(0,a.kt)("inlineCode",{parentName:"p"},"transform: 'translate(-50%,-50%)'")," to center."),(0,a.kt)("h3",{id:"mouse-events"},"Mouse events"),(0,a.kt)("p",null,"By default this will not receive any mouse events.\nUse ",(0,a.kt)("inlineCode",{parentName:"p"},"pointerEvents: 'all'")," to receive events."),(0,a.kt)("h3",{id:"key-property"},"Key property"),(0,a.kt)("p",null,"Because this is used inside an array of ",(0,a.kt)("inlineCode",{parentName:"p"},"react components")," you\nneed to provide a unique ",(0,a.kt)("inlineCode",{parentName:"p"},"key"),". See the ",(0,a.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/lists-and-keys.html"},"React docs")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/26bd9e1b.a3886769.js b/assets/js/26bd9e1b.a3886769.js new file mode 100644 index 00000000..a08a31cb --- /dev/null +++ b/assets/js/26bd9e1b.a3886769.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4432],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=c(r),d=a,y=m["".concat(s,".").concat(d)]||m[d]||u[d]||o;return r?n.createElement(y,l(l({ref:t},p),{},{components:r})):n.createElement(y,l({ref:t},p))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[m]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},l="HtmlOverlayItem",i={unversionedId:"modules/react-overlays/api-reference/html-overlay-item",id:"modules/react-overlays/api-reference/html-overlay-item",title:"HtmlOverlayItem",description:"This is an HTML item that will be rendered inside",source:"@site/../docs/modules/react-overlays/api-reference/html-overlay-item.md",sourceDirName:"modules/react-overlays/api-reference",slug:"/modules/react-overlays/api-reference/html-overlay-item",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay-item",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-overlays/api-reference/html-overlay-item.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"HtmlClusterOverlay",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay"}},s={},c=[{value:"Props",id:"props",level:2},{value:"coordinates",id:"coordinates",level:3},{value:"Best practices",id:"best-practices",level:2},{value:"Anchor point",id:"anchor-point",level:3},{value:"Mouse events",id:"mouse-events",level:3},{value:"Key property",id:"key-property",level:3}],p={toc:c},m="wrapper";function u(e){let{components:t,...r}=e;return(0,a.kt)(m,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"htmloverlayitem"},"HtmlOverlayItem"),(0,a.kt)("p",null,"This is an HTML item that will be rendered inside\n",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay"},"HtmlOverlay")," or\n",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-cluster-overlay"},"HtmlClusterOverlay"),"."),(0,a.kt)("p",null,"Note: ",(0,a.kt)("inlineCode",{parentName:"p"},"HtmlOverlayItem")," ",(0,a.kt)("strong",{parentName:"p"},"must")," be direct children of ",(0,a.kt)("inlineCode",{parentName:"p"},"HtmlOverlay")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"HtmlClusterOverlay"),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"return (\n \n YOUR CONTENT HERE.\n \n);\n")),(0,a.kt)("h2",{id:"props"},"Props"),(0,a.kt)("h3",{id:"coordinates"},"coordinates"),(0,a.kt)("p",null,"Array of two (or three if you want to specify elevation) numbers where this will be displayed."),(0,a.kt)("h2",{id:"best-practices"},"Best practices"),(0,a.kt)("h3",{id:"anchor-point"},"Anchor point"),(0,a.kt)("p",null,"By default the top-left corner will align with the provided ",(0,a.kt)("inlineCode",{parentName:"p"},"coordinates"),".\nYou can use CSS to change the ",(0,a.kt)("strong",{parentName:"p"},"anchor point"),".\nFor example use ",(0,a.kt)("inlineCode",{parentName:"p"},"transform: 'translate(-50%,-50%)'")," to center."),(0,a.kt)("h3",{id:"mouse-events"},"Mouse events"),(0,a.kt)("p",null,"By default this will not receive any mouse events.\nUse ",(0,a.kt)("inlineCode",{parentName:"p"},"pointerEvents: 'all'")," to receive events."),(0,a.kt)("h3",{id:"key-property"},"Key property"),(0,a.kt)("p",null,"Because this is used inside an array of ",(0,a.kt)("inlineCode",{parentName:"p"},"react components")," you\nneed to provide a unique ",(0,a.kt)("inlineCode",{parentName:"p"},"key"),". See the ",(0,a.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/lists-and-keys.html"},"React docs")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/26c43d5b.10bc8ea8.js b/assets/js/26c43d5b.80fd9498.js similarity index 51% rename from assets/js/26c43d5b.10bc8ea8.js rename to assets/js/26c43d5b.80fd9498.js index 7068e449..7eaeeb4a 100644 --- a/assets/js/26c43d5b.10bc8ea8.js +++ b/assets/js/26c43d5b.80fd9498.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2947],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>y});var a=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=a.createContext({}),i=function(e){var t=a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=i(e.components);return a.createElement(c.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},p=a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,n=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),m=i(r),p=o,y=m["".concat(c,".").concat(p)]||m[p]||d[p]||n;return r?a.createElement(y,l(l({ref:t},u),{},{components:r})):a.createElement(y,l({ref:t},u))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=r.length,l=new Array(n);l[0]=p;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s[m]="string"==typeof e?e:o,l[1]=s;for(var i=2;i{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>n,metadata:()=>s,toc:()=>i});var a=r(7462),o=(r(7294),r(3905));const n={},l="Using Html Overlays",s={unversionedId:"modules/editor-core/get-started/html-overlays",id:"modules/editor-core/get-started/html-overlays",title:"Using Html Overlays",description:"HTML overlays are very easy to use and take advantage of react's architecture.",source:"@site/../docs/modules/editor-core/get-started/html-overlays.md",sourceDirName:"modules/editor-core/get-started",slug:"/modules/editor-core/get-started/html-overlays",permalink:"/docs/modules/editor-core/get-started/html-overlays",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/get-started/html-overlays.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Basic usage",permalink:"/docs/modules/editor-core/get-started/basic-usage"},next:{title:"EditableGeoJsonLayer",permalink:"/docs/modules/editor-layers/api-reference/editable-geojson-layer"}},c={},i=[{value:"Example",id:"example",level:2},{value:"See Also",id:"see-also",level:2}],u={toc:i},m="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(m,(0,a.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"using-html-overlays"},"Using Html Overlays"),(0,o.kt)("p",null,"HTML overlays are very easy to use and take advantage of ",(0,o.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/"},"react's architecture"),"."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},"\n {title}\n\n")),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("p",null,"Checkout the Unesco World Heritage example."),(0,o.kt)("h2",{id:"see-also"},"See Also"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/docs/modules/react-overlays/api-reference/html-overlay"},"Html Overlay")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/docs/modules/react-overlays/api-reference/html-overlay-item"},"Html Overlay Item"))))}d.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2947],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>y});var a=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=a.createContext({}),i=function(e){var t=a.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},m=function(e){var t=i(e.components);return a.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},p=a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,n=e.originalType,c=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),u=i(r),p=o,y=u["".concat(c,".").concat(p)]||u[p]||d[p]||n;return r?a.createElement(y,l(l({ref:t},m),{},{components:r})):a.createElement(y,l({ref:t},m))}));function y(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=r.length,l=new Array(n);l[0]=p;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s[u]="string"==typeof e?e:o,l[1]=s;for(var i=2;i{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>n,metadata:()=>s,toc:()=>i});var a=r(7462),o=(r(7294),r(3905));const n={},l="Using Html Overlays",s={unversionedId:"modules/editor-core/get-started/html-overlays",id:"modules/editor-core/get-started/html-overlays",title:"Using Html Overlays",description:"HTML overlays are very easy to use and take advantage of react's architecture.",source:"@site/../docs/modules/editor-core/get-started/html-overlays.md",sourceDirName:"modules/editor-core/get-started",slug:"/modules/editor-core/get-started/html-overlays",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/html-overlays",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/get-started/html-overlays.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Basic usage",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/basic-usage"},next:{title:"EditableGeoJsonLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer"}},c={},i=[{value:"Example",id:"example",level:2},{value:"See Also",id:"see-also",level:2}],m={toc:i},u="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(u,(0,a.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"using-html-overlays"},"Using Html Overlays"),(0,o.kt)("p",null,"HTML overlays are very easy to use and take advantage of ",(0,o.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/"},"react's architecture"),"."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},"\n {title}\n\n")),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("p",null,"Checkout the Unesco World Heritage example."),(0,o.kt)("h2",{id:"see-also"},"See Also"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/docs/modules/react-overlays/api-reference/html-overlay"},"Html Overlay")),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"/docs/modules/react-overlays/api-reference/html-overlay-item"},"Html Overlay Item"))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2dfe5465.40e44eaa.js b/assets/js/2dfe5465.40e44eaa.js deleted file mode 100644 index 1f856146..00000000 --- a/assets/js/2dfe5465.40e44eaa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5978],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),p=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=p(r),f=o,m=s["".concat(c,".").concat(f)]||s[f]||d[f]||a;return r?n.createElement(m,l(l({ref:t},u),{},{components:r})):n.createElement(m,l({ref:t},u))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,l=new Array(a);l[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[s]="string"==typeof e?e:o,l[1]=i;for(var p=2;p{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>a,metadata:()=>i,toc:()=>p});var n=r(7462),o=(r(7294),r(3905));const a={},l="FLOW",i={unversionedId:"modules/react-graph-layers/api-reference/edge-style-flow",id:"modules/react-graph-layers/api-reference/edge-style-flow",title:"FLOW",description:"color (String | Array | Function, optional)",source:"@site/../docs/modules/react-graph-layers/api-reference/edge-style-flow.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge-style-flow",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style-flow",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge-style-flow.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LABEL",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style-label"},next:{title:"Simple Layout",permalink:"/docs/modules/react-graph-layers/api-reference/simple-layout"}},c={},p=[{value:"color (String | Array | Function, optional)",id:"color-string--array--function-optional",level:3},{value:"speed (Number | Function, optional)",id:"speed-number--function-optional",level:3},{value:"width (Number | Function, optional)",id:"width-number--function-optional",level:3},{value:"tailLength (Number | Function, optional)",id:"taillength-number--function-optional",level:3}],u={toc:p},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"flow"},"FLOW"),(0,o.kt)("p",{align:"center"},(0,o.kt)("img",{src:"/gatsby/images/edge-styles/flows.gif",height:"200"})),(0,o.kt)("h3",{id:"color-string--array--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"color")," (String | Array | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"[255, 255, 255, 255]")),(0,o.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,o.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,o.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges."),(0,o.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each edge to retrieve its color.")),(0,o.kt)("h3",{id:"speed-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"speed")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"0")),(0,o.kt)("li",{parentName:"ul"},"Unit: number of moving segment pass through the line per second."),(0,o.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,o.kt)("inlineCode",{parentName:"li"},"speed"),", all the flow will have the same speed."),(0,o.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the speed for each flow.")),(0,o.kt)("h3",{id:"width-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"width")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"1")),(0,o.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,o.kt)("inlineCode",{parentName:"li"},"width"),", all the flow will have the same width."),(0,o.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the width for each flow.")),(0,o.kt)("h3",{id:"taillength-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"tailLength")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"1")),(0,o.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,o.kt)("inlineCode",{parentName:"li"},"tailLength"),", all the flow will have the same length for the fading tail."),(0,o.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the length of the fading tail for each flow.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2dfe5465.f520e4cd.js b/assets/js/2dfe5465.f520e4cd.js new file mode 100644 index 00000000..224eae6e --- /dev/null +++ b/assets/js/2dfe5465.f520e4cd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5978],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},d="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,l=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=u(r),f=o,m=d["".concat(c,".").concat(f)]||d[f]||s[f]||l;return r?n.createElement(m,a(a({ref:t},p),{},{components:r})):n.createElement(m,a({ref:t},p))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var l=r.length,a=new Array(l);a[0]=f;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:o,a[1]=i;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>s,frontMatter:()=>l,metadata:()=>i,toc:()=>u});var n=r(7462),o=(r(7294),r(3905));const l={},a="FLOW",i={unversionedId:"modules/react-graph-layers/api-reference/edge-style-flow",id:"modules/react-graph-layers/api-reference/edge-style-flow",title:"FLOW",description:"color (String | Array | Function, optional)",source:"@site/../docs/modules/react-graph-layers/api-reference/edge-style-flow.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge-style-flow",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge-style-flow.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LABEL",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label"},next:{title:"Simple Layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout"}},c={},u=[{value:"color (String | Array | Function, optional)",id:"color-string--array--function-optional",level:3},{value:"speed (Number | Function, optional)",id:"speed-number--function-optional",level:3},{value:"width (Number | Function, optional)",id:"width-number--function-optional",level:3},{value:"tailLength (Number | Function, optional)",id:"taillength-number--function-optional",level:3}],p={toc:u},d="wrapper";function s(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"flow"},"FLOW"),(0,o.kt)("p",{align:"center"},(0,o.kt)("img",{src:"/gatsby/images/edge-styles/flows.gif",height:"200"})),(0,o.kt)("h3",{id:"color-string--array--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"color")," (String | Array | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"[255, 255, 255, 255]")),(0,o.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,o.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,o.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges."),(0,o.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each edge to retrieve its color.")),(0,o.kt)("h3",{id:"speed-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"speed")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"0")),(0,o.kt)("li",{parentName:"ul"},"Unit: number of moving segment pass through the line per second."),(0,o.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,o.kt)("inlineCode",{parentName:"li"},"speed"),", all the flow will have the same speed."),(0,o.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the speed for each flow.")),(0,o.kt)("h3",{id:"width-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"width")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"1")),(0,o.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,o.kt)("inlineCode",{parentName:"li"},"width"),", all the flow will have the same width."),(0,o.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the width for each flow.")),(0,o.kt)("h3",{id:"taillength-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"tailLength")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"1")),(0,o.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,o.kt)("inlineCode",{parentName:"li"},"tailLength"),", all the flow will have the same length for the fading tail."),(0,o.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the length of the fading tail for each flow.")))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/30ba4c35.4155a53a.js b/assets/js/30ba4c35.1b286420.js similarity index 65% rename from assets/js/30ba4c35.4155a53a.js rename to assets/js/30ba4c35.1b286420.js index 16618301..ceada8f7 100644 --- a/assets/js/30ba4c35.4155a53a.js +++ b/assets/js/30ba4c35.1b286420.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1666],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),d=s(r),m=o,f=d["".concat(c,".").concat(m)]||d[m]||p[m]||a;return r?n.createElement(f,l(l({ref:t},u),{},{components:r})):n.createElement(f,l({ref:t},u))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:o,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},l="Installation",i={unversionedId:"modules/editor-core/get-started/installing",id:"modules/editor-core/get-started/installing",title:"Installation",description:"nebula.gl will automatically install a compatible version of deck.gl.",source:"@site/../docs/modules/editor-core/get-started/installing.md",sourceDirName:"modules/editor-core/get-started",slug:"/modules/editor-core/get-started/installing",permalink:"/docs/modules/editor-core/get-started/installing",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/get-started/installing.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FAQ",permalink:"/docs/modules/editor-core/faq"},next:{title:"Basic usage",permalink:"/docs/modules/editor-core/get-started/basic-usage"}},c={},s=[],u={toc:s},d="wrapper";function p(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"installation"},"Installation"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},'yarn add "@nebula.gl/layers"\nyarn add "@nebula.gl/overlays"\n')),(0,o.kt)("p",null,"nebula.gl will automatically install a compatible version of deck.gl."))}p.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1666],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>g});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),d=s(r),m=o,g=d["".concat(c,".").concat(m)]||d[m]||p[m]||a;return r?n.createElement(g,l(l({ref:t},u),{},{components:r})):n.createElement(g,l({ref:t},u))}));function g(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[d]="string"==typeof e?e:o,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},l="Installation",i={unversionedId:"modules/editor-core/get-started/installing",id:"modules/editor-core/get-started/installing",title:"Installation",description:"nebula.gl will automatically install a compatible version of deck.gl.",source:"@site/../docs/modules/editor-core/get-started/installing.md",sourceDirName:"modules/editor-core/get-started",slug:"/modules/editor-core/get-started/installing",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/installing",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/get-started/installing.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FAQ",permalink:"/deck.gl-community/docs/modules/editor-core/faq"},next:{title:"Basic usage",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/basic-usage"}},c={},s=[],u={toc:s},d="wrapper";function p(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"installation"},"Installation"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},'yarn add "@nebula.gl/layers"\nyarn add "@nebula.gl/overlays"\n')),(0,o.kt)("p",null,"nebula.gl will automatically install a compatible version of deck.gl."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/36de8632.6e819fb0.js b/assets/js/36de8632.6e819fb0.js deleted file mode 100644 index 94fbff3d..00000000 --- a/assets/js/36de8632.6e819fb0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[994],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=c(r),u=a,y=m["".concat(s,".").concat(u)]||m[u]||d[u]||o;return r?n.createElement(y,l(l({ref:t},p),{},{components:r})):n.createElement(y,l({ref:t},p))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=u;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[m]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},l="HtmlOverlay",i={unversionedId:"modules/react-overlays/api-reference/html-overlay",id:"modules/react-overlays/api-reference/html-overlay",title:"HtmlOverlay",description:"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map.",source:"@site/../docs/modules/react-overlays/api-reference/html-overlay.md",sourceDirName:"modules/react-overlays/api-reference",slug:"/modules/react-overlays/api-reference/html-overlay",permalink:"/docs/modules/react-overlays/api-reference/html-overlay",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-overlays/api-reference/html-overlay.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Editing Modes",permalink:"/docs/modules/edit-modes/api-reference/"},next:{title:"HtmlClusterOverlay",permalink:"/docs/modules/react-overlays/api-reference/html-cluster-overlay"}},s={},c=[{value:"Properties",id:"properties",level:2},{value:"zIndex",id:"zindex",level:3},{value:"Methods to override",id:"methods-to-override",level:2},{value:"getItems()",id:"getitems",level:3}],p={toc:c},m="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(m,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"htmloverlay"},"HtmlOverlay"),(0,a.kt)("p",null,"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map.\nIf you need clustering see ",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-cluster-overlay"},"HtmlClusterOverlay"),".\nYou can subclass this class or provide ",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay-item"},"HtmlOverlayItem")," as children.\nThen use it as a ",(0,a.kt)("inlineCode",{parentName:"p"},"react component")," inside ",(0,a.kt)("inlineCode",{parentName:"p"},"DeckGL"),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"\n \n \n {title}\n \n\n")),(0,a.kt)("p",null,"Or if you prefer to subclass:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"class YourClassName extends HtmlOverlay {\n getItems() {\n return [\n \n You can have text and children like
...
\n \n ];\n }\n}\n")),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("h3",{id:"zindex"},"zIndex"),(0,a.kt)("p",null,"Default is ",(0,a.kt)("inlineCode",{parentName:"p"},"1"),". Set to ",(0,a.kt)("inlineCode",{parentName:"p"},"0")," to move items ",(0,a.kt)("em",{parentName:"p"},"under")," deck.gl layer."),(0,a.kt)("h2",{id:"methods-to-override"},"Methods to override"),(0,a.kt)("h3",{id:"getitems"},"getItems()"),(0,a.kt)("p",null,"Provide an array of ",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay-item"},"HtmlOverlayItem"),"\nif not providing them as JSX children."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/36de8632.e9234453.js b/assets/js/36de8632.e9234453.js new file mode 100644 index 00000000..7fb26003 --- /dev/null +++ b/assets/js/36de8632.e9234453.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[994],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},m=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),p=c(r),u=a,y=p["".concat(s,".").concat(u)]||p[u]||d[u]||o;return r?n.createElement(y,l(l({ref:t},m),{},{components:r})):n.createElement(y,l({ref:t},m))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=u;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},l="HtmlOverlay",i={unversionedId:"modules/react-overlays/api-reference/html-overlay",id:"modules/react-overlays/api-reference/html-overlay",title:"HtmlOverlay",description:"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map.",source:"@site/../docs/modules/react-overlays/api-reference/html-overlay.md",sourceDirName:"modules/react-overlays/api-reference",slug:"/modules/react-overlays/api-reference/html-overlay",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-overlays/api-reference/html-overlay.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Editing Modes",permalink:"/deck.gl-community/docs/modules/edit-modes/api-reference/"},next:{title:"HtmlClusterOverlay",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay"}},s={},c=[{value:"Properties",id:"properties",level:2},{value:"zIndex",id:"zindex",level:3},{value:"Methods to override",id:"methods-to-override",level:2},{value:"getItems()",id:"getitems",level:3}],m={toc:c},p="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(p,(0,n.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"htmloverlay"},"HtmlOverlay"),(0,a.kt)("p",null,"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map.\nIf you need clustering see ",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-cluster-overlay"},"HtmlClusterOverlay"),".\nYou can subclass this class or provide ",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay-item"},"HtmlOverlayItem")," as children.\nThen use it as a ",(0,a.kt)("inlineCode",{parentName:"p"},"react component")," inside ",(0,a.kt)("inlineCode",{parentName:"p"},"DeckGL"),"."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"\n \n \n {title}\n \n\n")),(0,a.kt)("p",null,"Or if you prefer to subclass:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"class YourClassName extends HtmlOverlay {\n getItems() {\n return [\n \n You can have text and children like
...
\n \n ];\n }\n}\n")),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("h3",{id:"zindex"},"zIndex"),(0,a.kt)("p",null,"Default is ",(0,a.kt)("inlineCode",{parentName:"p"},"1"),". Set to ",(0,a.kt)("inlineCode",{parentName:"p"},"0")," to move items ",(0,a.kt)("em",{parentName:"p"},"under")," deck.gl layer."),(0,a.kt)("h2",{id:"methods-to-override"},"Methods to override"),(0,a.kt)("h3",{id:"getitems"},"getItems()"),(0,a.kt)("p",null,"Provide an array of ",(0,a.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay-item"},"HtmlOverlayItem"),"\nif not providing them as JSX children."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/36fab4cd.a3f7da4e.js b/assets/js/36fab4cd.a3f7da4e.js new file mode 100644 index 00000000..c4b7c9e3 --- /dev/null +++ b/assets/js/36fab4cd.a3f7da4e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7042],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),s=p(n),m=a,f=s["".concat(c,".").concat(m)]||s[m]||d[m]||i;return n?r.createElement(f,l(l({ref:t},u),{},{components:n})):r.createElement(f,l({ref:t},u))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o[s]="string"==typeof e?e:a,l[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const i={},l="LABEL",o={unversionedId:"modules/react-graph-layers/api-reference/edge-style-label",id:"modules/react-graph-layers/api-reference/edge-style-label",title:"LABEL",description:"text (String | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/edge-style-label.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge-style-label",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge-style-label.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LABEL",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label"},next:{title:"FLOW",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow"}},c={},p=[{value:"text (String | Function, required)",id:"text-string--function-required",level:3},{value:"color (String | Array | Function, optional)",id:"color-string--array--function-optional",level:3},{value:"fontSize (Number | Function, optional)",id:"fontsize-number--function-optional",level:3},{value:"textAnchor (String | Function, optional)",id:"textanchor-string--function-optional",level:3},{value:"alignmentBaseline (String | Function, optional)",id:"alignmentbaseline-string--function-optional",level:3}],u={toc:p},s="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(s,(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"label"},"LABEL"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/edge-styles/label.png",height:"200"})),(0,a.kt)("h3",{id:"text-string--function-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"text")," (String | Function, required)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"The text of the label."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"text"),", all the edges will have the same text."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the text of each edge.")),(0,a.kt)("h3",{id:"color-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"color")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[255, 255, 255, 255]")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,a.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each edge to retrieve its color.")),(0,a.kt)("h3",{id:"fontsize-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"fontSize")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"12")),(0,a.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"fontSize"),", all the labels will have the same font size."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the font size of each label.")),(0,a.kt)("h3",{id:"textanchor-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"textAnchor")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Default: ",(0,a.kt)("inlineCode",{parentName:"p"},"middle"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"The text anchor. Available options include 'start', 'middle' and 'end'.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a string is provided, it is used as the text anchor for all edges.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a function is provided, it is called on each edge to retrieve its text anchor."))),(0,a.kt)("h3",{id:"alignmentbaseline-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"alignmentBaseline")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"center"),"\nThe alignment baseline. Available options include 'top', 'center' and 'bottom'."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided, it is used as the alignment baseline for all edges."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each edge to retrieve its alignment baseline.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/36fab4cd.c28d04c2.js b/assets/js/36fab4cd.c28d04c2.js deleted file mode 100644 index 6916f0e2..00000000 --- a/assets/js/36fab4cd.c28d04c2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7042],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),u=p(n),m=a,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||i;return n?r.createElement(f,l(l({ref:t},s),{},{components:n})):r.createElement(f,l({ref:t},s))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o[u]="string"==typeof e?e:a,l[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const i={},l="LABEL",o={unversionedId:"modules/react-graph-layers/api-reference/edge-style-label",id:"modules/react-graph-layers/api-reference/edge-style-label",title:"LABEL",description:"text (String | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/edge-style-label.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge-style-label",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style-label",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge-style-label.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LABEL",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-label"},next:{title:"FLOW",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style-flow"}},c={},p=[{value:"text (String | Function, required)",id:"text-string--function-required",level:3},{value:"color (String | Array | Function, optional)",id:"color-string--array--function-optional",level:3},{value:"fontSize (Number | Function, optional)",id:"fontsize-number--function-optional",level:3},{value:"textAnchor (String | Function, optional)",id:"textanchor-string--function-optional",level:3},{value:"alignmentBaseline (String | Function, optional)",id:"alignmentbaseline-string--function-optional",level:3}],s={toc:p},u="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"label"},"LABEL"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/edge-styles/label.png",height:"200"})),(0,a.kt)("h3",{id:"text-string--function-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"text")," (String | Function, required)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"The text of the label."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"text"),", all the edges will have the same text."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the text of each edge.")),(0,a.kt)("h3",{id:"color-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"color")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[255, 255, 255, 255]")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,a.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each edge to retrieve its color.")),(0,a.kt)("h3",{id:"fontsize-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"fontSize")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"12")),(0,a.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"fontSize"),", all the labels will have the same font size."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the font size of each label.")),(0,a.kt)("h3",{id:"textanchor-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"textAnchor")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Default: ",(0,a.kt)("inlineCode",{parentName:"p"},"middle"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"The text anchor. Available options include 'start', 'middle' and 'end'.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a string is provided, it is used as the text anchor for all edges.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a function is provided, it is called on each edge to retrieve its text anchor."))),(0,a.kt)("h3",{id:"alignmentbaseline-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"alignmentBaseline")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"center"),"\nThe alignment baseline. Available options include 'top', 'center' and 'bottom'."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided, it is used as the alignment baseline for all edges."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each edge to retrieve its alignment baseline.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/39424d58.7f0b2c22.js b/assets/js/39424d58.7f0b2c22.js new file mode 100644 index 00000000..cedc49eb --- /dev/null +++ b/assets/js/39424d58.7f0b2c22.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8142],{3905:(e,d,t)=>{t.d(d,{Zo:()=>u,kt:()=>c});var r=t(7294);function n(e,d,t){return d in e?Object.defineProperty(e,d,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[d]=t,e}function i(e,d){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);d&&(r=r.filter((function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var d=1;d=0||(n[t]=e[t]);return n}(e,d);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=r.createContext({}),g=function(e){var d=r.useContext(l),t=d;return e&&(t="function"==typeof e?e(d):o(o({},d),e)),t},u=function(e){var d=g(e.components);return r.createElement(l.Provider,{value:d},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var d=e.children;return r.createElement(r.Fragment,{},d)}},h=r.forwardRef((function(e,d){var t=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,u=a(e,["components","mdxType","originalType","parentName"]),p=g(t),h=n,c=p["".concat(l,".").concat(h)]||p[h]||s[h]||i;return t?r.createElement(c,o(o({ref:d},u),{},{components:t})):r.createElement(c,o({ref:d},u))}));function c(e,d){var t=arguments,n=d&&d.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=h;var a={};for(var l in d)hasOwnProperty.call(d,l)&&(a[l]=d[l]);a.originalType=e,a[p]="string"==typeof e?e:n,o[1]=a;for(var g=2;g{t.r(d),t.d(d,{assets:()=>l,contentTitle:()=>o,default:()=>s,frontMatter:()=>i,metadata:()=>a,toc:()=>g});var r=t(7462),n=(t(7294),t(3905));const i={},o="Graph Class",a={unversionedId:"modules/react-graph-layers/api-reference/graph",id:"modules/react-graph-layers/api-reference/graph",title:"Graph Class",description:"The Graph class is the base class of the graph.",source:"@site/../docs/modules/react-graph-layers/api-reference/graph.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/graph",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/graph.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"D3 Force Layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout"},next:{title:"Node Class",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node"}},l={},g=[{value:"Constructor",id:"constructor",level:2},{value:"graph (Graph, optional)",id:"graph-graph-optional",level:5},{value:"setGraphName()",id:"setgraphname",level:2},{value:"getGraphName()",id:"getgraphname",level:2},{value:"addEdge(edge)",id:"addedgeedge",level:2},{value:"edge (Edge, required)",id:"edge-edge-required",level:5},{value:"addNode(node)",id:"addnodenode",level:2},{value:"node (Node, required)",id:"node-node-required",level:5},{value:"batchAddEdges(edges)",id:"batchaddedgesedges",level:2},{value:"edges (Edge[], required)",id:"edges-edge-required",level:5},{value:"batchAddNodes(nodes)",id:"batchaddnodesnodes",level:2},{value:"nodes (Node[], required)",id:"nodes-node-required",level:5},{value:"findEdge(edgeId)",id:"findedgeedgeid",level:2},{value:"edgeId (String|Number, required)",id:"edgeid-stringnumber-required",level:5},{value:"edgeId (String|Number, required)",id:"edgeid-stringnumber-required-1",level:5},{value:"findNode(nodeId)",id:"findnodenodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required",level:5},{value:"getDegree(nodeId)",id:"getdegreenodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-1",level:5},{value:"getEdgeMap()",id:"getedgemap",level:2},{value:"getEdges()",id:"getedges",level:2},{value:"getConnectedEdges(nodeId)",id:"getconnectededgesnodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-2",level:5},{value:"getNodeMap()",id:"getnodemap",level:2},{value:"getNodes()",id:"getnodes",level:2},{value:"getNodeSiblings(nodeId)",id:"getnodesiblingsnodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-3",level:5},{value:"isEmpty()",id:"isempty",level:2},{value:"removeEdge(edgeId)",id:"removeedgeedgeid",level:2},{value:"edgeId (String|Number, required)",id:"edgeid-stringnumber-required-2",level:5},{value:"removeNode(nodeId)",id:"removenodenodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-4",level:5},{value:"reset()",id:"reset",level:2},{value:"resetEdges()",id:"resetedges",level:2},{value:"resetNodes()",id:"resetnodes",level:2},{value:"cb (Function, required)",id:"cb-function-required",level:5},{value:"updateEdge(edge)",id:"updateedgeedge",level:2},{value:"edge (Edge, required)",id:"edge-edge-required-1",level:5},{value:"updateNode(node)",id:"updatenodenode",level:2},{value:"node (Node, required)",id:"node-node-required-1",level:5}],u={toc:g},p="wrapper";function s(e){let{components:d,...t}=e;return(0,n.kt)(p,(0,r.Z)({},u,t,{components:d,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"graph-class"},"Graph Class"),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"Graph")," class is the base class of the graph."),(0,n.kt)("h2",{id:"constructor"},"Constructor"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"new Graph(graph);\n")),(0,n.kt)("p",null,"Parameters:"),(0,n.kt)("h5",{id:"graph-graph-optional"},(0,n.kt)("inlineCode",{parentName:"h5"},"graph")," (Graph, optional)"),(0,n.kt)("h2",{id:"setgraphname"},"setGraphName()"),(0,n.kt)("p",null,"Set the name of the graph."),(0,n.kt)("h2",{id:"getgraphname"},"getGraphName()"),(0,n.kt)("p",null,"Get the name of the graph. Normally it can be used for dirty check."),(0,n.kt)("h2",{id:"addedgeedge"},"addEdge(edge)"),(0,n.kt)("p",null,"Add a new edge to the graph."),(0,n.kt)("h5",{id:"edge-edge-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"edge")," (Edge, required)"),(0,n.kt)("p",null,"Expect a Edge object to be added to the graph."),(0,n.kt)("h2",{id:"addnodenode"},"addNode(node)"),(0,n.kt)("p",null,"Add a new node to the graph."),(0,n.kt)("h5",{id:"node-node-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"node")," (Node, required)"),(0,n.kt)("p",null,"Expect a Node object to be added to the graph."),(0,n.kt)("h2",{id:"batchaddedgesedges"},"batchAddEdges(edges)"),(0,n.kt)("p",null,"Batch add edges to the graph."),(0,n.kt)("h5",{id:"edges-edge-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"edges")," (Edge[], required)"),(0,n.kt)("p",null,"Expect a list of Edge objects to be added to the graph."),(0,n.kt)("h2",{id:"batchaddnodesnodes"},"batchAddNodes(nodes)"),(0,n.kt)("p",null,"Batch add nodes to the graph."),(0,n.kt)("h5",{id:"nodes-node-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodes")," (Node[], required)"),(0,n.kt)("p",null,"Expect a list of Node objects to be added to the graph."),(0,n.kt)("h2",{id:"findedgeedgeid"},"findEdge(edgeId)"),(0,n.kt)("h5",{id:"edgeid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"edgeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target edge ID."),(0,n.kt)("p",null,"Find the edge by edge ID."),(0,n.kt)("h5",{id:"edgeid-stringnumber-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"edgeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target edge ID."),(0,n.kt)("h2",{id:"findnodenodeid"},"findNode(nodeId)"),(0,n.kt)("p",null,"Find the node by node ID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"getdegreenodeid"},"getDegree(nodeId)"),(0,n.kt)("p",null,"Get the degree of the node by node ID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"getedgemap"},"getEdgeMap()"),(0,n.kt)("p",null,"Get the edge map of the graph. The key of the map is the ID of the edges."),(0,n.kt)("h2",{id:"getedges"},"getEdges()"),(0,n.kt)("p",null,"Get all the edges of the graph."),(0,n.kt)("h2",{id:"getconnectededgesnodeid"},"getConnectedEdges(nodeId)"),(0,n.kt)("p",null,"Return all the connected edges of a node by nodeID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-2"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"getnodemap"},"getNodeMap()"),(0,n.kt)("p",null,"Get the node map of the graph. The key of the map is the ID of the nodes."),(0,n.kt)("h2",{id:"getnodes"},"getNodes()"),(0,n.kt)("p",null,"Get all the nodes of the graph."),(0,n.kt)("h2",{id:"getnodesiblingsnodeid"},"getNodeSiblings(nodeId)"),(0,n.kt)("p",null,"Return all the sibling nodes of a node by nodeID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-3"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"isempty"},"isEmpty()"),(0,n.kt)("p",null,"Return true if the graph is empty."),(0,n.kt)("h2",{id:"removeedgeedgeid"},"removeEdge(edgeId)"),(0,n.kt)("p",null,"Remove an edge from the graph by the edge ID"),(0,n.kt)("h5",{id:"edgeid-stringnumber-required-2"},(0,n.kt)("inlineCode",{parentName:"h5"},"edgeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target edge ID."),(0,n.kt)("h2",{id:"removenodenodeid"},"removeNode(nodeId)"),(0,n.kt)("p",null,"Remove a node from the graph by node ID"),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-4"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"reset"},"reset()"),(0,n.kt)("p",null,"Clean up everything in the graph."),(0,n.kt)("h2",{id:"resetedges"},"resetEdges()"),(0,n.kt)("p",null,"Clean up all the edges in the graph."),(0,n.kt)("h2",{id:"resetnodes"},"resetNodes()"),(0,n.kt)("p",null,"Clean up all the nodes in the graph."),(0,n.kt)("h1",{id:"transactioncb"},"transaction(cb)"),(0,n.kt)("p",null,"Perform a batch of operations defined by cb before indicating graph is updated"),(0,n.kt)("h5",{id:"cb-function-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"cb")," (Function, required)"),(0,n.kt)("h2",{id:"updateedgeedge"},"updateEdge(edge)"),(0,n.kt)("p",null,"Update the indicated edge to the provided value"),(0,n.kt)("h5",{id:"edge-edge-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"edge")," (Edge, required)"),(0,n.kt)("h2",{id:"updatenodenode"},"updateNode(node)"),(0,n.kt)("p",null,"Update the indicated node to the provided value"),(0,n.kt)("h5",{id:"node-node-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"node")," (Node, required)"))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/39424d58.d9eebfa8.js b/assets/js/39424d58.d9eebfa8.js deleted file mode 100644 index 33436437..00000000 --- a/assets/js/39424d58.d9eebfa8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8142],{3905:(e,d,t)=>{t.d(d,{Zo:()=>u,kt:()=>c});var r=t(7294);function n(e,d,t){return d in e?Object.defineProperty(e,d,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[d]=t,e}function i(e,d){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);d&&(r=r.filter((function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable}))),t.push.apply(t,r)}return t}function o(e){for(var d=1;d=0||(n[t]=e[t]);return n}(e,d);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=r.createContext({}),g=function(e){var d=r.useContext(l),t=d;return e&&(t="function"==typeof e?e(d):o(o({},d),e)),t},u=function(e){var d=g(e.components);return r.createElement(l.Provider,{value:d},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var d=e.children;return r.createElement(r.Fragment,{},d)}},h=r.forwardRef((function(e,d){var t=e.components,n=e.mdxType,i=e.originalType,l=e.parentName,u=a(e,["components","mdxType","originalType","parentName"]),p=g(t),h=n,c=p["".concat(l,".").concat(h)]||p[h]||s[h]||i;return t?r.createElement(c,o(o({ref:d},u),{},{components:t})):r.createElement(c,o({ref:d},u))}));function c(e,d){var t=arguments,n=d&&d.mdxType;if("string"==typeof e||n){var i=t.length,o=new Array(i);o[0]=h;var a={};for(var l in d)hasOwnProperty.call(d,l)&&(a[l]=d[l]);a.originalType=e,a[p]="string"==typeof e?e:n,o[1]=a;for(var g=2;g{t.r(d),t.d(d,{assets:()=>l,contentTitle:()=>o,default:()=>s,frontMatter:()=>i,metadata:()=>a,toc:()=>g});var r=t(7462),n=(t(7294),t(3905));const i={},o="Graph Class",a={unversionedId:"modules/react-graph-layers/api-reference/graph",id:"modules/react-graph-layers/api-reference/graph",title:"Graph Class",description:"The Graph class is the base class of the graph.",source:"@site/../docs/modules/react-graph-layers/api-reference/graph.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/graph",permalink:"/docs/modules/react-graph-layers/api-reference/graph",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/graph.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"D3 Force Layout",permalink:"/docs/modules/react-graph-layers/api-reference/d3-layout"},next:{title:"Node Class",permalink:"/docs/modules/react-graph-layers/api-reference/node"}},l={},g=[{value:"Constructor",id:"constructor",level:2},{value:"graph (Graph, optional)",id:"graph-graph-optional",level:5},{value:"setGraphName()",id:"setgraphname",level:2},{value:"getGraphName()",id:"getgraphname",level:2},{value:"addEdge(edge)",id:"addedgeedge",level:2},{value:"edge (Edge, required)",id:"edge-edge-required",level:5},{value:"addNode(node)",id:"addnodenode",level:2},{value:"node (Node, required)",id:"node-node-required",level:5},{value:"batchAddEdges(edges)",id:"batchaddedgesedges",level:2},{value:"edges (Edge[], required)",id:"edges-edge-required",level:5},{value:"batchAddNodes(nodes)",id:"batchaddnodesnodes",level:2},{value:"nodes (Node[], required)",id:"nodes-node-required",level:5},{value:"findEdge(edgeId)",id:"findedgeedgeid",level:2},{value:"edgeId (String|Number, required)",id:"edgeid-stringnumber-required",level:5},{value:"edgeId (String|Number, required)",id:"edgeid-stringnumber-required-1",level:5},{value:"findNode(nodeId)",id:"findnodenodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required",level:5},{value:"getDegree(nodeId)",id:"getdegreenodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-1",level:5},{value:"getEdgeMap()",id:"getedgemap",level:2},{value:"getEdges()",id:"getedges",level:2},{value:"getConnectedEdges(nodeId)",id:"getconnectededgesnodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-2",level:5},{value:"getNodeMap()",id:"getnodemap",level:2},{value:"getNodes()",id:"getnodes",level:2},{value:"getNodeSiblings(nodeId)",id:"getnodesiblingsnodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-3",level:5},{value:"isEmpty()",id:"isempty",level:2},{value:"removeEdge(edgeId)",id:"removeedgeedgeid",level:2},{value:"edgeId (String|Number, required)",id:"edgeid-stringnumber-required-2",level:5},{value:"removeNode(nodeId)",id:"removenodenodeid",level:2},{value:"nodeId (String|Number, required)",id:"nodeid-stringnumber-required-4",level:5},{value:"reset()",id:"reset",level:2},{value:"resetEdges()",id:"resetedges",level:2},{value:"resetNodes()",id:"resetnodes",level:2},{value:"cb (Function, required)",id:"cb-function-required",level:5},{value:"updateEdge(edge)",id:"updateedgeedge",level:2},{value:"edge (Edge, required)",id:"edge-edge-required-1",level:5},{value:"updateNode(node)",id:"updatenodenode",level:2},{value:"node (Node, required)",id:"node-node-required-1",level:5}],u={toc:g},p="wrapper";function s(e){let{components:d,...t}=e;return(0,n.kt)(p,(0,r.Z)({},u,t,{components:d,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"graph-class"},"Graph Class"),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"Graph")," class is the base class of the graph."),(0,n.kt)("h2",{id:"constructor"},"Constructor"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"new Graph(graph);\n")),(0,n.kt)("p",null,"Parameters:"),(0,n.kt)("h5",{id:"graph-graph-optional"},(0,n.kt)("inlineCode",{parentName:"h5"},"graph")," (Graph, optional)"),(0,n.kt)("h2",{id:"setgraphname"},"setGraphName()"),(0,n.kt)("p",null,"Set the name of the graph."),(0,n.kt)("h2",{id:"getgraphname"},"getGraphName()"),(0,n.kt)("p",null,"Get the name of the graph. Normally it can be used for dirty check."),(0,n.kt)("h2",{id:"addedgeedge"},"addEdge(edge)"),(0,n.kt)("p",null,"Add a new edge to the graph."),(0,n.kt)("h5",{id:"edge-edge-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"edge")," (Edge, required)"),(0,n.kt)("p",null,"Expect a Edge object to be added to the graph."),(0,n.kt)("h2",{id:"addnodenode"},"addNode(node)"),(0,n.kt)("p",null,"Add a new node to the graph."),(0,n.kt)("h5",{id:"node-node-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"node")," (Node, required)"),(0,n.kt)("p",null,"Expect a Node object to be added to the graph."),(0,n.kt)("h2",{id:"batchaddedgesedges"},"batchAddEdges(edges)"),(0,n.kt)("p",null,"Batch add edges to the graph."),(0,n.kt)("h5",{id:"edges-edge-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"edges")," (Edge[], required)"),(0,n.kt)("p",null,"Expect a list of Edge objects to be added to the graph."),(0,n.kt)("h2",{id:"batchaddnodesnodes"},"batchAddNodes(nodes)"),(0,n.kt)("p",null,"Batch add nodes to the graph."),(0,n.kt)("h5",{id:"nodes-node-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodes")," (Node[], required)"),(0,n.kt)("p",null,"Expect a list of Node objects to be added to the graph."),(0,n.kt)("h2",{id:"findedgeedgeid"},"findEdge(edgeId)"),(0,n.kt)("h5",{id:"edgeid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"edgeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target edge ID."),(0,n.kt)("p",null,"Find the edge by edge ID."),(0,n.kt)("h5",{id:"edgeid-stringnumber-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"edgeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target edge ID."),(0,n.kt)("h2",{id:"findnodenodeid"},"findNode(nodeId)"),(0,n.kt)("p",null,"Find the node by node ID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"getdegreenodeid"},"getDegree(nodeId)"),(0,n.kt)("p",null,"Get the degree of the node by node ID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"getedgemap"},"getEdgeMap()"),(0,n.kt)("p",null,"Get the edge map of the graph. The key of the map is the ID of the edges."),(0,n.kt)("h2",{id:"getedges"},"getEdges()"),(0,n.kt)("p",null,"Get all the edges of the graph."),(0,n.kt)("h2",{id:"getconnectededgesnodeid"},"getConnectedEdges(nodeId)"),(0,n.kt)("p",null,"Return all the connected edges of a node by nodeID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-2"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"getnodemap"},"getNodeMap()"),(0,n.kt)("p",null,"Get the node map of the graph. The key of the map is the ID of the nodes."),(0,n.kt)("h2",{id:"getnodes"},"getNodes()"),(0,n.kt)("p",null,"Get all the nodes of the graph."),(0,n.kt)("h2",{id:"getnodesiblingsnodeid"},"getNodeSiblings(nodeId)"),(0,n.kt)("p",null,"Return all the sibling nodes of a node by nodeID."),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-3"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"isempty"},"isEmpty()"),(0,n.kt)("p",null,"Return true if the graph is empty."),(0,n.kt)("h2",{id:"removeedgeedgeid"},"removeEdge(edgeId)"),(0,n.kt)("p",null,"Remove an edge from the graph by the edge ID"),(0,n.kt)("h5",{id:"edgeid-stringnumber-required-2"},(0,n.kt)("inlineCode",{parentName:"h5"},"edgeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target edge ID."),(0,n.kt)("h2",{id:"removenodenodeid"},"removeNode(nodeId)"),(0,n.kt)("p",null,"Remove a node from the graph by node ID"),(0,n.kt)("h5",{id:"nodeid-stringnumber-required-4"},(0,n.kt)("inlineCode",{parentName:"h5"},"nodeId")," (String|Number, required)"),(0,n.kt)("p",null,"The target node ID."),(0,n.kt)("h2",{id:"reset"},"reset()"),(0,n.kt)("p",null,"Clean up everything in the graph."),(0,n.kt)("h2",{id:"resetedges"},"resetEdges()"),(0,n.kt)("p",null,"Clean up all the edges in the graph."),(0,n.kt)("h2",{id:"resetnodes"},"resetNodes()"),(0,n.kt)("p",null,"Clean up all the nodes in the graph."),(0,n.kt)("h1",{id:"transactioncb"},"transaction(cb)"),(0,n.kt)("p",null,"Perform a batch of operations defined by cb before indicating graph is updated"),(0,n.kt)("h5",{id:"cb-function-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"cb")," (Function, required)"),(0,n.kt)("h2",{id:"updateedgeedge"},"updateEdge(edge)"),(0,n.kt)("p",null,"Update the indicated edge to the provided value"),(0,n.kt)("h5",{id:"edge-edge-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"edge")," (Edge, required)"),(0,n.kt)("h2",{id:"updatenodenode"},"updateNode(node)"),(0,n.kt)("p",null,"Update the indicated node to the provided value"),(0,n.kt)("h5",{id:"node-node-required-1"},(0,n.kt)("inlineCode",{parentName:"h5"},"node")," (Node, required)"))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/40398e56.22e233e6.js b/assets/js/40398e56.22e233e6.js new file mode 100644 index 00000000..6a8fc97a --- /dev/null +++ b/assets/js/40398e56.22e233e6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[298],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>k});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=p(n),m=l,k=u["".concat(s,".").concat(m)]||u[m]||d[m]||r;return n?a.createElement(k,o(o({ref:t},c),{},{components:n})):a.createElement(k,o({ref:t},c))}));function k(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,o=new Array(r);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:l,o[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>d,frontMatter:()=>r,metadata:()=>i,toc:()=>p});var a=n(7462),l=(n(7294),n(3905));const r={},o="Overview",i={unversionedId:"modules/bing-maps/README",id:"modules/bing-maps/README",title:"Overview",description:"This module allows deck.gl to be used as a Bing Maps custom layer.",source:"@site/../docs/modules/bing-maps/README.md",sourceDirName:"modules/bing-maps",slug:"/modules/bing-maps/",permalink:"/deck.gl-community/docs/modules/bing-maps/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/bing-maps/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Upgrade Guide",permalink:"/deck.gl-community/docs/upgrade-guide"},next:{title:"Introduction",permalink:"/deck.gl-community/docs/modules/react-graph-layers/"}},s={},p=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"API Reference",id:"api-reference",level:2},{value:"loadModules",id:"loadmodules",level:3},{value:"DeckOverlay",id:"deckoverlay",level:3},{value:"Supported Features and Limitations",id:"supported-features-and-limitations",level:2}],c={toc:p},u="wrapper";function d(e){let{components:t,...n}=e;return(0,l.kt)(u,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"overview"},"Overview"),(0,l.kt)("p",null,"This module allows ",(0,l.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl")," to be used as a Bing Maps custom layer."),(0,l.kt)("h2",{id:"installation"},"Installation"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npm install deck.gl deck.gl-bing-maps\n")),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"import {loadModules} from 'deck.gl-bing-maps';\nimport {GeoJsonLayer} from 'deck.gl';\n\nloadModules().then(({Maps, Location, DeckOverlay}) => {\n // Create map\n const map = new Map(document.getElementById('map'), {\n credentials: 'YOUR_API_KEY',\n // Disable modes that are not supported\n disableBirdsEye: true,\n disableStreetside: true\n });\n\n map.setView({\n center: new Location(37.78, -122.45),\n zoom: 10\n });\n\n // Add deck.gl overlay\n const deckOverlay = new DeckOverlay({\n layers: [\n new GeoJsonLayer({\n data:\n 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson',\n lineWidthMinPixels: 2,\n getLineColor: [60, 60, 60],\n getFillColor: [200, 200, 200]\n })\n ]\n });\n map.layers.insert(deckOverlay);\n});\n")),(0,l.kt)("h2",{id:"api-reference"},"API Reference"),(0,l.kt)("h3",{id:"loadmodules"},"loadModules"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"loadModules(moduleNames)")),(0,l.kt)("p",null,"Arguments:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"moduleNames")," (",(0,l.kt)("inlineCode",{parentName:"li"},"string[]?"),") - Optional modules to load, e.g. ",(0,l.kt)("inlineCode",{parentName:"li"},"'Microsoft.Maps.GeoJson'"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"'Microsoft.Maps.DrawingTools'"))),(0,l.kt)("p",null,"Returns a Promise that resolves to the global ",(0,l.kt)("inlineCode",{parentName:"p"},"Microsoft.Maps")," namespace. A custom class, ",(0,l.kt)("inlineCode",{parentName:"p"},"DeckOverlay"),", is also added to the namespace."),(0,l.kt)("h3",{id:"deckoverlay"},"DeckOverlay"),(0,l.kt)("p",null,"An implementation of ",(0,l.kt)("a",{parentName:"p",href:"https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/customoverlay-class"},"CustomOverlay"),"."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"const deckOverlay = new DeckOverlay({...});\nmap.layers.insert(deckOverlay);\n")),(0,l.kt)("p",null,"The constructor accepts a props object that is passed to the ",(0,l.kt)("inlineCode",{parentName:"p"},"Deck")," constructor. See the ",(0,l.kt)("a",{parentName:"p",href:"#supported-features-and-limitations"},"limitations")," section below for more details."),(0,l.kt)("p",null,"The following ",(0,l.kt)("inlineCode",{parentName:"p"},"Deck")," methods can be called directly from a ",(0,l.kt)("inlineCode",{parentName:"p"},"DeckOverlay")," instance:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.setProps")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.pickObject")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.pickMultipleObjects")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.pickObjects")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.redraw")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.finalize"))),(0,l.kt)("h2",{id:"supported-features-and-limitations"},"Supported Features and Limitations"),(0,l.kt)("p",null,"Supported deck.gl features:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Layers"),(0,l.kt)("li",{parentName:"ul"},"Effects"),(0,l.kt)("li",{parentName:"ul"},"Auto-highlighting"),(0,l.kt)("li",{parentName:"ul"},"Attribute transitions"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onHover")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"onClick")," callbacks"),(0,l.kt)("li",{parentName:"ul"},"Tooltip")),(0,l.kt)("p",null,"Not supported features:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Tilting"),(0,l.kt)("li",{parentName:"ul"},"Multiple views"),(0,l.kt)("li",{parentName:"ul"},"Controller"),(0,l.kt)("li",{parentName:"ul"},"React integration"),(0,l.kt)("li",{parentName:"ul"},"Gesture event callbacks (e.g. ",(0,l.kt)("inlineCode",{parentName:"li"},"onDrag*"),")")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/40398e56.774b77a5.js b/assets/js/40398e56.774b77a5.js deleted file mode 100644 index 97a15ca9..00000000 --- a/assets/js/40398e56.774b77a5.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[298],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>k});var a=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),u=p(n),m=l,k=u["".concat(s,".").concat(m)]||u[m]||d[m]||r;return n?a.createElement(k,o(o({ref:t},c),{},{components:n})):a.createElement(k,o({ref:t},c))}));function k(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,o=new Array(r);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:l,o[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>d,frontMatter:()=>r,metadata:()=>i,toc:()=>p});var a=n(7462),l=(n(7294),n(3905));const r={},o="Overview",i={unversionedId:"modules/bing-maps/README",id:"modules/bing-maps/README",title:"Overview",description:"This module allows deck.gl to be used as a Bing Maps custom layer.",source:"@site/../docs/modules/bing-maps/README.md",sourceDirName:"modules/bing-maps",slug:"/modules/bing-maps/",permalink:"/docs/modules/bing-maps/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/bing-maps/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Upgrade Guide",permalink:"/docs/upgrade-guide"},next:{title:"Introduction",permalink:"/docs/modules/react-graph-layers/"}},s={},p=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"API Reference",id:"api-reference",level:2},{value:"loadModules",id:"loadmodules",level:3},{value:"DeckOverlay",id:"deckoverlay",level:3},{value:"Supported Features and Limitations",id:"supported-features-and-limitations",level:2}],c={toc:p},u="wrapper";function d(e){let{components:t,...n}=e;return(0,l.kt)(u,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"overview"},"Overview"),(0,l.kt)("p",null,"This module allows ",(0,l.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl")," to be used as a Bing Maps custom layer."),(0,l.kt)("h2",{id:"installation"},"Installation"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-bash"},"npm install deck.gl deck.gl-bing-maps\n")),(0,l.kt)("h2",{id:"usage"},"Usage"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"import {loadModules} from 'deck.gl-bing-maps';\nimport {GeoJsonLayer} from 'deck.gl';\n\nloadModules().then(({Maps, Location, DeckOverlay}) => {\n // Create map\n const map = new Map(document.getElementById('map'), {\n credentials: 'YOUR_API_KEY',\n // Disable modes that are not supported\n disableBirdsEye: true,\n disableStreetside: true\n });\n\n map.setView({\n center: new Location(37.78, -122.45),\n zoom: 10\n });\n\n // Add deck.gl overlay\n const deckOverlay = new DeckOverlay({\n layers: [\n new GeoJsonLayer({\n data:\n 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson',\n lineWidthMinPixels: 2,\n getLineColor: [60, 60, 60],\n getFillColor: [200, 200, 200]\n })\n ]\n });\n map.layers.insert(deckOverlay);\n});\n")),(0,l.kt)("h2",{id:"api-reference"},"API Reference"),(0,l.kt)("h3",{id:"loadmodules"},"loadModules"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"loadModules(moduleNames)")),(0,l.kt)("p",null,"Arguments:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"moduleNames")," (",(0,l.kt)("inlineCode",{parentName:"li"},"string[]?"),") - Optional modules to load, e.g. ",(0,l.kt)("inlineCode",{parentName:"li"},"'Microsoft.Maps.GeoJson'"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"'Microsoft.Maps.DrawingTools'"))),(0,l.kt)("p",null,"Returns a Promise that resolves to the global ",(0,l.kt)("inlineCode",{parentName:"p"},"Microsoft.Maps")," namespace. A custom class, ",(0,l.kt)("inlineCode",{parentName:"p"},"DeckOverlay"),", is also added to the namespace."),(0,l.kt)("h3",{id:"deckoverlay"},"DeckOverlay"),(0,l.kt)("p",null,"An implementation of ",(0,l.kt)("a",{parentName:"p",href:"https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/customoverlay-class"},"CustomOverlay"),"."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"const deckOverlay = new DeckOverlay({...});\nmap.layers.insert(deckOverlay);\n")),(0,l.kt)("p",null,"The constructor accepts a props object that is passed to the ",(0,l.kt)("inlineCode",{parentName:"p"},"Deck")," constructor. See the ",(0,l.kt)("a",{parentName:"p",href:"#supported-features-and-limitations"},"limitations")," section below for more details."),(0,l.kt)("p",null,"The following ",(0,l.kt)("inlineCode",{parentName:"p"},"Deck")," methods can be called directly from a ",(0,l.kt)("inlineCode",{parentName:"p"},"DeckOverlay")," instance:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.setProps")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.pickObject")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.pickMultipleObjects")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.pickObjects")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.redraw")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"deckOverlay.finalize"))),(0,l.kt)("h2",{id:"supported-features-and-limitations"},"Supported Features and Limitations"),(0,l.kt)("p",null,"Supported deck.gl features:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Layers"),(0,l.kt)("li",{parentName:"ul"},"Effects"),(0,l.kt)("li",{parentName:"ul"},"Auto-highlighting"),(0,l.kt)("li",{parentName:"ul"},"Attribute transitions"),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("inlineCode",{parentName:"li"},"onHover")," and ",(0,l.kt)("inlineCode",{parentName:"li"},"onClick")," callbacks"),(0,l.kt)("li",{parentName:"ul"},"Tooltip")),(0,l.kt)("p",null,"Not supported features:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Tilting"),(0,l.kt)("li",{parentName:"ul"},"Multiple views"),(0,l.kt)("li",{parentName:"ul"},"Controller"),(0,l.kt)("li",{parentName:"ul"},"React integration"),(0,l.kt)("li",{parentName:"ul"},"Gesture event callbacks (e.g. ",(0,l.kt)("inlineCode",{parentName:"li"},"onDrag*"),")")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/465a2661.13cb8a68.js b/assets/js/465a2661.13cb8a68.js deleted file mode 100644 index a5a7cf40..00000000 --- a/assets/js/465a2661.13cb8a68.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9304],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),u=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=u(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(n),m=a,h=p["".concat(s,".").concat(m)]||p[m]||d[m]||o;return n?r.createElement(h,i(i({ref:t},c),{},{components:n})):r.createElement(h,i({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:a,i[1]=l;for(var u=2;u{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>d,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var r=n(7462),a=(n(7294),n(3905));const o={},i="D3 Force Layout",l={unversionedId:"modules/react-graph-layers/api-reference/d3-layout",id:"modules/react-graph-layers/api-reference/d3-layout",title:"D3 Force Layout",description:"This layout is an integration between d3-force and react-graph-layers to render the layout in a WebGL context.",source:"@site/../docs/modules/react-graph-layers/api-reference/d3-layout.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/d3-layout",permalink:"/docs/modules/react-graph-layers/api-reference/d3-layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/d3-layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Simple Layout",permalink:"/docs/modules/react-graph-layers/api-reference/simple-layout"},next:{title:"Graph Class",permalink:"/docs/modules/react-graph-layers/api-reference/graph"}},s={},u=[{value:"Configurations",id:"configurations",level:2},{value:"alpha (Number, optional)",id:"alpha-number-optional",level:4},{value:"resumeAlpha (Number, optional)",id:"resumealpha-number-optional",level:4},{value:"nBodyStrength: (Number, optional)",id:"nbodystrength-number-optional",level:4},{value:"nBodyDistanceMin (Number, optional)",id:"nbodydistancemin-number-optional",level:4},{value:"nBodyDistanceMax (Number, optional)",id:"nbodydistancemax-number-optional",level:4},{value:"getCollisionRadius (Number, optional)",id:"getcollisionradius-number-optional",level:4}],c={toc:u},p="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(p,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"d3-force-layout"},"D3 Force Layout"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/layouts/d3.png",height:"400"})),(0,a.kt)("p",null,"This layout is an integration between ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/d3/d3-force"},"d3-force")," and react-graph-layers to render the layout in a WebGL context."),(0,a.kt)("h2",{id:"configurations"},"Configurations"),(0,a.kt)("p",null,"You can set the custom configuration to the d3-force layout directed by passing a configuration object when instantiating the layout object for GraphGL."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"\n")),(0,a.kt)("h4",{id:"alpha-number-optional"},"alpha (Number, optional)"),(0,a.kt)("p",null,"The target alpha of the layout for each iteration. If alpha is specified, sets the current alpha to the specified number in the range ","[0,1]",". The default value is 0.3."),(0,a.kt)("h4",{id:"resumealpha-number-optional"},"resumeAlpha (Number, optional)"),(0,a.kt)("p",null,"The resumeAlpha can be used to \u201creheat\u201d the simulation during interaction, such as when dragging a node, or to resume the simulation after temporarily pausing the layout.\nThe default value is 0.1."),(0,a.kt)("h4",{id:"nbodystrength-number-optional"},"nBodyStrength: (Number, optional)"),(0,a.kt)("p",null,"We use ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/d3/d3-force#many-body"},"many-body")," as the charge force to apply force applies mutually amongst all nodes. It can be used to simulate gravity (attraction) if the ",(0,a.kt)("inlineCode",{parentName:"p"},"nBodyStrength")," is positive, or electrostatic charge (repulsion) if the ",(0,a.kt)("inlineCode",{parentName:"p"},"nBodyStrength")," is negative.\nThe default value is -900."),(0,a.kt)("h4",{id:"nbodydistancemin-number-optional"},"nBodyDistanceMin (Number, optional)"),(0,a.kt)("p",null,"Sets the minimum distance between nodes over which this force is considered. If distance is not 'nBodyDistanceMin', returns the current minimum distance, which defaults to 100."),(0,a.kt)("h4",{id:"nbodydistancemax-number-optional"},"nBodyDistanceMax (Number, optional)"),(0,a.kt)("p",null,"Sets the maximum distance between nodes over which this force is considered. If distance is not 'nBodyDistanceMin', returns the current minimum distance, which defaults to 400."),(0,a.kt)("h4",{id:"getcollisionradius-number-optional"},"getCollisionRadius (Number, optional)"),(0,a.kt)("p",null,"Sets the radius for collision detection. If getCollisionRadius is not specified, it defaults to zero radius for all nodes.\nThe ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/d3/d3-force#collision"},"collision force")," treats nodes as circles with a given radius, rather than points, and prevents nodes from overlapping."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/465a2661.6baebb25.js b/assets/js/465a2661.6baebb25.js new file mode 100644 index 00000000..975511fb --- /dev/null +++ b/assets/js/465a2661.6baebb25.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9304],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>h});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),u=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},c=function(e){var t=u(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(n),m=a,h=p["".concat(s,".").concat(m)]||p[m]||d[m]||o;return n?r.createElement(h,i(i({ref:t},c),{},{components:n})):r.createElement(h,i({ref:t},c))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:a,i[1]=l;for(var u=2;u{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>d,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var r=n(7462),a=(n(7294),n(3905));const o={},i="D3 Force Layout",l={unversionedId:"modules/react-graph-layers/api-reference/d3-layout",id:"modules/react-graph-layers/api-reference/d3-layout",title:"D3 Force Layout",description:"This layout is an integration between d3-force and react-graph-layers to render the layout in a WebGL context.",source:"@site/../docs/modules/react-graph-layers/api-reference/d3-layout.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/d3-layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/d3-layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Simple Layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout"},next:{title:"Graph Class",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph"}},s={},u=[{value:"Configurations",id:"configurations",level:2},{value:"alpha (Number, optional)",id:"alpha-number-optional",level:4},{value:"resumeAlpha (Number, optional)",id:"resumealpha-number-optional",level:4},{value:"nBodyStrength: (Number, optional)",id:"nbodystrength-number-optional",level:4},{value:"nBodyDistanceMin (Number, optional)",id:"nbodydistancemin-number-optional",level:4},{value:"nBodyDistanceMax (Number, optional)",id:"nbodydistancemax-number-optional",level:4},{value:"getCollisionRadius (Number, optional)",id:"getcollisionradius-number-optional",level:4}],c={toc:u},p="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(p,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"d3-force-layout"},"D3 Force Layout"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/layouts/d3.png",height:"400"})),(0,a.kt)("p",null,"This layout is an integration between ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/d3/d3-force"},"d3-force")," and react-graph-layers to render the layout in a WebGL context."),(0,a.kt)("h2",{id:"configurations"},"Configurations"),(0,a.kt)("p",null,"You can set the custom configuration to the d3-force layout directed by passing a configuration object when instantiating the layout object for GraphGL."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"\n")),(0,a.kt)("h4",{id:"alpha-number-optional"},"alpha (Number, optional)"),(0,a.kt)("p",null,"The target alpha of the layout for each iteration. If alpha is specified, sets the current alpha to the specified number in the range ","[0,1]",". The default value is 0.3."),(0,a.kt)("h4",{id:"resumealpha-number-optional"},"resumeAlpha (Number, optional)"),(0,a.kt)("p",null,"The resumeAlpha can be used to \u201creheat\u201d the simulation during interaction, such as when dragging a node, or to resume the simulation after temporarily pausing the layout.\nThe default value is 0.1."),(0,a.kt)("h4",{id:"nbodystrength-number-optional"},"nBodyStrength: (Number, optional)"),(0,a.kt)("p",null,"We use ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/d3/d3-force#many-body"},"many-body")," as the charge force to apply force applies mutually amongst all nodes. It can be used to simulate gravity (attraction) if the ",(0,a.kt)("inlineCode",{parentName:"p"},"nBodyStrength")," is positive, or electrostatic charge (repulsion) if the ",(0,a.kt)("inlineCode",{parentName:"p"},"nBodyStrength")," is negative.\nThe default value is -900."),(0,a.kt)("h4",{id:"nbodydistancemin-number-optional"},"nBodyDistanceMin (Number, optional)"),(0,a.kt)("p",null,"Sets the minimum distance between nodes over which this force is considered. If distance is not 'nBodyDistanceMin', returns the current minimum distance, which defaults to 100."),(0,a.kt)("h4",{id:"nbodydistancemax-number-optional"},"nBodyDistanceMax (Number, optional)"),(0,a.kt)("p",null,"Sets the maximum distance between nodes over which this force is considered. If distance is not 'nBodyDistanceMin', returns the current minimum distance, which defaults to 400."),(0,a.kt)("h4",{id:"getcollisionradius-number-optional"},"getCollisionRadius (Number, optional)"),(0,a.kt)("p",null,"Sets the radius for collision detection. If getCollisionRadius is not specified, it defaults to zero radius for all nodes.\nThe ",(0,a.kt)("a",{parentName:"p",href:"https://github.com/d3/d3-force#collision"},"collision force")," treats nodes as circles with a given radius, rather than points, and prevents nodes from overlapping."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4ff413f9.81af6f9d.js b/assets/js/4ff413f9.6f4b689b.js similarity index 75% rename from assets/js/4ff413f9.81af6f9d.js rename to assets/js/4ff413f9.6f4b689b.js index 5d126bf6..1af66506 100644 --- a/assets/js/4ff413f9.81af6f9d.js +++ b/assets/js/4ff413f9.6f4b689b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6818],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),l=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=l(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},g=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),g=a,f=u["".concat(i,".").concat(g)]||u[g]||d[g]||o;return r?n.createElement(f,c(c({ref:t},p),{},{components:r})):n.createElement(f,c({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,c=new Array(o);c[0]=g;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[u]="string"==typeof e?e:a,c[1]=s;for(var l=2;l{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>c,default:()=>d,frontMatter:()=>o,metadata:()=>s,toc:()=>l});var n=r(7462),a=(r(7294),r(3905));const o={},c=void 0,s={unversionedId:"modules/react-graph-layers/get-started/getting-started",id:"modules/react-graph-layers/get-started/getting-started",title:"getting-started",description:"",source:"@site/../docs/modules/react-graph-layers/get-started/getting-started.md",sourceDirName:"modules/react-graph-layers/get-started",slug:"/modules/react-graph-layers/get-started/getting-started",permalink:"/docs/modules/react-graph-layers/get-started/getting-started",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/get-started/getting-started.md",tags:[],version:"current",frontMatter:{}},i={},l=[],p={toc:l},u="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}))}d.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6818],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),l=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},p=function(e){var t=l(e.components);return n.createElement(i.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},g=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(r),g=a,m=u["".concat(i,".").concat(g)]||u[g]||d[g]||o;return r?n.createElement(m,c(c({ref:t},p),{},{components:r})):n.createElement(m,c({ref:t},p))}));function m(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,c=new Array(o);c[0]=g;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[u]="string"==typeof e?e:a,c[1]=s;for(var l=2;l{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>c,default:()=>d,frontMatter:()=>o,metadata:()=>s,toc:()=>l});var n=r(7462),a=(r(7294),r(3905));const o={},c=void 0,s={unversionedId:"modules/react-graph-layers/get-started/getting-started",id:"modules/react-graph-layers/get-started/getting-started",title:"getting-started",description:"",source:"@site/../docs/modules/react-graph-layers/get-started/getting-started.md",sourceDirName:"modules/react-graph-layers/get-started",slug:"/modules/react-graph-layers/get-started/getting-started",permalink:"/deck.gl-community/docs/modules/react-graph-layers/get-started/getting-started",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/get-started/getting-started.md",tags:[],version:"current",frontMatter:{}},i={},l=[],p={toc:l},u="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/518575c9.32e5a5aa.js b/assets/js/518575c9.32e5a5aa.js deleted file mode 100644 index 4d845ddc..00000000 --- a/assets/js/518575c9.32e5a5aa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8479],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>k});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var d=a.createContext({}),p=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,l=e.originalType,d=e.parentName,s=r(e,["components","mdxType","originalType","parentName"]),u=p(n),m=i,k=u["".concat(d,".").concat(m)]||u[m]||c[m]||l;return n?a.createElement(k,o(o({ref:t},s),{},{components:n})):a.createElement(k,o({ref:t},s))}));function k(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var l=n.length,o=new Array(l);o[0]=m;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r[u]="string"==typeof e?e:i,o[1]=r;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>r,toc:()=>p});var a=n(7462),i=(n(7294),n(3905));const l={},o="EditableGeoJsonLayer",r={unversionedId:"modules/editor-layers/api-reference/editable-geojson-layer",id:"modules/editor-layers/api-reference/editable-geojson-layer",title:"EditableGeoJsonLayer",description:"The Editable GeoJSON layer accepts a GeoJSON FeatureCollection and renders the features as editable polygons, lines, and points.",source:"@site/../docs/modules/editor-layers/api-reference/editable-geojson-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/editable-geojson-layer",permalink:"/docs/modules/editor-layers/api-reference/editable-geojson-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/editable-geojson-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Using Html Overlays",permalink:"/docs/modules/editor-core/get-started/html-overlays"},next:{title:"SelectionLayer",permalink:"/docs/modules/editor-layers/api-reference/selection-layer"}},d={},p=[{value:"Properties",id:"properties",level:2},{value:"data (Object, optional)",id:"data-object-optional",level:4},{value:"mode (Function|Object, optional)",id:"mode-functionobject-optional",level:4},{value:"modeConfig (Object, optional)",id:"modeconfig-object-optional",level:4},{value:"selectedFeatureIndexes (Array, optional)",id:"selectedfeatureindexes-array-optional",level:4},{value:"onEdit (Function, optional)",id:"onedit-function-optional",level:4},{value:"Guide style properties and data getters",id:"guide-style-properties-and-data-getters",level:3},{value:"editHandleType: (String, optional)",id:"edithandletype-string-optional",level:4},{value:"getTentativeLineColor (Array|Function, optional)",id:"gettentativelinecolor-arrayfunction-optional",level:4},{value:"getTentativeFillColor (Array|Function, optional)",id:"gettentativefillcolor-arrayfunction-optional",level:4},{value:"getTentativeLineWidth (Function|Number, optional)",id:"gettentativelinewidth-functionnumber-optional",level:4},{value:"editHandlePointRadiusScale: (Function|Number, optional)",id:"edithandlepointradiusscale-functionnumber-optional",level:4},{value:"editHandlePointOutline: (Boolean|Function, optional)",id:"edithandlepointoutline-booleanfunction-optional",level:4},{value:"editHandlePointStrokeWidth: (Function|Number)",id:"edithandlepointstrokewidth-functionnumber",level:4},{value:"editHandlePointRadiusMinPixels: (Function|Number)",id:"edithandlepointradiusminpixels-functionnumber",level:4},{value:"editHandlePointRadiusMaxPixels: (Function|Number, optional)",id:"edithandlepointradiusmaxpixels-functionnumber-optional",level:4},{value:"getEditHandlePointColor (Array|Function, optional)",id:"getedithandlepointcolor-arrayfunction-optional",level:4},{value:"getEditHandlePointOutlineColor (Array|Function, optional)",id:"getedithandlepointoutlinecolor-arrayfunction-optional",level:4},{value:"getEditHandlePointRadius (Function|Number, optional)",id:"getedithandlepointradius-functionnumber-optional",level:4},{value:"editHandleIconAtlas (String|Texture2D|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Object, optional)",id:"edithandleiconatlas-stringtexture2dimageimagedatahtmlcanvaselementhtmlvideoelementimagebitmapobject-optional",level:4},{value:"editHandleIconMapping (Object|String, optional)",id:"edithandleiconmapping-objectstring-optional",level:4},{value:"editHandleIconSizeScale (Number, optional)",id:"edithandleiconsizescale-number-optional",level:4},{value:"getEditHandleIcon (Function, optional)",id:"getedithandleicon-function-optional",level:4},{value:"getEditHandleIconSize (Function|Number, optional)",id:"getedithandleiconsize-functionnumber-optional",level:4},{value:"getEditHandleIconColor (Function|Array, optional)",id:"getedithandleiconcolor-functionarray-optional",level:4},{value:"getEditHandleIconAngle (Function|Number, optional)",id:"getedithandleiconangle-functionnumber-optional",level:4},{value:"billboard (Boolean, optional)",id:"billboard-boolean-optional",level:4},{value:"Example",id:"example",level:5},{value:"pickable (Boolean, optional)",id:"pickable-boolean-optional",level:4},{value:"pickingRadius (Number, optional)",id:"pickingradius-number-optional",level:4},{value:"pickingDepth (Number, optional)",id:"pickingdepth-number-optional",level:4},{value:"pickingLineWidthExtraPixels (Number, optional)",id:"pickinglinewidthextrapixels-number-optional",level:4},{value:"Sub Layers",id:"sub-layers",level:3},{value:"geojson Sub Layer",id:"geojson-sub-layer",level:4},{value:"guides Sub Layer",id:"guides-sub-layer",level:4},{value:"Tentative Features",id:"tentative-features",level:5},{value:"HotKey Support",id:"hotkey-support",level:5},{value:"Edit Handles",id:"edit-handles",level:5},{value:"Example",id:"example-1",level:5},{value:"tooltips Sub Layer",id:"tooltips-sub-layer",level:4},{value:"Using without React",id:"using-without-react",level:3}],s={toc:p},u="wrapper";function c(e){let{components:t,...n}=e;return(0,i.kt)(u,(0,a.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"editablegeojsonlayer"},"EditableGeoJsonLayer"),(0,i.kt)("p",null,"The Editable GeoJSON layer accepts a ",(0,i.kt)("a",{parentName:"p",href:"http://geojson.org"},"GeoJSON")," ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection")," and renders the features as editable polygons, lines, and points."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import DeckGL from '@deck.gl/react';\nimport { EditableGeoJsonLayer, DrawPolygonMode } from 'nebula.gl';\n\nconst myFeatureCollection = {\n type: 'FeatureCollection',\n features: [\n /* insert features here */\n ],\n};\n\nconst selectedFeatureIndexes = [];\n\nclass App extends React.Component {\n state = {\n data: myFeatureCollection,\n };\n\n render() {\n const layer = new EditableGeoJsonLayer({\n id: 'geojson-layer',\n data: this.state.data,\n mode: DrawPolygonMode,\n selectedFeatureIndexes,\n\n onEdit: ({ updatedData }) => {\n this.setState({\n data: updatedData,\n });\n },\n });\n\n return ;\n }\n}\n")),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("p",null,"Inherits all ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/layer"},"deck.gl's Base Layer")," properties."),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeoJSONLayer")," is a ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/composite-layer"},"CompositeLayer")," of ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"GeoJSONLayer"),", ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"ScatterPlotLayer"),", and ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"IconLayer"),". Many of the properties and data getters of those layers are aliased."),(0,i.kt)("h4",{id:"data-object-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"data")," (Object, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"null"))),(0,i.kt)("p",null,"A ",(0,i.kt)("a",{parentName:"p",href:"http://geojson.org"},"GeoJSON")," ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection")," object. The following types of geometry are supported:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Point")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"LineString")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"MultiPoint")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"MultiLineString")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"MultiPolygon")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"GeometryCollection")," is not supported.")),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Note: passing a single ",(0,i.kt)("inlineCode",{parentName:"em"},"Feature")," is not supported. However, you can pass a ",(0,i.kt)("inlineCode",{parentName:"em"},"FeatureCollection")," containing a single ",(0,i.kt)("inlineCode",{parentName:"em"},"Feature")," and pass ",(0,i.kt)("inlineCode",{parentName:"em"},"selectedFeatureIndexes: [0]")," to achieve the same result.")),(0,i.kt)("h4",{id:"mode-functionobject-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"mode")," (Function|Object, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"DrawPolygonMode"))),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"mode")," property defines the mode used to handle user interaction events (e.g. pointer events) in order to accomplish edits. This can either be a constructor for an ",(0,i.kt)("inlineCode",{parentName:"p"},"EditMode")," or an instance of ",(0,i.kt)("inlineCode",{parentName:"p"},"EditMode"),"."),(0,i.kt)("p",null,"There are a extensive number of modes that come out-of-the-box with nebula.gl. "),(0,i.kt)("h4",{id:"modeconfig-object-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"modeConfig")," (Object, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"null"))),(0,i.kt)("p",null,"An arbitrary object used to further configure the current mode."),(0,i.kt)("p",null,"Snapping-related ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"enableSnapping")," (Boolean, optional) - Enables snapping for modes that support snapping such as translate mode."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"additionalSnapTargets")," (Object[], optional) - An array of GeoJSON Features that can be snapped to. This property only needs to be specified if you want to snap to features in other deck.gl layers. All features in this ",(0,i.kt)("inlineCode",{parentName:"li"},"EditableGeoJsonLayer")," will be snap targets.")),(0,i.kt)("h4",{id:"selectedfeatureindexes-array-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"selectedFeatureIndexes")," (Array, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[]"))),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"selectedFeatureIndexes")," property distinguishes which features to treat as selected. This property is required when using the ",(0,i.kt)("inlineCode",{parentName:"p"},"DrawPolygonMode")," edit mode."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Features are identified by their index in the collection.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Selection of a feature causes style accessors to render a different style, defined in function such as ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineColor")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"getFillColor"),".")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Selected features in mode ",(0,i.kt)("inlineCode",{parentName:"p"},"modify")," will render edit handles. Only one feature may be selected while in mode ",(0,i.kt)("inlineCode",{parentName:"p"},"drawLineString")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"drawPolygon")," to draw a feature."))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Note: make sure to pass in the same array instance on each render if you are not changing selection. Otherwise, nebula.gl may clear state on every render (e.g. may clear a drawing in progress if the viewport changes).")),(0,i.kt)("h4",{id:"onedit-function-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"onEdit")," (Function, optional)"),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," event is the core event provided by this layer and must be handled in order to accept and render edits. The ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," argument includes the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"updatedData")," (Object): A new ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection")," with the edit applied."),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"To accept the edit as is, supply this object into the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," prop on the next render cycle (e.g. by calling React's ",(0,i.kt)("inlineCode",{parentName:"p"},"setState")," function)")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"To reject the edit, do nothing")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"You may also supply a modified version of this object into the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," prop on the next render cycle (e.g. if you have your own snapping logic).")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"editType")," (String): The type of edit requested. One of:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"updateTentativeFeature"),": Fired whenever a feature is near completion, and user continued dragging the cursor mid-editing. It fires on pointer move for ",(0,i.kt)("inlineCode",{parentName:"p"},"DrawPointMode"),". The tentative feature created is different for each mode.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"movePosition"),": A position was moved.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"addPosition"),": A position was added (either at the beginning, middle, or end of a feature's coordinates).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"removePosition"),": A position was removed. Note: it may result in multiple positions being removed in order to maintain valid GeoJSON (e.g. removing a point from a triangular hole will remove the hole entirely).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"addFeature"),": A new feature was added. Its index is reflected in ",(0,i.kt)("inlineCode",{parentName:"p"},"featureIndexes"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"cancelFeature"),": The new drawing was cancelled.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"finishMovePosition"),": A position finished moving (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"scaling"),": A feature is being scaled.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"scaled"),": A feature finished scaling (increase/decrease) (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"rotating"),": A feature is being rotated.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"rotated"),": A feature finished rotating (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"translating"),": A feature is being translated.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"translated"),": A feature finished translating (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"startExtruding"),": An edge started extruding (e.g. user started dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"extruding"),": An edge is extruding.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"extruded"),": An edge finished extruding (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"split"),": A feature finished splitting."))))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"featureIndexes")," (Array","<","number",">","): The indexes of the edited/added features.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," (Object): ",(0,i.kt)("inlineCode",{parentName:"p"},"null")," or an object containing additional context about the edit. This is populated by the active mode."))),(0,i.kt)("h3",{id:"guide-style-properties-and-data-getters"},"Guide style properties and data getters"),(0,i.kt)("h4",{id:"edithandletype-string-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleType"),": (String, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"point"))),(0,i.kt)("p",null,"Edit handles are points that are part of an existing geometry used for manipulation or snapping."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"existing")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-source")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-target")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"intermediate")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"existing")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap"))),(0,i.kt)("p",null,"See the 'Edit Handles' section below."),(0,i.kt)("h4",{id:"gettentativelinecolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getTentativeLineColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The line color for features that are being edited and are not yet finalized. See ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineColor"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"DeckGl GeoJSONLayer"),"."),(0,i.kt)("h4",{id:"gettentativefillcolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getTentativeFillColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The fill color for features that are being edited and are not yet finalized. See ",(0,i.kt)("inlineCode",{parentName:"p"},"getFillColor"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"DeckGl GeoJSONLayer"),"."),(0,i.kt)("h4",{id:"gettentativelinewidth-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getTentativeLineWidth")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"3"))),(0,i.kt)("p",null,"The line width for features that are being edited and are not yet finalized, in units specified by lineWidthUnits (default meters). See ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineWidth"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"DeckGl GeoJSONLayer"),"."),(0,i.kt)("p",null,"If a number is provided, it is used as the outline width for all objects.\nIf a function is provided, it is called on each object to retrieve its outline width.\nIf not provided, it falls back to strokeWidth."),(0,i.kt)("h4",{id:"edithandlepointradiusscale-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointRadiusScale"),": (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"1"))),(0,i.kt)("p",null,"A global radius multiplier for all edit handle points. See ",(0,i.kt)("inlineCode",{parentName:"p"},"radiusScale")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"edithandlepointoutline-booleanfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointOutline"),": (Boolean|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"true"))),(0,i.kt)("p",null,"Only draw outline of points. It falls back to outline if not provided. See ",(0,i.kt)("inlineCode",{parentName:"p"},"stroke")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"edithandlepointstrokewidth-functionnumber"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointStrokeWidth"),": (Function|Number)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"2"))),(0,i.kt)("h4",{id:"edithandlepointradiusminpixels-functionnumber"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointRadiusMinPixels"),": (Function|Number)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"4"))),(0,i.kt)("p",null,"The minimum radius of the edit handle in pixels. This prop can be used to prevent the circle from getting too small when zoomed out. See ",(0,i.kt)("inlineCode",{parentName:"p"},"radiusMinPixels")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"edithandlepointradiusmaxpixels-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointRadiusMaxPixels"),": (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"8"))),(0,i.kt)("p",null,"The maximum radius of the edit handle in pixels. This prop can be used to prevent the circle from getting too big when zoomed in. See ",(0,i.kt)("inlineCode",{parentName:"p"},"radiusMaxPixels")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"getedithandlepointcolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandlePointColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The rgba color is in the format of ",(0,i.kt)("inlineCode",{parentName:"p"},"[r, g, b, [a]]"),". Each channel is a number between 0-255 and ",(0,i.kt)("inlineCode",{parentName:"p"},"a")," is 255 if not supplied."),(0,i.kt)("p",null,"If an array is provided, it is used as the filled color for all objects."),(0,i.kt)("p",null,"If a function is provided, it is called on each object to retrieve its color."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getFillColor")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"getedithandlepointoutlinecolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandlePointOutlineColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The outline color of the edit handle point. See in DeckGl"),(0,i.kt)("p",null,"The rgba color is in the format of ",(0,i.kt)("inlineCode",{parentName:"p"},"[r, g, b, [a]]"),". Each channel is a number between 0-255 and ",(0,i.kt)("inlineCode",{parentName:"p"},"a")," is 255 if not supplied."),(0,i.kt)("p",null,"If an array is provided, it is used as the outline color for all objects."),(0,i.kt)("p",null,"If a function is provided, it is called on each object to retrieve its color."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineColor")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"getedithandlepointradius-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandlePointRadius")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"1"))),(0,i.kt)("p",null,"The radius of each edit handle, in units specified by radiusUnits (default ",(0,i.kt)("inlineCode",{parentName:"p"},"meters"),")."),(0,i.kt)("p",null,"If a number is provided, it is used as the radius for all objects."),(0,i.kt)("p",null,"If a function is provided, it is called on each object to retrieve its radius."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getRadius")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("hr",null),(0,i.kt)("h4",{id:"edithandleiconatlas-stringtexture2dimageimagedatahtmlcanvaselementhtmlvideoelementimagebitmapobject-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleIconAtlas")," (String|Texture2D|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Object, optional)"),(0,i.kt)("p",null,"Default: ",(0,i.kt)("inlineCode",{parentName:"p"},"null")),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"iconAtlas"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"edithandleiconmapping-objectstring-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleIconMapping")," (Object|String, optional)"),(0,i.kt)("p",null,"The atlas image."),(0,i.kt)("p",null,"If a string is supplied, it is interpreted as a URL or a Data URL.\nOne of the valid pixel sources for WebGL texture\nA luma.gl Texture2D instance\nA plain object that can be passed to the Texture2D constructor, e.g. ",(0,i.kt)("inlineCode",{parentName:"p"},"{width: , height: , data: }"),". Note that whenever this object shallowly changes, a new texture will be created.\nThe image data will be converted to a Texture2D object. See textureParameters prop for advanced customization."),(0,i.kt)("p",null,"If you go with pre-packed strategy, this prop is required."),(0,i.kt)("p",null,"If you choose to use auto packing, this prop should be left empty."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"iconMapping")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"edithandleiconsizescale-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleIconSizeScale")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"1"))),(0,i.kt)("p",null,"Edit handle icon size multiplier."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"sizeScale")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleicon-function-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIcon")," (Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"d => d.icon"))),(0,i.kt)("p",null,"Method called to retrieve the icon name of each edit handle, returns string or object."),(0,i.kt)("p",null,"If you go with pre-packed strategy, then getIcon should return a string representing name of the icon, used to retrieve icon definition from given iconMapping."),(0,i.kt)("p",null,"If you choose to use auto packing, then getIcon should return an object which contains the following properties."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"url")," (String, required): url to fetch the icon"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"height")," (Number, required): height of icon"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"width")," (Number, required): width of icon"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"id"),": (String, optional): unique identifier of the icon, fall back to url if not specified"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"anchorX"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"anchorY"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"mask")," are the same as mentioned in iconMapping")),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"IconLayer")," use ",(0,i.kt)("inlineCode",{parentName:"p"},"id")," (fallback to url) to dedupe icons. If for the same icon identifier, getIcon returns different ",(0,i.kt)("inlineCode",{parentName:"p"},"width")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"height"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"IconLayer")," will only apply the first occurrence and ignore the rest of them."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getIcon")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleiconsize-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIconSize")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"10"))),(0,i.kt)("p",null,"The height of each edit handle icon, in units specified by ",(0,i.kt)("inlineCode",{parentName:"p"},"sizeUnits")," (default pixels)."),(0,i.kt)("p",null,"If a number is provided, it is used as the size for all objects.\nIf a function is provided, it is called on each object to retrieve its size."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getSize")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleiconcolor-functionarray-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIconColor")," (Function|Array, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The rgba color is in the format of ",(0,i.kt)("inlineCode",{parentName:"p"},"[r, g, b, [a]]"),". Each channel is a number between 0-255 and ",(0,i.kt)("inlineCode",{parentName:"p"},"a")," is 255 if not supplied."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"If an array is provided, it is used as the color for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color."),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"mask")," = false, only the alpha component will be used to control the opacity of the icon.")),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getColor")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleiconangle-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIconAngle")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"0"))),(0,i.kt)("p",null,"The rotating angle of each edit handle icon, in degrees."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the angle for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its angle.")),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getAngle")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"billboard-boolean-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"billboard")," (Boolean, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"true"))),(0,i.kt)("p",null,"If on, the edit handle icon always faces camera. Otherwise the icon faces up (z)"),(0,i.kt)("h5",{id:"example"},"Example"),(0,i.kt)("p",null,"Consider the user removed the third position from a ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon"),"'s first ring, and that ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," was the fourth feature in the ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection"),". The ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," argument would look like:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"{\n updatedData: {...},\n editType: 'removePosition',\n featureIndexes: [3],\n editContext: {\n positionIndexes: [1, 2],\n position: null\n }\n}\n")),(0,i.kt)("h4",{id:"pickable-boolean-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickable")," (Boolean, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"true"))),(0,i.kt)("p",null,"Defaulted to ",(0,i.kt)("inlineCode",{parentName:"p"},"true")," for interactivity."),(0,i.kt)("h4",{id:"pickingradius-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickingRadius")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"10"))),(0,i.kt)("p",null,"Number of pixels around the mouse cursor used for picking. This value determines, for example, what feature is considered to be clicked and what is close enough to be snapped to."),(0,i.kt)("h4",{id:"pickingdepth-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickingDepth")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"5"))),(0,i.kt)("p",null,"Number of layers of overlapping features that will be picked. Useful in cases where features overlap."),(0,i.kt)("h4",{id:"pickinglinewidthextrapixels-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickingLineWidthExtraPixels")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"0"))),(0,i.kt)("p",null,"Additional line width in pixels used for picking. Can be useful when ",(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeojsonLayer")," is over a deck.gl layer and precise picking is problematic, and when usage of ",(0,i.kt)("inlineCode",{parentName:"p"},"pickingDepth")," introduces performance issues."),(0,i.kt)("h3",{id:"sub-layers"},"Sub Layers"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeoJsonLayer")," renders the following sub-layers:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"geojson"),": a ",(0,i.kt)("a",{parentName:"li",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"GeoJsonLayer")," that renders the GeoJSON features passed into the ",(0,i.kt)("inlineCode",{parentName:"li"},"data")," property."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"guides"),": a ",(0,i.kt)("a",{parentName:"li",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"GeoJsonLayer")," that renders GeoJSON features that aid in editing."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"tooltips"),": a ",(0,i.kt)("a",{parentName:"li",href:"https://deck.gl/docs/modules/editor-layers/api-reference/text-layer"},"TextLayer")," that renders tooltips used in some editing modes.")),(0,i.kt)("p",null,"The styling and functionality of ",(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeoJsonLayer")," can be customized by providing the ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/composite-layer#_sublayerprops"},"_","subLayerProps")," property. For example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"new EditableGeoJsonLayer({\n // ...\n _subLayerProps: {\n geojson: {\n getFillColor: (feature) => getFillColorForFeature(feature),\n getLineColor: (feature) => getLineColorForFeature(feature),\n },\n },\n});\n")),(0,i.kt)("h4",{id:"geojson-sub-layer"},(0,i.kt)("inlineCode",{parentName:"h4"},"geojson")," Sub Layer"),(0,i.kt)("p",null,"The features being edited are rendered in the ",(0,i.kt)("inlineCode",{parentName:"p"},"geojson")," sub layer whether they are selected or not. If you want to style selected features differently than unselected features, you can accomplish it like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"const [data] = React.useState(/* some GeoJSON */);\nconst [selectedFeatureIndexes] = React.useState(/* array of selected features */);\n\nnew EditableGeoJsonLayer({\n // ...\n data,\n selectedFeatureIndexes,\n _subLayerProps: {\n geojson: {\n getFillColor: (feature) => {\n if (selectedFeatureIndexes.some((i) => data.features[i] === feature)) {\n return SELECTED_FILL_COLOR;\n } else {\n return UNSELECTED_FILL_COLOR;\n }\n },\n },\n },\n});\n")),(0,i.kt)("h4",{id:"guides-sub-layer"},(0,i.kt)("inlineCode",{parentName:"h4"},"guides")," Sub Layer"),(0,i.kt)("p",null,'There are two types of "guides" rendered in the ',(0,i.kt)("inlineCode",{parentName:"p"},"guides")," sub layer differentiated by ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.guideType")," of each feature."),(0,i.kt)("h5",{id:"tentative-features"},"Tentative Features"),(0,i.kt)("p",null,"While creating a new feature in any of the ",(0,i.kt)("inlineCode",{parentName:"p"},"draw"),' modes, portion of a feature which has not been "committed" yet can hold its own props. For example, in ',(0,i.kt)("inlineCode",{parentName:"p"},"drawLineString")," mode, the tentative feature is the last line segment moving under the mouse. For polygons and ellipses, this would be the whole feature during drawing. A tentative feature can be identified by checking if ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.guideType === 'tentative'"),"."),(0,i.kt)("h5",{id:"hotkey-support"},"HotKey Support"),(0,i.kt)("p",null,"Only ",(0,i.kt)("inlineCode",{parentName:"p"},"Escape")," hotkey is currently supported to drop the Tentative feature entirely. However, if the feature is already committed, the ",(0,i.kt)("inlineCode",{parentName:"p"},"Escape")," will do nothing. For example, when a point is drawn, it is finalized and no in drawing status."),(0,i.kt)("h5",{id:"edit-handles"},"Edit Handles"),(0,i.kt)("p",null,"Edit handles are the points rendered on a feature to indicate interactive capabilities (e.g. vertices that can be moved). Edit Handles can be identified by checking if ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.guideType === 'editHandle'"),"."),(0,i.kt)("p",null,"There are also different types of edit handles differentiated by ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.editHandleType"),":"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"existing"),": this is an edit handle rendered at an existing position of a feature"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"intermediate"),": this is an edit handle rendered between existing positions (e.g. to add new positions)"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-source"),": this is an edit handle being moved that can snap to a ",(0,i.kt)("inlineCode",{parentName:"li"},"snap-target")," edit handle"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-target"),": this is an edit handle that will be snapped to if the pointer moves close enough")),(0,i.kt)("h5",{id:"example-1"},"Example"),(0,i.kt)("p",null,"This shows how you can override how guides are rendered:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"new EditableGeoJsonLayer({\n // ...\n _subLayerProps: {\n guides: {\n getFillColor: (guide) => {\n if (guide.properties.guideType === 'tentative') {\n return TENTATIVE_FILL_COLOR;\n } else {\n return EDIT_HANDLE_FILL_COLOR;\n }\n },\n },\n },\n});\n")),(0,i.kt)("h4",{id:"tooltips-sub-layer"},(0,i.kt)("inlineCode",{parentName:"h4"},"tooltips")," Sub Layer"),(0,i.kt)("p",null,"Some modes will render tooltips. For example, the measure modes. These modes will render text in the ",(0,i.kt)("inlineCode",{parentName:"p"},"tooltips")," sub layer."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"new EditableGeoJsonLayer({\n // ...\n _subLayerProps: {\n tooltips: {\n getSize: 32,\n },\n },\n});\n")),(0,i.kt)("h3",{id:"using-without-react"},"Using without React"),(0,i.kt)("p",null,"It is possible to use EditableGeoJsonLayer without react. Here's a working CodeSandbox:"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs"},"https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs")),(0,i.kt)("p",null,"Credit: ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/mogmog"},"Graham Bates")," and ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/andybak"},"Andy Baker")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/518575c9.f4943f89.js b/assets/js/518575c9.f4943f89.js new file mode 100644 index 00000000..a78cd5c0 --- /dev/null +++ b/assets/js/518575c9.f4943f89.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8479],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>k});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var d=a.createContext({}),p=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,l=e.originalType,d=e.parentName,s=r(e,["components","mdxType","originalType","parentName"]),u=p(n),m=i,k=u["".concat(d,".").concat(m)]||u[m]||c[m]||l;return n?a.createElement(k,o(o({ref:t},s),{},{components:n})):a.createElement(k,o({ref:t},s))}));function k(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var l=n.length,o=new Array(l);o[0]=m;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r[u]="string"==typeof e?e:i,o[1]=r;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>r,toc:()=>p});var a=n(7462),i=(n(7294),n(3905));const l={},o="EditableGeoJsonLayer",r={unversionedId:"modules/editor-layers/api-reference/editable-geojson-layer",id:"modules/editor-layers/api-reference/editable-geojson-layer",title:"EditableGeoJsonLayer",description:"The Editable GeoJSON layer accepts a GeoJSON FeatureCollection and renders the features as editable polygons, lines, and points.",source:"@site/../docs/modules/editor-layers/api-reference/editable-geojson-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/editable-geojson-layer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/editable-geojson-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Using Html Overlays",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/html-overlays"},next:{title:"SelectionLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer"}},d={},p=[{value:"Properties",id:"properties",level:2},{value:"data (Object, optional)",id:"data-object-optional",level:4},{value:"mode (Function|Object, optional)",id:"mode-functionobject-optional",level:4},{value:"modeConfig (Object, optional)",id:"modeconfig-object-optional",level:4},{value:"selectedFeatureIndexes (Array, optional)",id:"selectedfeatureindexes-array-optional",level:4},{value:"onEdit (Function, optional)",id:"onedit-function-optional",level:4},{value:"Guide style properties and data getters",id:"guide-style-properties-and-data-getters",level:3},{value:"editHandleType: (String, optional)",id:"edithandletype-string-optional",level:4},{value:"getTentativeLineColor (Array|Function, optional)",id:"gettentativelinecolor-arrayfunction-optional",level:4},{value:"getTentativeFillColor (Array|Function, optional)",id:"gettentativefillcolor-arrayfunction-optional",level:4},{value:"getTentativeLineWidth (Function|Number, optional)",id:"gettentativelinewidth-functionnumber-optional",level:4},{value:"editHandlePointRadiusScale: (Function|Number, optional)",id:"edithandlepointradiusscale-functionnumber-optional",level:4},{value:"editHandlePointOutline: (Boolean|Function, optional)",id:"edithandlepointoutline-booleanfunction-optional",level:4},{value:"editHandlePointStrokeWidth: (Function|Number)",id:"edithandlepointstrokewidth-functionnumber",level:4},{value:"editHandlePointRadiusMinPixels: (Function|Number)",id:"edithandlepointradiusminpixels-functionnumber",level:4},{value:"editHandlePointRadiusMaxPixels: (Function|Number, optional)",id:"edithandlepointradiusmaxpixels-functionnumber-optional",level:4},{value:"getEditHandlePointColor (Array|Function, optional)",id:"getedithandlepointcolor-arrayfunction-optional",level:4},{value:"getEditHandlePointOutlineColor (Array|Function, optional)",id:"getedithandlepointoutlinecolor-arrayfunction-optional",level:4},{value:"getEditHandlePointRadius (Function|Number, optional)",id:"getedithandlepointradius-functionnumber-optional",level:4},{value:"editHandleIconAtlas (String|Texture2D|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Object, optional)",id:"edithandleiconatlas-stringtexture2dimageimagedatahtmlcanvaselementhtmlvideoelementimagebitmapobject-optional",level:4},{value:"editHandleIconMapping (Object|String, optional)",id:"edithandleiconmapping-objectstring-optional",level:4},{value:"editHandleIconSizeScale (Number, optional)",id:"edithandleiconsizescale-number-optional",level:4},{value:"getEditHandleIcon (Function, optional)",id:"getedithandleicon-function-optional",level:4},{value:"getEditHandleIconSize (Function|Number, optional)",id:"getedithandleiconsize-functionnumber-optional",level:4},{value:"getEditHandleIconColor (Function|Array, optional)",id:"getedithandleiconcolor-functionarray-optional",level:4},{value:"getEditHandleIconAngle (Function|Number, optional)",id:"getedithandleiconangle-functionnumber-optional",level:4},{value:"billboard (Boolean, optional)",id:"billboard-boolean-optional",level:4},{value:"Example",id:"example",level:5},{value:"pickable (Boolean, optional)",id:"pickable-boolean-optional",level:4},{value:"pickingRadius (Number, optional)",id:"pickingradius-number-optional",level:4},{value:"pickingDepth (Number, optional)",id:"pickingdepth-number-optional",level:4},{value:"pickingLineWidthExtraPixels (Number, optional)",id:"pickinglinewidthextrapixels-number-optional",level:4},{value:"Sub Layers",id:"sub-layers",level:3},{value:"geojson Sub Layer",id:"geojson-sub-layer",level:4},{value:"guides Sub Layer",id:"guides-sub-layer",level:4},{value:"Tentative Features",id:"tentative-features",level:5},{value:"HotKey Support",id:"hotkey-support",level:5},{value:"Edit Handles",id:"edit-handles",level:5},{value:"Example",id:"example-1",level:5},{value:"tooltips Sub Layer",id:"tooltips-sub-layer",level:4},{value:"Using without React",id:"using-without-react",level:3}],s={toc:p},u="wrapper";function c(e){let{components:t,...n}=e;return(0,i.kt)(u,(0,a.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"editablegeojsonlayer"},"EditableGeoJsonLayer"),(0,i.kt)("p",null,"The Editable GeoJSON layer accepts a ",(0,i.kt)("a",{parentName:"p",href:"http://geojson.org"},"GeoJSON")," ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection")," and renders the features as editable polygons, lines, and points."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import DeckGL from '@deck.gl/react';\nimport { EditableGeoJsonLayer, DrawPolygonMode } from 'nebula.gl';\n\nconst myFeatureCollection = {\n type: 'FeatureCollection',\n features: [\n /* insert features here */\n ],\n};\n\nconst selectedFeatureIndexes = [];\n\nclass App extends React.Component {\n state = {\n data: myFeatureCollection,\n };\n\n render() {\n const layer = new EditableGeoJsonLayer({\n id: 'geojson-layer',\n data: this.state.data,\n mode: DrawPolygonMode,\n selectedFeatureIndexes,\n\n onEdit: ({ updatedData }) => {\n this.setState({\n data: updatedData,\n });\n },\n });\n\n return ;\n }\n}\n")),(0,i.kt)("h2",{id:"properties"},"Properties"),(0,i.kt)("p",null,"Inherits all ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/layer"},"deck.gl's Base Layer")," properties."),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeoJSONLayer")," is a ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/composite-layer"},"CompositeLayer")," of ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"GeoJSONLayer"),", ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"ScatterPlotLayer"),", and ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"IconLayer"),". Many of the properties and data getters of those layers are aliased."),(0,i.kt)("h4",{id:"data-object-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"data")," (Object, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"null"))),(0,i.kt)("p",null,"A ",(0,i.kt)("a",{parentName:"p",href:"http://geojson.org"},"GeoJSON")," ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection")," object. The following types of geometry are supported:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Point")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"LineString")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"MultiPoint")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"MultiLineString")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"MultiPolygon")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"GeometryCollection")," is not supported.")),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Note: passing a single ",(0,i.kt)("inlineCode",{parentName:"em"},"Feature")," is not supported. However, you can pass a ",(0,i.kt)("inlineCode",{parentName:"em"},"FeatureCollection")," containing a single ",(0,i.kt)("inlineCode",{parentName:"em"},"Feature")," and pass ",(0,i.kt)("inlineCode",{parentName:"em"},"selectedFeatureIndexes: [0]")," to achieve the same result.")),(0,i.kt)("h4",{id:"mode-functionobject-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"mode")," (Function|Object, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"DrawPolygonMode"))),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"mode")," property defines the mode used to handle user interaction events (e.g. pointer events) in order to accomplish edits. This can either be a constructor for an ",(0,i.kt)("inlineCode",{parentName:"p"},"EditMode")," or an instance of ",(0,i.kt)("inlineCode",{parentName:"p"},"EditMode"),"."),(0,i.kt)("p",null,"There are a extensive number of modes that come out-of-the-box with nebula.gl. "),(0,i.kt)("h4",{id:"modeconfig-object-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"modeConfig")," (Object, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"null"))),(0,i.kt)("p",null,"An arbitrary object used to further configure the current mode."),(0,i.kt)("p",null,"Snapping-related ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"enableSnapping")," (Boolean, optional) - Enables snapping for modes that support snapping such as translate mode."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"additionalSnapTargets")," (Object[], optional) - An array of GeoJSON Features that can be snapped to. This property only needs to be specified if you want to snap to features in other deck.gl layers. All features in this ",(0,i.kt)("inlineCode",{parentName:"li"},"EditableGeoJsonLayer")," will be snap targets.")),(0,i.kt)("h4",{id:"selectedfeatureindexes-array-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"selectedFeatureIndexes")," (Array, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[]"))),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"selectedFeatureIndexes")," property distinguishes which features to treat as selected. This property is required when using the ",(0,i.kt)("inlineCode",{parentName:"p"},"DrawPolygonMode")," edit mode."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Features are identified by their index in the collection.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Selection of a feature causes style accessors to render a different style, defined in function such as ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineColor")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"getFillColor"),".")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Selected features in mode ",(0,i.kt)("inlineCode",{parentName:"p"},"modify")," will render edit handles. Only one feature may be selected while in mode ",(0,i.kt)("inlineCode",{parentName:"p"},"drawLineString")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"drawPolygon")," to draw a feature."))),(0,i.kt)("p",null,(0,i.kt)("em",{parentName:"p"},"Note: make sure to pass in the same array instance on each render if you are not changing selection. Otherwise, nebula.gl may clear state on every render (e.g. may clear a drawing in progress if the viewport changes).")),(0,i.kt)("h4",{id:"onedit-function-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"onEdit")," (Function, optional)"),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," event is the core event provided by this layer and must be handled in order to accept and render edits. The ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," argument includes the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"updatedData")," (Object): A new ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection")," with the edit applied."),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"To accept the edit as is, supply this object into the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," prop on the next render cycle (e.g. by calling React's ",(0,i.kt)("inlineCode",{parentName:"p"},"setState")," function)")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"To reject the edit, do nothing")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"You may also supply a modified version of this object into the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," prop on the next render cycle (e.g. if you have your own snapping logic).")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"editType")," (String): The type of edit requested. One of:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"updateTentativeFeature"),": Fired whenever a feature is near completion, and user continued dragging the cursor mid-editing. It fires on pointer move for ",(0,i.kt)("inlineCode",{parentName:"p"},"DrawPointMode"),". The tentative feature created is different for each mode.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"movePosition"),": A position was moved.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"addPosition"),": A position was added (either at the beginning, middle, or end of a feature's coordinates).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"removePosition"),": A position was removed. Note: it may result in multiple positions being removed in order to maintain valid GeoJSON (e.g. removing a point from a triangular hole will remove the hole entirely).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"addFeature"),": A new feature was added. Its index is reflected in ",(0,i.kt)("inlineCode",{parentName:"p"},"featureIndexes"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"cancelFeature"),": The new drawing was cancelled.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"finishMovePosition"),": A position finished moving (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"scaling"),": A feature is being scaled.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"scaled"),": A feature finished scaling (increase/decrease) (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"rotating"),": A feature is being rotated.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"rotated"),": A feature finished rotating (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"translating"),": A feature is being translated.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"translated"),": A feature finished translating (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"startExtruding"),": An edge started extruding (e.g. user started dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"extruding"),": An edge is extruding.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"extruded"),": An edge finished extruding (e.g. user finished dragging).")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"split"),": A feature finished splitting."))))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"featureIndexes")," (Array","<","number",">","): The indexes of the edited/added features.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," (Object): ",(0,i.kt)("inlineCode",{parentName:"p"},"null")," or an object containing additional context about the edit. This is populated by the active mode."))),(0,i.kt)("h3",{id:"guide-style-properties-and-data-getters"},"Guide style properties and data getters"),(0,i.kt)("h4",{id:"edithandletype-string-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleType"),": (String, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"point"))),(0,i.kt)("p",null,"Edit handles are points that are part of an existing geometry used for manipulation or snapping."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"existing")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-source")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-target")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"intermediate")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"existing")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap"))),(0,i.kt)("p",null,"See the 'Edit Handles' section below."),(0,i.kt)("h4",{id:"gettentativelinecolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getTentativeLineColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The line color for features that are being edited and are not yet finalized. See ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineColor"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"DeckGl GeoJSONLayer"),"."),(0,i.kt)("h4",{id:"gettentativefillcolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getTentativeFillColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The fill color for features that are being edited and are not yet finalized. See ",(0,i.kt)("inlineCode",{parentName:"p"},"getFillColor"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"DeckGl GeoJSONLayer"),"."),(0,i.kt)("h4",{id:"gettentativelinewidth-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getTentativeLineWidth")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"3"))),(0,i.kt)("p",null,"The line width for features that are being edited and are not yet finalized, in units specified by lineWidthUnits (default meters). See ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineWidth"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"DeckGl GeoJSONLayer"),"."),(0,i.kt)("p",null,"If a number is provided, it is used as the outline width for all objects.\nIf a function is provided, it is called on each object to retrieve its outline width.\nIf not provided, it falls back to strokeWidth."),(0,i.kt)("h4",{id:"edithandlepointradiusscale-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointRadiusScale"),": (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"1"))),(0,i.kt)("p",null,"A global radius multiplier for all edit handle points. See ",(0,i.kt)("inlineCode",{parentName:"p"},"radiusScale")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"edithandlepointoutline-booleanfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointOutline"),": (Boolean|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"true"))),(0,i.kt)("p",null,"Only draw outline of points. It falls back to outline if not provided. See ",(0,i.kt)("inlineCode",{parentName:"p"},"stroke")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"edithandlepointstrokewidth-functionnumber"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointStrokeWidth"),": (Function|Number)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"2"))),(0,i.kt)("h4",{id:"edithandlepointradiusminpixels-functionnumber"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointRadiusMinPixels"),": (Function|Number)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"4"))),(0,i.kt)("p",null,"The minimum radius of the edit handle in pixels. This prop can be used to prevent the circle from getting too small when zoomed out. See ",(0,i.kt)("inlineCode",{parentName:"p"},"radiusMinPixels")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"edithandlepointradiusmaxpixels-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandlePointRadiusMaxPixels"),": (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"8"))),(0,i.kt)("p",null,"The maximum radius of the edit handle in pixels. This prop can be used to prevent the circle from getting too big when zoomed in. See ",(0,i.kt)("inlineCode",{parentName:"p"},"radiusMaxPixels")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"getedithandlepointcolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandlePointColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The rgba color is in the format of ",(0,i.kt)("inlineCode",{parentName:"p"},"[r, g, b, [a]]"),". Each channel is a number between 0-255 and ",(0,i.kt)("inlineCode",{parentName:"p"},"a")," is 255 if not supplied."),(0,i.kt)("p",null,"If an array is provided, it is used as the filled color for all objects."),(0,i.kt)("p",null,"If a function is provided, it is called on each object to retrieve its color."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getFillColor")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"getedithandlepointoutlinecolor-arrayfunction-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandlePointOutlineColor")," (Array|Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The outline color of the edit handle point. See in DeckGl"),(0,i.kt)("p",null,"The rgba color is in the format of ",(0,i.kt)("inlineCode",{parentName:"p"},"[r, g, b, [a]]"),". Each channel is a number between 0-255 and ",(0,i.kt)("inlineCode",{parentName:"p"},"a")," is 255 if not supplied."),(0,i.kt)("p",null,"If an array is provided, it is used as the outline color for all objects."),(0,i.kt)("p",null,"If a function is provided, it is called on each object to retrieve its color."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getLineColor")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("h4",{id:"getedithandlepointradius-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandlePointRadius")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"1"))),(0,i.kt)("p",null,"The radius of each edit handle, in units specified by radiusUnits (default ",(0,i.kt)("inlineCode",{parentName:"p"},"meters"),")."),(0,i.kt)("p",null,"If a number is provided, it is used as the radius for all objects."),(0,i.kt)("p",null,"If a function is provided, it is called on each object to retrieve its radius."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getRadius")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/scatterplot-layer"},"DeckGl ScatterplotLayer"),"."),(0,i.kt)("hr",null),(0,i.kt)("h4",{id:"edithandleiconatlas-stringtexture2dimageimagedatahtmlcanvaselementhtmlvideoelementimagebitmapobject-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleIconAtlas")," (String|Texture2D|Image|ImageData|HTMLCanvasElement|HTMLVideoElement|ImageBitmap|Object, optional)"),(0,i.kt)("p",null,"Default: ",(0,i.kt)("inlineCode",{parentName:"p"},"null")),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"iconAtlas"),"in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"edithandleiconmapping-objectstring-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleIconMapping")," (Object|String, optional)"),(0,i.kt)("p",null,"The atlas image."),(0,i.kt)("p",null,"If a string is supplied, it is interpreted as a URL or a Data URL.\nOne of the valid pixel sources for WebGL texture\nA luma.gl Texture2D instance\nA plain object that can be passed to the Texture2D constructor, e.g. ",(0,i.kt)("inlineCode",{parentName:"p"},"{width: , height: , data: }"),". Note that whenever this object shallowly changes, a new texture will be created.\nThe image data will be converted to a Texture2D object. See textureParameters prop for advanced customization."),(0,i.kt)("p",null,"If you go with pre-packed strategy, this prop is required."),(0,i.kt)("p",null,"If you choose to use auto packing, this prop should be left empty."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"iconMapping")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"edithandleiconsizescale-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"editHandleIconSizeScale")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"1"))),(0,i.kt)("p",null,"Edit handle icon size multiplier."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"sizeScale")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleicon-function-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIcon")," (Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"d => d.icon"))),(0,i.kt)("p",null,"Method called to retrieve the icon name of each edit handle, returns string or object."),(0,i.kt)("p",null,"If you go with pre-packed strategy, then getIcon should return a string representing name of the icon, used to retrieve icon definition from given iconMapping."),(0,i.kt)("p",null,"If you choose to use auto packing, then getIcon should return an object which contains the following properties."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"url")," (String, required): url to fetch the icon"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"height")," (Number, required): height of icon"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"width")," (Number, required): width of icon"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"id"),": (String, optional): unique identifier of the icon, fall back to url if not specified"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"anchorX"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"anchorY"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"mask")," are the same as mentioned in iconMapping")),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"IconLayer")," use ",(0,i.kt)("inlineCode",{parentName:"p"},"id")," (fallback to url) to dedupe icons. If for the same icon identifier, getIcon returns different ",(0,i.kt)("inlineCode",{parentName:"p"},"width")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"height"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"IconLayer")," will only apply the first occurrence and ignore the rest of them."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getIcon")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleiconsize-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIconSize")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"10"))),(0,i.kt)("p",null,"The height of each edit handle icon, in units specified by ",(0,i.kt)("inlineCode",{parentName:"p"},"sizeUnits")," (default pixels)."),(0,i.kt)("p",null,"If a number is provided, it is used as the size for all objects.\nIf a function is provided, it is called on each object to retrieve its size."),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getSize")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleiconcolor-functionarray-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIconColor")," (Function|Array, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,i.kt)("p",null,"The rgba color is in the format of ",(0,i.kt)("inlineCode",{parentName:"p"},"[r, g, b, [a]]"),". Each channel is a number between 0-255 and ",(0,i.kt)("inlineCode",{parentName:"p"},"a")," is 255 if not supplied."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"If an array is provided, it is used as the color for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color."),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"mask")," = false, only the alpha component will be used to control the opacity of the icon.")),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getColor")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"getedithandleiconangle-functionnumber-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"getEditHandleIconAngle")," (Function|Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default ",(0,i.kt)("inlineCode",{parentName:"li"},"0"))),(0,i.kt)("p",null,"The rotating angle of each edit handle icon, in degrees."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the angle for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its angle.")),(0,i.kt)("p",null,"See ",(0,i.kt)("inlineCode",{parentName:"p"},"getAngle")," in ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/modules/editor-layers/api-reference/icon-layer"},"DeckGl IconLayer"),"."),(0,i.kt)("h4",{id:"billboard-boolean-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"billboard")," (Boolean, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"true"))),(0,i.kt)("p",null,"If on, the edit handle icon always faces camera. Otherwise the icon faces up (z)"),(0,i.kt)("h5",{id:"example"},"Example"),(0,i.kt)("p",null,"Consider the user removed the third position from a ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon"),"'s first ring, and that ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," was the fourth feature in the ",(0,i.kt)("inlineCode",{parentName:"p"},"FeatureCollection"),". The ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," argument would look like:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"{\n updatedData: {...},\n editType: 'removePosition',\n featureIndexes: [3],\n editContext: {\n positionIndexes: [1, 2],\n position: null\n }\n}\n")),(0,i.kt)("h4",{id:"pickable-boolean-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickable")," (Boolean, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"true"))),(0,i.kt)("p",null,"Defaulted to ",(0,i.kt)("inlineCode",{parentName:"p"},"true")," for interactivity."),(0,i.kt)("h4",{id:"pickingradius-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickingRadius")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"10"))),(0,i.kt)("p",null,"Number of pixels around the mouse cursor used for picking. This value determines, for example, what feature is considered to be clicked and what is close enough to be snapped to."),(0,i.kt)("h4",{id:"pickingdepth-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickingDepth")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"5"))),(0,i.kt)("p",null,"Number of layers of overlapping features that will be picked. Useful in cases where features overlap."),(0,i.kt)("h4",{id:"pickinglinewidthextrapixels-number-optional"},(0,i.kt)("inlineCode",{parentName:"h4"},"pickingLineWidthExtraPixels")," (Number, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"0"))),(0,i.kt)("p",null,"Additional line width in pixels used for picking. Can be useful when ",(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeojsonLayer")," is over a deck.gl layer and precise picking is problematic, and when usage of ",(0,i.kt)("inlineCode",{parentName:"p"},"pickingDepth")," introduces performance issues."),(0,i.kt)("h3",{id:"sub-layers"},"Sub Layers"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeoJsonLayer")," renders the following sub-layers:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"geojson"),": a ",(0,i.kt)("a",{parentName:"li",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"GeoJsonLayer")," that renders the GeoJSON features passed into the ",(0,i.kt)("inlineCode",{parentName:"li"},"data")," property."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"guides"),": a ",(0,i.kt)("a",{parentName:"li",href:"https://deck.gl/docs/modules/editor-layers/api-reference/geojson-layer"},"GeoJsonLayer")," that renders GeoJSON features that aid in editing."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"tooltips"),": a ",(0,i.kt)("a",{parentName:"li",href:"https://deck.gl/docs/modules/editor-layers/api-reference/text-layer"},"TextLayer")," that renders tooltips used in some editing modes.")),(0,i.kt)("p",null,"The styling and functionality of ",(0,i.kt)("inlineCode",{parentName:"p"},"EditableGeoJsonLayer")," can be customized by providing the ",(0,i.kt)("a",{parentName:"p",href:"https://deck.gl/docs/api-reference/core/composite-layer#_sublayerprops"},"_","subLayerProps")," property. For example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"new EditableGeoJsonLayer({\n // ...\n _subLayerProps: {\n geojson: {\n getFillColor: (feature) => getFillColorForFeature(feature),\n getLineColor: (feature) => getLineColorForFeature(feature),\n },\n },\n});\n")),(0,i.kt)("h4",{id:"geojson-sub-layer"},(0,i.kt)("inlineCode",{parentName:"h4"},"geojson")," Sub Layer"),(0,i.kt)("p",null,"The features being edited are rendered in the ",(0,i.kt)("inlineCode",{parentName:"p"},"geojson")," sub layer whether they are selected or not. If you want to style selected features differently than unselected features, you can accomplish it like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"const [data] = React.useState(/* some GeoJSON */);\nconst [selectedFeatureIndexes] = React.useState(/* array of selected features */);\n\nnew EditableGeoJsonLayer({\n // ...\n data,\n selectedFeatureIndexes,\n _subLayerProps: {\n geojson: {\n getFillColor: (feature) => {\n if (selectedFeatureIndexes.some((i) => data.features[i] === feature)) {\n return SELECTED_FILL_COLOR;\n } else {\n return UNSELECTED_FILL_COLOR;\n }\n },\n },\n },\n});\n")),(0,i.kt)("h4",{id:"guides-sub-layer"},(0,i.kt)("inlineCode",{parentName:"h4"},"guides")," Sub Layer"),(0,i.kt)("p",null,'There are two types of "guides" rendered in the ',(0,i.kt)("inlineCode",{parentName:"p"},"guides")," sub layer differentiated by ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.guideType")," of each feature."),(0,i.kt)("h5",{id:"tentative-features"},"Tentative Features"),(0,i.kt)("p",null,"While creating a new feature in any of the ",(0,i.kt)("inlineCode",{parentName:"p"},"draw"),' modes, portion of a feature which has not been "committed" yet can hold its own props. For example, in ',(0,i.kt)("inlineCode",{parentName:"p"},"drawLineString")," mode, the tentative feature is the last line segment moving under the mouse. For polygons and ellipses, this would be the whole feature during drawing. A tentative feature can be identified by checking if ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.guideType === 'tentative'"),"."),(0,i.kt)("h5",{id:"hotkey-support"},"HotKey Support"),(0,i.kt)("p",null,"Only ",(0,i.kt)("inlineCode",{parentName:"p"},"Escape")," hotkey is currently supported to drop the Tentative feature entirely. However, if the feature is already committed, the ",(0,i.kt)("inlineCode",{parentName:"p"},"Escape")," will do nothing. For example, when a point is drawn, it is finalized and no in drawing status."),(0,i.kt)("h5",{id:"edit-handles"},"Edit Handles"),(0,i.kt)("p",null,"Edit handles are the points rendered on a feature to indicate interactive capabilities (e.g. vertices that can be moved). Edit Handles can be identified by checking if ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.guideType === 'editHandle'"),"."),(0,i.kt)("p",null,"There are also different types of edit handles differentiated by ",(0,i.kt)("inlineCode",{parentName:"p"},"properties.editHandleType"),":"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"existing"),": this is an edit handle rendered at an existing position of a feature"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"intermediate"),": this is an edit handle rendered between existing positions (e.g. to add new positions)"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-source"),": this is an edit handle being moved that can snap to a ",(0,i.kt)("inlineCode",{parentName:"li"},"snap-target")," edit handle"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"snap-target"),": this is an edit handle that will be snapped to if the pointer moves close enough")),(0,i.kt)("h5",{id:"example-1"},"Example"),(0,i.kt)("p",null,"This shows how you can override how guides are rendered:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"new EditableGeoJsonLayer({\n // ...\n _subLayerProps: {\n guides: {\n getFillColor: (guide) => {\n if (guide.properties.guideType === 'tentative') {\n return TENTATIVE_FILL_COLOR;\n } else {\n return EDIT_HANDLE_FILL_COLOR;\n }\n },\n },\n },\n});\n")),(0,i.kt)("h4",{id:"tooltips-sub-layer"},(0,i.kt)("inlineCode",{parentName:"h4"},"tooltips")," Sub Layer"),(0,i.kt)("p",null,"Some modes will render tooltips. For example, the measure modes. These modes will render text in the ",(0,i.kt)("inlineCode",{parentName:"p"},"tooltips")," sub layer."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"new EditableGeoJsonLayer({\n // ...\n _subLayerProps: {\n tooltips: {\n getSize: 32,\n },\n },\n});\n")),(0,i.kt)("h3",{id:"using-without-react"},"Using without React"),(0,i.kt)("p",null,"It is possible to use EditableGeoJsonLayer without react. Here's a working CodeSandbox:"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs"},"https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs")),(0,i.kt)("p",null,"Credit: ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/mogmog"},"Graham Bates")," and ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/andybak"},"Andy Baker")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5340021c.48372315.js b/assets/js/5340021c.48372315.js deleted file mode 100644 index 9bbbdacf..00000000 --- a/assets/js/5340021c.48372315.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4800],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),d=p(n),m=a,f=d["".concat(s,".").concat(m)]||d[m]||u[m]||l;return n?r.createElement(f,o(o({ref:t},c),{},{components:n})):r.createElement(f,o({ref:t},c))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[d]="string"==typeof e?e:a,o[1]=i;for(var p=2;p{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>u,frontMatter:()=>l,metadata:()=>i,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const l={},o="Node Style",i={unversionedId:"modules/react-graph-layers/api-reference/node-style",id:"modules/react-graph-layers/api-reference/node-style",title:"Node Style",description:"Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels.",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style",permalink:"/docs/modules/react-graph-layers/api-reference/node-style",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"GraphGL",permalink:"/docs/modules/react-graph-layers/api-reference/graphgl"},next:{title:"Edge Style",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style"}},s={},p=[{value:"Usage",id:"usage",level:3},{value:"type (String, required)",id:"type-string-required",level:3},{value:"offset (null | Array, optional)",id:"offset-null--array-optional",level:3},{value:"scaleWithZoom (Boolean, optional)",id:"scalewithzoom-boolean-optional",level:3},{value:"textSizeMinPixels (Number, optional)",id:"textsizeminpixels-number-optional",level:3},{value:"data (Function, optional)",id:"data-function-optional",level:3},{value:"visible (Boolean, optional)",id:"visible-boolean-optional",level:3}],c={toc:p},d="wrapper";function u(e){let{components:t,...n}=e;return(0,a.kt)(d,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"node-style"},"Node Style"),(0,a.kt)("p",null,"Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels."),(0,a.kt)("h3",{id:"usage"},"Usage"),(0,a.kt)("p",null,"Example of nodeStyle:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," data,\n visible: true\n }\n ]}\n/>\n")),(0,a.kt)("h3",{id:"type-string-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"type")," (String, required)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Type")," can only be ",(0,a.kt)("inlineCode",{parentName:"li"},"CIRCLE"),", ",(0,a.kt)("inlineCode",{parentName:"li"},"MARKER"),", ",(0,a.kt)("inlineCode",{parentName:"li"},"RECTANGLE"),", or ",(0,a.kt)("inlineCode",{parentName:"li"},"LABEL"),"."),(0,a.kt)("li",{parentName:"ul"},"Different type of layer may requires different properties. See more details in the 'Node style' /docs/api-reference/node-style-circle chapter below.")),(0,a.kt)("h3",{id:"offset-null--array-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"offset")," (null | Array, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null")),(0,a.kt)("li",{parentName:"ul"},"The offset distance from the position of the object.")),(0,a.kt)("h3",{id:"scalewithzoom-boolean-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"scaleWithZoom")," (Boolean, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"true")),(0,a.kt)("li",{parentName:"ul"},"If ",(0,a.kt)("inlineCode",{parentName:"li"},"scaleWithZoom")," is true, the size of the element will be scaled according to the zoom level.")),(0,a.kt)("h3",{id:"textsizeminpixels-number-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"textSizeMinPixels")," (Number, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"9")),(0,a.kt)("li",{parentName:"ul"},"Sets the minimum text size permitted by pixels")),(0,a.kt)("h3",{id:"data-function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"data")," (Function, optional)"),(0,a.kt)("p",null,"Allows setting of the layer data via accessor"),(0,a.kt)("h3",{id:"visible-boolean-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"visible")," (Boolean, optional)"),(0,a.kt)("p",null,"Determines if the layer is visible"))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5340021c.6a5693a5.js b/assets/js/5340021c.6a5693a5.js new file mode 100644 index 00000000..b41ddccb --- /dev/null +++ b/assets/js/5340021c.6a5693a5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4800],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>y});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=c(n),m=a,y=d["".concat(s,".").concat(m)]||d[m]||u[m]||l;return n?r.createElement(y,o(o({ref:t},p),{},{components:n})):r.createElement(y,o({ref:t},p))}));function y(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[d]="string"==typeof e?e:a,o[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>u,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const l={},o="Node Style",i={unversionedId:"modules/react-graph-layers/api-reference/node-style",id:"modules/react-graph-layers/api-reference/node-style",title:"Node Style",description:"Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels.",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"GraphGL",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl"},next:{title:"Edge Style",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style"}},s={},c=[{value:"Usage",id:"usage",level:3},{value:"type (String, required)",id:"type-string-required",level:3},{value:"offset (null | Array, optional)",id:"offset-null--array-optional",level:3},{value:"scaleWithZoom (Boolean, optional)",id:"scalewithzoom-boolean-optional",level:3},{value:"textSizeMinPixels (Number, optional)",id:"textsizeminpixels-number-optional",level:3},{value:"data (Function, optional)",id:"data-function-optional",level:3},{value:"visible (Boolean, optional)",id:"visible-boolean-optional",level:3}],p={toc:c},d="wrapper";function u(e){let{components:t,...n}=e;return(0,a.kt)(d,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"node-style"},"Node Style"),(0,a.kt)("p",null,"Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels."),(0,a.kt)("h3",{id:"usage"},"Usage"),(0,a.kt)("p",null,"Example of nodeStyle:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"}," data,\n visible: true\n }\n ]}\n/>\n")),(0,a.kt)("h3",{id:"type-string-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"type")," (String, required)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Type")," can only be ",(0,a.kt)("inlineCode",{parentName:"li"},"CIRCLE"),", ",(0,a.kt)("inlineCode",{parentName:"li"},"MARKER"),", ",(0,a.kt)("inlineCode",{parentName:"li"},"RECTANGLE"),", or ",(0,a.kt)("inlineCode",{parentName:"li"},"LABEL"),"."),(0,a.kt)("li",{parentName:"ul"},"Different type of layer may requires different properties. See more details in the 'Node style' /docs/api-reference/node-style-circle chapter below.")),(0,a.kt)("h3",{id:"offset-null--array-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"offset")," (null | Array, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null")),(0,a.kt)("li",{parentName:"ul"},"The offset distance from the position of the object.")),(0,a.kt)("h3",{id:"scalewithzoom-boolean-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"scaleWithZoom")," (Boolean, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"true")),(0,a.kt)("li",{parentName:"ul"},"If ",(0,a.kt)("inlineCode",{parentName:"li"},"scaleWithZoom")," is true, the size of the element will be scaled according to the zoom level.")),(0,a.kt)("h3",{id:"textsizeminpixels-number-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"textSizeMinPixels")," (Number, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"9")),(0,a.kt)("li",{parentName:"ul"},"Sets the minimum text size permitted by pixels")),(0,a.kt)("h3",{id:"data-function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"data")," (Function, optional)"),(0,a.kt)("p",null,"Allows setting of the layer data via accessor"),(0,a.kt)("h3",{id:"visible-boolean-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"visible")," (Boolean, optional)"),(0,a.kt)("p",null,"Determines if the layer is visible"))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5d545ca7.b0052fc4.js b/assets/js/5d545ca7.b0052fc4.js new file mode 100644 index 00000000..19307b26 --- /dev/null +++ b/assets/js/5d545ca7.b0052fc4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4931],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var d=n.createContext({}),c=function(e){var t=n.useContext(d),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(d.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},g=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,d=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=c(r),g=a,y=s["".concat(d,".").concat(g)]||s[g]||u[g]||o;return r?n.createElement(y,i(i({ref:t},p),{},{components:r})):n.createElement(y,i({ref:t},p))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=g;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l[s]="string"==typeof e?e:a,i[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},i="GraphGL",l={unversionedId:"modules/react-graph-layers/api-reference/graphgl",id:"modules/react-graph-layers/api-reference/graphgl",title:"GraphGL",description:"Usage",source:"@site/../docs/modules/react-graph-layers/api-reference/graphgl.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/graphgl",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/graphgl.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Versioning Policy",permalink:"/deck.gl-community/docs/modules/react-graph-layers/version-policy"},next:{title:"Node Style",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style"}},d={},c=[{value:"Usage",id:"usage",level:3},{value:"graph (Graph, required)",id:"graph-graph-required",level:3},{value:"layout (Layout, required)",id:"layout-layout-required",level:3},{value:"initialViewState (Object, optional)",id:"initialviewstate-object-optional",level:3},{value:"nodeStyle (Array, required)",id:"nodestyle-array-required",level:3},{value:"nodeEvents (Object, optional)",id:"nodeevents-object-optional",level:3},{value:"edgeStyle (Object | Array, required)",id:"edgestyle-object--array-required",level:3},{value:"edgeEvents (Object, optional)",id:"edgeevents-object-optional",level:3}],p={toc:c},s="wrapper";function u(e){let{components:t,...r}=e;return(0,a.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"graphgl"},"GraphGL"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/graph.png",height:"200"})),(0,a.kt)("h3",{id:"usage"},"Usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import GraphGL, {JSONLoader, NODE_TYPE, D3ForceLayout} from 'react-graph-layers';\n\nconst App = ({data}) => {\n const graph = JSONLoader({\n json: data,\n nodeParser: (node) => ({id: node.id}),\n edgeParser: (edge) => ({\n id: edge.id,\n sourceId: edge.sourceId,\n targetId: edge.targetId,\n directed: true\n })\n });\n return (\n \n );\n};\n")),(0,a.kt)("h3",{id:"graph-graph-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"graph")," (Graph, required)"),(0,a.kt)("p",null,"The graph data will need to be processed through JSONLoader and converted into ",(0,a.kt)("inlineCode",{parentName:"p"},"Graph")," object. The expected data should be an object includes two arrays: ",(0,a.kt)("inlineCode",{parentName:"p"},"nodes")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"edges"),". Each node require an unique ",(0,a.kt)("inlineCode",{parentName:"p"},"id"),". Each edge should have ",(0,a.kt)("inlineCode",{parentName:"p"},"id")," as edge ID, ",(0,a.kt)("inlineCode",{parentName:"p"},"sourceId")," as the ID of the source node, and ",(0,a.kt)("inlineCode",{parentName:"p"},"targetId")," as the ID of the target node. For example:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const data = {\n nodes: [{id: '1'}, {id: '2'}, {id: '3'}],\n edges: [\n {id: 'e1', sourceId: '1', targetId: '2'},\n {id: 'e2', sourceId: '1', targetId: '3'},\n {id: 'e3', sourceId: '2', targetId: '3'}\n ]\n};\n")),(0,a.kt)("p",null,"Then, you can convert the data into ",(0,a.kt)("inlineCode",{parentName:"p"},"Graph")," by ",(0,a.kt)("inlineCode",{parentName:"p"},"JSONLoader"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import {JSONLoader} from 'react-graph-layers';\nconst graph = JSONLoader({json: data});\n")),(0,a.kt)("h3",{id:"layout-layout-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"layout")," (Layout, required)"),(0,a.kt)("p",null,"Use one of the layouts provided by react-graph-layers or create a new custom layout class by following the instruction. For more detail, please see the Layout docs/api-reference/layout section."),(0,a.kt)("h3",{id:"initialviewstate-object-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"initialViewState")," (Object, optional)"),(0,a.kt)("p",null,"For more detail, please see /docs/api-reference/viewport."),(0,a.kt)("h3",{id:"nodestyle-array-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"nodeStyle")," (Array, required)"),(0,a.kt)("p",null,"A node is made of a set of layers. nodeStyle is a set of style objects to describe the style for each layer.\nFor more detail, please see the (explanation of nodeStyle](docs/api-reference/node-style)."),(0,a.kt)("h3",{id:"nodeevents-object-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"nodeEvents")," (Object, optional)"),(0,a.kt)("p",null,"For more detail, please see the interactions reference /docs/api-reference/interactions."),(0,a.kt)("h3",{id:"edgestyle-object--array-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"edgeStyle")," (Object | Array, required)"),(0,a.kt)("p",null,"For more detail, please see the explanation of edgeStyle docs/api-reference/edge-style"),(0,a.kt)("h3",{id:"edgeevents-object-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"edgeEvents")," (Object, optional)"),(0,a.kt)("p",null,"For more detail, please see api-reference interactions docs/api-reference/interactions."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5d545ca7.d02eb14f.js b/assets/js/5d545ca7.d02eb14f.js deleted file mode 100644 index 61695d58..00000000 --- a/assets/js/5d545ca7.d02eb14f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4931],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>y});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function i(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var d=a.createContext({}),p=function(e){var t=a.useContext(d),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,d=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),s=p(r),g=n,y=s["".concat(d,".").concat(g)]||s[g]||u[g]||o;return r?a.createElement(y,i(i({ref:t},c),{},{components:r})):a.createElement(y,i({ref:t},c))}));function y(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,i=new Array(o);i[0]=g;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l[s]="string"==typeof e?e:n,i[1]=l;for(var p=2;p{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var a=r(7462),n=(r(7294),r(3905));const o={},i="GraphGL",l={unversionedId:"modules/react-graph-layers/api-reference/graphgl",id:"modules/react-graph-layers/api-reference/graphgl",title:"GraphGL",description:"Usage",source:"@site/../docs/modules/react-graph-layers/api-reference/graphgl.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/graphgl",permalink:"/docs/modules/react-graph-layers/api-reference/graphgl",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/graphgl.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Versioning Policy",permalink:"/docs/modules/react-graph-layers/version-policy"},next:{title:"Node Style",permalink:"/docs/modules/react-graph-layers/api-reference/node-style"}},d={},p=[{value:"Usage",id:"usage",level:3},{value:"graph (Graph, required)",id:"graph-graph-required",level:3},{value:"layout (Layout, required)",id:"layout-layout-required",level:3},{value:"initialViewState (Object, optional)",id:"initialviewstate-object-optional",level:3},{value:"nodeStyle (Array, required)",id:"nodestyle-array-required",level:3},{value:"nodeEvents (Object, optional)",id:"nodeevents-object-optional",level:3},{value:"edgeStyle (Object | Array, required)",id:"edgestyle-object--array-required",level:3},{value:"edgeEvents (Object, optional)",id:"edgeevents-object-optional",level:3}],c={toc:p},s="wrapper";function u(e){let{components:t,...r}=e;return(0,n.kt)(s,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"graphgl"},"GraphGL"),(0,n.kt)("p",{align:"center"},(0,n.kt)("img",{src:"/gatsby/images/graph.png",height:"200"})),(0,n.kt)("h3",{id:"usage"},"Usage"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"import GraphGL, {JSONLoader, NODE_TYPE, D3ForceLayout} from 'react-graph-layers';\n\nconst App = ({data}) => {\n const graph = JSONLoader({\n json: data,\n nodeParser: (node) => ({id: node.id}),\n edgeParser: (edge) => ({\n id: edge.id,\n sourceId: edge.sourceId,\n targetId: edge.targetId,\n directed: true\n })\n });\n return (\n \n );\n};\n")),(0,n.kt)("h3",{id:"graph-graph-required"},(0,n.kt)("inlineCode",{parentName:"h3"},"graph")," (Graph, required)"),(0,n.kt)("p",null,"The graph data will need to be processed through JSONLoader and converted into ",(0,n.kt)("inlineCode",{parentName:"p"},"Graph")," object. The expected data should be an object includes two arrays: ",(0,n.kt)("inlineCode",{parentName:"p"},"nodes")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"edges"),". Each node require an unique ",(0,n.kt)("inlineCode",{parentName:"p"},"id"),". Each edge should have ",(0,n.kt)("inlineCode",{parentName:"p"},"id")," as edge ID, ",(0,n.kt)("inlineCode",{parentName:"p"},"sourceId")," as the ID of the source node, and ",(0,n.kt)("inlineCode",{parentName:"p"},"targetId")," as the ID of the target node. For example:"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"const data = {\n nodes: [{id: '1'}, {id: '2'}, {id: '3'}],\n edges: [\n {id: 'e1', sourceId: '1', targetId: '2'},\n {id: 'e2', sourceId: '1', targetId: '3'},\n {id: 'e3', sourceId: '2', targetId: '3'}\n ]\n};\n")),(0,n.kt)("p",null,"Then, you can convert the data into ",(0,n.kt)("inlineCode",{parentName:"p"},"Graph")," by ",(0,n.kt)("inlineCode",{parentName:"p"},"JSONLoader"),":"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"import {JSONLoader} from 'react-graph-layers';\nconst graph = JSONLoader({json: data});\n")),(0,n.kt)("h3",{id:"layout-layout-required"},(0,n.kt)("inlineCode",{parentName:"h3"},"layout")," (Layout, required)"),(0,n.kt)("p",null,"Use one of the layouts provided by react-graph-layers or create a new custom layout class by following the instruction. For more detail, please see the Layout docs/api-reference/layout section."),(0,n.kt)("h3",{id:"initialviewstate-object-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"initialViewState")," (Object, optional)"),(0,n.kt)("p",null,"For more detail, please see /docs/api-reference/viewport."),(0,n.kt)("h3",{id:"nodestyle-array-required"},(0,n.kt)("inlineCode",{parentName:"h3"},"nodeStyle")," (Array, required)"),(0,n.kt)("p",null,"A node is made of a set of layers. nodeStyle is a set of style objects to describe the style for each layer.\nFor more detail, please see the (explanation of nodeStyle](docs/api-reference/node-style)."),(0,n.kt)("h3",{id:"nodeevents-object-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"nodeEvents")," (Object, optional)"),(0,n.kt)("p",null,"For more detail, please see the interactions reference /docs/api-reference/interactions."),(0,n.kt)("h3",{id:"edgestyle-object--array-required"},(0,n.kt)("inlineCode",{parentName:"h3"},"edgeStyle")," (Object | Array, required)"),(0,n.kt)("p",null,"For more detail, please see the explanation of edgeStyle docs/api-reference/edge-style"),(0,n.kt)("h3",{id:"edgeevents-object-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"edgeEvents")," (Object, optional)"),(0,n.kt)("p",null,"For more detail, please see api-reference interactions docs/api-reference/interactions."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/608d6ba6.cc99d60e.js b/assets/js/608d6ba6.c0ab86ff.js similarity index 64% rename from assets/js/608d6ba6.cc99d60e.js rename to assets/js/608d6ba6.c0ab86ff.js index c885abf3..813a1af4 100644 --- a/assets/js/608d6ba6.cc99d60e.js +++ b/assets/js/608d6ba6.c0ab86ff.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2930],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>d});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),p=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=p(e.components);return n.createElement(l.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,c=e.originalType,l=e.parentName,s=a(e,["components","mdxType","originalType","parentName"]),u=p(r),f=o,d=u["".concat(l,".").concat(f)]||u[f]||m[f]||c;return r?n.createElement(d,i(i({ref:t},s),{},{components:r})):n.createElement(d,i({ref:t},s))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=r.length,i=new Array(c);i[0]=f;var a={};for(var l in t)hasOwnProperty.call(t,l)&&(a[l]=t[l]);a.originalType=e,a[u]="string"==typeof e?e:o,i[1]=a;for(var p=2;p{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>c,metadata:()=>a,toc:()=>p});var n=r(7462),o=(r(7294),r(3905));const c={},i="deck.gl-community",a={unversionedId:"README",id:"README",title:"deck.gl-community",description:"This repository contains a collection of community supported modules for deck.gl.",source:"@site/../docs/README.md",sourceDirName:".",slug:"/",permalink:"/docs/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",next:{title:"What's New",permalink:"/docs/whats-new"}},l={},p=[],s={toc:p},u="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(u,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"deckgl-community"},"deck.gl-community"),(0,o.kt)("p",null,"This repository contains a collection of community supported modules for ",(0,o.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl"),"."))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2930],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>d});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),p=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(l.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,c=e.originalType,l=e.parentName,u=a(e,["components","mdxType","originalType","parentName"]),s=p(r),f=o,d=s["".concat(l,".").concat(f)]||s[f]||m[f]||c;return r?n.createElement(d,i(i({ref:t},u),{},{components:r})):n.createElement(d,i({ref:t},u))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var c=r.length,i=new Array(c);i[0]=f;var a={};for(var l in t)hasOwnProperty.call(t,l)&&(a[l]=t[l]);a.originalType=e,a[s]="string"==typeof e?e:o,i[1]=a;for(var p=2;p{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>m,frontMatter:()=>c,metadata:()=>a,toc:()=>p});var n=r(7462),o=(r(7294),r(3905));const c={},i="deck.gl-community",a={unversionedId:"README",id:"README",title:"deck.gl-community",description:"This repository contains a collection of community supported modules for deck.gl.",source:"@site/../docs/README.md",sourceDirName:".",slug:"/",permalink:"/deck.gl-community/docs/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",next:{title:"What's New",permalink:"/deck.gl-community/docs/whats-new"}},l={},p=[],u={toc:p},s="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"deckgl-community"},"deck.gl-community"),(0,o.kt)("p",null,"This repository contains a collection of community supported modules for ",(0,o.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl"),"."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/631e59ee.7847ef15.js b/assets/js/631e59ee.7847ef15.js new file mode 100644 index 00000000..addd2ccc --- /dev/null +++ b/assets/js/631e59ee.7847ef15.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4326],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},u=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=c(r),m=a,y=p["".concat(s,".").concat(m)]||p[m]||d[m]||i;return r?n.createElement(y,o(o({ref:t},u),{},{components:r})):n.createElement(y,o({ref:t},u))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:a,o[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const i={},o="Introduction",l={unversionedId:"modules/react-graph-layers/README",id:"modules/react-graph-layers/README",title:"Introduction",description:"react-graph-layers provides React components for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.",source:"@site/../docs/modules/react-graph-layers/README.md",sourceDirName:"modules/react-graph-layers",slug:"/modules/react-graph-layers/",permalink:"/deck.gl-community/docs/modules/react-graph-layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Overview",permalink:"/deck.gl-community/docs/modules/bing-maps/"},next:{title:"Versioning Policy",permalink:"/deck.gl-community/docs/modules/react-graph-layers/version-policy"}},s={},c=[],u={toc:c},p="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(p,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"react-graph-layers provides React components for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/631e59ee.8c56fd27.js b/assets/js/631e59ee.8c56fd27.js deleted file mode 100644 index bc03bc16..00000000 --- a/assets/js/631e59ee.8c56fd27.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4326],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=n.createContext({}),c=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(l.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(r),m=a,y=u["".concat(l,".").concat(m)]||u[m]||d[m]||i;return r?n.createElement(y,o(o({ref:t},p),{},{components:r})):n.createElement(y,o({ref:t},p))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[u]="string"==typeof e?e:a,o[1]=s;for(var c=2;c{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const i={},o="Introduction",s={unversionedId:"modules/react-graph-layers/README",id:"modules/react-graph-layers/README",title:"Introduction",description:"react-graph-layers provides React components for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.",source:"@site/../docs/modules/react-graph-layers/README.md",sourceDirName:"modules/react-graph-layers",slug:"/modules/react-graph-layers/",permalink:"/docs/modules/react-graph-layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Overview",permalink:"/docs/modules/bing-maps/"},next:{title:"Versioning Policy",permalink:"/docs/modules/react-graph-layers/version-policy"}},l={},c=[],p={toc:c},u="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"introduction"},"Introduction"),(0,a.kt)("p",null,"react-graph-layers provides React components for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/68ce8057.31d8045c.js b/assets/js/68ce8057.31d8045c.js new file mode 100644 index 00000000..485fb983 --- /dev/null +++ b/assets/js/68ce8057.31d8045c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4870],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>g});var a=r(7294);function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}var s=a.createContext({}),u=function(e){var t=a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},d=function(e){var t=u(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var r=e.components,l=e.mdxType,n=e.originalType,s=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),p=u(r),m=l,g=p["".concat(s,".").concat(m)]||p[m]||c[m]||n;return r?a.createElement(g,o(o({ref:t},d),{},{components:r})):a.createElement(g,o({ref:t},d))}));function g(e,t){var r=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var n=r.length,o=new Array(n);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:l,o[1]=i;for(var u=2;u{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>c,frontMatter:()=>n,metadata:()=>i,toc:()=>u});var a=r(7462),l=(r(7294),r(3905));const n={},o="Overview",i={unversionedId:"modules/editor-core/README",id:"modules/editor-core/README",title:"Overview",description:"nebula.gl provides editable and interactive map overlay layers, built using the power of deck.gl.",source:"@site/../docs/modules/editor-core/README.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/",permalink:"/deck.gl-community/docs/modules/editor-core/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Experimental Layouts",permalink:"/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery"},next:{title:"What's New",permalink:"/deck.gl-community/docs/modules/editor-core/whats-new"}},s={},u=[{value:"Design Goals",id:"design-goals",level:2},{value:"Why nebula.gl?",id:"why-nebulagl",level:2},{value:"Quick Overview of the nebula.gl API",id:"quick-overview-of-the-nebulagl-api",level:2},{value:"EditableGeoJsonLayer",id:"editablegeojsonlayer",level:3},{value:"Callbacks",id:"callbacks",level:4},{value:"Overlays",id:"overlays",level:3}],d={toc:u},p="wrapper";function c(e){let{components:t,...r}=e;return(0,l.kt)(p,(0,a.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"overview"},"Overview"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://nebula.gl"},"nebula.gl")," provides editable and interactive map overlay layers, built using the power of ",(0,l.kt)("a",{parentName:"p",href:"https://deck.gl/"},"deck.gl"),"."),(0,l.kt)("h2",{id:"design-goals"},"Design Goals"),(0,l.kt)("p",null,"nebula.gl aspires to be an ultra-performant, fully 3D-enabled GeoJSON editing system primarily focused on geospatial editing use cases."),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Maximal rendering and editing performance, without need for complex application logic (such as splitting data into subgroups etc)."),(0,l.kt)("li",{parentName:"ul"},"Target performance: Editing at 60fps (e.g. dragging sub objects) in GeoJSON payloads with 100K features (points, lines or polygons)."),(0,l.kt)("li",{parentName:"ul"},"Handles GeoJSON corner cases, e.g. automatically changing object types from ",(0,l.kt)("inlineCode",{parentName:"li"},"Polygon")," to ",(0,l.kt)("inlineCode",{parentName:"li"},"MultiPolygon")," when addition polygons are added."),(0,l.kt)("li",{parentName:"ul"},"Fully 3D enabled (Can e.g. use WebGL z-buffer so that lines being rendered are properly occluded by other geometry)."),(0,l.kt)("li",{parentName:"ul"},"Seamless integration with deck.gl and all geospatial deck.gl layers, allowing for GeoJSON editing to be interleaved with rich 3D visualizations."),(0,l.kt)("li",{parentName:"ul"},"Handle all aspects of event handling, including touch screen support.")),(0,l.kt)("h2",{id:"why-nebulagl"},"Why nebula.gl?"),(0,l.kt)("p",null,"You should strongly consider nebula.gl:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"You want a full-featured, ultra-high-performance editing solution for GeoJson."),(0,l.kt)("li",{parentName:"ul"},"You are already using e.g. ",(0,l.kt)("inlineCode",{parentName:"li"},"deck.gl")," or ",(0,l.kt)("inlineCode",{parentName:"li"},"react-map-gl"),".")),(0,l.kt)("p",null,"You may want to look at alternatives if:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"If you have very simple editing requirements (just a simple polygon etc)"),(0,l.kt)("li",{parentName:"ul"},"If you don't want to use ",(0,l.kt)("inlineCode",{parentName:"li"},"deck.gl")," in your project.")),(0,l.kt)("p",null,"If nebula.gl is more than what you need (e.g. in terms of bundle size), and you may want to look at other solutions, e.g. the simple polygon editor overlay being developed in react-map-gl."),(0,l.kt)("p",null,"That said, if you are already using ",(0,l.kt)("inlineCode",{parentName:"p"},"deck.gl")," the additional overhead of nebula.gl is small, and the seamless integration with deck.gl should be valuable."),(0,l.kt)("h2",{id:"quick-overview-of-the-nebulagl-api"},"Quick Overview of the nebula.gl API"),(0,l.kt)("h3",{id:"editablegeojsonlayer"},"EditableGeoJsonLayer"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/docs/modules/editor-layers/api-reference/editable-geojson-layer"},"EditableGeoJsonLayer")," is implemented as a ",(0,l.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl")," layer. It provides the ability to view and edit multiple types of geometry formatted as ",(0,l.kt)("a",{parentName:"p",href:"https://tools.ietf.org/html/rfc7946"},"GeoJSON")," (an open standard format for geometry) including polygons, lines, and points."),(0,l.kt)("h4",{id:"callbacks"},"Callbacks"),(0,l.kt)("p",null,"When there is the ability to edit, callbacks are provided to inform you of edits."),(0,l.kt)("h3",{id:"overlays"},"Overlays"),(0,l.kt)("p",null,"The overlay layers are based on HTML and rendered by the browser. You can use them\nfor complicated objects that follow map points. They are less performant\nbut more flexible. For more details see ",(0,l.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay"},"Using Html Overlays")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/68ce8057.93f7cd29.js b/assets/js/68ce8057.93f7cd29.js deleted file mode 100644 index 729050b9..00000000 --- a/assets/js/68ce8057.93f7cd29.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4870],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>g});var a=r(7294);function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}var s=a.createContext({}),u=function(e){var t=a.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},d=function(e){var t=u(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var r=e.components,l=e.mdxType,n=e.originalType,s=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),p=u(r),m=l,g=p["".concat(s,".").concat(m)]||p[m]||c[m]||n;return r?a.createElement(g,o(o({ref:t},d),{},{components:r})):a.createElement(g,o({ref:t},d))}));function g(e,t){var r=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var n=r.length,o=new Array(n);o[0]=m;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:l,o[1]=i;for(var u=2;u{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>c,frontMatter:()=>n,metadata:()=>i,toc:()=>u});var a=r(7462),l=(r(7294),r(3905));const n={},o="Overview",i={unversionedId:"modules/editor-core/README",id:"modules/editor-core/README",title:"Overview",description:"nebula.gl provides editable and interactive map overlay layers, built using the power of deck.gl.",source:"@site/../docs/modules/editor-core/README.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/",permalink:"/docs/modules/editor-core/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Experimental Layouts",permalink:"/docs/modules/react-graph-layers/advanced/gallery"},next:{title:"What's New",permalink:"/docs/modules/editor-core/whats-new"}},s={},u=[{value:"Design Goals",id:"design-goals",level:2},{value:"Why nebula.gl?",id:"why-nebulagl",level:2},{value:"Quick Overview of the nebula.gl API",id:"quick-overview-of-the-nebulagl-api",level:2},{value:"EditableGeoJsonLayer",id:"editablegeojsonlayer",level:3},{value:"Callbacks",id:"callbacks",level:4},{value:"Overlays",id:"overlays",level:3}],d={toc:u},p="wrapper";function c(e){let{components:t,...r}=e;return(0,l.kt)(p,(0,a.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"overview"},"Overview"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://nebula.gl"},"nebula.gl")," provides editable and interactive map overlay layers, built using the power of ",(0,l.kt)("a",{parentName:"p",href:"https://deck.gl/"},"deck.gl"),"."),(0,l.kt)("h2",{id:"design-goals"},"Design Goals"),(0,l.kt)("p",null,"nebula.gl aspires to be an ultra-performant, fully 3D-enabled GeoJSON editing system primarily focused on geospatial editing use cases."),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Maximal rendering and editing performance, without need for complex application logic (such as splitting data into subgroups etc)."),(0,l.kt)("li",{parentName:"ul"},"Target performance: Editing at 60fps (e.g. dragging sub objects) in GeoJSON payloads with 100K features (points, lines or polygons)."),(0,l.kt)("li",{parentName:"ul"},"Handles GeoJSON corner cases, e.g. automatically changing object types from ",(0,l.kt)("inlineCode",{parentName:"li"},"Polygon")," to ",(0,l.kt)("inlineCode",{parentName:"li"},"MultiPolygon")," when addition polygons are added."),(0,l.kt)("li",{parentName:"ul"},"Fully 3D enabled (Can e.g. use WebGL z-buffer so that lines being rendered are properly occluded by other geometry)."),(0,l.kt)("li",{parentName:"ul"},"Seamless integration with deck.gl and all geospatial deck.gl layers, allowing for GeoJSON editing to be interleaved with rich 3D visualizations."),(0,l.kt)("li",{parentName:"ul"},"Handle all aspects of event handling, including touch screen support.")),(0,l.kt)("h2",{id:"why-nebulagl"},"Why nebula.gl?"),(0,l.kt)("p",null,"You should strongly consider nebula.gl:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"You want a full-featured, ultra-high-performance editing solution for GeoJson."),(0,l.kt)("li",{parentName:"ul"},"You are already using e.g. ",(0,l.kt)("inlineCode",{parentName:"li"},"deck.gl")," or ",(0,l.kt)("inlineCode",{parentName:"li"},"react-map-gl"),".")),(0,l.kt)("p",null,"You may want to look at alternatives if:"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"If you have very simple editing requirements (just a simple polygon etc)"),(0,l.kt)("li",{parentName:"ul"},"If you don't want to use ",(0,l.kt)("inlineCode",{parentName:"li"},"deck.gl")," in your project.")),(0,l.kt)("p",null,"If nebula.gl is more than what you need (e.g. in terms of bundle size), and you may want to look at other solutions, e.g. the simple polygon editor overlay being developed in react-map-gl."),(0,l.kt)("p",null,"That said, if you are already using ",(0,l.kt)("inlineCode",{parentName:"p"},"deck.gl")," the additional overhead of nebula.gl is small, and the seamless integration with deck.gl should be valuable."),(0,l.kt)("h2",{id:"quick-overview-of-the-nebulagl-api"},"Quick Overview of the nebula.gl API"),(0,l.kt)("h3",{id:"editablegeojsonlayer"},"EditableGeoJsonLayer"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/docs/modules/editor-layers/api-reference/editable-geojson-layer"},"EditableGeoJsonLayer")," is implemented as a ",(0,l.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl")," layer. It provides the ability to view and edit multiple types of geometry formatted as ",(0,l.kt)("a",{parentName:"p",href:"https://tools.ietf.org/html/rfc7946"},"GeoJSON")," (an open standard format for geometry) including polygons, lines, and points."),(0,l.kt)("h4",{id:"callbacks"},"Callbacks"),(0,l.kt)("p",null,"When there is the ability to edit, callbacks are provided to inform you of edits."),(0,l.kt)("h3",{id:"overlays"},"Overlays"),(0,l.kt)("p",null,"The overlay layers are based on HTML and rendered by the browser. You can use them\nfor complicated objects that follow map points. They are less performant\nbut more flexible. For more details see ",(0,l.kt)("a",{parentName:"p",href:"/docs/modules/react-overlays/api-reference/html-overlay"},"Using Html Overlays")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/80cd7e40.a8bb6de1.js b/assets/js/80cd7e40.a8bb6de1.js new file mode 100644 index 00000000..7fd8c91d --- /dev/null +++ b/assets/js/80cd7e40.a8bb6de1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3372],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),u=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=u(e.components);return r.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),s=u(n),m=a,f=s["".concat(c,".").concat(m)]||s[m]||d[m]||i;return n?r.createElement(f,l(l({ref:t},p),{},{components:n})):r.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o[s]="string"==typeof e?e:a,l[1]=o;for(var u=2;u{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>u});var r=n(7462),a=(n(7294),n(3905));const i={},l="LABEL",o={unversionedId:"modules/react-graph-layers/api-reference/node-style-label",id:"modules/react-graph-layers/api-reference/node-style-label",title:"LABEL",description:"text (String | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-label.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-label",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-label.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"MARKER",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker"},next:{title:"LABEL",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label"}},c={},u=[{value:"text (String | Function, required)",id:"text-string--function-required",level:3},{value:"color (String | Array | Function, optional)",id:"color-string--array--function-optional",level:3},{value:"fontSize (Number | Function, optional)",id:"fontsize-number--function-optional",level:3},{value:"textAnchor (String | Function, optional)",id:"textanchor-string--function-optional",level:3},{value:"alignmentBaseline (String | Function, optional)",id:"alignmentbaseline-string--function-optional",level:3},{value:"angle (Number | Function, optional)",id:"angle-number--function-optional",level:3}],p={toc:u},s="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(s,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"label"},"LABEL"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/node-styles/label.png",height:"100"})),(0,a.kt)("h3",{id:"text-string--function-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"text")," (String | Function, required)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"The text of the label."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"text"),", all the objects will have the same text."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the text of each object.")),(0,a.kt)("h3",{id:"color-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"color")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,a.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color.")),(0,a.kt)("h3",{id:"fontsize-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"fontSize")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"12")),(0,a.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"fontSize"),", all the labels will have the same font size."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the font size of each label.")),(0,a.kt)("h3",{id:"textanchor-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"textAnchor")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Default: ",(0,a.kt)("inlineCode",{parentName:"p"},"middle"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"The text anchor. Available options include 'start', 'middle' and 'end'.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a string is provided, it is used as the text anchor for all objects.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a function is provided, it is called on each object to retrieve its text anchor."))),(0,a.kt)("h3",{id:"alignmentbaseline-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"alignmentBaseline")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"center"),"\nThe alignment baseline. Available options include 'top', 'center' and 'bottom'."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided, it is used as the alignment baseline for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its alignment baseline.")),(0,a.kt)("h3",{id:"angle-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"angle")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"0")),(0,a.kt)("li",{parentName:"ul"},"The rotating angle of each text label, in degrees."),(0,a.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the angle for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its angle.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/80cd7e40.ac60033d.js b/assets/js/80cd7e40.ac60033d.js deleted file mode 100644 index 23793a4c..00000000 --- a/assets/js/80cd7e40.ac60033d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3372],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),u=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=u(e.components);return r.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),s=u(n),m=a,f=s["".concat(c,".").concat(m)]||s[m]||d[m]||i;return n?r.createElement(f,l(l({ref:t},p),{},{components:n})):r.createElement(f,l({ref:t},p))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=m;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o[s]="string"==typeof e?e:a,l[1]=o;for(var u=2;u{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>u});var r=n(7462),a=(n(7294),n(3905));const i={},l="LABEL",o={unversionedId:"modules/react-graph-layers/api-reference/node-style-label",id:"modules/react-graph-layers/api-reference/node-style-label",title:"LABEL",description:"text (String | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-label.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-label",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-label",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-label.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"MARKER",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-marker"},next:{title:"LABEL",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style-label"}},c={},u=[{value:"text (String | Function, required)",id:"text-string--function-required",level:3},{value:"color (String | Array | Function, optional)",id:"color-string--array--function-optional",level:3},{value:"fontSize (Number | Function, optional)",id:"fontsize-number--function-optional",level:3},{value:"textAnchor (String | Function, optional)",id:"textanchor-string--function-optional",level:3},{value:"alignmentBaseline (String | Function, optional)",id:"alignmentbaseline-string--function-optional",level:3},{value:"angle (Number | Function, optional)",id:"angle-number--function-optional",level:3}],p={toc:u},s="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(s,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"label"},"LABEL"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/node-styles/label.png",height:"100"})),(0,a.kt)("h3",{id:"text-string--function-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"text")," (String | Function, required)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"The text of the label."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"text"),", all the objects will have the same text."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the text of each object.")),(0,a.kt)("h3",{id:"color-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"color")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,a.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color.")),(0,a.kt)("h3",{id:"fontsize-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"fontSize")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"12")),(0,a.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"fontSize"),", all the labels will have the same font size."),(0,a.kt)("li",{parentName:"ul"},"If an accessor function is provided, the function will be called to retrieve the font size of each label.")),(0,a.kt)("h3",{id:"textanchor-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"textAnchor")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"Default: ",(0,a.kt)("inlineCode",{parentName:"p"},"middle"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"The text anchor. Available options include 'start', 'middle' and 'end'.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a string is provided, it is used as the text anchor for all objects.")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("p",{parentName:"li"},"If a function is provided, it is called on each object to retrieve its text anchor."))),(0,a.kt)("h3",{id:"alignmentbaseline-string--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"alignmentBaseline")," (String | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"center"),"\nThe alignment baseline. Available options include 'top', 'center' and 'bottom'."),(0,a.kt)("li",{parentName:"ul"},"If a string is provided, it is used as the alignment baseline for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its alignment baseline.")),(0,a.kt)("h3",{id:"angle-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"angle")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"0")),(0,a.kt)("li",{parentName:"ul"},"The rotating angle of each text label, in degrees."),(0,a.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the angle for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its angle.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9027671b.0f456ee4.js b/assets/js/9027671b.0f456ee4.js new file mode 100644 index 00000000..ce53bb23 --- /dev/null +++ b/assets/js/9027671b.0f456ee4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2037],{1819:(e,i,t)=>{t.r(i),t.d(i,{assets:()=>p,contentTitle:()=>l,default:()=>g,frontMatter:()=>r,metadata:()=>d,toc:()=>s});var o=t(7462),n=(t(7294),t(3905)),a=t(6613);const r={},l=void 0,d={unversionedId:"index",id:"index",title:"index",description:"/images/examples/${item.docId || item.label.toLowerCase()}.jpg} />",source:"@site/src/examples/index.mdx",sourceDirName:".",slug:"/",permalink:"/deck.gl-community/examples/",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar"},p={},s=[],c={toc:s},m="wrapper";function g(e){let{components:i,...t}=e;return(0,n.kt)(m,(0,o.Z)({},c,t,{components:i,mdxType:"MDXLayout"}),(0,n.kt)(a.h6,{getThumbnail:e=>"/images/examples/"+(e.docId||e.label.toLowerCase())+".jpg",mdxType:"ExamplesIndex"}))}g.isMDXComponent=!0},6613:(e,i,t)=>{t.d(i,{h6:()=>h,SK:()=>k});var o=t(7294),n=t(9521);const a=e=>"@media screen and (max-width: 480px)";n.ZP.div.withConfig({displayName:"styled__PanelContainer",componentId:"sc-oqnqzc-0"})(["font-size:14px;position:absolute;top:0;right:0;width:344px;background:var(--ifm-background-surface-color);box-shadow:var(--ifm-global-shadow-lw);margin:24px;padding:10px 24px;max-height:96%;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;outline:none;z-index:1;","{width:auto;left:0;}"],a),n.ZP.div.withConfig({displayName:"styled__PanelExpander",componentId:"sc-oqnqzc-1"})(["display:none;width:16px;height:16px;font-family:serif;font-size:0.8em;text-align:center;line-height:16px;border-radius:50%;background:",";color:",";","{display:block;}"],(e=>e.$expanded?"none":"var(--ifm-color-gray-900)"),(e=>e.$expanded?"var(--ifm-color-black)":"var(--ifm-color-white)"),a),n.ZP.div.withConfig({displayName:"styled__PanelTitle",componentId:"sc-oqnqzc-2"})(["display:flex;align-items:center;justify-content:space-between;font:bold 1.25em var(--ifm-font-family-base);margin:8px 0;","{cursor:pointer;}"],a),n.ZP.div.withConfig({displayName:"styled__PanelContent",componentId:"sc-oqnqzc-3"})(["div > *{vertical-align:middle;white-space:nowrap;}div > label{display:inline-block;width:40%;margin-right:10%;color:var(--ifm-color-content-secondary);margin-top:2px;margin-bottom:2px;}div > input,div > a,div > button,div > select{font:normal 11px/16px var(--ifm-font-family-base);line-height:20px;text-transform:none;text-overflow:ellipsis;overflow:hidden;display:inline-block;padding:0 4px;width:50%;height:20px;text-align:left;}div > button{color:initial;}div > button:disabled{color:var(--ifm-color-gray-300);cursor:default;background:var(--ifm-color-gray-300);}div > input{border:solid 1px var(--ifm-color-gray-300);&:disabled{background:var(--ifm-color-white);}&[type='checkbox']{height:auto;}}p{margin-bottom:12px;white-space:initial;}","{display:",";}"],a,(e=>e.$expanded?"block":"none")),n.ZP.a.withConfig({displayName:"styled__SourceLink",componentId:"sc-oqnqzc-4"})(["display:block;text-align:right;margin-top:8px;font:bold 12px/20px var(--ifm-font-family-base);color:var(--ifm-color-content-secondary);","{display:",";}"],a,(e=>e.$expanded?"block":"none")),n.ZP.div.withConfig({displayName:"input__InputContainer",componentId:"sc-1myx0c6-0"})(["position:relative;width:100%;&:last-child{margin-bottom:20px;}> *{vertical-align:middle;white-space:nowrap;}label{display:inline-block;width:40%;margin-right:10%;margin-top:2px;margin-bottom:2px;}input,a,button{background:var(--ifm-background-surface-color);font-size:0.9em;text-transform:none;text-overflow:ellipsis;overflow:hidden;display:inline-block;padding:0 4px;margin:0;width:50%;height:20px;line-height:1.833;text-align:left;}button{color:initial;}button:disabled{color:var(--ifm-color-gray-500);cursor:default;background:var(--ifm-color-gray-300);}input{border:solid 1px var(--ifm-color-gray-500);&:disabled{background:var(--ifm-color-gray-300);}&[type='checkbox']{height:auto;}}.tooltip{left:50%;top:24px;opacity:0;pointer-events:none;transition:opacity 200ms;}&:hover .tooltip{opacity:1;}"]);n.ZP.div.withConfig({displayName:"spinner__SpinnerContainer",componentId:"sc-ok6n2c-0"})(["height:18px;line-height:18px;font-size:10px;> div{white-space:nowrap;left:0;bottom:0;position:absolute;height:18px;padding-left:20px;transition:width 0.5s;}.spinner--fill{background:$primary;color:$white;overflow:hidden;}.spinner--text{color:$black-40;}&.done{height:0 !important;line-height:0;font-size:0;transition:height 0.5s 1s;> div{height:0 !important;transition:height 0.5s 1s;}}"]);n.ZP.div.withConfig({displayName:"info-panel__InfoPanelContent",componentId:"sc-1qy2onu-0"})(["hr{margin:12px -24px;}a{text-decoration:none;display:inline;color:var(--ifm-color-primary);}p{margin-bottom:16px;}.legend{display:inline-block;width:12px;height:12px;}.stat{text-transform:uppercase;font-size:0.833em;b{display:block;font-size:3em;font-weight:bold;line-height:1.833;}}hr{border:none;background:var(--ifm-color-gray-400);height:1px;}.layout{display:table;width:100%;> *{display:table-cell !important;}.col-1-3{width:33.33%;}.col-1-2{width:50%;}.text-right{text-align:right;}.text-center{text-align:center;}}"]);t(4641);var r=t(4996);n.ZP.div.withConfig({displayName:"make-example__DemoContainer",componentId:"sc-is6oih-0"})([".tooltip,.deck-tooltip{position:absolute;padding:4px 12px;background:rgba(0,0,0,0.8);color:var(--ifm-color-white);max-width:300px;font-size:12px;z-index:9;pointer-events:none;white-space:nowrap;}"]),n.ZP.div.withConfig({displayName:"make-example__MapTip",componentId:"sc-is6oih-1"})(["position:absolute;right:12px;bottom:20px;color:var(--ifm-color-white);mix-blend-mode:difference;font-size:14px;@media screen and (max-width:480px){display:none;}"]);var l=t(1116);const d=n.ZP.div.withConfig({displayName:"styled__ExampleHeader",componentId:"sc-1dgi8sb-0"})(["font:bold 20px/28px var(--ifm-font-family-base);color:var(--ifm-color-content-secondary);margin:0 20px;border-bottom:1px solid 20px;display:inline-block;padding:20px 20px 4px 0;"]),p=n.ZP.main.withConfig({displayName:"styled__MainExamples",componentId:"sc-1dgi8sb-1"})(["padding:16px 0;"]),s=n.ZP.main.withConfig({displayName:"styled__ExamplesGroup",componentId:"sc-1dgi8sb-2"})(["display:flex;flex-wrap:wrap;padding:16px;"]),c=n.ZP.a.withConfig({displayName:"styled__ExampleCard",componentId:"sc-1dgi8sb-3"})(["cursor:pointer;text-decoration:none;width:50%;max-width:240px;line-height:0;outline:none;padding:4px;position:relative;img{transition-property:filter;transition-duration:var(--ifm-transition-slow);transition-timing-function:var(--ifm-transition-timing-default);}&:hover{box-shadow:var(--ifm-global-shadow-md);}&:hover img{filter:contrast(0.2);}","{width:33%;min-width:200px;}@media screen and (max-width:632px){width:50%;}"],a),m=n.ZP.div.withConfig({displayName:"styled__ExampleTitle",componentId:"sc-1dgi8sb-4"})(["position:absolute;display:flex;justify-content:center;flex-direction:column;color:var(--ifm-color-white);font-size:1.5em;text-align:center;line-height:initial;width:90%;height:90%;top:5%;left:5%;border:solid 1px var(--ifm-color-white);opacity:0;transition-property:opacity;transition-duration:var(--ifm-transition-slow);transition-timing-function:var(--ifm-transition-timing-default);&:hover{opacity:1;}"]);function g(e,i){let{label:t,items:n}=e;return[o.createElement(d,{key:t+"-header"},t),o.createElement(s,{key:t},n.map((e=>function(e,i){const t=(0,r.Z)(i(e)),{label:n,href:a}=e;return o.createElement(c,{key:n,href:a},o.createElement("img",{width:"100%",src:t,alt:n}),o.createElement(m,null,o.createElement("span",null,n)))}(e,i))))]}function h(e){let{getThumbnail:i}=e;const t=(0,l.V)();return o.createElement(p,null,t.items.map((e=>"category"===e.type?g(e,i):null)))}var f=t(2263);const x=n.ZP.section.withConfig({displayName:"styled__Banner",componentId:"sc-exnbu5-0"})(["position:relative;height:30rem;background:var(--ifm-color-gray-400);color:var(--ifm-color-gray-900);z-index:0;","{height:80vh;}"],a),b=n.ZP.div.withConfig({displayName:"styled__Container",componentId:"sc-exnbu5-1"})(["position:relative;padding:2rem;max-width:80rem;width:100%;height:100%;margin:0;"]),y=(0,n.ZP)(b).withConfig({displayName:"styled__BannerContainer",componentId:"sc-exnbu5-2"})(["position:absolute;bottom:0;height:auto;padding-left:4rem;z-index:0;pointer-events:none;"]),u=n.ZP.div.withConfig({displayName:"styled__HeroExampleContainer",componentId:"sc-exnbu5-3"})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;"]),v=(n.ZP.section.withConfig({displayName:"styled__Section",componentId:"sc-exnbu5-4"})(["&:nth-child(2n + 1){background:var(--ifm-color-gray-300);}"]),n.ZP.h1.withConfig({displayName:"styled__ProjectName",componentId:"sc-exnbu5-5"})(["font-size:5em;line-height:1;text-transform:uppercase;letter-spacing:4px;font-weight:700;margin:0;margin-bottom:16px;"])),w=n.ZP.a.withConfig({displayName:"styled__GetStartedLink",componentId:"sc-exnbu5-6"})(["pointer-events:all;font-size:12px;line-height:44px;letter-spacing:2px;font-weight:bold;margin:24px 0;padding:0 4rem;pointer-events:all;display:inline-block;text-decoration:none;transition:background-color 250ms ease-in,color 250ms ease-in;border:solid 2px var(--ifm-color-primary);color:var(--ifm-color-gray-900);border-image:linear-gradient( to right,var(--ifm-color-gray-700) 0%,var(--ifm-color-gray-400) 100% );border-image-slice:2;&:visited{color:var(--ifm-color-gray-900);}&:active{color:var(--ifm-color-white);}&:hover{color:var(--ifm-color-white);background-color:var(--ifm-color-primary);}"]);function k(e){let{HeroExample:i,children:t}=e;const{siteConfig:n}=(0,f.Z)();return o.createElement(o.Fragment,null,o.createElement(x,null,o.createElement(u,null,i&&o.createElement(i,null)),o.createElement(y,null,o.createElement(v,null,n.title),o.createElement("p",null,n.tagline),o.createElement(w,{href:"./docs/get-started/getting-started"},"GET STARTED"))),t)}}}]); \ No newline at end of file diff --git a/assets/js/9027671b.5a3fbe04.js b/assets/js/9027671b.5a3fbe04.js deleted file mode 100644 index 5cc636dd..00000000 --- a/assets/js/9027671b.5a3fbe04.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2037],{1819:(e,i,t)=>{t.r(i),t.d(i,{assets:()=>p,contentTitle:()=>l,default:()=>g,frontMatter:()=>r,metadata:()=>d,toc:()=>s});var o=t(7462),n=(t(7294),t(3905)),a=t(6613);const r={},l=void 0,d={unversionedId:"index",id:"index",title:"index",description:"/images/examples/${item.docId || item.label.toLowerCase()}.jpg} />",source:"@site/src/examples/index.mdx",sourceDirName:".",slug:"/",permalink:"/examples/",draft:!1,tags:[],version:"current",frontMatter:{},sidebar:"examplesSidebar"},p={},s=[],c={toc:s},m="wrapper";function g(e){let{components:i,...t}=e;return(0,n.kt)(m,(0,o.Z)({},c,t,{components:i,mdxType:"MDXLayout"}),(0,n.kt)(a.h6,{getThumbnail:e=>"/images/examples/"+(e.docId||e.label.toLowerCase())+".jpg",mdxType:"ExamplesIndex"}))}g.isMDXComponent=!0},6613:(e,i,t)=>{t.d(i,{h6:()=>h,SK:()=>k});var o=t(7294),n=t(9521);const a=e=>"@media screen and (max-width: 480px)";n.ZP.div.withConfig({displayName:"styled__PanelContainer",componentId:"sc-oqnqzc-0"})(["font-size:14px;position:absolute;top:0;right:0;width:344px;background:var(--ifm-background-surface-color);box-shadow:var(--ifm-global-shadow-lw);margin:24px;padding:10px 24px;max-height:96%;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;outline:none;z-index:1;","{width:auto;left:0;}"],a),n.ZP.div.withConfig({displayName:"styled__PanelExpander",componentId:"sc-oqnqzc-1"})(["display:none;width:16px;height:16px;font-family:serif;font-size:0.8em;text-align:center;line-height:16px;border-radius:50%;background:",";color:",";","{display:block;}"],(e=>e.$expanded?"none":"var(--ifm-color-gray-900)"),(e=>e.$expanded?"var(--ifm-color-black)":"var(--ifm-color-white)"),a),n.ZP.div.withConfig({displayName:"styled__PanelTitle",componentId:"sc-oqnqzc-2"})(["display:flex;align-items:center;justify-content:space-between;font:bold 1.25em var(--ifm-font-family-base);margin:8px 0;","{cursor:pointer;}"],a),n.ZP.div.withConfig({displayName:"styled__PanelContent",componentId:"sc-oqnqzc-3"})(["div > *{vertical-align:middle;white-space:nowrap;}div > label{display:inline-block;width:40%;margin-right:10%;color:var(--ifm-color-content-secondary);margin-top:2px;margin-bottom:2px;}div > input,div > a,div > button,div > select{font:normal 11px/16px var(--ifm-font-family-base);line-height:20px;text-transform:none;text-overflow:ellipsis;overflow:hidden;display:inline-block;padding:0 4px;width:50%;height:20px;text-align:left;}div > button{color:initial;}div > button:disabled{color:var(--ifm-color-gray-300);cursor:default;background:var(--ifm-color-gray-300);}div > input{border:solid 1px var(--ifm-color-gray-300);&:disabled{background:var(--ifm-color-white);}&[type='checkbox']{height:auto;}}p{margin-bottom:12px;white-space:initial;}","{display:",";}"],a,(e=>e.$expanded?"block":"none")),n.ZP.a.withConfig({displayName:"styled__SourceLink",componentId:"sc-oqnqzc-4"})(["display:block;text-align:right;margin-top:8px;font:bold 12px/20px var(--ifm-font-family-base);color:var(--ifm-color-content-secondary);","{display:",";}"],a,(e=>e.$expanded?"block":"none")),n.ZP.div.withConfig({displayName:"input__InputContainer",componentId:"sc-1myx0c6-0"})(["position:relative;width:100%;&:last-child{margin-bottom:20px;}> *{vertical-align:middle;white-space:nowrap;}label{display:inline-block;width:40%;margin-right:10%;margin-top:2px;margin-bottom:2px;}input,a,button{background:var(--ifm-background-surface-color);font-size:0.9em;text-transform:none;text-overflow:ellipsis;overflow:hidden;display:inline-block;padding:0 4px;margin:0;width:50%;height:20px;line-height:1.833;text-align:left;}button{color:initial;}button:disabled{color:var(--ifm-color-gray-500);cursor:default;background:var(--ifm-color-gray-300);}input{border:solid 1px var(--ifm-color-gray-500);&:disabled{background:var(--ifm-color-gray-300);}&[type='checkbox']{height:auto;}}.tooltip{left:50%;top:24px;opacity:0;pointer-events:none;transition:opacity 200ms;}&:hover .tooltip{opacity:1;}"]);n.ZP.div.withConfig({displayName:"spinner__SpinnerContainer",componentId:"sc-ok6n2c-0"})(["height:18px;line-height:18px;font-size:10px;> div{white-space:nowrap;left:0;bottom:0;position:absolute;height:18px;padding-left:20px;transition:width 0.5s;}.spinner--fill{background:$primary;color:$white;overflow:hidden;}.spinner--text{color:$black-40;}&.done{height:0 !important;line-height:0;font-size:0;transition:height 0.5s 1s;> div{height:0 !important;transition:height 0.5s 1s;}}"]);n.ZP.div.withConfig({displayName:"info-panel__InfoPanelContent",componentId:"sc-1qy2onu-0"})(["hr{margin:12px -24px;}a{text-decoration:none;display:inline;color:var(--ifm-color-primary);}p{margin-bottom:16px;}.legend{display:inline-block;width:12px;height:12px;}.stat{text-transform:uppercase;font-size:0.833em;b{display:block;font-size:3em;font-weight:bold;line-height:1.833;}}hr{border:none;background:var(--ifm-color-gray-400);height:1px;}.layout{display:table;width:100%;> *{display:table-cell !important;}.col-1-3{width:33.33%;}.col-1-2{width:50%;}.text-right{text-align:right;}.text-center{text-align:center;}}"]);t(4641);var r=t(4996);n.ZP.div.withConfig({displayName:"make-example__DemoContainer",componentId:"sc-is6oih-0"})([".tooltip,.deck-tooltip{position:absolute;padding:4px 12px;background:rgba(0,0,0,0.8);color:var(--ifm-color-white);max-width:300px;font-size:12px;z-index:9;pointer-events:none;white-space:nowrap;}"]),n.ZP.div.withConfig({displayName:"make-example__MapTip",componentId:"sc-is6oih-1"})(["position:absolute;right:12px;bottom:20px;color:var(--ifm-color-white);mix-blend-mode:difference;font-size:14px;@media screen and (max-width:480px){display:none;}"]);var l=t(1116);const d=n.ZP.div.withConfig({displayName:"styled__ExampleHeader",componentId:"sc-1dgi8sb-0"})(["font:bold 20px/28px var(--ifm-font-family-base);color:var(--ifm-color-content-secondary);margin:0 20px;border-bottom:1px solid 20px;display:inline-block;padding:20px 20px 4px 0;"]),p=n.ZP.main.withConfig({displayName:"styled__MainExamples",componentId:"sc-1dgi8sb-1"})(["padding:16px 0;"]),s=n.ZP.main.withConfig({displayName:"styled__ExamplesGroup",componentId:"sc-1dgi8sb-2"})(["display:flex;flex-wrap:wrap;padding:16px;"]),c=n.ZP.a.withConfig({displayName:"styled__ExampleCard",componentId:"sc-1dgi8sb-3"})(["cursor:pointer;text-decoration:none;width:50%;max-width:240px;line-height:0;outline:none;padding:4px;position:relative;img{transition-property:filter;transition-duration:var(--ifm-transition-slow);transition-timing-function:var(--ifm-transition-timing-default);}&:hover{box-shadow:var(--ifm-global-shadow-md);}&:hover img{filter:contrast(0.2);}","{width:33%;min-width:200px;}@media screen and (max-width:632px){width:50%;}"],a),m=n.ZP.div.withConfig({displayName:"styled__ExampleTitle",componentId:"sc-1dgi8sb-4"})(["position:absolute;display:flex;justify-content:center;flex-direction:column;color:var(--ifm-color-white);font-size:1.5em;text-align:center;line-height:initial;width:90%;height:90%;top:5%;left:5%;border:solid 1px var(--ifm-color-white);opacity:0;transition-property:opacity;transition-duration:var(--ifm-transition-slow);transition-timing-function:var(--ifm-transition-timing-default);&:hover{opacity:1;}"]);function g(e,i){let{label:t,items:n}=e;return[o.createElement(d,{key:t+"-header"},t),o.createElement(s,{key:t},n.map((e=>function(e,i){const t=(0,r.Z)(i(e)),{label:n,href:a}=e;return o.createElement(c,{key:n,href:a},o.createElement("img",{width:"100%",src:t,alt:n}),o.createElement(m,null,o.createElement("span",null,n)))}(e,i))))]}function h(e){let{getThumbnail:i}=e;const t=(0,l.V)();return o.createElement(p,null,t.items.map((e=>"category"===e.type?g(e,i):null)))}var f=t(2263);const x=n.ZP.section.withConfig({displayName:"styled__Banner",componentId:"sc-exnbu5-0"})(["position:relative;height:30rem;background:var(--ifm-color-gray-400);color:var(--ifm-color-gray-900);z-index:0;","{height:80vh;}"],a),b=n.ZP.div.withConfig({displayName:"styled__Container",componentId:"sc-exnbu5-1"})(["position:relative;padding:2rem;max-width:80rem;width:100%;height:100%;margin:0;"]),y=(0,n.ZP)(b).withConfig({displayName:"styled__BannerContainer",componentId:"sc-exnbu5-2"})(["position:absolute;bottom:0;height:auto;padding-left:4rem;z-index:0;pointer-events:none;"]),u=n.ZP.div.withConfig({displayName:"styled__HeroExampleContainer",componentId:"sc-exnbu5-3"})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;"]),v=(n.ZP.section.withConfig({displayName:"styled__Section",componentId:"sc-exnbu5-4"})(["&:nth-child(2n + 1){background:var(--ifm-color-gray-300);}"]),n.ZP.h1.withConfig({displayName:"styled__ProjectName",componentId:"sc-exnbu5-5"})(["font-size:5em;line-height:1;text-transform:uppercase;letter-spacing:4px;font-weight:700;margin:0;margin-bottom:16px;"])),w=n.ZP.a.withConfig({displayName:"styled__GetStartedLink",componentId:"sc-exnbu5-6"})(["pointer-events:all;font-size:12px;line-height:44px;letter-spacing:2px;font-weight:bold;margin:24px 0;padding:0 4rem;pointer-events:all;display:inline-block;text-decoration:none;transition:background-color 250ms ease-in,color 250ms ease-in;border:solid 2px var(--ifm-color-primary);color:var(--ifm-color-gray-900);border-image:linear-gradient( to right,var(--ifm-color-gray-700) 0%,var(--ifm-color-gray-400) 100% );border-image-slice:2;&:visited{color:var(--ifm-color-gray-900);}&:active{color:var(--ifm-color-white);}&:hover{color:var(--ifm-color-white);background-color:var(--ifm-color-primary);}"]);function k(e){let{HeroExample:i,children:t}=e;const{siteConfig:n}=(0,f.Z)();return o.createElement(o.Fragment,null,o.createElement(x,null,o.createElement(u,null,i&&o.createElement(i,null)),o.createElement(y,null,o.createElement(v,null,n.title),o.createElement("p",null,n.tagline),o.createElement(w,{href:"./docs/get-started/getting-started"},"GET STARTED"))),t)}}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.5a8e4774.js b/assets/js/935f2afb.5a8e4774.js new file mode 100644 index 00000000..9cbd41e7 --- /dev/null +++ b/assets/js/935f2afb.5a8e4774.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).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":"category","label":"Overview","items":[{"type":"link","label":"deck.gl-community","href":"/deck.gl-community/docs/","docId":"README"},{"type":"link","label":"What\'s New","href":"/deck.gl-community/docs/whats-new","docId":"whats-new"},{"type":"link","label":"Upgrade Guide","href":"/deck.gl-community/docs/upgrade-guide","docId":"upgrade-guide"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Submodule API Reference","items":[{"type":"category","label":"deck.gl-bing-maps","items":[{"type":"link","label":"Overview","href":"/deck.gl-community/docs/modules/bing-maps/","docId":"modules/bing-maps/README"}],"collapsed":true,"collapsible":true},{"type":"category","label":"deck-graph-layers","items":[{"type":"link","label":"Introduction","href":"/deck.gl-community/docs/modules/react-graph-layers/","docId":"modules/react-graph-layers/README"},{"type":"link","label":"Versioning Policy","href":"/deck.gl-community/docs/modules/react-graph-layers/version-policy","docId":"modules/react-graph-layers/version-policy"},{"type":"category","label":"GraphGL","items":[{"type":"link","label":"GraphGL","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl","docId":"modules/react-graph-layers/api-reference/graphgl"},{"type":"link","label":"Node Style","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style","docId":"modules/react-graph-layers/api-reference/node-style"},{"type":"link","label":"Edge Style","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style","docId":"modules/react-graph-layers/api-reference/edge-style"},{"type":"link","label":"Interactions","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions","docId":"modules/react-graph-layers/api-reference/interactions"},{"type":"link","label":"Viewport","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport","docId":"modules/react-graph-layers/api-reference/viewport"},{"type":"link","label":"Layout","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout","docId":"modules/react-graph-layers/api-reference/layout"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Node style","items":[{"type":"link","label":"CIRCLE","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle","docId":"modules/react-graph-layers/api-reference/node-style-circle"},{"type":"link","label":"RECTANGLE","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle","docId":"modules/react-graph-layers/api-reference/node-style-rectangle"},{"type":"link","label":"MARKER","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker","docId":"modules/react-graph-layers/api-reference/node-style-marker"},{"type":"link","label":"LABEL","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label","docId":"modules/react-graph-layers/api-reference/node-style-label"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Edge decorators","items":[{"type":"link","label":"LABEL","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label","docId":"modules/react-graph-layers/api-reference/edge-style-label"},{"type":"link","label":"FLOW","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow","docId":"modules/react-graph-layers/api-reference/edge-style-flow"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Layouts","items":[{"type":"link","label":"Simple Layout","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout","docId":"modules/react-graph-layers/api-reference/simple-layout"},{"type":"link","label":"D3 Force Layout","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout","docId":"modules/react-graph-layers/api-reference/d3-layout"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Core Data Structures","items":[{"type":"link","label":"Graph Class","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph","docId":"modules/react-graph-layers/api-reference/graph"},{"type":"link","label":"Node Class","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node","docId":"modules/react-graph-layers/api-reference/node"},{"type":"link","label":"Edge Class","href":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge","docId":"modules/react-graph-layers/api-reference/edge"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Advanced","items":[{"type":"link","label":"Write your own custom layout","href":"/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout","docId":"modules/react-graph-layers/advanced/custom-layout"},{"type":"link","label":"Experimental Layouts","href":"/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery","docId":"modules/react-graph-layers/advanced/gallery"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true},{"type":"category","label":"editor-core","items":[{"type":"category","label":"Overview","items":[{"type":"link","label":"Overview","href":"/deck.gl-community/docs/modules/editor-core/","docId":"modules/editor-core/README"},{"type":"link","label":"What\'s New","href":"/deck.gl-community/docs/modules/editor-core/whats-new","docId":"modules/editor-core/whats-new"},{"type":"link","label":"Roadmap","href":"/deck.gl-community/docs/modules/editor-core/roadmap","docId":"modules/editor-core/roadmap"},{"type":"link","label":"FAQ","href":"/deck.gl-community/docs/modules/editor-core/faq","docId":"modules/editor-core/faq"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Get Started","items":[{"type":"link","label":"Installation","href":"/deck.gl-community/docs/modules/editor-core/get-started/installing","docId":"modules/editor-core/get-started/installing"},{"type":"link","label":"Basic usage","href":"/deck.gl-community/docs/modules/editor-core/get-started/basic-usage","docId":"modules/editor-core/get-started/basic-usage"},{"type":"link","label":"Using Html Overlays","href":"/deck.gl-community/docs/modules/editor-core/get-started/html-overlays","docId":"modules/editor-core/get-started/html-overlays"}],"collapsed":true,"collapsible":true},{"type":"category","label":"API Reference (Layers)","items":[{"type":"link","label":"EditableGeoJsonLayer","href":"/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer","docId":"modules/editor-layers/api-reference/editable-geojson-layer"},{"type":"link","label":"SelectionLayer","href":"/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer","docId":"modules/editor-layers/api-reference/selection-layer"},{"type":"link","label":"PathMarkerLayer","href":"/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer","docId":"modules/editor-layers/api-reference/path-marker-layer"},{"type":"link","label":"MeshLayer","href":"/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer","docId":"modules/editor-layers/api-reference/mesh-layer"},{"type":"link","label":"Outline (Shader Module)","href":"/deck.gl-community/docs/modules/editor-layers/api-reference/outline","docId":"modules/editor-layers/api-reference/outline"}],"collapsed":true,"collapsible":true},{"type":"category","label":"API Reference (Modes)","items":[{"type":"link","label":"Editing Modes","href":"/deck.gl-community/docs/modules/edit-modes/api-reference/","docId":"modules/edit-modes/api-reference/README"}],"collapsed":true,"collapsible":true},{"type":"category","label":"API Reference (Overlays)","items":[{"type":"link","label":"HtmlOverlay","href":"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay","docId":"modules/react-overlays/api-reference/html-overlay"},{"type":"link","label":"HtmlClusterOverlay","href":"/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay","docId":"modules/react-overlays/api-reference/html-cluster-overlay"},{"type":"link","label":"HtmlOverlayItem","href":"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay-item","docId":"modules/react-overlays/api-reference/html-overlay-item"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true}]},"docs":{"modules/bing-maps/README":{"id":"modules/bing-maps/README","title":"Overview","description":"This module allows deck.gl to be used as a Bing Maps custom layer.","sidebar":"tutorialSidebar"},"modules/edit-modes/api-reference/README":{"id":"modules/edit-modes/api-reference/README","title":"Editing Modes","description":"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.","sidebar":"tutorialSidebar"},"modules/edit-modes/README":{"id":"modules/edit-modes/README","title":"Editing Modes","description":"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries."},"modules/editor-core/faq":{"id":"modules/editor-core/faq","title":"FAQ","description":"Will this replace deck.gl?","sidebar":"tutorialSidebar"},"modules/editor-core/get-started/basic-usage":{"id":"modules/editor-core/get-started/basic-usage","title":"Basic usage","description":"Live example on codesandbox","sidebar":"tutorialSidebar"},"modules/editor-core/get-started/html-overlays":{"id":"modules/editor-core/get-started/html-overlays","title":"Using Html Overlays","description":"HTML overlays are very easy to use and take advantage of react\'s architecture.","sidebar":"tutorialSidebar"},"modules/editor-core/get-started/installing":{"id":"modules/editor-core/get-started/installing","title":"Installation","description":"nebula.gl will automatically install a compatible version of deck.gl.","sidebar":"tutorialSidebar"},"modules/editor-core/README":{"id":"modules/editor-core/README","title":"Overview","description":"nebula.gl provides editable and interactive map overlay layers, built using the power of deck.gl.","sidebar":"tutorialSidebar"},"modules/editor-core/roadmap":{"id":"modules/editor-core/roadmap","title":"Roadmap","description":"v1.0","sidebar":"tutorialSidebar"},"modules/editor-core/whats-new":{"id":"modules/editor-core/whats-new","title":"What\'s New","description":"This page contains highlights of each nebula.gl release.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/editable-geojson-layer":{"id":"modules/editor-layers/api-reference/editable-geojson-layer","title":"EditableGeoJsonLayer","description":"The Editable GeoJSON layer accepts a GeoJSON FeatureCollection and renders the features as editable polygons, lines, and points.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/mesh-layer":{"id":"modules/editor-layers/api-reference/mesh-layer","title":"MeshLayer","description":"The Mesh Layer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/outline":{"id":"modules/editor-layers/api-reference/outline","title":"Outline (Shader Module)","description":"The outline module is useful when you are rendering 2D elements in the same plane (on top of each other), but want to show some kind of outline or shadow to indicate which element is logically on top.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/path-marker-layer":{"id":"modules/editor-layers/api-reference/path-marker-layer","title":"PathMarkerLayer","description":"Create small markers along a path (defaults to arrows showing \\"direction\\").","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/selection-layer":{"id":"modules/editor-layers/api-reference/selection-layer","title":"SelectionLayer","description":"This layer can be used to select deck.gl objects using mouse drawing.","sidebar":"tutorialSidebar"},"modules/experimental-layers/README":{"id":"modules/experimental-layers/README","title":"Overview","description":"This module provides a suite of experimental layers for deck.gl."},"modules/graph-layers/README":{"id":"modules/graph-layers/README","title":"README","description":""},"modules/layers/README":{"id":"modules/layers/README","title":"Overview","description":"This module provides a suite of non-official layers for deck.gl."},"modules/react-graph-layers/advanced/custom-layout":{"id":"modules/react-graph-layers/advanced/custom-layout","title":"Write your own custom layout","description":"Here\'s the method you will likely to implement when creating your own custom layout:","sidebar":"tutorialSidebar"},"modules/react-graph-layers/advanced/gallery":{"id":"modules/react-graph-layers/advanced/gallery","title":"Experimental Layouts","description":"","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/d3-layout":{"id":"modules/react-graph-layers/api-reference/d3-layout","title":"D3 Force Layout","description":"This layout is an integration between d3-force and react-graph-layers to render the layout in a WebGL context.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge":{"id":"modules/react-graph-layers/api-reference/edge","title":"Edge Class","description":"The Edge class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge-style":{"id":"modules/react-graph-layers/api-reference/edge-style","title":"Edge Style","description":"Usage","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge-style-flow":{"id":"modules/react-graph-layers/api-reference/edge-style-flow","title":"FLOW","description":"color (String | Array | Function, optional)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge-style-label":{"id":"modules/react-graph-layers/api-reference/edge-style-label","title":"LABEL","description":"text (String | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/graph":{"id":"modules/react-graph-layers/api-reference/graph","title":"Graph Class","description":"The Graph class is the base class of the graph.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/graphgl":{"id":"modules/react-graph-layers/api-reference/graphgl","title":"GraphGL","description":"Usage","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/interactions":{"id":"modules/react-graph-layers/api-reference/interactions","title":"Interactions","description":"In this chapter, you\'ll learn about how to interact with the graph.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/layout":{"id":"modules/react-graph-layers/api-reference/layout","title":"Layout","description":"Use one of the layouts provided by react-graph-layers. Right now react-graph-layers provides D3-Force and Simple layout for basic usage.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node":{"id":"modules/react-graph-layers/api-reference/node","title":"Node Class","description":"The Node class is the base class of the node, which provides a list of basic util functions to be used through out the applications.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style":{"id":"modules/react-graph-layers/api-reference/node-style","title":"Node Style","description":"Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-circle":{"id":"modules/react-graph-layers/api-reference/node-style-circle","title":"CIRCLE","description":"fill (String | Array | Function, optional)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-label":{"id":"modules/react-graph-layers/api-reference/node-style-label","title":"LABEL","description":"text (String | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-marker":{"id":"modules/react-graph-layers/api-reference/node-style-marker","title":"MARKER","description":"marker (String | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-rectangle":{"id":"modules/react-graph-layers/api-reference/node-style-rectangle","title":"RECTANGLE","description":"width (Number | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/simple-layout":{"id":"modules/react-graph-layers/api-reference/simple-layout","title":"Simple Layout","description":"This example demonstrates how to render a pre-layout graph using react-graph-layers.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/viewport":{"id":"modules/react-graph-layers/api-reference/viewport","title":"Viewport","description":"initialViewState (Object, optional)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/get-started/getting-started":{"id":"modules/react-graph-layers/get-started/getting-started","title":"getting-started","description":""},"modules/react-graph-layers/README":{"id":"modules/react-graph-layers/README","title":"Introduction","description":"react-graph-layers provides React components for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/version-policy":{"id":"modules/react-graph-layers/version-policy","title":"Versioning Policy","description":"TBD","sidebar":"tutorialSidebar"},"modules/react-overlays/api-reference/html-cluster-overlay":{"id":"modules/react-overlays/api-reference/html-cluster-overlay","title":"HtmlClusterOverlay","description":"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map","sidebar":"tutorialSidebar"},"modules/react-overlays/api-reference/html-overlay":{"id":"modules/react-overlays/api-reference/html-overlay","title":"HtmlOverlay","description":"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map.","sidebar":"tutorialSidebar"},"modules/react-overlays/api-reference/html-overlay-item":{"id":"modules/react-overlays/api-reference/html-overlay-item","title":"HtmlOverlayItem","description":"This is an HTML item that will be rendered inside","sidebar":"tutorialSidebar"},"README":{"id":"README","title":"deck.gl-community","description":"This repository contains a collection of community supported modules for deck.gl.","sidebar":"tutorialSidebar"},"upgrade-guide":{"id":"upgrade-guide","title":"Upgrade Guide","description":"","sidebar":"tutorialSidebar"},"whats-new":{"id":"whats-new","title":"What\'s New","description":"@deck.gl-community/layers@9.0.0","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/935f2afb.893f1d35.js b/assets/js/935f2afb.893f1d35.js deleted file mode 100644 index 44f3832a..00000000 --- a/assets/js/935f2afb.893f1d35.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).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":"category","label":"Overview","items":[{"type":"link","label":"deck.gl-community","href":"/docs/","docId":"README"},{"type":"link","label":"What\'s New","href":"/docs/whats-new","docId":"whats-new"},{"type":"link","label":"Upgrade Guide","href":"/docs/upgrade-guide","docId":"upgrade-guide"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Submodule API Reference","items":[{"type":"category","label":"deck.gl-bing-maps","items":[{"type":"link","label":"Overview","href":"/docs/modules/bing-maps/","docId":"modules/bing-maps/README"}],"collapsed":true,"collapsible":true},{"type":"category","label":"deck-graph-layers","items":[{"type":"link","label":"Introduction","href":"/docs/modules/react-graph-layers/","docId":"modules/react-graph-layers/README"},{"type":"link","label":"Versioning Policy","href":"/docs/modules/react-graph-layers/version-policy","docId":"modules/react-graph-layers/version-policy"},{"type":"category","label":"GraphGL","items":[{"type":"link","label":"GraphGL","href":"/docs/modules/react-graph-layers/api-reference/graphgl","docId":"modules/react-graph-layers/api-reference/graphgl"},{"type":"link","label":"Node Style","href":"/docs/modules/react-graph-layers/api-reference/node-style","docId":"modules/react-graph-layers/api-reference/node-style"},{"type":"link","label":"Edge Style","href":"/docs/modules/react-graph-layers/api-reference/edge-style","docId":"modules/react-graph-layers/api-reference/edge-style"},{"type":"link","label":"Interactions","href":"/docs/modules/react-graph-layers/api-reference/interactions","docId":"modules/react-graph-layers/api-reference/interactions"},{"type":"link","label":"Viewport","href":"/docs/modules/react-graph-layers/api-reference/viewport","docId":"modules/react-graph-layers/api-reference/viewport"},{"type":"link","label":"Layout","href":"/docs/modules/react-graph-layers/api-reference/layout","docId":"modules/react-graph-layers/api-reference/layout"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Node style","items":[{"type":"link","label":"CIRCLE","href":"/docs/modules/react-graph-layers/api-reference/node-style-circle","docId":"modules/react-graph-layers/api-reference/node-style-circle"},{"type":"link","label":"RECTANGLE","href":"/docs/modules/react-graph-layers/api-reference/node-style-rectangle","docId":"modules/react-graph-layers/api-reference/node-style-rectangle"},{"type":"link","label":"MARKER","href":"/docs/modules/react-graph-layers/api-reference/node-style-marker","docId":"modules/react-graph-layers/api-reference/node-style-marker"},{"type":"link","label":"LABEL","href":"/docs/modules/react-graph-layers/api-reference/node-style-label","docId":"modules/react-graph-layers/api-reference/node-style-label"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Edge decorators","items":[{"type":"link","label":"LABEL","href":"/docs/modules/react-graph-layers/api-reference/edge-style-label","docId":"modules/react-graph-layers/api-reference/edge-style-label"},{"type":"link","label":"FLOW","href":"/docs/modules/react-graph-layers/api-reference/edge-style-flow","docId":"modules/react-graph-layers/api-reference/edge-style-flow"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Layouts","items":[{"type":"link","label":"Simple Layout","href":"/docs/modules/react-graph-layers/api-reference/simple-layout","docId":"modules/react-graph-layers/api-reference/simple-layout"},{"type":"link","label":"D3 Force Layout","href":"/docs/modules/react-graph-layers/api-reference/d3-layout","docId":"modules/react-graph-layers/api-reference/d3-layout"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Core Data Structures","items":[{"type":"link","label":"Graph Class","href":"/docs/modules/react-graph-layers/api-reference/graph","docId":"modules/react-graph-layers/api-reference/graph"},{"type":"link","label":"Node Class","href":"/docs/modules/react-graph-layers/api-reference/node","docId":"modules/react-graph-layers/api-reference/node"},{"type":"link","label":"Edge Class","href":"/docs/modules/react-graph-layers/api-reference/edge","docId":"modules/react-graph-layers/api-reference/edge"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Advanced","items":[{"type":"link","label":"Write your own custom layout","href":"/docs/modules/react-graph-layers/advanced/custom-layout","docId":"modules/react-graph-layers/advanced/custom-layout"},{"type":"link","label":"Experimental Layouts","href":"/docs/modules/react-graph-layers/advanced/gallery","docId":"modules/react-graph-layers/advanced/gallery"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true},{"type":"category","label":"editor-core","items":[{"type":"category","label":"Overview","items":[{"type":"link","label":"Overview","href":"/docs/modules/editor-core/","docId":"modules/editor-core/README"},{"type":"link","label":"What\'s New","href":"/docs/modules/editor-core/whats-new","docId":"modules/editor-core/whats-new"},{"type":"link","label":"Roadmap","href":"/docs/modules/editor-core/roadmap","docId":"modules/editor-core/roadmap"},{"type":"link","label":"FAQ","href":"/docs/modules/editor-core/faq","docId":"modules/editor-core/faq"}],"collapsed":true,"collapsible":true},{"type":"category","label":"Get Started","items":[{"type":"link","label":"Installation","href":"/docs/modules/editor-core/get-started/installing","docId":"modules/editor-core/get-started/installing"},{"type":"link","label":"Basic usage","href":"/docs/modules/editor-core/get-started/basic-usage","docId":"modules/editor-core/get-started/basic-usage"},{"type":"link","label":"Using Html Overlays","href":"/docs/modules/editor-core/get-started/html-overlays","docId":"modules/editor-core/get-started/html-overlays"}],"collapsed":true,"collapsible":true},{"type":"category","label":"API Reference (Layers)","items":[{"type":"link","label":"EditableGeoJsonLayer","href":"/docs/modules/editor-layers/api-reference/editable-geojson-layer","docId":"modules/editor-layers/api-reference/editable-geojson-layer"},{"type":"link","label":"SelectionLayer","href":"/docs/modules/editor-layers/api-reference/selection-layer","docId":"modules/editor-layers/api-reference/selection-layer"},{"type":"link","label":"PathMarkerLayer","href":"/docs/modules/editor-layers/api-reference/path-marker-layer","docId":"modules/editor-layers/api-reference/path-marker-layer"},{"type":"link","label":"MeshLayer","href":"/docs/modules/editor-layers/api-reference/mesh-layer","docId":"modules/editor-layers/api-reference/mesh-layer"},{"type":"link","label":"Outline (Shader Module)","href":"/docs/modules/editor-layers/api-reference/outline","docId":"modules/editor-layers/api-reference/outline"}],"collapsed":true,"collapsible":true},{"type":"category","label":"API Reference (Modes)","items":[{"type":"link","label":"Editing Modes","href":"/docs/modules/edit-modes/api-reference/","docId":"modules/edit-modes/api-reference/README"}],"collapsed":true,"collapsible":true},{"type":"category","label":"API Reference (Overlays)","items":[{"type":"link","label":"HtmlOverlay","href":"/docs/modules/react-overlays/api-reference/html-overlay","docId":"modules/react-overlays/api-reference/html-overlay"},{"type":"link","label":"HtmlClusterOverlay","href":"/docs/modules/react-overlays/api-reference/html-cluster-overlay","docId":"modules/react-overlays/api-reference/html-cluster-overlay"},{"type":"link","label":"HtmlOverlayItem","href":"/docs/modules/react-overlays/api-reference/html-overlay-item","docId":"modules/react-overlays/api-reference/html-overlay-item"}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true}],"collapsed":true,"collapsible":true}]},"docs":{"modules/bing-maps/README":{"id":"modules/bing-maps/README","title":"Overview","description":"This module allows deck.gl to be used as a Bing Maps custom layer.","sidebar":"tutorialSidebar"},"modules/edit-modes/api-reference/README":{"id":"modules/edit-modes/api-reference/README","title":"Editing Modes","description":"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.","sidebar":"tutorialSidebar"},"modules/edit-modes/README":{"id":"modules/edit-modes/README","title":"Editing Modes","description":"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries."},"modules/editor-core/faq":{"id":"modules/editor-core/faq","title":"FAQ","description":"Will this replace deck.gl?","sidebar":"tutorialSidebar"},"modules/editor-core/get-started/basic-usage":{"id":"modules/editor-core/get-started/basic-usage","title":"Basic usage","description":"Live example on codesandbox","sidebar":"tutorialSidebar"},"modules/editor-core/get-started/html-overlays":{"id":"modules/editor-core/get-started/html-overlays","title":"Using Html Overlays","description":"HTML overlays are very easy to use and take advantage of react\'s architecture.","sidebar":"tutorialSidebar"},"modules/editor-core/get-started/installing":{"id":"modules/editor-core/get-started/installing","title":"Installation","description":"nebula.gl will automatically install a compatible version of deck.gl.","sidebar":"tutorialSidebar"},"modules/editor-core/README":{"id":"modules/editor-core/README","title":"Overview","description":"nebula.gl provides editable and interactive map overlay layers, built using the power of deck.gl.","sidebar":"tutorialSidebar"},"modules/editor-core/roadmap":{"id":"modules/editor-core/roadmap","title":"Roadmap","description":"v1.0","sidebar":"tutorialSidebar"},"modules/editor-core/whats-new":{"id":"modules/editor-core/whats-new","title":"What\'s New","description":"This page contains highlights of each nebula.gl release.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/editable-geojson-layer":{"id":"modules/editor-layers/api-reference/editable-geojson-layer","title":"EditableGeoJsonLayer","description":"The Editable GeoJSON layer accepts a GeoJSON FeatureCollection and renders the features as editable polygons, lines, and points.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/mesh-layer":{"id":"modules/editor-layers/api-reference/mesh-layer","title":"MeshLayer","description":"The Mesh Layer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/outline":{"id":"modules/editor-layers/api-reference/outline","title":"Outline (Shader Module)","description":"The outline module is useful when you are rendering 2D elements in the same plane (on top of each other), but want to show some kind of outline or shadow to indicate which element is logically on top.","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/path-marker-layer":{"id":"modules/editor-layers/api-reference/path-marker-layer","title":"PathMarkerLayer","description":"Create small markers along a path (defaults to arrows showing \\"direction\\").","sidebar":"tutorialSidebar"},"modules/editor-layers/api-reference/selection-layer":{"id":"modules/editor-layers/api-reference/selection-layer","title":"SelectionLayer","description":"This layer can be used to select deck.gl objects using mouse drawing.","sidebar":"tutorialSidebar"},"modules/experimental-layers/README":{"id":"modules/experimental-layers/README","title":"Overview","description":"This module provides a suite of experimental layers for deck.gl."},"modules/graph-layers/README":{"id":"modules/graph-layers/README","title":"README","description":""},"modules/layers/README":{"id":"modules/layers/README","title":"Overview","description":"This module provides a suite of non-official layers for deck.gl."},"modules/react-graph-layers/advanced/custom-layout":{"id":"modules/react-graph-layers/advanced/custom-layout","title":"Write your own custom layout","description":"Here\'s the method you will likely to implement when creating your own custom layout:","sidebar":"tutorialSidebar"},"modules/react-graph-layers/advanced/gallery":{"id":"modules/react-graph-layers/advanced/gallery","title":"Experimental Layouts","description":"","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/d3-layout":{"id":"modules/react-graph-layers/api-reference/d3-layout","title":"D3 Force Layout","description":"This layout is an integration between d3-force and react-graph-layers to render the layout in a WebGL context.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge":{"id":"modules/react-graph-layers/api-reference/edge","title":"Edge Class","description":"The Edge class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge-style":{"id":"modules/react-graph-layers/api-reference/edge-style","title":"Edge Style","description":"Usage","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge-style-flow":{"id":"modules/react-graph-layers/api-reference/edge-style-flow","title":"FLOW","description":"color (String | Array | Function, optional)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/edge-style-label":{"id":"modules/react-graph-layers/api-reference/edge-style-label","title":"LABEL","description":"text (String | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/graph":{"id":"modules/react-graph-layers/api-reference/graph","title":"Graph Class","description":"The Graph class is the base class of the graph.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/graphgl":{"id":"modules/react-graph-layers/api-reference/graphgl","title":"GraphGL","description":"Usage","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/interactions":{"id":"modules/react-graph-layers/api-reference/interactions","title":"Interactions","description":"In this chapter, you\'ll learn about how to interact with the graph.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/layout":{"id":"modules/react-graph-layers/api-reference/layout","title":"Layout","description":"Use one of the layouts provided by react-graph-layers. Right now react-graph-layers provides D3-Force and Simple layout for basic usage.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node":{"id":"modules/react-graph-layers/api-reference/node","title":"Node Class","description":"The Node class is the base class of the node, which provides a list of basic util functions to be used through out the applications.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style":{"id":"modules/react-graph-layers/api-reference/node-style","title":"Node Style","description":"Node accessors control the way how users want to render nodes. Layers provide the flexibility that users can add several visual layers to represent a node, such as adding circles, icons, and text labels.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-circle":{"id":"modules/react-graph-layers/api-reference/node-style-circle","title":"CIRCLE","description":"fill (String | Array | Function, optional)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-label":{"id":"modules/react-graph-layers/api-reference/node-style-label","title":"LABEL","description":"text (String | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-marker":{"id":"modules/react-graph-layers/api-reference/node-style-marker","title":"MARKER","description":"marker (String | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/node-style-rectangle":{"id":"modules/react-graph-layers/api-reference/node-style-rectangle","title":"RECTANGLE","description":"width (Number | Function, required)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/simple-layout":{"id":"modules/react-graph-layers/api-reference/simple-layout","title":"Simple Layout","description":"This example demonstrates how to render a pre-layout graph using react-graph-layers.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/api-reference/viewport":{"id":"modules/react-graph-layers/api-reference/viewport","title":"Viewport","description":"initialViewState (Object, optional)","sidebar":"tutorialSidebar"},"modules/react-graph-layers/get-started/getting-started":{"id":"modules/react-graph-layers/get-started/getting-started","title":"getting-started","description":""},"modules/react-graph-layers/README":{"id":"modules/react-graph-layers/README","title":"Introduction","description":"react-graph-layers provides React components for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With react-graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.","sidebar":"tutorialSidebar"},"modules/react-graph-layers/version-policy":{"id":"modules/react-graph-layers/version-policy","title":"Versioning Policy","description":"TBD","sidebar":"tutorialSidebar"},"modules/react-overlays/api-reference/html-cluster-overlay":{"id":"modules/react-overlays/api-reference/html-cluster-overlay","title":"HtmlClusterOverlay","description":"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map","sidebar":"tutorialSidebar"},"modules/react-overlays/api-reference/html-overlay":{"id":"modules/react-overlays/api-reference/html-overlay","title":"HtmlOverlay","description":"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map.","sidebar":"tutorialSidebar"},"modules/react-overlays/api-reference/html-overlay-item":{"id":"modules/react-overlays/api-reference/html-overlay-item","title":"HtmlOverlayItem","description":"This is an HTML item that will be rendered inside","sidebar":"tutorialSidebar"},"README":{"id":"README","title":"deck.gl-community","description":"This repository contains a collection of community supported modules for deck.gl.","sidebar":"tutorialSidebar"},"upgrade-guide":{"id":"upgrade-guide","title":"Upgrade Guide","description":"","sidebar":"tutorialSidebar"},"whats-new":{"id":"whats-new","title":"What\'s New","description":"@deck.gl-community/layers@9.0.0","sidebar":"tutorialSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/9451ee1e.19eaafa7.js b/assets/js/9451ee1e.71ced60a.js similarity index 55% rename from assets/js/9451ee1e.19eaafa7.js rename to assets/js/9451ee1e.71ced60a.js index 83d450c9..53d8ab1f 100644 --- a/assets/js/9451ee1e.19eaafa7.js +++ b/assets/js/9451ee1e.71ced60a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5948],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>f});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function i(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=o.createContext({}),c=function(e){var t=o.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},m=function(e){var t=c(e.components);return o.createElement(p.Provider,{value:t},e.children)},u="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),u=c(r),d=n,f=u["".concat(p,".").concat(d)]||u[d]||s[d]||a;return r?o.createElement(f,i(i({ref:t},m),{},{components:r})):o.createElement(f,i({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:n,i[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>s,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var o=r(7462),n=(r(7294),r(3905));const a={},i="Viewport",l={unversionedId:"modules/react-graph-layers/api-reference/viewport",id:"modules/react-graph-layers/api-reference/viewport",title:"Viewport",description:"initialViewState (Object, optional)",source:"@site/../docs/modules/react-graph-layers/api-reference/viewport.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/viewport",permalink:"/docs/modules/react-graph-layers/api-reference/viewport",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/viewport.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Interactions",permalink:"/docs/modules/react-graph-layers/api-reference/interactions"},next:{title:"Layout",permalink:"/docs/modules/react-graph-layers/api-reference/layout"}},p={},c=[{value:"initialViewState (Object, optional)",id:"initialviewstate-object-optional",level:3},{value:"minZoom (Number, optional)",id:"minzoom-number-optional",level:3},{value:"maxZoom (Number, optional)",id:"maxzoom-number-optional",level:3},{value:"viewportPadding (Number, optional)",id:"viewportpadding-number-optional",level:3}],m={toc:c},u="wrapper";function s(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,o.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"viewport"},"Viewport"),(0,n.kt)("h3",{id:"initialviewstate-object-optional"},"initialViewState (Object, optional)"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"initialViewState={{\n target: [0, 0],\n zoom: 1,\n}}\n")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"target (","[x: Number, y: Number]",", optional): The target origin to the center of the view."),(0,n.kt)("li",{parentName:"ul"},"zoom (Number, optional): The zoom level of the view.")),(0,n.kt)("h3",{id:"minzoom-number-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"minZoom")," (Number, optional)"),(0,n.kt)("p",null,"A minimum scale factor for zoom level of the graph."),(0,n.kt)("h3",{id:"maxzoom-number-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"maxZoom")," (Number, optional)"),(0,n.kt)("p",null,"A maximum scale factor for zoom level of the graph."),(0,n.kt)("h3",{id:"viewportpadding-number-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"viewportPadding")," (Number, optional)"),(0,n.kt)("p",null,"Padding for fitting entire graph in the screen. (pixel)"))}s.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5948],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>f});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function i(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=o.createContext({}),c=function(e){var t=o.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},m=function(e){var t=c(e.components);return o.createElement(p.Provider,{value:t},e.children)},u="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),u=c(r),d=n,f=u["".concat(p,".").concat(d)]||u[d]||s[d]||a;return r?o.createElement(f,i(i({ref:t},m),{},{components:r})):o.createElement(f,i({ref:t},m))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[u]="string"==typeof e?e:n,i[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>s,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var o=r(7462),n=(r(7294),r(3905));const a={},i="Viewport",l={unversionedId:"modules/react-graph-layers/api-reference/viewport",id:"modules/react-graph-layers/api-reference/viewport",title:"Viewport",description:"initialViewState (Object, optional)",source:"@site/../docs/modules/react-graph-layers/api-reference/viewport.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/viewport",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/viewport.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Interactions",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions"},next:{title:"Layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout"}},p={},c=[{value:"initialViewState (Object, optional)",id:"initialviewstate-object-optional",level:3},{value:"minZoom (Number, optional)",id:"minzoom-number-optional",level:3},{value:"maxZoom (Number, optional)",id:"maxzoom-number-optional",level:3},{value:"viewportPadding (Number, optional)",id:"viewportpadding-number-optional",level:3}],m={toc:c},u="wrapper";function s(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,o.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"viewport"},"Viewport"),(0,n.kt)("h3",{id:"initialviewstate-object-optional"},"initialViewState (Object, optional)"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"initialViewState={{\n target: [0, 0],\n zoom: 1,\n}}\n")),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"target (","[x: Number, y: Number]",", optional): The target origin to the center of the view."),(0,n.kt)("li",{parentName:"ul"},"zoom (Number, optional): The zoom level of the view.")),(0,n.kt)("h3",{id:"minzoom-number-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"minZoom")," (Number, optional)"),(0,n.kt)("p",null,"A minimum scale factor for zoom level of the graph."),(0,n.kt)("h3",{id:"maxzoom-number-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"maxZoom")," (Number, optional)"),(0,n.kt)("p",null,"A maximum scale factor for zoom level of the graph."),(0,n.kt)("h3",{id:"viewportpadding-number-optional"},(0,n.kt)("inlineCode",{parentName:"h3"},"viewportPadding")," (Number, optional)"),(0,n.kt)("p",null,"Padding for fitting entire graph in the screen. (pixel)"))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9885bcf3.983b7985.js b/assets/js/9885bcf3.b6429e69.js similarity index 53% rename from assets/js/9885bcf3.983b7985.js rename to assets/js/9885bcf3.b6429e69.js index e75c660f..ef03cdec 100644 --- a/assets/js/9885bcf3.983b7985.js +++ b/assets/js/9885bcf3.b6429e69.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3791],{3905:(e,r,t)=>{t.d(r,{Zo:()=>p,kt:()=>d});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=n.createContext({}),s=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},p=function(e){var r=s(e.components);return n.createElement(l.Provider,{value:r},e.children)},u="mdxType",y={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},m=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),u=s(t),m=o,d=u["".concat(l,".").concat(m)]||u[m]||y[m]||a;return t?n.createElement(d,i(i({ref:r},p),{},{components:t})):n.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,i=new Array(a);i[0]=m;var c={};for(var l in r)hasOwnProperty.call(r,l)&&(c[l]=r[l]);c.originalType=e,c[u]="string"==typeof e?e:o,i[1]=c;for(var s=2;s{t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>i,default:()=>y,frontMatter:()=>a,metadata:()=>c,toc:()=>s});var n=t(7462),o=(t(7294),t(3905));const a={},i="Versioning Policy",c={unversionedId:"modules/react-graph-layers/version-policy",id:"modules/react-graph-layers/version-policy",title:"Versioning Policy",description:"TBD",source:"@site/../docs/modules/react-graph-layers/version-policy.md",sourceDirName:"modules/react-graph-layers",slug:"/modules/react-graph-layers/version-policy",permalink:"/docs/modules/react-graph-layers/version-policy",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/version-policy.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Introduction",permalink:"/docs/modules/react-graph-layers/"},next:{title:"GraphGL",permalink:"/docs/modules/react-graph-layers/api-reference/graphgl"}},l={},s=[],p={toc:s},u="wrapper";function y(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"versioning-policy"},"Versioning Policy"),(0,o.kt)("p",null,"TBD"))}y.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3791],{3905:(e,r,t)=>{t.d(r,{Zo:()=>p,kt:()=>d});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function c(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var l=n.createContext({}),s=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},p=function(e){var r=s(e.components);return n.createElement(l.Provider,{value:r},e.children)},u="mdxType",y={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},m=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=s(t),m=o,d=u["".concat(l,".").concat(m)]||u[m]||y[m]||a;return t?n.createElement(d,c(c({ref:r},p),{},{components:t})):n.createElement(d,c({ref:r},p))}));function d(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,c=new Array(a);c[0]=m;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i[u]="string"==typeof e?e:o,c[1]=i;for(var s=2;s{t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>c,default:()=>y,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=t(7462),o=(t(7294),t(3905));const a={},c="Versioning Policy",i={unversionedId:"modules/react-graph-layers/version-policy",id:"modules/react-graph-layers/version-policy",title:"Versioning Policy",description:"TBD",source:"@site/../docs/modules/react-graph-layers/version-policy.md",sourceDirName:"modules/react-graph-layers",slug:"/modules/react-graph-layers/version-policy",permalink:"/deck.gl-community/docs/modules/react-graph-layers/version-policy",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/version-policy.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Introduction",permalink:"/deck.gl-community/docs/modules/react-graph-layers/"},next:{title:"GraphGL",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl"}},l={},s=[],p={toc:s},u="wrapper";function y(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"versioning-policy"},"Versioning Policy"),(0,o.kt)("p",null,"TBD"))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/9b9d5f9d.bfb79677.js b/assets/js/9b9d5f9d.c9cbb447.js similarity index 76% rename from assets/js/9b9d5f9d.bfb79677.js rename to assets/js/9b9d5f9d.c9cbb447.js index 5aea3202..a0f3a0bc 100644 --- a/assets/js/9b9d5f9d.bfb79677.js +++ b/assets/js/9b9d5f9d.c9cbb447.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3585],{3905:(e,r,t)=>{t.d(r,{Zo:()=>p,kt:()=>y});var n=t(7294);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=n.createContext({}),s=function(e){var r=n.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},p=function(e){var r=s(e.components);return n.createElement(c.Provider,{value:r},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},d=n.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),d=a,y=u["".concat(c,".").concat(d)]||u[d]||m[d]||o;return t?n.createElement(y,i(i({ref:r},p),{},{components:t})):n.createElement(y,i({ref:r},p))}));function y(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var c in r)hasOwnProperty.call(r,c)&&(l[c]=r[c]);l.originalType=e,l[u]="string"==typeof e?e:a,i[1]=l;for(var s=2;s{t.r(r),t.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>l,toc:()=>s});var n=t(7462),a=(t(7294),t(3905));const o={},i="PathMarkerLayer",l={unversionedId:"modules/editor-layers/api-reference/path-marker-layer",id:"modules/editor-layers/api-reference/path-marker-layer",title:"PathMarkerLayer",description:'Create small markers along a path (defaults to arrows showing "direction").',source:"@site/../docs/modules/editor-layers/api-reference/path-marker-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/path-marker-layer",permalink:"/docs/modules/editor-layers/api-reference/path-marker-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/path-marker-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"SelectionLayer",permalink:"/docs/modules/editor-layers/api-reference/selection-layer"},next:{title:"MeshLayer",permalink:"/docs/modules/editor-layers/api-reference/mesh-layer"}},c={},s=[],p={toc:s},u="wrapper";function m(e){let{components:r,...t}=e;return(0,a.kt)(u,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"pathmarkerlayer"},"PathMarkerLayer"),(0,a.kt)("p",null,'Create small markers along a path (defaults to arrows showing "direction").'))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3585],{3905:(e,r,t)=>{t.d(r,{Zo:()=>p,kt:()=>y});var n=t(7294);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var c=n.createContext({}),s=function(e){var r=n.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},p=function(e){var r=s(e.components);return n.createElement(c.Provider,{value:r},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},d=n.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),d=a,y=u["".concat(c,".").concat(d)]||u[d]||m[d]||o;return t?n.createElement(y,i(i({ref:r},p),{},{components:t})):n.createElement(y,i({ref:r},p))}));function y(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,i=new Array(o);i[0]=d;var l={};for(var c in r)hasOwnProperty.call(r,c)&&(l[c]=r[c]);l.originalType=e,l[u]="string"==typeof e?e:a,i[1]=l;for(var s=2;s{t.r(r),t.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>l,toc:()=>s});var n=t(7462),a=(t(7294),t(3905));const o={},i="PathMarkerLayer",l={unversionedId:"modules/editor-layers/api-reference/path-marker-layer",id:"modules/editor-layers/api-reference/path-marker-layer",title:"PathMarkerLayer",description:'Create small markers along a path (defaults to arrows showing "direction").',source:"@site/../docs/modules/editor-layers/api-reference/path-marker-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/path-marker-layer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/path-marker-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"SelectionLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer"},next:{title:"MeshLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer"}},c={},s=[],p={toc:s},u="wrapper";function m(e){let{components:r,...t}=e;return(0,a.kt)(u,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"pathmarkerlayer"},"PathMarkerLayer"),(0,a.kt)("p",null,'Create small markers along a path (defaults to arrows showing "direction").'))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a0080ae2.aa8fd7b2.js b/assets/js/a0080ae2.83653637.js similarity index 73% rename from assets/js/a0080ae2.aa8fd7b2.js rename to assets/js/a0080ae2.83653637.js index 06dd1292..462d63c9 100644 --- a/assets/js/a0080ae2.aa8fd7b2.js +++ b/assets/js/a0080ae2.83653637.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[304],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(r),d=a,f=u["".concat(s,".").concat(d)]||u[d]||m[d]||o;return r?n.createElement(f,l(l({ref:t},p),{},{components:r})):n.createElement(f,l({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},l="Overview",i={unversionedId:"modules/experimental-layers/README",id:"modules/experimental-layers/README",title:"Overview",description:"This module provides a suite of experimental layers for deck.gl.",source:"@site/../docs/modules/experimental-layers/README.md",sourceDirName:"modules/experimental-layers",slug:"/modules/experimental-layers/",permalink:"/docs/modules/experimental-layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/experimental-layers/README.md",tags:[],version:"current",frontMatter:{}},s={},c=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2}],p={toc:c},u="wrapper";function m(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"overview"},"Overview"),(0,a.kt)("p",null,"This module provides a suite of experimental layers for ",(0,a.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl"),"."),(0,a.kt)("h2",{id:"installation"},"Installation"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"npm install deck.gl-community/experimental-layers\n")),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("p",null,"..."))}m.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[304],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=c(r),d=a,f=u["".concat(s,".").concat(d)]||u[d]||m[d]||o;return r?n.createElement(f,l(l({ref:t},p),{},{components:r})):n.createElement(f,l({ref:t},p))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,l=new Array(o);l[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[u]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={},l="Overview",i={unversionedId:"modules/experimental-layers/README",id:"modules/experimental-layers/README",title:"Overview",description:"This module provides a suite of experimental layers for deck.gl.",source:"@site/../docs/modules/experimental-layers/README.md",sourceDirName:"modules/experimental-layers",slug:"/modules/experimental-layers/",permalink:"/deck.gl-community/docs/modules/experimental-layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/experimental-layers/README.md",tags:[],version:"current",frontMatter:{}},s={},c=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2}],p={toc:c},u="wrapper";function m(e){let{components:t,...r}=e;return(0,a.kt)(u,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"overview"},"Overview"),(0,a.kt)("p",null,"This module provides a suite of experimental layers for ",(0,a.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl"),"."),(0,a.kt)("h2",{id:"installation"},"Installation"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"npm install deck.gl-community/experimental-layers\n")),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("p",null,"..."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a6e720db.368cb454.js b/assets/js/a6e720db.368cb454.js new file mode 100644 index 00000000..2952e313 --- /dev/null +++ b/assets/js/a6e720db.368cb454.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6758],{3905:(e,r,t)=>{t.d(r,{Zo:()=>p,kt:()=>d});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=n.createContext({}),s=function(e){var r=n.useContext(c),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},p=function(e){var r=s(e.components);return n.createElement(c.Provider,{value:r},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},y=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(t),y=o,d=u["".concat(c,".").concat(y)]||u[y]||m[y]||a;return t?n.createElement(d,i(i({ref:r},p),{},{components:t})):n.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,i=new Array(a);i[0]=y;var l={};for(var c in r)hasOwnProperty.call(r,c)&&(l[c]=r[c]);l.originalType=e,l[u]="string"==typeof e?e:o,i[1]=l;for(var s=2;s{t.r(r),t.d(r,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>s});var n=t(7462),o=(t(7294),t(3905));const a={},i="Simple Layout",l={unversionedId:"modules/react-graph-layers/api-reference/simple-layout",id:"modules/react-graph-layers/api-reference/simple-layout",title:"Simple Layout",description:"This example demonstrates how to render a pre-layout graph using react-graph-layers.",source:"@site/../docs/modules/react-graph-layers/api-reference/simple-layout.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/simple-layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/simple-layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FLOW",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow"},next:{title:"D3 Force Layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout"}},c={},s=[{value:"Configurations",id:"configurations",level:2},{value:"nodePositionAccessor",id:"nodepositionaccessor",level:4}],p={toc:s},u="wrapper";function m(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"simple-layout"},"Simple Layout"),(0,o.kt)("p",{align:"center"},(0,o.kt)("img",{src:"/gatsby/images/layouts/simple.png",height:"400"})),(0,o.kt)("p",null,"This example demonstrates how to render a pre-layout graph using react-graph-layers.\nYou can pre-compute the layout and have the position information in each node.\nBy simply specifying the ",(0,o.kt)("inlineCode",{parentName:"p"},"nodePositionAccessor")," through constructor, you'll be able to render the graph right away."),(0,o.kt)("h2",{id:"configurations"},"Configurations"),(0,o.kt)("h4",{id:"nodepositionaccessor"},"nodePositionAccessor"),(0,o.kt)("p",null,"The accessor to get the position (","[x, y]",") of the node.\nExample:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"}," [\n node.getPropertyValue('x'),\n node.getPropertyValue('y'),\n ]\n })\n }\n/>\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a6e720db.376a4de2.js b/assets/js/a6e720db.376a4de2.js deleted file mode 100644 index 1d8ee53e..00000000 --- a/assets/js/a6e720db.376a4de2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6758],{3905:(e,r,t)=>{t.d(r,{Zo:()=>p,kt:()=>d});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=n.createContext({}),c=function(e){var r=n.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):i(i({},r),e)),t},p=function(e){var r=c(e.components);return n.createElement(s.Provider,{value:r},e.children)},u="mdxType",y={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},m=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(t),m=o,d=u["".concat(s,".").concat(m)]||u[m]||y[m]||a;return t?n.createElement(d,i(i({ref:r},p),{},{components:t})):n.createElement(d,i({ref:r},p))}));function d(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,i=new Array(a);i[0]=m;var l={};for(var s in r)hasOwnProperty.call(r,s)&&(l[s]=r[s]);l.originalType=e,l[u]="string"==typeof e?e:o,i[1]=l;for(var c=2;c{t.r(r),t.d(r,{assets:()=>s,contentTitle:()=>i,default:()=>y,frontMatter:()=>a,metadata:()=>l,toc:()=>c});var n=t(7462),o=(t(7294),t(3905));const a={},i="Simple Layout",l={unversionedId:"modules/react-graph-layers/api-reference/simple-layout",id:"modules/react-graph-layers/api-reference/simple-layout",title:"Simple Layout",description:"This example demonstrates how to render a pre-layout graph using react-graph-layers.",source:"@site/../docs/modules/react-graph-layers/api-reference/simple-layout.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/simple-layout",permalink:"/docs/modules/react-graph-layers/api-reference/simple-layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/simple-layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FLOW",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style-flow"},next:{title:"D3 Force Layout",permalink:"/docs/modules/react-graph-layers/api-reference/d3-layout"}},s={},c=[{value:"Configurations",id:"configurations",level:2},{value:"nodePositionAccessor",id:"nodepositionaccessor",level:4}],p={toc:c},u="wrapper";function y(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"simple-layout"},"Simple Layout"),(0,o.kt)("p",{align:"center"},(0,o.kt)("img",{src:"/gatsby/images/layouts/simple.png",height:"400"})),(0,o.kt)("p",null,"This example demonstrates how to render a pre-layout graph using react-graph-layers.\nYou can pre-compute the layout and have the position information in each node.\nBy simply specifying the ",(0,o.kt)("inlineCode",{parentName:"p"},"nodePositionAccessor")," through constructor, you'll be able to render the graph right away."),(0,o.kt)("h2",{id:"configurations"},"Configurations"),(0,o.kt)("h4",{id:"nodepositionaccessor"},"nodePositionAccessor"),(0,o.kt)("p",null,"The accessor to get the position (","[x, y]",") of the node.\nExample:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"}," [\n node.getPropertyValue('x'),\n node.getPropertyValue('y'),\n ]\n })\n }\n/>\n")))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a82bdaf5.1394c226.js b/assets/js/a82bdaf5.1394c226.js deleted file mode 100644 index 00c1d38c..00000000 --- a/assets/js/a82bdaf5.1394c226.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[43],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),s=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},p="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,d=a(e,["components","mdxType","originalType","parentName"]),p=s(n),m=o,f=p["".concat(u,".").concat(m)]||p[m]||c[m]||i;return n?r.createElement(f,l(l({ref:t},d),{},{components:n})):r.createElement(f,l({ref:t},d))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,l=new Array(i);l[0]=m;var a={};for(var u in t)hasOwnProperty.call(t,u)&&(a[u]=t[u]);a.originalType=e,a[p]="string"==typeof e?e:o,l[1]=a;for(var s=2;s{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>l,default:()=>c,frontMatter:()=>i,metadata:()=>a,toc:()=>s});var r=n(7462),o=(n(7294),n(3905));const i={},l="Outline (Shader Module)",a={unversionedId:"modules/editor-layers/api-reference/outline",id:"modules/editor-layers/api-reference/outline",title:"Outline (Shader Module)",description:"The outline module is useful when you are rendering 2D elements in the same plane (on top of each other), but want to show some kind of outline or shadow to indicate which element is logically on top.",source:"@site/../docs/modules/editor-layers/api-reference/outline.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/outline",permalink:"/docs/modules/editor-layers/api-reference/outline",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/outline.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"MeshLayer",permalink:"/docs/modules/editor-layers/api-reference/mesh-layer"},next:{title:"Editing Modes",permalink:"/docs/modules/edit-modes/api-reference/"}},u={},s=[{value:"Usage",id:"usage",level:2},{value:"getUniforms",id:"getuniforms",level:2}],d={toc:s},p="wrapper";function c(e){let{components:t,...n}=e;return(0,o.kt)(p,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"outline-shader-module"},"Outline (Shader Module)"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"outline")," module is useful when you are rendering 2D elements in the same plane (on top of each other), but want to show some kind of outline or shadow to indicate which element is logically on top."),(0,o.kt)("p",null,'Implementation note: This module works by rendering your graphics into a sample "outline" shadow map, and then darkens the color on pixels in your graphics when they are drawn close to another object with a higher "logical z order", giving a shadow outline effect.'),(0,o.kt)("h2",{id:"usage"},"Usage"),(0,o.kt)("p",null,"Your vertex shader might look like:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"attribute vec3 position;\nattribute vec4 lineColor;\nattribute float zLevel;\n\nvarying vec4 vColor;\n\nvoid main() {\n ...\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);\n vColor = lineColor;\n\n ...\n\n // Store info needed to render outline shadows\n outline_setZLevel(zLevel);\n outline_setUV(gl_Position);\n}\n")),(0,o.kt)("p",null,"And in the fragment shader:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"varying vec4 vColor;\n\nvoid main() {\n gl_FragColor = vColor;\n\n ...\n\n // Render outline shadows\n gl_FragColor = outline_filterColor(gl_FragColor);\n\n ...\n}\n")),(0,o.kt)("h2",{id:"getuniforms"},"getUniforms"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"getUniforms({outlineRender, outlineShadowMap})")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"outlineRender")," (Boolean, ",(0,o.kt)("inlineCode",{parentName:"li"},"false"),") - set to ",(0,o.kt)("inlineCode",{parentName:"li"},"true"),' during the "outline map" rendering pass (i.e. specifies whether to render into or from the shadowmap).'),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"outlineShadowmap")," (",(0,o.kt)("inlineCode",{parentName:"li"},"Texture"),", required) -")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a82bdaf5.65dd4d0b.js b/assets/js/a82bdaf5.65dd4d0b.js new file mode 100644 index 00000000..1b736714 --- /dev/null +++ b/assets/js/a82bdaf5.65dd4d0b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[43],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),s=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},d=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},c="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,d=a(e,["components","mdxType","originalType","parentName"]),c=s(n),m=o,f=c["".concat(u,".").concat(m)]||c[m]||p[m]||i;return n?r.createElement(f,l(l({ref:t},d),{},{components:n})):r.createElement(f,l({ref:t},d))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,l=new Array(i);l[0]=m;var a={};for(var u in t)hasOwnProperty.call(t,u)&&(a[u]=t[u]);a.originalType=e,a[c]="string"==typeof e?e:o,l[1]=a;for(var s=2;s{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>a,toc:()=>s});var r=n(7462),o=(n(7294),n(3905));const i={},l="Outline (Shader Module)",a={unversionedId:"modules/editor-layers/api-reference/outline",id:"modules/editor-layers/api-reference/outline",title:"Outline (Shader Module)",description:"The outline module is useful when you are rendering 2D elements in the same plane (on top of each other), but want to show some kind of outline or shadow to indicate which element is logically on top.",source:"@site/../docs/modules/editor-layers/api-reference/outline.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/outline",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/outline",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/outline.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"MeshLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer"},next:{title:"Editing Modes",permalink:"/deck.gl-community/docs/modules/edit-modes/api-reference/"}},u={},s=[{value:"Usage",id:"usage",level:2},{value:"getUniforms",id:"getuniforms",level:2}],d={toc:s},c="wrapper";function p(e){let{components:t,...n}=e;return(0,o.kt)(c,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"outline-shader-module"},"Outline (Shader Module)"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"outline")," module is useful when you are rendering 2D elements in the same plane (on top of each other), but want to show some kind of outline or shadow to indicate which element is logically on top."),(0,o.kt)("p",null,'Implementation note: This module works by rendering your graphics into a sample "outline" shadow map, and then darkens the color on pixels in your graphics when they are drawn close to another object with a higher "logical z order", giving a shadow outline effect.'),(0,o.kt)("h2",{id:"usage"},"Usage"),(0,o.kt)("p",null,"Your vertex shader might look like:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"attribute vec3 position;\nattribute vec4 lineColor;\nattribute float zLevel;\n\nvarying vec4 vColor;\n\nvoid main() {\n ...\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);\n vColor = lineColor;\n\n ...\n\n // Store info needed to render outline shadows\n outline_setZLevel(zLevel);\n outline_setUV(gl_Position);\n}\n")),(0,o.kt)("p",null,"And in the fragment shader:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"varying vec4 vColor;\n\nvoid main() {\n gl_FragColor = vColor;\n\n ...\n\n // Render outline shadows\n gl_FragColor = outline_filterColor(gl_FragColor);\n\n ...\n}\n")),(0,o.kt)("h2",{id:"getuniforms"},"getUniforms"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"getUniforms({outlineRender, outlineShadowMap})")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"outlineRender")," (Boolean, ",(0,o.kt)("inlineCode",{parentName:"li"},"false"),") - set to ",(0,o.kt)("inlineCode",{parentName:"li"},"true"),' during the "outline map" rendering pass (i.e. specifies whether to render into or from the shadowmap).'),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"outlineShadowmap")," (",(0,o.kt)("inlineCode",{parentName:"li"},"Texture"),", required) -")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/aa2d3c63.639e4f52.js b/assets/js/aa2d3c63.b36234a0.js similarity index 88% rename from assets/js/aa2d3c63.639e4f52.js rename to assets/js/aa2d3c63.b36234a0.js index bb31bf2a..ecc9d2a5 100644 --- a/assets/js/aa2d3c63.639e4f52.js +++ b/assets/js/aa2d3c63.b36234a0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5401],{3905:(e,r,t)=>{t.d(r,{Zo:()=>u,kt:()=>m});var n=t(7294);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function c(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=n.createContext({}),i=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},u=function(e){var r=i(e.components);return n.createElement(l.Provider,{value:r},e.children)},s="mdxType",f={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},y=n.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),s=i(t),y=a,m=s["".concat(l,".").concat(y)]||s[y]||f[y]||o;return t?n.createElement(m,c(c({ref:r},u),{},{components:t})):n.createElement(m,c({ref:r},u))}));function m(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=y;var p={};for(var l in r)hasOwnProperty.call(r,l)&&(p[l]=r[l]);p.originalType=e,p[s]="string"==typeof e?e:a,c[1]=p;for(var i=2;i{t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>c,default:()=>f,frontMatter:()=>o,metadata:()=>p,toc:()=>i});var n=t(7462),a=(t(7294),t(3905));const o={},c="GraphLayer",p={unversionedId:"graph-layer",id:"graph-layer",title:"GraphLayer",description:"TBA",source:"@site/src/examples/graph-layer.mdx",sourceDirName:".",slug:"/graph-layer",permalink:"/examples/graph-layer",draft:!1,tags:[],version:"current",frontMatter:{}},l={},i=[],u={toc:i},s="wrapper";function f(e){let{components:r,...t}=e;return(0,a.kt)(s,(0,n.Z)({},u,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"graphlayer"},"GraphLayer"),(0,a.kt)("p",null,"TBA"))}f.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5401],{3905:(e,r,t)=>{t.d(r,{Zo:()=>u,kt:()=>m});var n=t(7294);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function c(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=n.createContext({}),i=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},u=function(e){var r=i(e.components);return n.createElement(l.Provider,{value:r},e.children)},s="mdxType",f={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},y=n.forwardRef((function(e,r){var t=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),s=i(t),y=a,m=s["".concat(l,".").concat(y)]||s[y]||f[y]||o;return t?n.createElement(m,c(c({ref:r},u),{},{components:t})):n.createElement(m,c({ref:r},u))}));function m(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=y;var p={};for(var l in r)hasOwnProperty.call(r,l)&&(p[l]=r[l]);p.originalType=e,p[s]="string"==typeof e?e:a,c[1]=p;for(var i=2;i{t.r(r),t.d(r,{assets:()=>l,contentTitle:()=>c,default:()=>f,frontMatter:()=>o,metadata:()=>p,toc:()=>i});var n=t(7462),a=(t(7294),t(3905));const o={},c="GraphLayer",p={unversionedId:"graph-layer",id:"graph-layer",title:"GraphLayer",description:"TBA",source:"@site/src/examples/graph-layer.mdx",sourceDirName:".",slug:"/graph-layer",permalink:"/deck.gl-community/examples/graph-layer",draft:!1,tags:[],version:"current",frontMatter:{}},l={},i=[],u={toc:i},s="wrapper";function f(e){let{components:r,...t}=e;return(0,a.kt)(s,(0,n.Z)({},u,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"graphlayer"},"GraphLayer"),(0,a.kt)("p",null,"TBA"))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/aab7b702.c53e6c08.js b/assets/js/aab7b702.c53e6c08.js new file mode 100644 index 00000000..5dae78b3 --- /dev/null +++ b/assets/js/aab7b702.c53e6c08.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1667],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(r),m=a,f=p["".concat(c,".").concat(m)]||p[m]||d[m]||o;return r?n.createElement(f,i(i({ref:t},s),{},{components:r})):n.createElement(f,i({ref:t},s))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[p]="string"==typeof e?e:a,i[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var n=r(7462),a=(r(7294),r(3905));const o={},i="CIRCLE",l={unversionedId:"modules/react-graph-layers/api-reference/node-style-circle",id:"modules/react-graph-layers/api-reference/node-style-circle",title:"CIRCLE",description:"fill (String | Array | Function, optional)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-circle.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-circle",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-circle.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout"},next:{title:"RECTANGLE",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle"}},c={},u=[{value:"fill (String | Array | Function, optional)",id:"fill-string--array--function-optional",level:3},{value:"radius (Number | Function, optional)",id:"radius-number--function-optional",level:3},{value:"stroke (String | Array | Function, optional)",id:"stroke-string--array--function-optional",level:3},{value:"strokeWidth (Number | Function, optional)",id:"strokewidth-number--function-optional",level:3}],s={toc:u},p="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(p,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"circle"},"CIRCLE"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/node-styles/circle.png",height:"100"})),(0,a.kt)("h3",{id:"fill-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"fill")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"#fff")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range).\nIf a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.\nIf a function is provided, it is called on each rectangle to retrieve its color.")),(0,a.kt)("h3",{id:"radius-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"radius")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"1")),(0,a.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"radius"),", all the circles will have the same radius.\nIf an accessor function is provided, the function will be called to retrieve the radius of each circle.")),(0,a.kt)("h3",{id:"stroke-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"stroke")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,a.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its color.")),(0,a.kt)("h3",{id:"strokewidth-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"strokeWidth")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"0")),(0,a.kt)("li",{parentName:"ul"},"The width of the outline of each rectangle."),(0,a.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the outline width for all rectangles."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its outline width.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/aab7b702.dd71afb9.js b/assets/js/aab7b702.dd71afb9.js deleted file mode 100644 index 261f2c2d..00000000 --- a/assets/js/aab7b702.dd71afb9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1667],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>m});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=u(r),f=a,m=p["".concat(c,".").concat(f)]||p[f]||d[f]||o;return r?n.createElement(m,i(i({ref:t},s),{},{components:r})):n.createElement(m,i({ref:t},s))}));function m(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[p]="string"==typeof e?e:a,i[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var n=r(7462),a=(r(7294),r(3905));const o={},i="CIRCLE",l={unversionedId:"modules/react-graph-layers/api-reference/node-style-circle",id:"modules/react-graph-layers/api-reference/node-style-circle",title:"CIRCLE",description:"fill (String | Array | Function, optional)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-circle.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-circle",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-circle",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-circle.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Layout",permalink:"/docs/modules/react-graph-layers/api-reference/layout"},next:{title:"RECTANGLE",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-rectangle"}},c={},u=[{value:"fill (String | Array | Function, optional)",id:"fill-string--array--function-optional",level:3},{value:"radius (Number | Function, optional)",id:"radius-number--function-optional",level:3},{value:"stroke (String | Array | Function, optional)",id:"stroke-string--array--function-optional",level:3},{value:"strokeWidth (Number | Function, optional)",id:"strokewidth-number--function-optional",level:3}],s={toc:u},p="wrapper";function d(e){let{components:t,...r}=e;return(0,a.kt)(p,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"circle"},"CIRCLE"),(0,a.kt)("p",{align:"center"},(0,a.kt)("img",{src:"/gatsby/images/node-styles/circle.png",height:"100"})),(0,a.kt)("h3",{id:"fill-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"fill")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"#fff")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range).\nIf a color value (hex code, color name, or array) is provided, it is used as the global color for all objects.\nIf a function is provided, it is called on each rectangle to retrieve its color.")),(0,a.kt)("h3",{id:"radius-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"radius")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"1")),(0,a.kt)("li",{parentName:"ul"},"If a number is provided for ",(0,a.kt)("inlineCode",{parentName:"li"},"radius"),", all the circles will have the same radius.\nIf an accessor function is provided, the function will be called to retrieve the radius of each circle.")),(0,a.kt)("h3",{id:"stroke-string--array--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"stroke")," (String | Array | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,a.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,a.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,a.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its color.")),(0,a.kt)("h3",{id:"strokewidth-number--function-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"strokeWidth")," (Number | Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"0")),(0,a.kt)("li",{parentName:"ul"},"The width of the outline of each rectangle."),(0,a.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the outline width for all rectangles."),(0,a.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its outline width.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/b69de359.0410fd57.js b/assets/js/b69de359.0410fd57.js new file mode 100644 index 00000000..cd17fa33 --- /dev/null +++ b/assets/js/b69de359.0410fd57.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8413],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>h});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=o.createContext({}),c=function(e){var t=o.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},u=function(e){var t=c(e.components);return o.createElement(p.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,p=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=c(n),m=a,h=s["".concat(p,".").concat(m)]||s[m]||d[m]||l;return n?o.createElement(h,r(r({ref:t},u),{},{components:n})):o.createElement(h,r({ref:t},u))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,r=new Array(l);r[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[s]="string"==typeof e?e:a,r[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>r,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var o=n(7462),a=(n(7294),n(3905));const l={},r="MeshLayer",i={unversionedId:"modules/editor-layers/api-reference/mesh-layer",id:"modules/editor-layers/api-reference/mesh-layer",title:"MeshLayer",description:"The Mesh Layer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map.",source:"@site/../docs/modules/editor-layers/api-reference/mesh-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/mesh-layer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/mesh-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"PathMarkerLayer",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer"},next:{title:"Outline (Shader Module)",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/outline"}},p={},c=[{value:"Properties",id:"properties",level:2},{value:"mesh (Geometry|Object)",id:"mesh-geometryobject",level:5},{value:"texture (Texture2D|Image|String, optional)",id:"texture-texture2dimagestring-optional",level:5},{value:"sizeScale (Number, optional)",id:"sizescale-number-optional",level:5},{value:"getPosition (Function, optional)",id:"getposition-function-optional",level:5},{value:"getYaw (Function, optional)",id:"getyaw-function-optional",level:5},{value:"getPitch (Function, optional)",id:"getpitch-function-optional",level:5},{value:"getRoll (Function, optional)",id:"getroll-function-optional",level:5},{value:"getScale (Function, optional)",id:"getscale-function-optional",level:5},{value:"getTranslation (Function, optional)",id:"gettranslation-function-optional",level:5},{value:"getMatrix (Function, optional)",id:"getmatrix-function-optional",level:5},{value:"getColor (Function|Array, optional)",id:"getcolor-functionarray-optional",level:5},{value:"fp64 (Boolean, optional)",id:"fp64-boolean-optional",level:5},{value:"lightSettings (Object, optional)",id:"lightsettings-object-optional",level:5}],u={toc:c},s="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(s,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"meshlayer"},"MeshLayer"),(0,a.kt)("p",null,"The Mesh Layer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import DeckGL from '@deck.gl/react';\nimport { MeshLayer } from '@deck.gl/experimental-layers';\nimport { CubeGeometry } from 'luma.gl';\n\nconst App = ({ data, viewport }) => {\n /**\n * Data format:\n * [\n * {\n * position: [-122.45, 37.7],\n * angle: 0,\n * color: [255, 0, 0]\n * },\n * {\n * position: [-122.46, 37.73],\n * angle: 90,\n * color: [0, 255, 0]\n * },\n * ...\n * ]\n */\n const layer = new MeshLayer({\n id: 'mesh-layer',\n data,\n sizeScale: 100,\n texture: 'texture.png',\n mesh: new CubeGeometry(),\n });\n\n return ;\n};\n")),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("h5",{id:"mesh-geometryobject"},(0,a.kt)("inlineCode",{parentName:"h5"},"mesh")," (Geometry|Object)"),(0,a.kt)("p",null,"The geometry to render for each data object.\nCan be a luma.gl ",(0,a.kt)("a",{parentName:"p",href:"https://luma.gl/docs/api-reference/engine/geometry"},"Geometry")," instance, or an object of attributes."),(0,a.kt)("p",null,"The following attributes are expected:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"positions")," (Float32Array) - 3d vertex offset from the object center, in meters"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"normals")," (Float32Array) - 3d nomals"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"texCoords")," (Float32Array) - 2d texture coordinates")),(0,a.kt)("h5",{id:"texture-texture2dimagestring-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"texture")," (Texture2D|Image|String, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),".")),(0,a.kt)("p",null,"The texture of the geometries.\nCan be either a luma.gl ","[Texture2D]","(",(0,a.kt)("a",{parentName:"p",href:"https://luma.gl/docs/api-reference/webgl/texture-2d%5C"},"https://luma.gl/docs/api-reference/webgl/texture-2d\\"),") instance, an HTMLImageElement, or a url string to the texture image."),(0,a.kt)("p",null,"If ",(0,a.kt)("inlineCode",{parentName:"p"},"texture")," is supplied, texture is used to render the geometries. Otherwise, object color obtained via the ",(0,a.kt)("inlineCode",{parentName:"p"},"getColor")," accessor is used."),(0,a.kt)("h5",{id:"sizescale-number-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"sizeScale")," (Number, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default ",(0,a.kt)("inlineCode",{parentName:"li"},"1"),".")),(0,a.kt)("p",null,"Multiplier to scale each geometry by."),(0,a.kt)("h5",{id:"getposition-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getPosition")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.position"))),(0,a.kt)("p",null,"This accessor returns the center position corresponding to an object in the ",(0,a.kt)("inlineCode",{parentName:"p"},"data")," stream."),(0,a.kt)("h5",{id:"getyaw-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getYaw")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.yaw || object.angle || 0"))),(0,a.kt)("p",null,"The yaw (heading) in degrees of each object."),(0,a.kt)("h5",{id:"getpitch-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getPitch")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.pitch || 0"))),(0,a.kt)("p",null,"The pitch (elevation) in degrees of each object."),(0,a.kt)("h5",{id:"getroll-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getRoll")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.roll || 0"))),(0,a.kt)("p",null,"The roll (bank) in degrees of each object."),(0,a.kt)("p",null,"See ",(0,a.kt)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Euler_angles"},"Euler angles"),"."),(0,a.kt)("h5",{id:"getscale-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getScale")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.scale || [1, 1, 1]"))),(0,a.kt)("p",null,"Scaling factor on the mesh along each axis."),(0,a.kt)("h5",{id:"gettranslation-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getTranslation")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.translation || [0, 0, 0]"))),(0,a.kt)("p",null,"Translation of the mesh along each axis. Offset from the center position given by ",(0,a.kt)("inlineCode",{parentName:"p"},"getPosition")),(0,a.kt)("h5",{id:"getmatrix-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getMatrix")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => null"))),(0,a.kt)("p",null,"Explicitly define a 4x4 column-major model matrix for the mesh. If provided, will override\n",(0,a.kt)("inlineCode",{parentName:"p"},"getYaw"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getPitch"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getRoll"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getScale"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getTranslation"),"."),(0,a.kt)("h5",{id:"getcolor-functionarray-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getColor")," (Function|Array, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,a.kt)("p",null,"The color of each object. Only used if ",(0,a.kt)("inlineCode",{parentName:"p"},"texture")," is empty."),(0,a.kt)("h5",{id:"fp64-boolean-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"fp64")," (Boolean, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"false"))),(0,a.kt)("p",null,"Whether the layer should be rendered in high-precision 64-bit mode"),(0,a.kt)("h5",{id:"lightsettings-object-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"lightSettings")," (Object, optional)"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"TO BE REPLACED")),(0,a.kt)("p",null,"With ",(0,a.kt)("inlineCode",{parentName:"p"},"@deck.gl/mesh-layers")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/b69de359.58c4ff2e.js b/assets/js/b69de359.58c4ff2e.js deleted file mode 100644 index 59a4c577..00000000 --- a/assets/js/b69de359.58c4ff2e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8413],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>h});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=o.createContext({}),c=function(e){var t=o.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},u=function(e){var t=c(e.components);return o.createElement(p.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,p=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),s=c(n),m=a,h=s["".concat(p,".").concat(m)]||s[m]||d[m]||l;return n?o.createElement(h,r(r({ref:t},u),{},{components:n})):o.createElement(h,r({ref:t},u))}));function h(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,r=new Array(l);r[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[s]="string"==typeof e?e:a,r[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>r,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>c});var o=n(7462),a=(n(7294),n(3905));const l={},r="MeshLayer",i={unversionedId:"modules/editor-layers/api-reference/mesh-layer",id:"modules/editor-layers/api-reference/mesh-layer",title:"MeshLayer",description:"The Mesh Layer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map.",source:"@site/../docs/modules/editor-layers/api-reference/mesh-layer.md",sourceDirName:"modules/editor-layers/api-reference",slug:"/modules/editor-layers/api-reference/mesh-layer",permalink:"/docs/modules/editor-layers/api-reference/mesh-layer",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-layers/api-reference/mesh-layer.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"PathMarkerLayer",permalink:"/docs/modules/editor-layers/api-reference/path-marker-layer"},next:{title:"Outline (Shader Module)",permalink:"/docs/modules/editor-layers/api-reference/outline"}},p={},c=[{value:"Properties",id:"properties",level:2},{value:"mesh (Geometry|Object)",id:"mesh-geometryobject",level:5},{value:"texture (Texture2D|Image|String, optional)",id:"texture-texture2dimagestring-optional",level:5},{value:"sizeScale (Number, optional)",id:"sizescale-number-optional",level:5},{value:"getPosition (Function, optional)",id:"getposition-function-optional",level:5},{value:"getYaw (Function, optional)",id:"getyaw-function-optional",level:5},{value:"getPitch (Function, optional)",id:"getpitch-function-optional",level:5},{value:"getRoll (Function, optional)",id:"getroll-function-optional",level:5},{value:"getScale (Function, optional)",id:"getscale-function-optional",level:5},{value:"getTranslation (Function, optional)",id:"gettranslation-function-optional",level:5},{value:"getMatrix (Function, optional)",id:"getmatrix-function-optional",level:5},{value:"getColor (Function|Array, optional)",id:"getcolor-functionarray-optional",level:5},{value:"fp64 (Boolean, optional)",id:"fp64-boolean-optional",level:5},{value:"lightSettings (Object, optional)",id:"lightsettings-object-optional",level:5}],u={toc:c},s="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(s,(0,o.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"meshlayer"},"MeshLayer"),(0,a.kt)("p",null,"The Mesh Layer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import DeckGL from '@deck.gl/react';\nimport { MeshLayer } from '@deck.gl/experimental-layers';\nimport { CubeGeometry } from 'luma.gl';\n\nconst App = ({ data, viewport }) => {\n /**\n * Data format:\n * [\n * {\n * position: [-122.45, 37.7],\n * angle: 0,\n * color: [255, 0, 0]\n * },\n * {\n * position: [-122.46, 37.73],\n * angle: 90,\n * color: [0, 255, 0]\n * },\n * ...\n * ]\n */\n const layer = new MeshLayer({\n id: 'mesh-layer',\n data,\n sizeScale: 100,\n texture: 'texture.png',\n mesh: new CubeGeometry(),\n });\n\n return ;\n};\n")),(0,a.kt)("h2",{id:"properties"},"Properties"),(0,a.kt)("h5",{id:"mesh-geometryobject"},(0,a.kt)("inlineCode",{parentName:"h5"},"mesh")," (Geometry|Object)"),(0,a.kt)("p",null,"The geometry to render for each data object.\nCan be a luma.gl ",(0,a.kt)("a",{parentName:"p",href:"https://luma.gl/docs/api-reference/engine/geometry"},"Geometry")," instance, or an object of attributes."),(0,a.kt)("p",null,"The following attributes are expected:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"positions")," (Float32Array) - 3d vertex offset from the object center, in meters"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"normals")," (Float32Array) - 3d nomals"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"texCoords")," (Float32Array) - 2d texture coordinates")),(0,a.kt)("h5",{id:"texture-texture2dimagestring-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"texture")," (Texture2D|Image|String, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),".")),(0,a.kt)("p",null,"The texture of the geometries.\nCan be either a luma.gl ","[Texture2D]","(",(0,a.kt)("a",{parentName:"p",href:"https://luma.gl/docs/api-reference/webgl/texture-2d%5C"},"https://luma.gl/docs/api-reference/webgl/texture-2d\\"),") instance, an HTMLImageElement, or a url string to the texture image."),(0,a.kt)("p",null,"If ",(0,a.kt)("inlineCode",{parentName:"p"},"texture")," is supplied, texture is used to render the geometries. Otherwise, object color obtained via the ",(0,a.kt)("inlineCode",{parentName:"p"},"getColor")," accessor is used."),(0,a.kt)("h5",{id:"sizescale-number-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"sizeScale")," (Number, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default ",(0,a.kt)("inlineCode",{parentName:"li"},"1"),".")),(0,a.kt)("p",null,"Multiplier to scale each geometry by."),(0,a.kt)("h5",{id:"getposition-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getPosition")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.position"))),(0,a.kt)("p",null,"This accessor returns the center position corresponding to an object in the ",(0,a.kt)("inlineCode",{parentName:"p"},"data")," stream."),(0,a.kt)("h5",{id:"getyaw-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getYaw")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.yaw || object.angle || 0"))),(0,a.kt)("p",null,"The yaw (heading) in degrees of each object."),(0,a.kt)("h5",{id:"getpitch-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getPitch")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.pitch || 0"))),(0,a.kt)("p",null,"The pitch (elevation) in degrees of each object."),(0,a.kt)("h5",{id:"getroll-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getRoll")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.roll || 0"))),(0,a.kt)("p",null,"The roll (bank) in degrees of each object."),(0,a.kt)("p",null,"See ",(0,a.kt)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Euler_angles"},"Euler angles"),"."),(0,a.kt)("h5",{id:"getscale-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getScale")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.scale || [1, 1, 1]"))),(0,a.kt)("p",null,"Scaling factor on the mesh along each axis."),(0,a.kt)("h5",{id:"gettranslation-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getTranslation")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => object.translation || [0, 0, 0]"))),(0,a.kt)("p",null,"Translation of the mesh along each axis. Offset from the center position given by ",(0,a.kt)("inlineCode",{parentName:"p"},"getPosition")),(0,a.kt)("h5",{id:"getmatrix-function-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getMatrix")," (Function, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"object => null"))),(0,a.kt)("p",null,"Explicitly define a 4x4 column-major model matrix for the mesh. If provided, will override\n",(0,a.kt)("inlineCode",{parentName:"p"},"getYaw"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getPitch"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getRoll"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getScale"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"getTranslation"),"."),(0,a.kt)("h5",{id:"getcolor-functionarray-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"getColor")," (Function|Array, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]"))),(0,a.kt)("p",null,"The color of each object. Only used if ",(0,a.kt)("inlineCode",{parentName:"p"},"texture")," is empty."),(0,a.kt)("h5",{id:"fp64-boolean-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"fp64")," (Boolean, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"false"))),(0,a.kt)("p",null,"Whether the layer should be rendered in high-precision 64-bit mode"),(0,a.kt)("h5",{id:"lightsettings-object-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"lightSettings")," (Object, optional)"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"TO BE REPLACED")),(0,a.kt)("p",null,"With ",(0,a.kt)("inlineCode",{parentName:"p"},"@deck.gl/mesh-layers")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/b91d26fa.13ab5149.js b/assets/js/b91d26fa.13ab5149.js new file mode 100644 index 00000000..ae4e40f5 --- /dev/null +++ b/assets/js/b91d26fa.13ab5149.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1478],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>g});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var d=a.createContext({}),p=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,d=e.parentName,m=r(e,["components","mdxType","originalType","parentName"]),s=p(n),c=i,g=s["".concat(d,".").concat(c)]||s[c]||u[c]||o;return n?a.createElement(g,l(l({ref:t},m),{},{components:n})):a.createElement(g,l({ref:t},m))}));function g(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,l=new Array(o);l[0]=c;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r[s]="string"==typeof e?e:i,l[1]=r;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>p});var a=n(7462),i=(n(7294),n(3905));const o={},l="Editing Modes",r={unversionedId:"modules/edit-modes/api-reference/README",id:"modules/edit-modes/api-reference/README",title:"Editing Modes",description:"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.",source:"@site/../docs/modules/edit-modes/api-reference/README.md",sourceDirName:"modules/edit-modes/api-reference",slug:"/modules/edit-modes/api-reference/",permalink:"/deck.gl-community/docs/modules/edit-modes/api-reference/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/edit-modes/api-reference/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Outline (Shader Module)",permalink:"/deck.gl-community/docs/modules/editor-layers/api-reference/outline"},next:{title:"HtmlOverlay",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay"}},d={},p=[{value:"ViewMode",id:"viewmode",level:2},{value:"ModifyMode",id:"modifymode",level:2},{value:"Edit Context",id:"edit-context",level:3},{value:"ExtrudeMode",id:"extrudemode",level:2},{value:"ScaleMode",id:"scalemode",level:2},{value:"RotateMode",id:"rotatemode",level:2},{value:"TranslateMode",id:"translatemode",level:2},{value:"TransformMode",id:"transformmode",level:2},{value:"DuplicateMode",id:"duplicatemode",level:2},{value:"DrawPointMode",id:"drawpointmode",level:2},{value:"DrawLineStringMode",id:"drawlinestringmode",level:2},{value:"ExtendLineStringMode",id:"extendlinestringmode",level:2},{value:"ModeConfig",id:"modeconfig",level:3},{value:"Edit Context",id:"edit-context-1",level:3},{value:"ResizeCircleMode",id:"resizecirclemode",level:2},{value:"DrawPolygonMode",id:"drawpolygonmode",level:2},{value:"ModeConfig",id:"modeconfig-1",level:3},{value:"Edit Context",id:"edit-context-2",level:3},{value:"Draw90DegreePolygonMode",id:"draw90degreepolygonmode",level:2},{value:"DrawPolygonByDraggingMode",id:"drawpolygonbydraggingmode",level:2},{value:"ModeConfig",id:"modeconfig-2",level:3},{value:"DrawRectangleMode",id:"drawrectanglemode",level:2},{value:"ModeConfig",id:"modeconfig-3",level:3},{value:"DrawRectangleFromCenterMode",id:"drawrectanglefromcentermode",level:2},{value:"ModeConfig",id:"modeconfig-4",level:3},{value:"DrawRectangleUsingThreePointsMode",id:"drawrectangleusingthreepointsmode",level:2},{value:"DrawSquareMode",id:"drawsquaremode",level:2},{value:"DrawSquareFromCenterMode",id:"drawsquarefromcentermode",level:2},{value:"ModeConfig",id:"modeconfig-5",level:3},{value:"DrawCircleFromCenterMode",id:"drawcirclefromcentermode",level:2},{value:"ModeConfig",id:"modeconfig-6",level:3},{value:"DrawCircleByDiameterMode",id:"drawcirclebydiametermode",level:2},{value:"ModeConfig",id:"modeconfig-7",level:3},{value:"DrawEllipseByBoundingBoxMode",id:"drawellipsebyboundingboxmode",level:2},{value:"ModeConfig",id:"modeconfig-8",level:3},{value:"DrawEllipseUsingThreePointsMode",id:"drawellipseusingthreepointsmode",level:2},{value:"SplitPolygonMode",id:"splitpolygonmode",level:2},{value:"MeasureDistanceMode",id:"measuredistancemode",level:2},{value:"ModeConfig",id:"modeconfig-9",level:3},{value:"MeasureAreaMode",id:"measureareamode",level:2},{value:"ModeConfig",id:"modeconfig-10",level:3},{value:"MeasureAngleMode",id:"measureanglemode",level:2},{value:"ModeConfig",id:"modeconfig-11",level:3},{value:"ElevationMode",id:"elevationmode",level:2},{value:"ModeConfig",id:"modeconfig-12",level:3},{value:"Boolean Operations",id:"boolean-operations",level:2},{value:"Composite Mode",id:"composite-mode",level:2},{value:"Constructor",id:"constructor",level:3},{value:"Example",id:"example",level:3}],m={toc:p},s="wrapper";function u(e){let{components:t,...n}=e;return(0,i.kt)(s,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"editing-modes"},"Editing Modes"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"EditMode"),"s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries."),(0,i.kt)("p",null,"The following are the built-in ",(0,i.kt)("inlineCode",{parentName:"p"},"EditMode"),"s provided by nebula.gl:"),(0,i.kt)("h2",{id:"viewmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/view-mode.ts"},"ViewMode")),(0,i.kt)("p",null,"No edits are possible, but selection is still possible."),(0,i.kt)("h2",{id:"modifymode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/modify-mode.ts"},"ModifyMode")),(0,i.kt)("p",null,"User can move existing points, add intermediate points along lines, and remove points."),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object for ModifyMode:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"lockRectangles")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},""),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", features with ",(0,i.kt)("inlineCode",{parentName:"li"},"properties.shape === 'Rectangle'")," will preserve rectangular shape.")))),(0,i.kt)("h3",{id:"edit-context"},"Edit Context"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," argument to the ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," callback contains the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"positionIndexes")," (Array): An array of numbers representing the indexes of the edited position within the feature's ",(0,i.kt)("inlineCode",{parentName:"p"},"coordinates")," array")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"position")," (Array): An array containing the ground coordinates (i.e. ","[lng, lat]",") of the edited position"))),(0,i.kt)("h2",{id:"extrudemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/extrude-mode.ts"},"ExtrudeMode")),(0,i.kt)("p",null,"User can move edge. Click and drag from anywhere between 2 points in edge."),(0,i.kt)("h2",{id:"scalemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/scale-mode.ts"},"ScaleMode")),(0,i.kt)("p",null,"User can scale a feature about its centroid by clicking and dragging (inward or outward) the selected geometry. This mode supports multiple selections."),(0,i.kt)("h2",{id:"rotatemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/rotate-mode.ts"},"RotateMode")),(0,i.kt)("p",null,"User can rotate a feature about its centroid by clicking and dragging the selected geometry. This mode supports multiple selections."),(0,i.kt)("h2",{id:"translatemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/translate-mode.ts"},"TranslateMode")),(0,i.kt)("p",null,"The user can move a feature by selecting one or more features and dragging anywhere within the screen.\n",(0,i.kt)("em",{parentName:"p"},"Additionally, the user can initiate snapping by clicking and dragging the selected feature's vertex handles. If the vertex handle is close enough to another feature's vertex, the two features will snap together."),"\nThe following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object for TranslateMode:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"screenSpace")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},""),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", the features will be translated without distortion in screen space.")))),(0,i.kt)("h2",{id:"transformmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/transform-mode.ts"},"TransformMode")),(0,i.kt)("p",null,"A single mode that provides translating, rotating, and scaling capabilities. Translation can be performed by clicking and dragging the selected feature itself. Rotating can be performed by clicking and dragging the top-most edit handle around a centroid pivot. Scaling can be performed by clicking and dragging one of the corner edit handles. Just like the individual modes, this mode supports multiple selections and feature snapping."),(0,i.kt)("h2",{id:"duplicatemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/duplicate-mode.ts"},"DuplicateMode")),(0,i.kt)("p",null,"User can duplicate and translate a feature by clicking selected feature and dragging anywhere on the screen.\nThis mode is extends TranslateMode. This mode supports multiple selections."),(0,i.kt)("h2",{id:"drawpointmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-point-mode.ts"},"DrawPointMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Point")," feature by clicking where the point is to be."),(0,i.kt)("h2",{id:"drawlinestringmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-line-string-mode.ts"},"DrawLineStringMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature by clicking positions to add. User finishes drawing by double-clicking."),(0,i.kt)("h2",{id:"extendlinestringmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/extend-line-string-mode.ts"},"ExtendLineStringMode")),(0,i.kt)("p",null,"User can extend an existing ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature by clicking positions to add. A single ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature must be selected for this mode."),(0,i.kt)("h3",{id:"modeconfig"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"drawAtFront")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},""),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),', will extend from the "beginning" of the line, i.e. relative to the start of the coordinates array.')))),(0,i.kt)("h3",{id:"edit-context-1"},"Edit Context"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," argument to the ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," callback contains the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"positionIndexes")," (Array): An array of numbers representing the indexes of the added position within the feature's ",(0,i.kt)("inlineCode",{parentName:"p"},"coordinates")," array")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"position")," (Array): An array containing the ground coordinates (i.e. ","[lng, lat]",") of the added position"))),(0,i.kt)("h2",{id:"resizecirclemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/resize-circle-mode.js"},"ResizeCircleMode")),(0,i.kt)("p",null,"User can resize an existing circular Polygon feature by clicking and dragging along the ring."),(0,i.kt)("h2",{id:"drawpolygonmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-polygon-mode.js"},"DrawPolygonMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking positions to add then closing the polygon (or double-clicking)."),(0,i.kt)("h3",{id:"modeconfig-1"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"preventOverlappingLines")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", it will not be possible to add a polygon point if the current line overlaps any other lines on the same polygon.")))),(0,i.kt)("h3",{id:"edit-context-2"},"Edit Context"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," argument to the ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," callback contains the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"positionIndexes")," (Array): An array of numbers representing the indexes of the added position within the feature's ",(0,i.kt)("inlineCode",{parentName:"p"},"coordinates")," array")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"position")," (Array): An array containing the ground coordinates (i.e. ","[lng, lat]",") of the added position"))),(0,i.kt)("h2",{id:"draw90degreepolygonmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-90degree-polygon-mode.ts"},"Draw90DegreePolygonMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature with 90 degree corners (right angle) by clicking positions to add then closing the polygon (or double-clicking). After clicking the 2 points, the draw mode guides/allows to have right angle polygon."),(0,i.kt)("h2",{id:"drawpolygonbydraggingmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-polygon-by-dragging-mode.ts"},"DrawPolygonByDraggingMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by dragging (similar to the lasso tool commonly found in photo editing software)."),(0,i.kt)("h3",{id:"modeconfig-2"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"throttleMs")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"number"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If provided, the dragging function will be throttled by the specified number of milliseconds.")))),(0,i.kt)("h2",{id:"drawrectanglemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-mode.ts"},"DrawRectangleMode")),(0,i.kt)("p",null,"User can draw a new rectangular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking two opposing corners of the rectangle."),(0,i.kt)("h3",{id:"modeconfig-3"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawrectanglefromcentermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-from-center-mode.ts"},"DrawRectangleFromCenterMode")),(0,i.kt)("p",null,"User can draw a new rectangular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the center then along a corner of the rectangle."),(0,i.kt)("h3",{id:"modeconfig-4"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawrectangleusingthreepointsmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-using-three-points-mode.ts"},"DrawRectangleUsingThreePointsMode")),(0,i.kt)("p",null,"User can draw a new rectangular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking three corners of the rectangle."),(0,i.kt)("h2",{id:"drawsquaremode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-square-mode.ts"},"DrawSquareMode")),(0,i.kt)("p",null,"User can draw a new square-shaped ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking two opposing corners of the square."),(0,i.kt)("h2",{id:"drawsquarefromcentermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-square-from-center-mode.ts"},"DrawSquareFromCenterMode")),(0,i.kt)("p",null,"User can draw a new square-shaped ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the center and then along one of the corners of the square."),(0,i.kt)("h3",{id:"modeconfig-5"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawcirclefromcentermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-from-center-mode.ts"},"DrawCircleFromCenterMode")),(0,i.kt)("p",null,"User can draw a new circular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the center then along the ring."),(0,i.kt)("h3",{id:"modeconfig-6"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"steps")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"x "),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If steps: ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," means the circle will be drawn using ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," number of points."))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawcirclebydiametermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-by-diameter-mode.ts"},"DrawCircleByDiameterMode")),(0,i.kt)("p",null,"User can draw a new circular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the two ends of its diameter."),(0,i.kt)("h3",{id:"modeconfig-7"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"steps")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"x "),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If steps: ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," means the circle will be drawn using ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," number of points."))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawellipsebyboundingboxmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-by-bounding-box-mode.ts"},"DrawEllipseByBoundingBoxMode")),(0,i.kt)("p",null,"User can draw a new ellipse shape ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking two corners of bounding box."),(0,i.kt)("h3",{id:"modeconfig-8"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawellipseusingthreepointsmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-using-three-points-mode.ts"},"DrawEllipseUsingThreePointsMode")),(0,i.kt)("p",null,"User can draw a new ellipse shape ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking center and two corners of the ellipse."),(0,i.kt)("h2",{id:"splitpolygonmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/split-polygon-mode.ts"},"SplitPolygonMode")),(0,i.kt)("p",null,"User can split a polygon by drawing a new ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature on top of the polygon."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"If the first and the last click is outside the polygon, it will split the polygon")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"If the clicked position is inside the polygon, it will not split the polygon"))),(0,i.kt)("h2",{id:"measuredistancemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-distance-mode.ts"},"MeasureDistanceMode")),(0,i.kt)("p",null,"User can measure a distance between two points."),(0,i.kt)("h3",{id:"modeconfig-9"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"turfOptions")," (Object, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," object passed to turf's ",(0,i.kt)("a",{parentName:"li",href:"https://turfjs.org/docs/#distance"},"distance")," function"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"formatTooltip")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to format tooltip text (argument is the numeric distance)"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"(distance) => parseFloat(distance).toFixed(2) + units")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"measurementCallback")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to call as measurements are calculated"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"centerTooltipsOnLine")," (Boolean, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If true, the measurement tooltips appear on the middle of their respective line segments rather than at the end"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"false"))))),(0,i.kt)("h2",{id:"measureareamode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-area-mode.ts"},"MeasureAreaMode")),(0,i.kt)("p",null,"User can measure an area by drawing an arbitrary polygon."),(0,i.kt)("h3",{id:"modeconfig-10"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"formatTooltip")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to format tooltip text (argument is the numeric area)"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"(distance) => parseFloat(distance).toFixed(2) + units")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"measurementCallback")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to call as measurements are calculated"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined"))))),(0,i.kt)("h2",{id:"measureanglemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-angle-mode.ts"},"MeasureAngleMode")),(0,i.kt)("p",null,"User can measure an angle by drawing two lines."),(0,i.kt)("h3",{id:"modeconfig-11"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"formatTooltip")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to format tooltip text (argument is the numeric area)"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"(distance) => parseFloat(angle).toFixed(2) + units")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"measurementCallback")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to call as measurements are calculated"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined"))))),(0,i.kt)("h2",{id:"elevationmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/elevation-mode.ts"},"ElevationMode")),(0,i.kt)("p",null,"User can move a point up and down."),(0,i.kt)("h3",{id:"modeconfig-12"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"minElevation")," (Number, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"The minimum elevation to allow"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"0")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"maxElevation")," (Number, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"The maximum elevation to allow"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"20000")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"calculateElevationChange")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"A function to use to calculate the elevation change in response to mouse movement"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"10 * ")),(0,i.kt)("li",{parentName:"ul"},"Configure to use movement based on viewport:")))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-javascript"},"if (mode === 'elevation') {\n modeConfig.calculateElevationChange = (opts) =>\n ElevationMode.calculateElevationChangeWithViewport(viewport, opts);\n}\n")),(0,i.kt)("h2",{id:"boolean-operations"},"Boolean Operations"),(0,i.kt)("p",null,"For all polygon drawing modes, the following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"booleanOperation")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"null|'union'|'difference'|'intersection'"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If non-null, requires a single ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," or ",(0,i.kt)("inlineCode",{parentName:"li"},"MultiPolygon")," selection"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"null"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is added as a new feature regardless of selection"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"union"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is unioned with the selected geometry"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"difference"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is subtracted from the selected geometry"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"intersection"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is intersected with the selected geometry")))),(0,i.kt)("h2",{id:"composite-mode"},"Composite Mode"),(0,i.kt)("p",null,"Use ",(0,i.kt)("inlineCode",{parentName:"p"},"CompositeMode")," to combine multiple modes.\n",(0,i.kt)("em",{parentName:"p"},"Not all combinations are guaranteed to work.")),(0,i.kt)("h3",{id:"constructor"},"Constructor"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"new CompositeMode(modes, options = {})")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"modes"),": ",(0,i.kt)("inlineCode",{parentName:"li"},"Array")," Modes you want to combine. ",(0,i.kt)("strong",{parentName:"li"},"Order is very important.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," (optional): Options to be added later.")),(0,i.kt)("h3",{id:"example"},"Example"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"new CompositeMode([new DrawLineStringMode(), new ModifyMode()])\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/b91d26fa.5f8a0987.js b/assets/js/b91d26fa.5f8a0987.js deleted file mode 100644 index 3f21f978..00000000 --- a/assets/js/b91d26fa.5f8a0987.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1478],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>g});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var d=a.createContext({}),p=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,o=e.originalType,d=e.parentName,m=r(e,["components","mdxType","originalType","parentName"]),s=p(n),c=i,g=s["".concat(d,".").concat(c)]||s[c]||u[c]||o;return n?a.createElement(g,l(l({ref:t},m),{},{components:n})):a.createElement(g,l({ref:t},m))}));function g(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=n.length,l=new Array(o);l[0]=c;var r={};for(var d in t)hasOwnProperty.call(t,d)&&(r[d]=t[d]);r.originalType=e,r[s]="string"==typeof e?e:i,l[1]=r;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>p});var a=n(7462),i=(n(7294),n(3905));const o={},l="Editing Modes",r={unversionedId:"modules/edit-modes/api-reference/README",id:"modules/edit-modes/api-reference/README",title:"Editing Modes",description:"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.",source:"@site/../docs/modules/edit-modes/api-reference/README.md",sourceDirName:"modules/edit-modes/api-reference",slug:"/modules/edit-modes/api-reference/",permalink:"/docs/modules/edit-modes/api-reference/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/edit-modes/api-reference/README.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Outline (Shader Module)",permalink:"/docs/modules/editor-layers/api-reference/outline"},next:{title:"HtmlOverlay",permalink:"/docs/modules/react-overlays/api-reference/html-overlay"}},d={},p=[{value:"ViewMode",id:"viewmode",level:2},{value:"ModifyMode",id:"modifymode",level:2},{value:"Edit Context",id:"edit-context",level:3},{value:"ExtrudeMode",id:"extrudemode",level:2},{value:"ScaleMode",id:"scalemode",level:2},{value:"RotateMode",id:"rotatemode",level:2},{value:"TranslateMode",id:"translatemode",level:2},{value:"TransformMode",id:"transformmode",level:2},{value:"DuplicateMode",id:"duplicatemode",level:2},{value:"DrawPointMode",id:"drawpointmode",level:2},{value:"DrawLineStringMode",id:"drawlinestringmode",level:2},{value:"ExtendLineStringMode",id:"extendlinestringmode",level:2},{value:"ModeConfig",id:"modeconfig",level:3},{value:"Edit Context",id:"edit-context-1",level:3},{value:"ResizeCircleMode",id:"resizecirclemode",level:2},{value:"DrawPolygonMode",id:"drawpolygonmode",level:2},{value:"ModeConfig",id:"modeconfig-1",level:3},{value:"Edit Context",id:"edit-context-2",level:3},{value:"Draw90DegreePolygonMode",id:"draw90degreepolygonmode",level:2},{value:"DrawPolygonByDraggingMode",id:"drawpolygonbydraggingmode",level:2},{value:"ModeConfig",id:"modeconfig-2",level:3},{value:"DrawRectangleMode",id:"drawrectanglemode",level:2},{value:"ModeConfig",id:"modeconfig-3",level:3},{value:"DrawRectangleFromCenterMode",id:"drawrectanglefromcentermode",level:2},{value:"ModeConfig",id:"modeconfig-4",level:3},{value:"DrawRectangleUsingThreePointsMode",id:"drawrectangleusingthreepointsmode",level:2},{value:"DrawSquareMode",id:"drawsquaremode",level:2},{value:"DrawSquareFromCenterMode",id:"drawsquarefromcentermode",level:2},{value:"ModeConfig",id:"modeconfig-5",level:3},{value:"DrawCircleFromCenterMode",id:"drawcirclefromcentermode",level:2},{value:"ModeConfig",id:"modeconfig-6",level:3},{value:"DrawCircleByDiameterMode",id:"drawcirclebydiametermode",level:2},{value:"ModeConfig",id:"modeconfig-7",level:3},{value:"DrawEllipseByBoundingBoxMode",id:"drawellipsebyboundingboxmode",level:2},{value:"ModeConfig",id:"modeconfig-8",level:3},{value:"DrawEllipseUsingThreePointsMode",id:"drawellipseusingthreepointsmode",level:2},{value:"SplitPolygonMode",id:"splitpolygonmode",level:2},{value:"MeasureDistanceMode",id:"measuredistancemode",level:2},{value:"ModeConfig",id:"modeconfig-9",level:3},{value:"MeasureAreaMode",id:"measureareamode",level:2},{value:"ModeConfig",id:"modeconfig-10",level:3},{value:"MeasureAngleMode",id:"measureanglemode",level:2},{value:"ModeConfig",id:"modeconfig-11",level:3},{value:"ElevationMode",id:"elevationmode",level:2},{value:"ModeConfig",id:"modeconfig-12",level:3},{value:"Boolean Operations",id:"boolean-operations",level:2},{value:"Composite Mode",id:"composite-mode",level:2},{value:"Constructor",id:"constructor",level:3},{value:"Example",id:"example",level:3}],m={toc:p},s="wrapper";function u(e){let{components:t,...n}=e;return(0,i.kt)(s,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"editing-modes"},"Editing Modes"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"EditMode"),"s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries."),(0,i.kt)("p",null,"The following are the built-in ",(0,i.kt)("inlineCode",{parentName:"p"},"EditMode"),"s provided by nebula.gl:"),(0,i.kt)("h2",{id:"viewmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/view-mode.ts"},"ViewMode")),(0,i.kt)("p",null,"No edits are possible, but selection is still possible."),(0,i.kt)("h2",{id:"modifymode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/modify-mode.ts"},"ModifyMode")),(0,i.kt)("p",null,"User can move existing points, add intermediate points along lines, and remove points."),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object for ModifyMode:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"lockRectangles")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},""),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", features with ",(0,i.kt)("inlineCode",{parentName:"li"},"properties.shape === 'Rectangle'")," will preserve rectangular shape.")))),(0,i.kt)("h3",{id:"edit-context"},"Edit Context"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," argument to the ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," callback contains the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"positionIndexes")," (Array): An array of numbers representing the indexes of the edited position within the feature's ",(0,i.kt)("inlineCode",{parentName:"p"},"coordinates")," array")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"position")," (Array): An array containing the ground coordinates (i.e. ","[lng, lat]",") of the edited position"))),(0,i.kt)("h2",{id:"extrudemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/extrude-mode.ts"},"ExtrudeMode")),(0,i.kt)("p",null,"User can move edge. Click and drag from anywhere between 2 points in edge."),(0,i.kt)("h2",{id:"scalemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/scale-mode.ts"},"ScaleMode")),(0,i.kt)("p",null,"User can scale a feature about its centroid by clicking and dragging (inward or outward) the selected geometry. This mode supports multiple selections."),(0,i.kt)("h2",{id:"rotatemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/rotate-mode.ts"},"RotateMode")),(0,i.kt)("p",null,"User can rotate a feature about its centroid by clicking and dragging the selected geometry. This mode supports multiple selections."),(0,i.kt)("h2",{id:"translatemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/translate-mode.ts"},"TranslateMode")),(0,i.kt)("p",null,"The user can move a feature by selecting one or more features and dragging anywhere within the screen.\n",(0,i.kt)("em",{parentName:"p"},"Additionally, the user can initiate snapping by clicking and dragging the selected feature's vertex handles. If the vertex handle is close enough to another feature's vertex, the two features will snap together."),"\nThe following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object for TranslateMode:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"screenSpace")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},""),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", the features will be translated without distortion in screen space.")))),(0,i.kt)("h2",{id:"transformmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/transform-mode.ts"},"TransformMode")),(0,i.kt)("p",null,"A single mode that provides translating, rotating, and scaling capabilities. Translation can be performed by clicking and dragging the selected feature itself. Rotating can be performed by clicking and dragging the top-most edit handle around a centroid pivot. Scaling can be performed by clicking and dragging one of the corner edit handles. Just like the individual modes, this mode supports multiple selections and feature snapping."),(0,i.kt)("h2",{id:"duplicatemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/duplicate-mode.ts"},"DuplicateMode")),(0,i.kt)("p",null,"User can duplicate and translate a feature by clicking selected feature and dragging anywhere on the screen.\nThis mode is extends TranslateMode. This mode supports multiple selections."),(0,i.kt)("h2",{id:"drawpointmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-point-mode.ts"},"DrawPointMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Point")," feature by clicking where the point is to be."),(0,i.kt)("h2",{id:"drawlinestringmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-line-string-mode.ts"},"DrawLineStringMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature by clicking positions to add. User finishes drawing by double-clicking."),(0,i.kt)("h2",{id:"extendlinestringmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/extend-line-string-mode.ts"},"ExtendLineStringMode")),(0,i.kt)("p",null,"User can extend an existing ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature by clicking positions to add. A single ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature must be selected for this mode."),(0,i.kt)("h3",{id:"modeconfig"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"drawAtFront")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},""),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),', will extend from the "beginning" of the line, i.e. relative to the start of the coordinates array.')))),(0,i.kt)("h3",{id:"edit-context-1"},"Edit Context"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," argument to the ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," callback contains the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"positionIndexes")," (Array): An array of numbers representing the indexes of the added position within the feature's ",(0,i.kt)("inlineCode",{parentName:"p"},"coordinates")," array")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"position")," (Array): An array containing the ground coordinates (i.e. ","[lng, lat]",") of the added position"))),(0,i.kt)("h2",{id:"resizecirclemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/resize-circle-mode.js"},"ResizeCircleMode")),(0,i.kt)("p",null,"User can resize an existing circular Polygon feature by clicking and dragging along the ring."),(0,i.kt)("h2",{id:"drawpolygonmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-polygon-mode.js"},"DrawPolygonMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking positions to add then closing the polygon (or double-clicking)."),(0,i.kt)("h3",{id:"modeconfig-1"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"preventOverlappingLines")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", it will not be possible to add a polygon point if the current line overlaps any other lines on the same polygon.")))),(0,i.kt)("h3",{id:"edit-context-2"},"Edit Context"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"editContext")," argument to the ",(0,i.kt)("inlineCode",{parentName:"p"},"onEdit")," callback contains the following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"positionIndexes")," (Array): An array of numbers representing the indexes of the added position within the feature's ",(0,i.kt)("inlineCode",{parentName:"p"},"coordinates")," array")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"position")," (Array): An array containing the ground coordinates (i.e. ","[lng, lat]",") of the added position"))),(0,i.kt)("h2",{id:"draw90degreepolygonmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-90degree-polygon-mode.ts"},"Draw90DegreePolygonMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature with 90 degree corners (right angle) by clicking positions to add then closing the polygon (or double-clicking). After clicking the 2 points, the draw mode guides/allows to have right angle polygon."),(0,i.kt)("h2",{id:"drawpolygonbydraggingmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-polygon-by-dragging-mode.ts"},"DrawPolygonByDraggingMode")),(0,i.kt)("p",null,"User can draw a new ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by dragging (similar to the lasso tool commonly found in photo editing software)."),(0,i.kt)("h3",{id:"modeconfig-2"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"throttleMs")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"number"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If provided, the dragging function will be throttled by the specified number of milliseconds.")))),(0,i.kt)("h2",{id:"drawrectanglemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-mode.ts"},"DrawRectangleMode")),(0,i.kt)("p",null,"User can draw a new rectangular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking two opposing corners of the rectangle."),(0,i.kt)("h3",{id:"modeconfig-3"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawrectanglefromcentermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-from-center-mode.ts"},"DrawRectangleFromCenterMode")),(0,i.kt)("p",null,"User can draw a new rectangular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the center then along a corner of the rectangle."),(0,i.kt)("h3",{id:"modeconfig-4"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawrectangleusingthreepointsmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-rectangle-using-three-points-mode.ts"},"DrawRectangleUsingThreePointsMode")),(0,i.kt)("p",null,"User can draw a new rectangular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking three corners of the rectangle."),(0,i.kt)("h2",{id:"drawsquaremode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-square-mode.ts"},"DrawSquareMode")),(0,i.kt)("p",null,"User can draw a new square-shaped ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking two opposing corners of the square."),(0,i.kt)("h2",{id:"drawsquarefromcentermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-square-from-center-mode.ts"},"DrawSquareFromCenterMode")),(0,i.kt)("p",null,"User can draw a new square-shaped ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the center and then along one of the corners of the square."),(0,i.kt)("h3",{id:"modeconfig-5"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawcirclefromcentermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-from-center-mode.ts"},"DrawCircleFromCenterMode")),(0,i.kt)("p",null,"User can draw a new circular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the center then along the ring."),(0,i.kt)("h3",{id:"modeconfig-6"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"steps")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"x "),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If steps: ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," means the circle will be drawn using ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," number of points."))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawcirclebydiametermode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-circle-by-diameter-mode.ts"},"DrawCircleByDiameterMode")),(0,i.kt)("p",null,"User can draw a new circular ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking the two ends of its diameter."),(0,i.kt)("h3",{id:"modeconfig-7"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"steps")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"x "),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If steps: ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," means the circle will be drawn using ",(0,i.kt)("inlineCode",{parentName:"li"},"x")," number of points."))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawellipsebyboundingboxmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-by-bounding-box-mode.ts"},"DrawEllipseByBoundingBoxMode")),(0,i.kt)("p",null,"User can draw a new ellipse shape ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking two corners of bounding box."),(0,i.kt)("h3",{id:"modeconfig-8"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"dragToDraw")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"boolean"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"true"),", user can click and drag instead of clicking twice. Note however, that the user will not be able to pan the map while drawing.")))),(0,i.kt)("h2",{id:"drawellipseusingthreepointsmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/draw-ellipse-using-three-points-mode.ts"},"DrawEllipseUsingThreePointsMode")),(0,i.kt)("p",null,"User can draw a new ellipse shape ",(0,i.kt)("inlineCode",{parentName:"p"},"Polygon")," feature by clicking center and two corners of the ellipse."),(0,i.kt)("h2",{id:"splitpolygonmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/split-polygon-mode.ts"},"SplitPolygonMode")),(0,i.kt)("p",null,"User can split a polygon by drawing a new ",(0,i.kt)("inlineCode",{parentName:"p"},"LineString")," feature on top of the polygon."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"If the first and the last click is outside the polygon, it will split the polygon")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"If the clicked position is inside the polygon, it will not split the polygon"))),(0,i.kt)("h2",{id:"measuredistancemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-distance-mode.ts"},"MeasureDistanceMode")),(0,i.kt)("p",null,"User can measure a distance between two points."),(0,i.kt)("h3",{id:"modeconfig-9"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"turfOptions")," (Object, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," object passed to turf's ",(0,i.kt)("a",{parentName:"li",href:"https://turfjs.org/docs/#distance"},"distance")," function"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"formatTooltip")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to format tooltip text (argument is the numeric distance)"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"(distance) => parseFloat(distance).toFixed(2) + units")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"measurementCallback")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to call as measurements are calculated"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"centerTooltipsOnLine")," (Boolean, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If true, the measurement tooltips appear on the middle of their respective line segments rather than at the end"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"false"))))),(0,i.kt)("h2",{id:"measureareamode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-area-mode.ts"},"MeasureAreaMode")),(0,i.kt)("p",null,"User can measure an area by drawing an arbitrary polygon."),(0,i.kt)("h3",{id:"modeconfig-10"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"formatTooltip")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to format tooltip text (argument is the numeric area)"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"(distance) => parseFloat(distance).toFixed(2) + units")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"measurementCallback")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to call as measurements are calculated"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined"))))),(0,i.kt)("h2",{id:"measureanglemode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/measure-angle-mode.ts"},"MeasureAngleMode")),(0,i.kt)("p",null,"User can measure an angle by drawing two lines."),(0,i.kt)("h3",{id:"modeconfig-11"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"formatTooltip")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to format tooltip text (argument is the numeric area)"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"(distance) => parseFloat(angle).toFixed(2) + units")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"measurementCallback")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"Function to call as measurements are calculated"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"undefined"))))),(0,i.kt)("h2",{id:"elevationmode"},(0,i.kt)("a",{parentName:"h2",href:"https://github.com/uber/nebula.gl/blob/master/modules/edit-modes/src/lib/elevation-mode.ts"},"ElevationMode")),(0,i.kt)("p",null,"User can move a point up and down."),(0,i.kt)("h3",{id:"modeconfig-12"},"ModeConfig"),(0,i.kt)("p",null,"The following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"minElevation")," (Number, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"The minimum elevation to allow"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"0")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"maxElevation")," (Number, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"The maximum elevation to allow"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"20000")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"calculateElevationChange")," (Function, optional)"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"A function to use to calculate the elevation change in response to mouse movement"),(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"10 * ")),(0,i.kt)("li",{parentName:"ul"},"Configure to use movement based on viewport:")))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-javascript"},"if (mode === 'elevation') {\n modeConfig.calculateElevationChange = (opts) =>\n ElevationMode.calculateElevationChangeWithViewport(viewport, opts);\n}\n")),(0,i.kt)("h2",{id:"boolean-operations"},"Boolean Operations"),(0,i.kt)("p",null,"For all polygon drawing modes, the following options can be provided in the ",(0,i.kt)("inlineCode",{parentName:"p"},"modeConfig")," object:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"booleanOperation")," (optional): ",(0,i.kt)("inlineCode",{parentName:"li"},"null|'union'|'difference'|'intersection'"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"If non-null, requires a single ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," or ",(0,i.kt)("inlineCode",{parentName:"li"},"MultiPolygon")," selection"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"null"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is added as a new feature regardless of selection"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"union"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is unioned with the selected geometry"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"difference"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is subtracted from the selected geometry"),(0,i.kt)("li",{parentName:"ul"},"If ",(0,i.kt)("inlineCode",{parentName:"li"},"intersection"),", the drawn ",(0,i.kt)("inlineCode",{parentName:"li"},"Polygon")," is intersected with the selected geometry")))),(0,i.kt)("h2",{id:"composite-mode"},"Composite Mode"),(0,i.kt)("p",null,"Use ",(0,i.kt)("inlineCode",{parentName:"p"},"CompositeMode")," to combine multiple modes.\n",(0,i.kt)("em",{parentName:"p"},"Not all combinations are guaranteed to work.")),(0,i.kt)("h3",{id:"constructor"},"Constructor"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"new CompositeMode(modes, options = {})")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"modes"),": ",(0,i.kt)("inlineCode",{parentName:"li"},"Array")," Modes you want to combine. ",(0,i.kt)("strong",{parentName:"li"},"Order is very important.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," (optional): Options to be added later.")),(0,i.kt)("h3",{id:"example"},"Example"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"new CompositeMode([new DrawLineStringMode(), new ModifyMode()])\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/bdcf3cba.7b39478e.js b/assets/js/bdcf3cba.7b39478e.js new file mode 100644 index 00000000..be1ff7ce --- /dev/null +++ b/assets/js/bdcf3cba.7b39478e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4848],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>h});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),u=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=u(e.components);return n.createElement(i.Provider,{value:t},e.children)},c="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},g=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,d=e.originalType,i=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),c=u(r),g=a,h=c["".concat(i,".").concat(g)]||c[g]||p[g]||d;return r?n.createElement(h,l(l({ref:t},s),{},{components:r})):n.createElement(h,l({ref:t},s))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var d=r.length,l=new Array(d);l[0]=g;var o={};for(var i in t)hasOwnProperty.call(t,i)&&(o[i]=t[i]);o.originalType=e,o[c]="string"==typeof e?e:a,l[1]=o;for(var u=2;u{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>p,frontMatter:()=>d,metadata:()=>o,toc:()=>u});var n=r(7462),a=(r(7294),r(3905));const d={},l="Node Class",o={unversionedId:"modules/react-graph-layers/api-reference/node",id:"modules/react-graph-layers/api-reference/node",title:"Node Class",description:"The Node class is the base class of the node, which provides a list of basic util functions to be used through out the applications.",source:"@site/../docs/modules/react-graph-layers/api-reference/node.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Graph Class",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph"},next:{title:"Edge Class",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge"}},i={},u=[{value:"Constructor",id:"constructor",level:2},{value:"Basic Properties",id:"basic-properties",level:3},{value:"id (String|Number, required)",id:"id-stringnumber-required",level:5},{value:"data (Object, optional)",id:"data-object-optional",level:5},{value:"getConnectedEdges()",id:"getconnectededges",level:2},{value:"getDegree()",id:"getdegree",level:2},{value:"getId()",id:"getid",level:2},{value:"getInDegree()",id:"getindegree",level:2},{value:"getOutDegree()",id:"getoutdegree",level:2},{value:"getPropertyValue(key)",id:"getpropertyvaluekey",level:2},{value:"key (String|Number, required)",id:"key-stringnumber-required",level:5},{value:"getSiblingIds()",id:"getsiblingids",level:2},{value:"setData(data)",id:"setdatadata",level:2},{value:"data (Any, required)",id:"data-any-required",level:5},{value:"setDataProperty(key, value)",id:"setdatapropertykey-value",level:2},{value:"key (String, required)",id:"key-string-required",level:5},{value:"value (Any, required)",id:"value-any-required",level:5},{value:"addConnectedEdges(edges)",id:"addconnectededgesedges",level:2},{value:"removeConnectedEdges(edges)",id:"removeconnectededgesedges",level:2},{value:"clearConnectedEdges()",id:"clearconnectededges",level:2}],s={toc:u},c="wrapper";function p(e){let{components:t,...r}=e;return(0,a.kt)(c,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"node-class"},"Node Class"),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"Node")," class is the base class of the node, which provides a list of basic util functions to be used through out the applications."),(0,a.kt)("h2",{id:"constructor"},"Constructor"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"new Node(props);\n")),(0,a.kt)("p",null,"Parameters:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"props")," (Object) - ",(0,a.kt)("inlineCode",{parentName:"li"},"Node")," properties.")),(0,a.kt)("h3",{id:"basic-properties"},"Basic Properties"),(0,a.kt)("h5",{id:"id-stringnumber-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"id")," (String|Number, required)"),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"id")," must be unique among all nodes in the graph at a given time."),(0,a.kt)("h5",{id:"data-object-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"data")," (Object, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"{}"))),(0,a.kt)("p",null,"The origin node data."),(0,a.kt)("h2",{id:"getconnectededges"},"getConnectedEdges()"),(0,a.kt)("p",null,"Return all the connected edges."),(0,a.kt)("h2",{id:"getdegree"},"getDegree()"),(0,a.kt)("p",null,"Return the degree of the node -- includes in-degree and out-degree"),(0,a.kt)("h2",{id:"getid"},"getId()"),(0,a.kt)("p",null,"Return the ID of the node."),(0,a.kt)("h2",{id:"getindegree"},"getInDegree()"),(0,a.kt)("p",null,"Return the in-degree of the node."),(0,a.kt)("h2",{id:"getoutdegree"},"getOutDegree()"),(0,a.kt)("p",null,"Return the out-degree of the node."),(0,a.kt)("h2",{id:"getpropertyvaluekey"},"getPropertyValue(key)"),(0,a.kt)("p",null,"Return of the value of the selected property key."),(0,a.kt)("h5",{id:"key-stringnumber-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"key")," (String|Number, required)"),(0,a.kt)("p",null,"The property key."),(0,a.kt)("h2",{id:"getsiblingids"},"getSiblingIds()"),(0,a.kt)("p",null,"Return all the IDs of the sibling nodes."),(0,a.kt)("h2",{id:"setdatadata"},"setData(data)"),(0,a.kt)("p",null,"Set the new node data."),(0,a.kt)("h5",{id:"data-any-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"data")," (Any, required)"),(0,a.kt)("p",null,"The new data of the node."),(0,a.kt)("h2",{id:"setdatapropertykey-value"},"setDataProperty(key, value)"),(0,a.kt)("p",null,"Update a data property."),(0,a.kt)("h5",{id:"key-string-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"key")," (String, required)"),(0,a.kt)("p",null,"The key of the property"),(0,a.kt)("h5",{id:"value-any-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"value")," (Any, required)"),(0,a.kt)("p",null,"The value of the property."),(0,a.kt)("h2",{id:"addconnectededgesedges"},"addConnectedEdges(edges)"),(0,a.kt)("p",null,"Add new connected edges to the node."),(0,a.kt)("h2",{id:"removeconnectededgesedges"},"removeConnectedEdges(edges)"),(0,a.kt)("p",null,"Remove edges from ",(0,a.kt)("inlineCode",{parentName:"p"},"this._connectedEdges")),(0,a.kt)("h2",{id:"clearconnectededges"},"clearConnectedEdges()"),(0,a.kt)("p",null,"Clear ",(0,a.kt)("inlineCode",{parentName:"p"},"this._connectedEdges")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/bdcf3cba.7e52ca76.js b/assets/js/bdcf3cba.7e52ca76.js deleted file mode 100644 index b580aeff..00000000 --- a/assets/js/bdcf3cba.7e52ca76.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4848],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>h});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var i=n.createContext({}),u=function(e){var t=n.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=u(e.components);return n.createElement(i.Provider,{value:t},e.children)},c="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},g=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,d=e.originalType,i=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),c=u(r),g=a,h=c["".concat(i,".").concat(g)]||c[g]||p[g]||d;return r?n.createElement(h,l(l({ref:t},s),{},{components:r})):n.createElement(h,l({ref:t},s))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var d=r.length,l=new Array(d);l[0]=g;var o={};for(var i in t)hasOwnProperty.call(t,i)&&(o[i]=t[i]);o.originalType=e,o[c]="string"==typeof e?e:a,l[1]=o;for(var u=2;u{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>p,frontMatter:()=>d,metadata:()=>o,toc:()=>u});var n=r(7462),a=(r(7294),r(3905));const d={},l="Node Class",o={unversionedId:"modules/react-graph-layers/api-reference/node",id:"modules/react-graph-layers/api-reference/node",title:"Node Class",description:"The Node class is the base class of the node, which provides a list of basic util functions to be used through out the applications.",source:"@site/../docs/modules/react-graph-layers/api-reference/node.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node",permalink:"/docs/modules/react-graph-layers/api-reference/node",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Graph Class",permalink:"/docs/modules/react-graph-layers/api-reference/graph"},next:{title:"Edge Class",permalink:"/docs/modules/react-graph-layers/api-reference/edge"}},i={},u=[{value:"Constructor",id:"constructor",level:2},{value:"Basic Properties",id:"basic-properties",level:3},{value:"id (String|Number, required)",id:"id-stringnumber-required",level:5},{value:"data (Object, optional)",id:"data-object-optional",level:5},{value:"getConnectedEdges()",id:"getconnectededges",level:2},{value:"getDegree()",id:"getdegree",level:2},{value:"getId()",id:"getid",level:2},{value:"getInDegree()",id:"getindegree",level:2},{value:"getOutDegree()",id:"getoutdegree",level:2},{value:"getPropertyValue(key)",id:"getpropertyvaluekey",level:2},{value:"key (String|Number, required)",id:"key-stringnumber-required",level:5},{value:"getSiblingIds()",id:"getsiblingids",level:2},{value:"setData(data)",id:"setdatadata",level:2},{value:"data (Any, required)",id:"data-any-required",level:5},{value:"setDataProperty(key, value)",id:"setdatapropertykey-value",level:2},{value:"key (String, required)",id:"key-string-required",level:5},{value:"value (Any, required)",id:"value-any-required",level:5},{value:"addConnectedEdges(edges)",id:"addconnectededgesedges",level:2},{value:"removeConnectedEdges(edges)",id:"removeconnectededgesedges",level:2},{value:"clearConnectedEdges()",id:"clearconnectededges",level:2}],s={toc:u},c="wrapper";function p(e){let{components:t,...r}=e;return(0,a.kt)(c,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"node-class"},"Node Class"),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"Node")," class is the base class of the node, which provides a list of basic util functions to be used through out the applications."),(0,a.kt)("h2",{id:"constructor"},"Constructor"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"new Node(props);\n")),(0,a.kt)("p",null,"Parameters:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"props")," (Object) - ",(0,a.kt)("inlineCode",{parentName:"li"},"Node")," properties.")),(0,a.kt)("h3",{id:"basic-properties"},"Basic Properties"),(0,a.kt)("h5",{id:"id-stringnumber-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"id")," (String|Number, required)"),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"id")," must be unique among all nodes in the graph at a given time."),(0,a.kt)("h5",{id:"data-object-optional"},(0,a.kt)("inlineCode",{parentName:"h5"},"data")," (Object, optional)"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"{}"))),(0,a.kt)("p",null,"The origin node data."),(0,a.kt)("h2",{id:"getconnectededges"},"getConnectedEdges()"),(0,a.kt)("p",null,"Return all the connected edges."),(0,a.kt)("h2",{id:"getdegree"},"getDegree()"),(0,a.kt)("p",null,"Return the degree of the node -- includes in-degree and out-degree"),(0,a.kt)("h2",{id:"getid"},"getId()"),(0,a.kt)("p",null,"Return the ID of the node."),(0,a.kt)("h2",{id:"getindegree"},"getInDegree()"),(0,a.kt)("p",null,"Return the in-degree of the node."),(0,a.kt)("h2",{id:"getoutdegree"},"getOutDegree()"),(0,a.kt)("p",null,"Return the out-degree of the node."),(0,a.kt)("h2",{id:"getpropertyvaluekey"},"getPropertyValue(key)"),(0,a.kt)("p",null,"Return of the value of the selected property key."),(0,a.kt)("h5",{id:"key-stringnumber-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"key")," (String|Number, required)"),(0,a.kt)("p",null,"The property key."),(0,a.kt)("h2",{id:"getsiblingids"},"getSiblingIds()"),(0,a.kt)("p",null,"Return all the IDs of the sibling nodes."),(0,a.kt)("h2",{id:"setdatadata"},"setData(data)"),(0,a.kt)("p",null,"Set the new node data."),(0,a.kt)("h5",{id:"data-any-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"data")," (Any, required)"),(0,a.kt)("p",null,"The new data of the node."),(0,a.kt)("h2",{id:"setdatapropertykey-value"},"setDataProperty(key, value)"),(0,a.kt)("p",null,"Update a data property."),(0,a.kt)("h5",{id:"key-string-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"key")," (String, required)"),(0,a.kt)("p",null,"The key of the property"),(0,a.kt)("h5",{id:"value-any-required"},(0,a.kt)("inlineCode",{parentName:"h5"},"value")," (Any, required)"),(0,a.kt)("p",null,"The value of the property."),(0,a.kt)("h2",{id:"addconnectededgesedges"},"addConnectedEdges(edges)"),(0,a.kt)("p",null,"Add new connected edges to the node."),(0,a.kt)("h2",{id:"removeconnectededgesedges"},"removeConnectedEdges(edges)"),(0,a.kt)("p",null,"Remove edges from ",(0,a.kt)("inlineCode",{parentName:"p"},"this._connectedEdges")),(0,a.kt)("h2",{id:"clearconnectededges"},"clearConnectedEdges()"),(0,a.kt)("p",null,"Clear ",(0,a.kt)("inlineCode",{parentName:"p"},"this._connectedEdges")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c8044ed6.1229e78b.js b/assets/js/c8044ed6.1229e78b.js new file mode 100644 index 00000000..c3d1779d --- /dev/null +++ b/assets/js/c8044ed6.1229e78b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9299],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>f});var n=r(7294);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},d=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,c=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),s=u(r),m=i,f=s["".concat(c,".").concat(m)]||s[m]||p[m]||o;return r?n.createElement(f,a(a({ref:t},d),{},{components:r})):n.createElement(f,a({ref:t},d))}));function f(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,a=new Array(o);a[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[s]="string"==typeof e?e:i,a[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var n=r(7462),i=(r(7294),r(3905));const o={},a="RECTANGLE",l={unversionedId:"modules/react-graph-layers/api-reference/node-style-rectangle",id:"modules/react-graph-layers/api-reference/node-style-rectangle",title:"RECTANGLE",description:"width (Number | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-rectangle.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-rectangle",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-rectangle.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"CIRCLE",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle"},next:{title:"MARKER",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker"}},c={},u=[{value:"width (Number | Function, required)",id:"width-number--function-required",level:3},{value:"height (Number | Function, required)",id:"height-number--function-required",level:3},{value:"fill (String | Array | Function, optional)",id:"fill-string--array--function-optional",level:3},{value:"stroke (String | Array | Function, optional)",id:"stroke-string--array--function-optional",level:3},{value:"strokeWidth (Number | Function, optional)",id:"strokewidth-number--function-optional",level:3}],d={toc:u},s="wrapper";function p(e){let{components:t,...r}=e;return(0,i.kt)(s,(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"rectangle"},"RECTANGLE"),(0,i.kt)("p",{align:"center"},(0,i.kt)("img",{src:"/gatsby/images/node-styles/rectangle.png",height:"100"})),(0,i.kt)("h3",{id:"width-number--function-required"},(0,i.kt)("inlineCode",{parentName:"h3"},"width")," (Number | Function, required)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The width of the rectancle."),(0,i.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the width for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its width.")),(0,i.kt)("h3",{id:"height-number--function-required"},(0,i.kt)("inlineCode",{parentName:"h3"},"height")," (Number | Function, required)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The height of the rectangle."),(0,i.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the height for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its height.")),(0,i.kt)("h3",{id:"fill-string--array--function-optional"},(0,i.kt)("inlineCode",{parentName:"h3"},"fill")," (String | Array | Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,i.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,i.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range).\nIf a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color.")),(0,i.kt)("h3",{id:"stroke-string--array--function-optional"},(0,i.kt)("inlineCode",{parentName:"h3"},"stroke")," (String | Array | Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,i.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,i.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,i.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its color.")),(0,i.kt)("h3",{id:"strokewidth-number--function-optional"},(0,i.kt)("inlineCode",{parentName:"h3"},"strokeWidth")," (Number | Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"0"),"\nThe width of the outline of each rectangle.\nIf a number is provided, it is used as the outline width for all rectangles.\nIf a function is provided, it is called on each rectangle to retrieve its outline width.")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c8044ed6.d0f07ba8.js b/assets/js/c8044ed6.d0f07ba8.js deleted file mode 100644 index 4cb10878..00000000 --- a/assets/js/c8044ed6.d0f07ba8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9299],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>f});var n=r(7294);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},d=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,c=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),s=u(r),m=i,f=s["".concat(c,".").concat(m)]||s[m]||p[m]||o;return r?n.createElement(f,a(a({ref:t},d),{},{components:r})):n.createElement(f,a({ref:t},d))}));function f(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,a=new Array(o);a[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[s]="string"==typeof e?e:i,a[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>l,toc:()=>u});var n=r(7462),i=(r(7294),r(3905));const o={},a="RECTANGLE",l={unversionedId:"modules/react-graph-layers/api-reference/node-style-rectangle",id:"modules/react-graph-layers/api-reference/node-style-rectangle",title:"RECTANGLE",description:"width (Number | Function, required)",source:"@site/../docs/modules/react-graph-layers/api-reference/node-style-rectangle.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/node-style-rectangle",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-rectangle",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/node-style-rectangle.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"CIRCLE",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-circle"},next:{title:"MARKER",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-marker"}},c={},u=[{value:"width (Number | Function, required)",id:"width-number--function-required",level:3},{value:"height (Number | Function, required)",id:"height-number--function-required",level:3},{value:"fill (String | Array | Function, optional)",id:"fill-string--array--function-optional",level:3},{value:"stroke (String | Array | Function, optional)",id:"stroke-string--array--function-optional",level:3},{value:"strokeWidth (Number | Function, optional)",id:"strokewidth-number--function-optional",level:3}],d={toc:u},s="wrapper";function p(e){let{components:t,...r}=e;return(0,i.kt)(s,(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"rectangle"},"RECTANGLE"),(0,i.kt)("p",{align:"center"},(0,i.kt)("img",{src:"/gatsby/images/node-styles/rectangle.png",height:"100"})),(0,i.kt)("h3",{id:"width-number--function-required"},(0,i.kt)("inlineCode",{parentName:"h3"},"width")," (Number | Function, required)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The width of the rectancle."),(0,i.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the width for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its width.")),(0,i.kt)("h3",{id:"height-number--function-required"},(0,i.kt)("inlineCode",{parentName:"h3"},"height")," (Number | Function, required)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The height of the rectangle."),(0,i.kt)("li",{parentName:"ul"},"If a number is provided, it is used as the height for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its height.")),(0,i.kt)("h3",{id:"fill-string--array--function-optional"},(0,i.kt)("inlineCode",{parentName:"h3"},"fill")," (String | Array | Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,i.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,i.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range).\nIf a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each object to retrieve its color.")),(0,i.kt)("h3",{id:"stroke-string--array--function-optional"},(0,i.kt)("inlineCode",{parentName:"h3"},"stroke")," (String | Array | Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"[0, 0, 0, 255]")),(0,i.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,i.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,i.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all objects."),(0,i.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its color.")),(0,i.kt)("h3",{id:"strokewidth-number--function-optional"},(0,i.kt)("inlineCode",{parentName:"h3"},"strokeWidth")," (Number | Function, optional)"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Default: ",(0,i.kt)("inlineCode",{parentName:"li"},"0"),"\nThe width of the outline of each rectangle.\nIf a number is provided, it is used as the outline width for all rectangles.\nIf a function is provided, it is called on each rectangle to retrieve its outline width.")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c90589ce.1f62b129.js b/assets/js/c90589ce.1f62b129.js deleted file mode 100644 index 0832bb04..00000000 --- a/assets/js/c90589ce.1f62b129.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8517],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},d=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=s(r),f=o,m=p["".concat(c,".").concat(f)]||p[f]||u[f]||a;return r?n.createElement(m,i(i({ref:t},d),{},{components:r})):n.createElement(m,i({ref:t},d))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=f;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[p]="string"==typeof e?e:o,i[1]=l;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},i="Edge Style",l={unversionedId:"modules/react-graph-layers/api-reference/edge-style",id:"modules/react-graph-layers/api-reference/edge-style",title:"Edge Style",description:"Usage",source:"@site/../docs/modules/react-graph-layers/api-reference/edge-style.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge-style",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge-style.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Node Style",permalink:"/docs/modules/react-graph-layers/api-reference/node-style"},next:{title:"Interactions",permalink:"/docs/modules/react-graph-layers/api-reference/interactions"}},c={},s=[{value:"Usage",id:"usage",level:3},{value:"stroke (String | Array | Function, optional)",id:"stroke-string--array--function-optional",level:3},{value:"strokeWidth (Number | Function, optional)",id:"strokewidth-number--function-optional",level:3},{value:"data (Function, optional)",id:"data-function-optional",level:3},{value:"visible (Boolean, optional)",id:"visible-boolean-optional",level:3},{value:"decorators (Array, optional)",id:"decorators-array-optional",level:3}],d={toc:s},p="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"edge-style"},"Edge Style"),(0,o.kt)("h3",{id:"usage"},"Usage"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"edgeStyle={{\n stroke: 'black',\n strokeWidth: 2,\n data: (data) => data,\n visible: true,\n decorators: [\n {\n type: EDGE_DECORATOR_TYPE.LABEL,\n text: edge => edge.id,\n color: '#000',\n fontSize: 18,\n },\n ],\n}}\n")),(0,o.kt)("h3",{id:"stroke-string--array--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"stroke")," (String | Array | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"[255, 255, 255, 255]")),(0,o.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,o.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,o.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges."),(0,o.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its color.")),(0,o.kt)("h3",{id:"strokewidth-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"strokeWidth")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"0"),"\nThe width of the outline of each rectangle.\nIf a number is provided, it is used as the outline width for all edges.\nIf a function is provided, it is called on each rectangle to retrieve its outline width.")),(0,o.kt)("h3",{id:"data-function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"data")," (Function, optional)"),(0,o.kt)("p",null,"Allows setting of the layer data via accessor"),(0,o.kt)("h3",{id:"visible-boolean-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"visible")," (Boolean, optional)"),(0,o.kt)("p",null,"Determines if the layer is visible"),(0,o.kt)("h3",{id:"decorators-array-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"decorators")," (Array, optional)"),(0,o.kt)("p",null,"A set of decorators on edges. Please see more detail in the 'Edge decorators' chapter."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c90589ce.6d8d3da3.js b/assets/js/c90589ce.6d8d3da3.js new file mode 100644 index 00000000..b623a667 --- /dev/null +++ b/assets/js/c90589ce.6d8d3da3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[8517],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},d=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=s(r),m=o,f=p["".concat(c,".").concat(m)]||p[m]||u[m]||a;return r?n.createElement(f,i(i({ref:t},d),{},{components:r})):n.createElement(f,i({ref:t},d))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[p]="string"==typeof e?e:o,i[1]=l;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},i="Edge Style",l={unversionedId:"modules/react-graph-layers/api-reference/edge-style",id:"modules/react-graph-layers/api-reference/edge-style",title:"Edge Style",description:"Usage",source:"@site/../docs/modules/react-graph-layers/api-reference/edge-style.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge-style",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge-style.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Node Style",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style"},next:{title:"Interactions",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions"}},c={},s=[{value:"Usage",id:"usage",level:3},{value:"stroke (String | Array | Function, optional)",id:"stroke-string--array--function-optional",level:3},{value:"strokeWidth (Number | Function, optional)",id:"strokewidth-number--function-optional",level:3},{value:"data (Function, optional)",id:"data-function-optional",level:3},{value:"visible (Boolean, optional)",id:"visible-boolean-optional",level:3},{value:"decorators (Array, optional)",id:"decorators-array-optional",level:3}],d={toc:s},p="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"edge-style"},"Edge Style"),(0,o.kt)("h3",{id:"usage"},"Usage"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"edgeStyle={{\n stroke: 'black',\n strokeWidth: 2,\n data: (data) => data,\n visible: true,\n decorators: [\n {\n type: EDGE_DECORATOR_TYPE.LABEL,\n text: edge => edge.id,\n color: '#000',\n fontSize: 18,\n },\n ],\n}}\n")),(0,o.kt)("h3",{id:"stroke-string--array--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"stroke")," (String | Array | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"[255, 255, 255, 255]")),(0,o.kt)("li",{parentName:"ul"},"The value can be hex code, color name, or color array ",(0,o.kt)("inlineCode",{parentName:"li"},"[r, g, b, a]")," (each component is in the 0 - 255 range)."),(0,o.kt)("li",{parentName:"ul"},"If a color value (hex code, color name, or array) is provided, it is used as the global color for all edges."),(0,o.kt)("li",{parentName:"ul"},"If a function is provided, it is called on each rectangle to retrieve its color.")),(0,o.kt)("h3",{id:"strokewidth-number--function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"strokeWidth")," (Number | Function, optional)"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"0"),"\nThe width of the outline of each rectangle.\nIf a number is provided, it is used as the outline width for all edges.\nIf a function is provided, it is called on each rectangle to retrieve its outline width.")),(0,o.kt)("h3",{id:"data-function-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"data")," (Function, optional)"),(0,o.kt)("p",null,"Allows setting of the layer data via accessor"),(0,o.kt)("h3",{id:"visible-boolean-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"visible")," (Boolean, optional)"),(0,o.kt)("p",null,"Determines if the layer is visible"),(0,o.kt)("h3",{id:"decorators-array-optional"},(0,o.kt)("inlineCode",{parentName:"h3"},"decorators")," (Array, optional)"),(0,o.kt)("p",null,"A set of decorators on edges. Please see more detail in the 'Edge decorators' chapter."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/cfa22294.878e1272.js b/assets/js/cfa22294.878e1272.js new file mode 100644 index 00000000..dc4f8d0c --- /dev/null +++ b/assets/js/cfa22294.878e1272.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9255],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=n.createContext({}),p=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=p(e.components);return n.createElement(u.Provider,{value:t},e.children)},d="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(r),m=o,f=d["".concat(u,".").concat(m)]||d[m]||s[m]||i;return r?n.createElement(f,a(a({ref:t},l),{},{components:r})):n.createElement(f,a({ref:t},l))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=m;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c[d]="string"==typeof e?e:o,a[1]=c;for(var p=2;p{r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>s,frontMatter:()=>i,metadata:()=>c,toc:()=>p});var n=r(7462),o=(r(7294),r(3905));const i={},a="Upgrade Guide",c={unversionedId:"upgrade-guide",id:"upgrade-guide",title:"Upgrade Guide",description:"",source:"@site/../docs/upgrade-guide.md",sourceDirName:".",slug:"/upgrade-guide",permalink:"/deck.gl-community/docs/upgrade-guide",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/upgrade-guide.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"What's New",permalink:"/deck.gl-community/docs/whats-new"},next:{title:"Overview",permalink:"/deck.gl-community/docs/modules/bing-maps/"}},u={},p=[],l={toc:p},d="wrapper";function s(e){let{components:t,...r}=e;return(0,o.kt)(d,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"upgrade-guide"},"Upgrade Guide"))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/cfa22294.980b33b3.js b/assets/js/cfa22294.980b33b3.js deleted file mode 100644 index 396fecdd..00000000 --- a/assets/js/cfa22294.980b33b3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9255],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>m});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=n.createContext({}),p=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},l=function(e){var t=p(e.components);return n.createElement(u.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,u=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=p(r),f=o,m=s["".concat(u,".").concat(f)]||s[f]||d[f]||a;return r?n.createElement(m,i(i({ref:t},l),{},{components:r})):n.createElement(m,i({ref:t},l))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=f;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c[s]="string"==typeof e?e:o,i[1]=c;for(var p=2;p{r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>c,toc:()=>p});var n=r(7462),o=(r(7294),r(3905));const a={},i="Upgrade Guide",c={unversionedId:"upgrade-guide",id:"upgrade-guide",title:"Upgrade Guide",description:"",source:"@site/../docs/upgrade-guide.md",sourceDirName:".",slug:"/upgrade-guide",permalink:"/docs/upgrade-guide",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/upgrade-guide.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"What's New",permalink:"/docs/whats-new"},next:{title:"Overview",permalink:"/docs/modules/bing-maps/"}},u={},p=[],l={toc:p},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"upgrade-guide"},"Upgrade Guide"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d129df65.866af906.js b/assets/js/d129df65.866af906.js new file mode 100644 index 00000000..9c096033 --- /dev/null +++ b/assets/js/d129df65.866af906.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5301],{5640:e=>{e.exports=JSON.parse('{"pluginId":"examples","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"examplesSidebar":[{"type":"link","label":"Overview","href":"/deck.gl-community/examples/","docId":"index"}]},"docs":{"graph-layer":{"id":"graph-layer","title":"GraphLayer","description":"TBA"},"index":{"id":"index","title":"index","description":"/images/examples/${item.docId || item.label.toLowerCase()}.jpg} />","sidebar":"examplesSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/d129df65.a17c3852.js b/assets/js/d129df65.a17c3852.js deleted file mode 100644 index 6f01624b..00000000 --- a/assets/js/d129df65.a17c3852.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[5301],{5640:e=>{e.exports=JSON.parse('{"pluginId":"examples","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"examplesSidebar":[{"type":"link","label":"Overview","href":"/examples/","docId":"index"}]},"docs":{"graph-layer":{"id":"graph-layer","title":"GraphLayer","description":"TBA"},"index":{"id":"index","title":"index","description":"/images/examples/${item.docId || item.label.toLowerCase()}.jpg} />","sidebar":"examplesSidebar"}}}')}}]); \ No newline at end of file diff --git a/assets/js/d461a37e.e1cd8a9a.js b/assets/js/d461a37e.e1cd8a9a.js deleted file mode 100644 index 2ce48ba0..00000000 --- a/assets/js/d461a37e.e1cd8a9a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4808],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>f});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function l(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=o.createContext({}),s=function(e){var t=o.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},d=function(e){var t=s(e.components);return o.createElement(c.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(c,".").concat(m)]||u[m]||p[m]||a;return r?o.createElement(f,l(l({ref:t},d),{},{components:r})):o.createElement(f,l({ref:t},d))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[u]="string"==typeof e?e:n,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var o=r(7462),n=(r(7294),r(3905));const a={},l="FAQ",i={unversionedId:"modules/editor-core/faq",id:"modules/editor-core/faq",title:"FAQ",description:"Will this replace deck.gl?",source:"@site/../docs/modules/editor-core/faq.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/faq",permalink:"/docs/modules/editor-core/faq",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/faq.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Roadmap",permalink:"/docs/modules/editor-core/roadmap"},next:{title:"Installation",permalink:"/docs/modules/editor-core/get-started/installing"}},c={},s=[{value:"Will this replace deck.gl?",id:"will-this-replace-deckgl",level:4},{value:"Should I use layers or overlays?",id:"should-i-use-layers-or-overlays",level:4}],d={toc:s},u="wrapper";function p(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,o.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"faq"},"FAQ"),(0,n.kt)("h4",{id:"will-this-replace-deckgl"},"Will this replace ",(0,n.kt)("inlineCode",{parentName:"h4"},"deck.gl"),"?"),(0,n.kt)("p",null,"No."),(0,n.kt)("h4",{id:"should-i-use-layers-or-overlays"},"Should I use ",(0,n.kt)("inlineCode",{parentName:"h4"},"layers")," or ",(0,n.kt)("inlineCode",{parentName:"h4"},"overlays"),"?"),(0,n.kt)("p",null,"Use ",(0,n.kt)("inlineCode",{parentName:"p"},"layers")," if you have thousands of data points and rendering is simple.\nUse ",(0,n.kt)("inlineCode",{parentName:"p"},"overlays")," if you have a few items but want to use HTML to render them."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d461a37e.e1d1d59d.js b/assets/js/d461a37e.e1d1d59d.js new file mode 100644 index 00000000..02c9a698 --- /dev/null +++ b/assets/js/d461a37e.e1d1d59d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4808],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>f});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function a(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=o.createContext({}),s=function(e){var t=o.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},d=function(e){var t=s(e.components);return o.createElement(c.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,l=e.originalType,c=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),u=s(r),m=n,f=u["".concat(c,".").concat(m)]||u[m]||p[m]||l;return r?o.createElement(f,a(a({ref:t},d),{},{components:r})):o.createElement(f,a({ref:t},d))}));function f(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=r.length,a=new Array(l);a[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[u]="string"==typeof e?e:n,a[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>i,toc:()=>s});var o=r(7462),n=(r(7294),r(3905));const l={},a="FAQ",i={unversionedId:"modules/editor-core/faq",id:"modules/editor-core/faq",title:"FAQ",description:"Will this replace deck.gl?",source:"@site/../docs/modules/editor-core/faq.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/faq",permalink:"/deck.gl-community/docs/modules/editor-core/faq",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/faq.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Roadmap",permalink:"/deck.gl-community/docs/modules/editor-core/roadmap"},next:{title:"Installation",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/installing"}},c={},s=[{value:"Will this replace deck.gl?",id:"will-this-replace-deckgl",level:4},{value:"Should I use layers or overlays?",id:"should-i-use-layers-or-overlays",level:4}],d={toc:s},u="wrapper";function p(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,o.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"faq"},"FAQ"),(0,n.kt)("h4",{id:"will-this-replace-deckgl"},"Will this replace ",(0,n.kt)("inlineCode",{parentName:"h4"},"deck.gl"),"?"),(0,n.kt)("p",null,"No."),(0,n.kt)("h4",{id:"should-i-use-layers-or-overlays"},"Should I use ",(0,n.kt)("inlineCode",{parentName:"h4"},"layers")," or ",(0,n.kt)("inlineCode",{parentName:"h4"},"overlays"),"?"),(0,n.kt)("p",null,"Use ",(0,n.kt)("inlineCode",{parentName:"p"},"layers")," if you have thousands of data points and rendering is simple.\nUse ",(0,n.kt)("inlineCode",{parentName:"p"},"overlays")," if you have a few items but want to use HTML to render them."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d6ac8603.40250429.js b/assets/js/d6ac8603.1e83f99f.js similarity index 76% rename from assets/js/d6ac8603.40250429.js rename to assets/js/d6ac8603.1e83f99f.js index feb956c1..2f52c156 100644 --- a/assets/js/d6ac8603.40250429.js +++ b/assets/js/d6ac8603.1e83f99f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1856],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>d});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=s(r),m=o,d=p["".concat(c,".").concat(m)]||p[m]||f[m]||a;return r?n.createElement(d,l(l({ref:t},u),{},{components:r})):n.createElement(d,l({ref:t},u))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[p]="string"==typeof e?e:o,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},l="Overview",i={unversionedId:"modules/layers/README",id:"modules/layers/README",title:"Overview",description:"This module provides a suite of non-official layers for deck.gl.",source:"@site/../docs/modules/layers/README.md",sourceDirName:"modules/layers",slug:"/modules/layers/",permalink:"/docs/modules/layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/layers/README.md",tags:[],version:"current",frontMatter:{}},c={},s=[{value:"Installation",id:"installation",level:2}],u={toc:s},p="wrapper";function f(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"overview"},"Overview"),(0,o.kt)("p",null,"This module provides a suite of non-official layers for ",(0,o.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl"),"."),(0,o.kt)("h2",{id:"installation"},"Installation"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"npm install deck.gl-community/layers\n")))}f.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1856],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>d});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),s=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},u=function(e){var t=s(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=s(r),m=o,d=p["".concat(c,".").concat(m)]||p[m]||f[m]||a;return r?n.createElement(d,l(l({ref:t},u),{},{components:r})):n.createElement(d,l({ref:t},u))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[p]="string"==typeof e?e:o,l[1]=i;for(var s=2;s{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>f,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var n=r(7462),o=(r(7294),r(3905));const a={},l="Overview",i={unversionedId:"modules/layers/README",id:"modules/layers/README",title:"Overview",description:"This module provides a suite of non-official layers for deck.gl.",source:"@site/../docs/modules/layers/README.md",sourceDirName:"modules/layers",slug:"/modules/layers/",permalink:"/deck.gl-community/docs/modules/layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/layers/README.md",tags:[],version:"current",frontMatter:{}},c={},s=[{value:"Installation",id:"installation",level:2}],u={toc:s},p="wrapper";function f(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"overview"},"Overview"),(0,o.kt)("p",null,"This module provides a suite of non-official layers for ",(0,o.kt)("a",{parentName:"p",href:"https://deck.gl"},"deck.gl"),"."),(0,o.kt)("h2",{id:"installation"},"Installation"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"npm install deck.gl-community/layers\n")))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d909eaaa.4cf70107.js b/assets/js/d909eaaa.4cf70107.js new file mode 100644 index 00000000..803bff0f --- /dev/null +++ b/assets/js/d909eaaa.4cf70107.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1373],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=o,f=s["".concat(c,".").concat(d)]||s[d]||m[d]||a;return r?n.createElement(f,i(i({ref:t},p),{},{components:r})):n.createElement(f,i({ref:t},p))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[s]="string"==typeof e?e:o,i[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>u});var n=r(7462),o=(r(7294),r(3905));const a={},i="Roadmap",l={unversionedId:"modules/editor-core/roadmap",id:"modules/editor-core/roadmap",title:"Roadmap",description:"v1.0",source:"@site/../docs/modules/editor-core/roadmap.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/roadmap",permalink:"/deck.gl-community/docs/modules/editor-core/roadmap",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/roadmap.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"What's New",permalink:"/deck.gl-community/docs/modules/editor-core/whats-new"},next:{title:"FAQ",permalink:"/deck.gl-community/docs/modules/editor-core/faq"}},c={},u=[{value:"v1.0",id:"v10",level:2},{value:"v2.0",id:"v20",level:2}],p={toc:u},s="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"roadmap"},"Roadmap"),(0,o.kt)("h2",{id:"v10"},"v1.0"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Maximize performance in all use cases: target is 100k objects being edited at 60fps"),(0,o.kt)("li",{parentName:"ul"},"2D editing capabilities"),(0,o.kt)("li",{parentName:"ul"},"Basic elevation support"),(0,o.kt)("li",{parentName:"ul"},"Documentation"),(0,o.kt)("li",{parentName:"ul"},"Examples"),(0,o.kt)("li",{parentName:"ul"},"Unit test coverage and build status on homepage")),(0,o.kt)("h2",{id:"v20"},"v2.0"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"3D Editing Capabilities with elevation editing"),(0,o.kt)("li",{parentName:"ul"},"Curved lines and polygons (",(0,o.kt)("a",{parentName:"li",href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline"},"Cubic Hermite Spline"),")"),(0,o.kt)("li",{parentName:"ul"},"Full mobile support with touch and multi touch"),(0,o.kt)("li",{parentName:"ul"},"Automated performance evaluation as part of unit tests")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/d909eaaa.81da02eb.js b/assets/js/d909eaaa.81da02eb.js deleted file mode 100644 index df5964fd..00000000 --- a/assets/js/d909eaaa.81da02eb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[1373],{3905:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),p=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(c.Provider,{value:t},e.children)},s="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),s=p(r),m=o,f=s["".concat(c,".").concat(m)]||s[m]||d[m]||a;return r?n.createElement(f,i(i({ref:t},u),{},{components:r})):n.createElement(f,i({ref:t},u))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[s]="string"==typeof e?e:o,i[1]=l;for(var p=2;p{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var n=r(7462),o=(r(7294),r(3905));const a={},i="Roadmap",l={unversionedId:"modules/editor-core/roadmap",id:"modules/editor-core/roadmap",title:"Roadmap",description:"v1.0",source:"@site/../docs/modules/editor-core/roadmap.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/roadmap",permalink:"/docs/modules/editor-core/roadmap",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/roadmap.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"What's New",permalink:"/docs/modules/editor-core/whats-new"},next:{title:"FAQ",permalink:"/docs/modules/editor-core/faq"}},c={},p=[{value:"v1.0",id:"v10",level:2},{value:"v2.0",id:"v20",level:2}],u={toc:p},s="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(s,(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"roadmap"},"Roadmap"),(0,o.kt)("h2",{id:"v10"},"v1.0"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Maximize performance in all use cases: target is 100k objects being edited at 60fps"),(0,o.kt)("li",{parentName:"ul"},"2D editing capabilities"),(0,o.kt)("li",{parentName:"ul"},"Basic elevation support"),(0,o.kt)("li",{parentName:"ul"},"Documentation"),(0,o.kt)("li",{parentName:"ul"},"Examples"),(0,o.kt)("li",{parentName:"ul"},"Unit test coverage and build status on homepage")),(0,o.kt)("h2",{id:"v20"},"v2.0"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"3D Editing Capabilities with elevation editing"),(0,o.kt)("li",{parentName:"ul"},"Curved lines and polygons (",(0,o.kt)("a",{parentName:"li",href:"https://en.wikipedia.org/wiki/Cubic_Hermite_spline"},"Cubic Hermite Spline"),")"),(0,o.kt)("li",{parentName:"ul"},"Full mobile support with touch and multi touch"),(0,o.kt)("li",{parentName:"ul"},"Automated performance evaluation as part of unit tests")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/db494b8e.9442204d.js b/assets/js/db494b8e.9442204d.js new file mode 100644 index 00000000..e95397af --- /dev/null +++ b/assets/js/db494b8e.9442204d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9581],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>m});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var d=a.createContext({}),u=function(e){var t=a.useContext(d),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},c=function(e){var t=u(e.components);return a.createElement(d.Provider,{value:t},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,d=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(r),g=n,m=p["".concat(d,".").concat(g)]||p[g]||s[g]||i;return r?a.createElement(m,o(o({ref:t},c),{},{components:r})):a.createElement(m,o({ref:t},c))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=g;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l[p]="string"==typeof e?e:n,o[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>s,frontMatter:()=>i,metadata:()=>l,toc:()=>u});var a=r(7462),n=(r(7294),r(3905));const i={},o="Edge Class",l={unversionedId:"modules/react-graph-layers/api-reference/edge",id:"modules/react-graph-layers/api-reference/edge",title:"Edge Class",description:"The Edge class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications.",source:"@site/../docs/modules/react-graph-layers/api-reference/edge.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Node Class",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node"},next:{title:"Write your own custom layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout"}},d={},u=[{value:"Constructor",id:"constructor",level:2},{value:"Basic Properties",id:"basic-properties",level:3},{value:"id (String|Number, required)",id:"id-stringnumber-required",level:5},{value:"sourceId (String|Number, required)",id:"sourceid-stringnumber-required",level:5},{value:"targetId (String|Number, required)",id:"targetid-stringnumber-required",level:5},{value:"directed (Boolean, optional)",id:"directed-boolean-optional",level:5},{value:"data (Object, optional)",id:"data-object-optional",level:5},{value:"getId()",id:"getid",level:2},{value:"getPropertyValue(key)",id:"getpropertyvaluekey",level:2},{value:"key (String|Number, required)",id:"key-stringnumber-required",level:5},{value:"getSourceNodeId()",id:"getsourcenodeid",level:2},{value:"getTargetNodeId()",id:"gettargetnodeid",level:2},{value:"isDirected()",id:"isdirected",level:2},{value:"setData(data)",id:"setdatadata",level:2},{value:"data (Any, required)",id:"data-any-required",level:5},{value:"setDataProperty(key, value)",id:"setdatapropertykey-value",level:2},{value:"key (String, required)",id:"key-string-required",level:5},{value:"value (Any, required)",id:"value-any-required",level:5}],c={toc:u},p="wrapper";function s(e){let{components:t,...r}=e;return(0,n.kt)(p,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"edge-class"},"Edge Class"),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"Edge")," class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications."),(0,n.kt)("h2",{id:"constructor"},"Constructor"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"new Edge(props);\n")),(0,n.kt)("p",null,"Parameters:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"props")," (Object) - ",(0,n.kt)("inlineCode",{parentName:"li"},"Edge")," properties.")),(0,n.kt)("h3",{id:"basic-properties"},"Basic Properties"),(0,n.kt)("h5",{id:"id-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"id")," (String|Number, required)"),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"id")," must be unique among all edges in the graph at a given time."),(0,n.kt)("h5",{id:"sourceid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"sourceId")," (String|Number, required)"),(0,n.kt)("p",null,"The id of the source node."),(0,n.kt)("h5",{id:"targetid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"targetId")," (String|Number, required)"),(0,n.kt)("p",null,"The id of the target node."),(0,n.kt)("h5",{id:"directed-boolean-optional"},(0,n.kt)("inlineCode",{parentName:"h5"},"directed")," (Boolean, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"false"),"\nThe edge has direction or not.")),(0,n.kt)("h5",{id:"data-object-optional"},(0,n.kt)("inlineCode",{parentName:"h5"},"data")," (Object, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"{}"))),(0,n.kt)("p",null,"The origin edge data."),(0,n.kt)("h2",{id:"getid"},"getId()"),(0,n.kt)("p",null,"Return the ID of the edge."),(0,n.kt)("h2",{id:"getpropertyvaluekey"},"getPropertyValue(key)"),(0,n.kt)("p",null,"Return of the value of the selected property key."),(0,n.kt)("h5",{id:"key-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"key")," (String|Number, required)"),(0,n.kt)("p",null,"The property key."),(0,n.kt)("h2",{id:"getsourcenodeid"},"getSourceNodeId()"),(0,n.kt)("p",null,"Get the ID of the source node."),(0,n.kt)("h2",{id:"gettargetnodeid"},"getTargetNodeId()"),(0,n.kt)("p",null,"Get the ID of the target node."),(0,n.kt)("h2",{id:"isdirected"},"isDirected()"),(0,n.kt)("p",null,"Return whether the edge is directed or not."),(0,n.kt)("h2",{id:"setdatadata"},"setData(data)"),(0,n.kt)("p",null,"Set the new edge data."),(0,n.kt)("h5",{id:"data-any-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"data")," (Any, required)"),(0,n.kt)("p",null,"The new data of the edge."),(0,n.kt)("h2",{id:"setdatapropertykey-value"},"setDataProperty(key, value)"),(0,n.kt)("p",null,"Update a data property."),(0,n.kt)("h5",{id:"key-string-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"key")," (String, required)"),(0,n.kt)("p",null,"The key of the property"),(0,n.kt)("h5",{id:"value-any-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"value")," (Any, required)"),(0,n.kt)("p",null,"The value of the property."))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/db494b8e.bca7eb2f.js b/assets/js/db494b8e.bca7eb2f.js deleted file mode 100644 index d4b6a231..00000000 --- a/assets/js/db494b8e.bca7eb2f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[9581],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>h});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var d=a.createContext({}),u=function(e){var t=a.useContext(d),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},c=function(e){var t=u(e.components);return a.createElement(d.Provider,{value:t},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,d=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=u(r),g=n,h=p["".concat(d,".").concat(g)]||p[g]||s[g]||i;return r?a.createElement(h,o(o({ref:t},c),{},{components:r})):a.createElement(h,o({ref:t},c))}));function h(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=g;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l[p]="string"==typeof e?e:n,o[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>s,frontMatter:()=>i,metadata:()=>l,toc:()=>u});var a=r(7462),n=(r(7294),r(3905));const i={},o="Edge Class",l={unversionedId:"modules/react-graph-layers/api-reference/edge",id:"modules/react-graph-layers/api-reference/edge",title:"Edge Class",description:"The Edge class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications.",source:"@site/../docs/modules/react-graph-layers/api-reference/edge.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/edge",permalink:"/docs/modules/react-graph-layers/api-reference/edge",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/edge.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Node Class",permalink:"/docs/modules/react-graph-layers/api-reference/node"},next:{title:"Write your own custom layout",permalink:"/docs/modules/react-graph-layers/advanced/custom-layout"}},d={},u=[{value:"Constructor",id:"constructor",level:2},{value:"Basic Properties",id:"basic-properties",level:3},{value:"id (String|Number, required)",id:"id-stringnumber-required",level:5},{value:"sourceId (String|Number, required)",id:"sourceid-stringnumber-required",level:5},{value:"targetId (String|Number, required)",id:"targetid-stringnumber-required",level:5},{value:"directed (Boolean, optional)",id:"directed-boolean-optional",level:5},{value:"data (Object, optional)",id:"data-object-optional",level:5},{value:"getId()",id:"getid",level:2},{value:"getPropertyValue(key)",id:"getpropertyvaluekey",level:2},{value:"key (String|Number, required)",id:"key-stringnumber-required",level:5},{value:"getSourceNodeId()",id:"getsourcenodeid",level:2},{value:"getTargetNodeId()",id:"gettargetnodeid",level:2},{value:"isDirected()",id:"isdirected",level:2},{value:"setData(data)",id:"setdatadata",level:2},{value:"data (Any, required)",id:"data-any-required",level:5},{value:"setDataProperty(key, value)",id:"setdatapropertykey-value",level:2},{value:"key (String, required)",id:"key-string-required",level:5},{value:"value (Any, required)",id:"value-any-required",level:5}],c={toc:u},p="wrapper";function s(e){let{components:t,...r}=e;return(0,n.kt)(p,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"edge-class"},"Edge Class"),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"Edge")," class is the base class of the edge, which provides a list of basic util functions to be used throughout the applications."),(0,n.kt)("h2",{id:"constructor"},"Constructor"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js"},"new Edge(props);\n")),(0,n.kt)("p",null,"Parameters:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("inlineCode",{parentName:"li"},"props")," (Object) - ",(0,n.kt)("inlineCode",{parentName:"li"},"Edge")," properties.")),(0,n.kt)("h3",{id:"basic-properties"},"Basic Properties"),(0,n.kt)("h5",{id:"id-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"id")," (String|Number, required)"),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"id")," must be unique among all edges in the graph at a given time."),(0,n.kt)("h5",{id:"sourceid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"sourceId")," (String|Number, required)"),(0,n.kt)("p",null,"The id of the source node."),(0,n.kt)("h5",{id:"targetid-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"targetId")," (String|Number, required)"),(0,n.kt)("p",null,"The id of the target node."),(0,n.kt)("h5",{id:"directed-boolean-optional"},(0,n.kt)("inlineCode",{parentName:"h5"},"directed")," (Boolean, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"false"),"\nThe edge has direction or not.")),(0,n.kt)("h5",{id:"data-object-optional"},(0,n.kt)("inlineCode",{parentName:"h5"},"data")," (Object, optional)"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Default: ",(0,n.kt)("inlineCode",{parentName:"li"},"{}"))),(0,n.kt)("p",null,"The origin edge data."),(0,n.kt)("h2",{id:"getid"},"getId()"),(0,n.kt)("p",null,"Return the ID of the edge."),(0,n.kt)("h2",{id:"getpropertyvaluekey"},"getPropertyValue(key)"),(0,n.kt)("p",null,"Return of the value of the selected property key."),(0,n.kt)("h5",{id:"key-stringnumber-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"key")," (String|Number, required)"),(0,n.kt)("p",null,"The property key."),(0,n.kt)("h2",{id:"getsourcenodeid"},"getSourceNodeId()"),(0,n.kt)("p",null,"Get the ID of the source node."),(0,n.kt)("h2",{id:"gettargetnodeid"},"getTargetNodeId()"),(0,n.kt)("p",null,"Get the ID of the target node."),(0,n.kt)("h2",{id:"isdirected"},"isDirected()"),(0,n.kt)("p",null,"Return whether the edge is directed or not."),(0,n.kt)("h2",{id:"setdatadata"},"setData(data)"),(0,n.kt)("p",null,"Set the new edge data."),(0,n.kt)("h5",{id:"data-any-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"data")," (Any, required)"),(0,n.kt)("p",null,"The new data of the edge."),(0,n.kt)("h2",{id:"setdatapropertykey-value"},"setDataProperty(key, value)"),(0,n.kt)("p",null,"Update a data property."),(0,n.kt)("h5",{id:"key-string-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"key")," (String, required)"),(0,n.kt)("p",null,"The key of the property"),(0,n.kt)("h5",{id:"value-any-required"},(0,n.kt)("inlineCode",{parentName:"h5"},"value")," (Any, required)"),(0,n.kt)("p",null,"The value of the property."))}s.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/dc8b3862.986bb19c.js b/assets/js/dc8b3862.977a85a5.js similarity index 72% rename from assets/js/dc8b3862.986bb19c.js rename to assets/js/dc8b3862.977a85a5.js index ef676870..7e45c2f4 100644 --- a/assets/js/dc8b3862.986bb19c.js +++ b/assets/js/dc8b3862.977a85a5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6300],{3905:(e,r,t)=>{t.d(r,{Zo:()=>s,kt:()=>y});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function c(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var i=n.createContext({}),p=function(e){var r=n.useContext(i),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},s=function(e){var r=p(e.components);return n.createElement(i.Provider,{value:r},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},m=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),m=o,y=u["".concat(i,".").concat(m)]||u[m]||f[m]||a;return t?n.createElement(y,c(c({ref:r},s),{},{components:t})):n.createElement(y,c({ref:r},s))}));function y(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,c=new Array(a);c[0]=m;var l={};for(var i in r)hasOwnProperty.call(r,i)&&(l[i]=r[i]);l.originalType=e,l[u]="string"==typeof e?e:o,c[1]=l;for(var p=2;p{t.r(r),t.d(r,{assets:()=>i,contentTitle:()=>c,default:()=>f,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var n=t(7462),o=(t(7294),t(3905));const a={},c=void 0,l={unversionedId:"modules/graph-layers/README",id:"modules/graph-layers/README",title:"README",description:"",source:"@site/../docs/modules/graph-layers/README.md",sourceDirName:"modules/graph-layers",slug:"/modules/graph-layers/",permalink:"/docs/modules/graph-layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/graph-layers/README.md",tags:[],version:"current",frontMatter:{}},i={},p=[],s={toc:p},u="wrapper";function f(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},s,t,{components:r,mdxType:"MDXLayout"}))}f.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6300],{3905:(e,r,t)=>{t.d(r,{Zo:()=>s,kt:()=>y});var n=t(7294);function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function c(e){for(var r=1;r=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var i=n.createContext({}),p=function(e){var r=n.useContext(i),t=r;return e&&(t="function"==typeof e?e(r):c(c({},r),e)),t},s=function(e){var r=p(e.components);return n.createElement(i.Provider,{value:r},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},f=n.forwardRef((function(e,r){var t=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(t),f=o,y=u["".concat(i,".").concat(f)]||u[f]||m[f]||a;return t?n.createElement(y,c(c({ref:r},s),{},{components:t})):n.createElement(y,c({ref:r},s))}));function y(e,r){var t=arguments,o=r&&r.mdxType;if("string"==typeof e||o){var a=t.length,c=new Array(a);c[0]=f;var l={};for(var i in r)hasOwnProperty.call(r,i)&&(l[i]=r[i]);l.originalType=e,l[u]="string"==typeof e?e:o,c[1]=l;for(var p=2;p{t.r(r),t.d(r,{assets:()=>i,contentTitle:()=>c,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>p});var n=t(7462),o=(t(7294),t(3905));const a={},c=void 0,l={unversionedId:"modules/graph-layers/README",id:"modules/graph-layers/README",title:"README",description:"",source:"@site/../docs/modules/graph-layers/README.md",sourceDirName:"modules/graph-layers",slug:"/modules/graph-layers/",permalink:"/deck.gl-community/docs/modules/graph-layers/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/graph-layers/README.md",tags:[],version:"current",frontMatter:{}},i={},p=[],s={toc:p},u="wrapper";function m(e){let{components:r,...t}=e;return(0,o.kt)(u,(0,n.Z)({},s,t,{components:r,mdxType:"MDXLayout"}))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/e1d043e3.18cf8179.js b/assets/js/e1d043e3.18cf8179.js new file mode 100644 index 00000000..b472fe54 --- /dev/null +++ b/assets/js/e1d043e3.18cf8179.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4459],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>m});var o=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var c=o.createContext({}),s=function(e){var t=o.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},p=function(e){var t=s(e.components);return o.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,l=e.mdxType,a=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=s(n),h=l,m=u["".concat(c,".").concat(h)]||u[h]||d[h]||a;return n?o.createElement(m,r(r({ref:t},p),{},{components:n})):o.createElement(m,r({ref:t},p))}));function m(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var a=n.length,r=new Array(a);r[0]=h;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[u]="string"==typeof e?e:l,r[1]=i;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var o=n(7462),l=(n(7294),n(3905));const a={},r="Interactions",i={unversionedId:"modules/react-graph-layers/api-reference/interactions",id:"modules/react-graph-layers/api-reference/interactions",title:"Interactions",description:"In this chapter, you'll learn about how to interact with the graph.",source:"@site/../docs/modules/react-graph-layers/api-reference/interactions.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/interactions",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/interactions.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Edge Style",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style"},next:{title:"Viewport",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport"}},c={},s=[{value:"nodeEvents (Object, optional)",id:"nodeevents-object-optional",level:3},{value:"edgeEvents (Object, optional)",id:"edgeevents-object-optional",level:3},{value:"wheelSensitivity (Number: 0 to 1, optional)",id:"wheelsensitivity-number-0-to-1-optional",level:3},{value:"enableZooming (bool, optional)",id:"enablezooming-bool-optional",level:3},{value:"enablePanning (bool, optional)",id:"enablepanning-bool-optional",level:3},{value:"enableDragging (bool, optional)",id:"enabledragging-bool-optional",level:3},{value:"resumeLayoutAfterDragging (bool, optional)",id:"resumelayoutafterdragging-bool-optional",level:3}],p={toc:s},u="wrapper";function d(e){let{components:t,...n}=e;return(0,l.kt)(u,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"interactions"},"Interactions"),(0,l.kt)("p",null,"In this chapter, you'll learn about how to interact with the graph."),(0,l.kt)("p",null,"There are the porperties you can specify when using the GraphGL component:"),(0,l.kt)("h3",{id:"nodeevents-object-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"nodeEvents")," (Object, optional)"),(0,l.kt)("p",null,"All events callbacks will be triggered with the following parameters:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"info: {\n object: The object that was picked.\n x: Mouse position x relative to the viewport.\n y: Mouse position y relative to the viewport.\n coordinate: Mouse position in viewport coordinate system.\n}\n")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"onClick: This callback will be called when the mouse clicks on a node. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,l.kt)("li",{parentName:"ul"},"onMouseEnter: This callback will be called when the mouse enter a node. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,l.kt)("li",{parentName:"ul"},"onHover: This callback will be called when the mouse hovers over a node. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,l.kt)("li",{parentName:"ul"},"onMouseLeave: This callback will be called when the mouse leaves a node. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,l.kt)("li",{parentName:"ul"},"onDrag: This callback will be called when draggin a node. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),".")),(0,l.kt)("h3",{id:"edgeevents-object-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"edgeEvents")," (Object, optional)"),(0,l.kt)("p",null,"All events callbacks will be triggered with the following parameters:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"info: {\n object: The object that was picked.\n x: Mouse position x relative to the viewport.\n y: Mouse position y relative to the viewport.\n coordinate: Mouse position in viewport coordinate system.\n}\n")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"onClick: This callback will be called when the mouse clicks on an edge. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,l.kt)("li",{parentName:"ul"},"onHover: This callback will be called when the mouse hovers over an edge. Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"null"),".")),(0,l.kt)("h3",{id:"wheelsensitivity-number-0-to-1-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"wheelSensitivity")," (Number: 0 to 1, optional)"),(0,l.kt)("p",null,"Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier.\nSo, a value between 0 and 1 reduces the sensitivity (zooms slower),\nand a value greater than 1 increases the sensitivity (zooms faster)"),(0,l.kt)("h3",{id:"enablezooming-bool-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"enableZooming")," (bool, optional)"),(0,l.kt)("p",null,"Whether zooming the graph is enabled"),(0,l.kt)("h3",{id:"enablepanning-bool-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"enablePanning")," (bool, optional)"),(0,l.kt)("p",null,"Whether panning the graph is enabled"),(0,l.kt)("h3",{id:"enabledragging-bool-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"enableDragging")," (bool, optional)"),(0,l.kt)("p",null,"Whether dragging the node is enabled"),(0,l.kt)("h3",{id:"resumelayoutafterdragging-bool-optional"},(0,l.kt)("inlineCode",{parentName:"h3"},"resumeLayoutAfterDragging")," (bool, optional)"),(0,l.kt)("p",null,"Resume layout calculation after dragging a node"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/e1d043e3.1d78e917.js b/assets/js/e1d043e3.1d78e917.js deleted file mode 100644 index 572fcd1a..00000000 --- a/assets/js/e1d043e3.1d78e917.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4459],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>m});var o=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function r(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=o.createContext({}),s=function(e){var t=o.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},p=function(e){var t=s(e.components);return o.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},h=o.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,c=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=s(n),h=a,m=u["".concat(c,".").concat(h)]||u[h]||d[h]||l;return n?o.createElement(m,r(r({ref:t},p),{},{components:n})):o.createElement(m,r({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,r=new Array(l);r[0]=h;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[u]="string"==typeof e?e:a,r[1]=i;for(var s=2;s{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>s});var o=n(7462),a=(n(7294),n(3905));const l={},r="Interactions",i={unversionedId:"modules/react-graph-layers/api-reference/interactions",id:"modules/react-graph-layers/api-reference/interactions",title:"Interactions",description:"In this chapter, you'll learn about how to interact with the graph.",source:"@site/../docs/modules/react-graph-layers/api-reference/interactions.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/interactions",permalink:"/docs/modules/react-graph-layers/api-reference/interactions",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/interactions.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Edge Style",permalink:"/docs/modules/react-graph-layers/api-reference/edge-style"},next:{title:"Viewport",permalink:"/docs/modules/react-graph-layers/api-reference/viewport"}},c={},s=[{value:"nodeEvents (Object, optional)",id:"nodeevents-object-optional",level:3},{value:"edgeEvents (Object, optional)",id:"edgeevents-object-optional",level:3},{value:"wheelSensitivity (Number: 0 to 1, optional)",id:"wheelsensitivity-number-0-to-1-optional",level:3},{value:"enableZooming (bool, optional)",id:"enablezooming-bool-optional",level:3},{value:"enablePanning (bool, optional)",id:"enablepanning-bool-optional",level:3},{value:"enableDragging (bool, optional)",id:"enabledragging-bool-optional",level:3},{value:"resumeLayoutAfterDragging (bool, optional)",id:"resumelayoutafterdragging-bool-optional",level:3}],p={toc:s},u="wrapper";function d(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"interactions"},"Interactions"),(0,a.kt)("p",null,"In this chapter, you'll learn about how to interact with the graph."),(0,a.kt)("p",null,"There are the porperties you can specify when using the GraphGL component:"),(0,a.kt)("h3",{id:"nodeevents-object-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"nodeEvents")," (Object, optional)"),(0,a.kt)("p",null,"All events callbacks will be triggered with the following parameters:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"info: {\n object: The object that was picked.\n x: Mouse position x relative to the viewport.\n y: Mouse position y relative to the viewport.\n coordinate: Mouse position in viewport coordinate system.\n}\n")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"onClick: This callback will be called when the mouse clicks on a node. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,a.kt)("li",{parentName:"ul"},"onMouseEnter: This callback will be called when the mouse enter a node. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,a.kt)("li",{parentName:"ul"},"onHover: This callback will be called when the mouse hovers over a node. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,a.kt)("li",{parentName:"ul"},"onMouseLeave: This callback will be called when the mouse leaves a node. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,a.kt)("li",{parentName:"ul"},"onDrag: This callback will be called when draggin a node. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),".")),(0,a.kt)("h3",{id:"edgeevents-object-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"edgeEvents")," (Object, optional)"),(0,a.kt)("p",null,"All events callbacks will be triggered with the following parameters:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"info: {\n object: The object that was picked.\n x: Mouse position x relative to the viewport.\n y: Mouse position y relative to the viewport.\n coordinate: Mouse position in viewport coordinate system.\n}\n")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"onClick: This callback will be called when the mouse clicks on an edge. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),"."),(0,a.kt)("li",{parentName:"ul"},"onHover: This callback will be called when the mouse hovers over an edge. Default: ",(0,a.kt)("inlineCode",{parentName:"li"},"null"),".")),(0,a.kt)("h3",{id:"wheelsensitivity-number-0-to-1-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"wheelSensitivity")," (Number: 0 to 1, optional)"),(0,a.kt)("p",null,"Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier.\nSo, a value between 0 and 1 reduces the sensitivity (zooms slower),\nand a value greater than 1 increases the sensitivity (zooms faster)"),(0,a.kt)("h3",{id:"enablezooming-bool-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"enableZooming")," (bool, optional)"),(0,a.kt)("p",null,"Whether zooming the graph is enabled"),(0,a.kt)("h3",{id:"enablepanning-bool-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"enablePanning")," (bool, optional)"),(0,a.kt)("p",null,"Whether panning the graph is enabled"),(0,a.kt)("h3",{id:"enabledragging-bool-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"enableDragging")," (bool, optional)"),(0,a.kt)("p",null,"Whether dragging the node is enabled"),(0,a.kt)("h3",{id:"resumelayoutafterdragging-bool-optional"},(0,a.kt)("inlineCode",{parentName:"h3"},"resumeLayoutAfterDragging")," (bool, optional)"),(0,a.kt)("p",null,"Resume layout calculation after dragging a node"))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/e1d5d9ab.4cc68f45.js b/assets/js/e1d5d9ab.49dfcf6b.js similarity index 80% rename from assets/js/e1d5d9ab.4cc68f45.js rename to assets/js/e1d5d9ab.49dfcf6b.js index a4a87f21..9afc12b3 100644 --- a/assets/js/e1d5d9ab.4cc68f45.js +++ b/assets/js/e1d5d9ab.49dfcf6b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6610],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),d=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=d(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=d(r),m=o,f=u["".concat(s,".").concat(m)]||u[m]||p[m]||i;return r?n.createElement(f,a(a({ref:t},l),{},{components:r})):n.createElement(f,a({ref:t},l))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[u]="string"==typeof e?e:o,a[1]=c;for(var d=2;d{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var n=r(7462),o=(r(7294),r(3905));const i={},a="Editing Modes",c={unversionedId:"modules/edit-modes/README",id:"modules/edit-modes/README",title:"Editing Modes",description:"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.",source:"@site/../docs/modules/edit-modes/README.md",sourceDirName:"modules/edit-modes",slug:"/modules/edit-modes/",permalink:"/docs/modules/edit-modes/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/edit-modes/README.md",tags:[],version:"current",frontMatter:{}},s={},d=[],l={toc:d},u="wrapper";function p(e){let{components:t,...r}=e;return(0,o.kt)(u,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"editing-modes"},"Editing Modes"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"EditMode"),"s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries."))}p.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[6610],{3905:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),d=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=d(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=d(r),m=o,f=u["".concat(s,".").concat(m)]||u[m]||p[m]||i;return r?n.createElement(f,a(a({ref:t},l),{},{components:r})):n.createElement(f,a({ref:t},l))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[u]="string"==typeof e?e:o,a[1]=c;for(var d=2;d{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var n=r(7462),o=(r(7294),r(3905));const i={},a="Editing Modes",c={unversionedId:"modules/edit-modes/README",id:"modules/edit-modes/README",title:"Editing Modes",description:"EditModes provide a way of handling user interactions in order to manipulate GeoJSON features and geometries.",source:"@site/../docs/modules/edit-modes/README.md",sourceDirName:"modules/edit-modes",slug:"/modules/edit-modes/",permalink:"/deck.gl-community/docs/modules/edit-modes/",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/edit-modes/README.md",tags:[],version:"current",frontMatter:{}},s={},d=[],l={toc:d},u="wrapper";function p(e){let{components:t,...r}=e;return(0,o.kt)(u,(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"editing-modes"},"Editing Modes"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"EditMode"),"s provide a way of handling user interactions in order to manipulate GeoJSON features and geometries."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/f173e1d3.45dc7e24.js b/assets/js/f173e1d3.45dc7e24.js new file mode 100644 index 00000000..dbfb2194 --- /dev/null +++ b/assets/js/f173e1d3.45dc7e24.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2026],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),l=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=l(e.components);return r.createElement(c.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),u=l(n),m=a,g=u["".concat(c,".").concat(m)]||u[m]||p[m]||o;return n?r.createElement(g,s(s({ref:t},d),{},{components:n})):r.createElement(g,s({ref:t},d))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[u]="string"==typeof e?e:a,s[1]=i;for(var l=2;l{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>s,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>l});var r=n(7462),a=(n(7294),n(3905));const o={},s="Basic usage",i={unversionedId:"modules/editor-core/get-started/basic-usage",id:"modules/editor-core/get-started/basic-usage",title:"Basic usage",description:"Live example on codesandbox",source:"@site/../docs/modules/editor-core/get-started/basic-usage.md",sourceDirName:"modules/editor-core/get-started",slug:"/modules/editor-core/get-started/basic-usage",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/basic-usage",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/get-started/basic-usage.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Installation",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/installing"},next:{title:"Using Html Overlays",permalink:"/deck.gl-community/docs/modules/editor-core/get-started/html-overlays"}},c={},l=[{value:"See Also",id:"see-also",level:2}],d={toc:l},u="wrapper";function p(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"basic-usage"},"Basic usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport DeckGL from 'deck.gl';\nimport {\n EditableGeoJsonLayer,\n DrawLineStringMode,\n DrawPolygonMode\n} from 'nebula.gl';\nimport { StaticMap } from 'react-map-gl';\n\nconst INITIAL_VIEW_STATE = {\n longitude: -122.41669,\n latitude: 37.7853,\n zoom: 13,\n pitch: 0,\n bearing: 0\n};\n\nexport function GeometryEditor() {\n const [features, setFeatures] = React.useState({\n type: 'FeatureCollection',\n features: []\n });\n const [mode, setMode] = React.useState(() => DrawPolygonMode);\n const [selectedFeatureIndexes] = React.useState([]);\n\n const layer = new EditableGeoJsonLayer({\n data: features,\n mode,\n selectedFeatureIndexes,\n onEdit: ({ updatedData }) => {\n setFeatures(updatedData);\n }\n });\n\n return (\n <>\n \n \n \n\n
\n setMode(() => DrawLineStringMode)}\n >\n Line\n \n setMode(() => DrawPolygonMode)}\n >\n Polygon\n \n
\n \n );\n}\n\n")),(0,a.kt)("p",null,"Live example on ",(0,a.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/nebula-react-basic-example-q7t9u?file=/src/App.js"},"codesandbox")),(0,a.kt)("h2",{id:"see-also"},"See Also"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://nebula.gl/docs/modules/editor-layers/api-reference/editable-geojson-layer"},"EditableGeoJsonLayer")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://deck.gl/docs/get-started/using-with-react"},"Using deck.gl with React")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://deck.gl/docs/get-started/using-with-map"},"Using deck.gl with a Base Map"))))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/f173e1d3.aaf35f77.js b/assets/js/f173e1d3.aaf35f77.js deleted file mode 100644 index 2eda86a4..00000000 --- a/assets/js/f173e1d3.aaf35f77.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[2026],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,d=i(e,["components","mdxType","originalType","parentName"]),u=c(n),m=a,g=u["".concat(l,".").concat(m)]||u[m]||p[m]||o;return n?r.createElement(g,s(s({ref:t},d),{},{components:n})):r.createElement(g,s({ref:t},d))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,s=new Array(o);s[0]=m;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i[u]="string"==typeof e?e:a,s[1]=i;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const o={},s="Basic usage",i={unversionedId:"modules/editor-core/get-started/basic-usage",id:"modules/editor-core/get-started/basic-usage",title:"Basic usage",description:"Live example on codesandbox",source:"@site/../docs/modules/editor-core/get-started/basic-usage.md",sourceDirName:"modules/editor-core/get-started",slug:"/modules/editor-core/get-started/basic-usage",permalink:"/docs/modules/editor-core/get-started/basic-usage",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/get-started/basic-usage.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Installation",permalink:"/docs/modules/editor-core/get-started/installing"},next:{title:"Using Html Overlays",permalink:"/docs/modules/editor-core/get-started/html-overlays"}},l={},c=[{value:"See Also",id:"see-also",level:2}],d={toc:c},u="wrapper";function p(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"basic-usage"},"Basic usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport DeckGL from 'deck.gl';\nimport {\n EditableGeoJsonLayer,\n DrawLineStringMode,\n DrawPolygonMode\n} from 'nebula.gl';\nimport { StaticMap } from 'react-map-gl';\n\nconst INITIAL_VIEW_STATE = {\n longitude: -122.41669,\n latitude: 37.7853,\n zoom: 13,\n pitch: 0,\n bearing: 0\n};\n\nexport function GeometryEditor() {\n const [features, setFeatures] = React.useState({\n type: 'FeatureCollection',\n features: []\n });\n const [mode, setMode] = React.useState(() => DrawPolygonMode);\n const [selectedFeatureIndexes] = React.useState([]);\n\n const layer = new EditableGeoJsonLayer({\n data: features,\n mode,\n selectedFeatureIndexes,\n onEdit: ({ updatedData }) => {\n setFeatures(updatedData);\n }\n });\n\n return (\n <>\n \n \n \n\n
\n setMode(() => DrawLineStringMode)}\n >\n Line\n \n setMode(() => DrawPolygonMode)}\n >\n Polygon\n \n
\n \n );\n}\n\n")),(0,a.kt)("p",null,"Live example on ",(0,a.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/nebula-react-basic-example-q7t9u?file=/src/App.js"},"codesandbox")),(0,a.kt)("h2",{id:"see-also"},"See Also"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://nebula.gl/docs/modules/editor-layers/api-reference/editable-geojson-layer"},"EditableGeoJsonLayer")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://deck.gl/docs/get-started/using-with-react"},"Using deck.gl with React")),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("a",{parentName:"li",href:"https://deck.gl/docs/get-started/using-with-map"},"Using deck.gl with a Base Map"))))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/f6ac847a.222696ad.js b/assets/js/f6ac847a.e027d3ca.js similarity index 50% rename from assets/js/f6ac847a.222696ad.js rename to assets/js/f6ac847a.e027d3ca.js index cb65c388..8e648498 100644 --- a/assets/js/f6ac847a.222696ad.js +++ b/assets/js/f6ac847a.e027d3ca.js @@ -1 +1 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3910],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>m});var a=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=a.createContext({}),u=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=u(e.components);return a.createElement(i.Provider,{value:t},e.children)},p="mdxType",y={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,n=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),p=u(r),d=o,m=p["".concat(i,".").concat(d)]||p[d]||y[d]||n;return r?a.createElement(m,l(l({ref:t},s),{},{components:r})):a.createElement(m,l({ref:t},s))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=r.length,l=new Array(n);l[0]=d;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[p]="string"==typeof e?e:o,l[1]=c;for(var u=2;u{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>y,frontMatter:()=>n,metadata:()=>c,toc:()=>u});var a=r(7462),o=(r(7294),r(3905));const n={},l="Layout",c={unversionedId:"modules/react-graph-layers/api-reference/layout",id:"modules/react-graph-layers/api-reference/layout",title:"Layout",description:"Use one of the layouts provided by react-graph-layers. Right now react-graph-layers provides D3-Force and Simple layout for basic usage.",source:"@site/../docs/modules/react-graph-layers/api-reference/layout.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/layout",permalink:"/docs/modules/react-graph-layers/api-reference/layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Viewport",permalink:"/docs/modules/react-graph-layers/api-reference/viewport"},next:{title:"CIRCLE",permalink:"/docs/modules/react-graph-layers/api-reference/node-style-circle"}},i={},u=[{value:"SimpleLayout",id:"simplelayout",level:2},{value:"D3ForceLayout",id:"d3forcelayout",level:2},{value:"Create custom layout",id:"create-custom-layout",level:2},{value:"Experimental layouts",id:"experimental-layouts",level:2}],s={toc:u},p="wrapper";function y(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,a.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"layout"},"Layout"),(0,o.kt)("p",null,"Use one of the layouts provided by react-graph-layers. Right now react-graph-layers provides D3-Force and Simple layout for basic usage."),(0,o.kt)("h2",{id:"simplelayout"},"SimpleLayout"),(0,o.kt)("p",null,"Please see /docs/api-reference/simple-layout."),(0,o.kt)("h2",{id:"d3forcelayout"},"D3ForceLayout"),(0,o.kt)("p",null,"Please see /docs/api-reference/d3-layout."),(0,o.kt)("h2",{id:"create-custom-layout"},"Create custom layout"),(0,o.kt)("p",null,"create a new custom layout class by following the instruction /docs/advanced/custom-layout"),(0,o.kt)("h2",{id:"experimental-layouts"},"Experimental layouts"),(0,o.kt)("p",null,"There are more experimental layouts under ",(0,o.kt)("inlineCode",{parentName:"p"},"src/experimental-layouts"),", please reference to the experimental layout gallery."))}y.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[3910],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>d});var a=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=a.createContext({}),u=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},s=function(e){var t=u(e.components);return a.createElement(i.Provider,{value:t},e.children)},p="mdxType",y={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,n=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),p=u(r),m=o,d=p["".concat(i,".").concat(m)]||p[m]||y[m]||n;return r?a.createElement(d,l(l({ref:t},s),{},{components:r})):a.createElement(d,l({ref:t},s))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=r.length,l=new Array(n);l[0]=m;var c={};for(var i in t)hasOwnProperty.call(t,i)&&(c[i]=t[i]);c.originalType=e,c[p]="string"==typeof e?e:o,l[1]=c;for(var u=2;u{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>y,frontMatter:()=>n,metadata:()=>c,toc:()=>u});var a=r(7462),o=(r(7294),r(3905));const n={},l="Layout",c={unversionedId:"modules/react-graph-layers/api-reference/layout",id:"modules/react-graph-layers/api-reference/layout",title:"Layout",description:"Use one of the layouts provided by react-graph-layers. Right now react-graph-layers provides D3-Force and Simple layout for basic usage.",source:"@site/../docs/modules/react-graph-layers/api-reference/layout.md",sourceDirName:"modules/react-graph-layers/api-reference",slug:"/modules/react-graph-layers/api-reference/layout",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-graph-layers/api-reference/layout.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Viewport",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport"},next:{title:"CIRCLE",permalink:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle"}},i={},u=[{value:"SimpleLayout",id:"simplelayout",level:2},{value:"D3ForceLayout",id:"d3forcelayout",level:2},{value:"Create custom layout",id:"create-custom-layout",level:2},{value:"Experimental layouts",id:"experimental-layouts",level:2}],s={toc:u},p="wrapper";function y(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,a.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"layout"},"Layout"),(0,o.kt)("p",null,"Use one of the layouts provided by react-graph-layers. Right now react-graph-layers provides D3-Force and Simple layout for basic usage."),(0,o.kt)("h2",{id:"simplelayout"},"SimpleLayout"),(0,o.kt)("p",null,"Please see /docs/api-reference/simple-layout."),(0,o.kt)("h2",{id:"d3forcelayout"},"D3ForceLayout"),(0,o.kt)("p",null,"Please see /docs/api-reference/d3-layout."),(0,o.kt)("h2",{id:"create-custom-layout"},"Create custom layout"),(0,o.kt)("p",null,"create a new custom layout class by following the instruction /docs/advanced/custom-layout"),(0,o.kt)("h2",{id:"experimental-layouts"},"Experimental layouts"),(0,o.kt)("p",null,"There are more experimental layouts under ",(0,o.kt)("inlineCode",{parentName:"p"},"src/experimental-layouts"),", please reference to the experimental layout gallery."))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/f77293ae.11ee8615.js b/assets/js/f77293ae.11ee8615.js deleted file mode 100644 index c62de70b..00000000 --- a/assets/js/f77293ae.11ee8615.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7028],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>v});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function a(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=o.createContext({}),c=function(e){var t=o.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},d=function(e){var t=c(e.components);return o.createElement(i.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,l=e.originalType,i=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),u=c(r),m=n,v=u["".concat(i,".").concat(m)]||u[m]||p[m]||l;return r?o.createElement(v,a(a({ref:t},d),{},{components:r})):o.createElement(v,a({ref:t},d))}));function v(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=r.length,a=new Array(l);a[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[u]="string"==typeof e?e:n,a[1]=s;for(var c=2;c{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>c});var o=r(7462),n=(r(7294),r(3905));const l={},a="HtmlClusterOverlay",s={unversionedId:"modules/react-overlays/api-reference/html-cluster-overlay",id:"modules/react-overlays/api-reference/html-cluster-overlay",title:"HtmlClusterOverlay",description:"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map",source:"@site/../docs/modules/react-overlays/api-reference/html-cluster-overlay.md",sourceDirName:"modules/react-overlays/api-reference",slug:"/modules/react-overlays/api-reference/html-cluster-overlay",permalink:"/docs/modules/react-overlays/api-reference/html-cluster-overlay",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-overlays/api-reference/html-cluster-overlay.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"HtmlOverlay",permalink:"/docs/modules/react-overlays/api-reference/html-overlay"},next:{title:"HtmlOverlayItem",permalink:"/docs/modules/react-overlays/api-reference/html-overlay-item"}},i={},c=[{value:"Example",id:"example",level:2},{value:"Methods to override",id:"methods-to-override",level:2},{value:"getAllObjects()",id:"getallobjects",level:3},{value:"getObjectCoordinates(object)",id:"getobjectcoordinatesobject",level:3},{value:"renderObject(coordinates, object)",id:"renderobjectcoordinates-object",level:3},{value:"renderCluster(coordinates, clusterId, pointCount)",id:"renderclustercoordinates-clusterid-pointcount",level:3},{value:"Methods (provided)",id:"methods-provided",level:2},{value:"getClusterObjects(clusterId)",id:"getclusterobjectsclusterid",level:3},{value:"getClusterOptions()",id:"getclusteroptions",level:3}],d={toc:c},u="wrapper";function p(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,o.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"htmlclusteroverlay"},"HtmlClusterOverlay"),(0,n.kt)("p",null,"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map\nand cluster based on the zoom level.\n",(0,n.kt)("strong",{parentName:"p"},"You need to subclass this class"),". Then use it as a ",(0,n.kt)("inlineCode",{parentName:"p"},"react component")," inside ",(0,n.kt)("inlineCode",{parentName:"p"},"DeckGL"),"."),(0,n.kt)("h2",{id:"example"},"Example"),(0,n.kt)("p",null,"For example code see Unesco World Heritage /docs/interactive-examples/world-heritage."),(0,n.kt)("h2",{id:"methods-to-override"},"Methods to override"),(0,n.kt)("h3",{id:"getallobjects"},"getAllObjects()"),(0,n.kt)("p",null,"Override to provide an array of ",(0,n.kt)("inlineCode",{parentName:"p"},"Objects")," that need clustering.\nIf the items have not changed please provide the same array to avoid\nregeneration of the cluster which causes performance issues."),(0,n.kt)("h3",{id:"getobjectcoordinatesobject"},"getObjectCoordinates(object)"),(0,n.kt)("p",null,"Override to provide coordinates for each object of getAllObjects().\nReturn array of two numbers."),(0,n.kt)("h3",{id:"renderobjectcoordinates-object"},"renderObject(coordinates, object)"),(0,n.kt)("p",null,"Override to return an ",(0,n.kt)("inlineCode",{parentName:"p"},"HtmlOverlayItem")," for the single ",(0,n.kt)("inlineCode",{parentName:"p"},"object")," at ",(0,n.kt)("inlineCode",{parentName:"p"},"coordinates"),"."),(0,n.kt)("h3",{id:"renderclustercoordinates-clusterid-pointcount"},"renderCluster(coordinates, clusterId, pointCount)"),(0,n.kt)("p",null,"Override to return an HtmlOverlayItem for the ",(0,n.kt)("inlineCode",{parentName:"p"},"cluster")," at ",(0,n.kt)("inlineCode",{parentName:"p"},"coordinates"),".\n",(0,n.kt)("inlineCode",{parentName:"p"},"pointCount")," is the number of objects that are represented by that cluster.\nUse ",(0,n.kt)("inlineCode",{parentName:"p"},"getClusterObjects(clusterId)")," to get cluster contents."),(0,n.kt)("h2",{id:"methods-provided"},"Methods (provided)"),(0,n.kt)("h3",{id:"getclusterobjectsclusterid"},"getClusterObjects(clusterId)"),(0,n.kt)("p",null,"Returns an array of objects."),(0,n.kt)("h3",{id:"getclusteroptions"},"getClusterOptions()"),(0,n.kt)("p",null,"Override to return options used when instantiating the overlay and thus the\nunderlying ",(0,n.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/supercluster#options"},"supercluster")," object."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/f77293ae.b59ae3ef.js b/assets/js/f77293ae.b59ae3ef.js new file mode 100644 index 00000000..49f48b58 --- /dev/null +++ b/assets/js/f77293ae.b59ae3ef.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[7028],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>v});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function a(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=o.createContext({}),c=function(e){var t=o.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},d=function(e){var t=c(e.components);return o.createElement(i.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,l=e.originalType,i=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),u=c(r),m=n,v=u["".concat(i,".").concat(m)]||u[m]||p[m]||l;return r?o.createElement(v,a(a({ref:t},d),{},{components:r})):o.createElement(v,a({ref:t},d))}));function v(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=r.length,a=new Array(l);a[0]=m;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[u]="string"==typeof e?e:n,a[1]=s;for(var c=2;c{r.r(t),r.d(t,{assets:()=>i,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>c});var o=r(7462),n=(r(7294),r(3905));const l={},a="HtmlClusterOverlay",s={unversionedId:"modules/react-overlays/api-reference/html-cluster-overlay",id:"modules/react-overlays/api-reference/html-cluster-overlay",title:"HtmlClusterOverlay",description:"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map",source:"@site/../docs/modules/react-overlays/api-reference/html-cluster-overlay.md",sourceDirName:"modules/react-overlays/api-reference",slug:"/modules/react-overlays/api-reference/html-cluster-overlay",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/react-overlays/api-reference/html-cluster-overlay.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"HtmlOverlay",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay"},next:{title:"HtmlOverlayItem",permalink:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay-item"}},i={},c=[{value:"Example",id:"example",level:2},{value:"Methods to override",id:"methods-to-override",level:2},{value:"getAllObjects()",id:"getallobjects",level:3},{value:"getObjectCoordinates(object)",id:"getobjectcoordinatesobject",level:3},{value:"renderObject(coordinates, object)",id:"renderobjectcoordinates-object",level:3},{value:"renderCluster(coordinates, clusterId, pointCount)",id:"renderclustercoordinates-clusterid-pointcount",level:3},{value:"Methods (provided)",id:"methods-provided",level:2},{value:"getClusterObjects(clusterId)",id:"getclusterobjectsclusterid",level:3},{value:"getClusterOptions()",id:"getclusteroptions",level:3}],d={toc:c},u="wrapper";function p(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,o.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"htmlclusteroverlay"},"HtmlClusterOverlay"),(0,n.kt)("p",null,"Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map\nand cluster based on the zoom level.\n",(0,n.kt)("strong",{parentName:"p"},"You need to subclass this class"),". Then use it as a ",(0,n.kt)("inlineCode",{parentName:"p"},"react component")," inside ",(0,n.kt)("inlineCode",{parentName:"p"},"DeckGL"),"."),(0,n.kt)("h2",{id:"example"},"Example"),(0,n.kt)("p",null,"For example code see Unesco World Heritage /docs/interactive-examples/world-heritage."),(0,n.kt)("h2",{id:"methods-to-override"},"Methods to override"),(0,n.kt)("h3",{id:"getallobjects"},"getAllObjects()"),(0,n.kt)("p",null,"Override to provide an array of ",(0,n.kt)("inlineCode",{parentName:"p"},"Objects")," that need clustering.\nIf the items have not changed please provide the same array to avoid\nregeneration of the cluster which causes performance issues."),(0,n.kt)("h3",{id:"getobjectcoordinatesobject"},"getObjectCoordinates(object)"),(0,n.kt)("p",null,"Override to provide coordinates for each object of getAllObjects().\nReturn array of two numbers."),(0,n.kt)("h3",{id:"renderobjectcoordinates-object"},"renderObject(coordinates, object)"),(0,n.kt)("p",null,"Override to return an ",(0,n.kt)("inlineCode",{parentName:"p"},"HtmlOverlayItem")," for the single ",(0,n.kt)("inlineCode",{parentName:"p"},"object")," at ",(0,n.kt)("inlineCode",{parentName:"p"},"coordinates"),"."),(0,n.kt)("h3",{id:"renderclustercoordinates-clusterid-pointcount"},"renderCluster(coordinates, clusterId, pointCount)"),(0,n.kt)("p",null,"Override to return an HtmlOverlayItem for the ",(0,n.kt)("inlineCode",{parentName:"p"},"cluster")," at ",(0,n.kt)("inlineCode",{parentName:"p"},"coordinates"),".\n",(0,n.kt)("inlineCode",{parentName:"p"},"pointCount")," is the number of objects that are represented by that cluster.\nUse ",(0,n.kt)("inlineCode",{parentName:"p"},"getClusterObjects(clusterId)")," to get cluster contents."),(0,n.kt)("h2",{id:"methods-provided"},"Methods (provided)"),(0,n.kt)("h3",{id:"getclusterobjectsclusterid"},"getClusterObjects(clusterId)"),(0,n.kt)("p",null,"Returns an array of objects."),(0,n.kt)("h3",{id:"getclusteroptions"},"getClusterOptions()"),(0,n.kt)("p",null,"Override to return options used when instantiating the overlay and thus the\nunderlying ",(0,n.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/supercluster#options"},"supercluster")," object."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/fc4c0442.9a2878ee.js b/assets/js/fc4c0442.9a2878ee.js deleted file mode 100644 index 10ee0020..00000000 --- a/assets/js/fc4c0442.9a2878ee.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4872],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),d=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=d(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=d(r),m=o,f=p["".concat(c,".").concat(m)]||p[m]||u[m]||a;return r?n.createElement(f,i(i({ref:t},s),{},{components:r})):n.createElement(f,i({ref:t},s))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[p]="string"==typeof e?e:o,i[1]=l;for(var d=2;d{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>d});var n=r(7462),o=(r(7294),r(3905));const a={},i="What's New",l={unversionedId:"modules/editor-core/whats-new",id:"modules/editor-core/whats-new",title:"What's New",description:"This page contains highlights of each nebula.gl release.",source:"@site/../docs/modules/editor-core/whats-new.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/whats-new",permalink:"/docs/modules/editor-core/whats-new",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/whats-new.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Overview",permalink:"/docs/modules/editor-core/"},next:{title:"Roadmap",permalink:"/docs/modules/editor-core/roadmap"}},c={},d=[{value:"nebula.gl v1.0",id:"nebulagl-v10",level:2},{value:"Draw Rectangle From Center Mode",id:"draw-rectangle-from-center-mode",level:3},{value:"Translate mode",id:"translate-mode",level:3},{value:"Modify mode",id:"modify-mode",level:3},{value:"EditableGeojsonLayer",id:"editablegeojsonlayer",level:3}],s={toc:d},p="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"whats-new"},"What's New"),(0,o.kt)("p",null,"This page contains highlights of each nebula.gl release."),(0,o.kt)("h2",{id:"nebulagl-v10"},"nebula.gl v1.0"),(0,o.kt)("p",null,"Release date: TBD"),(0,o.kt)("h3",{id:"draw-rectangle-from-center-mode"},"Draw Rectangle From Center Mode"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"new ",(0,o.kt)("inlineCode",{parentName:"li"},"DrawRectangleFromCenterMode"),". User can draw a new rectangular ",(0,o.kt)("inlineCode",{parentName:"li"},"Polygon")," feature by clicking the center, then along a corner of the rectangle.")),(0,o.kt)("h3",{id:"translate-mode"},"Translate mode"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"screenSpace")," option can be provided in the ",(0,o.kt)("inlineCode",{parentName:"li"},"modeConfig")," of Translate mode so the features will be translated without distortion in screen space.")),(0,o.kt)("h3",{id:"modify-mode"},"Modify mode"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"lockRectangles")," option can be provided in the ",(0,o.kt)("inlineCode",{parentName:"li"},"modeConfig")," object for ModifyMode, so the features with ",(0,o.kt)("inlineCode",{parentName:"li"},"properties.shape === 'Rectangle'")," will preserve rectangular shape.")),(0,o.kt)("h3",{id:"editablegeojsonlayer"},"EditableGeojsonLayer"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"pickingLineWidthExtraPixels")," property to specify additional line width in pixels for picking. Can be useful when ",(0,o.kt)("inlineCode",{parentName:"li"},"EditableGeojsonLayer")," is over a deck.gl layer and precise picking is problematic, and when usage of ",(0,o.kt)("inlineCode",{parentName:"li"},"pickingDepth")," introduces performance issues.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/fc4c0442.e6fa5171.js b/assets/js/fc4c0442.e6fa5171.js new file mode 100644 index 00000000..7bef0e5d --- /dev/null +++ b/assets/js/fc4c0442.e6fa5171.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4872],{3905:(e,t,r)=>{r.d(t,{Zo:()=>s,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),d=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},s=function(e){var t=d(e.components);return n.createElement(c.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=d(r),m=o,f=p["".concat(c,".").concat(m)]||p[m]||u[m]||a;return r?n.createElement(f,i(i({ref:t},s),{},{components:r})):n.createElement(f,i({ref:t},s))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=m;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[p]="string"==typeof e?e:o,i[1]=l;for(var d=2;d{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>d});var n=r(7462),o=(r(7294),r(3905));const a={},i="What's New",l={unversionedId:"modules/editor-core/whats-new",id:"modules/editor-core/whats-new",title:"What's New",description:"This page contains highlights of each nebula.gl release.",source:"@site/../docs/modules/editor-core/whats-new.md",sourceDirName:"modules/editor-core",slug:"/modules/editor-core/whats-new",permalink:"/deck.gl-community/docs/modules/editor-core/whats-new",draft:!1,editUrl:"https://github.com/visgl/deck.gl-community/tree/master/website/../docs/modules/editor-core/whats-new.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Overview",permalink:"/deck.gl-community/docs/modules/editor-core/"},next:{title:"Roadmap",permalink:"/deck.gl-community/docs/modules/editor-core/roadmap"}},c={},d=[{value:"nebula.gl v1.0",id:"nebulagl-v10",level:2},{value:"Draw Rectangle From Center Mode",id:"draw-rectangle-from-center-mode",level:3},{value:"Translate mode",id:"translate-mode",level:3},{value:"Modify mode",id:"modify-mode",level:3},{value:"EditableGeojsonLayer",id:"editablegeojsonlayer",level:3}],s={toc:d},p="wrapper";function u(e){let{components:t,...r}=e;return(0,o.kt)(p,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"whats-new"},"What's New"),(0,o.kt)("p",null,"This page contains highlights of each nebula.gl release."),(0,o.kt)("h2",{id:"nebulagl-v10"},"nebula.gl v1.0"),(0,o.kt)("p",null,"Release date: TBD"),(0,o.kt)("h3",{id:"draw-rectangle-from-center-mode"},"Draw Rectangle From Center Mode"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"new ",(0,o.kt)("inlineCode",{parentName:"li"},"DrawRectangleFromCenterMode"),". User can draw a new rectangular ",(0,o.kt)("inlineCode",{parentName:"li"},"Polygon")," feature by clicking the center, then along a corner of the rectangle.")),(0,o.kt)("h3",{id:"translate-mode"},"Translate mode"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"screenSpace")," option can be provided in the ",(0,o.kt)("inlineCode",{parentName:"li"},"modeConfig")," of Translate mode so the features will be translated without distortion in screen space.")),(0,o.kt)("h3",{id:"modify-mode"},"Modify mode"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"lockRectangles")," option can be provided in the ",(0,o.kt)("inlineCode",{parentName:"li"},"modeConfig")," object for ModifyMode, so the features with ",(0,o.kt)("inlineCode",{parentName:"li"},"properties.shape === 'Rectangle'")," will preserve rectangular shape.")),(0,o.kt)("h3",{id:"editablegeojsonlayer"},"EditableGeojsonLayer"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"pickingLineWidthExtraPixels")," property to specify additional line width in pixels for picking. Can be useful when ",(0,o.kt)("inlineCode",{parentName:"li"},"EditableGeojsonLayer")," is over a deck.gl layer and precise picking is problematic, and when usage of ",(0,o.kt)("inlineCode",{parentName:"li"},"pickingDepth")," introduces performance issues.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/main.6046282e.js b/assets/js/main.6046282e.js new file mode 100644 index 00000000..0a22c2c7 --- /dev/null +++ b/assets/js/main.6046282e.js @@ -0,0 +1,2 @@ +/*! For license information please see main.6046282e.js.LICENSE.txt */ +(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[179],{830:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var r=n(7294);function a(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(7294),a=n(7462),o=n(8356),i=n.n(o),l=n(6887);const s={"09dbb192":[()=>n.e(109).then(n.bind(n,6434)),"@site/../docs/modules/editor-layers/api-reference/selection-layer.md",6434],"0f5083b6":[()=>n.e(9793).then(n.bind(n,790)),"@site/../docs/modules/react-graph-layers/advanced/custom-layout.md",790],"122a4404":[()=>n.e(5059).then(n.bind(n,8847)),"@site/../docs/modules/react-graph-layers/api-reference/node-style-marker.md",8847],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,8246)),"@theme/DocItem",8246],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,6675)),"@theme/SearchPage",6675],"1a9ac22a":[()=>n.e(6706).then(n.bind(n,1169)),"@site/../docs/modules/react-graph-layers/advanced/gallery.md",1169],"1b252c8c":[()=>n.e(5116).then(n.bind(n,1723)),"@site/../docs/whats-new.md",1723],"1be78505":[()=>Promise.all([n.e(532),n.e(9514)]).then(n.bind(n,9963)),"@theme/DocPage",9963],"1cfabacb":[()=>Promise.all([n.e(9521),n.e(1098)]).then(n.bind(n,9944)),"/Users/ibgreen/code/deck.gl-community/website/src/components/example/doc-item-component.jsx",9944],"26bd9e1b":[()=>n.e(4432).then(n.bind(n,6704)),"@site/../docs/modules/react-overlays/api-reference/html-overlay-item.md",6704],"26c43d5b":[()=>n.e(2947).then(n.bind(n,7362)),"@site/../docs/modules/editor-core/get-started/html-overlays.md",7362],"2dfe5465":[()=>n.e(5978).then(n.bind(n,6753)),"@site/../docs/modules/react-graph-layers/api-reference/edge-style-flow.md",6753],"30ba4c35":[()=>n.e(1666).then(n.bind(n,5693)),"@site/../docs/modules/editor-core/get-started/installing.md",5693],"36de8632":[()=>n.e(994).then(n.bind(n,1056)),"@site/../docs/modules/react-overlays/api-reference/html-overlay.md",1056],"36fab4cd":[()=>n.e(7042).then(n.bind(n,2822)),"@site/../docs/modules/react-graph-layers/api-reference/edge-style-label.md",2822],"39424d58":[()=>n.e(8142).then(n.bind(n,2871)),"@site/../docs/modules/react-graph-layers/api-reference/graph.md",2871],"40398e56":[()=>n.e(298).then(n.bind(n,3266)),"@site/../docs/modules/bing-maps/README.md",3266],"465a2661":[()=>n.e(9304).then(n.bind(n,5378)),"@site/../docs/modules/react-graph-layers/api-reference/d3-layout.md",5378],"4ff413f9":[()=>n.e(6818).then(n.bind(n,6762)),"@site/../docs/modules/react-graph-layers/get-started/getting-started.md",6762],"518575c9":[()=>n.e(8479).then(n.bind(n,6439)),"@site/../docs/modules/editor-layers/api-reference/editable-geojson-layer.md",6439],"5340021c":[()=>n.e(4800).then(n.bind(n,5891)),"@site/../docs/modules/react-graph-layers/api-reference/node-style.md",5891],"5d545ca7":[()=>n.e(4931).then(n.bind(n,2062)),"@site/../docs/modules/react-graph-layers/api-reference/graphgl.md",2062],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"608d6ba6":[()=>n.e(2930).then(n.bind(n,3286)),"@site/../docs/README.md",3286],"631e59ee":[()=>n.e(4326).then(n.bind(n,3478)),"@site/../docs/modules/react-graph-layers/README.md",3478],"68ce8057":[()=>n.e(4870).then(n.bind(n,1501)),"@site/../docs/modules/editor-core/README.md",1501],"80cd7e40":[()=>n.e(3372).then(n.bind(n,8443)),"@site/../docs/modules/react-graph-layers/api-reference/node-style-label.md",8443],"8af0e4af":[()=>n.e(211).then(n.t.bind(n,5745,19)),"/Users/ibgreen/code/deck.gl-community/website/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"8b22904b":[()=>n.e(8852).then(n.t.bind(n,1353,19)),"/Users/ibgreen/code/deck.gl-community/website/.docusaurus/docusaurus-plugin-content-docs/examples/plugin-route-context-module-100.json",1353],"9027671b":[()=>Promise.all([n.e(9521),n.e(3919),n.e(2037)]).then(n.bind(n,1819)),"@site/src/examples/index.mdx",1819],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"9451ee1e":[()=>n.e(5948).then(n.bind(n,7520)),"@site/../docs/modules/react-graph-layers/api-reference/viewport.md",7520],"9885bcf3":[()=>n.e(3791).then(n.bind(n,7131)),"@site/../docs/modules/react-graph-layers/version-policy.md",7131],"9b9d5f9d":[()=>n.e(3585).then(n.bind(n,7987)),"@site/../docs/modules/editor-layers/api-reference/path-marker-layer.md",7987],"9dd8a0d2":[()=>Promise.all([n.e(9521),n.e(7054)]).then(n.bind(n,7275)),"@site/src/pages/index.jsx",7275],a0080ae2:[()=>n.e(304).then(n.bind(n,3568)),"@site/../docs/modules/experimental-layers/README.md",3568],a6cf6abc:[()=>n.e(1046).then(n.t.bind(n,3769,19)),"/Users/ibgreen/code/deck.gl-community/website/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],a6e720db:[()=>n.e(6758).then(n.bind(n,8764)),"@site/../docs/modules/react-graph-layers/api-reference/simple-layout.md",8764],a82bdaf5:[()=>n.e(43).then(n.bind(n,6243)),"@site/../docs/modules/editor-layers/api-reference/outline.md",6243],aa2d3c63:[()=>n.e(5401).then(n.bind(n,4821)),"@site/src/examples/graph-layer.mdx",4821],aab7b702:[()=>n.e(1667).then(n.bind(n,6536)),"@site/../docs/modules/react-graph-layers/api-reference/node-style-circle.md",6536],b69de359:[()=>n.e(8413).then(n.bind(n,6817)),"@site/../docs/modules/editor-layers/api-reference/mesh-layer.md",6817],b91d26fa:[()=>n.e(1478).then(n.bind(n,3958)),"@site/../docs/modules/edit-modes/api-reference/README.md",3958],bdcf3cba:[()=>n.e(4848).then(n.bind(n,7590)),"@site/../docs/modules/react-graph-layers/api-reference/node.md",7590],c8044ed6:[()=>n.e(9299).then(n.bind(n,9450)),"@site/../docs/modules/react-graph-layers/api-reference/node-style-rectangle.md",9450],c90589ce:[()=>n.e(8517).then(n.bind(n,4632)),"@site/../docs/modules/react-graph-layers/api-reference/edge-style.md",4632],cfa22294:[()=>n.e(9255).then(n.bind(n,5306)),"@site/../docs/upgrade-guide.md",5306],d129df65:[()=>n.e(5301).then(n.t.bind(n,5640,19)),"~docs/examples/version-current-metadata-prop-751.json",5640],d461a37e:[()=>n.e(4808).then(n.bind(n,9903)),"@site/../docs/modules/editor-core/faq.md",9903],d6ac8603:[()=>n.e(1856).then(n.bind(n,6924)),"@site/../docs/modules/layers/README.md",6924],d909eaaa:[()=>n.e(1373).then(n.bind(n,5468)),"@site/../docs/modules/editor-core/roadmap.md",5468],db494b8e:[()=>n.e(9581).then(n.bind(n,7902)),"@site/../docs/modules/react-graph-layers/api-reference/edge.md",7902],dc8b3862:[()=>n.e(6300).then(n.bind(n,4916)),"@site/../docs/modules/graph-layers/README.md",4916],dde12764:[()=>n.e(3958).then(n.t.bind(n,7085,19)),"/Users/ibgreen/code/deck.gl-community/website/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],e1d043e3:[()=>n.e(4459).then(n.bind(n,8482)),"@site/../docs/modules/react-graph-layers/api-reference/interactions.md",8482],e1d5d9ab:[()=>n.e(6610).then(n.bind(n,881)),"@site/../docs/modules/edit-modes/README.md",881],f173e1d3:[()=>n.e(2026).then(n.bind(n,1859)),"@site/../docs/modules/editor-core/get-started/basic-usage.md",1859],f6ac847a:[()=>n.e(3910).then(n.bind(n,7155)),"@site/../docs/modules/react-graph-layers/api-reference/layout.md",7155],f77293ae:[()=>n.e(7028).then(n.bind(n,4455)),"@site/../docs/modules/react-overlays/api-reference/html-cluster-overlay.md",4455],fc4c0442:[()=>n.e(4872).then(n.bind(n,8905)),"@site/../docs/modules/editor-core/whats-new.md",8905]};function c(e){let{error:t,retry:n,pastDelay:a}=e;return t?r.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},r.createElement("p",null,String(t)),r.createElement("div",null,r.createElement("button",{type:"button",onClick:n},"Retry"))):a?r.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},r.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},r.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},r.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),r.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),r.createElement("circle",{cx:"22",cy:"22",r:"8"},r.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var u=n(9670),d=n(226);function p(e,t){if("*"===e)return i()({loading:c,loader:()=>n.e(4972).then(n.bind(n,4972)),modules:["@theme/NotFound"],webpack:()=>[4972],render(e,t){const n=e.default;return r.createElement(d.z,{value:{plugin:{name:"native",id:"default"}}},r.createElement(n,t))}});const o=l[e+"-"+t],p={},f=[],m=[],g=(0,u.Z)(o);return Object.entries(g).forEach((e=>{let[t,n]=e;const r=s[n];r&&(p[t]=r[0],f.push(r[1]),m.push(r[2]))})),i().Map({loading:c,loader:p,modules:f,webpack:()=>m,render(t,n){const i=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error("The page component at "+e+" doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.");"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let o=i;const l=n.split(".");l.slice(0,-1).forEach((e=>{o=o[e]})),o[l[l.length-1]]=a}));const l=i.__comp;delete i.__comp;const s=i.__context;return delete i.__context,r.createElement(d.z,{value:s},r.createElement(l,(0,a.Z)({},i,n)))}})}const f=[{path:"/deck.gl-community/search",component:p("/deck.gl-community/search","965"),exact:!0},{path:"/deck.gl-community/docs",component:p("/deck.gl-community/docs","366"),routes:[{path:"/deck.gl-community/docs",component:p("/deck.gl-community/docs","762"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/bing-maps",component:p("/deck.gl-community/docs/modules/bing-maps","715"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/edit-modes",component:p("/deck.gl-community/docs/modules/edit-modes","615"),exact:!0},{path:"/deck.gl-community/docs/modules/edit-modes/api-reference",component:p("/deck.gl-community/docs/modules/edit-modes/api-reference","3d7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core",component:p("/deck.gl-community/docs/modules/editor-core","96f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core/faq",component:p("/deck.gl-community/docs/modules/editor-core/faq","ebf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core/get-started/basic-usage",component:p("/deck.gl-community/docs/modules/editor-core/get-started/basic-usage","a6d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core/get-started/html-overlays",component:p("/deck.gl-community/docs/modules/editor-core/get-started/html-overlays","832"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core/get-started/installing",component:p("/deck.gl-community/docs/modules/editor-core/get-started/installing","f66"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core/roadmap",component:p("/deck.gl-community/docs/modules/editor-core/roadmap","87c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-core/whats-new",component:p("/deck.gl-community/docs/modules/editor-core/whats-new","24d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer",component:p("/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer","b2a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer",component:p("/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer","b96"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-layers/api-reference/outline",component:p("/deck.gl-community/docs/modules/editor-layers/api-reference/outline","05e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer",component:p("/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer","892"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer",component:p("/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer","293"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/experimental-layers",component:p("/deck.gl-community/docs/modules/experimental-layers","ca1"),exact:!0},{path:"/deck.gl-community/docs/modules/graph-layers",component:p("/deck.gl-community/docs/modules/graph-layers","69b"),exact:!0},{path:"/deck.gl-community/docs/modules/layers",component:p("/deck.gl-community/docs/modules/layers","616"),exact:!0},{path:"/deck.gl-community/docs/modules/react-graph-layers",component:p("/deck.gl-community/docs/modules/react-graph-layers","56d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout",component:p("/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout","461"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery",component:p("/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery","9f2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout","f43"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge","101"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style","7ab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow","6d6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label","623"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph","eaa"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl","a33"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions","400"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout","507"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/node","7d2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style","c88"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle","747"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label","923"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker","f7d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle","f83"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout","9f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport",component:p("/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport","515"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-graph-layers/get-started/getting-started",component:p("/deck.gl-community/docs/modules/react-graph-layers/get-started/getting-started","2c5"),exact:!0},{path:"/deck.gl-community/docs/modules/react-graph-layers/version-policy",component:p("/deck.gl-community/docs/modules/react-graph-layers/version-policy","645"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay",component:p("/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay","bf1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay",component:p("/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay","d71"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay-item",component:p("/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay-item","2f2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/upgrade-guide",component:p("/deck.gl-community/docs/upgrade-guide","aac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/deck.gl-community/docs/whats-new",component:p("/deck.gl-community/docs/whats-new","52f"),exact:!0,sidebar:"tutorialSidebar"}]},{path:"/deck.gl-community/examples",component:p("/deck.gl-community/examples","ed4"),routes:[{path:"/deck.gl-community/examples",component:p("/deck.gl-community/examples","ba3"),exact:!0,sidebar:"examplesSidebar"},{path:"/deck.gl-community/examples/graph-layer",component:p("/deck.gl-community/examples/graph-layer","f28"),exact:!0}]},{path:"/deck.gl-community/",component:p("/deck.gl-community/","884"),exact:!0},{path:"*",component:p("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>o});var r=n(7294);const a=r.createContext(!1);function o(e){let{children:t}=e;const[n,o]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{o(!0)}),[]),r.createElement(a.Provider,{value:n},t)}},9383:(e,t,n)=>{"use strict";var r=n(7294),a=n(3935),o=n(3727),i=n(405),l=n(412);const s=[n(2497),n(3310),n(8320),n(2148),n(5904)];var c=n(723),u=n(6550),d=n(8790);function p(e){let{children:t}=e;return r.createElement(r.Fragment,null,t)}var f=n(7462),m=n(5742),g=n(2263),h=n(4996),y=n(6668),b=n(833),v=n(4711),w=n(9727),k=n(3320),S=n(197);function E(){const{i18n:{defaultLocale:e,localeConfigs:t}}=(0,g.Z)(),n=(0,v.l)();return r.createElement(m.Z,null,Object.entries(t).map((e=>{let[t,{htmlLang:a}]=e;return r.createElement("link",{key:t,rel:"alternate",href:n.createUrl({locale:t,fullyQualified:!0}),hrefLang:a})})),r.createElement("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"}))}function x(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,g.Z)(),a=function(){const{siteConfig:{url:e}}=(0,g.Z)(),{pathname:t}=(0,u.TH)();return e+(0,h.Z)(t)}(),o=t?""+n+t:a;return r.createElement(m.Z,null,r.createElement("meta",{property:"og:url",content:o}),r.createElement("link",{rel:"canonical",href:o}))}function C(){const{i18n:{currentLocale:e}}=(0,g.Z)(),{metadata:t,image:n}=(0,y.L)();return r.createElement(r.Fragment,null,r.createElement(m.Z,null,r.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),r.createElement("body",{className:w.h})),n&&r.createElement(b.d,{image:n}),r.createElement(x,null),r.createElement(E,null),r.createElement(S.Z,{tag:k.HX,locale:e}),r.createElement(m.Z,null,t.map(((e,t)=>r.createElement("meta",(0,f.Z)({key:t},e))))))}const T=new Map;function _(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var A=n(8934),L=n(8940);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{var r,a;const o=null!=(r=null==(a=t.default)?void 0:a[e])?r:t[e];return null==o?void 0:o(...n)}));return()=>a.forEach((e=>null==e?void 0:e()))}const N=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,r.useLayoutEffect)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);null==t||t.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),R("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function P(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>null==e.route.component.preload?void 0:e.route.component.preload())))}class O extends r.Component{constructor(e){super(e),this.previousLocation=void 0,this.routeUpdateCleanupCb=void 0,this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),P(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return r.createElement(N,{previousLocation:this.previousLocation,location:t},r.createElement(u.AW,{location:t,render:()=>e}))}}const I=O,D="docusaurus-base-url-issue-banner-container",M="docusaurus-base-url-issue-banner",F="docusaurus-base-url-issue-banner-suggestion-container",B="__DOCUSAURUS_INSERT_BASEURL_BANNER";function j(e){return"\nwindow['"+B+"'] = true;\n\ndocument.addEventListener('DOMContentLoaded', maybeInsertBanner);\n\nfunction maybeInsertBanner() {\n var shouldInsert = window['"+B+"'];\n shouldInsert && insertBanner();\n}\n\nfunction insertBanner() {\n var bannerContainer = document.getElementById('"+D+"');\n if (!bannerContainer) {\n return;\n }\n var bannerHtml = "+JSON.stringify(function(e){return'\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = '+e+" "+("/"===e?" (default value)":"")+'

\n

We suggest trying baseUrl =

\n
\n'}(e)).replace(/{window[B]=!1}),[]),r.createElement(r.Fragment,null,!l.Z.canUseDOM&&r.createElement(m.Z,null,r.createElement("script",null,j(e))),r.createElement("div",{id:D}))}function U(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,g.Z)(),{pathname:n}=(0,u.TH)();return t&&n===e?r.createElement(z,null):null}function $(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:a,localeConfigs:o}}=(0,g.Z)(),i=(0,h.Z)(e),{htmlLang:l,direction:s}=o[a];return r.createElement(m.Z,null,r.createElement("html",{lang:l,dir:s}),r.createElement("title",null,t),r.createElement("meta",{property:"og:title",content:t}),r.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&r.createElement("meta",{name:"robots",content:"noindex, nofollow"}),e&&r.createElement("link",{rel:"icon",href:i}))}var q=n(4763);function H(){const e=(0,d.H)(c.Z),t=(0,u.TH)();return r.createElement(q.Z,null,r.createElement(L.M,null,r.createElement(A.t,null,r.createElement(p,null,r.createElement($,null),r.createElement(C,null),r.createElement(U,null),r.createElement(I,{location:_(t)},e)))))}var G=n(6887);const Z=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{var r,a;if("undefined"==typeof document)return void n();const o=document.createElement("link");o.setAttribute("rel","prefetch"),o.setAttribute("href",e),o.onload=()=>t(),o.onerror=()=>n();const i=null!=(r=document.getElementsByTagName("head")[0])?r:null==(a=document.getElementsByName("script")[0])?void 0:a.parentNode;null==i||i.appendChild(o)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var V=n(9670);const W=new Set,K=new Set,Y=()=>{var e,t;return(null==(e=navigator.connection)?void 0:e.effectiveType.includes("2g"))||(null==(t=navigator.connection)?void 0:t.saveData)},Q={prefetch(e){if(!(e=>!Y()&&!K.has(e)&&!W.has(e))(e))return!1;W.add(e);const t=(0,d.f)(c.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(G).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,V.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Z(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!Y()&&!K.has(e))(e)&&(K.add(e),P(e))},X=Object.freeze(Q);if(l.Z.canUseDOM){window.docusaurus=X;const e=a.hydrate;P(window.location.pathname).then((()=>{e(r.createElement(i.B6,null,r.createElement(o.VK,null,r.createElement(H,null))),document.getElementById("__docusaurus"))}))}},8940:(e,t,n)=>{"use strict";n.d(t,{_:()=>u,M:()=>d});var r=n(7294),a=n(6809);const o=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/deck.gl-community/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/deck.gl-community/docs","mainDocId":"README","docs":[{"id":"modules/bing-maps/README","path":"/deck.gl-community/docs/modules/bing-maps/","sidebar":"tutorialSidebar"},{"id":"modules/edit-modes/api-reference/README","path":"/deck.gl-community/docs/modules/edit-modes/api-reference/","sidebar":"tutorialSidebar"},{"id":"modules/edit-modes/README","path":"/deck.gl-community/docs/modules/edit-modes/"},{"id":"modules/editor-core/faq","path":"/deck.gl-community/docs/modules/editor-core/faq","sidebar":"tutorialSidebar"},{"id":"modules/editor-core/get-started/basic-usage","path":"/deck.gl-community/docs/modules/editor-core/get-started/basic-usage","sidebar":"tutorialSidebar"},{"id":"modules/editor-core/get-started/html-overlays","path":"/deck.gl-community/docs/modules/editor-core/get-started/html-overlays","sidebar":"tutorialSidebar"},{"id":"modules/editor-core/get-started/installing","path":"/deck.gl-community/docs/modules/editor-core/get-started/installing","sidebar":"tutorialSidebar"},{"id":"modules/editor-core/README","path":"/deck.gl-community/docs/modules/editor-core/","sidebar":"tutorialSidebar"},{"id":"modules/editor-core/roadmap","path":"/deck.gl-community/docs/modules/editor-core/roadmap","sidebar":"tutorialSidebar"},{"id":"modules/editor-core/whats-new","path":"/deck.gl-community/docs/modules/editor-core/whats-new","sidebar":"tutorialSidebar"},{"id":"modules/editor-layers/api-reference/editable-geojson-layer","path":"/deck.gl-community/docs/modules/editor-layers/api-reference/editable-geojson-layer","sidebar":"tutorialSidebar"},{"id":"modules/editor-layers/api-reference/mesh-layer","path":"/deck.gl-community/docs/modules/editor-layers/api-reference/mesh-layer","sidebar":"tutorialSidebar"},{"id":"modules/editor-layers/api-reference/outline","path":"/deck.gl-community/docs/modules/editor-layers/api-reference/outline","sidebar":"tutorialSidebar"},{"id":"modules/editor-layers/api-reference/path-marker-layer","path":"/deck.gl-community/docs/modules/editor-layers/api-reference/path-marker-layer","sidebar":"tutorialSidebar"},{"id":"modules/editor-layers/api-reference/selection-layer","path":"/deck.gl-community/docs/modules/editor-layers/api-reference/selection-layer","sidebar":"tutorialSidebar"},{"id":"modules/experimental-layers/README","path":"/deck.gl-community/docs/modules/experimental-layers/"},{"id":"modules/graph-layers/README","path":"/deck.gl-community/docs/modules/graph-layers/"},{"id":"modules/layers/README","path":"/deck.gl-community/docs/modules/layers/"},{"id":"modules/react-graph-layers/advanced/custom-layout","path":"/deck.gl-community/docs/modules/react-graph-layers/advanced/custom-layout","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/advanced/gallery","path":"/deck.gl-community/docs/modules/react-graph-layers/advanced/gallery","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/d3-layout","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/d3-layout","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/edge","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/edge-style","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/edge-style-flow","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-flow","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/edge-style-label","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/edge-style-label","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/graph","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graph","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/graphgl","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/graphgl","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/interactions","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/interactions","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/layout","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/layout","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/node","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/node-style","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/node-style-circle","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-circle","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/node-style-label","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-label","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/node-style-marker","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-marker","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/node-style-rectangle","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/node-style-rectangle","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/simple-layout","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/simple-layout","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/api-reference/viewport","path":"/deck.gl-community/docs/modules/react-graph-layers/api-reference/viewport","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/get-started/getting-started","path":"/deck.gl-community/docs/modules/react-graph-layers/get-started/getting-started"},{"id":"modules/react-graph-layers/README","path":"/deck.gl-community/docs/modules/react-graph-layers/","sidebar":"tutorialSidebar"},{"id":"modules/react-graph-layers/version-policy","path":"/deck.gl-community/docs/modules/react-graph-layers/version-policy","sidebar":"tutorialSidebar"},{"id":"modules/react-overlays/api-reference/html-cluster-overlay","path":"/deck.gl-community/docs/modules/react-overlays/api-reference/html-cluster-overlay","sidebar":"tutorialSidebar"},{"id":"modules/react-overlays/api-reference/html-overlay","path":"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay","sidebar":"tutorialSidebar"},{"id":"modules/react-overlays/api-reference/html-overlay-item","path":"/deck.gl-community/docs/modules/react-overlays/api-reference/html-overlay-item","sidebar":"tutorialSidebar"},{"id":"README","path":"/deck.gl-community/docs/","sidebar":"tutorialSidebar"},{"id":"upgrade-guide","path":"/deck.gl-community/docs/upgrade-guide","sidebar":"tutorialSidebar"},{"id":"whats-new","path":"/deck.gl-community/docs/whats-new","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/deck.gl-community/docs/","label":"README"}}}}],"breadcrumbs":true},"examples":{"path":"/deck.gl-community/examples","versions":[{"name":"current","label":"Next","isLast":true,"path":"/deck.gl-community/examples","mainDocId":"index","docs":[{"id":"graph-layer","path":"/deck.gl-community/examples/graph-layer"},{"id":"index","path":"/deck.gl-community/examples/","sidebar":"examplesSidebar"}],"draftIds":[],"sidebars":{"examplesSidebar":{"link":{"path":"/deck.gl-community/examples/","label":"Overview"}}}}],"breadcrumbs":false}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var l=n(7529);const s=JSON.parse('{"docusaurusVersion":"2.4.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.4.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"2.4.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.4.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.4.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.4.0"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"2.4.0"},"ocular-docusaurus-plugin":{"type":"project"}}}'),c={siteConfig:a.default,siteMetadata:s,globalData:o,i18n:i,codeTranslations:l},u=r.createContext(c);function d(e){let{children:t}=e;return r.createElement(u.Provider,{value:c},t)}},4763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});var r=n(7294),a=n(412),o=n(5742),i=n(8780),l=n(7452);function s(e){let{error:t,tryAgain:n}=e;return r.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"}},r.createElement("h1",{style:{fontSize:"3rem"}},"This page crashed"),r.createElement("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"}},"Try again"),r.createElement(c,{error:t}))}function c(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return r.createElement("p",{style:{whiteSpace:"pre-wrap"}},n)}function u(e){let{error:t,tryAgain:n}=e;return r.createElement(p,{fallback:()=>r.createElement(s,{error:t,tryAgain:n})},r.createElement(o.Z,null,r.createElement("title",null,"Page Error")),r.createElement(l.Z,null,r.createElement(s,{error:t,tryAgain:n})))}const d=e=>r.createElement(u,e);class p extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){var n;const e={error:t,tryAgain:()=>this.setState({error:null})};return(null!=(n=this.props.fallback)?n:d)(e)}return null!=e?e:null}}},412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},5742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(405);function o(e){return r.createElement(a.ql,e)}},9960:(e,t,n)=>{"use strict";n.d(t,{Z:()=>g});var r=n(7462),a=n(7294),o=n(3727),i=n(8780),l=n(2263),s=n(3919),c=n(412);const u=a.createContext({collectLink:()=>{}}),d=()=>(0,a.useContext)(u);var p=n(4996);const f=e=>e.startsWith("/");function m(e,t){var n,u;let{isNavLink:m,to:g,href:h,activeClassName:y,isActive:b,"data-noBrokenLinkCheck":v,autoAddBaseUrl:w=!0,...k}=e;const{siteConfig:{trailingSlash:S,baseUrl:E}}=(0,l.Z)(),{withBaseUrl:x}=(0,p.C)(),C=d(),T=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,(()=>T.current));const _=g||h;const A=(0,s.Z)(_),L=null==_?void 0:_.replace("pathname://","");let R=void 0!==L?(N=L,w&&f(N)?x(N):N):void 0;var N;R&&A&&(R=(0,i.applyTrailingSlash)(R,{trailingSlash:S,baseUrl:E}));const P=(0,a.useRef)(!1),O=m?o.OL:o.rU,I=c.Z.canUseIntersectionObserver,D=(0,a.useRef)(),M=()=>{P.current||null==R||(window.docusaurus.preload(R),P.current=!0)};(0,a.useEffect)((()=>(!I&&A&&null!=R&&window.docusaurus.prefetch(R),()=>{I&&D.current&&D.current.disconnect()})),[D,R,I,A]);const F=null!=(n=null==(u=R)?void 0:u.startsWith("#"))&&n,B=!R||!A||F;return B||v||C.collectLink(R),B?a.createElement("a",(0,r.Z)({ref:T,href:R},_&&!A&&{target:"_blank",rel:"noopener noreferrer"},k)):a.createElement(O,(0,r.Z)({},k,{onMouseEnter:M,onTouchStart:M,innerRef:e=>{T.current=e,I&&e&&A&&(D.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(D.current.unobserve(e),D.current.disconnect(),null!=R&&window.docusaurus.prefetch(R))}))})),D.current.observe(e))},to:R},m&&{isActive:b,activeClassName:y}))}const g=a.forwardRef(m)},5999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s,I:()=>l});var r=n(7294);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=null==t?void 0:t[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var o=n(7529);function i(e){var t,n;let{id:r,message:a}=e;if(void 0===r&&void 0===a)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return null!=(t=null!=(n=o[null!=r?r:a])?n:a)?t:r}function l(e,t){let{message:n,id:r}=e;return a(i({message:n,id:r}),t)}function s(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const l=i({message:t,id:n});return r.createElement(r.Fragment,null,a(l,o))}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},3919:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(7294),a=n(2263),o=n(3919);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,o.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8940);function o(){return(0,r.useContext)(a._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8934);function o(){return(0,r.useContext)(a._)}},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t=".",n={};return function e(a,o){Object.entries(a).forEach((a=>{let[i,l]=a;const s=o?""+o+t+i:i;r(l)?e(l,s):n[s]=l}))}(e),n}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>o});var r=n(7294);const a=r.createContext(null);function o(e){let{children:t,value:n}=e;const o=r.useContext(a),i=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...null==n?void 0:n.data};return{plugin:t.plugin,data:r}}({parent:o,value:n})),[o,n]);return r.createElement(a.Provider,{value:i},t)}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>y,gA:()=>f,WS:()=>m,_r:()=>d,Jo:()=>b,zh:()=>p,yW:()=>h,gB:()=>g});var r=n(6550),a=n(2263),o=n(9935);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin.');return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=s(e,t),a=null==n?void 0:n.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const u={},d=()=>{var e;return null!=(e=i("docusaurus-plugin-content-docs"))?e:u},p=e=>function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=i(e),a=null==r?void 0:r[t];if(!a&&n.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin with id "'+t+'".');return a}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error("Can't find active docs plugin for \""+t+'" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: '+Object.values(e).map((e=>e.path)).join(", "));return o}(t,n,e)}function m(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.TH)();if(!t)return;return{activePlugin:t,activeVersion:s(t.pluginData,n)}}function g(e){return p(e).versions}function h(e){const t=p(e);return l(t)}function y(e){const t=p(e),{pathname:n}=(0,r.TH)();return c(t,n)}function b(e){const t=p(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var r=n(7410),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{n(6500)("./prism-"+e)})),delete globalThis.Prism}(r.Z)},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294);const a={iconExternalLink:"iconExternalLink_nPIU"};function o(e){let{width:t=13.5,height:n=13.5}=e;return r.createElement("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:a.iconExternalLink},r.createElement("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"}))}},7452:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Nt});var r=n(7294),a=n(6010),o=n(4763),i=n(833),l=n(7462),s=n(6550),c=n(5999),u=n(5936);const d="docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=null!=(n=document.querySelector("main:first-of-type"))?n:document.getElementById(d);var n;t&&p(t)}),[]);return(0,u.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,c.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function g(e){var t;const n=null!=(t=e.children)?t:m,{containerRef:a,onClick:o}=f();return r.createElement("div",{ref:a,role:"region","aria-label":m},r.createElement("a",(0,l.Z)({},e,{href:"#"+d,onClick:o}),n))}var h=n(5281),y=n(9727);const b={skipToContent:"skipToContent_fXgn"};function v(){return r.createElement(g,{className:b.skipToContent})}var w=n(6668),k=n(9689);function S(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:i,...s}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 15 15",width:t,height:n},s),r.createElement("g",{stroke:a,strokeWidth:o},r.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}const E={closeButton:"closeButton_CVFx"};function x(e){return r.createElement("button",(0,l.Z)({type:"button","aria-label":(0,c.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,a.Z)("clean-btn close",E.closeButton,e.className)}),r.createElement(S,{width:14,height:14,strokeWidth:3.1}))}const C={content:"content_knG7"};function T(e){const{announcementBar:t}=(0,w.L)(),{content:n}=t;return r.createElement("div",(0,l.Z)({},e,{className:(0,a.Z)(C.content,e.className),dangerouslySetInnerHTML:{__html:n}}))}const _={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function A(){const{announcementBar:e}=(0,w.L)(),{isActive:t,close:n}=(0,k.nT)();if(!t)return null;const{backgroundColor:a,textColor:o,isCloseable:i}=e;return r.createElement("div",{className:_.announcementBar,style:{backgroundColor:a,color:o},role:"banner"},i&&r.createElement("div",{className:_.announcementBarPlaceholder}),r.createElement(T,{className:_.announcementBarContent}),i&&r.createElement(x,{onClick:n,className:_.announcementBarClose}))}var L=n(3163),R=n(2466);var N=n(902),P=n(3102);const O=r.createContext(null);function I(e){let{children:t}=e;const n=function(){const e=(0,L.e)(),t=(0,P.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,N.D9)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return r.createElement(O.Provider,{value:n},t)}function D(e){if(e.component){const t=e.component;return r.createElement(t,e.props)}}function M(){const e=(0,r.useContext)(O);if(!e)throw new N.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,P.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:D(o)})),[a,o,t])}function F(e){let{header:t,primaryMenu:n,secondaryMenu:o}=e;const{shown:i}=M();return r.createElement("div",{className:"navbar-sidebar"},t,r.createElement("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i})},r.createElement("div",{className:"navbar-sidebar__item menu"},n),r.createElement("div",{className:"navbar-sidebar__item menu"},o)))}var B=n(2949),j=n(2389);function z(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"}))}function U(e){return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:24,height:24},e),r.createElement("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"}))}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:o,onChange:i}=e;const l=(0,j.Z)(),s=(0,c.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===o?(0,c.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,c.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return r.createElement("div",{className:(0,a.Z)($.toggle,t)},r.createElement("button",{className:(0,a.Z)("clean-btn",$.toggleButton,!l&&$.toggleButtonDisabled,n),type:"button",onClick:()=>i("dark"===o?"light":"dark"),disabled:!l,title:s,"aria-label":s,"aria-live":"polite"},r.createElement(z,{className:(0,a.Z)($.toggleIcon,$.lightToggleIcon)}),r.createElement(U,{className:(0,a.Z)($.toggleIcon,$.darkToggleIcon)})))}const H=r.memo(q),G={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function Z(e){let{className:t}=e;const n=(0,w.L)().navbar.style,a=(0,w.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:i}=(0,B.I)();return a?null:r.createElement(H,{className:t,buttonClassName:"dark"===n?G.darkNavbarColorModeToggle:void 0,value:o,onChange:i})}var V=n(1327);function W(){return r.createElement(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,L.e)();return r.createElement("button",{type:"button","aria-label":(0,c.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle()},r.createElement(S,{color:"var(--ifm-color-emphasis-600)"}))}function Y(){return r.createElement("div",{className:"navbar-sidebar__brand"},r.createElement(W,null),r.createElement(Z,{className:"margin-right--md"}),r.createElement(K,null))}var Q=n(9960),X=n(4996),J=n(3919),ee=n(8022),te=n(9471);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:a,href:o,label:i,html:s,isDropdownLink:c,prependBaseUrlToHref:u,...d}=e;const p=(0,X.Z)(a),f=(0,X.Z)(t),m=(0,X.Z)(o,{forcePrependBaseUrl:!0}),g=i&&o&&!(0,J.Z)(o),h=s?{dangerouslySetInnerHTML:{__html:s}}:{children:r.createElement(r.Fragment,null,i,g&&r.createElement(te.Z,c&&{width:12,height:12}))};return o?r.createElement(Q.Z,(0,l.Z)({href:u?m:o},d,h)):r.createElement(Q.Z,(0,l.Z)({to:p,isNavLink:!0},(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(f)},d,h))}function re(e){let{className:t,isDropdownItem:n=!1,...o}=e;const i=r.createElement(ne,(0,l.Z)({className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n},o));return n?r.createElement("li",null,i):i}function ae(e){let{className:t,isDropdownItem:n,...o}=e;return r.createElement("li",{className:"menu__list-item"},r.createElement(ne,(0,l.Z)({className:(0,a.Z)("menu__link",t)},o)))}function oe(e){var t;let{mobile:n=!1,position:a,...o}=e;const i=n?ae:re;return r.createElement(i,(0,l.Z)({},o,{activeClassName:null!=(t=o.activeClassName)?t:n?"menu__link--active":"navbar__link--active"}))}var ie=n(6043),le=n(8596),se=n(2263);function ce(e,t){return e.some((e=>function(e,t){return!!(0,le.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function ue(e){var t;let{items:n,position:o,className:i,onClick:s,...c}=e;const u=(0,r.useRef)(null),[d,p]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&p(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[u]),r.createElement("div",{ref:u,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===o,"dropdown--show":d})},r.createElement(ne,(0,l.Z)({"aria-haspopup":"true","aria-expanded":d,role:"button",href:c.to?void 0:"#",className:(0,a.Z)("navbar__link",i)},c,{onClick:c.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),p(!d))}}),null!=(t=c.children)?t:c.label),r.createElement("ul",{className:"dropdown__menu"},n.map(((e,t)=>r.createElement(He,(0,l.Z)({isDropdownItem:!0,activeClassName:"dropdown__link--active"},e,{key:t}))))))}function de(e){var t;let{items:n,className:o,position:i,onClick:c,...u}=e;const d=function(){const{siteConfig:{baseUrl:e}}=(0,se.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),p=ce(n,d),{collapsed:f,toggleCollapsed:m,setCollapsed:g}=(0,ie.u)({initialState:()=>!p});return(0,r.useEffect)((()=>{p&&g(!p)}),[d,p,g]),r.createElement("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":f})},r.createElement(ne,(0,l.Z)({role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",o)},u,{onClick:e=>{e.preventDefault(),m()}}),null!=(t=u.children)?t:u.label),r.createElement(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:f},n.map(((e,t)=>r.createElement(He,(0,l.Z)({mobile:!0,isDropdownItem:!0,onClick:c,activeClassName:"menu__link--active"},e,{key:t}))))))}function pe(e){let{mobile:t=!1,...n}=e;const a=t?de:ue;return r.createElement(a,n)}var fe=n(4711);function me(e){let{width:t=20,height:n=20,...a}=e;return r.createElement("svg",(0,l.Z)({viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0},a),r.createElement("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"}))}const ge={iconLanguage:"iconLanguage_nlXk"};function he(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var ye=n(830),be=["translations"];function ve(){return ve=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var Ee="Ctrl";var xe=r.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,o=Se(e,be),i=a.buttonText,l=void 0===i?"Search":i,s=a.buttonAriaLabel,c=void 0===s?"Search":s,u=we((0,r.useState)(null),2),d=u[0],p=u[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ee))}),[]),r.createElement("button",ve({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(ye.W,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},l)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Ee?r.createElement(he,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),Ce=n(5742),Te=n(6177),_e=n(239),Ae=n(3320);var Le=n(3935);const Re={button:{buttonText:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,c.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,c.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,c.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,c.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,c.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,c.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,c.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,c.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Ne=null;function Pe(e){let{hit:t,children:n}=e;return r.createElement(Q.Z,{to:t.url},n)}function Oe(e){let{state:t,onClose:n}=e;const a=(0,Te.M)();return r.createElement(Q.Z,{to:a(t.query),onClick:n},r.createElement(c.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits}},"See all {count} results"))}function Ie(e){var t,a;let{contextualSearch:o,externalUrlRegex:i,...c}=e;const{siteMetadata:u}=(0,se.Z)(),d=(0,_e.l)(),p=function(){const{locale:e,tags:t}=(0,Ae._q)();return["language:"+e,t.map((e=>"docusaurus_tag:"+e))]}(),f=null!=(t=null==(a=c.searchParameters)?void 0:a.facetFilters)?t:[],m=o?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(p,f):f,g={...c.searchParameters,facetFilters:m},h=(0,s.k6)(),y=(0,r.useRef)(null),b=(0,r.useRef)(null),[v,w]=(0,r.useState)(!1),[k,S]=(0,r.useState)(void 0),E=(0,r.useCallback)((()=>Ne?Promise.resolve():Promise.all([n.e(6780).then(n.bind(n,6780)),Promise.all([n.e(532),n.e(6945)]).then(n.bind(n,6945)),Promise.all([n.e(532),n.e(8894)]).then(n.bind(n,8894))]).then((e=>{let[{DocSearchModal:t}]=e;Ne=t}))),[]),x=(0,r.useCallback)((()=>{E().then((()=>{y.current=document.createElement("div"),document.body.insertBefore(y.current,document.body.firstChild),w(!0)}))}),[E,w]),C=(0,r.useCallback)((()=>{var e;w(!1),null==(e=y.current)||e.remove()}),[w]),T=(0,r.useCallback)((e=>{E().then((()=>{w(!0),S(e.key)}))}),[E,w,S]),_=(0,r.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(i,t)?window.location.href=t:h.push(t)}}).current,A=(0,r.useRef)((e=>c.transformItems?c.transformItems(e):e.map((e=>({...e,url:d(e.url)}))))).current,L=(0,r.useMemo)((()=>e=>r.createElement(Oe,(0,l.Z)({},e,{onClose:C}))),[C]),R=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",u.docusaurusVersion),e)),[u.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){(27===e.keyCode&&t||"k"===e.key.toLowerCase()&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,o,i])}({isOpen:v,onOpen:x,onClose:C,onInput:T,searchButtonRef:b}),r.createElement(r.Fragment,null,r.createElement(Ce.Z,null,r.createElement("link",{rel:"preconnect",href:"https://"+c.appId+"-dsn.algolia.net",crossOrigin:"anonymous"})),r.createElement(xe,{onTouchStart:E,onFocus:E,onMouseOver:E,onClick:x,ref:b,translations:Re.button}),v&&Ne&&y.current&&(0,Le.createPortal)(r.createElement(Ne,(0,l.Z)({onClose:C,initialScrollY:window.scrollY,initialQuery:k,navigator:_,transformItems:A,hitComponent:Pe,transformSearchClient:R},c.searchPagePath&&{resultsFooterComponent:L},c,{searchParameters:g,placeholder:Re.placeholder,translations:Re.modal})),y.current))}function De(){const{siteConfig:e}=(0,se.Z)();return r.createElement(Ie,e.themeConfig.algolia)}const Me={searchBox:"searchBox_ZlJk"};function Fe(e){let{children:t,className:n}=e;return r.createElement("div",{className:(0,a.Z)(n,Me.searchBox)},t)}var Be=n(143),je=n(2802);const ze=e=>e.docs.find((t=>t.id===e.mainDocId));var Ue=n(373);const $e=e=>e.docs.find((t=>t.id===e.mainDocId));const qe={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:a,...o}=e;const{i18n:{currentLocale:i,locales:u,localeConfigs:d}}=(0,se.Z)(),p=(0,fe.l)(),{search:f,hash:m}=(0,s.TH)(),g=[...n,...u.map((e=>{const n=""+("pathname://"+p.createUrl({locale:e,fullyQualified:!1}))+f+m;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...a],h=t?(0,c.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return r.createElement(pe,(0,l.Z)({},o,{mobile:t,label:r.createElement(r.Fragment,null,r.createElement(me,{className:ge.iconLanguage}),h),items:g}))},search:function(e){let{mobile:t,className:n}=e;return t?null:r.createElement(Fe,{className:n},r.createElement(De,null))},dropdown:pe,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:i=!1}=e;const l=i?"li":"div";return r.createElement(l,{className:(0,a.Z)({navbar__item:!o&&!i,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,Be.Iw)(a),s=(0,je.vY)(t,a);return null===s?null:r.createElement(oe,(0,l.Z)({exact:!0},o,{isActive:()=>(null==i?void 0:i.path)===s.path||!(null==i||!i.sidebar)&&i.sidebar===s.sidebar,label:null!=n?n:s.id,to:s.path}))},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e;const{activeDoc:i}=(0,Be.Iw)(a),s=(0,je.oz)(t,a).link;if(!s)throw new Error('DocSidebarNavbarItem: Sidebar with ID "'+t+"\" doesn't have anything to be linked to.");return r.createElement(oe,(0,l.Z)({exact:!0},o,{isActive:()=>(null==i?void 0:i.sidebar)===t,label:null!=n?n:s.label,to:s.path}))},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e;const i=(0,je.lO)(a)[0],s=null!=t?t:i.label,c=null!=n?n:ze(i).path;return r.createElement(oe,(0,l.Z)({},o,{label:s,to:c}))},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:i,...u}=e;const{search:d,hash:p}=(0,s.TH)(),f=(0,Be.Iw)(n),m=(0,Be.gB)(n),{savePreferredVersionName:g}=(0,Ue.J)(n),h=[...o,...m.map((e=>{var t;const n=null!=(t=f.alternateDocVersions[e.name])?t:$e(e);return{label:e.label,to:""+n.path+d+p,isActive:()=>e===f.activeVersion,onClick:()=>g(e.name)}})),...i],y=(0,je.lO)(n)[0],b=t&&h.length>1?(0,c.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):y.label,v=t&&h.length>1?void 0:$e(y).path;return h.length<=1?r.createElement(oe,(0,l.Z)({},u,{mobile:t,label:b,to:v,isActive:a?()=>!1:void 0})):r.createElement(pe,(0,l.Z)({},u,{mobile:t,label:b,to:v,items:h,isActive:a?()=>!1:void 0}))}};function He(e){let{type:t,...n}=e;const a=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=qe[a];if(!o)throw new Error('No NavbarItem component found for type "'+t+'".');return r.createElement(o,n)}function Ge(){const e=(0,L.e)(),t=(0,w.L)().navbar.items;return r.createElement("ul",{className:"menu__list"},t.map(((t,n)=>r.createElement(He,(0,l.Z)({mobile:!0},t,{onClick:()=>e.toggle(),key:n})))))}function Ze(e){return r.createElement("button",(0,l.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),r.createElement(c.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"},"\u2190 Back to main menu"))}function Ve(){const e=0===(0,w.L)().navbar.items.length,t=M();return r.createElement(r.Fragment,null,!e&&r.createElement(Ze,{onClick:()=>t.hide()}),t.content)}function We(){const e=(0,L.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?r.createElement(F,{header:r.createElement(Y,null),primaryMenu:r.createElement(Ge,null),secondaryMenu:r.createElement(Ve,null)}):null}const Ke={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Ye(e){return r.createElement("div",(0,l.Z)({role:"presentation"},e,{className:(0,a.Z)("navbar-sidebar__backdrop",e.className)}))}function Qe(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.L)(),i=(0,L.e)(),{navbarRef:l,isNavbarVisible:s}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,R.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return r.createElement("nav",{ref:l,"aria-label":(0,c.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[Ke.navbarHideable,!s&&Ke.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown})},t,r.createElement(Ye,{onClick:i.toggle}),r.createElement(We,null))}var Xe=n(8780);const Je={errorBoundaryError:"errorBoundaryError_a6uf"};function et(e){return r.createElement("button",(0,l.Z)({type:"button"},e),r.createElement(c.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error"},"Try again"))}function tt(e){let{error:t}=e;const n=(0,Xe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return r.createElement("p",{className:Je.errorBoundaryError},n)}class nt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const rt="right";function at(e){let{width:t=30,height:n=30,className:a,...o}=e;return r.createElement("svg",(0,l.Z)({className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true"},o),r.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))}function ot(){const{toggle:e,shown:t}=(0,L.e)();return r.createElement("button",{onClick:e,"aria-label":(0,c.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button"},r.createElement(at,null))}const it={colorModeToggle:"colorModeToggle_DEke"};function lt(e){let{items:t}=e;return r.createElement(r.Fragment,null,t.map(((e,t)=>r.createElement(nt,{key:t,onError:t=>new Error("A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n"+JSON.stringify(e,null,2),{cause:t})},r.createElement(He,e)))))}function st(e){let{left:t,right:n}=e;return r.createElement("div",{className:"navbar__inner"},r.createElement("div",{className:"navbar__items"},t),r.createElement("div",{className:"navbar__items navbar__items--right"},n))}function ct(){const e=(0,L.e)(),t=(0,w.L)().navbar.items,[n,a]=function(e){function t(e){var t;return"left"===(null!=(t=e.position)?t:rt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return r.createElement(st,{left:r.createElement(r.Fragment,null,!e.disabled&&r.createElement(ot,null),r.createElement(W,null),r.createElement(lt,{items:n})),right:r.createElement(r.Fragment,null,r.createElement(lt,{items:a}),r.createElement(Z,{className:it.colorModeToggle}),!o&&r.createElement(Fe,null,r.createElement(De,null)))})}function ut(){return r.createElement(Qe,null,r.createElement(ct,null))}function dt(e){let{item:t}=e;const{to:n,href:a,label:o,prependBaseUrlToHref:i,...s}=t,c=(0,X.Z)(n),u=(0,X.Z)(a,{forcePrependBaseUrl:!0});return r.createElement(Q.Z,(0,l.Z)({className:"footer__link-item"},a?{href:i?u:a}:{to:c},s),o,a&&!(0,J.Z)(a)&&r.createElement(te.Z,null))}function pt(e){var t;let{item:n}=e;return n.html?r.createElement("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:n.html}}):r.createElement("li",{key:null!=(t=n.href)?t:n.to,className:"footer__item"},r.createElement(dt,{item:n}))}function ft(e){let{column:t}=e;return r.createElement("div",{className:"col footer__col"},r.createElement("div",{className:"footer__title"},t.title),r.createElement("ul",{className:"footer__items clean-list"},t.items.map(((e,t)=>r.createElement(pt,{key:t,item:e})))))}function mt(e){let{columns:t}=e;return r.createElement("div",{className:"row footer__links"},t.map(((e,t)=>r.createElement(ft,{key:t,column:e}))))}function gt(){return r.createElement("span",{className:"footer__link-separator"},"\xb7")}function ht(e){let{item:t}=e;return t.html?r.createElement("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):r.createElement(dt,{item:t})}function yt(e){let{links:t}=e;return r.createElement("div",{className:"footer__links text--center"},r.createElement("div",{className:"footer__links"},t.map(((e,n)=>r.createElement(r.Fragment,{key:n},r.createElement(ht,{item:e}),t.length!==n+1&&r.createElement(gt,null))))))}function bt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?r.createElement(mt,{columns:t}):r.createElement(yt,{links:t})}var vt=n(941);const wt={footerLogoLink:"footerLogoLink_BH7S"};function kt(e){var t;let{logo:n}=e;const{withBaseUrl:o}=(0,X.C)(),i={light:o(n.src),dark:o(null!=(t=n.srcDark)?t:n.src)};return r.createElement(vt.Z,{className:(0,a.Z)("footer__logo",n.className),alt:n.alt,sources:i,width:n.width,height:n.height,style:n.style})}function St(e){let{logo:t}=e;return t.href?r.createElement(Q.Z,{href:t.href,className:wt.footerLogoLink,target:t.target},r.createElement(kt,{logo:t})):r.createElement(kt,{logo:t})}function Et(e){let{copyright:t}=e;return r.createElement("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function xt(e){let{style:t,links:n,logo:o,copyright:i}=e;return r.createElement("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t})},r.createElement("div",{className:"container container-fluid"},n,(o||i)&&r.createElement("div",{className:"footer__bottom text--center"},o&&r.createElement("div",{className:"margin-bottom--sm"},o),i)))}function Ct(){const{footer:e}=(0,w.L)();if(!e)return null;const{copyright:t,links:n,logo:a,style:o}=e;return r.createElement(xt,{style:o,links:n&&n.length>0&&r.createElement(bt,{links:n}),logo:a&&r.createElement(St,{logo:a}),copyright:t&&r.createElement(Et,{copyright:t})})}const Tt=r.memo(Ct),_t=(0,N.Qc)([B.S,k.pl,R.OC,Ue.L5,i.VC,function(e){let{children:t}=e;return r.createElement(P.n2,null,r.createElement(L.M,null,r.createElement(I,null,t)))}]);function At(e){let{children:t}=e;return r.createElement(_t,null,t)}function Lt(e){let{error:t,tryAgain:n}=e;return r.createElement("main",{className:"container margin-vert--xl"},r.createElement("div",{className:"row"},r.createElement("div",{className:"col col--6 col--offset-3"},r.createElement("h1",{className:"hero__title"},r.createElement(c.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),r.createElement("div",{className:"margin-vert--lg"},r.createElement(et,{onClick:n,className:"button button--primary shadow--lw"})),r.createElement("hr",null),r.createElement("div",{className:"margin-vert--md"},r.createElement(tt,{error:t})))))}const Rt={mainWrapper:"mainWrapper_z2l0"};function Nt(e){const{children:t,noFooter:n,wrapperClassName:l,title:s,description:c}=e;return(0,y.t)(),r.createElement(At,null,r.createElement(i.d,{title:s,description:c}),r.createElement(v,null),r.createElement(A,null),r.createElement(ut,null),r.createElement("div",{id:d,className:(0,a.Z)(h.k.wrapper.main,Rt.mainWrapper,l)},r.createElement(o.Z,{fallback:e=>r.createElement(Lt,e)},t)),!n&&r.createElement(Tt,null))}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(7462),a=n(7294),o=n(9960),i=n(4996),l=n(2263),s=n(6668),c=n(941);function u(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,i.Z)(t.src),dark:(0,i.Z)(t.srcDark||t.src)},l=a.createElement(c.Z,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?a.createElement("div",{className:r},l):l}function d(e){var t;const{siteConfig:{title:n}}=(0,l.Z)(),{navbar:{title:c,logo:d}}=(0,s.L)(),{imageClassName:p,titleClassName:f,...m}=e,g=(0,i.Z)((null==d?void 0:d.href)||"/"),h=c?"":n,y=null!=(t=null==d?void 0:d.alt)?t:h;return a.createElement(o.Z,(0,r.Z)({to:g},m,(null==d?void 0:d.target)&&{target:d.target}),d&&a.createElement(u,{logo:d,alt:y,imageClassName:p}),null!=c&&a.createElement("b",{className:f},c))}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(5742);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return r.createElement(a.Z,null,t&&r.createElement("meta",{name:"docusaurus_locale",content:t}),n&&r.createElement("meta",{name:"docusaurus_version",content:n}),o&&r.createElement("meta",{name:"docusaurus_tag",content:o}),i&&r.createElement("meta",{name:"docsearch:language",content:i}),n&&r.createElement("meta",{name:"docsearch:version",content:n}),o&&r.createElement("meta",{name:"docsearch:docusaurus_tag",content:o}))}},941:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});var r=n(7462),a=n(7294),o=n(6010),i=n(2389),l=n(2949);const s={themedImage:"themedImage_ToTc","themedImage--light":"themedImage--light_HNdA","themedImage--dark":"themedImage--dark_i4oU"};function c(e){const t=(0,i.Z)(),{colorMode:n}=(0,l.I)(),{sources:c,className:u,alt:d,...p}=e,f=t?"dark"===n?["dark"]:["light"]:["light","dark"];return a.createElement(a.Fragment,null,f.map((e=>a.createElement("img",(0,r.Z)({key:e,src:c[e],alt:d,className:(0,o.Z)(s.themedImage,s["themedImage--"+e],u)},p)))))}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>l,z:()=>h});var r=n(7462),a=n(7294),o=n(412);const i="ease-in-out";function l(e){let{initialState:t}=e;const[n,r]=(0,a.useState)(null!=t&&t),o=(0,a.useCallback)((()=>{r((e=>!e))}),[]);return{collapsed:n,setCollapsed:r,toggleCollapsed:o}}const s={display:"none",overflow:"hidden",height:"0px"},c={display:"block",overflow:"visible",height:"auto"};function u(e,t){const n=t?s:c;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function d(e){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 0;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}function p(e){let{collapsibleRef:t,collapsed:n,animation:r}=e;const o=(0,a.useRef)(!1);(0,a.useEffect)((()=>{const e=t.current;function a(){const t=function(){var t,n;const a=e.scrollHeight;return{transition:"height "+(null!=(t=null==r?void 0:r.duration)?t:d(a))+"ms "+(null!=(n=null==r?void 0:r.easing)?n:i),height:a+"px"}}();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return u(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(a(),requestAnimationFrame((()=>{e.style.height=s.height,e.style.overflow=s.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{a()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,r])}function f(e){if(!o.Z.canUseDOM)return e?s:c}function m(e){let{as:t="div",collapsed:n,children:r,animation:o,onCollapseTransitionEnd:i,className:l,disableSSRStyle:s}=e;const c=(0,a.useRef)(null);return p({collapsibleRef:c,collapsed:n,animation:o}),a.createElement(t,{ref:c,style:s?void 0:f(n),onTransitionEnd:e=>{"height"===e.propertyName&&(u(c.current,n),null==i||i(n))},className:l},r)}function g(e){let{collapsed:t,...n}=e;const[o,i]=(0,a.useState)(!t),[l,s]=(0,a.useState)(t);return(0,a.useLayoutEffect)((()=>{t||i(!0)}),[t]),(0,a.useLayoutEffect)((()=>{o&&s(t)}),[o,t]),o?a.createElement(m,(0,r.Z)({},n,{collapsed:l})):null}function h(e){let{lazy:t,...n}=e;const r=t?g:m;return a.createElement(r,n)}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>f});var r=n(7294),a=n(2389),o=n(12),i=n(902),l=n(6668);const s=(0,o.WA)("docusaurus.announcement.dismiss"),c=(0,o.WA)("docusaurus.announcement.id"),u=()=>"true"===s.get(),d=e=>s.set(String(e)),p=r.createContext(null);function f(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&u()));(0,r.useEffect)((()=>{o(u())}),[]);const i=(0,r.useCallback)((()=>{d(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=c.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;c.set(t),r&&d(!1),!r&&u()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return r.createElement(p.Provider,{value:n},t)}function m(){const e=(0,r.useContext)(p);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>h,S:()=>g});var r=n(7294),a=n(412),o=n(902),i=n(12),l=n(6668);const s=r.createContext(void 0),c="theme",u=(0,i.WA)(c),d={light:"light",dark:"dark"},p=e=>e===d.dark?d.dark:d.light,f=e=>a.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e),m=e=>{u.set(p(e))};function g(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[a,o]=(0,r.useState)(f(e));(0,r.useEffect)((()=>{t&&u.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(o(t),a&&m(t)):(o(n?window.matchMedia("(prefers-color-scheme: dark)").matches?d.dark:d.light:e),u.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",p(a))}),[a]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==c)return;const t=u.get();null!==t&&i(p(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===d.dark},setLightTheme(){i(d.light)},setDarkTheme(){i(d.dark)}})),[a,i])}();return r.createElement(s.Provider,{value:n},t)}function h(){const e=(0,r.useContext)(s);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>b,L5:()=>h,Oh:()=>v});var r=n(7294),a=n(143),o=n(9935),i=n(6668),l=n(2802),s=n(902),c=n(12);const u=e=>"docs-preferred-version-"+e,d={save:(e,t,n)=>{(0,c.WA)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function m(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function g(e){let{children:t}=e;const n=m();return r.createElement(f.Provider,{value:n},t)}function h(e){let{children:t}=e;return l.cE?r.createElement(g,null,t):r.createElement(r.Fragment,null,t)}function y(){const e=(0,r.useContext)(f);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function b(e){var t;void 0===e&&(e=o.m);const n=(0,a.zh)(e),[i,l]=y(),{preferredVersionName:s}=i[e];return{preferredVersion:null!=(t=n.versions.find((e=>e.name===s)))?t:null,savePreferredVersionName:(0,r.useCallback)((t=>{l.savePreferredVersion(e,t)}),[l,e])}}function v(){const e=(0,a._r)(),[t]=y();function n(n){var r;const a=e[n],{preferredVersionName:o}=t[n];return null!=(r=a.versions.find((e=>e.name===o)))?r:null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>s,b:()=>l});var r=n(7294),a=n(902);const o=Symbol("EmptyContext"),i=r.createContext(o);function l(e){let{children:t,name:n,items:a}=e;const o=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return r.createElement(i.Provider,{value:o},t)}function s(){const e=(0,r.useContext)(i);if(e===o)throw new a.i6("DocsSidebarProvider");return e}},3163:(e,t,n)=>{"use strict";n.d(t,{M:()=>d,e:()=>p});var r=n(7294),a=n(3102),o=n(7524),i=n(1980),l=n(6668),s=n(902);const c=r.createContext(void 0);function u(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,l.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[s,c]=(0,r.useState)(!1);(0,i.Rb)((()=>{if(s)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:s})),[e,n,u,s])}function d(e){let{children:t}=e;const n=u();return r.createElement(c.Provider,{value:n},t)}function p(){const e=r.useContext(c);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>s,n2:()=>i});var r=n(7294),a=n(902);const o=r.createContext(null);function i(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return r.createElement(o.Provider,{value:n},t)}function l(){const e=(0,r.useContext)(o);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function s(e){let{component:t,props:n}=e;const i=(0,r.useContext)(o);if(!i)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,l]=i,s=(0,a.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(7294);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},6177:(e,t,n)=>{"use strict";n.d(t,{K:()=>l,M:()=>s});var r=n(7294),a=n(2263),o=n(1980);const i="q";function l(){return(0,o.Nc)(i)}function s(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>""+e+n+"?"+i+"="+encodeURIComponent(t)),[e,n])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>c});var r=n(7294),a=n(412);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(){return a.Z.canUseDOM?window.innerWidth>i?o.desktop:o.mobile:o.ssr}const s=!1;function c(){const[e,t]=(0,r.useState)((()=>s?"ssr":l()));return(0,r.useEffect)((()=>{function e(){t(l())}const n=s?window.setTimeout(e,1e3):void 0;return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearTimeout(n)}}),[]),e}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:e=>"theme-admonition-"+e},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>"theme-doc-sidebar-item-category-level-"+e,docSidebarItemLinkLevel:e=>"theme-doc-sidebar-item-link-level-"+e},blog:{}}},2802:(e,t,n)=>{"use strict";n.d(t,{Wl:()=>p,_F:()=>g,cE:()=>d,hI:()=>k,lO:()=>b,vY:()=>w,oz:()=>v,s1:()=>y});var r=n(7294),a=n(6550),o=n(8790),i=n(143),l=n(373),s=n(1116);function c(e){return Array.from(new Set(e))}var u=n(8596);const d=!!i._r;function p(e){if(e.href)return e.href;for(const t of e.items){if("link"===t.type)return t.href;if("category"===t.type){const e=p(t);if(e)return e}}}const f=(e,t)=>void 0!==e&&(0,u.Mg)(e,t),m=(e,t)=>e.some((e=>g(e,t)));function g(e,t){return"link"===e.type?f(e.href,t):"category"===e.type&&(f(e.href,t)||m(e.items,t))}function h(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,u.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,u.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function y(){var e;const t=(0,s.V)(),{pathname:n}=(0,a.TH)();return!1!==(null==(e=(0,i.gA)())?void 0:e.pluginData.breadcrumbs)&&t?h({sidebarItems:t.items,pathname:n}):null}function b(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)((()=>c([t,n,a].filter(Boolean))),[t,n,a])}function v(e,t){const n=b(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error("Can't find any sidebar with id \""+e+'" in version'+(n.length>1?"s":"")+" "+n.map((e=>e.name)).join(", ")+'".\nAvailable sidebar ids are:\n- '+Object.keys(t).join("\n- "));return r[1]}),[e,n])}function w(e,t){const n=b(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error("Couldn't find any doc with id \""+e+'" in version'+(n.length>1?"s":"")+' "'+n.map((e=>e.name)).join(", ")+'".\nAvailable doc ids are:\n- '+c(t.map((e=>e.id))).join("\n- "))}return r}),[e,n])}function k(e){let{route:t,versionMetadata:n}=e;const r=(0,a.TH)(),i=t.routes,l=i.find((e=>(0,a.LX)(r.pathname,e)));if(!l)return null;const s=l.sidebar,c=s?n.docsSidebars[s]:void 0;return{docElement:(0,o.H)(i),sidebarName:s,sidebarItems:c}}},2128:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(2263);function a(e){const{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return null!=e&&e.trim().length?e.trim()+" "+a+" "+n:n}},1980:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>c,Rb:()=>l});var r=n(7294),a=n(6550),o=n(1688),i=n(902);function l(e){!function(e){const t=(0,a.k6)(),n=(0,i.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){return function(e){const t=(0,a.k6)();return(0,o.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function c(e){var t;const n=null!=(t=s(e))?t:"",o=function(){const e=(0,a.k6)();return(0,r.useCallback)(((t,n,r)=>{const a=new URLSearchParams(e.location.search);n?a.set(t,n):a.delete(t),(null!=r&&r.push?e.push:e.replace)({search:a.toString()})}),[e])}();return[n,(0,r.useCallback)(((t,n)=>{o(e,t,n)}),[o,e])]}},833:(e,t,n)=>{"use strict";n.d(t,{FG:()=>p,d:()=>u,VC:()=>f});var r=n(7294),a=n(6010),o=n(5742),i=n(226);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(4996),c=n(2128);function u(e){let{title:t,description:n,keywords:a,image:i,children:l}=e;const u=(0,c.p)(t),{withBaseUrl:d}=(0,s.C)(),p=i?d(i,{absolute:!0}):void 0;return r.createElement(o.Z,null,t&&r.createElement("title",null,u),t&&r.createElement("meta",{property:"og:title",content:u}),n&&r.createElement("meta",{name:"description",content:n}),n&&r.createElement("meta",{property:"og:description",content:n}),a&&r.createElement("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),p&&r.createElement("meta",{property:"og:image",content:p}),p&&r.createElement("meta",{name:"twitter:image",content:p}),l)}const d=r.createContext(void 0);function p(e){let{className:t,children:n}=e;const i=r.useContext(d),l=(0,a.Z)(i,t);return r.createElement(d.Provider,{value:l},r.createElement(o.Z,null,r.createElement("html",{className:l})),n)}function f(e){let{children:t}=e;const n=l(),o="plugin-"+n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"");const i="plugin-id-"+n.plugin.id;return r.createElement(p,{className:(0,a.Z)(o,i)},t)}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>i,Qc:()=>c,Ql:()=>s,i6:()=>l,zX:()=>o});var r=n(7294);const a=n(412).Z.canUseDOM?r.useLayoutEffect:r.useEffect;function o(e){const t=(0,r.useRef)(e);return a((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,r.useRef)();return a((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){var n,r,a,o;super(),this.name="ReactContextError",this.message="Hook "+(null!=(n=null==(r=this.stack)||null==(a=r.split("\n")[1])||null==(o=a.match(/at (?:\w+\.)?(?\w+)/))?void 0:o.groups.name)?n:"")+" is called outside the <"+e+">. "+(null!=t?t:"")}}function s(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function c(e){return t=>{let{children:n}=t;return r.createElement(r.Fragment,null,e.reduceRight(((e,t)=>r.createElement(t,null,e)),n))}}},8022:(e,t,n)=>{"use strict";function r(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>r})},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(7294),a=n(723),o=n(2263);function i(e,t){const n=e=>{var t;return null==(t=!e||e.endsWith("/")?e:e+"/")?void 0:t.toLowerCase()};return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>{var t;return null!=(t=e.routes)?t:[]})))}(n)}({routes:a.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>p,OC:()=>s,RF:()=>d});var r=n(7294),a=n(412),o=n(2389),i=n(902);const l=r.createContext(void 0);function s(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return r.createElement(l.Provider,{value:n},t)}function c(){const e=(0,r.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const u=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function d(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=c(),a=(0,r.useRef)(u()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=u();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function p(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>null==e.current?void 0:e.current()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>s,os:()=>l});var r=n(143),a=n(2263),o=n(373);const i="default";function l(e,t){return"docs-"+e+"-"+t}function s(){const{i18n:e}=(0,a.Z)(),t=(0,r._r)(),n=(0,r.WS)(),s=(0,o.Oh)();const c=[i,...Object.keys(t).map((function(e){var r;const a=(null==n?void 0:n.activePlugin.pluginId)===e?n.activeVersion:void 0,o=s[e],i=t[e].versions.find((e=>e.isLast));return l(e,(null!=(r=null!=a?a:o)?r:i).name)}))];return{locale:e.currentLocale,tags:c}}},12:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(7294),n(1688);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function o(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error('Illegal storage API usage for storage key "'+e+'".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.')}return{get:t,set:t,del:t,listen:t}}(e);const n=o(null==t?void 0:t.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error("Docusaurus storage error, can't get key="+e,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error("Docusaurus storage error, can't set "+e+"="+t,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error("Docusaurus storage error, can't delete key="+e,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error("Docusaurus storage error, can't listen for changes of key="+e,r),()=>{}}}}}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>o});var r=n(2263),a=n(6550);function o(){const{siteConfig:{baseUrl:e,url:t},i18n:{defaultLocale:n,currentLocale:o}}=(0,r.Z)(),{pathname:i}=(0,a.TH)(),l=o===n?e:e.replace("/"+o+"/","/"),s=i.replace(e,"");return{createUrl:function(e){let{locale:r,fullyQualified:a}=e;return""+(a?t:"")+function(e){return e===n?""+l:""+l+e+"/"}(r)+s}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7294),a=n(6550),o=n(902);function i(e){const t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){return(0,r.Z)().siteConfig.themeConfig}},6278:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){const{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},239:(e,t,n)=>{"use strict";n.d(t,{l:()=>l});var r=n(7294),a=n(8022),o=n(4996),i=n(6278);function l(){const{withBaseUrl:e}=(0,o.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,r.useCallback)((r=>{const o=new URL(r);if((0,a.F)(t,o.href))return r;const i=""+(o.pathname+o.hash);return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:e+"/"}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},4143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},8780:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="post-content";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(4143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},6010:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>w,q_:()=>T,ob:()=>f,PP:()=>A,Ep:()=>p});var r=n(7462);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var l=n(8776);function s(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,g(),w.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var l=s(t),g=s(n),h=0;h{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,i,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},2497:(e,t,n)=>{"use strict";n.r(t)},5904:(e,t,n)=>{"use strict";n.r(t)},2148:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),c=o.querySelector(r.barSelector),u=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(c,i(e,u,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),c=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},4779:e=>{e.exports=u,e.exports.parse=a,e.exports.compile=function(e,t){return o(a(e,t))},e.exports.tokensToFunction=o,e.exports.tokensToRegExp=c;var t="/",n="./",r=new RegExp(["(\\\\.)","(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?"].join("|"),"g");function a(e,a){for(var o,s=[],c=0,u=0,d="",p=a&&a.delimiter||t,f=a&&a.delimiters||n,m=!1;null!==(o=r.exec(e));){var g=o[0],h=o[1],y=o.index;if(d+=e.slice(u,y),u=y+g.length,h)d+=h[1],m=!0;else{var b="",v=e[u],w=o[2],k=o[3],S=o[4],E=o[5];if(!m&&d.length){var x=d.length-1;f.indexOf(d[x])>-1&&(b=d[x],d=d.slice(0,x))}d&&(s.push(d),d="",m=!1);var C=""!==b&&void 0!==v&&v!==b,T="+"===E||"*"===E,_="?"===E||"*"===E,A=b||p,L=k||S;s.push({name:w||c++,prefix:b,delimiter:A,optional:_,repeat:T,partial:C,pattern:L?l(L):"[^"+i(A)+"]+?"})}}return(d||u-1;else{var h=i(g.prefix),y=g.repeat?"(?:"+g.pattern+")(?:"+h+"(?:"+g.pattern+"))*":g.pattern;r&&r.push(g),g.optional?g.partial?p+=h+"("+y+")?":p+="(?:"+h+"("+y+"))?":p+=h+"("+y+")"}}return l?(o||(p+="(?:"+c+")?"),p+="$"===d?"$":"(?="+d+")"):(o||(p+="(?:"+c+"(?="+d+"))?"),f||(p+="(?="+c+"|"+d+")")),new RegExp("^"+p,s(a))}function u(e,t,n){return e instanceof RegExp?function(e,t){if(!t)return e;var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r{"use strict";n.d(t,{Z:()=>o});var r=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);E+=S.value.length,S=S.next){var x=S.value;if(t.length>e.length)return;if(!(x instanceof a)){var C,T=1;if(b){if(!(C=o(k,E,e,y))||C.index>=e.length)break;var _=C.index,A=C.index+C[0].length,L=E;for(L+=S.value.length;_>=L;)L+=(S=S.next).value.length;if(E=L-=S.value.length,S.value instanceof a)continue;for(var R=S;R!==t.tail&&(Ld.reach&&(d.reach=I);var D=S.prev;if(P&&(D=s(t,D,P),E+=P.length),c(t,D,T),S=s(t,D,new a(p,h?r.tokenize(N,h):N,v,N)),O&&s(t,S,O),T>1){var M={cause:p+","+m,reach:I};i(e,t,n,S.prev,E,M),d&&M.reach>d.reach&&(d.reach=M.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function c(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}(),a=r;r.default=r,a.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.languages.markup.doctype.inside["internal-subset"].inside=a.languages.markup,a.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(a.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(a.languages.markup.tag,"addAttribute",{value:function(e,t){a.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:a.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.xml=a.languages.extend("markup",{}),a.languages.ssml=a.languages.xml,a.languages.atom=a.languages.xml,a.languages.rss=a.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=r.variable[1].inside,i=0;i]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},a.languages.c=a.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),a.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),a.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},a.languages.c.string],char:a.languages.c.char,comment:a.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:a.languages.c}}}}),a.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete a.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(a),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(a),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var r={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},a={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:r,number:a,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:r,number:a})}(a),a.languages.javascript=a.languages.extend("clike",{"class-name":[a.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),a.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,a.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:a.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:a.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:a.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:a.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:a.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),a.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),a.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),a.languages.markup&&(a.languages.markup.tag.addInlined("script","javascript"),a.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),a.languages.js=a.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(a),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(a),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(a),a.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:a.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},a.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var l=p(/^\{$/,/^\}$/);if(-1===l)continue;for(var s=n;s=0&&f(c,"variable-input")}}}}function u(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function s(t,n,r){var a={code:t,grammar:n,language:r};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(a.code,a.grammar),e.hooks.run("after-tokenize",a),a.tokens}function c(t){var n={};n["interpolation-punctuation"]=a;var o=e.tokenize(t,n);if(3===o.length){var i=[1,1];i.push.apply(i,s(o[1],e.languages.javascript,"javascript")),o.splice.apply(o,i)}return new e.Token("interpolation",o,r.alias,t)}function u(t,n,r){var a=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),i=0,u={},d=s(a.map((function(e){if("string"==typeof e)return e;for(var n,a=e.content;-1!==t.indexOf(n=l(i++,r)););return u[n]=a,n})).join(""),n,r),p=Object.keys(u);return i=0,function e(t){for(var n=0;n=p.length)return;var r=t[n];if("string"==typeof r||"string"==typeof r.content){var a=p[i],o="string"==typeof r?r:r.content,l=o.indexOf(a);if(-1!==l){++i;var s=o.substring(0,l),d=c(u[a]),f=o.substring(l+a.length),m=[];if(s&&m.push(s),m.push(d),f){var g=[f];e(g),m.push.apply(m,g)}"string"==typeof r?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):r.content=m}}else{var h=r.content;Array.isArray(h)?e(h):e([h])}}}(d),new e.Token(r,d,"language-"+r,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(a),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""},l=function(t){for(var n=[],r=0;r0&&n[n.length-1].tagName===i(a.content[0].content[1])&&n.pop():"/>"===a.content[a.content.length-1].content||n.push({tagName:i(a.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:o=!0),(o||"string"==typeof a)&&n.length>0&&0===n[n.length-1].openedBraces){var s=i(a);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(s=i(t[r-1])+s,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",s,null,s)}a.content&&"string"!=typeof a.content&&l(a.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||l(e.tokens)}))}(a),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],a=[];/^\w+$/.test(n)||a.push(/\w+/.exec(n)[0]),"diff"===n&&a.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:a,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(a),a.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},a.languages.go=a.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),a.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete a.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),m=p.indexOf(f);if(m>-1){++a;var g=p.substring(0,m),h=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),y=p.substring(m+f.length),b=[];g&&b.push.apply(b,i([g])),b.push(h),y&&b.push.apply(b,i([y])),"string"==typeof c?l.splice.apply(l,[s,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(a),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(a),a.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},a.languages.webmanifest=a.languages.json,a.languages.less=a.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),a.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),a.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},a.languages.objectivec=a.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete a.languages.objectivec["class-name"],a.languages.objc=a.languages.objectivec,a.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},a.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},a.languages.python["string-interpolation"].inside.interpolation.inside.rest=a.languages.python,a.languages.py=a.languages.python,a.languages.reason=a.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),a.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete a.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(a),a.languages.scss=a.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),a.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),a.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),a.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),a.languages.scss.atrule.inside.rest=a.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},r={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};r.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:r}},r.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:r}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:r}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:r}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:r}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:r.interpolation}},rest:r}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:r.interpolation,comment:r.comment,punctuation:/[{},]/}},func:r.func,string:r.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:r.interpolation,punctuation:/[{}()\[\];:.]/}}(a),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(a),a.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const o=a},9901:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.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),a=n(9642),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.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),o.add(e)}))}i.silent=!1,e.exports=i},6500:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6500},9642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var l={},s=e[r];if(s){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,c),t(s.optional,c),t(s.modify,c)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(c),l=(l||[]).map(c);var u=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(s),m=u;a(m);){for(var g in p={},m){var h=s[g];t(h&&h.modify,(function(e){e in d&&(p[e]=!0)}))}for(var y in d)if(!(y in u))for(var b in f(y))if(b in u){p[y]=!0;break}for(var v in m=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function c(e){if(e in l)return l[e];s[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var u in n)c(u);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(3840);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n