@annotorious/annotorious 3.7.21 → 3.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/annotation/editors/rectangle/rotationUtils.d.ts +26 -0
- package/dist/annotorious.css +1 -1
- package/dist/annotorious.es.js +3362 -3209
- package/dist/annotorious.es.js.map +1 -1
- package/dist/annotorious.js +1 -1
- package/dist/annotorious.js.map +1 -1
- package/dist/model/core/rectangle/Rectangle.d.ts +1 -0
- package/package.json +2 -2
- package/src/Annotorious.css +1 -0
- package/src/annotation/SVGAnnotationLayer.svelte +3 -3
- package/src/annotation/editors/rectangle/RectangleEditor.svelte +184 -68
- package/src/annotation/editors/rectangle/rotationUtils.ts +104 -0
- package/src/annotation/shapes/Rectangle.svelte +22 -15
- package/src/annotation/tools/rectangle/RubberbandRectangle.svelte +1 -0
- package/src/model/core/rectangle/Rectangle.ts +2 -0
- package/src/model/core/rectangle/rectangleUtils.ts +31 -5
- package/src/model/w3c/W3CImageFormatAdapter.ts +6 -4
- package/src/model/w3c/fragment/FragmentSelector.ts +2 -1
- package/src/model/w3c/svg/SVGSelector.ts +81 -0
- package/src/state/spatialTree.ts +2 -5
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { RectangleGeometry } from '../../../model';
|
|
2
|
+
/**
|
|
3
|
+
* Rotates a point around a center by the given angle (in rad).
|
|
4
|
+
*/
|
|
5
|
+
export declare const rotatePoint: (point: [number, number], center: [number, number], angle: number) => [number, number];
|
|
6
|
+
/**
|
|
7
|
+
* Gets the four corner points of a rotated rectangle in world space.
|
|
8
|
+
*/
|
|
9
|
+
export declare const getRotatedCorners: (x: number, y: number, w: number, h: number, rot?: number) => [[number, number], [number, number], [number, number], [number, number]];
|
|
10
|
+
/**
|
|
11
|
+
* Calculates the position of the rotation handle.
|
|
12
|
+
*/
|
|
13
|
+
export declare const getRotationHandlePosition: (geom: RectangleGeometry, offset: number) => [number, number];
|
|
14
|
+
/**
|
|
15
|
+
* Transforms a movement delta from world coords to the rectangle's
|
|
16
|
+
* local (non-rotated) coordinate system.
|
|
17
|
+
*/
|
|
18
|
+
export declare const transformDeltaToLocalCoords: (deltaX: number, deltaY: number, rot: number) => [number, number];
|
|
19
|
+
/**
|
|
20
|
+
* Calculates the rotation angle between a point and the origin, relative to a center.
|
|
21
|
+
*/
|
|
22
|
+
export declare const angleFromPoints: (point1: [number, number], point2: [number, number], center: [number, number]) => number;
|
|
23
|
+
/**
|
|
24
|
+
* Snaps an angle to the nearest 45-degree increment
|
|
25
|
+
*/
|
|
26
|
+
export declare const snapAngle: (angle: number, inc?: number) => number;
|
package/dist/annotorious.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
circle.a9s-handle-buffer.svelte-qtyc7s:focus{outline:none}circle.a9s-handle-buffer.svelte-qtyc7s:focus-visible{stroke:#fffc;stroke-width:3px}.a9s-polygon-midpoint.svelte-12ykj76{cursor:crosshair}.a9s-polygon-midpoint-buffer.svelte-12ykj76{fill:transparent}.a9s-polygon-midpoint-outer.svelte-12ykj76{display:none;fill:transparent;pointer-events:none;stroke:#00000059;stroke-width:1.5px;vector-effect:non-scaling-stroke}.a9s-polygon-midpoint-inner.svelte-12ykj76{fill:#00000040;pointer-events:none;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke}mask.a9s-polygon-editor-mask.svelte-1h2slbm>rect.svelte-1h2slbm{fill:#fff}mask.a9s-polygon-editor-mask.svelte-1h2slbm>circle.svelte-1h2slbm,mask.a9s-polygon-editor-mask.svelte-1h2slbm>polygon.svelte-1h2slbm{fill:#000}mask.a9s-rectangle-editor-mask.svelte-
|
|
1
|
+
circle.a9s-handle-buffer.svelte-qtyc7s:focus{outline:none}circle.a9s-handle-buffer.svelte-qtyc7s:focus-visible{stroke:#fffc;stroke-width:3px}.a9s-polygon-midpoint.svelte-12ykj76{cursor:crosshair}.a9s-polygon-midpoint-buffer.svelte-12ykj76{fill:transparent}.a9s-polygon-midpoint-outer.svelte-12ykj76{display:none;fill:transparent;pointer-events:none;stroke:#00000059;stroke-width:1.5px;vector-effect:non-scaling-stroke}.a9s-polygon-midpoint-inner.svelte-12ykj76{fill:#00000040;pointer-events:none;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke}mask.a9s-polygon-editor-mask.svelte-1h2slbm>rect.svelte-1h2slbm{fill:#fff}mask.a9s-polygon-editor-mask.svelte-1h2slbm>circle.svelte-1h2slbm,mask.a9s-polygon-editor-mask.svelte-1h2slbm>polygon.svelte-1h2slbm{fill:#000}mask.a9s-rectangle-editor-mask.svelte-1bwhzbc rect.rect-mask-bg.svelte-1bwhzbc{fill:#fff}mask.a9s-rectangle-editor-mask.svelte-1bwhzbc polygon.rect-mask-fg.svelte-1bwhzbc{fill:#000}.a9s-rotation-handle-line-bg{stroke:#00000080;stroke-width:1.5px;vector-effect:non-scaling-stroke}.a9s-rotation-handle-line-fg{stroke:#fff;stroke-width:1px;stroke-dasharray:3 1;vector-effect:non-scaling-stroke}mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>rect.svelte-1vxo6dc{fill:#fff}mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>circle.svelte-1vxo6dc,mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>path.svelte-1vxo6dc{fill:#000}mask.a9s-rubberband-rectangle-mask.svelte-1a76qe7>rect.rect-mask-bg.svelte-1a76qe7{fill:#fff}mask.a9s-rubberband-rectangle-mask.svelte-1a76qe7>rect.rect-mask-fg.svelte-1a76qe7{fill:#000}mask.a9s-rubberband-polygon-mask.svelte-18wrg3t>rect.svelte-18wrg3t{fill:#fff}mask.a9s-rubberband-polygon-mask.svelte-18wrg3t>polygon.svelte-18wrg3t{fill:#000}circle.a9s-handle.svelte-18wrg3t.svelte-18wrg3t{fill:#fff;pointer-events:none;stroke:#00000059;stroke-width:1px;vector-effect:non-scaling-stroke}path.open.svelte-1w0132l{fill:transparent!important}.a9s-annotationlayer{box-sizing:border-box;height:100%;left:0;outline:none;position:absolute;top:0;touch-action:none;width:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.a9s-annotationlayer.hover{cursor:pointer}.a9s-annotationlayer.hidden{display:none}.a9s-annotationlayer ellipse,.a9s-annotationlayer line,.a9s-annotationlayer path,.a9s-annotationlayer polygon,.a9s-annotationlayer rect{fill:transparent;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke;-webkit-tap-highlight-color:transparent}.a9s-touch-halo{fill:transparent;pointer-events:none;stroke-width:0;transition:fill .15s}.a9s-touch-halo.touched{fill:#fff6}.a9s-handle-buffer{fill:transparent}.a9s-handle [role=button]{cursor:inherit!important}.a9s-handle-dot{fill:#fff;pointer-events:none;stroke:#00000059;stroke-width:1px;vector-effect:non-scaling-stroke}.a9s-handle-dot.selected{fill:#1a1a1a;stroke:none}.a9s-handle-selected{animation:dash-rotate .35s linear infinite reverse;fill:#ffffff40;stroke:#000000e6;stroke-dasharray:2 2;stroke-width:1px;pointer-events:none;vector-effect:non-scaling-stroke}@keyframes dash-rotate{0%{stroke-dashoffset:0}to{stroke-dashoffset:4}}.a9s-edge-handle{fill:transparent;stroke:transparent;stroke-width:6px;vector-effect:non-scaling-stroke}.a9s-shape-handle,.a9s-handle{cursor:move}.a9s-handle.a9s-corner-handle{cursor:crosshair}.a9s-edge-handle-top{cursor:n-resize}.a9s-edge-handle-right{cursor:e-resize}.a9s-edge-handle-bottom{cursor:s-resize}.a9s-edge-handle-left{cursor:w-resize}.a9s-handle.a9s-corner-handle-topleft{cursor:nw-resize}.a9s-handle.a9s-corner-handle-topright{cursor:ne-resize}.a9s-handle.a9s-corner-handle-bottomright{cursor:se-resize}.a9s-handle.a9s-corner-handle-bottomleft{cursor:sw-resize}.a9s-annotationlayer .a9s-outer,div[data-theme=dark] .a9s-annotationlayer .a9s-outer{display:none}.a9s-annotationlayer .a9s-inner,div[data-theme=dark] .a9s-annotationlayer .a9s-inner{fill:#0000001f;stroke:#000;stroke-width:1px}rect.a9s-handle,div[data-theme=dark] rect.a9s-handle{fill:#000;rx:2px}rect.a9s-close-polygon-handle,div[data-theme=dark] rect.a9s-close-polygon-handle{fill:#000;rx:1px}.a9s-annotationlayer .a9s-outer,div[data-theme=light] .a9s-annotationlayer .a9s-outer{display:block;stroke:#00000059;stroke-width:3px}.a9s-annotationlayer .a9s-inner,div[data-theme=light] .a9s-annotationlayer .a9s-inner{fill:#ffffff26;stroke:#fff;stroke-width:1.5px}rect.a9s-handle,div[data-theme=light] rect.a9s-handle{fill:#fff;rx:1px;stroke:#00000073;stroke-width:1px}rect.a9s-close-polygon-handle,div[data-theme=light] rect.a9s-close-polygon-handle{fill:#fff;rx:1px;stroke:#00000073;stroke-width:1px}
|