canvu-react 0.4.20 → 0.4.21

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 CHANGED
@@ -2004,178 +2004,6 @@ function NativeShapeRenderer({ item }) {
2004
2004
  }
2005
2005
  return null;
2006
2006
  }
2007
- var CURSOR_STROKE = "#18181b";
2008
- var CURSOR_STROKE_WIDTH = 2;
2009
- var CROSSHAIR_STROKE_WIDTH = 1.5;
2010
- function NativeDrawCursor() {
2011
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2012
- /* @__PURE__ */ jsxRuntime.jsx(
2013
- reactNativeSkia.Path,
2014
- {
2015
- path: "M13 21h8",
2016
- color: CURSOR_STROKE,
2017
- style: "stroke",
2018
- strokeWidth: CURSOR_STROKE_WIDTH,
2019
- strokeCap: "round",
2020
- strokeJoin: "round",
2021
- antiAlias: true
2022
- }
2023
- ),
2024
- /* @__PURE__ */ jsxRuntime.jsx(
2025
- reactNativeSkia.Path,
2026
- {
2027
- path: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
2028
- color: CURSOR_STROKE,
2029
- style: "stroke",
2030
- strokeWidth: CURSOR_STROKE_WIDTH,
2031
- strokeCap: "round",
2032
- strokeJoin: "round",
2033
- antiAlias: true
2034
- }
2035
- )
2036
- ] });
2037
- }
2038
- function NativeMarkerCursor() {
2039
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2040
- /* @__PURE__ */ jsxRuntime.jsx(
2041
- reactNativeSkia.Path,
2042
- {
2043
- path: "m9 11-6 6v3h9l3-3",
2044
- color: CURSOR_STROKE,
2045
- style: "stroke",
2046
- strokeWidth: CURSOR_STROKE_WIDTH,
2047
- strokeCap: "round",
2048
- strokeJoin: "round",
2049
- antiAlias: true
2050
- }
2051
- ),
2052
- /* @__PURE__ */ jsxRuntime.jsx(
2053
- reactNativeSkia.Path,
2054
- {
2055
- path: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",
2056
- color: CURSOR_STROKE,
2057
- style: "stroke",
2058
- strokeWidth: CURSOR_STROKE_WIDTH,
2059
- strokeCap: "round",
2060
- strokeJoin: "round",
2061
- antiAlias: true
2062
- }
2063
- )
2064
- ] });
2065
- }
2066
- function NativeEraserCursor() {
2067
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2068
- /* @__PURE__ */ jsxRuntime.jsx(
2069
- reactNativeSkia.Path,
2070
- {
2071
- path: "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21",
2072
- color: CURSOR_STROKE,
2073
- style: "stroke",
2074
- strokeWidth: CURSOR_STROKE_WIDTH,
2075
- strokeCap: "round",
2076
- strokeJoin: "round",
2077
- antiAlias: true
2078
- }
2079
- ),
2080
- /* @__PURE__ */ jsxRuntime.jsx(
2081
- reactNativeSkia.Path,
2082
- {
2083
- path: "m5.082 11.09 8.828 8.828",
2084
- color: CURSOR_STROKE,
2085
- style: "stroke",
2086
- strokeWidth: CURSOR_STROKE_WIDTH,
2087
- strokeCap: "round",
2088
- strokeJoin: "round",
2089
- antiAlias: true
2090
- }
2091
- )
2092
- ] });
2093
- }
2094
- function NativeCrosshairCursor() {
2095
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2096
- /* @__PURE__ */ jsxRuntime.jsx(
2097
- reactNativeSkia.Line,
2098
- {
2099
- p1: reactNativeSkia.vec(12, 3),
2100
- p2: reactNativeSkia.vec(12, 21),
2101
- color: CURSOR_STROKE,
2102
- style: "stroke",
2103
- strokeWidth: CROSSHAIR_STROKE_WIDTH,
2104
- strokeCap: "round",
2105
- antiAlias: true
2106
- }
2107
- ),
2108
- /* @__PURE__ */ jsxRuntime.jsx(
2109
- reactNativeSkia.Line,
2110
- {
2111
- p1: reactNativeSkia.vec(3, 12),
2112
- p2: reactNativeSkia.vec(21, 12),
2113
- color: CURSOR_STROKE,
2114
- style: "stroke",
2115
- strokeWidth: CROSSHAIR_STROKE_WIDTH,
2116
- strokeCap: "round",
2117
- antiAlias: true
2118
- }
2119
- )
2120
- ] });
2121
- }
2122
- function NativeTextCursor() {
2123
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2124
- /* @__PURE__ */ jsxRuntime.jsx(
2125
- reactNativeSkia.Line,
2126
- {
2127
- p1: reactNativeSkia.vec(12, 4),
2128
- p2: reactNativeSkia.vec(12, 20),
2129
- color: CURSOR_STROKE,
2130
- style: "stroke",
2131
- strokeWidth: CURSOR_STROKE_WIDTH,
2132
- strokeCap: "round",
2133
- antiAlias: true
2134
- }
2135
- ),
2136
- /* @__PURE__ */ jsxRuntime.jsx(
2137
- reactNativeSkia.Line,
2138
- {
2139
- p1: reactNativeSkia.vec(8, 4),
2140
- p2: reactNativeSkia.vec(16, 4),
2141
- color: CURSOR_STROKE,
2142
- style: "stroke",
2143
- strokeWidth: CURSOR_STROKE_WIDTH,
2144
- strokeCap: "round",
2145
- antiAlias: true
2146
- }
2147
- ),
2148
- /* @__PURE__ */ jsxRuntime.jsx(
2149
- reactNativeSkia.Line,
2150
- {
2151
- p1: reactNativeSkia.vec(8, 20),
2152
- p2: reactNativeSkia.vec(16, 20),
2153
- color: CURSOR_STROKE,
2154
- style: "stroke",
2155
- strokeWidth: CURSOR_STROKE_WIDTH,
2156
- strokeCap: "round",
2157
- antiAlias: true
2158
- }
2159
- )
2160
- ] });
2161
- }
2162
- function NativeToolCursorGlyph({
2163
- cursor
2164
- }) {
2165
- if (cursor.kind === "draw") return /* @__PURE__ */ jsxRuntime.jsx(NativeDrawCursor, {});
2166
- if (cursor.kind === "marker") return /* @__PURE__ */ jsxRuntime.jsx(NativeMarkerCursor, {});
2167
- if (cursor.kind === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(NativeEraserCursor, {});
2168
- if (cursor.kind === "text") return /* @__PURE__ */ jsxRuntime.jsx(NativeTextCursor, {});
2169
- return /* @__PURE__ */ jsxRuntime.jsx(NativeCrosshairCursor, {});
2170
- }
2171
- function NativeToolCursorRenderer({
2172
- cursor,
2173
- point
2174
- }) {
2175
- const x = point.x - cursor.hotspot.x;
2176
- const y = point.y - cursor.hotspot.y;
2177
- return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: [{ translateX: x }, { translateY: y }], children: /* @__PURE__ */ jsxRuntime.jsx(NativeToolCursorGlyph, { cursor }) });
2178
- }
2179
2007
 
