diff --git a/docs/modules/editable-layers/sidebar.json b/docs/modules/editable-layers/sidebar.json
index 9bbd7837..94968757 100644
--- a/docs/modules/editable-layers/sidebar.json
+++ b/docs/modules/editable-layers/sidebar.json
@@ -1,6 +1,6 @@
{
"type": "category",
- "label": "deck.gl-community/editable-layers",
+ "label": "@deck.gl-community/editable-layers",
"items": [
"modules/editable-layers/README",
"modules/editable-layers/developer-guide/get-started",
diff --git a/examples/editable-layers/advanced/src/example.tsx b/examples/editable-layers/advanced/src/example.tsx
index 5324b95e..07182ef2 100644
--- a/examples/editable-layers/advanced/src/example.tsx
+++ b/examples/editable-layers/advanced/src/example.tsx
@@ -104,7 +104,7 @@ const ALL_MODES: any = [
{label: 'Draw Point', mode: DrawPointMode},
{label: 'Draw LineString', mode: DrawLineStringMode},
{label: 'Draw Polygon', mode: DrawPolygonMode},
- {label: 'Draw 90° Polygon', mode: Draw90DegreePolygonMode},
+ // {label: 'Draw 90° Polygon', mode: Draw90DegreePolygonMode},
{label: 'Draw Polygon By Dragging', mode: DrawPolygonByDraggingMode},
{label: 'Draw Rectangle', mode: DrawRectangleMode},
{label: 'Draw Rectangle From Center', mode: DrawRectangleFromCenterMode},
diff --git a/examples/editable-layers/advanced/src/toolbox.tsx b/examples/editable-layers/advanced/src/toolbox.tsx
index df4e7e7e..c5e48df1 100644
--- a/examples/editable-layers/advanced/src/toolbox.tsx
+++ b/examples/editable-layers/advanced/src/toolbox.tsx
@@ -18,7 +18,7 @@ export const Toolbox = styled.div`
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
overflow: auto;
- z-index: 999;
+ z-index: 30;
`;
export const ToolboxRow = (props) =>
{props.children}
;
diff --git a/examples/editable-layers/editor/example.tsx b/examples/editable-layers/editor/example.tsx
index 881afd8a..22120fe5 100644
--- a/examples/editable-layers/editor/example.tsx
+++ b/examples/editable-layers/editor/example.tsx
@@ -84,6 +84,7 @@ export function Example() {
`
position: absolute;
display: flex;
flex-direction: column;
top: 10px;
- right: 10px;
+ ${(props) => (props.left ? 'left' : 'right')}: 10px;
`;
const Button = styled.button<{active?: boolean; kind?: string}>`
@@ -46,15 +46,16 @@ const SubToolsContainer = styled.div`
position: relative;
`;
-const SubTools = styled.div`
+const SubTools = styled.div<{left: boolean}>`
display: flex;
flex-direction: row-reverse;
position: absolute;
top: 0;
- right: 0;
+ ${(props) => (props.left ? 'left' : 'right')}: 0;
`;
export type Props = {
+ left?: boolean;
mode: any;
modeConfig: any;
geoJson: any;
@@ -102,7 +103,7 @@ function ModeButton({buttonConfig, mode, onClick}: any) {
);
}
-function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
+function ModeGroupButtons({left, modeGroup, mode, onSetMode}: any) {
const [expanded, setExpanded] = React.useState(false);
const {modes} = modeGroup;
@@ -111,7 +112,7 @@ function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
if (expanded) {
subTools = (
-
+
{modes.map((buttonConfig, i) => (
-
+
{MODE_GROUPS.map((modeGroup, i) => (
-
+
))}
{/* */}
@@ -176,7 +184,7 @@ export function Toolbox({
{showConfig && (
-
+
@@ -210,7 +218,7 @@ export function Toolbox({
{showClearConfirmation && (
-
+