@panoramax/web-viewer 3.2.3-develop-f219e404 → 3.2.3-develop-6257391e

package/docs/images/class_diagram.drawio

@@ -1,94 +1,94 @@
-<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">
+<mxfile host="app.diagrams.net" modified="2025-03-17T12:37:16.267Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0" etag="SUUWP6lveJk2cUhdSDGS" version="24.1.0" 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">
+    <mxGraphModel dx="890" dy="496" 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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-1" value="Basic" 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;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-1" vertex="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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-9" vertex="1">
           <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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-11" value="CoverageMap" 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;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-11" vertex="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-13" vertex="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-9" target="-sBJLWWXFzCuZ66xZKHM-1" edge="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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-17" value="" style="endArrow=none;html=1;rounded=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" edge="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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-19" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-11" edge="1">
           <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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-20" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" edge="1">
           <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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-22" value="components.core" style="swimlane;whiteSpace=wrap;html=1;startSize=23;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="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">
+        <mxCell id="-sBJLWWXFzCuZ66xZKHM-23" value="components.ui" style="swimlane;whiteSpace=wrap;html=1;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-23" vertex="1">
           <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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-26" vertex="1">
           <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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-23" vertex="1">
           <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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-28" vertex="1">
           <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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-23" vertex="1">
           <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">
+        <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;" parent="-sBJLWWXFzCuZ66xZKHM-24" vertex="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-9" target="-sBJLWWXFzCuZ66xZKHM-24" edge="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-10" target="-sBJLWWXFzCuZ66xZKHM-26" edge="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-1" target="-sBJLWWXFzCuZ66xZKHM-28" edge="1">
           <mxGeometry x="0.3304" width="160" relative="1" as="geometry">
             <mxPoint x="111" y="204" as="sourcePoint" />
             <mxPoint x="290" y="280" as="targetPoint" />
@@ -99,20 +99,20 @@
             <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" target="-sBJLWWXFzCuZ66xZKHM-24" edge="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-11" target="-sBJLWWXFzCuZ66xZKHM-24" edge="1">
           <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">
+        <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;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="-sBJLWWXFzCuZ66xZKHM-13" target="-sBJLWWXFzCuZ66xZKHM-26" edge="1">
           <mxGeometry width="160" relative="1" as="geometry">
             <mxPoint x="150" y="370" as="sourcePoint" />
             <mxPoint x="310" y="370" as="targetPoint" />

package/docs/index.md

