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