68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
class="z-[1] select-none touch-none"
|
|
:class="[
|
|
selected ? 'outline outline-2 outline-accent outline-offset-2' : '',
|
|
extraClass
|
|
]"
|
|
:style="baseStyle"
|
|
@mousedown.stop="!noInteraction && $emit('drag-start', { id: widget.id, event: $event })"
|
|
@touchstart.stop="!noInteraction && $emit('drag-start', { id: widget.id, event: $event })"
|
|
@click.stop="handleClick"
|
|
>
|
|
<slot></slot>
|
|
|
|
<!-- Resize Handle -->
|
|
<div
|
|
v-if="selected"
|
|
class="absolute -right-1.5 -bottom-1.5 w-3.5 h-3.5 rounded-[4px] bg-accent border-[2px] border-[#1b1308] shadow-[0_4px_12px_rgba(0,0,0,0.35)] cursor-se-resize z-10"
|
|
data-resize-handle
|
|
@mousedown.stop="$emit('resize-start', { id: widget.id, event: $event })"
|
|
@touchstart.stop="$emit('resize-start', { id: widget.id, event: $event })"
|
|
>
|
|
<span class="absolute right-[2px] bottom-[2px] w-[6px] h-[6px] border-r-2 border-b-2 border-[#1b1308a6] rounded-[2px]"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { fontSizes } from '../../../constants';
|
|
|
|
const props = defineProps({
|
|
widget: { type: Object, required: true },
|
|
scale: { type: Number, default: 1 },
|
|
selected: { type: Boolean, default: false },
|
|
extraClass: { type: String, default: '' },
|
|
extraStyle: { type: Object, default: () => ({}) },
|
|
noInteraction: { type: Boolean, default: false }
|
|
});
|
|
|
|
const emit = defineEmits(['select', 'drag-start', 'resize-start', 'click']);
|
|
|
|
const baseStyle = computed(() => {
|
|
const w = props.widget;
|
|
const s = props.scale;
|
|
|
|
return {
|
|
left: `${w.x * s}px`,
|
|
top: `${w.y * s}px`,
|
|
width: `${w.w * s}px`,
|
|
height: `${w.h * s}px`,
|
|
fontSize: `${(fontSizes[w.fontSize] || 14) * s}px`,
|
|
color: w.textColor,
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
cursor: 'move',
|
|
userSelect: 'none',
|
|
touchAction: 'none',
|
|
...props.extraStyle
|
|
};
|
|
});
|
|
|
|
function handleClick(event) {
|
|
emit('click', event);
|
|
emit('select');
|
|
}
|
|
</script>
|