feat: element position block

src/SaForm/PcForm/layout/workspace/index.tsx

@@ -8,6 +8,7 @@ import Snapline from './snapline'
 import Group from './group'
 import Selection from './selection'
 import Contextmenu from './contextmenu'
+import Position from './position'
 
 import type { PcGraph } from '../../graph'
 import type { CSSProperties, PropType } from 'vue'
@@ -126,6 +127,7 @@ linear-gradient(90deg, ${boldLineColor} 1px, transparent 0)`,
               {props.graph.selection.enabled && (
                 <Selection graph={props.graph} />
               )}
+              <Position graph={props.graph} />
             </div>
           </AutoScale>
 

src/SaForm/PcForm/layout/workspace/position/index.tsx

@@ -0,0 +1,75 @@
+import { computed, defineComponent, ref } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { use } from 'sa-lambda'
+import { getRectangle } from '../graph/renderer/utils/rectangle'
+import type { CSSProperties, PropType } from 'vue'
+import type { BasicGraph } from '@/SaForm/graph'
+import { getDeepOffset } from '@/SaForm/utils/element'
+import { addUnit } from '@/SaForm/utils/style'
+
+export default defineComponent({
+  name: 'SaFormPositionBlock',
+  props: {
+    graph: {
+      required: true,
+      type: Object as PropType<BasicGraph>,
+    },
+  },
+  setup(props) {
+    const rect = computed(() => getRectangle(props.graph.selected))
+
+    const blockRef = ref()
+    const { width } = useElementSize(blockRef)
+
+    const blockStyle = computed<CSSProperties>(() => {
+      if (props.graph.isDragging) {
+        return {
+          left: addUnit(
+            use(props.graph.selected[0]?.parent, (p) =>
+              p ? getDeepOffset(p, 'x') : 0
+            ) +
+              rect.value.x +
+              rect.value.width / 2 -
+              (width.value + 16) / 2
+          ),
+          top: addUnit(
+            use(props.graph.selected[0]?.parent, (p) =>
+              p ? getDeepOffset(p, 'y') : 0
+            ) +
+              rect.value.y +
+              rect.value.height +
+              10
+          ),
+        }
+      }
+
+      return {
+        display: 'none',
+      }
+    })
+
+    return () => (
+      <div
+        ref={blockRef}
+        class="position-block"
+        style={{
+          position: 'absolute',
+          backgroundColor: 'var(--c-bg)',
+          display: 'flex',
+          alignItems: 'center',
+          borderRadius: '4px',
+          fontSize: '12px',
+          zIndex: 100,
+          'pointer-events': 'none',
+          width: 'fit-content',
+          padding: '2px 8px',
+          boxShadow: '0 2px 4px var(--c-divider)',
+          boxSizing: 'border-box',
+          ...blockStyle.value,
+        }}
+      >
+        X: {rect.value.x} <span class="ml-2">Y: {rect.value.y}</span>
+      </div>
+    )
+  },
+})

src/SaForm/graph.ts

@@ -90,6 +90,7 @@ export interface BasicGraph {
   selection: SelectionSetting
 
   isDraft: boolean
+  isDragging?: boolean
   grid: GridSetting
   snapline: SnaplineSetting
   scroller: Scroller

src/SaForm/utils/element.ts

@@ -55,7 +55,12 @@ export const getDeepOffset = (
 ): number =>
   (element.parent ? getDeepOffset(element.parent, attr) : 0) +
   (attr === 'y' && isTab(element) ? element.attrs['tab-height'] : 0) +
-  element.attrs[attr]
+  element.attrs[attr] +
+  (element.attrs['border-width'] &&
+  element.attrs['border-style'] &&
+  element.attrs['border-style'] !== 'none'
+    ? element.attrs['border-width']
+    : 0)
 
 export const createCopyName = (set: Set<string>, name: string): string => {
   if (!name) return ''