@maplat/ui 0.10.6 → 0.11.1

package/less/ui.less

@@ -1,11 +1,11 @@
-@import (less) url('../node_modules/@maplat/core/dist/assets/maplat_core.css');
-
-.maplat {
-  @import url('bootstrap.less');
-  @import url('iziToast.less');
-  @import (less) url('../node_modules/swiper4/dist/css/swiper.css');
-  @import url('font-face.less');
-  @import url('font-awesome.less');
-  @import url('maplat-specific.less');
-  @import (less) url('../node_modules/ol-contextmenu/dist/ol-contextmenu.css');
-}
+@import url('../node_modules/@maplat/core/dist/maplat_core.css');
+
+.maplat {
+  @import url('bootstrap.less');
+  @import url('iziToast.less');
+  @import (less) url('./swiper4.css');
+
+  @import url('font-awesome.less');
+  @import url('maplat-specific.less');
+  @import (less) url('contextmenu.css');
+}

package/less/ui_packed.less

@@ -1,11 +1,11 @@
-@import (less) url('../node_modules/@maplat/core/dist/assets/maplat_core.css');
-
-.maplat {
-  @import url('bootstrap.less');
-  @import url('iziToast.less');
-  @import (less) url('../node_modules/swiper4/dist/css/swiper.css');
-  @import url('font-face_packed.less');
-  @import url('font-awesome.less');
-  @import url('maplat-specific.less');
-  @import (less) url('../node_modules/ol-contextmenu/dist/ol-contextmenu.css');
+@import (less) url('../node_modules/@maplat/core/dist/maplat_core.css');
+
+.maplat {
+  @import url('bootstrap.less');
+  @import url('iziToast.less');
+  @import (less) url('./swiper4.css');
+
+  @import url('font-awesome.less');
+  @import url('maplat-specific.less');
+  @import (less) url('../node_modules/ol-contextmenu/dist/ol-contextmenu.css');
 }

package/package.json

@@ -1,34 +1,20 @@
 {
   "name": "@maplat/ui",
-  "version": "0.10.6",
+  "version": "0.11.1",
   "description": "Maplat is the cool Historical Map/Illustrated Map Viewer.\nIt can transform each map coordinates with nonlinear but homeomorphic projection and makes possible that the maps can collaborate with GPS/accurate maps, without distorting original maps.",
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "type": "module",
+  "main": "dist/maplat-ui.umd.js",
+  "module": "dist/maplat-ui.es.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src/",
-    "dist/",
+    "dist/*.js",
+    "dist/*.d.ts",
+    "dist/assets/locales/",
     "legacy/",
     "less/",
-    "parts/",
-    "fonts/",
-    "locales/"
+    "assets/"
   ],
-  "scripts": {
-    "server": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve --config ./webpack_config/webpack.config.standard.dev.js --mode=development",
-    "server:packed": "cross-env NODE_OPTIONS=--openssl-legacy-provider npm run freeze && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve --config ./webpack_config/webpack.config.packed.dev.js --mode=development",
-    "build": "npm run build:standard && npm run build:packed",
-    "build:standard": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --color --progress --config ./webpack_config/webpack.config.standard.js",
-    "build:packed": "cross-env NODE_OPTIONS=--openssl-legacy-provider npm run freeze && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config ./webpack_config/webpack.config.packed.js",
-    "zip": "gulp zip",
-    "test": "jest",
-    "preversion": "npm run lint",
-    "version": "npm run build && npm run zip && git add -A",
-    "freeze": "node bin/freezer.js",
-    "lint": "npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "eslint \"{src,spec}/**/*.js\" --fix",
-    "lint:prettier": "prettier \"./{src,spec}/**/*.js\" --write",
-    "git_switch": "gulp git_switch"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/code4history/Maplat.git"
@@ -43,64 +29,79 @@
     "url": "https://github.com/code4history/Maplat/issues"
   },
   "homepage": "https://github.com/code4history/Maplat/wiki",
+  "engines": {
+    "npm": "use-pnpm-please",
+    "pnpm": ">=9.0.0"
+  },
   "dependencies": {
-    "@maplat/core": "https://github.com/code4history/MaplatCore#yamato_koriyama_4",
-    "@maplat/tin": "^0.9.4",
-    "@turf/turf": "^6.5.0",
-    "caniuse-lite": "^1.0.30001431",
-    "lodash.template": "^4.5.0",
-    "ol": "^6.14.1",
-    "ol-contextmenu": "^4.1.0",
-    "swiper": "^6.7.1",
-    "swiper4": "npm:swiper@^4.5.1",
-    "weiwudi": "^0.1.4"
+    "@c4h/chuci": "0.2.4",
+    "@c4h/weiwudi": "^0.2.0",
+    "@maplat/core": "0.12.1",
+    "@maplat/transform": "^0.4.0",
+    "@turf/turf": "^7.3.1",
+    "@types/page": "^1.11.9",
+    "bootstrap.native": "^5.1.6",
+    "page": "^1.11.6",
+    "qrcode": "^1.5.4",
+    "swiper": "^6.8.4",
+    "tiny-emitter": "^2.1.0",
+    "workbox-core": "^7.4.0",
+    "workbox-expiration": "^7.4.0",
+    "workbox-precaching": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-strategies": "^7.4.0"
+  },
+  "peerDependencies": {
+    "mapbox-gl": "^1.0.0 || ^2.0.0 || ^3.0.0",
+    "maplibre-gl": "^3.0.0 || ^4.0.0",
+    "ol": "^9.0.0 || ^10.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "babel-jest": "^28.1.0",
-    "babel-loader": "^8.2.5",
-    "clean-webpack-plugin": "^4.0.0",
-    "concaveman": "https://github.com/grassick/concaveman#patch-1",
-    "copy-webpack-plugin": "^6.4.1",
-    "core-js": "^3.22.7",
-    "cross-env": "^7.0.3",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^4.2.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-jest": "^26.3.0",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.1.0",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
-    "gulp-zip": "^5.1.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^28.1.0",
-    "jest-canvas-mock": "^2.3.1",
-    "less": "^4.1.2",
-    "less-loader": "^11.0.0",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.6.0",
-    "prettier": "^2.6.2",
-    "strip-whitespace-loader": "github:kochizufan/strip-whitespace-loader#fix_dq_npm",
-    "terser-webpack-plugin": "^5.3.1",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.11.1",
-    "workbox-build": "^6.5.4",
-    "workbox-cli": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4",
-    "workbox-webpack-plugin": "^6.5.4"
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^20.19.27",
+    "@types/ol": "^6.5.3",
+    "@types/qrcode": "^1.5.6",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "esbuild": "^0.27.2",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.1.2",
+    "globals": "^16.5.0",
+    "jsdom": "^24.1.3",
+    "less": "^4.5.1",
+    "ol": "^10.7.0",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.50.1",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4",
+    "workbox-build": "^7.4.0",
+    "workbox-window": "^7.4.0"
+  },
+  "overrides": {
+    "@babel/traverse": "7.23.2",
+    "glob-parent": "5.1.2",
+    "axios": "1.6.0",
+    "minimist": "1.2.8",
+    "glob": "^11.0.0",
+    "rimraf": "^6.0.0",
+    "inflight": "npm:inflight-purged@^2.0.0",
+    "@types/minimatch": "^5.1.2",
+    "source-map": "^0.7.4",
+    "sourcemap-codec": "^1.4.8"
   },
-  "resolutions": {
-    "concaveman": "https://github.com/grassick/concaveman#patch-1"
+  "scripts": {
+    "dev": "concurrently \"pnpm watch:sw\" \"vite --host\"",
+    "build:sw": "esbuild src/service-worker/index.ts --bundle --outfile=dist/service-worker.js --format=iife --define:self.__WB_MANIFEST=[] && node -e \"require('fs').copyFileSync('dist/service-worker.js', 'public/service-worker.js')\"",
+    "watch:sw": "esbuild src/service-worker/index.ts --bundle --outfile=public/service-worker.js --format=iife --define:self.__WB_MANIFEST=[] --watch",
+    "build": "pnpm build:sw && cross-env BUILD_MODE=package tsc && cross-env BUILD_MODE=package vite build",
+    "build:demo": "pnpm build:sw && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "pnpm lint:eslint && pnpm lint:prettier",
+    "lint:eslint": "eslint \"{src,spec,demo}/**/*.{ts,js}\" --fix",
+    "lint:prettier": "prettier \"./{src,spec,demo}/**/*.{ts,js}\" --write"
   }
-}
+}

