mirror of
https://github.com/maputnik/editor.git
synced 2026-08-25 06:27:25 +00:00
Compare commits
3 Commits
3725f83b48
...
9f84f2989f
| Author | SHA1 | Date | |
|---|---|---|---|
 dependabot[bot]
|
9f84f2989f | ||
 Harel M
|
c3c6118df1 | ||
|
Harel M
|
9c85883b8a |
@@ -1,10 +1,14 @@
|
||||
## main
|
||||
|
||||
### ✨ Features and improvements
|
||||
- Added translation to "Links" in debug modal
|
||||
- _...Add new stuff here..._
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fixed an issue when clicking on a popup and then clicking on the map again
|
||||
- Fix modal close button possition
|
||||
- Fixed an issue with the generation of tranlations
|
||||
- _...Add new stuff here..._
|
||||
|
||||
## 3.0.0
|
||||
|
||||
@@ -29,4 +29,23 @@ describe("map", () => {
|
||||
then(get.searchControl()).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("popup", () => {
|
||||
beforeEach(() => {
|
||||
when.setStyle("rectangles");
|
||||
})
|
||||
it("should open on feature click", () => {
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
});
|
||||
|
||||
it("should open a second feature after closing popup", () => {
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
when.closePopup();
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldNotExist();
|
||||
when.clickCenter("maplibre:map");
|
||||
then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,6 +21,11 @@ export default class MaputnikCypressHelper {
|
||||
this.helper.when.wait(1);
|
||||
this.helper.get.elementByTestId(targetElement).realMouseUp();
|
||||
},
|
||||
clickCenter: (element: string) => {
|
||||
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
|
||||
this.helper.when.wait(200);
|
||||
this.helper.get.elementByTestId(element).realMouseUp();
|
||||
},
|
||||
...this.helper.when,
|
||||
};
|
||||
|
||||
|
||||
@@ -78,6 +78,13 @@ export class MaputnikDriver {
|
||||
fixture: "geojson-raster-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: baseUrl + "rectangles-style.json",
|
||||
response: {
|
||||
fixture: "rectangles-style.json",
|
||||
},
|
||||
});
|
||||
this.helper.given.interceptAndMockResponse({
|
||||
method: "GET",
|
||||
url: "*example.local/*",
|
||||
@@ -107,7 +114,7 @@ export class MaputnikDriver {
|
||||
.selectFile("cypress/fixtures/example-style.json", { force: true });
|
||||
},
|
||||
setStyle: (
|
||||
styleProperties: "geojson" | "raster" | "both" | "layer" | "",
|
||||
styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "",
|
||||
zoom?: number
|
||||
) => {
|
||||
const url = new URL(baseUrl);
|
||||
@@ -124,7 +131,11 @@ export class MaputnikDriver {
|
||||
case "layer":
|
||||
url.searchParams.set("style", baseUrl + "example-layer-style.json");
|
||||
break;
|
||||
case "rectangles":
|
||||
url.searchParams.set("style", baseUrl + "rectangles-style.json");
|
||||
break;
|
||||
}
|
||||
|
||||
if (zoom) {
|
||||
url.hash = `${zoom}/41.3805/2.1635`;
|
||||
}
|
||||
@@ -164,6 +175,10 @@ export class MaputnikDriver {
|
||||
.clear()
|
||||
.type(text, { parseSpecialCharSequences: false });
|
||||
},
|
||||
|
||||
closePopup: () => {
|
||||
this.helper.get.element(".maplibregl-popup-close-button").click();
|
||||
}
|
||||
};
|
||||
|
||||
public get = {
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
{
|
||||
"version": 8,
|
||||
"sources": {
|
||||
"rectangles": {
|
||||
"type": "geojson",
|
||||
"data": {
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
-130.78125,
|
||||
-33.13755119234615
|
||||
],
|
||||
[
|
||||
-130.78125,
|
||||
63.548552232036414
|
||||
],
|
||||
[
|
||||
15.468749999999998,
|
||||
63.548552232036414
|
||||
],
|
||||
[
|
||||
15.468749999999998,
|
||||
-33.13755119234615
|
||||
],
|
||||
[
|
||||
-130.78125,
|
||||
-33.13755119234615
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
-48.515625,
|
||||
-54.97761367069625
|
||||
],
|
||||
[
|
||||
-48.515625,
|
||||
36.5978891330702
|
||||
],
|
||||
[
|
||||
169.45312499999997,
|
||||
36.5978891330702
|
||||
],
|
||||
[
|
||||
169.45312499999997,
|
||||
-54.97761367069625
|
||||
],
|
||||
[
|
||||
-48.515625,
|
||||
-54.97761367069625
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"id": "background",
|
||||
"type": "background",
|
||||
"paint": {
|
||||
"background-color": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "rectangles",
|
||||
"type": "fill",
|
||||
"source": "rectangles",
|
||||
"paint": {
|
||||
"fill-opacity": 0.3
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Generated
+4
-4
@@ -92,7 +92,7 @@
|
||||
"@types/wicg-file-system-access": "^2023.10.6",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"cors": "^2.8.5",
|
||||
"cypress": "^15.1.0",
|
||||
"cypress": "^15.2.0",
|
||||
"cypress-plugin-tab": "^1.0.5",
|
||||
"eslint": "^9.35.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
@@ -4839,9 +4839,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/cypress": {
|
||||
"version": "15.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cypress/-/cypress-15.1.0.tgz",
|
||||
"integrity": "sha512-jS4EfyOa2W5KXCN02WBdmy4bpBBmLGe+INhZeCvzRksfJuzBSYp3rNg2G+hfOwPzM+wwMwOYCo/kEnH+5RsSjA==",
|
||||
"version": "15.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cypress/-/cypress-15.2.0.tgz",
|
||||
"integrity": "sha512-J4ehSzOSb58SkXyldCe9y/oZ8ep8Bl6+q9kDUjnkqNqc2ZKzDq5KSbhIc2lHFAFR5Jtj10oNqr9JRAZbr8DA8A==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
|
||||
+1
-1
@@ -124,7 +124,7 @@
|
||||
"@types/wicg-file-system-access": "^2023.10.6",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"cors": "^2.8.5",
|
||||
"cypress": "^15.1.0",
|
||||
"cypress": "^15.2.0",
|
||||
"cypress-plugin-tab": "^1.0.5",
|
||||
"eslint": "^9.35.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
|
||||
@@ -18,12 +18,12 @@ import AppToolbar, { MapState } from './AppToolbar'
|
||||
import AppLayout from './AppLayout'
|
||||
import MessagePanel from './AppMessagePanel'
|
||||
|
||||
import ModalSettings from './ModalSettings'
|
||||
import ModalExport from './ModalExport'
|
||||
import ModalSources from './ModalSources'
|
||||
import ModalOpen from './ModalOpen'
|
||||
import ModalShortcuts from './ModalShortcuts'
|
||||
import ModalDebug from './ModalDebug'
|
||||
import ModalSettings from './modals/ModalSettings'
|
||||
import ModalExport from './modals/ModalExport'
|
||||
import ModalSources from './modals/ModalSources'
|
||||
import ModalOpen from './modals/ModalOpen'
|
||||
import ModalShortcuts from './modals/ModalShortcuts'
|
||||
import ModalDebug from './modals/ModalDebug'
|
||||
|
||||
import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
|
||||
import style from '../libs/style'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
|
||||
import InputArray, { InputArrayProps } from './InputArray'
|
||||
import Fieldset from './Fieldset'
|
||||
|
||||
type FieldArrayProps = InputArrayProps & {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
|
||||
import InputDynamicArray, {InputDynamicArrayProps} from './InputDynamicArray'
|
||||
import Fieldset from './Fieldset'
|
||||
|
||||
type FieldDynamicArrayProps = InputDynamicArrayProps & {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Block from './Block'
|
||||
import InputSpec, { SpecFieldProps as InputFieldSpecProps } from './InputSpec'
|
||||
import InputSpec, { InputSpecProps } from './InputSpec'
|
||||
import Fieldset from './Fieldset'
|
||||
|
||||
|
||||
@@ -15,11 +15,11 @@ const typeMap = {
|
||||
padding: () => Block,
|
||||
};
|
||||
|
||||
export type SpecFieldProps = InputFieldSpecProps & {
|
||||
export type FieldSpecProps = InputSpecProps & {
|
||||
name?: string
|
||||
};
|
||||
|
||||
const SpecField: React.FC<SpecFieldProps> = (props) => {
|
||||
const FieldSpec: React.FC<FieldSpecProps> = (props) => {
|
||||
const fieldType = props.fieldSpec?.type;
|
||||
|
||||
const typeBlockFn = typeMap[fieldType!];
|
||||
@@ -40,4 +40,4 @@ const SpecField: React.FC<SpecFieldProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SpecField;
|
||||
export default FieldSpec;
|
||||
@@ -1,10 +0,0 @@
|
||||
import React, { type CSSProperties } from 'react'
|
||||
import { BsDiamondFill } from 'react-icons/bs';
|
||||
|
||||
const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
|
||||
return (
|
||||
<BsDiamondFill {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export default IconBackground;
|
||||
@@ -1,9 +0,0 @@
|
||||
import React, { type CSSProperties } from 'react'
|
||||
import {MdOutlineCircle} from 'react-icons/md'
|
||||
|
||||
const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
|
||||
return (
|
||||
<MdOutlineCircle {...props} />
|
||||
)
|
||||
}
|
||||
export default IconCircle;
|
||||
@@ -1,10 +0,0 @@
|
||||
import React, { type CSSProperties } from 'react'
|
||||
import { BsDiamond } from 'react-icons/bs';
|
||||
|
||||
|
||||
const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
|
||||
return (
|
||||
<BsDiamond {...props} />
|
||||
)
|
||||
}
|
||||
export default IconFill;
|
||||
@@ -1,12 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
import IconLine from './IconLine'
|
||||
import IconFill from './IconFill'
|
||||
import IconSymbol from './IconSymbol'
|
||||
import IconBackground from './IconBackground'
|
||||
import IconCircle from './IconCircle'
|
||||
import IconMissing from './IconMissing'
|
||||
import type {CSSProperties} from 'react'
|
||||
import { BsDiamond, BsDiamondFill, BsFonts } from 'react-icons/bs'
|
||||
import { MdOutlineCircle, MdPriorityHigh } from 'react-icons/md'
|
||||
import { IoAnalyticsOutline } from 'react-icons/io5'
|
||||
|
||||
type IconLayerProps = {
|
||||
type: string
|
||||
@@ -17,16 +14,16 @@ type IconLayerProps = {
|
||||
const IconLayer: React.FC<IconLayerProps> = (props) => {
|
||||
const iconProps = { style: props.style }
|
||||
switch(props.type) {
|
||||
case 'fill-extrusion': return <IconBackground {...iconProps} />
|
||||
case 'raster': return <IconFill {...iconProps} />
|
||||
case 'hillshade': return <IconFill {...iconProps} />
|
||||
case 'heatmap': return <IconFill {...iconProps} />
|
||||
case 'fill': return <IconFill {...iconProps} />
|
||||
case 'background': return <IconBackground {...iconProps} />
|
||||
case 'line': return <IconLine {...iconProps} />
|
||||
case 'symbol': return <IconSymbol {...iconProps} />
|
||||
case 'circle': return <IconCircle {...iconProps} />
|
||||
default: return <IconMissing {...iconProps} />
|
||||
case 'fill-extrusion': return <BsDiamondFill {...iconProps} />
|
||||
case 'raster': return <BsDiamond {...iconProps} />
|
||||
case 'hillshade': return <BsDiamond {...iconProps} />
|
||||
case 'heatmap': return <BsDiamond {...iconProps} />
|
||||
case 'fill': return <BsDiamond {...iconProps} />
|
||||
case 'background': return <BsDiamondFill {...iconProps} />
|
||||
case 'line': return <IoAnalyticsOutline {...iconProps} />
|
||||
case 'symbol': return <BsFonts {...iconProps} />
|
||||
case 'circle': return <MdOutlineCircle {...iconProps} />
|
||||
default: return <MdPriorityHigh {...iconProps} />
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import React, { type CSSProperties } from 'react'
|
||||
import { IoAnalyticsOutline } from 'react-icons/io5';
|
||||
|
||||
|
||||
const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
|
||||
return (
|
||||
<IoAnalyticsOutline {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export default IconLine;
|
||||
@@ -1,9 +0,0 @@
|
||||
import React, { type CSSProperties } from 'react'
|
||||
import {MdPriorityHigh} from 'react-icons/md'
|
||||
|
||||
const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
|
||||
return (
|
||||
<MdPriorityHigh {...props} />
|
||||
)
|
||||
}
|
||||
export default IconMissing;
|
||||
@@ -1,10 +0,0 @@
|
||||
import React, { type CSSProperties } from 'react'
|
||||
import { BsFonts } from 'react-icons/bs';
|
||||
|
||||
|
||||
const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
|
||||
return (
|
||||
<BsFonts {...props} />
|
||||
)
|
||||
}
|
||||
export default IconSymbol;
|
||||
@@ -2,7 +2,7 @@ import React from 'react'
|
||||
import InputString from './InputString'
|
||||
import InputNumber from './InputNumber'
|
||||
|
||||
export type FieldArrayProps = {
|
||||
export type InputArrayProps = {
|
||||
value: (string | number | undefined)[]
|
||||
type?: string
|
||||
length?: number
|
||||
@@ -12,18 +12,18 @@ export type FieldArrayProps = {
|
||||
label?: string
|
||||
};
|
||||
|
||||
type FieldArrayState = {
|
||||
type InputArrayState = {
|
||||
value: (string | number | undefined)[]
|
||||
initialPropsValue: unknown[]
|
||||
}
|
||||
|
||||
export default class FieldArray extends React.Component<FieldArrayProps, FieldArrayState> {
|
||||
export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
|
||||
static defaultProps = {
|
||||
value: [],
|
||||
default: [],
|
||||
}
|
||||
|
||||
constructor (props: FieldArrayProps) {
|
||||
constructor (props: InputArrayProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: this.props.value.slice(0),
|
||||
@@ -32,7 +32,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: Readonly<FieldArrayProps>, state: FieldArrayState) {
|
||||
static getDerivedStateFromProps(props: Readonly<InputArrayProps>, state: InputArrayState) {
|
||||
const value: any[] = [];
|
||||
const initialPropsValue = state.initialPropsValue.slice(0);
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import InputEnum from './InputEnum'
|
||||
import InputUrl from './InputUrl'
|
||||
|
||||
|
||||
export type FieldDynamicArrayProps = {
|
||||
export type InputDynamicArrayProps = {
|
||||
value?: (string | number | undefined)[]
|
||||
type?: 'url' | 'number' | 'enum' | 'string'
|
||||
default?: (string | number | undefined)[]
|
||||
@@ -24,9 +24,9 @@ export type FieldDynamicArrayProps = {
|
||||
label: string
|
||||
}
|
||||
|
||||
type FieldDynamicArrayInternalProps = FieldDynamicArrayProps & WithTranslation;
|
||||
type InputDynamicArrayInternalProps = InputDynamicArrayProps & WithTranslation;
|
||||
|
||||
class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInternalProps> {
|
||||
class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInternalProps> {
|
||||
changeValue(idx: number, newValue: string | number | undefined) {
|
||||
const values = this.values.slice(0)
|
||||
values[idx] = newValue
|
||||
@@ -131,8 +131,8 @@ class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInterna
|
||||
}
|
||||
}
|
||||
|
||||
const FieldDynamicArray = withTranslation()(FieldDynamicArrayInternal);
|
||||
export default FieldDynamicArray;
|
||||
const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
|
||||
export default InputDynamicArray;
|
||||
|
||||
type DeleteValueInputButtonProps = {
|
||||
onClick?(...args: unknown[]): unknown
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import InputAutocomplete from './InputAutocomplete'
|
||||
|
||||
export type FieldFontProps = {
|
||||
export type InputFontProps = {
|
||||
name: string
|
||||
value?: string[]
|
||||
default?: string[]
|
||||
@@ -11,7 +11,7 @@ export type FieldFontProps = {
|
||||
'aria-label'?: string
|
||||
};
|
||||
|
||||
export default class FieldFont extends React.Component<FieldFontProps> {
|
||||
export default class InputFont extends React.Component<InputFontProps> {
|
||||
static defaultProps = {
|
||||
fonts: []
|
||||
}
|
||||
|
||||
@@ -4,16 +4,16 @@ import InputColor, { InputColorProps } from './InputColor'
|
||||
import InputNumber, { InputNumberProps } from './InputNumber'
|
||||
import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
|
||||
import InputString, { InputStringProps } from './InputString'
|
||||
import InputArray, { FieldArrayProps } from './InputArray'
|
||||
import InputDynamicArray, { FieldDynamicArrayProps } from './InputDynamicArray'
|
||||
import InputFont, { FieldFontProps } from './InputFont'
|
||||
import InputArray, { InputArrayProps } from './InputArray'
|
||||
import InputDynamicArray, { InputDynamicArrayProps } from './InputDynamicArray'
|
||||
import InputFont, { InputFontProps } from './InputFont'
|
||||
import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
|
||||
import InputEnum, { InputEnumProps } from './InputEnum'
|
||||
import capitalize from 'lodash.capitalize'
|
||||
|
||||
const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
|
||||
|
||||
export type SpecFieldProps = {
|
||||
export type InputSpecProps = {
|
||||
onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
|
||||
fieldName?: string
|
||||
fieldSpec?: {
|
||||
@@ -37,7 +37,7 @@ export type SpecFieldProps = {
|
||||
/** Display any field from the Maplibre GL style spec and
|
||||
* choose the correct field component based on the @{fieldSpec}
|
||||
* to display @{value}. */
|
||||
export default class SpecField extends React.Component<SpecFieldProps> {
|
||||
export default class InputSpec extends React.Component<InputSpecProps> {
|
||||
|
||||
childNodes() {
|
||||
const commonProps = {
|
||||
@@ -96,21 +96,21 @@ export default class SpecField extends React.Component<SpecFieldProps> {
|
||||
case 'array':
|
||||
if(this.props.fieldName === 'text-font') {
|
||||
return <InputFont
|
||||
{...commonProps as FieldFontProps}
|
||||
{...commonProps as InputFontProps}
|
||||
fonts={this.props.fieldSpec.values}
|
||||
/>
|
||||
} else {
|
||||
if (this.props.fieldSpec.length) {
|
||||
return <InputArray
|
||||
{...commonProps as FieldArrayProps}
|
||||
{...commonProps as InputArrayProps}
|
||||
type={this.props.fieldSpec.value}
|
||||
length={this.props.fieldSpec.length}
|
||||
/>
|
||||
} else {
|
||||
return <InputDynamicArray
|
||||
{...commonProps as FieldDynamicArrayProps}
|
||||
{...commonProps as InputDynamicArrayProps}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
|
||||
type={this.props.fieldSpec.value as InputDynamicArrayProps['type']}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,18 +68,18 @@ export type FieldUrlProps = {
|
||||
className?: string
|
||||
};
|
||||
|
||||
type FieldUrlInternalProps = FieldUrlProps & WithTranslation;
|
||||
type InputUrlInternalProps = FieldUrlProps & WithTranslation;
|
||||
|
||||
type FieldUrlState = {
|
||||
type InputUrlState = {
|
||||
error?: React.ReactNode
|
||||
}
|
||||
|
||||
class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlState> {
|
||||
class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlState> {
|
||||
static defaultProps = {
|
||||
onInput: () => {},
|
||||
}
|
||||
|
||||
constructor (props: FieldUrlInternalProps) {
|
||||
constructor (props: InputUrlInternalProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
error: validate(props.value, props.t),
|
||||
@@ -115,5 +115,5 @@ class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlSt
|
||||
}
|
||||
}
|
||||
|
||||
const FieldUrl = withTranslation()(FieldUrlInternal);
|
||||
export default FieldUrl;
|
||||
const InputUrl = withTranslation()(InputUrlInternal);
|
||||
export default InputUrl;
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
|
||||
import LayerListGroup from './LayerListGroup'
|
||||
import LayerListItem from './LayerListItem'
|
||||
import ModalAdd from './ModalAdd'
|
||||
import ModalAdd from './modals/ModalAdd'
|
||||
|
||||
import type {LayerSpecification, SourceSpecification} from 'maplibre-gl';
|
||||
import generateUniqueId from '../libs/document-uid';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, {type JSX} from 'react'
|
||||
import React from 'react'
|
||||
import {createRoot} from 'react-dom/client'
|
||||
import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
|
||||
import MaplibreInspect from '@maplibre/maplibre-gl-inspect'
|
||||
@@ -17,17 +17,6 @@ import { withTranslation, WithTranslation } from 'react-i18next'
|
||||
import i18next from 'i18next'
|
||||
import { Protocol } from "pmtiles";
|
||||
|
||||
function renderPopup(
|
||||
popupElement: JSX.Element,
|
||||
mountNode: HTMLElement,
|
||||
popup: MapLibreGl.Popup
|
||||
): HTMLElement {
|
||||
const root = createRoot(mountNode);
|
||||
popup.once('close', () => root.unmount());
|
||||
root.render(popupElement);
|
||||
return mountNode as HTMLElement;
|
||||
}
|
||||
|
||||
function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[], highlightedLayer?: HighlightedLayer) {
|
||||
const backgroundLayer = {
|
||||
"id": "background",
|
||||
@@ -179,6 +168,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
map.addControl(nav, 'top-right');
|
||||
|
||||
const tmpNode = document.createElement('div');
|
||||
const root = createRoot(tmpNode);
|
||||
|
||||
const inspectPopup = new MapLibreGl.Popup({
|
||||
closeOnClick: false
|
||||
@@ -197,21 +187,19 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
|
||||
buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
|
||||
renderPopup: (features: InspectFeature[]) => {
|
||||
if(this.props.inspectModeEnabled) {
|
||||
return renderPopup(
|
||||
<MapMaplibreGlFeaturePropertyPopup features={features} />,
|
||||
tmpNode,
|
||||
inspectPopup
|
||||
);
|
||||
inspectPopup.once('open', () => {
|
||||
root.render(<MapMaplibreGlFeaturePropertyPopup features={features} />);
|
||||
});
|
||||
return tmpNode;
|
||||
} else {
|
||||
return renderPopup(
|
||||
<MapMaplibreGlLayerPopup
|
||||
inspectPopup.once('open', () => {
|
||||
root.render(<MapMaplibreGlLayerPopup
|
||||
features={features}
|
||||
onLayerSelect={this.onLayerSelectById}
|
||||
zoom={this.state.zoom}
|
||||
/>,
|
||||
tmpNode,
|
||||
inspectPopup
|
||||
);
|
||||
/>,);
|
||||
});
|
||||
return tmpNode;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -66,7 +66,7 @@ type FeaturePropertyPopupProps = {
|
||||
class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
|
||||
render() {
|
||||
const features = removeDuplicatedFeatures(this.props.features)
|
||||
return <div className="maputnik-feature-property-popup">
|
||||
return <div className="maputnik-feature-property-popup" dir="ltr" data-wd-key="feature-property-popup">
|
||||
<table className="maputnik-popup-table">
|
||||
<tbody>
|
||||
{features.map(renderFeature)}
|
||||
|
||||
@@ -104,7 +104,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
|
||||
</div>
|
||||
})
|
||||
|
||||
return <div className="maputnik-feature-layer-popup">
|
||||
return <div className="maputnik-feature-layer-popup" data-wd-key="feature-layer-popup" dir="ltr">
|
||||
{items}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React from 'react'
|
||||
|
||||
import SpecField, {SpecFieldProps} from './SpecField'
|
||||
import FieldSpec, {FieldSpecProps} from './FieldSpec'
|
||||
import FunctionButtons from './_FunctionButtons'
|
||||
|
||||
import labelFromFieldName from '../libs/label-from-field-name'
|
||||
|
||||
|
||||
type SpecPropertyProps = SpecFieldProps & {
|
||||
type SpecPropertyProps = FieldSpecProps & {
|
||||
onZoomClick(...args: unknown[]): unknown
|
||||
onDataClick(...args: unknown[]): unknown
|
||||
fieldName?: string
|
||||
@@ -35,7 +35,7 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
|
||||
|
||||
const error = errors![fieldType+"."+fieldName as any] as any;
|
||||
|
||||
return <SpecField
|
||||
return <FieldSpec
|
||||
{...this.props}
|
||||
error={error}
|
||||
fieldSpec={this.props.fieldSpec}
|
||||
|
||||
@@ -10,7 +10,6 @@ type ModalInternalProps = PropsWithChildren & {
|
||||
title: string
|
||||
onOpenToggle(value: boolean): unknown
|
||||
underlayClickExits?: boolean
|
||||
underlayProps?: any
|
||||
className?: string
|
||||
} & WithTranslation;
|
||||
|
||||
@@ -37,18 +36,17 @@ class ModalInternal extends React.Component<ModalInternalProps> {
|
||||
return <AriaModal
|
||||
titleText={this.props.title}
|
||||
underlayClickExits={this.props.underlayClickExits}
|
||||
// @ts-ignore
|
||||
underlayProps={this.props.underlayProps}
|
||||
data-wd-key={this.props["data-wd-key"]}
|
||||
verticallyCenter={true}
|
||||
onExit={this.onClose}
|
||||
dialogClass='maputnik-modal-container'
|
||||
>
|
||||
<div className={classnames("maputnik-modal", this.props.className)}
|
||||
data-wd-key={this.props["data-wd-key"]}
|
||||
>
|
||||
<header className="maputnik-modal-header">
|
||||
<h1 className="maputnik-modal-header-title">{this.props.title}</h1>
|
||||
<span className="maputnik-modal-header-space"></span>
|
||||
<span className="maputnik-space"></span>
|
||||
<button className="maputnik-modal-header-toggle"
|
||||
title={t("Close modal")}
|
||||
onClick={this.onClose}
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import Modal from './Modal'
|
||||
import FieldType from './FieldType'
|
||||
import FieldId from './FieldId'
|
||||
import FieldSource from './FieldSource'
|
||||
import FieldSourceLayer from './FieldSourceLayer'
|
||||
import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { NON_SOURCE_LAYERS } from '../libs/non-source-layers'
|
||||
import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
|
||||
|
||||
import InputButton from '../InputButton'
|
||||
import Modal from './Modal'
|
||||
import FieldType from '../FieldType'
|
||||
import FieldId from '../FieldId'
|
||||
import FieldSource from '../FieldSource'
|
||||
import FieldSourceLayer from '../FieldSourceLayer'
|
||||
import { NON_SOURCE_LAYERS } from '../../libs/non-source-layers'
|
||||
|
||||
type ModalAddInternalProps = {
|
||||
layers: LayerSpecification[]
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
|
||||
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
|
||||
import Modal from './Modal'
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
|
||||
}
|
||||
</section>
|
||||
<section className="maputnik-modal-section">
|
||||
<h1>Links</h1>
|
||||
<h1>{t("Links")}</h1>
|
||||
<p>
|
||||
<Trans t={t}>
|
||||
<a
|
||||
@@ -71,7 +71,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
|
||||
href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
|
||||
>
|
||||
Open in OSM
|
||||
</a> — Opens the current view on openstreetmap.org
|
||||
</a>. Opens the current view on openstreetmap.org
|
||||
</Trans>
|
||||
</p>
|
||||
</section>
|
||||
@@ -6,12 +6,12 @@ import {format} from '@maplibre/maplibre-gl-style-spec'
|
||||
import {MdMap, MdSave} from 'react-icons/md'
|
||||
import {WithTranslation, withTranslation} from 'react-i18next';
|
||||
|
||||
import FieldString from './FieldString'
|
||||
import InputButton from './InputButton'
|
||||
import FieldString from '../FieldString'
|
||||
import InputButton from '../InputButton'
|
||||
import Modal from './Modal'
|
||||
import style from '../libs/style'
|
||||
import fieldSpecAdditional from '../libs/field-spec-additional'
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions'
|
||||
import style from '../../libs/style'
|
||||
import fieldSpecAdditional from '../../libs/field-spec-additional'
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions'
|
||||
|
||||
|
||||
const MAPLIBRE_GL_VERSION = version;
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
import InputButton from './InputButton'
|
||||
import Modal from './Modal'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
|
||||
import InputButton from '../InputButton'
|
||||
import Modal from './Modal'
|
||||
|
||||
|
||||
type ModalLoadingInternalProps = {
|
||||
isOpen: boolean
|
||||
@@ -14,21 +14,12 @@ type ModalLoadingInternalProps = {
|
||||
|
||||
|
||||
class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
|
||||
underlayOnClick(e: Event) {
|
||||
// This stops click events falling through to underlying modals.
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
render() {
|
||||
const t = this.props.t;
|
||||
return <Modal
|
||||
data-wd-key="modal:loading"
|
||||
isOpen={this.props.isOpen}
|
||||
underlayClickExits={false}
|
||||
underlayProps={{
|
||||
// @ts-ignore
|
||||
onClick: (e: Event) => underlayProps(e)
|
||||
}}
|
||||
title={this.props.title}
|
||||
onOpenToggle={() => this.props.onCancel()}
|
||||
>
|
||||
@@ -6,11 +6,11 @@ import { Trans, WithTranslation, withTranslation } from 'react-i18next';
|
||||
|
||||
import ModalLoading from './ModalLoading'
|
||||
import Modal from './Modal'
|
||||
import InputButton from './InputButton'
|
||||
import InputUrl from './InputUrl'
|
||||
import InputButton from '../InputButton'
|
||||
import InputUrl from '../InputUrl'
|
||||
|
||||
import style from '../libs/style'
|
||||
import publicStyles from '../config/styles.json'
|
||||
import style from '../../libs/style'
|
||||
import publicStyles from '../../config/styles.json'
|
||||
|
||||
type PublicStyleProps = {
|
||||
url: string
|
||||
@@ -3,16 +3,16 @@ import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
|
||||
import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
|
||||
import FieldArray from './FieldArray'
|
||||
import FieldNumber from './FieldNumber'
|
||||
import FieldString from './FieldString'
|
||||
import FieldUrl from './FieldUrl'
|
||||
import FieldSelect from './FieldSelect'
|
||||
import FieldEnum from './FieldEnum'
|
||||
import FieldColor from './FieldColor'
|
||||
import FieldArray from '../FieldArray'
|
||||
import FieldNumber from '../FieldNumber'
|
||||
import FieldString from '../FieldString'
|
||||
import FieldUrl from '../FieldUrl'
|
||||
import FieldSelect from '../FieldSelect'
|
||||
import FieldEnum from '../FieldEnum'
|
||||
import FieldColor from '../FieldColor'
|
||||
import Modal from './Modal'
|
||||
import fieldSpecAdditional from '../libs/field-spec-additional'
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions';
|
||||
import fieldSpecAdditional from '../../libs/field-spec-additional'
|
||||
import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions';
|
||||
|
||||
type ModalSettingsInternalProps = {
|
||||
mapStyle: StyleSpecificationWithId
|
||||
@@ -5,15 +5,15 @@ import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSou
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
|
||||
import Modal from './Modal'
|
||||
import InputButton from './InputButton'
|
||||
import FieldString from './FieldString'
|
||||
import FieldSelect from './FieldSelect'
|
||||
import InputButton from '../InputButton'
|
||||
import FieldString from '../FieldString'
|
||||
import FieldSelect from '../FieldSelect'
|
||||
import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
|
||||
|
||||
import style from '../libs/style'
|
||||
import { deleteSource, addSource, changeSource } from '../libs/source'
|
||||
import publicSources from '../config/tilesets.json'
|
||||
import { OnStyleChangedCallback, StyleSpecificationWithId } from '../libs/definitions';
|
||||
import style from '../../libs/style'
|
||||
import { deleteSource, addSource, changeSource } from '../../libs/source'
|
||||
import publicSources from '../../config/tilesets.json'
|
||||
import { OnStyleChangedCallback, StyleSpecificationWithId } from '../../libs/definitions';
|
||||
|
||||
|
||||
type PublicSourceProps = {
|
||||
+10
-8
@@ -1,16 +1,18 @@
|
||||
import React from 'react'
|
||||
import {latest} from '@maplibre/maplibre-gl-style-spec'
|
||||
import Block from './Block'
|
||||
import FieldUrl from './FieldUrl'
|
||||
import FieldNumber from './FieldNumber'
|
||||
import FieldSelect from './FieldSelect'
|
||||
import FieldDynamicArray from './FieldDynamicArray'
|
||||
import FieldArray from './FieldArray'
|
||||
import FieldJson from './FieldJson'
|
||||
import FieldCheckbox from './FieldCheckbox'
|
||||
import { WithTranslation, withTranslation } from 'react-i18next';
|
||||
import { TFunction } from 'i18next'
|
||||
|
||||
import Block from '../Block'
|
||||
import FieldUrl from '../FieldUrl'
|
||||
import FieldNumber from '../FieldNumber'
|
||||
import FieldSelect from '../FieldSelect'
|
||||
import FieldDynamicArray from '../FieldDynamicArray'
|
||||
import FieldArray from '../FieldArray'
|
||||
import FieldJson from '../FieldJson'
|
||||
import FieldCheckbox from '../FieldCheckbox'
|
||||
|
||||
|
||||
export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
|
||||
|
||||
type TileJSONSourceEditorProps = {
|
||||
@@ -89,6 +89,8 @@
|
||||
"Layer ID already exists": "Layer-ID existiert bereits",
|
||||
"Debug": "Debug",
|
||||
"Options": "Optionen",
|
||||
"Links": "Links",
|
||||
"<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>In OSM öffnen</0>. Öffnet die aktuelle Ansicht auf openstreetmap.org",
|
||||
"Save Style": "Stil Speichern",
|
||||
"Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.",
|
||||
"Save as": "Speichern unter",
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
"Layer ID already exists": "L'identifiant du calque existe déjà",
|
||||
"Debug": "Déboguer",
|
||||
"Options": "Options",
|
||||
"Links": "Liens",
|
||||
"<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>Ouvrir dans OSM</0>. Ouvre la vue actuelle sur openstreetmap.org",
|
||||
"Save Style": "Enregistrer le style",
|
||||
"Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.",
|
||||
"Save as": "Enregistrer sous",
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
"Layer ID already exists": "מזהה השכבה כבר קיים",
|
||||
"Debug": "דיבאג",
|
||||
"Options": "אפשרויות",
|
||||
"Links": "קישורים",
|
||||
"<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0>. פתיחה של התצוגה הנוכחית ב- openstreetmap.org",
|
||||
"Save Style": "שמירת הסטייל",
|
||||
"Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.",
|
||||
"Save as": "שמירה בשם",
|
||||
@@ -194,6 +196,5 @@
|
||||
"Public access token for LocationIQ services.": "Public access token for LocationIQ services.",
|
||||
"Style Renderer": "צייר הסטייל",
|
||||
"Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה",
|
||||
"Language": "שפה",
|
||||
"<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org"
|
||||
"Language": "שפה"
|
||||
}
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
"Layer ID already exists": "L'ID del layer esiste già",
|
||||
"Debug": "Debug",
|
||||
"Options": "Opzioni",
|
||||
"Links": "Collegamenti",
|
||||
"<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>Apri in OSM</0>. Apre la vista corrente su openstreetmap.org",
|
||||
"Save Style": "Opzioni stile",
|
||||
"Save the JSON style to your computer.": "Salva lo style JSON nel tuo computer.",
|
||||
"Save as": "Salva con nome",
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
"Layer ID already exists": "レイヤーIDは既に存在します",
|
||||
"Debug": "デバッグ",
|
||||
"Options": "設定",
|
||||
"Links": "リンク",
|
||||
"<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
|
||||
"Save Style": "スタイルを保存",
|
||||
"Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。",
|
||||
"Save as": "名前を付けて保存",
|
||||
@@ -195,6 +197,5 @@
|
||||
"Style Renderer": "スタイルレンダラ",
|
||||
"Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください",
|
||||
"Language": "言語",
|
||||
"<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
|
||||
"Layer options": "レイヤー設定"
|
||||
}
|
||||
|
||||
@@ -89,6 +89,8 @@
|
||||
"Layer ID already exists": "图层ID已存在",
|
||||
"Debug": "调试",
|
||||
"Options": "选项",
|
||||
"Links": "链接",
|
||||
"<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
|
||||
"Save Style": "保存样式",
|
||||
"Save the JSON style to your computer.": "将JSON样式保存到您的计算机。",
|
||||
"Save as": "另存为",
|
||||
@@ -195,6 +197,5 @@
|
||||
"Style Renderer": "样式渲染器",
|
||||
"Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。",
|
||||
"Language": "语言",
|
||||
"<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
|
||||
"Layer options": "图层选项"
|
||||
}
|
||||
|
||||
@@ -2,6 +2,15 @@
|
||||
@use "vars";
|
||||
|
||||
//MODAL
|
||||
|
||||
.maputnik-modal-container {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
[dir="rtl"] .maputnik-modal-container {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.maputnik-modal {
|
||||
min-width: 350px;
|
||||
max-width: 600px;
|
||||
@@ -74,10 +83,6 @@
|
||||
@include mixins.flex-column;
|
||||
}
|
||||
|
||||
.maputnik-modal-header-space {
|
||||
@extend .maputnik-space !optional; /* stylelint-disable-line */
|
||||
}
|
||||
|
||||
//OPEN MODAL
|
||||
.maputnik-upload-button {
|
||||
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
|
||||
|
||||
Reference in New Issue
Block a user