diff --git a/example/common.js b/example/common.js index 3f09ed8..f275bd1 100644 --- a/example/common.js +++ b/example/common.js @@ -60,7 +60,7 @@ const icons = [ 'cinemas' ]; -const colors = ['#F09A75', '#5EBD8C', '#E096D0']; +const colors = ['darkgray', 'pink', 'seawave', 'orchid', 'steelblue', 'bluebell', 'ceil', 'green', 'darksalmon']; // eslint-disable-next-line @typescript-eslint/no-unused-vars const markers = icons.map((iconName) => ({ diff --git a/package-lock.json b/package-lock.json index 4452e7a..733dadd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2", "devDependencies": { "@mappable-world/mappable-cli": "^0.0.28", - "@mappable-world/mappable-types": "^0.0.4", + "@mappable-world/mappable-types": "^0.0.15", "@types/got": "9.6.12", "@types/jest": "29.5.3", "@types/jsdom": "21.1.1", @@ -1302,10 +1302,26 @@ } }, "node_modules/@mappable-world/mappable-types": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@mappable-world/mappable-types/-/mappable-types-0.0.4.tgz", - "integrity": "sha512-rAVeM7+MIzNz+JAFJA58AQJn/XWidxlNNgLqR3vXlUn5iNR5Vm/0iY3dGf95yhV85jmE8E/egAUGrEwvkzlJtw==", - "dev": true + "version": "0.0.15", + "resolved": "https://registry.npmjs.org/@mappable-world/mappable-types/-/mappable-types-0.0.15.tgz", + "integrity": "sha512-mcFDPGUdmzABEpnsnTmgSoU0YCLgAyqf4l/TvgZk1yXGOh14ESpwA9iHfzrRECl8eIK3i0jsuXsxY2+idkIepA==", + "dev": true, + "peerDependencies": { + "@types/react": "16-18", + "@types/react-dom": "16-18", + "@vue/runtime-core": "3" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "@vue/runtime-core": { + "optional": true + } + } }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", diff --git a/package.json b/package.json index 82e471d..4014124 100644 --- a/package.json +++ b/package.json @@ -16,13 +16,13 @@ "start": "webpack serve", "bump": "npm version prerelease --preid=beta --no-git-tag-version && npm run bump:git", "bump:git": "git add --all && git commit -m \"New version $npm_package_version\" && git tag $npm_package_version && git push --tags origin HEAD:main", - "sync-figma":"npm run sync-icons && npm run sync-colors", + "sync-figma": "npm run sync-icons && npm run sync-colors", "sync-icons": "node -r dotenv/config -r ts-node/register ./tools/scripts/sync-icons.ts", "sync-colors": "node -r dotenv/config -r ts-node/register ./tools/scripts/sync-colors.ts" }, "devDependencies": { "@mappable-world/mappable-cli": "^0.0.28", - "@mappable-world/mappable-types": "^0.0.4", + "@mappable-world/mappable-types": "^0.0.15", "@types/got": "9.6.12", "@types/jest": "29.5.3", "@types/jsdom": "21.1.1", diff --git a/src/MMapDefaultMarker/index.css b/src/MMapDefaultMarker/index.css index 510c02e..915ada3 100644 --- a/src/MMapDefaultMarker/index.css +++ b/src/MMapDefaultMarker/index.css @@ -2,7 +2,7 @@ box-sizing: border-box; height: 8px; width: 8px; - border: 2px solid #f8f8f8; + border: 2px solid; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; @@ -14,7 +14,6 @@ } .mappable--icon { - color: #fffffffc; position: absolute; - transform: translate(calc(-24px - 10px),10px); + transform: translate(calc(-24px - 10px), 10px); } diff --git a/src/MMapDefaultMarker/index.ts b/src/MMapDefaultMarker/index.ts index b20bae8..c4f0e80 100644 --- a/src/MMapDefaultMarker/index.ts +++ b/src/MMapDefaultMarker/index.ts @@ -1,12 +1,11 @@ import {MMapMarker, MMapMarkerProps} from '@mappable-world/mappable-types'; -import {IconName} from '../icons/icon-name'; -import {icons} from '../icons'; -import pin from './pin.svg'; +import {IconColor, IconName, iconColors, icons, glyphColors} from '../icons'; import './index.css'; +import pin from './pin.svg'; export type MMapDefaultMarkerProps = MMapMarkerProps & { name: IconName; - color: string; + color: IconColor; }; export class MMapDefaultMarker extends mappable.MMapComplexEntity { @@ -14,19 +13,19 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity): void { if (propsDiff.color !== undefined) { - this._markerElement.style.color = this._props.color; - this._markerElement.style.backgroundColor = this._props.color; + this._color = iconColors[this._props.color]; + this._updateTheme(); } if (propsDiff.name !== undefined) { this._icon.innerHTML = icons[propsDiff.name].normal; } this._marker.update(this._props); } + + private _updateTheme() { + this._markerElement.style.color = this._color.day; + this._markerElement.style.backgroundColor = this._color.day; + this._markerElement.style.borderColor = '#f8f8f8'; + this._icon.style.color = glyphColors.day; + } } diff --git a/src/MMapDefaultMarker/pin.svg b/src/MMapDefaultMarker/pin.svg index f0dcd75..5d9a1b1 100644 --- a/src/MMapDefaultMarker/pin.svg +++ b/src/MMapDefaultMarker/pin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/icons/index.ts b/src/icons/index.ts index 6cb8ce8..874aabd 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -1,3 +1,3 @@ -export {IconColor, iconColors} from './icon-colors'; +export {IconColor, iconColors, glyphColors} from './icon-colors'; export {IconName} from './icon-name'; export {icons} from './icons';