package/src/{absolute_url.js → absolute_url.ts}

@@ -1,4 +1,4 @@
-export function absoluteUrl(base, relative) {
+export default function absoluteUrl(base: string, relative: string) {
   const stack = base.split("/");
   const parts = relative.split("/");
   stack.pop(); // remove current file name (or empty string)

package/src/contextmenu/base.ts

@@ -0,0 +1,170 @@
+/* Fork from ol-comtextmenu 4.1.0
+ * https://github.com/jonataswalker/ol-contextmenu/tree/4.1.0
+ * (c) Jonatas Walker
+ * @license MIT
+ **/
+
+import { CSS_VARS, DEFAULT_OPTIONS, DEFAULT_ITEMS } from "./constants";
+import Control from "ol/control/Control";
+import { Internal } from "./internal";
+import { Html } from "./html";
+import { assert, mergeOptions } from "./helpers/mix";
+import { ContextMenuOptions, ContextMenuItem } from "../types";
+//import './sass/main.scss';
+
+export const createContainer = (hidden: boolean, width: number) => {
+  const container = document.createElement("div");
+  const ul = document.createElement("ul");
+  const klasses = [CSS_VARS.container, CSS_VARS.unselectable];
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  hidden && klasses.push(CSS_VARS.hidden);
+  container.className = klasses.join(" ");
+  container.style.width = `${parseInt(String(width), 10)}px`;
+  container.appendChild(ul);
+  return container;
+};
+
+/**
+ * @class Base
+ * @extends {ol.control.Control}
+ */
+export default class Base extends Control {
+  options: ContextMenuOptions;
+  container: HTMLElement;
+  disabled: boolean;
+  Internal: Internal;
+  Html: Html;
+
+  /**
+   * @constructor
+   * @param {object|undefined} opt_options Options.
+   */
+  constructor(opt_options: ContextMenuOptions = {}) {
+    assert(
+      typeof opt_options == "object",
+      "@param `opt_options` should be object type!"
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options = mergeOptions(DEFAULT_OPTIONS, opt_options) as any;
+    const container = createContainer(true, options.width!);
+    super({ element: container });
+
+    this.options = options;
+    this.container = container;
+    this.disabled = false;
+    this.Internal = new Internal(this);
+    this.Html = new Html(this);
+  }
+
+  /**
+   * Remove all elements from the menu.
+   */
+  clear() {
+    Object.keys(this.Internal.items).forEach(
+      this.Html.removeMenuEntry,
+      this.Html
+    );
+  }
+
+  /**
+   * Close the menu programmatically.
+   */
+  close() {
+    this.Internal.closeMenu();
+  }
+
+  /**
+   * Enable menu
+   */
+  enable() {
+    this.disabled = false;
+  }
+
+  /**
+   * Disable menu
+   */
+  disable() {
+    this.disabled = true;
+  }
+
+  /**
+   * @return {Array} Returns default items
+   */
+  getDefaultItems() {
+    return DEFAULT_ITEMS;
+  }
+
+  /**
+   * @return {Number} Returns how many items
+   */
+  countItems() {
+    return Object.keys(this.Internal.items).length;
+  }
+
+  /**
+   * Add items to the menu. This pushes each item in the provided array
+   * to the end of the menu.
+   * @param {Array} arr Array.
+   */
+  extend(arr: ContextMenuItem[]) {
+    assert(Array.isArray(arr), "@param `arr` should be an Array.");
+    arr.forEach(this.push, this);
+  }
+
+  isOpen() {
+    return this.Internal.opened;
+  }
+
+  /**
+   * Update the menu's position.
+   */
+  updatePosition(pixel: number[]) {
+    assert(Array.isArray(pixel), "@param `pixel` should be an Array.");
+
+    if (this.isOpen()) {
+      this.Internal.positionContainer(pixel);
+    }
+  }
+
+  /**
+   * Remove the last item of the menu.
+   */
+  pop() {
+    const keys = Object.keys(this.Internal.items);
+    this.Html.removeMenuEntry(keys[keys.length - 1]);
+  }
+
+  /**
+   * Insert the provided item at the end of the menu.
+   * @param {Object|String} item Item.
+   */
+  push(item: ContextMenuItem | string) {
+    // assert(isDefAndNotNull(item), '@param `item` must be informed.');
+    this.Html.addMenuEntry(item as ContextMenuItem);
+  }
+
+  /**
+   * Remove the first item of the menu.
+   */
+  shift() {
+    this.Html.removeMenuEntry(Object.keys(this.Internal.items)[0]);
+  }
+
+  /**
+   * Not supposed to be used on app.
+   */
+
+  setMap(map: import("ol").Map) {
+    Control.prototype.setMap.call(this, map);
+
+    if (map) {
+      // let's start since now we have the map
+      this.Internal.init(map);
+    } else {
+      // I'm removed from the map - remove listeners
+      this.Internal.removeListeners();
+    }
+  }
+}

package/src/contextmenu/constants.ts

@@ -0,0 +1,66 @@
+import cssVars from "./cssVars";
+
+export const CSS_VARS = cssVars;
+
+export const EVENT_TYPE = {
+  /**
+   * Triggered before context menu is open.
+   */
+  BEFOREOPEN: "beforeopen",
+  /**
+   * Triggered when context menu is open.
+   */
+  OPEN: "open",
+  /**
+   * Triggered when context menu is closed.
+   */
+  CLOSE: "close",
+  /**
+   * Internal. Triggered when a menu entry is added.
+   */
+  ADD_MENU_ENTRY: "add-menu-entry",
+  /**
+   * Internal.
+   */
+  CONTEXTMENU: "contextmenu",
+  /**
+   * Internal.
+   */
+  HOVER: "mouseover"
+};
+
+export const DEFAULT_OPTIONS = {
+  width: 150,
+  scrollAt: 4,
+  eventType: EVENT_TYPE.CONTEXTMENU,
+  defaultItems: true
+};
+
+export const DEFAULT_ITEMS = [
+  {
+    text: "Zoom In",
+    classname: `${cssVars.zoomIn} ${cssVars.icon}`,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    callback: (obj: any, map: any) => {
+      const view = map.getView();
+      view.animate({
+        zoom: +view.getZoom() + 1,
+        duration: 700,
+        center: obj.coordinate
+      });
+    }
+  },
+  {
+    text: "Zoom Out",
+    classname: `${cssVars.zoomOut} ${cssVars.icon}`,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    callback: (obj: any, map: any) => {
+      const view = map.getView();
+      view.animate({
+        zoom: +view.getZoom() - 1,
+        duration: 700,
+        center: obj.coordinate
+      });
+    }
+  }
+];

package/src/contextmenu/cssVars.ts

@@ -0,0 +1,13 @@
+const namespace = "ol-ctx-menu";
+
+export default {
+  namespace,
+  container: `${namespace}-container`,
+  separator: `${namespace}-separator`,
+  submenu: `${namespace}-submenu`,
+  hidden: `${namespace}-hidden`,
+  icon: `${namespace}-icon`,
+  zoomIn: `${namespace}-zoom-in`,
+  zoomOut: `${namespace}-zoom-out`,
+  unselectable: "ol-unselectable"
+};