@blocklet/editor 1.6.258 → 1.6.260

package/lib/main/nodes/ImageComponent.js

@@ -307,7 +307,6 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
                             onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: false }), _jsxs(ImageEnhancer, { frame: frame, sizeMode: width === 'inherit' ? sizeMode || 'best-fit' : undefined, onSizeModeChange: setSizeMode, onFrameChange: setFrame, children: [_jsx(Button, { disabled: !!isDeviceFrameUsed, onClick: () => setMarkerEditing(true), variant: "outlined", size: "small", sx: {
                                         minWidth: 36,
                                         height: 36,
-                                        ml: 1,
                                         p: 0,
                                         borderColor: 'grey.400',
                                         '.MuiButton-icon': { m: 0 },
@@ -316,7 +315,6 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
                                     }, variant: "outlined", size: "small", sx: {
                                         minWidth: 36,
                                         height: 36,
-                                        ml: 1,
                                         p: 0,
                                         borderColor: 'grey.400',
                                         '.MuiButton-icon': { m: 0 },

package/lib/main/ui/ImageEnhancer.js

@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
 import * as markerjs2 from 'markerjs2';
 import * as mjslive from 'markerjs-live';
 import { frames } from './FrameMockup';
+import { useEditorSize } from '../hooks/hooks';
 const parseMarkerState = (markerState) => {
     if (!markerState)
         return null;
@@ -63,6 +64,20 @@ export function ImageAnnotationView({ imageRef, markerState, sx, ...rest }) {
             const timer = setTimeout(() => {
                 markerView.targetRoot = viewRef.current;
                 markerView.show(parsed);
+                if (imageRef.current) {
+                    const scaleFactor = imageRef.current.width / parsed.width;
+                    markerView.markers.forEach((marker) => {
+                        // @ts-ignore
+                        if (marker.setStrokeWidth)
+                            marker.setStrokeWidth(marker.strokeWidth * scaleFactor);
+                        if (marker instanceof mjslive.ArrowMarker) {
+                            // @ts-ignore
+                            marker.arrowBaseWidth *= scaleFactor;
+                            // @ts-ignore
+                            marker.arrowBaseHeight *= scaleFactor;
+                        }
+                    });
+                }
             }, 10);
             return () => {
                 clearTimeout(timer);
@@ -76,7 +91,23 @@ export function ImageEnhancer({ sizeMode, frame, onSizeModeChange, onFrameChange
     const handleFrameChange = (value) => {
         onFrameChange(value === 'none' ? undefined : value);
     };
-    return (_jsx(Box, { sx: { position: 'relative', zIndex: 'tooltip', whiteSpace: 'nowrap', mt: 1 }, children: _jsxs(Box, { sx: { position: 'absolute', display: 'flex', alignItems: 'center', bgcolor: '#fff' }, children: [_jsxs(ToggleButtonGroup, { color: "standard", value: sizeMode, size: "small", exclusive: true, onChange: (_, v) => onSizeModeChange(v), "aria-label": "Platform", children: [_jsx(ToggleButton, { value: "small", children: "Small" }), _jsx(ToggleButton, { value: "best-fit", children: "Best fit" }), _jsx(ToggleButton, { value: "original", children: "Original size" })] }), _jsxs(Select, { value: frame ?? 'none', onChange: (e) => handleFrameChange(e.target.value), sx: { ml: 1 }, children: [_jsx(MenuItem, { value: "none", children: "Select frame mockup" }), frames.map((x) => {
+    const size = useEditorSize();
+    return (
+    // zIndex 必须为 modal (或以下), 否则如果高于 Select.MuiPaper-root, 会导致点击 Select 无法显示选项, 且导致 image 失焦
+    // 上述问题在 discussion/blog 中可复现, doc 中未复现, 其它的解决方法是在 Select#onClick 中调用 e.stopPropagation 或提高 Select.MuiPaper-root 的 zIndex
+    _jsx(Box, { sx: {
+            position: 'relative',
+            zIndex: 'modal',
+            whiteSpace: 'nowrap',
+            mt: 1,
+        }, children: _jsxs(Box, { sx: {
+                position: 'absolute',
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                gap: 1,
+                ...(size?.width && { width: size.width - 36 }),
+            }, children: [_jsxs(ToggleButtonGroup, { color: "standard", value: sizeMode, size: "small", exclusive: true, onChange: (_, v) => onSizeModeChange(v), sx: { bgcolor: '#fff' }, children: [_jsx(ToggleButton, { value: "small", children: "Small" }), _jsx(ToggleButton, { value: "best-fit", children: "Best fit" }), _jsx(ToggleButton, { value: "original", children: "Original size" })] }), _jsxs(Select, { value: frame ?? 'none', onChange: (e) => handleFrameChange(e.target.value), sx: { width: { xs: 100, sm: 'auto' } }, MenuProps: { sx: { '.MuiPaper-root': { maxHeight: 400 } }, disablePortal: false }, children: [_jsx(MenuItem, { value: "none", children: "Select frame mockup" }), frames.map((x) => {
                             return (_jsx(MenuItem, { value: x.id, children: x.name }, x.id));
                         })] }), children] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.258",
+  "version": "1.6.260",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.9.77",
     "@blocklet/embed": "^0.1.11",
     "@blocklet/pages-kit": "^0.2.302",
-    "@blocklet/pdf": "1.6.258",
+    "@blocklet/pdf": "1.6.260",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "6b5469534e4b90a352a6e9af359e5bf57daac880"
+  "gitHead": "71a881e14c0e3b8268a7c269ae96a62150ca8350"
 }