import { defineComponent, provide, shallowReactive, ref, PropType, Ref, } from 'vue'; import { model, Block, BlockTree, BlockDefinition, BlockLibraryDefinition, } from '../blocks'; import { Mode, SbMode } from '../mode'; import { BlockLibrary } from '../use-dynamic-blocks'; import { BlockTreeSym, BlockTreeRegister, BlockTreeUnregister } from '../use-block-tree'; import { EditorDimensions, useResizeObserver } from '../use-resize-observer'; import { ActiveBlock } from '../use-activation'; import { SbMainMenu } from './MainMenu'; import { SbBlockToolbar } from './BlockToolbar'; import { SbBlock } from './Block'; import './Schlechtenburg.scss'; export interface SchlechtenburgProps { customBlocks: BlockDefinition[]; onUpdate: (b: Block) => void; block: Block; mode: SbMode; } export const Schlechtenburg = defineComponent({ name: 'schlechtenburg-main', model, props: { customBlocks: { type: Array as PropType, default: () => [] }, block: { type: Object as PropType>, required: true }, onUpdate: { type: Function, default: () => {} }, mode: { type: String as PropType, validator(value: any) { return Object.values(SbMode).includes(value); }, default: SbMode.Edit, }, }, setup(props: SchlechtenburgProps) { const el: Ref = ref(null); useResizeObserver(el, EditorDimensions); const mode = ref(props.mode); provide(Mode, mode); const activeBlock = ref(null); provide(ActiveBlock, activeBlock); const blockTree = ref(null); provide(BlockTreeSym, blockTree); provide(BlockTreeRegister, (block: BlockTree) => { blockTree.value = block; }); provide(BlockTreeUnregister, () => { blockTree.value = null; }); const blockLibrary: BlockLibraryDefinition = shallowReactive({ ...props.customBlocks.reduce( (blocks: {[name: string]: Block}, block: Block) => ({ ...blocks, [block.name]: block }), {}, ), }); provide(BlockLibrary, blockLibrary); return () => (
{ mode.value === SbMode.Edit ? <> : null }
); }, });