canvu-react 0.4.23 → 0.4.24
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/native.cjs +88 -79
- package/dist/native.cjs.map +1 -1
- package/dist/native.js +88 -79
- package/dist/native.js.map +1 -1
- package/package.json +1 -1
package/dist/native.js
CHANGED
|
@@ -940,10 +940,6 @@ function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
|
|
|
940
940
|
const ly = sin * dx + cos * dy;
|
|
941
941
|
return { x: c.x + lx, y: c.y + ly };
|
|
942
942
|
}
|
|
943
|
-
function itemPivotWorld(item) {
|
|
944
|
-
const r = normalizeRect(item.bounds);
|
|
945
|
-
return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
|
|
946
|
-
}
|
|
947
943
|
function boundsAabbForRotatedItem(item) {
|
|
948
944
|
const rot = getItemRotationRad(item);
|
|
949
945
|
if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
|
|
@@ -2029,6 +2025,92 @@ function resolveNativeStrokePreviewStyle(tool, previewStrokeStyle) {
|
|
|
2029
2025
|
...previewStrokeStyle?.strokeDash != null && !isLaser ? { strokeDash: previewStrokeStyle.strokeDash } : {}
|
|
2030
2026
|
};
|
|
2031
2027
|
}
|
|
2028
|
+
|
|
2029
|
+
// src/native/native-vector-interactions.ts
|
|
2030
|
+
var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
|
|
2031
|
+
function nativeItemPlacementBounds(item) {
|
|
2032
|
+
const bounds = normalizeRect(item.bounds);
|
|
2033
|
+
return {
|
|
2034
|
+
x: item.x,
|
|
2035
|
+
y: item.y,
|
|
2036
|
+
width: bounds.width,
|
|
2037
|
+
height: bounds.height
|
|
2038
|
+
};
|
|
2039
|
+
}
|
|
2040
|
+
function supportsNativeResizeHandles(item) {
|
|
2041
|
+
const k = item?.toolKind;
|
|
2042
|
+
if (k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "line" || k === "arrow" || k === "image" || k === "text") {
|
|
2043
|
+
return true;
|
|
2044
|
+
}
|
|
2045
|
+
if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item?.pathPointsLocal && item.pathPointsLocal.length > 0) {
|
|
2046
|
+
return true;
|
|
2047
|
+
}
|
|
2048
|
+
return k === "custom" && !!item?.customIntrinsicSize && !!item?.customInnerSvg;
|
|
2049
|
+
}
|
|
2050
|
+
function hitTestNativeSelectionHandle({
|
|
2051
|
+
selectedItem,
|
|
2052
|
+
selectedCount,
|
|
2053
|
+
worldPoint,
|
|
2054
|
+
zoom
|
|
2055
|
+
}) {
|
|
2056
|
+
if (selectedCount !== 1) return null;
|
|
2057
|
+
if (!selectedItem || selectedItem.locked) return null;
|
|
2058
|
+
if (!supportsNativeResizeHandles(selectedItem)) return null;
|
|
2059
|
+
const bounds = nativeItemPlacementBounds(selectedItem);
|
|
2060
|
+
const rotation = selectedItem.rotation ?? 0;
|
|
2061
|
+
const handleRadiusWorld = NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX / Math.max(zoom, 1e-9);
|
|
2062
|
+
const rotateOffsetWorld = 24 / Math.max(zoom, 1e-9);
|
|
2063
|
+
if (hitTestRotateHandle(
|
|
2064
|
+
bounds,
|
|
2065
|
+
rotation,
|
|
2066
|
+
worldPoint.x,
|
|
2067
|
+
worldPoint.y,
|
|
2068
|
+
handleRadiusWorld,
|
|
2069
|
+
rotateOffsetWorld
|
|
2070
|
+
)) {
|
|
2071
|
+
return { kind: "rotate" };
|
|
2072
|
+
}
|
|
2073
|
+
const handle = hitTestResizeHandle(
|
|
2074
|
+
bounds,
|
|
2075
|
+
worldPoint.x,
|
|
2076
|
+
worldPoint.y,
|
|
2077
|
+
handleRadiusWorld,
|
|
2078
|
+
rotation
|
|
2079
|
+
);
|
|
2080
|
+
return handle ? { kind: "resize", handle } : null;
|
|
2081
|
+
}
|
|
2082
|
+
function pointInNativeSelectedItemBounds(item, worldPoint) {
|
|
2083
|
+
const bounds = normalizeRect(item.bounds);
|
|
2084
|
+
const local = worldToItemLocal(
|
|
2085
|
+
worldPoint.x,
|
|
2086
|
+
worldPoint.y,
|
|
2087
|
+
item.x,
|
|
2088
|
+
item.y,
|
|
2089
|
+
bounds.width,
|
|
2090
|
+
bounds.height,
|
|
2091
|
+
item.rotation ?? 0
|
|
2092
|
+
);
|
|
2093
|
+
return local.x >= 0 && local.x <= bounds.width && local.y >= 0 && local.y <= bounds.height;
|
|
2094
|
+
}
|
|
2095
|
+
function resolveNativeCustomPlacement(toolId, customPlacement, customPlacements) {
|
|
2096
|
+
if (customPlacement?.toolId === toolId) return customPlacement;
|
|
2097
|
+
return customPlacements?.find((placement) => placement.toolId === toolId) ?? null;
|
|
2098
|
+
}
|
|
2099
|
+
function nativeRotationDragStart(input) {
|
|
2100
|
+
const bounds = nativeItemPlacementBounds(input.item);
|
|
2101
|
+
const pivotWorld = {
|
|
2102
|
+
x: bounds.x + bounds.width / 2,
|
|
2103
|
+
y: bounds.y + bounds.height / 2
|
|
2104
|
+
};
|
|
2105
|
+
return {
|
|
2106
|
+
pivotWorld,
|
|
2107
|
+
startPointerAngleRad: Math.atan2(
|
|
2108
|
+
input.worldPoint.y - pivotWorld.y,
|
|
2109
|
+
input.worldPoint.x - pivotWorld.x
|
|
2110
|
+
),
|
|
2111
|
+
startRotation: input.item.rotation ?? 0
|
|
2112
|
+
};
|
|
2113
|
+
}
|
|
2032
2114
|
var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
|
|
2033
2115
|
var ERASER_PREVIEW_OPACITY = 0.3;
|
|
2034
2116
|
var OVERLAY_STROKE_PX = 1.25;
|
|
@@ -2067,7 +2149,7 @@ function NativeInteractionOverlay({
|
|
|
2067
2149
|
const selectionElements = useMemo(() => {
|
|
2068
2150
|
if (selectedItems.length === 0) return null;
|
|
2069
2151
|
const single = selectedItems.length === 1 ? selectedItems[0] : void 0;
|
|
2070
|
-
const bSingle = single ?
|
|
2152
|
+
const bSingle = single ? nativeItemPlacementBounds(single) : null;
|
|
2071
2153
|
const rotSingle = single?.rotation ?? 0;
|
|
2072
2154
|
const rotHandlePos = showResizeHandles && bSingle && single ? getRotationHandleWorldPosition(bSingle, rotSingle, rotateOffsetWorld) : null;
|
|
2073
2155
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -3784,79 +3866,6 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
|
|
|
3784
3866
|
}
|
|
3785
3867
|
return { ...item, x: nb.x, y: nb.y, bounds: nb };
|
|
3786
3868
|
}
|
|
3787
|
-
|
|
3788
|
-
// src/native/native-vector-interactions.ts
|
|
3789
|
-
var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
|
|
3790
|
-
function supportsNativeResizeHandles(item) {
|
|
3791
|
-
const k = item?.toolKind;
|
|
3792
|
-
if (k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "line" || k === "arrow" || k === "image" || k === "text") {
|
|
3793
|
-
return true;
|
|
3794
|
-
}
|
|
3795
|
-
if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item?.pathPointsLocal && item.pathPointsLocal.length > 0) {
|
|
3796
|
-
return true;
|
|
3797
|
-
}
|
|
3798
|
-
return k === "custom" && !!item?.customIntrinsicSize && !!item?.customInnerSvg;
|
|
3799
|
-
}
|
|
3800
|
-
function hitTestNativeSelectionHandle({
|
|
3801
|
-
selectedItem,
|
|
3802
|
-
selectedCount,
|
|
3803
|
-
worldPoint,
|
|
3804
|
-
zoom
|
|
3805
|
-
}) {
|
|
3806
|
-
if (selectedCount !== 1) return null;
|
|
3807
|
-
if (!selectedItem || selectedItem.locked) return null;
|
|
3808
|
-
if (!supportsNativeResizeHandles(selectedItem)) return null;
|
|
3809
|
-
const bounds = normalizeRect(selectedItem.bounds);
|
|
3810
|
-
const rotation = selectedItem.rotation ?? 0;
|
|
3811
|
-
const handleRadiusWorld = NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX / Math.max(zoom, 1e-9);
|
|
3812
|
-
const rotateOffsetWorld = 24 / Math.max(zoom, 1e-9);
|
|
3813
|
-
if (hitTestRotateHandle(
|
|
3814
|
-
bounds,
|
|
3815
|
-
rotation,
|
|
3816
|
-
worldPoint.x,
|
|
3817
|
-
worldPoint.y,
|
|
3818
|
-
handleRadiusWorld,
|
|
3819
|
-
rotateOffsetWorld
|
|
3820
|
-
)) {
|
|
3821
|
-
return { kind: "rotate" };
|
|
3822
|
-
}
|
|
3823
|
-
const handle = hitTestResizeHandle(
|
|
3824
|
-
bounds,
|
|
3825
|
-
worldPoint.x,
|
|
3826
|
-
worldPoint.y,
|
|
3827
|
-
handleRadiusWorld,
|
|
3828
|
-
rotation
|
|
3829
|
-
);
|
|
3830
|
-
return handle ? { kind: "resize", handle } : null;
|
|
3831
|
-
}
|
|
3832
|
-
function pointInNativeSelectedItemBounds(item, worldPoint) {
|
|
3833
|
-
const bounds = normalizeRect(item.bounds);
|
|
3834
|
-
const local = worldToItemLocal(
|
|
3835
|
-
worldPoint.x,
|
|
3836
|
-
worldPoint.y,
|
|
3837
|
-
item.x,
|
|
3838
|
-
item.y,
|
|
3839
|
-
bounds.width,
|
|
3840
|
-
bounds.height,
|
|
3841
|
-
item.rotation ?? 0
|
|
3842
|
-
);
|
|
3843
|
-
return local.x >= 0 && local.x <= bounds.width && local.y >= 0 && local.y <= bounds.height;
|
|
3844
|
-
}
|
|
3845
|
-
function resolveNativeCustomPlacement(toolId, customPlacement, customPlacements) {
|
|
3846
|
-
if (customPlacement?.toolId === toolId) return customPlacement;
|
|
3847
|
-
return customPlacements?.find((placement) => placement.toolId === toolId) ?? null;
|
|
3848
|
-
}
|
|
3849
|
-
function nativeRotationDragStart(input) {
|
|
3850
|
-
const pivotWorld = itemPivotWorld(input.item);
|
|
3851
|
-
return {
|
|
3852
|
-
pivotWorld,
|
|
3853
|
-
startPointerAngleRad: Math.atan2(
|
|
3854
|
-
input.worldPoint.y - pivotWorld.y,
|
|
3855
|
-
input.worldPoint.x - pivotWorld.x
|
|
3856
|
-
),
|
|
3857
|
-
startRotation: input.item.rotation ?? 0
|
|
3858
|
-
};
|
|
3859
|
-
}
|
|
3860
3869
|
var MIN_PLACE_SIZE = 8;
|
|
3861
3870
|
var MIN_ARROW_DRAG_PX = 8;
|
|
3862
3871
|
var TAP_PX = 20;
|
|
@@ -4138,7 +4147,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
|
|
|
4138
4147
|
handle: selectionHandle.handle,
|
|
4139
4148
|
snapshot: selectedItem,
|
|
4140
4149
|
start: {
|
|
4141
|
-
bounds: selectedItem
|
|
4150
|
+
bounds: nativeItemPlacementBounds(selectedItem),
|
|
4142
4151
|
line: selectedItem.line
|
|
4143
4152
|
}
|
|
4144
4153
|
};
|