You've already forked obsidian-visualiser
WebSocket API, new ID/encrypt/decrypt algorithm.
This commit is contained in:
Clément Pons
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<TreeRoot v-bind="forward" v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 overflow-auto max-h-full">
|
||||
<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="group flex items-center outline-none relative cursor-pointer max-w-full" @select.prevent @toggle.prevent>
|
||||
<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver }">
|
||||
<slot :handleToggle="handleToggle"
|
||||
:handleSelect="handleSelect"
|
||||
:isExpanded="isExpanded"
|
||||
:isSelected="isSelected"
|
||||
:isDragging="isDragging"
|
||||
:isDraggedOver="isDraggedOver"
|
||||
:item="item"
|
||||
/>
|
||||
</template>
|
||||
<template #hint="{ instruction }">
|
||||
<div v-if="instruction">
|
||||
<slot name="hint" :instruction="instruction" />
|
||||
</div>
|
||||
</template>
|
||||
</DraggableTreeItem>
|
||||
</TreeRoot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T extends Record<string, any>">
|
||||
import { useForwardPropsEmits, type FlattenedItem, type TreeRootEmits, type TreeRootProps } from 'radix-vue';
|
||||
import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
|
||||
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
|
||||
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
|
||||
|
||||
const props = defineProps<TreeRootProps<T>>();
|
||||
const emits = defineEmits<TreeRootEmits<T> & {
|
||||
'updateTree': [instruction: Instruction, itemId: string, targetId: string];
|
||||
}>();
|
||||
|
||||
defineSlots<{
|
||||
default: (props: {
|
||||
handleToggle: () => void,
|
||||
handleSelect: () => void,
|
||||
isExpanded: boolean,
|
||||
isSelected: boolean,
|
||||
isDragging: boolean,
|
||||
isDraggedOver: boolean,
|
||||
item: FlattenedItem<T>,
|
||||
}) => any,
|
||||
hint: (props: {
|
||||
instruction: Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null
|
||||
}) => any,
|
||||
}>();
|
||||
|
||||
const forward = useForwardPropsEmits(props, emits);
|
||||
|
||||
watchEffect((onCleanup) => {
|
||||
const dndFunction = combine(
|
||||
monitorForElements({
|
||||
onDrop(args) {
|
||||
const { location, source } = args;
|
||||
|
||||
if (!location.current.dropTargets.length)
|
||||
return;
|
||||
|
||||
const itemId = source.data.id as string;
|
||||
const target = location.current.dropTargets[0];
|
||||
const targetId = target.data.id as string;
|
||||
|
||||
const instruction: Instruction | null = extractInstruction(
|
||||
target.data,
|
||||
);
|
||||
|
||||
if (instruction !== null)
|
||||
{
|
||||
emits('updateTree', instruction, itemId, targetId);
|
||||
}
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
onCleanup(() => {
|
||||
dndFunction();
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<TreeItem ref="el" v-bind="forward" v-slot="{ isExpanded, isSelected, isIndeterminate, handleToggle, handleSelect }">
|
||||
<slot
|
||||
:is-expanded="isExpanded"
|
||||
:is-selected="isSelected"
|
||||
:is-indeterminate="isIndeterminate"
|
||||
:handle-select="handleSelect"
|
||||
:handle-toggle="handleToggle"
|
||||
:isDragging="isDragging"
|
||||
:isDraggedOver="isDraggedOver"
|
||||
/>
|
||||
<div v-if="instruction">
|
||||
<slot name="hint" :instruction="instruction" />
|
||||
</div>
|
||||
</TreeItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T extends Record<string, any>">
|
||||
import { useForwardPropsEmits, type FlattenedItem, type TreeItemEmits, type TreeItemProps } from 'radix-vue';
|
||||
import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
|
||||
import { type Instruction, attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
|
||||
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
|
||||
|
||||
const props = defineProps<TreeItemProps<T> & FlattenedItem<T>>();
|
||||
const emits = defineEmits<TreeItemEmits<T>>();
|
||||
|
||||
defineSlots<{
|
||||
default: (props: {
|
||||
isExpanded: boolean
|
||||
isSelected: boolean
|
||||
isIndeterminate: boolean | undefined
|
||||
isDragging: boolean
|
||||
isDraggedOver: boolean
|
||||
handleToggle: () => void
|
||||
handleSelect: () => void
|
||||
}) => any,
|
||||
hint: (props: {
|
||||
instruction: Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null
|
||||
}) => any,
|
||||
}>()
|
||||
|
||||
const forward = useForwardPropsEmits(props, emits);
|
||||
|
||||
const element = templateRef('el');
|
||||
const isDragging = ref(false);
|
||||
const isDraggedOver = ref(false);
|
||||
const isInitialExpanded = ref(false);
|
||||
const instruction = ref<Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null>(null);
|
||||
|
||||
const mode = computed(() => {
|
||||
if (props.hasChildren)
|
||||
return 'expanded'
|
||||
if (props.index + 1 === props.parentItem?.children?.length)
|
||||
return 'last-in-group'
|
||||
return 'standard'
|
||||
});
|
||||
|
||||
watchEffect((onCleanup) => {
|
||||
const currentElement = unrefElement(element) as HTMLElement;
|
||||
|
||||
if (!currentElement)
|
||||
return
|
||||
|
||||
const item = { ...props.value, level: props.level, id: props._id }
|
||||
|
||||
const expandItem = () => {
|
||||
if (!element.value?.isExpanded) {
|
||||
element.value?.handleToggle()
|
||||
}
|
||||
}
|
||||
|
||||
const closeItem = () => {
|
||||
if (element.value?.isExpanded) {
|
||||
element.value?.handleToggle()
|
||||
}
|
||||
}
|
||||
|
||||
const dndFunction = combine(
|
||||
draggable({
|
||||
element: currentElement,
|
||||
getInitialData: () => item,
|
||||
onDragStart: () => {
|
||||
isDragging.value = true
|
||||
isInitialExpanded.value = element.value?.isExpanded ?? false
|
||||
closeItem()
|
||||
},
|
||||
onDrop: () => {
|
||||
isDragging.value = false
|
||||
if (isInitialExpanded.value)
|
||||
expandItem()
|
||||
},
|
||||
}),
|
||||
|
||||
dropTargetForElements({
|
||||
element: currentElement,
|
||||
getData: ({ input, element }) => {
|
||||
const data = { id: item.id }
|
||||
|
||||
return attachInstruction(data, {
|
||||
input,
|
||||
element,
|
||||
indentPerLevel: 16,
|
||||
currentLevel: props.level,
|
||||
mode: mode.value,
|
||||
block: [],
|
||||
})
|
||||
},
|
||||
canDrop: ({ source }) => {
|
||||
return source.data.id !== item.id
|
||||
},
|
||||
onDrag: ({ self }) => {
|
||||
instruction.value = extractInstruction(self.data) as typeof instruction.value
|
||||
},
|
||||
onDragEnter: ({ source }) => {
|
||||
if (source.data.id !== item.id) {
|
||||
isDraggedOver.value = true
|
||||
}
|
||||
},
|
||||
onDragLeave: () => {
|
||||
isDraggedOver.value = false
|
||||
instruction.value = null
|
||||
},
|
||||
onDrop: ({ location }) => {
|
||||
isDraggedOver.value = false
|
||||
instruction.value = null
|
||||
},
|
||||
getIsSticky: () => true,
|
||||
}),
|
||||
|
||||
monitorForElements({
|
||||
canMonitor: ({ source }) => {
|
||||
return source.data.id !== item.id
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
// Cleanup dnd function
|
||||
onCleanup(() => dndFunction())
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user