refactor: 默认升级 MapNext 至 [email protected]

packages/map/README.md

@@ -1,11 +1,32 @@
-# `map`
+## Map
 
-> TODO: description
+Map fork from [[email protected]](https://github.com/maplibre/maplibre-gl-js), keep event loop, responds user interaction and updates the internal state of the map (current viewport, camera angle, etc.)
 
-## Usage
+```mermaid
+sequenceDiagram
+    actor user
+    participant DOM
+    participant handler_manager
+    participant handler
+    participant camera
+    participant transform
+    participant map
 
-```
-const map = require('map');
+    user->>camera: map#setCenter, map#panTo
+    camera->>transform: update
+    camera->>map: fire move event
+    map->>map: _render()
 
-// TODO: DEMONSTRATE API
+    user->>DOM: resize, pan,<br>click, scroll,<br>...
+    DOM->>handler_manager: DOM events
+    handler_manager->>handler: forward event
+    handler-->>handler_manager: HandlerResult
+    handler_manager->>transform: update
+    handler_manager->>map: fire move event
+    map->>map: _render()
 ```
+
+- [Transform](../src/geo/transform.ts) holds the current viewport details (pitch, zoom, bearing, bounds, etc.). Two places in the code update transform directly:
+  - [Camera](../src/ui/camera.ts) (parent class of [Map](../src/ui/map)) in response to explicit calls to [Camera#panTo](../src/ui/camera.ts#L207), [Camera#setCenter](../src/ui/camera.ts#L169)
+  - [HandlerManager](../src/ui/handler_manager.ts) in response to DOM events. It forwards those events to interaction processors that live in [src/ui/handler](../src/ui/handler), which accumulate a merged [HandlerResult](../src/ui/handler_manager.ts#L64) that kick off a render frame loop, decreasing the inertia and nudging map.transform by that amount on each frame from [HandlerManager#\_updateMapTransform()](../src/ui/handler_manager.ts#L413). That loop continues in the inertia decreases to 0.
+- Both camera and handler_manager are responsible for firing `move`, `zoom`, `movestart`, `moveend`, ... events on the map after they update transform. Each of these events (along with style changes and data load events) triggers a call to [Map#\_render()](../src/ui/map.ts#L2480) which renders a single frame of the map.

packages/map/src/map-next/ui/camera.test.ts → packages/map/__tests__/camera.test.ts

@@ -1,16 +1,16 @@
-import { Transform } from '../geo/transform';
-import { browser } from '../util/browser';
-import type { TaskID } from '../util/task_queue';
-import { TaskQueue } from '../util/task_queue';
-import type { CameraOptions } from './camera';
-import { Camera } from './camera';
-
-import { LngLat } from '../geo/lng_lat';
-import { LngLatBounds } from '../geo/lng_lat_bounds';
-import { mercatorZfromAltitude } from '../geo/mercator_coordinate';
-import type { Event } from '../util/evented';
-import { fixedLngLat, fixedNum } from '../util/test/fixed';
-import { setMatchMedia } from '../util/test/util';
+import type { CameraOptions } from '../src/map-next/camera';
+import { Camera } from '../src/map-next/camera';
+import { Transform } from '../src/map-next/geo/transform';
+import { browser } from '../src/map-next/util/browser';
+import type { TaskID } from '../src/map-next/util/task_queue';
+import { TaskQueue } from '../src/map-next/util/task_queue';
+
+import { LngLat } from '../src/map-next/geo/lng_lat';
+import { LngLatBounds } from '../src/map-next/geo/lng_lat_bounds';
+import { mercatorZfromAltitude } from '../src/map-next/geo/mercator_coordinate';
+import type { Event } from '../src/map-next/util/evented';
+import { fixedLngLat, fixedNum } from './libs/fixed';
+import { setMatchMedia } from './libs/util';
 
 beforeEach(() => {
   setMatchMedia();

packages/map/src/map-next/geo/edge_insets.test.ts → packages/map/__tests__/geo/edge_insets.test.ts

@@ -1,4 +1,4 @@
-import { EdgeInsets } from '../geo/edge_insets';
+import { EdgeInsets } from '../../src/map-next/geo/edge_insets';
 
 describe('EdgeInsets', () => {
   describe('#constructor', () => {

packages/map/src/map-next/geo/lng_lat_bounds.test.ts → packages/map/__tests__/geo/lng_lat_bounds.test.ts

@@ -1,5 +1,5 @@
-import { LngLat } from './lng_lat';
-import { LngLatBounds } from './lng_lat_bounds';
+import { LngLat } from '../../src/map-next/geo/lng_lat';
+import { LngLatBounds } from '../../src/map-next/geo/lng_lat_bounds';
 
 describe('LngLatBounds', () => {
   test('#constructor', () => {

packages/map/src/map-next/geo/mercator_coordinate.test.ts → packages/map/__tests__/geo/mercator_coordinate.test.ts

@@ -1,5 +1,5 @@
-import { LngLat } from './lng_lat';
-import { MercatorCoordinate, mercatorScale } from './mercator_coordinate';
+import { LngLat } from '../../src/map-next/geo/lng_lat';
+import { MercatorCoordinate, mercatorScale } from '../../src/map-next/geo/mercator_coordinate';
 
 describe('LngLat', () => {
   test('#constructor', () => {

packages/map/src/map-next/geo/transform.test.ts → packages/map/__tests__/geo/transform.test.ts

@@ -1,7 +1,7 @@
 import Point from '@mapbox/point-geometry';
-import { fixedCoord, fixedLngLat } from '../util/test/fixed';
-import { LngLat } from './lng_lat';
-import { MAX_VALID_LATITUDE, Transform } from './transform';
+import { LngLat } from '../../src/map-next/geo/lng_lat';
+import { MAX_VALID_LATITUDE, Transform } from '../../src/map-next/geo/transform';
+import { fixedCoord, fixedLngLat } from '../libs/fixed';
 
 describe('transform', () => {
   test('creates a transform', () => {

packages/map/src/map-next/ui/handler/box_zoom.test.ts → packages/map/__tests__/handler/box_zoom.test.ts

@@ -1,7 +1,7 @@
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import { Map } from '../map';
+import { Map } from '../../src/map-next/map';
+import { DOM } from '../../src/map-next/util/dom';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap(clickTolerance) {
   return new Map({ container: DOM.create('div', '', window.document.body), clickTolerance });

packages/map/src/map-next/ui/handler/dblclick_zoom.test.ts → packages/map/__tests__/handler/dblclick_zoom.test.ts

@@ -1,7 +1,7 @@
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import type { MapOptions } from '../map';
-import { Map } from '../map';
+import type { MapOptions } from '../../src/map-next/map';
+import { Map } from '../../src/map-next/map';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap() {
   return new Map({ container: window.document.createElement('div') } as any as MapOptions);

packages/map/src/map-next/ui/handler/drag_pan.test.ts → packages/map/__tests__/handler/drag_pan.test.ts

@@ -1,8 +1,8 @@
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import type { MapOptions } from '../map';
-import { Map } from '../map';
+import type { MapOptions } from '../../src/map-next/map';
+import { Map } from '../../src/map-next/map';
+import { DOM } from '../../src/map-next/util/dom';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap(clickTolerance?, dragPan?) {
   return new Map({

packages/map/src/map-next/ui/handler/drag_rotate.test.ts → packages/map/__tests__/handler/drag_rotate.test.ts

@@ -1,10 +1,10 @@
-import { browser } from '../../util/browser';
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { extend } from '../../util/util';
-import { Map } from '../map';
+import { Map } from '../../src/map-next/map';
+import { browser } from '../../src/map-next/util/browser';
+import { DOM } from '../../src/map-next/util/dom';
+import { extend } from '../../src/map-next/util/util';
+import simulate from '../libs/simulate_interaction';
 
-import { beforeMapTest } from '../../util/test/util';
+import { beforeMapTest } from '../libs/util';
 
 function createMap(options?) {
   return new Map(extend({ container: DOM.create('div', '', window.document.body) }, options));

packages/map/src/map-next/ui/handler/keyboard.test.ts → packages/map/__tests__/handler/keyboard.test.ts

@@ -1,8 +1,8 @@
-import { Map } from '../../ui/map';
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import { extend } from '../../util/util';
+import { Map } from '../../src/map-next/map';
+import { DOM } from '../../src/map-next/util/dom';
+import { extend } from '../../src/map-next/util/util';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap(options?) {
   return new Map(

packages/map/src/map-next/ui/handler/map_event.test.ts → packages/map/__tests__/handler/map_event.test.ts

@@ -1,8 +1,8 @@
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import type { MapOptions } from '../map';
-import { Map } from '../map';
+import type { MapOptions } from '../../src/map-next/map';
+import { Map } from '../../src/map-next/map';
+import { DOM } from '../../src/map-next/util/dom';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap() {
   return new Map({

packages/map/src/map-next/ui/handler/mouse_handler_interface.test.ts → packages/map/__tests__/handler/mouse_handler_interface.test.ts

@@ -4,7 +4,7 @@ import {
   generateMousePanHandler,
   generateMousePitchHandler,
   generateMouseRotationHandler,
-} from './mouse';
+} from '../../src/map-next/handler/mouse';
 
 describe('mouse handler tests', () => {
   test('MouseRotateHandler', () => {

packages/map/src/map-next/ui/handler/mouse_rotate.test.ts → packages/map/__tests__/handler/mouse_rotate.test.ts

@@ -1,9 +1,9 @@
-import { Map } from '../../ui/map';
-import { browser } from '../../util/browser';
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import { extend } from '../../util/util';
+import { Map } from '../../src/map-next/map';
+import { browser } from '../../src/map-next/util/browser';
+import { DOM } from '../../src/map-next/util/dom';
+import { extend } from '../../src/map-next/util/util';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap(options?) {
   return new Map(extend({ container: DOM.create('div', '', window.document.body) }, options));

packages/map/src/map-next/ui/handler/one_finger_touch_drag_handler_interface.test.ts → packages/map/__tests__/handler/one_finger_touch_drag_handler_interface.test.ts

@@ -3,7 +3,7 @@ import Point from '@mapbox/point-geometry';
 import {
   generateOneFingerTouchPitchHandler,
   generateOneFingerTouchRotationHandler,
-} from './one_finger_touch_drag';
+} from '../../src/map-next/handler/one_finger_touch_drag';
 
 const testTouch = { identifier: 0 } as Touch;
 

packages/map/src/map-next/ui/handler/scroll_zoom.test.ts → packages/map/__tests__/handler/scroll_zoom.test.ts

@@ -1,8 +1,8 @@
-import { Map } from '../../ui/map';
-import { browser } from '../../util/browser';
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest, setPerformance } from '../../util/test/util';
+import { Map } from '../../src/map-next/map';
+import { browser } from '../../src/map-next/util/browser';
+import { DOM } from '../../src/map-next/util/dom';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest, setPerformance } from '../libs/util';
 
 function createMap() {
   return new Map({

packages/map/src/map-next/ui/handler/tap_drag_zoom.test.ts → packages/map/__tests__/handler/tap_drag_zoom.test.ts

@@ -1,7 +1,7 @@
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import type { MapOptions } from '../map';
-import { Map } from '../map';
+import type { MapOptions } from '../../src/map-next/map';
+import { Map } from '../../src/map-next/map';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap() {
   return new Map({ container: window.document.createElement('div') } as any as MapOptions);

packages/map/src/map-next/ui/handler/two_fingers_touch.test.ts → packages/map/__tests__/handler/two_fingers_touch.test.ts

@@ -1,8 +1,8 @@
-import { DOM } from '../../util/dom';
-import simulate from '../../util/test/simulate_interaction';
-import { beforeMapTest } from '../../util/test/util';
-import type { MapOptions } from '../map';
-import { Map } from '../map';
+import type { MapOptions } from '../../src/map-next/map';
+import { Map } from '../../src/map-next/map';
+import { DOM } from '../../src/map-next/util/dom';
+import simulate from '../libs/simulate_interaction';
+import { beforeMapTest } from '../libs/util';
 
 function createMap() {
   return new Map({ container: DOM.create('div', '', window.document.body) } as any as MapOptions);
@@ -220,7 +220,7 @@ describe('touch zoom rotate', () => {
   test('TwoFingersTouchZoomRotateHandler adds css class used for disabling default touch behavior in some browsers', () => {
     const map = createMap();
 
-    const className = 'maplibregl-touch-zoom-rotate';
+    const className = 'l7-touch-zoom-rotate';
     expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
     map.touchZoomRotate.disable();
     expect(map.getCanvasContainer().classList.contains(className)).toBeFalsy();

packages/map/src/map-next/util/test/util.ts → packages/map/__tests__/libs/util.ts

@@ -1,5 +1,5 @@
-import { Map } from '../../ui/map';
-import { extend } from '../../util/util';
+import { Map } from '../../src/map-next/map';
+import { extend } from '../../src/map-next/util/util';
 
 export function createMap(options?, callback?) {
   const container = window.document.createElement('div');