feat(timeline): initial scope

packages/better-write-app/package.json

@@ -78,6 +78,7 @@
     "eslint": "8.12.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-vue": "8.6.0",
+    "konva": "8.3.10",
     "node-stdlib-browser": "1.2.0",
     "prettier": "2.6.2",
     "rimraf": "3.0.2",

packages/better-write-app/src/components/page/editor/aside/graph/AsideGraph.vue

@@ -11,44 +11,20 @@
         class="wb-text bg-transparent py-0.5 rounded hover:bg-theme-background-opacity-1 focus:bg-theme-background-opacity-1 font-bold font-raleway w-2/3 text-left truncate"
       />
     </div>
-    <div class="flex justify-between items-center w-full">
-      <p
-        v-if="!env.isEmptyProject(PROJECT.name)"
-        class="cursor-pointer truncate font-bold text-theme-aside-graph-text hover:text-theme-aside-graph-text-hover active:text-theme-aside-graph-text-active"
-        @click="graph.base()"
-      >
-        {{ t('editor.aside.graph.chapters') }}
-      </p>
-      <AsideGraphControl v-if="!env.isEmptyProject(PROJECT.name)" />
-    </div>
-    <div v-for="(page, index) in PROJECT.pages" :key="index">
-      <div
-        v-for="(entity, ind) in page.entities"
-        :id="graph.normalize().id(page, ind)"
-        :key="graph.normalize().key(page, ind)"
-        @click="graph.to(ind, page, entity)"
-      >
-        <AsideGraphItem :entity="entity" :page="page" />
-      </div>
-    </div>
+    <AsideGraphChapters />
+    <AsideGraphTimeline />
   </div>
 </template>
 
 <script setup lang="ts">
   import { useAbsoluteStore } from '@/store/absolute'
   import { useProjectStore } from '@/store/project'
-  import { useEnv } from '@/use/env'
-  import { useGraph } from '@/use/graph'
   import { useUtils } from '@/use/utils'
   import { computed, watch } from 'vue'
-  import { useI18n } from 'vue-i18n'
 
   const PROJECT = useProjectStore()
   const ABSOLUTE = useAbsoluteStore()
 
-  const graph = useGraph()
-  const env = useEnv()
-  const { t } = useI18n()
   const utils = useUtils()
 
   const name = computed(() => PROJECT.nameRaw)

packages/better-write-app/src/components/page/editor/aside/graph/AsideGraphItem.vue

@@ -8,7 +8,7 @@
     class="flex items-center cursor-pointer bg-theme-aside-graph-background hover:bg-theme-aside-graph-background-hover active:bg-theme-aside-graph-background-active text-theme-aside-graph-text hover:text-theme-aside-graph-text-hover active:text-theme-aside-graph-text-active"
     :class="[
       'border-l border-theme-aside-graph-lines ml-1',
-      activity ? '' : 'opacity-75',
+      activity && PROJECT.base === 'chapter' ? '' : 'opacity-70',
       props.entity.type === 'heading-one' ? 'h-12' : '',
     ]"
   >
@@ -148,6 +148,7 @@
 <script setup lang="ts">
   import { useContextStore } from '@/store/context'
   import { useEditorStore } from '@/store/editor'
+  import { useProjectStore } from '@/store/project'
   import { useEnv } from '@/use/env'
   import { useRaw } from '@/use/raw'
   import { ContextState, Entity } from 'better-write-types'
@@ -166,6 +167,7 @@
 
   const CONTEXT = useContextStore()
   const EDITOR = useEditorStore()
+  const PROJECT = useProjectStore()
 
   const env = useEnv()
   const raw = useRaw()

