canvu-react 0.4.12 → 0.4.14

package/dist/react.js

@@ -3648,7 +3648,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) => {
@@ -3709,14 +3709,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__ */ jsx(
     "div",
     {
       role: "radiogroup",
-      "aria-label": "Estilo do tra\xE7o",
+      "aria-label": "Stroke style",
       style: {
         display: "flex",
         background: "rgba(24,24,27,0.06)",
@@ -3799,7 +3799,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)",
@@ -3863,7 +3863,7 @@ function viewModelFromActiveTool(activeToolStyle) {
     ...isText ? { textFontSize } : {}
   };
   return {
-    label: activeToolStyle.label ?? "Estilo da ferramenta",
+    label: activeToolStyle.label ?? "Tool style",
     count: 0,
     hex,
     strokeWidth,
@@ -3922,7 +3922,7 @@ function viewModelFromSelection(stylable) {
     ...showFontSize ? { textFontSize } : {}
   };
   return {
-    label: "Estilo da sele\xE7\xE3o",
+    label: "Selection style",
     count: stylable.length,
     hex,
     strokeWidth,
@@ -3985,18 +3985,18 @@ function VectorSelectionInspector({
       children: [
         vm.count > 1 ? /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
           vm.count,
-          " objetos selecionados"
+          " objects selected"
         ] }) : null,
-        /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Cor", style: sectionLabelStyle, children: [
+        /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Color", style: sectionLabelStyle, children: [
           /* @__PURE__ */ jsxs("span", { children: [
-            "Cor",
-            vm.mixedStroke ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (valores misturados)" }) : null
+            "Color",
+            vm.mixedStroke ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (mixed values)" }) : null
           ] }),
           /* @__PURE__ */ jsx(ColorPalette, { value: vm.hex, onChange: (h) => apply({ stroke: h }) })
         ] }),
         vm.showStrokeWidth ? /* @__PURE__ */ jsxs("label", { style: sectionLabelStyle, children: [
-          "Grossura",
-          vm.mixedWidth ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null,
+          "Thickness",
+          vm.mixedWidth ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null,
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -4010,10 +4010,10 @@ function VectorSelectionInspector({
         ] }) : null,
         vm.showDash ? (
           // biome-ignore lint/a11y/useSemanticElements: fieldset would impose default browser styling that breaks the inspector layout
-          /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Tra\xE7o", style: sectionLabelStyle, children: [
+          /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Stroke", style: sectionLabelStyle, children: [
             /* @__PURE__ */ jsxs("span", { children: [
-              "Tra\xE7o",
-              vm.mixedDash ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null
+              "Stroke",
+              vm.mixedDash ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null
             ] }),
             /* @__PURE__ */ jsx(
               DashTabs,
@@ -4026,10 +4026,10 @@ function VectorSelectionInspector({
         ) : null,
         vm.showFontSize ? (
           // biome-ignore lint/a11y/useSemanticElements: fieldset would impose default browser styling that breaks the inspector layout
-          /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Tamanho", style: sectionLabelStyle, children: [
+          /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Size", style: sectionLabelStyle, children: [
             /* @__PURE__ */ jsxs("span", { children: [
-              "Tamanho",
-              vm.mixedFontSize ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null
+              "Size",
+              vm.mixedFontSize ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null
             ] }),
             /* @__PURE__ */ jsx(
               FontSizeTabs,
@@ -4041,8 +4041,8 @@ function VectorSelectionInspector({
           ] })
         ) : null,
         vm.showMarkerOpacity ? /* @__PURE__ */ jsxs("label", { style: sectionLabelStyle, children: [
-          "Opacidade",
-          vm.mixedOpacity ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null,
+          "Opacity",
+          vm.mixedOpacity ? /* @__PURE__ */ jsx("span", { style: mixedHintStyle, children: " (mixed)" }) : null,
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -8043,6 +8043,7 @@ var VectorViewport = forwardRef(
     const wrapperRef = useRef(null);
     const interactionRootRef = useRef(null);
     const sceneContainerRef = useRef(null);
+    const lastPointerScreenRef = useRef(null);
     const activeInteractionPointerIdRef = useRef(null);
     const activeInteractionPointerTargetRef = useRef(null);
     const activeInteractionTouchIdRef = useRef(null);
@@ -8769,6 +8770,24 @@ var VectorViewport = forwardRef(
         root.removeEventListener("pointerleave", leave);
       };
     }, [onWorldPointerMove]);
+    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);
+      };
+    }, []);
     useEffect(() => {
       if (directRemoteStrokePreviewRef.current && placementPreview === null) {
         return;
@@ -9488,6 +9507,50 @@ var VectorViewport = forwardRef(
       },
       [screenToWorld, placeImageFilesAtWorld]
     );
+    const handleWrapperPaste = 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 = useCallback(
       (e) => {
         const cam = cameraRef.current;
@@ -10757,6 +10820,7 @@ var VectorViewport = forwardRef(
         "aria-label": ariaLabel,
         "aria-describedby": liveId,
         onKeyDown,
+        onPaste: handleWrapperPaste,
         onDragOver: handleWrapperDragOver,
         onDrop: handleWrapperDrop,
         children: [