From 1205b738b7406827c89728ba505b90d27bc833a4 Mon Sep 17 00:00:00 2001 From: dqunbp Date: Thu, 17 Sep 2020 18:35:53 +0300 Subject: [PATCH] fix: move draw-styles to the constants --- example/package-lock.json | 31 +++-- src/draw-rectangle-styles.js | 4 +- src/lib/draw-themes.js | 232 +++++++++++++++++++++++++++++++++++ src/lib/index.js | 1 + 4 files changed, 258 insertions(+), 10 deletions(-) create mode 100644 src/lib/draw-themes.js diff --git a/example/package-lock.json b/example/package-lock.json index 94014d0..cac215c 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -1132,6 +1132,13 @@ "minimist": "1.2.0", "vfile": "^4.0.0", "vfile-reporter": "^5.1.1" + }, + "dependencies": { + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" + } } }, "@mapbox/mapbox-gl-draw": { @@ -2934,9 +2941,9 @@ "dev": true }, "elliptic": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", - "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz", + "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==", "dev": true, "requires": { "bn.js": "^4.4.0", @@ -3422,6 +3429,13 @@ "requires": { "get-stdin": "^6.0.0", "minimist": "1.2.0" + }, + "dependencies": { + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" + } } }, "get-caller-file": { @@ -8444,7 +8458,7 @@ "dependencies": { "get-stream": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" } } @@ -8776,7 +8790,7 @@ "dependencies": { "get-stream": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" } } @@ -13042,9 +13056,10 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "dev": true }, "mixin-deep": { "version": "1.3.2", diff --git a/src/draw-rectangle-styles.js b/src/draw-rectangle-styles.js index 5013ffa..fbfc5d0 100644 --- a/src/draw-rectangle-styles.js +++ b/src/draw-rectangle-styles.js @@ -1,4 +1,4 @@ -import defaultDrawThemes from "@mapbox/mapbox-gl-draw/src/lib/theme"; +import { drawThemes } from "./lib"; const ActivePolygonStyles = [ { @@ -37,7 +37,7 @@ const ActivePolygonStyles = [ ]; function overrideDefaultStyles(themes) { - return defaultDrawThemes + return drawThemes .filter((theme) => !themes.map(({ id }) => id).includes(theme.id)) .concat(themes); } diff --git a/src/lib/draw-themes.js b/src/lib/draw-themes.js new file mode 100644 index 0000000..b556bb2 --- /dev/null +++ b/src/lib/draw-themes.js @@ -0,0 +1,232 @@ +export const drawThemes = [ + { + id: "gl-draw-polygon-fill-inactive", + type: "fill", + filter: [ + "all", + ["==", "active", "false"], + ["==", "$type", "Polygon"], + ["!=", "mode", "static"], + ], + paint: { + "fill-color": "#3bb2d0", + "fill-outline-color": "#3bb2d0", + "fill-opacity": 0.1, + }, + }, + { + id: "gl-draw-polygon-fill-active", + type: "fill", + filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]], + paint: { + "fill-color": "#fbb03b", + "fill-outline-color": "#fbb03b", + "fill-opacity": 0.1, + }, + }, + { + id: "gl-draw-polygon-midpoint", + type: "circle", + filter: ["all", ["==", "$type", "Point"], ["==", "meta", "midpoint"]], + paint: { + "circle-radius": 3, + "circle-color": "#fbb03b", + }, + }, + { + id: "gl-draw-polygon-stroke-inactive", + type: "line", + filter: [ + "all", + ["==", "active", "false"], + ["==", "$type", "Polygon"], + ["!=", "mode", "static"], + ], + layout: { + "line-cap": "round", + "line-join": "round", + }, + paint: { + "line-color": "#3bb2d0", + "line-width": 2, + }, + }, + { + id: "gl-draw-polygon-stroke-active", + type: "line", + filter: ["all", ["==", "active", "true"], ["==", "$type", "Polygon"]], + layout: { + "line-cap": "round", + "line-join": "round", + }, + paint: { + "line-color": "#fbb03b", + "line-dasharray": [0.2, 2], + "line-width": 2, + }, + }, + { + id: "gl-draw-line-inactive", + type: "line", + filter: [ + "all", + ["==", "active", "false"], + ["==", "$type", "LineString"], + ["!=", "mode", "static"], + ], + layout: { + "line-cap": "round", + "line-join": "round", + }, + paint: { + "line-color": "#3bb2d0", + "line-width": 2, + }, + }, + { + id: "gl-draw-line-active", + type: "line", + filter: ["all", ["==", "$type", "LineString"], ["==", "active", "true"]], + layout: { + "line-cap": "round", + "line-join": "round", + }, + paint: { + "line-color": "#fbb03b", + "line-dasharray": [0.2, 2], + "line-width": 2, + }, + }, + { + id: "gl-draw-polygon-and-line-vertex-stroke-inactive", + type: "circle", + filter: [ + "all", + ["==", "meta", "vertex"], + ["==", "$type", "Point"], + ["!=", "mode", "static"], + ], + paint: { + "circle-radius": 5, + "circle-color": "#fff", + }, + }, + { + id: "gl-draw-polygon-and-line-vertex-inactive", + type: "circle", + filter: [ + "all", + ["==", "meta", "vertex"], + ["==", "$type", "Point"], + ["!=", "mode", "static"], + ], + paint: { + "circle-radius": 3, + "circle-color": "#fbb03b", + }, + }, + { + id: "gl-draw-point-point-stroke-inactive", + type: "circle", + filter: [ + "all", + ["==", "active", "false"], + ["==", "$type", "Point"], + ["==", "meta", "feature"], + ["!=", "mode", "static"], + ], + paint: { + "circle-radius": 5, + "circle-opacity": 1, + "circle-color": "#fff", + }, + }, + { + id: "gl-draw-point-inactive", + type: "circle", + filter: [ + "all", + ["==", "active", "false"], + ["==", "$type", "Point"], + ["==", "meta", "feature"], + ["!=", "mode", "static"], + ], + paint: { + "circle-radius": 3, + "circle-color": "#3bb2d0", + }, + }, + { + id: "gl-draw-point-stroke-active", + type: "circle", + filter: [ + "all", + ["==", "$type", "Point"], + ["==", "active", "true"], + ["!=", "meta", "midpoint"], + ], + paint: { + "circle-radius": 7, + "circle-color": "#fff", + }, + }, + { + id: "gl-draw-point-active", + type: "circle", + filter: [ + "all", + ["==", "$type", "Point"], + ["!=", "meta", "midpoint"], + ["==", "active", "true"], + ], + paint: { + "circle-radius": 5, + "circle-color": "#fbb03b", + }, + }, + { + id: "gl-draw-polygon-fill-static", + type: "fill", + filter: ["all", ["==", "mode", "static"], ["==", "$type", "Polygon"]], + paint: { + "fill-color": "#404040", + "fill-outline-color": "#404040", + "fill-opacity": 0.1, + }, + }, + { + id: "gl-draw-polygon-stroke-static", + type: "line", + filter: ["all", ["==", "mode", "static"], ["==", "$type", "Polygon"]], + layout: { + "line-cap": "round", + "line-join": "round", + }, + paint: { + "line-color": "#404040", + "line-width": 2, + }, + }, + { + id: "gl-draw-line-static", + type: "line", + filter: ["all", ["==", "mode", "static"], ["==", "$type", "LineString"]], + layout: { + "line-cap": "round", + "line-join": "round", + }, + paint: { + "line-color": "#404040", + "line-width": 2, + }, + }, + { + id: "gl-draw-point-static", + type: "circle", + filter: ["all", ["==", "mode", "static"], ["==", "$type", "Point"]], + paint: { + "circle-radius": 5, + "circle-color": "#404040", + }, + }, +]; diff --git a/src/lib/index.js b/src/lib/index.js index 6401f02..2df7323 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,3 +1,4 @@ export * from "./constants"; export * from "./common-selectors"; export * from "./create-vertex"; +export * from "./draw-themes";