2180
2008
  // src/native/native-overlay-style.ts
2181
2009
  var ERASER_TINT = "#cbd5e1";
@@ -2232,8 +2060,7 @@ function NativeInteractionOverlay({
2232
2060
  eraserTrail,
2233
2061
  laserTrail,
2234
2062
  eraserPreviewItems = [],
2235
- previewStrokeStyle,
2236
- toolCursor
2063
+ previewStrokeStyle
2237
2064
  }) {
2238
2065
  const z = camera.zoom;
2239
2066
  const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2610,7 +2437,7 @@ function NativeInteractionOverlay({
2610
2437
  ] });
2611
2438
  }, [laserTrail, z]);
2612
2439
  if (width <= 0 || height <= 0) return null;
2613
- return /* @__PURE__ */ jsxRuntime.jsxs(
2440
+ return /* @__PURE__ */ jsxRuntime.jsx(
2614
2441
  reactNativeSkia.Canvas,
2615
2442
  {
2616
2443
  style: {
@@ -2621,22 +2448,13 @@ function NativeInteractionOverlay({
2621
2448
  height
2622
2449
  },
2623
2450
  pointerEvents: "none",
2624
- children: [
2625
- /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
2626
- previewElements,
2627
- laserTrailElements,
2628
- eraserTrailElements,
2629
- eraserPreviewElements,
2630
- selectionElements
2631
- ] }),
2632
- toolCursor ? /* @__PURE__ */ jsxRuntime.jsx(
2633
- NativeToolCursorRenderer,
2634
- {
2635
- cursor: toolCursor.cursor,
2636
- point: toolCursor.point
2637
- }
2638
- ) : null
2639
- ]
2451
+ children: /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
2452
+ previewElements,
2453
+ laserTrailElements,
2454
+ eraserTrailElements,
2455
+ eraserPreviewElements,
2456
+ selectionElements
2457
+ ] })
2640
2458
  }
