canvu-react 0.4.12 → 0.4.14

package/dist/react.cjs

@@ -3655,7 +3655,7 @@ function ColorPalette({ value, onChange }) {
           "button",
           {
             type: "button",
-            "aria-label": "Cor personalizada",
+            "aria-label": "Custom color",
             "aria-pressed": showCustom || !inPalette,
             onClick: () => setShowCustom((v) => !v),
             onPointerDown: (e) => {
@@ -3716,14 +3716,14 @@ function ColorPalette({ value, onChange }) {
 }
 function DashTabs({ value, onChange }) {
   const tabs = [
-    { id: "solid", label: "Cont\xEDnuo" },
-    { id: "dashed", label: "Tracejado" }
+    { id: "solid", label: "Solid" },
+    { id: "dashed", label: "Dashed" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       role: "radiogroup",
-      "aria-label": "Estilo do tra\xE7o",
+      "aria-label": "Stroke style",
       style: {
         display: "flex",
         background: "rgba(24,24,27,0.06)",
@@ -3806,7 +3806,7 @@ function FontSizeTabs({ value, onChange }) {
     "div",
     {
       role: "radiogroup",
-      "aria-label": "Tamanho do texto",
+      "aria-label": "Text size",
       style: {
         display: "flex",
         background: "rgba(24,24,27,0.06)",
@@ -3870,7 +3870,7 @@ function viewModelFromActiveTool(activeToolStyle) {
     ...isText ? { textFontSize } : {}
   };
   return {
-    label: activeToolStyle.label ?? "Estilo da ferramenta",
+    label: activeToolStyle.label ?? "Tool style",
     count: 0,
     hex,
     strokeWidth,
@@ -3929,7 +3929,7 @@ function viewModelFromSelection(stylable) {
     ...showFontSize ? { textFontSize } : {}
   };
   return {
-    label: "Estilo da sele\xE7\xE3o",
+    label: "Selection style",
     count: stylable.length,
     hex,
     strokeWidth,
@@ -3992,18 +3992,18 @@ function VectorSelectionInspector({
       children: [
         vm.count > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
           vm.count,
-          " objetos selecionados"
+          " objects selected"
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Cor", style: sectionLabelStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Color", style: sectionLabelStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            "Cor",
-            vm.mixedStroke ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (valores misturados)" }) : null
+            "Color",
+            vm.mixedStroke ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (mixed values)" }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ColorPalette, { value: vm.hex, onChange: (h) => apply({ stroke: h }) })
         ] }),
         vm.showStrokeWidth ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: sectionLabelStyle, children: [
-          "Grossura",
-          vm.mixedWidth ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null,
+          "Thickness",
+          vm.mixedWidth ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -4017,10 +4017,10 @@ function VectorSelectionInspector({
         ] }) : null,
         vm.showDash ? (
           // biome-ignore lint/a11y/useSemanticElements: fieldset would impose default browser styling that breaks the inspector layout
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Tra\xE7o", style: sectionLabelStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Stroke", style: sectionLabelStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              "Tra\xE7o",
-              vm.mixedDash ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null
+              "Stroke",
+              vm.mixedDash ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               DashTabs,
@@ -4033,10 +4033,10 @@ function VectorSelectionInspector({
         ) : null,
         vm.showFontSize ? (
           // biome-ignore lint/a11y/useSemanticElements: fieldset would impose default browser styling that breaks the inspector layout
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Tamanho", style: sectionLabelStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Size", style: sectionLabelStyle, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              "Tamanho",
-              vm.mixedFontSize ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null
+              "Size",
+              vm.mixedFontSize ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               FontSizeTabs,
@@ -4048,8 +4048,8 @@ function VectorSelectionInspector({
           ] })
         ) : null,
         vm.showMarkerOpacity ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: sectionLabelStyle, children: [
-          "Opacidade",
-          vm.mixedOpacity ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null,
+          "Opacity",
+          vm.mixedOpacity ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -8050,6 +8050,7 @@ var VectorViewport = react.forwardRef(
     const wrapperRef = react.useRef(null);
     const interactionRootRef = react.useRef(null);
     const sceneContainerRef = react.useRef(null);
+    const lastPointerScreenRef = react.useRef(null);
     const activeInteractionPointerIdRef = react.useRef(null);
     const activeInteractionPointerTargetRef = react.useRef(null);
     const activeInteractionTouchIdRef = react.useRef(null);
@@ -8776,6 +8777,24 @@ var VectorViewport = react.forwardRef(
         root.removeEventListener("pointerleave", leave);
       };
     }, [onWorldPointerMove]);
+    react.useEffect(() => {
+      const root = wrapperRef.current;
+      if (!root) return;
+      const record = (e) => {
+        lastPointerScreenRef.current = { x: e.clientX, y: e.clientY };
+      };
+      const clear = () => {
+        lastPointerScreenRef.current = null;
+      };
+      root.addEventListener("pointermove", record, { passive: true });
+      root.addEventListener("pointerdown", record, { passive: true });
+      root.addEventListener("pointerleave", clear);
+      return () => {
+        root.removeEventListener("pointermove", record);
+        root.removeEventListener("pointerdown", record);
+        root.removeEventListener("pointerleave", clear);
+      };
+    }, []);
     react.useEffect(() => {
       if (directRemoteStrokePreviewRef.current && placementPreview === null) {
         return;
@@ -9495,6 +9514,50 @@ var VectorViewport = react.forwardRef(
       },
       [screenToWorld, placeImageFilesAtWorld]
     );
+    const handleWrapperPaste = react.useCallback(
+      async (e) => {
+        if (!interactiveRef.current || !onItemsChangeRef.current) return;
+        const t = e.target;
+        if (t instanceof HTMLTextAreaElement || t instanceof HTMLInputElement || t instanceof HTMLElement && t.isContentEditable) {
+          return;
+        }
+        if (editingTextIdRef.current) return;
+        const dt = e.clipboardData;
+        if (!dt) return;
+        const files = [];
+        for (const file of Array.from(dt.files)) {
+          if (file.type.startsWith("image/")) files.push(file);
+        }
+        if (files.length === 0) {
+          for (const item of Array.from(dt.items)) {
+            if (item.kind === "file" && item.type.startsWith("image/")) {
+              const file = item.getAsFile();
+              if (file) files.push(file);
+            }
+          }
+        }
+        if (files.length === 0) return;
+        e.preventDefault();
+        const last = lastPointerScreenRef.current;
+        let target;
+        if (last) {
+          target = screenToWorld(last.x, last.y);
+        } else {
+          const el = sceneContainerRef.current;
+          const cam = cameraRef.current;
+          if (el && cam) {
+            const rect = el.getBoundingClientRect();
+            target = cam.screenToWorld(rect.width / 2, rect.height / 2);
+          } else {
+            target = { worldX: 0, worldY: 0 };
+          }
+        }
+        await placeImageFilesAtWorld(files, target.worldX, target.worldY, {
+          stackBelowExistingItems: false
+        });
+      },
+      [screenToWorld, placeImageFilesAtWorld]
+    );
     const handleOverlayDoubleClick = react.useCallback(
       (e) => {
         const cam = cameraRef.current;
@@ -10764,6 +10827,7 @@ var VectorViewport = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-describedby": liveId,
         onKeyDown,
+        onPaste: handleWrapperPaste,
         onDragOver: handleWrapperDragOver,
         onDrop: handleWrapperDrop,
         children: [