From 7229a48297ed4a9d6338bded817a7589fc4f363e Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 21 Aug 2018 15:26:35 +0700 Subject: [PATCH] svg buttons (initial) removed styled-components gradient paths --- .babelrc | 1 + package-lock.json | 421 +++++++++++++++++++++++--- package.json | 15 +- src/components/Fills.jsx | 19 ++ src/components/Icon.jsx | 9 + src/components/panels/EditorPanel.jsx | 49 +++ src/constants/modes.js | 1 + src/containers/App.jsx | 37 +-- src/index.html | 2 +- src/index.js | 3 + src/modules/Editor.js | 7 +- src/modules/Map.js | 6 +- src/modules/Poly.js | 16 +- src/modules/Router.js | 12 +- src/modules/Shotter.js | 66 ++++ src/modules/Sticker.js | 6 +- src/modules/Stickers.js | 4 +- src/sprites/icon.svg | 38 +++ src/styles/controls.less | 35 +++ src/styles/map.less | 176 +++++++++++ src/utils/DomMarker.js | 4 +- webpack.config.js | 15 +- 22 files changed, 853 insertions(+), 89 deletions(-) create mode 100644 src/components/Fills.jsx create mode 100644 src/components/Icon.jsx create mode 100644 src/components/panels/EditorPanel.jsx create mode 100644 src/modules/Shotter.js create mode 100644 src/sprites/icon.svg create mode 100644 src/styles/controls.less create mode 100644 src/styles/map.less diff --git a/.babelrc b/.babelrc index 9a98b00..d66c782 100755 --- a/.babelrc +++ b/.babelrc @@ -2,6 +2,7 @@ "presets": ["env", "react","stage-2"], "plugins": [ "react-hot-loader/babel", + "lodash", ["transform-runtime", { "polyfill": false, "regenerator": true diff --git a/package-lock.json b/package-lock.json index a16af5d..0d2bfc6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -969,7 +969,6 @@ "version": "5.5.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", - "dev": true, "requires": { "co": "^4.6.0", "fast-deep-equal": "^1.0.0", @@ -1141,6 +1140,15 @@ "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, + "asn1": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", + "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", + "optional": true, + "requires": { + "safer-buffer": "~2.1.0" + } + }, "asn1.js": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz", @@ -1178,6 +1186,11 @@ } } }, + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" + }, "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", @@ -1208,6 +1221,12 @@ "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=", "dev": true }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", + "optional": true + }, "atob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz", @@ -1240,6 +1259,18 @@ } } }, + "aws-sign2": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", + "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=", + "optional": true + }, + "aws4": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", + "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", + "optional": true + }, "axios": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", @@ -1695,6 +1726,19 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-lodash": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz", + "integrity": "sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0-beta.49", + "@babel/types": "^7.0.0-beta.49", + "glob": "^7.1.1", + "lodash": "^4.17.10", + "require-package-name": "^2.0.1" + } + }, "babel-plugin-syntax-async-functions": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", @@ -2512,6 +2556,15 @@ "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", "dev": true }, + "bcrypt-pbkdf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", + "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", + "optional": true, + "requires": { + "tweetnacl": "^0.14.3" + } + }, "big.js": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", @@ -2978,6 +3031,12 @@ "integrity": "sha512-h04kV/lcuhItU1CZTJOxUEk/9R+1XeJqgc67E+XC8J9TjPM8kzVgOn27ZtRdDUo8O5F8U4QRCzDWJrVym3w3Cg==", "dev": true }, + "caseless": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", + "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", + "optional": true + }, "chalk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", @@ -3123,6 +3182,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz", @@ -3285,8 +3349,7 @@ "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", - "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", - "dev": true + "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=" }, "coa": { "version": "1.0.4", @@ -3365,6 +3428,14 @@ "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=", "dev": true }, + "combined-stream": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", + "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", + "requires": { + "delayed-stream": "~1.0.0" + } + }, "commander": { "version": "2.17.1", "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", @@ -3520,8 +3591,7 @@ "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" }, "create-ecdh": { "version": "4.0.3", @@ -3788,6 +3858,15 @@ "integrity": "sha1-7H6lDHhWTNNsnV7Bj2Yyn63ieCk=", "dev": true }, + "dashdash": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", + "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", + "optional": true, + "requires": { + "assert-plus": "^1.0.0" + } + }, "date-fns": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz", @@ -3933,6 +4012,11 @@ } } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -4137,6 +4221,16 @@ "stream-shift": "^1.0.0" } }, + "ecc-jsbn": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", + "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", + "optional": true, + "requires": { + "jsbn": "~0.1.0", + "safer-buffer": "^2.1.0" + } + }, "editions": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz", @@ -4244,7 +4338,6 @@ "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==", - "dev": true, "requires": { "prr": "~1.0.1" } @@ -4939,6 +5032,12 @@ } } }, + "extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "optional": true + }, "extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", @@ -5036,11 +5135,15 @@ } } }, + "extsprintf": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", + "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" + }, "fast-deep-equal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", - "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=", - "dev": true + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=" }, "fast-glob": { "version": "2.2.2", @@ -5059,8 +5162,7 @@ "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", - "dev": true + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fast-levenshtein": { "version": "2.0.6", @@ -5291,6 +5393,23 @@ "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=", "dev": true }, + "forever-agent": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", + "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", + "optional": true + }, + "form-data": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", + "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", + "optional": true, + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "1.0.6", + "mime-types": "^2.1.12" + } + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -5910,6 +6029,15 @@ "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=", "dev": true }, + "getpass": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", + "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", + "optional": true, + "requires": { + "assert-plus": "^1.0.0" + } + }, "gh-got": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/gh-got/-/gh-got-6.0.0.tgz", @@ -6169,8 +6297,7 @@ "graceful-fs": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", - "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", - "dev": true + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=" }, "grouped-queue": { "version": "0.3.3", @@ -6187,6 +6314,22 @@ "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=", "dev": true }, + "har-schema": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", + "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=", + "optional": true + }, + "har-validator": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.0.tgz", + "integrity": "sha512-+qnmNjI4OfH2ipQ9VQOw23bBd/ibtfbVdK2fYbY4acTDqKTW/YDp9McimZdDbG8iV9fZizUqQMD5xvriB146TA==", + "optional": true, + "requires": { + "ajv": "^5.3.0", + "har-schema": "^2.0.0" + } + }, "harmony-reflect": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.0.tgz", @@ -6536,6 +6679,17 @@ "micromatch": "^3.1.9" } }, + "http-signature": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", + "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=", + "optional": true, + "requires": { + "assert-plus": "^1.0.0", + "jsprim": "^1.2.2", + "sshpk": "^1.7.0" + } + }, "https-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", @@ -6625,6 +6779,12 @@ "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", "dev": true }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "optional": true + }, "import-local": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz", @@ -7106,6 +7266,12 @@ "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=", "dev": true }, + "is-typedarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", + "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", + "optional": true + }, "is-unc-path": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz", @@ -7169,6 +7335,12 @@ "whatwg-fetch": ">=0.10.0" } }, + "isstream": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", + "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", + "optional": true + }, "istextorbinary": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/istextorbinary/-/istextorbinary-2.2.1.tgz", @@ -7217,6 +7389,12 @@ "esprima": "^2.6.0" } }, + "jsbn": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", + "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", + "optional": true + }, "jscodeshift": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.5.1.tgz", @@ -7355,11 +7533,16 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-schema": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", + "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", + "optional": true + }, "json-schema-traverse": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", - "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", - "dev": true + "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=" }, "json-stable-stringify-without-jsonify": { "version": "1.0.1", @@ -7367,6 +7550,12 @@ "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", "dev": true }, + "json-stringify-safe": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", + "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", + "optional": true + }, "json3": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz", @@ -7379,6 +7568,18 @@ "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", "dev": true }, + "jsprim": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", + "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", + "optional": true, + "requires": { + "assert-plus": "1.0.0", + "extsprintf": "1.3.0", + "json-schema": "0.2.3", + "verror": "1.10.0" + } + }, "jsx-ast-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz", @@ -7429,15 +7630,62 @@ "integrity": "sha1-93dZekCoGic/KHtIn9D+XM1gyNA=" }, "leaflet-routing-machine": { - "version": "3.2.8", - "resolved": "https://registry.npmjs.org/leaflet-routing-machine/-/leaflet-routing-machine-3.2.8.tgz", - "integrity": "sha512-cJPN//kMu6J7L7M/apfjx3SEAt7TFSFGj285To4vLTnq4h9uPo5u6Rd8JdIipyBJXED/UvUVG7LlpguQ+G7gqA==", + "version": "github:muerwre/leaflet-routing-machine#4be3c24db31b7c2e9750f5894e538969e953a093", + "from": "github:muerwre/leaflet-routing-machine#no-osrm-text", "requires": { "@mapbox/corslite": "0.0.7", "@mapbox/polyline": "^0.2.0", "osrm-text-instructions": "^0.11.5" } }, + "less": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/less/-/less-3.8.1.tgz", + "integrity": "sha512-8HFGuWmL3FhQR0aH89escFNBQH/nEiYPP2ltDFdQw2chE28Yx2E3lhAIq9Y2saYwLSwa699s4dBVEfCY8Drf7Q==", + "requires": { + "clone": "^2.1.2", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "mime": "^1.4.1", + "mkdirp": "^0.5.0", + "promise": "^7.1.1", + "request": "^2.83.0", + "source-map": "~0.6.0" + }, + "dependencies": { + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true + } + } + }, + "less-loader": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz", + "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==", + "dev": true, + "requires": { + "clone": "^2.1.1", + "loader-utils": "^1.1.0", + "pify": "^3.0.0" + }, + "dependencies": { + "clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", + "dev": true + } + } + }, "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", @@ -7776,8 +8024,7 @@ "lodash": { "version": "4.17.10", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", - "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==", - "dev": true + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" }, "lodash.camelcase": { "version": "4.3.0", @@ -8237,20 +8484,17 @@ "mime": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", - "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==", - "dev": true + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" }, "mime-db": { "version": "1.35.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.35.0.tgz", - "integrity": "sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg==", - "dev": true + "integrity": "sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg==" }, "mime-types": { "version": "2.1.19", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.19.tgz", "integrity": "sha512-P1tKYHVSZ6uFo26mtnve4HQFE3koh1UWVkp8YUC+ESBHe945xWSoXuHHiGarDqcEZ+whpCDnlNw5LON0kLo+sw==", - "dev": true, "requires": { "mime-db": "~1.35.0" } @@ -8298,8 +8542,7 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "mississippi": { "version": "2.0.0", @@ -8344,7 +8587,6 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "dev": true, "requires": { "minimist": "0.0.8" } @@ -8640,6 +8882,12 @@ "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, + "oauth-sign": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", + "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", + "optional": true + }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -9167,6 +9415,12 @@ "sha.js": "^2.4.8" } }, + "performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", + "optional": true + }, "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", @@ -9849,8 +10103,7 @@ "prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", - "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", - "dev": true + "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=" }, "pseudomap": { "version": "1.0.2", @@ -9858,6 +10111,12 @@ "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", "dev": true }, + "psl": { + "version": "1.1.29", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.29.tgz", + "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==", + "optional": true + }, "public-encrypt": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz", @@ -9895,8 +10154,7 @@ "punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", - "dev": true + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=" }, "q": { "version": "1.5.1", @@ -10361,6 +10619,42 @@ "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=", "dev": true }, + "request": { + "version": "2.88.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", + "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", + "optional": true, + "requires": { + "aws-sign2": "~0.7.0", + "aws4": "^1.8.0", + "caseless": "~0.12.0", + "combined-stream": "~1.0.6", + "extend": "~3.0.2", + "forever-agent": "~0.6.1", + "form-data": "~2.3.2", + "har-validator": "~5.1.0", + "http-signature": "~1.2.0", + "is-typedarray": "~1.0.0", + "isstream": "~0.1.2", + "json-stringify-safe": "~5.0.1", + "mime-types": "~2.1.19", + "oauth-sign": "~0.9.0", + "performance-now": "^2.1.0", + "qs": "~6.5.2", + "safe-buffer": "^5.1.2", + "tough-cookie": "~2.4.3", + "tunnel-agent": "^0.6.0", + "uuid": "^3.3.2" + }, + "dependencies": { + "qs": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", + "optional": true + } + } + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -10373,6 +10667,12 @@ "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", "dev": true }, + "require-package-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz", + "integrity": "sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk=", + "dev": true + }, "require-uncached": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", @@ -10530,8 +10830,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safe-regex": { "version": "1.1.0", @@ -11127,6 +11426,23 @@ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, + "sshpk": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz", + "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=", + "optional": true, + "requires": { + "asn1": "~0.2.3", + "assert-plus": "^1.0.0", + "bcrypt-pbkdf": "^1.0.0", + "dashdash": "^1.12.0", + "ecc-jsbn": "~0.1.1", + "getpass": "^0.1.1", + "jsbn": "~0.1.0", + "safer-buffer": "^2.0.2", + "tweetnacl": "~0.14.0" + } + }, "ssri": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz", @@ -11533,6 +11849,16 @@ "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=", "dev": true }, + "tough-cookie": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", + "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", + "optional": true, + "requires": { + "psl": "^1.1.24", + "punycode": "^1.4.1" + } + }, "trim-newlines": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", @@ -11557,6 +11883,21 @@ "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=", "dev": true }, + "tunnel-agent": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", + "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", + "optional": true, + "requires": { + "safe-buffer": "^5.0.1" + } + }, + "tweetnacl": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", + "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", + "optional": true + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", @@ -11946,8 +12287,7 @@ "uuid": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", - "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", - "dev": true + "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==" }, "v8-compile-cache": { "version": "2.0.2", @@ -11982,6 +12322,17 @@ "integrity": "sha512-w/hry/368nO21AN9QljsaIhb9ZiZtZARoVH5f3CsFbawdLdayCgKRPup7CggujvySMxx0I91NOyxdVENohprLQ==", "dev": true }, + "verror": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", + "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", + "optional": true, + "requires": { + "assert-plus": "^1.0.0", + "core-util-is": "1.0.2", + "extsprintf": "^1.2.0" + } + }, "vinyl": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz", diff --git a/package.json b/package.json index c453214..d39618c 100644 --- a/package.json +++ b/package.json @@ -6,17 +6,19 @@ "main": "./src/js/index.js", "scripts": { "start": "NODE_ENV=development webpack-dev-server --mode development --hot --open --inline --progress", - "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress" + "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress -p", + "profile": "webpack --json > stats.json" }, "author": "Grigory Chervoplyas", "license": "ISC", "keywords": [], "devDependencies": { - "@babel/cli": "^7.0.0-beta.54", - "@babel/preset-env": "^7.0.0-beta.54", + "@babel/cli": "^7.0.0-rc.1", + "@babel/preset-env": "^7.0.0-rc.1", "babel-core": "^6.26.0", "babel-eslint": "^8.2.3", "babel-loader": "^7.1.4", + "babel-plugin-lodash": "^3.3.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", @@ -36,7 +38,9 @@ "flow-bin": "^0.73.0", "html-webpack-plugin": "^3.2.0", "identity-obj-proxy": "^3.0.0", + "less-loader": "^4.1.0", "style-loader": "^0.21.0", + "uglifyjs-webpack-plugin": "^1.3.0", "webpack": "^4.6.0", "webpack-cli": "^2.0.15", "webpack-dev-server": "^3.1.3" @@ -44,11 +48,14 @@ "dependencies": { "axios": "^0.18.0", "babel-runtime": "^6.26.0", + "classnames": "^2.2.6", "clean-webpack-plugin": "^0.1.9", "history": "^4.7.2", "leaflet": "^1.3.3", "leaflet-editable": "^1.1.0", - "leaflet-routing-machine": "^3.2.8", + "leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text", + "less": "^3.8.1", + "lodash": "^4.17.10", "react": "^16.3.2", "react-dom": "^16.3.2", "react-hot-loader": "^4.1.1", diff --git a/src/components/Fills.jsx b/src/components/Fills.jsx new file mode 100644 index 0000000..faf3146 --- /dev/null +++ b/src/components/Fills.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export const Fills = () => ( + + + + + + + + + + + + + + + +) diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx new file mode 100644 index 0000000..cb59aae --- /dev/null +++ b/src/components/Icon.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import sprite from '$sprites/icon.svg'; + +export const Icon = ({ icon, size = 32 }) => ( + + + +); + diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx new file mode 100644 index 0000000..58e3152 --- /dev/null +++ b/src/components/panels/EditorPanel.jsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { MODES } from '$constants/modes'; +import classnames from 'classnames'; + +import { Icon } from '$components/Icon'; + +export class EditorPanel extends React.PureComponent { + startPolyMode = () => this.props.editor.changeMode(MODES.POLY); + + startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS); + + startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER); + + startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER); + + render() { + const { mode } = this.props; + + return ( +
+ + + + + +
+ ); + } +}; diff --git a/src/constants/modes.js b/src/constants/modes.js index 4a65951..134f887 100644 --- a/src/constants/modes.js +++ b/src/constants/modes.js @@ -2,5 +2,6 @@ export const MODES = { POLY: 'POLY', STICKERS: 'STICKERS', ROUTER: 'ROUTER', + SHOTTER: 'SHOTTER', NONE: 'NONE', }; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 42f41b0..c0e5f0f 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,54 +1,43 @@ import React from 'react'; import { Editor } from '$modules/Editor'; - -import { MapScreen } from '$styles/mapScreen'; -import { ControlsScreen } from '$styles/controlsScreen'; -import { MODES } from '$constants/modes'; +import { EditorPanel } from '$components/panels/EditorPanel'; +import { Fills } from '$components/Fills'; export class App extends React.Component { state = { mode: 'none', + editor: null, }; componentDidMount() { const container = 'map'; const { mode } = this.state; - this.editor = new Editor({ + const editor = new Editor({ container, mode, setMode: this.setMode, }); + + this.setState({ editor }) } setMode = mode => { this.setState({ mode }); }; - startPolyMode = () => this.editor.changeMode(MODES.POLY); - - startStickerMode = () => this.editor.changeMode(MODES.STICKERS); - - startRouterMode = () => this.editor.changeMode(MODES.ROUTER); - render() { - const { mode } = this.state; + const { + state: { mode, editor }, + } = this; + return (
- - - - - - + +
+
); } diff --git a/src/index.html b/src/index.html index 444bdef..fde3250 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ - @MAP + @ORCHID diff --git a/src/index.js b/src/index.js index 702f7b6..58bcda2 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,9 @@ import ReactDOM from 'react-dom'; import { App } from '$containers/App'; +import '$styles/map.less'; +import '$styles/controls.less'; + export const Index = () => ( ); diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 05175b6..216d729 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -3,6 +3,7 @@ import { Poly } from '$modules/Poly'; import { MODES } from '$constants/modes'; import { Stickers } from '$modules/Stickers'; import { Router } from '$modules/Router'; +import { Shotter } from '$modules/Shotter'; export class Editor { constructor({ @@ -14,9 +15,10 @@ export class Editor { const { lockMapClicks, routerMoveStart, map: { map } } = this; - this.poly = new Poly({ map, routerMoveStart }); + this.poly = new Poly({ map, routerMoveStart, lockMapClicks }); this.stickers = new Stickers({ map, lockMapClicks }); this.router = new Router({ map, lockMapClicks }); + this.shotter = new Shotter({ map }); this.setMode = setMode; this.mode = mode; @@ -28,6 +30,9 @@ export class Editor { }, [MODES.ROUTER]: { start: this.routerSetStart, + }, + [MODES.SHOTTER]: { + start: this.shotter.makeShot, } }; diff --git a/src/modules/Map.js b/src/modules/Map.js index ee001d2..ce5e935 100644 --- a/src/modules/Map.js +++ b/src/modules/Map.js @@ -1,4 +1,4 @@ -import L from 'leaflet'; +import { map, tileLayer } from 'leaflet'; import { providers } from '$constants/providers'; import 'leaflet/dist/leaflet.css'; @@ -6,9 +6,9 @@ import 'leaflet-editable'; export class Map { constructor({ container }) { - this.map = L.map(container, { editable: true }).setView([55.0153275, 82.9071235], 13); + this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13); - this.tileLayer = L.tileLayer(providers.default, { + this.tileLayer = tileLayer(providers.default, { attribution: 'Независимое Велосообщество', maxNativeZoom: 18, maxZoom: 18, diff --git a/src/modules/Poly.js b/src/modules/Poly.js index 6cae492..aa58dbf 100644 --- a/src/modules/Poly.js +++ b/src/modules/Poly.js @@ -1,19 +1,21 @@ -import L from "leaflet"; +import { polyline } from "leaflet"; -const polyStyle = { color: '#ff3333', weight: '5' }; +const polyStyle = { color: 'url(#activePathGradient)', weight: '5' }; export class Poly { - constructor({ map, routerMoveStart }) { - this.poly = L.polyline([], polyStyle); + constructor({ map, routerMoveStart, lockMapClicks }) { + this.poly = polyline([], polyStyle); this.latlngs = []; this.poly.addTo(map); this.map = map; this.routerMoveStart = routerMoveStart; + this.lockMapClicks = lockMapClicks; this.bindEvents(); } updateMarks = () => { + console.log('upd'); const coords = this.poly.toGeoJSON().geometry.coordinates; this.latlngs = (coords && coords.length && coords.map(([lng, lat]) => ({ lng, lat }))) || []; @@ -28,6 +30,8 @@ export class Poly { this.map.editTools.addEventListener('editable:vertex:deleted', this.updateMarks); this.map.editTools.addEventListener('editable:vertex:new', this.updateMarks); + this.map.editTools.addEventListener('editable:vertex:dragstart', this.lockMap); + // После удаления точки - продолжить рисование this.map.editTools.addEventListener('editable:vertex:deleted', this.continueForward); // @@ -70,4 +74,8 @@ export class Poly { if (!this.poly.editor) return; this.poly.editor.continueForward(); }; + + lockMap = () => { + this.lockMapClicks(true); + } } diff --git a/src/modules/Router.js b/src/modules/Router.js index fcf307a..bb07694 100644 --- a/src/modules/Router.js +++ b/src/modules/Router.js @@ -1,11 +1,11 @@ import L from 'leaflet'; -import 'leaflet-routing-machine'; +import Routing from 'leaflet-routing-machine/src/index'; import { CONFIG } from '$config'; import { DomMarker } from '$utils/DomMarker'; export class Router { constructor({ map, lockMapClicks }) { - const routeLine = r => L.Routing.line(r, { + const routeLine = r => Routing.line(r, { styles: [ { color: 'white', opacity: 0.8, weight: 6 }, { color: '#4597d0', opacity: 1, weight: 4, dashArray: '15,10' } @@ -13,7 +13,7 @@ export class Router { addWaypoints: true, }).on('linetouched', this.lockPropagations); - this.router = L.Routing.control({ + this.router = Routing.control({ serviceUrl: CONFIG.OSRM_URL, profile: 'bike', fitSelectedRoutes: false, @@ -22,7 +22,7 @@ export class Router { styles: [{ color: '#4597d0', opacity: 1, weight: 3 }] }, show: false, - plan: L.Routing.plan([], { + plan: Routing.plan([], { createMarker: (i, wp) => L.marker(wp.latLng, { draggable: true, icon: this.createWaypointMarker(), @@ -38,9 +38,7 @@ export class Router { this.waypoints = []; this.lockMapClicks = lockMapClicks; - console.log('router', this.router); // this.router._line.on('mousedown', console.log); - console.log('map', map); } // pushWaypointOnClick = ({ latlng: { lat, lng } }) => { @@ -83,9 +81,7 @@ export class Router { }; // unlockPropagations = e => { - console.log('unlock'); if (e && e.preventPropagations) { - console.log('stop'); e.preventDefault(); e.preventPropagations(); } diff --git a/src/modules/Shotter.js b/src/modules/Shotter.js new file mode 100644 index 0000000..33b0800 --- /dev/null +++ b/src/modules/Shotter.js @@ -0,0 +1,66 @@ +import axios from 'axios'; + +export class Shotter { + constructor({ map }) { + this.tiles = []; + this.tilesLoaded = 0; + this.map = map; + } + + latLngToTile = latlng => { + const z = this.map.getZoom(); + const x = parseInt(Math.floor(((latlng.lng + 180) / 360) * (1 << z)), 10); + const y = parseInt(Math.floor((1 - (Math.log(Math.tan((latlng.lat * Math.PI) / 180) + + 1 / Math.cos((latlng.lat * Math.PI) / 180)) / Math.PI)) / 2 * (1 << z)), 10); + return { x, y, z }; + }; + + tileToLatLng = point => { + const z = this.map.getZoom(); + const lng = (((point.x / (2 ** z)) * 360) - 180); + + const n = Math.PI - ((2 * Math.PI * point.y) / (2 ** z)); + const lat = (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)))); + + return { lat, lng }; + }; + + getTilePlacement() { + const { innerHeight, innerWidth } = window; + const { _southWest, _northEast } = this.map.getBounds(); + + const sw = this.latLngToTile(_southWest); + const ne = this.latLngToTile(_northEast); + + const zsw = this.tileToLatLng(sw); + const zne = this.tileToLatLng(ne); + + const rsw = this.map.latLngToContainerPoint(zsw); + const msw = this.map.latLngToContainerPoint(_southWest); + + return { + min_x: sw.x, + min_y: ne.y, + max_x: ne.x, + max_y: sw.y, + sh_x: (rsw.x - msw.x), + sh_y: ((innerHeight + rsw.y) - msw.y), + size: 256, + width: innerWidth, + height: innerHeight, + zoom: this.map.getZoom(), + provider: 'dgis', + }; + } + + makeShot = () => { + // console.log('shot', this.getTilePlacement()); + const placement = this.getTilePlacement(); + + axios.get('http://alpha-map.vault48.org/engine/composerOrchid.php', { + params: { placement, mode: 'test' } + }) + .then(console.log) + .catch(console.warn); + } +} diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js index e74e9cd..33d5458 100644 --- a/src/modules/Sticker.js +++ b/src/modules/Sticker.js @@ -1,4 +1,4 @@ -import L from 'leaflet'; +import { marker } from 'leaflet'; import 'leaflet-editable'; import { DomMarker } from '$utils/DomMarker'; @@ -28,12 +28,12 @@ export class Sticker { this.element.appendChild(this.stickerImage); this.element.appendChild(this.stickerDelete); - const marker = new DomMarker({ + const mark = new DomMarker({ element: this.element, className: 'sticker-container', }); - this.sticker = L.marker(latlng, { icon: marker }); + this.sticker = marker(latlng, { icon: mark }); this.setAngle(this.angle); diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js index e846bd8..94e5f7a 100644 --- a/src/modules/Stickers.js +++ b/src/modules/Stickers.js @@ -1,10 +1,10 @@ -import L from 'leaflet'; +import { layerGroup } from 'leaflet'; import { Sticker } from '$modules/Sticker'; export class Stickers { constructor({ map, lockMapClicks }) { this.map = map; - this.layer = L.layerGroup(); + this.layer = layerGroup(); this.lockMapClicks = lockMapClicks; this.stickers = []; diff --git a/src/sprites/icon.svg b/src/sprites/icon.svg new file mode 100644 index 0000000..cb98b8a --- /dev/null +++ b/src/sprites/icon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/controls.less b/src/styles/controls.less new file mode 100644 index 0000000..7038361 --- /dev/null +++ b/src/styles/controls.less @@ -0,0 +1,35 @@ + +#control-screen { + position: fixed; + right: 10px; + bottom: 0px; + height: 48px; + min-width: 120px; + background: #333333; + z-index: 2; + color: white; + border-radius: 4px 4px 0 0; + padding: 0 4px 0 4px; + + button { + border: none; + background: transparent; + width: 48px; + height: 48px; + padding: 8px; + outline: none; + cursor: pointer; + + &.active { + svg { + fill: url(#activeButtonGradient); + stroke: url(#activeButtonGradient); + } + } + + svg { + fill: white; + stroke: white; + } + } +} diff --git a/src/styles/map.less b/src/styles/map.less new file mode 100644 index 0000000..1427a16 --- /dev/null +++ b/src/styles/map.less @@ -0,0 +1,176 @@ +#map { + width: 100%; + height: 100%; + position: absolute; + z-index: 1; + left: 0; + top: 0; + + cursor: crosshair; +} + +.leaflet-vertex-icon, .leaflet-middle-icon { + border-radius: 10px; + opacity :1; + border: none; + width: 16px !important; + height: 16px !important;margin-left:-8px !important;margin-top:-8px !important; + background: transparent; +} + +.leaflet-vertex-icon::after, .leaflet-middle-icon::after { + content: ' '; + position:absolute;top:4px;left:4px;width:8px;height:8px; + background:white;border-radius: 8px;transform:scale(1); + transition:transform 150ms; +} + +.leaflet-vertex-icon:hover, .leaflet-middle-icon:hover { + opacity: 1 !important; +} + +.leaflet-vertex-icon:hover::after, .leaflet-middle-icon:hover::after, +.leaflet-vertex-icon:active::after, .leaflet-middle-icon:active::after { + transform: scale(2); + box-shadow: #999 0 0 5px 2px; +} + +.leaflet-control-container .leaflet-routing-container-hide { + display: none; +} + +.router-waypoint { + width: 40px; + height: 40px; + margin-left: -20px; + margin-top: -20px; + outline: none; + z-index: 10001; + + &:after { + content: ' '; + display: block; + width: 20px; + height: 20px; + border-radius: 10px; + box-shadow: 0 0 0 2px #4597d0; + margin-left: 10px; + margin-top: 10px; + } +} + +.sticker-container { + outline: none; + position: relative; + + &:before { + content: ' '; + box-shadow: 0 0 10px 1px #ff3344; + background: #ff334422; + width: 48px; + height: 48px; + left: -24px; + top: -24px; + position: absolute; + border-radius: 40px; + opacity: 0; + transition: opacity 250ms, transform 500ms; + transform: scale(0); + } + + &:hover, &:active { + .sticker-delete { + transform: scale(1); + pointer-events: all; + } + + &:before { + opacity: 1; + transform: scale(1); + } + } +} + +.sticker-label { + width: 48px; + height: 48px; + position: absolute; + background: white; + border-radius: 32px; + left: 0; + top: 0; + outline: none; + + &:after { + content: ' '; + box-shadow: 0 0 0 1px #ff3344; + width: 80px; + height: 80px; + left: -16px; + top: -16px; + position: absolute; + border-radius: 40px; + pointer-events: none; + opacity: 0; + } +} + +.sticker-arrow { + position: absolute; + background: red; + transform-origin: 0 0; + left: 0; + top: 0; + + &:after { + content: ' '; + background: #ff3344; + width: 24px; + height: 24px; + transform-origin: 0 0; + transform: rotate(-45deg); + left: 0; + top: 0; + position: absolute; + } +} + +.sticker-delete { + position: absolute; + width: 24px; + height: 24px; + background: red; + border-radius: 24px; + transition: transform 500ms; + transform: scale(0); + opacity: 1; + pointer-events: none; + + &:hover { + transform: scale(1.2) !important; + } +} + +.leaflet-control-container .leaflet-routing-container-hide { + display: none; +} + +.router-waypoint { + width: 40px; + height: 40px; + margin-left: -20px; + margin-top: -20px; + outline: none; + z-index: 10001; + + &:after { + content: ' '; + display: block; + width: 20px; + height: 20px; + border-radius: 10px; + box-shadow: 0 0 0 2px #4597d0; + margin-left: 10px; + margin-top: 10px; + } +} diff --git a/src/utils/DomMarker.js b/src/utils/DomMarker.js index 5aebc78..a2f2d1e 100644 --- a/src/utils/DomMarker.js +++ b/src/utils/DomMarker.js @@ -1,6 +1,6 @@ -import L from 'leaflet'; +import { DivIcon } from 'leaflet'; -export const DomMarker = L.DivIcon.extend({ +export const DomMarker = DivIcon.extend({ initialize: function (options) { this.options = options; }, diff --git a/webpack.config.js b/webpack.config.js index 9a81f1d..f2094b4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,11 +10,13 @@ const { join } = require('path'); /* Plugins */ +const concatPlugin = new webpack.optimize.ModuleConcatenationPlugin(); const htmlPlugin = new HtmlWebPackPlugin({ template: './src/index.html', filename: './index.html', title: 'Map', hash: false, + favicon: 'src/sprites/favicon.png', }); const isDevelopment = process.env.NODE_ENV !== 'production'; @@ -48,10 +50,11 @@ const resolve = { module.exports = () => { /* Export */ const plugins = [ + concatPlugin, htmlPlugin, // flowPlugin, gitPlugin, - new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) + new webpack.IgnorePlugin(/^osrm-text-instructions$/, /leaflet-routing-machine$/) ]; return { @@ -64,6 +67,14 @@ module.exports = () => { { loader: 'css-loader' } ] }, + { + test: /\.less$/, + use: [ + { loader: 'style-loader' }, + { loader: 'css-loader' }, + { loader: 'less-loader' } + ] + }, { test: /\.(js|jsx)$/, exclude: /node_modules/, @@ -82,7 +93,7 @@ module.exports = () => { } }, { - test: /\.(png)$/, + test: /\.(png|svg)$/, use: { loader: 'file-loader', options: {}