@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/docs/03_URL_settings.md

@@ -0,0 +1,140 @@
+# URL settings
+
+Various settings could be set from URL hash part in order to create permalinks.
+
+These are set after the `#` symbol of the URL, following a `key=value` format, each being separated by `&` symbol.
+
+Example:
+
+```urlencoded
+https://panoramax.xyz/#map=19.51/48.1204522/-1.7199004&pic=890b6268-7716-4e34-ada9-69985e6c1657
+```
+
+## :fontawesome-solid-computer: Interface settings
+
+### :material-target: `focus`: main shown element
+
+Switch to choose which element between map, picture or metadata should be shown wide at start. Examples:
+
+- `focus=map`
+- `focus=pic`
+- `focus=meta`
+
+By default, picture is shown wide.
+
+### :simple-speedtest: `speed`: sequence play speed
+
+The duration of stay on a picture during sequence play (excluding image dowloading time), in milliseconds. Authorized values are between 0 and 3000. Example:
+
+```urlencoded
+speed=1000
+```
+
+### :lock: `nav`: allowed navigation between pictures
+
+Choose the allowed navigation between pictures, to eventually restrict what is visible from first shown picture. Values are:
+
+- `nav=any` (or no value): no restriction in navigation (default)
+- `nav=seq`: can only see pictures in same sequence
+- `nav=none`: can only see current picture, no navigation to other picture allowed
+
+!!! note
+
+	This parameter is intended to work on page first load. If used after page load, you may switch to another picture or fully reload pictures metadata cache in order to have expected behaviour.
+
+## :material-image: Picture settings
+
+### :material-barcode: `pic`: picture ID
+
+The currently selected picture ID. Example:
+
+```urlencoded
+pic=890b6268-7716-4e34-ada9-69985e6c1657
+```
+
+### :material-arrow-all: `xyz`: picture position
+
+The shown position in picture, following this format:
+
+```
+x/y/z
+```
+
+With:
+
+- `x`: the heading in degrees (0 = North, 90 = East, 180 = South, 270 = West)
+- `y`: top/bottom position in degrees (-90 = bottom, 0 = front, 90 = top)
+- `z`: zoom level (0 = minimum/wide view, 100 = maximum/full zoom)
+
+Example:
+
+```urlencoded
+xyz=10/25/50
+```
+
+## :map: Map settings
+
+### :fontawesome-solid-location-dot: `map`: map position and visibility
+
+The `map` parameters handles both map visibility and position. It can take different values:
+
+- `map=none`: to completely disable the map.
+- `map=zoom/latitude/longitude`: for setting the map position (following [MapLibre GL JS hash format](https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters)). It updates automatically when map is moved.
+- no parameter set: shows the map of the whole world, or zoomed on instance area of interest.
+
+Example:
+
+```urlencoded
+map=19.51/48.1204522/-1.7199004
+```
+
+!!! note
+
+	The `map=none` is intended to work __on page first load only__. Changing it dynamically will not hide the map, and will be reset on next map movement.
+
+### :date: `date_from` and `date_to`: filter map data by date
+
+Minimum and maximum capture date for pictures and sequences to show on map (if map is enabled), in ISO format:
+
+```urlencoded
+date_from=2020-01-01&date_to=2023-12-31
+```
+
+### :material-rotate-360: `pic_type`: filter map data by picture type
+
+The type of picture (360° or classic) to show on map (if map is enabled). Examples:
+
+- `pic_type=flat` for classic pictures
+- `pic_type=equirectangular` for 360° pictures
+- Not set for showing both
+
+### :camera: `camera`: filter map data by camera make and model
+
+The camera make and model to filter shown pictures and sequences on map (if map is enabled). A fuzzy search is used to filter on map, but your string _should_ always start with camera make. Examples:
+
+- `camera=gopro` will display all pictures taken with any _GoPro_ camera
+- `camera=gopro%20max` will only show pictures taken with a _GoPro Max_ camera
+- `camera=max` will not shown any picture on map, as it doesn't match any camera make
+
+### :material-format-paint: `theme`: map colouring for pictures and sequences
+
+The map theme to use for displaying pictures and sequences (if map is enabled). Available themes are:
+
+- `theme=default` (or no setting defined): single color for display (no classification)
+- `theme=age`: color based on picture/sequence age (red = recent, yellow = 2+ years old)
+- `theme=type`: color based on camera type (orange = classic, green = 360°) 
+
+### :material-nature-people: `background`: map background
+
+The map background to display (if map is enabled, and raster background configured). Available values are:
+
+- `background=streets` (or no setting defined): classic streets map
+- `background=aerial`: aerial imagery (only if raster background available)
+
+### :fontawesome-solid-user: `users`: filter map data by username
+
+This parameter filters pictures and sequences shown on map to only keep those of concerned users. Each user is defined by its UUID (not username). List is comma-separated. Example:
+
+```urlencoded
+users=abcdefgh-1234-5678-9012-abcdefgh12345678,dcf0d3be-0418-4b71-9315-0ff8a2f86a0b
+```