2641
2459
  );
2642
2460
  }
@@ -3974,39 +3792,6 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
3974
3792
  return { ...item, x: nb.x, y: nb.y, bounds: nb };
3975
3793
  }
3976
3794
 
3977
- // src/native/native-tool-cursors.ts
3978
- var ICON_SIZE = 24;
3979
- var CENTER_HOTSPOT = { x: 12, y: 12 };
3980
- function nativeCursorForVectorToolId(toolId) {
3981
- switch (toolId) {
3982
- case "rect":
3983
- case "ellipse":
3984
- case "architectural-cloud":
3985
- case "line":
3986
- case "arrow":
3987
- case "laser":
3988
- case "image":
3989
- return { kind: "crosshair", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
3990
- case "draw":
3991
- return { kind: "draw", size: ICON_SIZE, hotspot: { x: 4, y: 18 } };
3992
- case "marker":
3993
- return { kind: "marker", size: ICON_SIZE, hotspot: { x: 11, y: 14 } };
3994
- case "eraser":
3995
- return { kind: "eraser", size: ICON_SIZE, hotspot: { x: 12, y: 14 } };
3996
- case "text":
3997
- return { kind: "text", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
3998
- default:
3999
- return null;
4000
- }
4001
- }
4002
- function nativeCrosshairToolCursor() {
4003
- return { kind: "crosshair", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
4004
- }
4005
- function nativeFallbackToolCursorPoint(size) {
4006
- if (size.width <= 0 || size.height <= 0) return null;
4007
- return { x: size.width / 2, y: size.height / 2 };
4008
- }
4009
-
4010
3795
  // src/native/native-vector-interactions.ts
4011
3796
  var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
4012
3797
  function supportsNativeResizeHandles(item) {
@@ -4151,7 +3936,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
4151
3936
  onCameraChange,
4152
3937
  customPlacement,
4153
3938
  customPlacements = [],
4154
- customCrosshairToolIds = [],
4155
3939
  toolbar,
4156
3940
  showStyleInspector = false,
4157
3941
  styleInspectorPlacement = "bottom"
@@ -4174,8 +3958,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
4174
3958
  customPlacementRef.current = customPlacement;
4175
3959
  const customPlacementsRef = react.useRef(customPlacements);
4176
3960
  customPlacementsRef.current = customPlacements;
4177
- const customCrosshairToolIdsRef = react.useRef(customCrosshairToolIds);
4178
- customCrosshairToolIdsRef.current = customCrosshairToolIds;
4179
3961
  const onSelectionChangeRef = react.useRef(onSelectionChange);
4180
3962
  onSelectionChangeRef.current = onSelectionChange;
4181
3963
  const itemsRef = react.useRef(items);
@@ -4188,7 +3970,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
4188
3970
  );
4189
3971
  const [eraserTrail, setEraserTrail] = react.useState([]);
4190
3972
  const [laserTrail, setLaserTrail] = react.useState([]);
4191
- const [toolCursorPoint, setToolCursorPoint] = react.useState(null);
4192
3973
  const laserClearTimerRef = react.useRef(null);
4193
3974
  const strokeStyleRef = react.useRef({ ...DEFAULT_STROKE_STYLE });
4194
3975
  const markerStrokeStyleRef = react.useRef({ ...MARKER_TOOL_STYLE });
@@ -4283,60 +4064,14 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
4283
4064
  setCameraTick((n) => n + 1);
4284
4065
  onCameraChangeRef.current?.();
4285
4066
  }, []);
4286
- const cursorForToolId = react.useCallback((nextToolId) => {
4287
- const builtInCursor = nativeCursorForVectorToolId(nextToolId);
4288
- if (builtInCursor) return builtInCursor;
4289
- return customCrosshairToolIdsRef.current.includes(nextToolId) ? nativeCrosshairToolCursor() : null;
4067
+ const onLayout = react.useCallback((e) => {
4068
+ const { width, height } = e.nativeEvent.layout;
4069
+ setSize({ width, height });
4070
+ }, []);
4071
+ const updateToolCursorPoint = react.useCallback((_point) => {
4290
4072
  }, []);
4291
- const onLayout = react.useCallback(
4292
- (e) => {
4293
- const { width, height } = e.nativeEvent.layout;
4294
- const nextSize = { width, height };
4295
- setSize(nextSize);
4296
- if (!interactive) {
4297
- setToolCursorPoint(null);
4298
- return;
4299
- }
4300
- if (!cursorForToolId(toolIdRef.current)) {
4301
- setToolCursorPoint(null);
4302
- return;
4303
- }
4304
- setToolCursorPoint(
4305
- (current) => current ?? nativeFallbackToolCursorPoint(nextSize)
4306
- );
4307
- },
4308
- [cursorForToolId, interactive]
4309
- );
4310
- const updateToolCursorPoint = react.useCallback(
4311
- (point) => {
4312
- if (!interactive) return;
4313
- if (!cursorForToolId(toolIdRef.current)) return;
4314
- setToolCursorPoint(point);
4315
- },
4316
- [cursorForToolId, interactive]
4317
- );
4318
4073
  const hideToolCursor = react.useCallback(() => {
4319
- setToolCursorPoint(null);
4320
4074
  }, []);
4321
- const showFallbackToolCursor = react.useCallback(
4322
- (nextToolId) => {
4323
- if (!interactive) {
4324
- setToolCursorPoint(null);
4325
- return;
4326
- }
4327
- if (!cursorForToolId(nextToolId)) {
4328
- setToolCursorPoint(null);
4329
- return;
4330
- }
4331
- setToolCursorPoint(
4332
- (current) => current ?? nativeFallbackToolCursorPoint(size)
4333
- );
4334
- },
4335
- [cursorForToolId, interactive, size]
4336
- );
4337
- react.useEffect(() => {
4338
- showFallbackToolCursor(toolId);
4339
- }, [showFallbackToolCursor, toolId]);
4340
4075
  const selectedItems = react.useMemo(
4341
4076
  () => items.filter((it) => selectedIds.includes(it.id)),
4342
4077
  [items, selectedIds]
@@ -5001,8 +4736,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
5001
4736
  [requestRender, size]
5002
4737
  );
5003
4738
  const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
5004
- const activeToolCursor = cursorForToolId(toolId);
5005
- const toolCursor = activeToolCursor && toolCursorPoint ? { cursor: activeToolCursor, point: toolCursorPoint } : null;
5006
4739
  return /* @__PURE__ */ jsxRuntime.jsx(
5007
4740
  reactNative.View,
5008
4741
  {
@@ -5038,8 +4771,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
5038
4771
  eraserPreviewItems: items.filter(
5039
4772
  (it) => eraserPreviewIds.includes(it.id)
5040
4773
  ),
5041
- previewStrokeStyle: strokeStyleState,
5042
- toolCursor
4774
+ previewStrokeStyle: strokeStyleState
5043
4775
  }
5044
4776
  ),
5045
4777
  interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsxRuntime.jsx(