@@ -0,0 +1,112 @@
+# Web viewer documentation
+
+Welcome to Panoramax __Web Viewer__ documentation ! It will help you through all phases of setup, run and develop on Panoramax JS pictures viewer.
+
+![Web viewer screenshots](./images/screenshot.jpg)
+
+!!! note
+
+	If at some point you're lost or need help, you can contact us through [issues](https://gitlab.com/panoramax/clients/web-viewer/-/issues) or by [email](mailto:panoramax@panoramax.fr).
+
+## Install
+
+Many options are available for installing the viewer.
+
+=== ":simple-npm: NPM"
+
+	Panoramax viewer is available on NPM as [@panoramax/web-viewer](https://www.npmjs.com/package/@panoramax/web-viewer) package.
+
+	```bash
+	npm install @panoramax/web-viewer
+	```
+
+	If you want the latest version (corresponding to the `develop` git branch), you can use the `develop` NPM dist-tag:
+
+	```bash
+	npm install @panoramax/web-viewer@develop
+	```
+
+=== ":material-web: Hosted"
+
+	You can rely on various providers offering hosted NPM packages, for example JSDelivr.
+
+	```html
+	<!-- You may use another version than 4.0.0, just change the release in URL -->
+	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.0.0/build/index.css" />
+	<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@4.0.0/build/index.js"></script>
+	```
+
+=== ":material-code-tags: Source code"
+
+	You can install and use Panoramax web client based on code provided in this repository.
+
+	This library relies on any recent __Node.js__ version, which should be installed on your computer. Then, you can build the library using these commands:
+
+	```bash
+	git clone https://gitlab.com/panoramax/clients/web-viewer.git
+	cd web-viewer/
+	npm install
+	npm build
+	```
+
+
+## Basic usage
+
+First, you need to import Panoramax code:
+
+=== ":fontawesome-brands-js: Old-school JS"
+
+	Make sure to have both JS and CSS code available in your HTML `head` part:
+
+	```html
+	<!-- Change the actual path depending of where you installed the library -->
+	<link rel="stylesheet" type="text/css" href="web-viewer/build/index.css" />
+	<script src="web-viewer/build/index.js"></script>
+	```
+
+=== ":fontawesome-brands-node-js: New-style JS"
+
+	Make sure to import both JS and CSS in your code:
+
+	```js
+	import Panoramax from '@panoramax/web-viewer';
+	import '@panoramax/web-viewer/build/index.css';
+	```
+
+Once ready, you can create for example a viewer. We use web components to do so, you can create it in HTML or in other web components:
+
+```html
+<pnx-viewer
+	endpoint="https://api.panoramax.xyz/api"
+/>
+```
+
+[Many options are available to configure it finely](./reference/components/core/Viewer.md).
+
+Beyond classic viewer, other widgets are available and [can be tested online](https://viewer.geovisio.fr/).
+
+__Coverage map__
+
+A simple map for showing Panoramax data availability.
+
+```html
+<pnx-coverage-map
+  endpoint="https://api.panoramax.xyz/api"
+/>
+```
+
+[Many options are available as well](./reference/components/core/CoverageMap.md).
+
+__Editor__
+
+A map and photo viewer, focused on a single sequence, for previewing edits made to it.
+
+```html
+<pnx-editor
+  endpoint="https://panoramax.openstreetmap.fr/api"
+  sequence="id-to-an-existing-sequence"
+  picture="id-to-a-picture-in-this-sequence"
+/>
+```
+
+[Many options are available as well](./reference/components/core/Editor.md).

package/docs/reference/components/core/Basic.md

@@ -0,0 +1,153 @@
+<a name="Panoramax.components.core.Basic"></a>
+
+## Panoramax.components.core.Basic ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Emits**: [<code>select</code>](#Panoramax.components.core.Basic+event_select), [<code>ready</code>](#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](#Panoramax.components.core.Basic+event_broken), [<code>menu-opened</code>](#Panoramax.components.core.Basic+event_menu-opened)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+
+
+* [.Basic](#Panoramax.components.core.Basic) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new Basic()](#new_Panoramax.components.core.Basic_new)
+    * [.properties](#Panoramax.components.core.Basic+properties) : <code>Object</code>
+    * [.onceReady()](#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
+    * [.onceAPIReady()](#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * ["menu-opened"](#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](#Panoramax.components.core.Basic+event_select)
+    * ["ready"](#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.Basic_new"></a>
+
+### new Basic()
+Basic core component is a basic container for common functions through all core components.
+It is not intended to be used directly, it's only to be extended by other core components.
+
+<a name="Panoramax.components.core.Basic+properties"></a>
+
+### basic.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance mixin of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [picture] | <code>string</code> |  | The picture ID to display |
+| [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
+| [fetchOptions] | <code>object</code> |  | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) |
+| [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
+| [style] | <code>string</code> \| <code>object</code> |  | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
+
+<a name="Panoramax.components.core.Basic+onceReady"></a>
+
+### basic.onceReady() ⇒ <code>Promise</code>
+Waits for component to have its first loading done.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Fulfil**: <code>null</code> When initialization is complete.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### basic.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### basic.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### basic.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### basic.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### basic.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event for component being ready to use (API loaded)
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load
+
+**Kind**: event emitted by [<code>Basic</code>](#Panoramax.components.core.Basic)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+

package/docs/reference/components/core/CoverageMap.md

@@ -0,0 +1,160 @@
+<a name="Panoramax.components.core.CoverageMap"></a>
+
+## Panoramax.components.core.CoverageMap ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+**Kind**: static class of <code>Panoramax.components.core</code>  
+**Extends**: [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)  
+**Emits**: [<code>select</code>](Basic.md/#Panoramax.components.core.Basic+event_select), [<code>ready</code>](Basic.md/#Panoramax.components.core.Basic+event_ready), [<code>broken</code>](Basic.md/#Panoramax.components.core.Basic+event_broken)  
+**Element**: pnx-coverage-map  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| loader | [<code>Loader</code>](../ui/Loader.md/#Panoramax.components.ui.Loader) | The loader screen |
+| api | [<code>API</code>](../../utils/API.md/#Panoramax.utils.API) | The API manager |
+| map | [<code>Map</code>](../ui/Map.md/#Panoramax.components.ui.Map) | The MapLibre GL map itself |
+
+
+* [.CoverageMap](#Panoramax.components.core.CoverageMap) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
+    * [new CoverageMap()](#new_Panoramax.components.core.CoverageMap_new)
+    * [.properties](Basic.md/#Panoramax.components.core.Basic+properties) : <code>Object</code>
+    * [.onceReady()](Basic.md/#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
+    * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
+    * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
+    * [.select([seqId], [picId], [force])](#Panoramax.components.core.Basic+select)
+    * [.isWidthSmall()](Basic.md/#Panoramax.components.core.Basic+isWidthSmall) ⇒ <code>boolean</code>
+    * [.isHeightSmall()](Basic.md/#Panoramax.components.core.Basic+isHeightSmall) ⇒ <code>boolean</code>
+    * ["menu-opened"](Basic.md/#Panoramax.components.core.Basic+event_menu-opened)
+    * ["select"](Basic.md/#Panoramax.components.core.Basic+event_select)
+    * ["ready"](Basic.md/#Panoramax.components.core.Basic+event_ready)
+    * ["broken"](Basic.md/#Panoramax.components.core.Basic+event_broken)
+
+<a name="new_Panoramax.components.core.CoverageMap_new"></a>
+
+### new CoverageMap()
+Coverage Map is a basic map showing Panoramax coverage.
+
+**Example**  
+```html
+<pnx-coverage-map
+  endpoint="https://panoramax.openstreetmap.fr/"
+/>
+```
+<a name="Panoramax.components.core.Basic+properties"></a>
+
+### coverageMap.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance mixin of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [picture] | <code>string</code> |  | The picture ID to display |
+| [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
+| [fetchOptions] | <code>object</code> |  | Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters)) |
+| [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
+| [style] | <code>string</code> \| <code>object</code> |  | The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
+
+<a name="Panoramax.components.core.Basic+onceReady"></a>
+
+### coverageMap.onceReady() ⇒ <code>Promise</code>
+Waits for component to have its first loading done.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Fulfil**: <code>null</code> When initialization is complete.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+onceAPIReady"></a>
+
+### coverageMap.onceAPIReady() ⇒ <code>Promise</code>
+Waits for initial API setup.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Fulfil**: <code>null</code> When API is ready.  
+**Reject**: <code>string</code> Error message  
+<a name="Panoramax.components.core.Basic+getClassName"></a>
+
+### coverageMap.getClassName() ⇒ <code>string</code>
+This allows to retrieve an always correct class name.
+This is crap, but avoids issues with Webpack & so on.
+
+Each inheriting class must override this method.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>string</code> - The class name (for example "Basic")  
+<a name="Panoramax.components.core.Basic+select"></a>
+
+### coverageMap.select([seqId], [picId], [force])
+Change the currently picture and/or sequence.
+Calling the method without parameters unselects.
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [seqId] | <code>string</code> | <code>null</code> | The sequence UUID |
+| [picId] | <code>string</code> | <code>null</code> | The picture UUID |
+| [force] | <code>boolean</code> | <code>false</code> | Force select even if already selected |
+
+<a name="Panoramax.components.core.Basic+isWidthSmall"></a>
+
+### coverageMap.isWidthSmall() ⇒ <code>boolean</code>
+Is the view running in a small container (small embed or smartphone)
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>boolean</code> - True if container is small  
+<a name="Panoramax.components.core.Basic+isHeightSmall"></a>
+
+### coverageMap.isHeightSmall() ⇒ <code>boolean</code>
+Is the view running in a small-height container (small embed or smartphone)
+
+**Kind**: instance method of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Returns**: <code>boolean</code> - True if container height is small  
+<a name="Panoramax.components.core.Basic+event_menu-opened"></a>
+
+### "menu-opened"
+Event for overlaying menu opening
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.menu | <code>Element</code> | The opened menu |
+
+<a name="Panoramax.components.core.Basic+event_select"></a>
+
+### "select"
+Event for sequence/picture selection
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.seqId | <code>string</code> | The selected sequence ID |
+| detail.picId | <code>string</code> | The selected picture ID (or null if not a precise picture clicked) |
+| [detail.prevSeqId] | <code>string</code> | The previously selected sequence ID (or null if none) |
+| [detail.prevPicId] | <code>string</code> | The previously selected picture ID (or null if none) |
+
+<a name="Panoramax.components.core.Basic+event_ready"></a>
+
+### "ready"
+Event for component being ready to use (API loaded)
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+<a name="Panoramax.components.core.Basic+event_broken"></a>
+
+### "broken"
+Event for viewer failing to initially load
+
+**Kind**: event emitted by [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.error | <code>string</code> | The user-friendly error message to display |
+