package/docs/04_Advanced_examples.md

@@ -0,0 +1,214 @@
+# Advanced examples
+
+On this page, you will discover many examples on how to do practical things, like changing the map tiles, or adding custom buttons.
+
+## Change map background style
+
+The viewer can be configured to use a different map background than the default one. By default, an OpenStreetMap France classic style if offered. Changing the style is done by passing a `style` parameter on viewer setup. It should follow the [MapLibre Style specification](https://maplibre.org/maplibre-style-spec) and be passed as an object, or an URL to such style:
+
+```js
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://my-panoramax-server.net/api",
+	{
+		style: "https://my.tiles.provider/basic.json",
+		map: { startWide: true }
+	}
+);
+```
+
+Note that the viewer also support PMTiles (for a simpler tile hosting), so your style file can contain vector source defined like this:
+
+```json
+{
+  "sources": {
+    "protomaps": {
+        "type": "vector",
+        "url": "pmtiles://https://example.com/example.pmtiles",
+    }
+  }
+}
+```
+
+If you need to customize the received JSON style for compatibility issues, this can be done by passing an object instead of a string. Here is an example based on IGN map styling, which needs some parameter to be changed:
+
+```js
+fetch("https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json")
+.then(res => res.json())
+.then(style => {
+  // Patch tms scheme to xyz to make it compatible for Maplibre GL JS
+  style.sources.plan_ign.scheme = 'xyz';
+  style.sources.plan_ign.attribution = 'Données cartographiques : © IGN';
+
+  var viewer = new Panoramax.Viewer(
+    "viewer",
+    "https://my-panoramax-server.net/api",
+    {
+	  style,
+      map: { startWide: true }
+    }
+  );
+});
+```
+
+## Adding aerial imagery
+
+In complement of classic _streets_ rendering, you can add an aerial imagery as map background. This is possible using a WMS or WMTS service, and setting configuration as following (this example uses the French IGN aerial imagery):
+
+```js
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://my-panoramax-server.net/api",
+	{
+		map: {
+			startWide: true,
+			raster: {
+				type: "raster",
+				tiles: [
+					"https://wxs.ign.fr/ortho/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/jpeg&STYLE=normal"
+				],
+				attribution: "© IGN",
+				tileSize: 256
+			}
+		}
+	}
+);
+```
+
+## Use another geocoder
+
+The map offers a search bar for easily locating places based on user text search. This is handled by [MapLibre GL Geocoder](https://github.com/maplibre/maplibre-gl-geocoder). By default, the viewer uses [Nominatim](https://nominatim.org/) API, which provides geocoding using OpenStreetMap data.
+
+You can switch to using another geocoder though, we also directly offer the [Base adresse nationale](https://adresse.data.gouv.fr/) API (French authority geocoder) that you can use like this:
+
+```js
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://my-panoramax-server.net/api",
+	{
+		map: {
+			geocoder: { engine: "ban" }
+		}
+	}
+);
+```
+
+And you can also define your own custom geocoder using these options:
+
+```js
+var myOwnGeocoder = function(config) {
+	// Call your API
+	// Config parameter is based on geocoderApi.forwardGeocode.config structure
+	// Described here : https://github.com/maplibre/maplibre-gl-geocoder/blob/main/API.md#setgeocoderapi
+
+	// It returns a promise resolving on a Carmen GeoJSON FeatureCollection
+	// Format is described here : https://docs.mapbox.com/api/search/geocoding/#geocoding-response-object
+}
+
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://my-panoramax-server.net/api",
+	{
+		map: {
+			geocoder: { geocoderApi: {
+				forwardGeocode: myOwnGeocoder
+			} }
+		}
+	}
+);
+```
+
+## Authentication against API
+
+If the STAC API you're using needs some kind of authentication, you can pass it through Web Viewer options. Parameter `fetchOptions` allows you to set custom parameters for the [JS fetch function](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters), like the `credentials` setting. For example:
+
+```js
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://your-secured-stac.fr/api",
+	{
+		fetchOptions: {
+			credentials: "include"
+		}
+	}
+);
+```
+
+## Add custom buttons
+
+The viewer allows you to add a custom widget, placed just over the _Share_ button (bottom-right corner). It can be defined through `widgets.customWidget` option. Here's an example to add a simple link:
+
+```js
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://my-panoramax-server.net/api",
+	{
+		widgets: {
+			customWidget: `<a
+				href="https://my-amazing-page.net/"
+				class="gvs-btn gvs-widget-bg gvs-btn-large"
+				title="Go to an amazing page">🤩</a>`
+		},
+	}
+);
+```
+
+You can also pass more complex DOM elements:
+
+```js
+var myWidget = document.createElement("div");
+myWidget.innerHTML = "...";
+
+var viewer = new Panoramax.Viewer(
+	"viewer",
+	"https://my-panoramax-server.net/api",
+	{
+		widgets: { customWidget: myWidget }
+	}
+);
+```
+
+
+## Coverage map synced with external component
+
+Let's say you want to list all sequences of an user. You can display a standalone map which can be synced with your custom list.
+
+```js
+var map = new Panoramax.StandaloneMap(
+	"map",
+	"https://panoramax.ign.fr/api",
+	{
+		// Optional, to allow filtering by user
+		users: ["79b851b4-232a-4c96-ac1b-b6cf693c77ae"]
+	}
+);
+
+// Change visible map area
+map.fitBounds([west, south, east, north]);
+
+// Listen to user clicks on map
+map.addEventListener("select", e => {
+	console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
+});
+
+// Listen to sequence hovered on map
+map.addEventListener("hover", e => {
+	console.log("Hovered sequence", e.detail.seqId);
+});
+
+// You can also programatically change selection on map
+map.select(
+	"c463d190-06b0-47fb-98a8-b4a775a39ad6", // A sequence ID
+	"bdea1eb4-4496-46da-a4d5-b22b16e75fa8"  // A picture ID (can be null if unknown)
+);
+```
+
+
+## Clean-up in Single Page Application
+
+If you're running the viewer in a Single Page Application (SPA) and want to get rid of it, you must destroy properly the component before changing view. This allows the viewer to properly remove all its event listeners and free memory.
+
+```js
+viewer.destroy();
+delete viewer;
+```

package/docs/05_Compatibility.md

@@ -0,0 +1,85 @@
+# Compatibility with STAC API
+
+Panoramax viewer works best with a [Panoramax API](https://gitlab.com/panoramax/server/api), but is designed to be compatible with a wide range of [STAC API](https://github.com/radiantearth/stac-api-spec). Although, third-party STAC API needs the following requirements to work with our viewer:
+
+- Collections corresponding to pictures sequences, and items corresponding to individual pictures
+- Offer a `/search` endpoint ([documentation](https://github.com/radiantearth/stac-api-spec/tree/main/item-search))
+- Picture items should have required metadata documented below.
+- Offer a vector tiles endpoint for map display, either with:
+    - A [MapLibre Style JSON](https://maplibre.org/maplibre-style-spec/) file, advertised through landing page (`/api`) with a `xyz-style` link.
+    - A direct tiles URL, pointing to tiles in [MVT format](https://mapbox.github.io/vector-tile-spec/) and following layer structure described below. It must be advertised in landing page (`/api`) using [Web Map Links](https://github.com/stac-extensions/web-map-links) STAC extension (as `xyz` link).
+
+Optional metadata could also be supplied by third-party STAC API to improve viewer usability:
+
+- In landing page (`/api` route, corresponding to main STAC Catalog):
+    - An `extent` property ([following this format](https://github.com/radiantearth/stac-spec/blob/master/collection-spec/collection-spec.md#extent-object)) could be provided to make map zoom in available data area by default.
+    - A `collection-preview` link pointing to a formatted URL (like `https://yourserver.fr/api/collections/{id}/thumb.jpg`) which is a direct link to a thumbnail image to represent a specific sequence.
+    - A `item-preview` link pointing to a formatted URL (like `http://localhost:5000/api/pictures/{id}/thumb.jpg`) which is a direct link to a thumbnail image for a given picture.
+    - A `data` link with `application/rss+xml` media type pointing to a RSS feed of recently uploaded collections. Given link may also support a `bbox` query string parameter to filter collections by their location.
+    - Links `user-xyz` (MVT media type) and `user-search` (JSON media type) to allow filtering by user.
+    - A `report` link with `application/json` media type to allow posting pictures reports.
+    - A `title` property for showing proper API name in viewer debug.
+
+
+## Perspective imagery metadata
+
+Pictures metadata follow [STAC item specification](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md), plus some extensions:
+
+- _Perspective imagery specification_ for its pictures and sequences metadata ([documentation](https://github.com/stac-extensions/perspective-imagery))
+- _Tiled assets specification_ for smooth display of high-resolution pictures ([documentation](https://github.com/stac-extensions/tiled-assets))
+
+Viewer relies on following item metadata for display:
+
+- `assets`
+    - [`roles`](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md#asset-roles): `data`, `visual` and `thumbnail`
+    - `type`: `image/jpeg` or `image/webp`
+    - `href`
+  - `assets_templates`
+      - `tiles`
+          - `role`: `data`
+          - `href`
+- `geometry`
+- `collection`
+- `id`
+- `links`
+    - [`rel`](https://github.com/radiantearth/stac-spec/blob/master/item-spec/item-spec.md#link-object): `prev`, `next`, `related`
+    - `type`: `application/geo+json`
+    - `id`
+    - `geometry`
+    - `datetime`
+- `properties`
+    - `pers:interior_orientation`
+        - `field_of_view`
+        - `focal_length`
+    - `view:azimuth`
+    - `pers:roll`
+    - `pers:pitch`
+    - `datetime` or `datetimetz`
+    - `tiles:tile_matrix_sets`
+        - `geovisio`
+            - `type`: `TileMatrixSetType`
+            - `tileMatrix`
+                - `matrixHeight`
+                - `matrixWidth`
+                - `tileHeight`
+                - `tileWidth`
+
+
+## Vector tiles format
+
+MVT Vector tiles must contain at least two layers : sequences and pictures.
+
+Layer _sequences_:
+
+- Available on all zoom levels
+- Available properties: `id` (sequence ID)
+
+Layer _pictures_:
+
+- Available on zoom levels >= 15
+- Available properties: `id` (picture ID), `ts` (picture date/time), `heading` (picture heading in degrees)
+
+A supplementary layer _grid_ can be made available for low-zoom overview:
+
+- Available on zoom levels < 6
+- Available properties: `id` (grid cell ID), `nb_pictures` (amount of pictures), `coef` (value from 0 to 1, relative quantity of available pictures)

package/docs/09_Develop.md

@@ -0,0 +1,62 @@
+# Developing on the client
+
+You want to work on our library and offer bug fixes or new features ? That's awesome ! 🤩
+
+Here are some inputs about working with Panoramax web client code.
+
+If something seems missing or incomplete, don't hesitate to contact us by [email](mailto:panieravide@riseup.net) or using [an issue](https://gitlab.com/panoramax/clients/web-viewer/-/issues). We really want Panoramax to be a collaborative project, so everyone is welcome (see our [code of conduct](https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/CODE_OF_CONDUCT.md)).
+
+## Architecture
+
+The current code is split between various elements:
+
+- __Views__: a single functional entry, like _Viewer_ (map + picture), _StandaloneMap_ or _Editor_. They share parts of code in _CoreView_ class. They specialized the behaviour of components depending on the needs.
+- __Components__: reusable elements, like _Map_, _Photo_ or _Loader_. They are used in some views depending of the context.
+- __Utils__: utility functions, splitted in various files for clarity (_API, I18n, Map, Utils, Widgets_).
+
+![Class diagram of Panoramax web viewer](./images/class_diagram.jpg)
+
+The library is relies on various other libraries:
+
+- [Photo Sphere Viewer](https://github.com/mistic100/Photo-Sphere-Viewer), for displaying classic and 360° pictures
+- [Maplibre GL JS](https://github.com/maplibre/maplibre-gl-js), for displaying the map which shows sequences and pictures location
+- [JS Library Boilerplate](https://github.com/hodgef/js-library-boilerplate), for having a ready-to-use development toolbox
+
+
+## Testing
+
+We're trying to make Panoramax as reliable and secure as possible. To ensure this, we rely heavily on code testing. A variety of testing tools is made available:
+
+* `npm start` : launches a dev web server on [localhost:3000](http://localhost:3000)
+* `npm run test` : unit testing
+* `npm run lint` : syntax checks
+* `npm run coverage` : amount of tested code
+
+If you're working on bug fixes or new features, please __make sure to add appropriate tests__ to keep Panoramax level of quality.
+
+
+## Documentation
+
+Documentation is offered through two means in this repository:
+
+- Code itself is documented with [JSDoc comments](https://jsdoc.app/about-getting-started)
+- A broader doc is available in `docs` folder
+
+The code documentation can be generated using the following command:
+
+```bash
+npm run doc
+```
+
+That will update the `docs/02_Usage.md` file with all functions and parameters.
+
+The broader doc can be served and viewed using [Mkdocs](https://www.mkdocs.org/):
+
+```bash
+pip install mkdocs mkdocs-material
+mkdocs serve
+```
+
+## Make a release
+
+See [dedicated documentation](./90_Releases.md).

package/docs/90_Releases.md

@@ -0,0 +1,27 @@
+# Make a release
+
+Panoramax Web Viewer uses [semantic versioning](https://semver.org/) for its release numbers.
+
+!!! note
+
+	On Viewer versions < 3.0, a strong constraint was put to keep versions in sync between API and Viewer. Each component could have different `PATCH` versions, but compatibility __had to be__ ensured between `MAJOR.MINOR` versions. Since Viewer version >= 3.0, any STAC-compliant API should be supported by Viewer.
+
+Run these commands in order to issue a new release:
+
+```bash
+git checkout develop
+
+vim package.json		# Change version
+vim package-lock.json	# Change version
+npm run doc
+
+vim CHANGELOG.md	# Replace unreleased to version number (and links at bottom)
+
+git add *
+git commit -m "Release x.x.x"
+git tag -a x.x.x -m "Release x.x.x"
+git push origin develop
+git checkout main
+git merge develop
+git push origin main --tags
+```

package/docs/images/class_diagram.drawio

@@ -0,0 +1,129 @@
+<mxfile host="app.diagrams.net" modified="2024-03-25T13:20:49.245Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:124.0) Gecko/20100101 Firefox/124.0" etag="r1p7scxPnhYybEiXE-8z" version="23.1.2" type="device">
+  <diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">
+    <mxGraphModel dx="1018" dy="574" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="WIyWlLk6GJQsqaUBKTNV-0" />
+        <mxCell id="WIyWlLk6GJQsqaUBKTNV-1" parent="WIyWlLk6GJQsqaUBKTNV-0" />
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-1" value="CoreView" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="20" y="40" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-3" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-1">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-9" value="Viewer" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="20" y="160" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-10" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-9">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-11" value="StandaloneMap" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="200" y="160" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-12" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-11">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-13" value="Editor" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="380" y="160" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-14" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-13">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-15" value="Extends" style="endArrow=block;endSize=16;endFill=0;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-9" target="-sBJLWWXFzCuZ66xZKHM-1">
+          <mxGeometry width="160" relative="1" as="geometry">
+            <mxPoint x="310" y="260" as="sourcePoint" />
+            <mxPoint x="470" y="260" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-17" value="" style="endArrow=none;html=1;rounded=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="100" y="140" as="sourcePoint" />
+            <mxPoint x="460" y="140" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-19" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-11">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="370" y="290" as="sourcePoint" />
+            <mxPoint x="280" y="140" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-20" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="290" y="170" as="sourcePoint" />
+            <mxPoint x="460" y="140" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-22" value="Views" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="10" y="10" width="540" height="200" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-23" value="Components" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+          <mxGeometry x="10" y="230" width="540" height="90" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-26" value="Photo" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-23">
+          <mxGeometry x="10" y="40" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-27" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-26">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-28" value="Loader" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-23">
+          <mxGeometry x="370" y="40" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-29" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-28">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-24" value="Map" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-23">
+          <mxGeometry x="190" y="40" width="160" height="34" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-25" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="-sBJLWWXFzCuZ66xZKHM-24">
+          <mxGeometry y="26" width="160" height="8" as="geometry" />
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-30" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-9" target="-sBJLWWXFzCuZ66xZKHM-24">
+          <mxGeometry width="160" relative="1" as="geometry">
+            <mxPoint x="370" y="300" as="sourcePoint" />
+            <mxPoint x="234" y="272" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-31" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.506;exitY=1;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-10" target="-sBJLWWXFzCuZ66xZKHM-26">
+          <mxGeometry width="160" relative="1" as="geometry">
+            <mxPoint x="370" y="300" as="sourcePoint" />
+            <mxPoint x="530" y="300" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-32" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-1" target="-sBJLWWXFzCuZ66xZKHM-28">
+          <mxGeometry x="0.3304" width="160" relative="1" as="geometry">
+            <mxPoint x="111" y="204" as="sourcePoint" />
+            <mxPoint x="290" y="280" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="580" y="49" />
+              <mxPoint x="580" y="287" />
+            </Array>
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-38" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" target="-sBJLWWXFzCuZ66xZKHM-24">
+          <mxGeometry width="160" relative="1" as="geometry">
+            <mxPoint x="320" y="390" as="sourcePoint" />
+            <mxPoint x="480" y="390" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-39" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-11" target="-sBJLWWXFzCuZ66xZKHM-24">
+          <mxGeometry x="-0.5789" width="160" relative="1" as="geometry">
+            <mxPoint x="210" y="360" as="sourcePoint" />
+            <mxPoint x="240" y="270" as="targetPoint" />
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-41" value="Use" style="endArrow=open;endSize=12;dashed=1;html=1;rounded=0;exitX=0.25;exitY=1;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" target="-sBJLWWXFzCuZ66xZKHM-26">
+          <mxGeometry width="160" relative="1" as="geometry">
+            <mxPoint x="150" y="370" as="sourcePoint" />
+            <mxPoint x="310" y="370" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="370" y="220" />
+              <mxPoint x="250" y="220" />
+              <mxPoint x="190" y="240" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>