127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<template>
|
|
<div class="details-panel">
|
|
<div class="header" @click="show = !show">
|
|
<span class="icon"><svg-icon name="dc-details_edit" size="17" /></span>
|
|
<span class="title">Edit Details</span>
|
|
<span class="arrow" :class="{ show }">
|
|
<svg-icon name="dc-down_arrow2" size="10" />
|
|
</span>
|
|
</div>
|
|
<div class="content" v-if="isShow" v-show="show">
|
|
<!-- <basic-info :object="activeObject" /> -->
|
|
<fill-repeat :object="activeObject" v-if="isRepeat" />
|
|
<!-- <shape-setting :object="activeObject" v-if="isShape && !isRepeat" /> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, inject, computed, watch, onMounted } from 'vue'
|
|
import FillRepeat from './fill-repeat.vue'
|
|
import ShapeSetting from './shape-setting.vue'
|
|
const props = defineProps({})
|
|
const layerManager = inject('layerManager') as any
|
|
const canvasManager = inject('canvasManager') as any
|
|
const show = ref(true)
|
|
const activeID = computed(() => layerManager.activeID.value)
|
|
const layers = computed(() => layerManager.layers.value)
|
|
const activeObject = ref(null)
|
|
|
|
// const shapes = ['rect', 'line', 'path', 'triangle', 'polygon', 'ellipse']
|
|
// const isShape = computed(() => shapes.includes(activeObject.value?.type))
|
|
const isRepeat = computed(() => activeObject.value?.fill?.repeat === 'repeat')
|
|
const isShow = computed(() => isRepeat.value)
|
|
|
|
const updateActiveObject = () => {
|
|
const layer = layerManager.getActiveLayer()
|
|
activeObject.value = layer ? JSON.parse(JSON.stringify(layer)) : null
|
|
}
|
|
watch(layers, () => updateActiveObject())
|
|
watch(activeID, () => updateActiveObject())
|
|
onMounted(() => {
|
|
updateActiveObject()
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.details-panel {
|
|
position: absolute;
|
|
top: 2.2rem;
|
|
right: 3rem;
|
|
width: 28.8rem;
|
|
max-height: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.6rem;
|
|
> div {
|
|
border: 0.2rem solid #ebebeb;
|
|
background: #ffffff;
|
|
border-radius: 0.9rem;
|
|
box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
> .header {
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.8rem;
|
|
padding: 0 1.6rem;
|
|
> .title {
|
|
flex: 1;
|
|
font-family: Semibold;
|
|
font-size: 1.6rem;
|
|
color: #000;
|
|
}
|
|
> .arrow {
|
|
transition: transform 0.2s;
|
|
transform: rotate(-90deg);
|
|
&.show {
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
}
|
|
> .content {
|
|
padding: 1.6rem;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
&:deep(> div) {
|
|
> div {
|
|
margin-bottom: var(--details-item-margin-bottom, 1.6rem);
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&.h > div {
|
|
> .title {
|
|
font-size: 1.4rem;
|
|
color: #000;
|
|
margin-bottom: 1.6rem;
|
|
}
|
|
> .content {
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 1.4rem;
|
|
}
|
|
}
|
|
&.v > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> .label {
|
|
min-width: 6rem;
|
|
margin-right: 0.8rem;
|
|
font-size: 1.2rem;
|
|
text-align: right;
|
|
}
|
|
> .value {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|