fix issues in Oct

examples/feature-examples/src/pages/extensions/proximity-connect/index.tsx

@@ -4,13 +4,15 @@ import { ProximityConnect } from '@logicflow/extension'
 import {
   Space,
   Input,
+  InputNumber,
   Button,
   Card,
   Divider,
   Row,
   Col,
   Form,
   Switch,
+  Select,
 } from 'antd'
 import { useEffect, useRef, useState } from 'react'
 import styles from './index.less'
@@ -111,6 +113,9 @@ export default function ProximityConnectExtension() {
   const [distance, setDistance] = useState<number>(100)
   const [reverse, setReverse] = useState<boolean>(false)
   const [enable, setEnable] = useState<boolean>(true)
+  const [mode, setMode] = useState<'node' | 'anchor' | 'default'>('default')
+  const [virtualStroke, setVirtualStroke] = useState<string>('#acacac')
+  const [virtualDash, setVirtualDash] = useState<string>('10,10')
   useEffect(() => {
     if (!lfRef.current) {
       const lf = new LogicFlow({
@@ -129,12 +134,24 @@ export default function ProximityConnectExtension() {
             enable,
             distance,
             reverseDirection: reverse,
+            type: mode,
           },
         },
       })
 
       lf.render(data)
       lfRef.current = lf
+
+      // 初始化插件的阈值与样式，避免 options.distance 未绑定到 thresholdDistance 的影响
+      const pc = lf.extension.proximityConnect as ProximityConnect
+      pc.setThresholdDistance(distance)
+      pc.setReverseDirection(reverse)
+      pc.setEnable(enable)
+      pc.type = mode
+      pc.setVirtualEdgeStyle({
+        stroke: virtualStroke,
+        strokeDasharray: virtualDash,
+      })
     }
   }, [])
 
