2023-10-29 22:02:07 +03:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { logEvent } from 'histoire/client'
|
|
|
|
|
|
|
|
import ComponentBrowser from '@/components/ComponentBrowser.vue'
|
2024-08-08 15:12:05 +03:00
|
|
|
import { Usage } from '@/components/ComponentBrowser/input'
|
2023-10-29 22:02:07 +03:00
|
|
|
import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
|
2023-12-19 20:58:11 +03:00
|
|
|
import { Vec2 } from '@/util/data/vec2'
|
2023-10-29 22:02:07 +03:00
|
|
|
import GroupColorsWrapper from './GroupColorsWrapper.vue'
|
|
|
|
import NavigatorWrapper from './NavigatorWrapper.vue'
|
|
|
|
|
|
|
|
const position = new Vec2(-329.5, 0)
|
2024-08-08 15:12:05 +03:00
|
|
|
const usage: Usage = { type: 'newNode' }
|
2023-10-29 22:02:07 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<Story
|
|
|
|
title="Component Browser"
|
|
|
|
group="graph"
|
|
|
|
:layout="{ type: 'single', iframe: false }"
|
|
|
|
:setupApp="
|
|
|
|
() => {
|
|
|
|
useSuggestionDbStore()
|
|
|
|
}
|
|
|
|
"
|
|
|
|
responsiveDisabled
|
|
|
|
autoPropsDisabled
|
|
|
|
>
|
|
|
|
<NavigatorWrapper style="height: 100%">
|
|
|
|
<template #default="{ navigator }">
|
|
|
|
<GroupColorsWrapper>
|
|
|
|
<ComponentBrowser
|
2023-12-15 17:58:57 +03:00
|
|
|
:nodePosition="position"
|
2023-10-29 22:02:07 +03:00
|
|
|
:navigator="navigator"
|
2024-08-08 15:12:05 +03:00
|
|
|
:usage="usage"
|
2023-12-15 17:58:57 +03:00
|
|
|
:sourcePort="null"
|
|
|
|
:initialCaretPosition="[0, 0]"
|
2023-10-29 22:02:07 +03:00
|
|
|
@finished="logEvent('finished', [])"
|
|
|
|
/>
|
|
|
|
</GroupColorsWrapper>
|
|
|
|
</template>
|
|
|
|
</NavigatorWrapper>
|
|
|
|
</Story>
|
|
|
|
</template>
|