schlechtenburg/src/components/internal/Toolbar.tsx

46 lines
1.1 KiB
TypeScript
Raw Normal View History

2020-05-28 20:16:35 +00:00
import debounce from 'lodash-es/debounce';
import {
defineComponent,
watch,
reactive,
} from '@vue/composition-api';
import { useBlockSizing } from '@components/TreeElement';
2020-05-20 14:21:08 +00:00
import './Toolbar.scss';
export default defineComponent({
name: 'sb-toolbar',
2020-05-25 21:10:21 +00:00
setup(props, context) {
2020-05-28 20:16:35 +00:00
const styles = reactive({
bottom: '',
left: '',
maxWidth: '',
});
const { editorDimensions, blockDimensions } = useBlockSizing();
const resetStyles = debounce(() => {
if (!editorDimensions.value || !blockDimensions.value) {
return;
}
const bottom = editorDimensions.value.height - blockDimensions.value.top;
styles.bottom = `${bottom}px`;
styles.left = `${blockDimensions.value.left}px`;
styles.maxWidth = `${blockDimensions.value.width}px`;
});
watch(editorDimensions, resetStyles);
watch(blockDimensions, resetStyles);
2020-05-25 21:10:21 +00:00
return () => (
2020-05-28 20:16:35 +00:00
<div
class="sb-toolbar"
style={styles}
2020-05-28 20:55:03 +00:00
onClick={($event: MouseEvent) => $event.stopPropagation()}
2020-05-28 20:16:35 +00:00
>
2020-05-25 21:10:21 +00:00
{context.slots.default()}
2020-05-20 14:21:08 +00:00
</div>
);
},
});