缩放操作点

每一个元素可以通过scale独立设置缩放点的方向

WARNING

与free-dom不同，左侧和上方的缩放没有实现位置补偿，导致使用起来比较反直觉。

vue

<template>
  <GridLayout
    v-model="layout"
  >
    <span
      key="a"
      class="grid-item"
    >a</span>
    <span
      key="b"
      class="grid-item"
    >b</span>
    <span
      key="c"
      class="grid-item"
    >c</span>
  </GridLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { GridLayout } from 'free-dom'

const layout = ref([
  { i: 'a', x: 0, y: 0, w: 1, h: 2 },
  { i: 'b', x: 1, y: 0, w: 3, h: 2, scale: ['t', 'b', 'lt'] },
  { i: 'c', x: 4, y: 0, w: 1, h: 2 },
])
</script>

缩放操作点 ​

缩放操作点