14d4a17a33
Surface the engine's textAutoResize as a Resizing segmented control for text nodes, mapping Figma's three modes: Auto width (WIDTH_AND_HEIGHT), Auto height/wrap (HEIGHT), Fixed size (NONE). Icon + tooltip options match the panel's segmented-control language. The engine already reflows text on content changes; this wires the control to it with undo support.
45 lines
1.8 KiB
Vue
45 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { LayoutControlsRoot, useI18n } from '@open-pencil/vue'
|
|
|
|
import AutoLayoutControls from '@/components/properties/LayoutSection/AutoLayoutControls.vue'
|
|
import ClipContentControl from '@/components/properties/LayoutSection/ClipContentControl.vue'
|
|
import FlexControls from '@/components/properties/LayoutSection/FlexControls.vue'
|
|
import GridControls from '@/components/properties/LayoutSection/GridControls.vue'
|
|
import PaddingControls from '@/components/properties/LayoutSection/PaddingControls.vue'
|
|
import SizeControls from '@/components/properties/LayoutSection/size/SizeControls.vue'
|
|
import TextResizingControl from '@/components/properties/LayoutSection/TextResizingControl.vue'
|
|
import SharedStyleField from '@/components/properties/shared-style/SharedStyleField.vue'
|
|
import PanelSection from '@/components/ui/panel/PanelSection.vue'
|
|
|
|
const { panels } = useI18n()
|
|
|
|
const CONTAINER_TYPES = ['FRAME', 'COMPONENT', 'COMPONENT_SET', 'INSTANCE']
|
|
</script>
|
|
|
|
<template>
|
|
<LayoutControlsRoot v-slot="ctx">
|
|
<template v-if="ctx.node">
|
|
<PanelSection :label="panels.layout">
|
|
<SharedStyleField kind="grid" :label="panels.gridStyle" />
|
|
<TextResizingControl v-if="ctx.node.type === 'TEXT'" />
|
|
<SizeControls />
|
|
</PanelSection>
|
|
|
|
<template v-if="CONTAINER_TYPES.includes(ctx.node.type)">
|
|
<PanelSection :label="panels.autoLayout">
|
|
<AutoLayoutControls />
|
|
|
|
<template v-if="ctx.node.layoutMode !== 'NONE'">
|
|
<FlexControls v-if="ctx.isFlex" />
|
|
<template v-if="ctx.isGrid">
|
|
<GridControls />
|
|
<PaddingControls />
|
|
<ClipContentControl />
|
|
</template>
|
|
</template>
|
|
</PanelSection>
|
|
</template>
|
|
</template>
|
|
</LayoutControlsRoot>
|
|
</template>
|