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 +15 -283
- package/dist/native.cjs.map +1 -1
- package/dist/native.d.cts +1 -19
- package/dist/native.d.ts +1 -19
- package/dist/native.js +15 -283
- package/dist/native.js.map +1 -1
- package/package.json +1 -1
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.
|
|
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
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
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
|
|
4287
|
-
const
|
|
4288
|
-
|
|
4289
|
-
|
|
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(
|