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 && ( - +