schlechtenburg/packages/core/lib/components/TreeElement.ts
2020-12-27 22:32:43 +01:00

131 lines
3.1 KiB
TypeScript

import {
Ref,
ref,
inject,
reactive,
computed,
watch,
provide,
} from 'vue';
export interface BlockDefinition {
name: string;
getDefaultData: any;
edit: () => Promise<any>;
display: () => Promise<any>;
}
export interface BlockLibraryDefinition {
[name: string]: BlockDefinition;
}
export interface BlockData { [name: string]: any }
export interface Block {
name: string;
blockId: string;
data: BlockData;
}
export interface BlockProps {
blockId: string;
data: { [key: string]: any};
}
export const model = {
prop: 'block',
event: 'update',
};
export const blockProps = {
blockId: { type: String, required: true },
data: { type: Object, default: () => ({}) },
};
export enum SbMode {
Edit = 'edit',
Display = 'display',
}
export const Mode = Symbol('Schlechtenburg mode');
export const BlockLibrary = Symbol('Schlechtenburg block library');
export function useDynamicBlocks() {
const mode = inject(Mode, ref(SbMode.Edit));
const customBlocks: BlockLibraryDefinition = inject(BlockLibrary, reactive({}));
const getBlock = (name: string) => customBlocks[name][mode.value];
return {
mode,
customBlocks,
getBlock,
};
}
interface BlockRect {
height: number;
width: number;
left: number;
top: number;
}
export const BlockDimensions = Symbol('Schlechtenburg block dimensions');
export const EditorDimensions = Symbol('Schlechtenburg editor dimensions');
export function useResizeObserver(el: Ref<null|HTMLElement>, symbol: symbol) {
const dimensions: Ref<null|BlockRect> = ref(null);
provide(symbol, dimensions);
const triggerSizeCalculation = () => {
if (!el.value) {
return;
}
const clientRect = el.value.getBoundingClientRect();
dimensions.value = {
width: clientRect.width,
height: clientRect.height,
left: el.value.offsetLeft,
top: el.value.offsetTop,
};
};
const resizeObserver = new ResizeObserver(triggerSizeCalculation);
const mutationObserver = new MutationObserver(triggerSizeCalculation);
watch(el, () => {
if (!el.value) {
return;
}
resizeObserver.observe(el.value);
mutationObserver.observe(el.value, { attributes: true, childList: false, subtree: false });
});
return { triggerSizeCalculation, dimensions };
}
export function useBlockSizing() {
const editorDimensions: Ref<BlockRect|null> = inject(EditorDimensions, ref(null));
const blockDimensions: Ref<BlockRect|null> = inject(BlockDimensions, ref(null));
return { editorDimensions, blockDimensions };
}
export const ActiveBlock = Symbol('Schlechtenburg active block');
export function useActivation(currentBlockId: string) {
const activeBlockId: Ref<string|null> = inject(ActiveBlock, ref(null));
const isActive = computed(() => activeBlockId.value === currentBlockId);
const activate = (blockId?: string|null) => {
activeBlockId.value = blockId !== undefined ? blockId : currentBlockId;
};
const requestActivation = () => {
if (activeBlockId.value) {
return;
}
activate();
};
return {
isActive,
activate,
requestActivation,
};
}