@@ -143,11 +160,13 @@ export default function ProximityConnectExtension() {
       <Row>
         <Col span={8}>
           <Form.Item label="连线阈值：">
-            <Input
+            <InputNumber
               value={distance}
               style={{ width: '180px' }}
-              onInput={(e) => {
-                setDistance(+e.target.value)
+              min={1}
+              onChange={(val) => {
+                const next = Number(val || 0)
+                setDistance(next)
               }}
             />
             <Button
@@ -167,7 +186,7 @@ export default function ProximityConnectExtension() {
         <Col span={8}>
           <Form.Item label="连线方向：">
             <Switch
-              value={reverse}
+              checked={reverse}
               checkedChildren="最近节点 → 拖拽节点"
               unCheckedChildren="拖拽节点 → 最近节点"
               onChange={(checked) => {
@@ -184,7 +203,7 @@ export default function ProximityConnectExtension() {
         <Col span={8}>
           <Form.Item label="启用状态：">
             <Switch
-              value={enable}
+              checked={enable}
               checkedChildren="启用"
               unCheckedChildren="禁用"
               onChange={(checked) => {
@@ -199,6 +218,65 @@ export default function ProximityConnectExtension() {
           </Form.Item>
         </Col>
       </Row>
+      <Row>
+        <Col span={8}>
+          <Form.Item label="模式：">
+            <Select
+              style={{ width: 200 }}
+              value={mode}
+              options={[
+                { value: 'default', label: '混合（节点+锚点）' },
+                { value: 'node', label: '仅节点拖拽' },
+                { value: 'anchor', label: '仅锚点拖拽' },
+              ]}
+              onChange={(val) => {
+                setMode(val)
+                if (lfRef.current) {
+                  ;(
+                    lfRef.current.extension.proximityConnect as ProximityConnect
+                  ).type = val
+                }
+              }}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label="虚拟边颜色：">
+            <Input
+              style={{ width: 200 }}
+              value={virtualStroke}
+              onChange={(e) => setVirtualStroke(e.target.value)}
+            />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item label="虚线样式：">
+            <Input
+              style={{ width: 200 }}
+              value={virtualDash}
+              onChange={(e) => setVirtualDash(e.target.value)}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
+          <Button
+            onClick={() => {
+              if (lfRef.current) {
+                ;(
+                  lfRef.current.extension.proximityConnect as ProximityConnect
+                ).setVirtualEdgeStyle({
+                  stroke: virtualStroke,
+                  strokeDasharray: virtualDash,
+                })
+              }
+            }}
+          >
+            应用虚拟边样式
+          </Button>
+        </Col>
+      </Row>
       <Space.Compact style={{ width: '100%' }}></Space.Compact>
       <Divider />
       <div ref={containerRef} id="graph" className={styles.viewport}></div>

examples/feature-examples/src/pages/extensions/snapshot/index.tsx

@@ -76,6 +76,20 @@ export default function SnapshotExample() {
   const [quality, setQuality] = useState<number>() // 图片质量
   const [partial, setPartial] = useState<boolean>(false) // 导出局部渲染
 
+  // 快照插件样式控制
+  const [useGlobalRules, setUseGlobalRules] = useState<boolean>(true) // 是否注入全局样式
+  const [customCssRules, setCustomCssRules] = useState<string>(`
+          .uml-wrapper {
+            line-height: 1.2;
+            text-align: center;
+            color: blue;
+          }
+        `) // 自定义样式规则，将叠加到导出图片中
+
+  // 画布尺寸安全参数
+  const [safetyFactor, setSafetyFactor] = useState<number>(1.1) // 画布导出安全系数
+  const [safetyMargin, setSafetyMargin] = useState<number>(40) // 画布导出安全边距
+
   const [blobData, setBlobData] = useState('')
   const [base64Data, setBase64Data] = useState('')
 
@@ -118,16 +132,12 @@ export default function SnapshotExample() {
         })
       })
 
-      // 默认开启css样式
-      lf.extension.snapshot.useGlobalRules = true
-      // 不会覆盖css样式，会叠加，customCssRules优先级高
-      lf.extension.snapshot.customCssRules = `
-          .uml-wrapper {
-            line-height: 1.2;
-            text-align: center;
-            color: blue;
-          }
-        `
+      // 设置快照插件样式参数（通过类型断言访问扩展实例属性）
+      const snapshotExt = lf.extension?.snapshot as unknown as Snapshot
+      if (snapshotExt) {
+        snapshotExt.useGlobalRules = useGlobalRules
+        snapshotExt.customCssRules = customCssRules
+      }
 
       lf.render(data)
       lf.translateCenter()
@@ -146,8 +156,17 @@ export default function SnapshotExample() {
       height,
       padding,
       quality,
+      safetyFactor,
+      safetyMargin,
     }
     console.log(params, 'params')
+    // 在导出前更新快照扩展的样式控制参数
+    const snapshotExt = lfRef.current?.extension
+      ?.snapshot as unknown as Snapshot
+    if (snapshotExt) {
+      snapshotExt.useGlobalRules = useGlobalRules
+      snapshotExt.customCssRules = customCssRules
+    }
     await lfRef.current?.getSnapshot(fileName, params)
     // await lfRef.current?.extension.snapshot?.getSnapshot(fileName, params)
     // 测试
@@ -172,6 +191,15 @@ export default function SnapshotExample() {
         height,
         padding,
         quality,
+        safetyFactor,
+        safetyMargin,
+      }
+      // 在预览前更新快照扩展的样式控制参数
+      const snapshotExt = lfRef.current.extension
+        ?.snapshot as unknown as Snapshot
+      if (snapshotExt) {
+        snapshotExt.useGlobalRules = useGlobalRules
+        snapshotExt.customCssRules = customCssRules
       }
       lfRef.current
         .getSnapshotBlob(backgroundColor, fileType, params)
@@ -204,6 +232,15 @@ export default function SnapshotExample() {
         height,
         padding,
         quality,
+        safetyFactor,
+        safetyMargin,
+      }
+      // 在预览前更新快照扩展的样式控制参数
+      const snapshotExt = lfRef.current.extension
+        ?.snapshot as unknown as Snapshot
+      if (snapshotExt) {
+        snapshotExt.useGlobalRules = useGlobalRules
+        snapshotExt.customCssRules = customCssRules
       }
       const result = await lfRef.current.getSnapshotBase64(
         'white',
@@ -287,6 +324,16 @@ export default function SnapshotExample() {
           value={height}
           onChange={(value) => handleInputChange(value, 'height')}
         />
+        <InputNumber
+          addonBefore="安全系数："
+          value={safetyFactor}
+          onChange={(value) => setSafetyFactor(value ?? 1.1)}
+        />
+        <InputNumber
+          addonBefore="安全边距："
+          value={safetyMargin}
+          onChange={(value) => setSafetyMargin(value ?? 40)}
+        />
       </Space>
       <p></p>
       <Space>
@@ -307,6 +354,20 @@ export default function SnapshotExample() {
         />
         <span>导出局部渲染：</span>
         <Switch onChange={(partial) => setPartial(partial)} />
+        <span>注入全局样式：</span>
+        <Switch
+          checked={useGlobalRules}
+          onChange={(checked) => setUseGlobalRules(checked)}
+        />
+      </Space>
+      <p></p>
+      <Space style={{ width: '100%' }} direction="vertical">
+        <Input.TextArea
+          rows={4}
+          placeholder="自定义导出样式，支持标准CSS语法"
+          value={customCssRules}
+          onChange={(e) => setCustomCssRules(e.target.value)}
+        />
       </Space>
       <Divider />
       <Space>