packages/better-write-app/src/components/page/editor/aside/graph/chapters/AsideGraphChapters.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :class="[PROJECT.base === 'chapter' ? '' : 'opacity-70']"
+    class="flex justify-between items-center w-full"
+  >
+    <p
+      v-if="!env.isEmptyProject(PROJECT.name)"
+      class="cursor-pointer truncate font-bold text-theme-aside-graph-text hover:text-theme-aside-graph-text-hover active:text-theme-aside-graph-text-active"
+      @click="graph.base()"
+    >
+      {{ t('editor.aside.graph.chapters') }}
+    </p>
+    <AsideGraphControl v-if="!env.isEmptyProject(PROJECT.name)" />
+  </div>
+  <div v-for="(page, index) in PROJECT.pages" :key="index">
+    <div
+      v-for="(entity, ind) in page.entities"
+      :id="graph.normalize().id(page, ind)"
+      :key="graph.normalize().key(page, ind)"
+      @click="graph.to(ind, page, entity)"
+    >
+      <AsideGraphItem :entity="entity" :page="page" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useProjectStore } from '@/store/project'
+  import { useEnv } from '@/use/env'
+  import { useGraph } from '@/use/graph'
+  import { useUtils } from '@/use/utils'
+  import { computed, watch } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  const PROJECT = useProjectStore()
+
+  const graph = useGraph()
+  const env = useEnv()
+  const { t } = useI18n()
+  const utils = useUtils()
+
+  const name = computed(() => PROJECT.nameRaw)
+
+  watch(name, () => {
+    PROJECT.name = utils.text().kebab(PROJECT.nameRaw)
+  })
+</script>

packages/better-write-app/src/components/page/editor/aside/graph/timeline/AsideGraphTimeline.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex justify-between items-center w-full mt-5">
+    <p
+      :class="[PROJECT.base === 'timeline' ? '' : 'opacity-70']"
+      class="cursor-pointer truncate font-bold text-theme-aside-graph-text hover:text-theme-aside-graph-text-hover active:text-theme-aside-graph-text-active"
+      @click="canvas.externals().load()"
+    >
+      {{ t('editor.aside.graph.timeline') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useProjectStore } from '@/store/project'
+  import { useCanvasTimeline } from '@/use/canvas/timeline'
+  import { useI18n } from 'vue-i18n'
+
+  const PROJECT = useProjectStore()
+
+  const { t } = useI18n()
+  const canvas = useCanvasTimeline()
+</script>

packages/better-write-app/src/components/page/editor/main/EditorBase.vue

@@ -14,7 +14,8 @@
         EDITOR.configuration.blocked && ABSOLUTE.project.blocked && env.isDev()
       "
     />
-    <EditorBaseRender v-else />
+    <EditorBaseRender v-else-if="PROJECT.base === 'chapter'" />
+    <EditorBaseTimeline v-else-if="PROJECT.base === 'timeline'" />
   </div>
 </template>
 
@@ -23,9 +24,11 @@
   import { useEditorStore } from '@/store/editor'
   import { useAbsoluteStore } from '@/store/absolute'
   import { useEnv } from '@/use/env'
+  import { useProjectStore } from '@/store/project'
 
   const EDITOR = useEditorStore()
   const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
 
   const env = useEnv()
 

packages/better-write-app/src/components/page/editor/main/timeline/EditorBaseTimeline.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <div id="bw-timeline" class="w-full wb-scroll overflow-auto"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useCanvasTimeline } from '@/use/canvas/timeline'
+  import { onMounted } from 'vue'
+
+  const timeline = useCanvasTimeline()
+
+  onMounted(() => {
+    timeline.start()
+  })
+</script>

packages/better-write-app/src/components/page/editor/main/timeline/EditorBaseTimelineHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex items-center h-10 w-full bg-theme-background-3">
+    <div></div>
+  </div>
+</template>

packages/better-write-app/src/store/project.ts

@@ -16,6 +16,7 @@ export const useProjectStore = defineStore('project', {
       producer: 'Untitled',
       keywords: 'Untitled',
       subject: 'Untitled',
+      base: 'chapter',
       type: 'creative',
       totalPagesCreated: 0,
       main: {},