fix(content): node transparent alignment

Author: SergioRibera

components/NodeTransparent.vue

@@ -13,6 +13,8 @@
   const checkTargetHandle = (ty) => {
     return Object.values(props.data.targetPosition || {}).includes(ty)
   }
+
+  const alignmentClass = computed(() => 'text-' + (props.data.align || 'left'))
 </script>
 
 <template>
@@ -26,7 +28,7 @@
   <Handle v-if="checkTargetHandle('left')" type="target" :position="Position.Left" />
   <Handle v-if="checkTargetHandle('bottom')" type="target" :position="Position.Bottom" />
 
-  <div class="py-1 px-2">
+  <div :class="['py-1 px-2', alignmentClass]">
     {{ props.label }}
   </div>
 </template>

components/Roadmap.vue

@@ -11,8 +11,8 @@
 
   const roadmapNodes = ref([
     { id: 'topics', type: 'topics', position: { x: 0, y: -150 }, data: { topicLevel: 'start' } },
-    ...data.value.map(({ title, _path, data: { position, width, sourcePosition, targetPosition, topicLevel, type } }) => (
-    { id: _path.substring(1).replaceAll('/', "-").replaceAll('_', ''), type, position, width, label: title, data: { topicLevel, sourcePosition, targetPosition } }
+    ...data.value.map(({ title, _path, data: { position, width, sourcePosition, targetPosition, topicLevel, type, align } }) => (
+    { id: _path.substring(1).replaceAll('/', "-").replaceAll('_', ''), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition } }
   ))
   ])