@andrewyang/ai-workflow-editor 0.1.0

package/src/components/editor/FormatPanel.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="flex h-full flex-col bg-white/80 backdrop-blur-xl border-l border-gray-200 w-80 shadow-[-4px_0_24px_rgba(0,0,0,0.08)] z-20 relative">
+    <!-- Header -->
+    <div class="flex items-center justify-between border-b border-gray-100 p-4">
+      <div class="font-bold text-gray-800">{{ $t('propertyPanel.title') }}</div>
+      <el-button link class="!text-gray-400 hover:!text-gray-600 !p-1.5" @click="$emit('close')">
+        <div class="i-lucide-x w-4 h-4" />
+      </el-button>
+    </div>
+
+    <!-- Tabs -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <el-tabs v-model="activeTab" class="h-full flex flex-col custom-tabs" stretch>
+        <!-- Style Tab -->
+        <el-tab-pane :label="$t('propertyPanel.tabs.style')" name="style" class="h-full overflow-y-auto custom-scrollbar">
+          <div class="p-4 space-y-6">
+            <!-- Fill -->
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <el-checkbox v-model="styleForm.fill" :label="$t('propertyPanel.style.fill')" />
+                <div class="flex items-center gap-2" v-if="styleForm.fill">
+                  <el-color-picker v-model="styleForm.fillColor" size="small" show-alpha />
+                </div>
+              </div>
+            </div>
+
+            <!-- Stroke -->
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <el-checkbox v-model="styleForm.stroke" :label="$t('propertyPanel.style.stroke')" />
+                <div class="flex items-center gap-2" v-if="styleForm.stroke">
+                  <el-color-picker v-model="styleForm.strokeColor" size="small" show-alpha />
+                </div>
+              </div>
+              <div v-if="styleForm.stroke" class="pl-6 space-y-2">
+                 <div class="flex items-center gap-2">
+                   <el-select v-model="styleForm.strokeType" size="small" class="flex-1">
+                     <el-option value="solid" label="Solid" />
+                     <el-option value="dashed" label="Dashed" />
+                     <el-option value="dotted" label="Dotted" />
+                   </el-select>
+                   <el-input-number v-model="styleForm.strokeWidth" size="small" :min="0" :max="20" controls-position="right" class="!w-20">
+                      <template #suffix>pt</template>
+                   </el-input-number>
+                 </div>
+              </div>
+            </div>
+
+            <!-- Opacity -->
+            <div class="space-y-2">
+              <div class="flex items-center justify-between text-xs text-gray-600">
+                <span>{{ $t('propertyPanel.style.opacity') }}</span>
+                <span>{{ styleForm.opacity }}%</span>
+              </div>
+              <el-slider v-model="styleForm.opacity" :min="0" :max="100" size="small" />
+            </div>
+
+            <!-- Effects -->
+            <div class="grid grid-cols-2 gap-3">
+              <el-checkbox v-model="styleForm.rounded" :label="$t('propertyPanel.style.rounded')" />
+              <el-checkbox v-model="styleForm.shadow" :label="$t('propertyPanel.style.shadow')" />
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- Text Tab -->
+        <el-tab-pane :label="$t('propertyPanel.tabs.text')" name="text" class="h-full overflow-y-auto custom-scrollbar">
+          <div class="p-4 space-y-6">
+            <!-- Content Editing (Double click fallback) -->
+            <div class="space-y-2">
+              <label class="text-xs font-medium text-gray-500">{{ $t('propertyPanel.text.content') }}</label>
+              <el-input v-model="textForm.content" type="textarea" :rows="2" resize="none" />
+            </div>
+
+            <!-- Font -->
+            <div class="space-y-3">
+               <div class="flex items-center gap-2">
+                 <el-select v-model="textForm.fontFamily" size="small" class="flex-1">
+                   <el-option value="Helvetica" label="Helvetica" />
+                   <el-option value="Arial" label="Arial" />
+                   <el-option value="Times New Roman" label="Times New Roman" />
+                 </el-select>
+               </div>
+               <div class="flex items-center gap-2">
+                 <div class="flex border border-gray-200 rounded overflow-hidden">
+                   <button 
+                    @click="textForm.bold = !textForm.bold"
+                    :class="['p-1.5 hover:bg-gray-50 transition-colors', textForm.bold ? 'bg-gray-100 text-purple-600' : 'text-gray-500']"
+                   >
+                     <div class="i-lucide-bold w-4 h-4" />
+                   </button>
+                   <div class="w-px bg-gray-200" />
+                   <button 
+                    @click="textForm.italic = !textForm.italic"
+                    :class="['p-1.5 hover:bg-gray-50 transition-colors', textForm.italic ? 'bg-gray-100 text-purple-600' : 'text-gray-500']"
+                   >
+                     <div class="i-lucide-italic w-4 h-4" />
+                   </button>
+                   <div class="w-px bg-gray-200" />
+                   <button 
+                    @click="textForm.underline = !textForm.underline"
+                    :class="['p-1.5 hover:bg-gray-50 transition-colors', textForm.underline ? 'bg-gray-100 text-purple-600' : 'text-gray-500']"
+                   >
+                     <div class="i-lucide-underline w-4 h-4" />
+                   </button>
+                 </div>
+                 <el-input-number v-model="textForm.fontSize" size="small" :min="8" :max="72" controls-position="right" class="flex-1">
+                    <template #suffix>px</template>
+                 </el-input-number>
+               </div>
+            </div>
+
+            <!-- Alignment -->
+            <div class="flex items-center justify-between border border-gray-200 rounded p-1">
+               <button 
+                v-for="align in ['left', 'center', 'right']" 
+                :key="align"
+                @click="textForm.align = align"
+                :class="['p-1 rounded hover:bg-gray-100 transition-colors', textForm.align === align ? 'bg-gray-100 text-purple-600' : 'text-gray-400']"
+               >
+                 <div :class="`i-lucide-align-${align} w-4 h-4`" />
+               </button>
+            </div>
+
+            <!-- Color -->
+             <div class="flex items-center justify-between">
+                <el-checkbox v-model="textForm.hasColor" :label="$t('propertyPanel.text.color')" />
+                <el-color-picker v-if="textForm.hasColor" v-model="textForm.color" size="small" />
+              </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- Arrange Tab -->
+        <el-tab-pane :label="$t('propertyPanel.tabs.arrange')" name="arrange" class="h-full overflow-y-auto custom-scrollbar">
+          <div class="p-4 space-y-6">
+            <!-- Z-Order -->
+            <div class="grid grid-cols-2 gap-2">
+              <el-button size="small" @click="$emit('z-index', 'front')">{{ $t('propertyPanel.arrange.front') }}</el-button>
+              <el-button size="small" @click="$emit('z-index', 'back')">{{ $t('propertyPanel.arrange.back') }}</el-button>
+            </div>
+
+            <!-- Size -->
+            <div class="space-y-3">
+              <div class="text-xs font-bold text-gray-900">{{ $t('propertyPanel.arrange.size') }}</div>
+              <div class="grid grid-cols-2 gap-3">
+                <div class="space-y-1">
+                   <div class="text-[10px] text-gray-400">W</div>
+                   <el-input-number v-model="arrangeForm.width" size="small" controls-position="right" class="!w-full" />
+                </div>
+                <div class="space-y-1">
+                   <div class="text-[10px] text-gray-400">H</div>
+                   <el-input-number v-model="arrangeForm.height" size="small" controls-position="right" class="!w-full" />
+                </div>
+              </div>
+            </div>
+
+            <!-- Position -->
+            <div class="space-y-3">
+              <div class="text-xs font-bold text-gray-900">{{ $t('propertyPanel.arrange.position') }}</div>
+              <div class="grid grid-cols-2 gap-3">
+                <div class="space-y-1">
+                   <div class="text-[10px] text-gray-400">X</div>
+                   <el-input-number v-model="arrangeForm.x" size="small" controls-position="right" class="!w-full" />
+                </div>
+                <div class="space-y-1">
+                   <div class="text-[10px] text-gray-400">Y</div>
+                   <el-input-number v-model="arrangeForm.y" size="small" controls-position="right" class="!w-full" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue';
+
+const props = defineProps<{
+  node: any;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'update', data: any): void;
+  (e: 'z-index', action: string): void;
+}>();
+
+const activeTab = ref('style');
+
+// Internal state initialized from node data
+const styleForm = reactive({
+  fill: true,
+  fillColor: '#ffffff',
+  stroke: true,
+  strokeColor: '#000000',
+  strokeType: 'solid',
+  strokeWidth: 1,
+  opacity: 100,
+  rounded: true,
+  shadow: true,
+});
+
+const textForm = reactive({
+  content: '',
+  fontFamily: 'Helvetica',
+  bold: false,
+  italic: false,
+  underline: false,
+  fontSize: 14,
+  align: 'center',
+  hasColor: true,
+  color: '#000000',
+});
+
+const arrangeForm = reactive({
+  width: 160,
+  height: 80,
+  x: 0,
+  y: 0,
+});
+
+// Watch node changes to update form
+watch(() => props.node, (newNode) => {
+  if (!newNode) return;
+  
+  // Style
+  const style = newNode.data?.style || {};
+  styleForm.fill = style.fill !== false;
+  styleForm.fillColor = style.backgroundColor || '#ffffff';
+  styleForm.stroke = style.stroke !== false;
+  styleForm.strokeColor = style.borderColor || '#e5e7eb'; // default border
+  styleForm.strokeWidth = style.borderWidth !== undefined ? parseInt(style.borderWidth) : 1;
+  styleForm.rounded = style.borderRadius !== '0px';
+  styleForm.shadow = !!style.boxShadow;
+  styleForm.opacity = (style.opacity !== undefined ? style.opacity : 1) * 100;
+
+  // Text
+  textForm.content = newNode.data?.label || '';
+  const textStyle = newNode.data?.textStyle || {};
+  textForm.fontSize = parseInt(textStyle.fontSize) || 14;
+  textForm.bold = textStyle.fontWeight === 'bold';
+  textForm.italic = textStyle.fontStyle === 'italic';
+  textForm.color = textStyle.color || '#1f2937';
+  textForm.align = textStyle.textAlign || 'center';
+
+  // Arrange
+  arrangeForm.width = newNode.style?.width ? parseInt(newNode.style.width) : 160;
+  arrangeForm.height = newNode.style?.height ? parseInt(newNode.style.height) : 80;
+  arrangeForm.x = Math.round(newNode.position?.x || 0);
+  arrangeForm.y = Math.round(newNode.position?.y || 0);
+}, { immediate: true, deep: true });
+
+// Watch form changes to emit updates
+watch(styleForm, () => {
+  emit('update', {
+    type: 'style',
+    data: {
+      backgroundColor: styleForm.fill ? styleForm.fillColor : 'transparent',
+      borderColor: styleForm.stroke ? styleForm.strokeColor : 'transparent',
+      borderWidth: `${styleForm.strokeWidth}px`,
+      borderStyle: styleForm.strokeType,
+      borderRadius: styleForm.rounded ? '8px' : '0px',
+      boxShadow: styleForm.shadow ? '0 4px 6px -1px rgb(0 0 0 / 0.1)' : 'none',
+      opacity: styleForm.opacity / 100,
+    }
+  });
+});
+
+watch(textForm, () => {
+  emit('update', {
+    type: 'text',
+    data: {
+      label: textForm.content,
+      textStyle: {
+        fontSize: `${textForm.fontSize}px`,
+        fontWeight: textForm.bold ? 'bold' : 'normal',
+        fontStyle: textForm.italic ? 'italic' : 'normal',
+        textDecoration: textForm.underline ? 'underline' : 'none',
+        color: textForm.hasColor ? textForm.color : 'inherit',
+        textAlign: textForm.align,
+      }
+    }
+  });
+});
+
+watch(arrangeForm, () => {
+  emit('update', {
+    type: 'arrange',
+    data: {
+      width: `${arrangeForm.width}px`,
+      height: `${arrangeForm.height}px`,
+      x: arrangeForm.x,
+      y: arrangeForm.y,
+    }
+  });
+});
+
+</script>
+
+<style scoped>
+.custom-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  background-color: transparent;
+  border-bottom: 1px solid #f3f4f6;
+}
+.custom-tabs :deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+.custom-tabs :deep(.el-tabs__item) {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+}
+.custom-tabs :deep(.el-tabs__item.is-active) {
+  color: #7c3aed; /* purple-600 */
+}
+.custom-tabs :deep(.el-tabs__active-bar) {
+  background-color: #7c3aed;
+}
+.custom-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  overflow: hidden;
+}
+</style>

package/src/components/editor/NodePanel.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="flex h-full flex-col bg-azure/80 backdrop-blur-xl border-r border-gray-200 w-72 shadow-[4px_0_24px_rgba(0,0,0,0.08)] z-20 relative" style="background-color: azure;">
+    <!-- Header -->
+    <div class="p-4 border-b border-gray-100">
+      <div class="relative group">
+        <el-input
+          v-model="searchText"
+          :placeholder="$t('nodePanel.search')"
+          class="w-full !rounded-xl transition-all duration-300"
+        >
+          <template #prefix>
+            <div class="i-lucide-search text-gray-400 group-hover:text-purple-500 transition-colors" />
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <!-- Scrollable Content -->
+    <div class="flex-1 overflow-y-auto p-4 space-y-6 custom-scrollbar">
+      <el-collapse v-model="activeNames" class="custom-collapse border-none">
+        <!-- Section: Common -->
+        <el-collapse-item :title="$t('nodePanel.general')" name="general">
+          <div class="grid grid-cols-1 gap-3 px-1">
+            <div 
+              v-for="node in filteredGeneralNodes"
+              :key="node.label"
+              class="group relative flex items-center p-2.5 rounded-xl bg-gradient-to-br from-white to-gray-50/50 border border-gray-100 hover:border-purple-200/60 shadow-sm hover:shadow-[0_8px_20px_rgba(168,85,247,0.08)] cursor-grab active:cursor-grabbing transition-all duration-300 hover:-translate-y-0.5"
+              :draggable="node.draggable"
+              @dragstart="node.draggable && onDragStart($event, node.type)"
+              :title="node.fullLabel || node.label"
+            >
+              <!-- Left: Icon -->
+              <div class="w-10 h-10 flex items-center justify-center rounded-xl bg-purple-50/50 group-hover:bg-purple-100/60 group-hover:scale-110 transition-all duration-300">
+                <div :class="[node.icon, 'text-lg text-purple-500/80 group-hover:text-purple-600 transition-colors duration-300']" />
+              </div>
+              <!-- Right: Label -->
+              <div class="flex-1 pl-3">
+                <span class="text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors">{{ node.label }}</span>
+              </div>
+              
+              <!-- Drag Indicator -->
+              <div class="absolute right-3 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-2 group-hover:translate-x-0 text-gray-300">
+                <div class="i-lucide-grip-vertical w-4 h-4" />
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+
+        <!-- Section: SysML -->
+        <el-collapse-item :title="$t('nodePanel.sysml')" name="sysml">
+          <div class="grid grid-cols-1 gap-3 px-1">
+            <div 
+              v-for="node in filteredSysmlNodes"
+              :key="node.label"
+              class="group relative flex items-center p-2.5 rounded-xl bg-gradient-to-br from-white to-gray-50/50 border border-gray-100 hover:border-blue-200/60 shadow-sm hover:shadow-[0_8px_20px_rgba(59,130,246,0.08)] cursor-grab active:cursor-grabbing transition-all duration-300 hover:-translate-y-0.5"
+              :draggable="node.draggable"
+              @dragstart="node.draggable && onDragStart($event, node.type)"
+              :title="node.fullLabel || node.label"
+            >
+              <!-- Left: Icon -->
+              <div class="w-10 h-10 flex items-center justify-center rounded-xl bg-blue-50/50 group-hover:bg-blue-100/60 group-hover:scale-110 transition-all duration-300">
+                <div :class="[node.icon, 'text-lg text-blue-500/80 group-hover:text-blue-600 transition-colors duration-300']" />
+              </div>
+              <!-- Right: Label -->
+              <div class="flex-1 pl-3">
+                <span class="text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors">{{ node.label }}</span>
+              </div>
+               <!-- Drag Indicator -->
+              <div class="absolute right-3 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-2 group-hover:translate-x-0 text-gray-300">
+                <div class="i-lucide-grip-vertical w-4 h-4" />
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+
+        <!-- Section: Advanced -->
+        <el-collapse-item :title="$t('nodePanel.advanced')" name="advanced">
+          <div class="px-1">
+             <div class="flex flex-col items-center justify-center py-8 border border-dashed border-gray-200 rounded-xl bg-gray-50/30">
+               <div class="i-lucide-package-open text-xl text-gray-300 mb-2" />
+               <span class="text-[10px] text-gray-400 font-medium">{{ $t('nodePanel.noAdvanced') }}</span>
+             </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+    <!-- Footer -->
+    <div class="p-4 border-t border-gray-100 bg-white/40 backdrop-blur-md">
+      <el-button class="w-full !rounded-xl !h-10 !border-gray-200/60 !bg-white/80 hover:!bg-white hover:!border-purple-200 hover:!text-purple-600 !shadow-sm hover:!shadow-lg hover:!shadow-purple-500/10 transition-all duration-300 group">
+        <div class="i-lucide-plus mr-2 group-hover:scale-110 transition-transform duration-300" /> 
+        <span class="text-xs font-medium">{{ $t('nodePanel.moreShapes') }}</span>
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #e5e7eb;
+  border-radius: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #d1d5db;
+}
+
+/* Custom Collapse Styles */
+.custom-collapse :deep(.el-collapse-item__header) {
+  background-color: transparent;
+  border-bottom: none;
+  font-size: 0.75rem; /* text-xs */
+  font-weight: 700; /* font-bold */
+  color: #9ca3af; /* text-gray-400 */
+  text-transform: uppercase;
+  letter-spacing: 0.05em; /* tracking-wider */
+  height: 32px;
+  line-height: 32px;
+  margin-bottom: 0.5rem;
+}
+.custom-collapse :deep(.el-collapse-item__header:hover) {
+  color: #374151; /* text-gray-700 */
+}
+.custom-collapse :deep(.el-collapse-item__wrap) {
+  background-color: transparent;
+  border-bottom: none;
+}
+.custom-collapse :deep(.el-collapse-item__content) {
+  padding-bottom: 0.5rem;
+}
+.custom-collapse :deep(.el-collapse-item__arrow) {
+  margin: 0 0.5rem 0 0;
+  color: inherit;
+  transform: rotate(-90deg);
+  transition: transform 0.3s;
+}
+.custom-collapse :deep(.el-collapse-item.is-active .el-collapse-item__arrow) {
+  transform: rotate(0deg);
+}
+</style>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const searchText = ref('');
+const activeNames = ref(['general', 'sysml']);
+
+const generalNodes = computed(() => [
+  {
+    type: 'custom-ai',
+    label: t('nodePanel.nodes.ai'),
+    fullLabel: t('nodePanel.nodes.aiFull'),
+    icon: 'i-lucide-brain-circuit',
+    wrapperClass: 'hover:bg-purple-50 hover:border-purple-200',
+    iconClass: 'text-purple-600',
+    textClass: 'group-hover:text-purple-700',
+    draggable: true,
+    showLabel: true
+  },
+  {
+    type: 'custom-normal',
+    label: t('nodePanel.nodes.action'),
+    fullLabel: t('nodePanel.nodes.actionFull'),
+    icon: 'i-lucide-square-activity',
+    wrapperClass: 'hover:bg-blue-50 hover:border-blue-200',
+    iconClass: 'text-blue-600',
+    textClass: 'group-hover:text-blue-700',
+    draggable: true,
+    showLabel: true
+  },
+  // { label: t('nodePanel.nodes.square'), icon: 'i-lucide-square', iconClass: 'text-gray-400', wrapperClass: 'hover:bg-gray-100', showLabel: false, type: '', draggable: false },
+  // { label: t('nodePanel.nodes.circle'), icon: 'i-lucide-circle', iconClass: 'text-gray-400', wrapperClass: 'hover:bg-gray-100', showLabel: false, type: '', draggable: false },
+  // { label: t('nodePanel.nodes.diamond'), icon: 'i-lucide-diamond', iconClass: 'text-gray-400', wrapperClass: 'hover:bg-gray-100', showLabel: false, type: '', draggable: false },
+  // { label: t('nodePanel.nodes.triangle'), icon: 'i-lucide-triangle', iconClass: 'text-gray-400', wrapperClass: 'hover:bg-gray-100', showLabel: false, type: '', draggable: false },
+  // { label: t('nodePanel.nodes.cylinder'), icon: 'i-lucide-cylinder', iconClass: 'text-gray-400', wrapperClass: 'hover:bg-gray-100', showLabel: false, type: '', draggable: false },
+  // { label: t('nodePanel.nodes.file'), icon: 'i-lucide-file', iconClass: 'text-gray-400', wrapperClass: 'hover:bg-gray-100', showLabel: false, type: '', draggable: false },
+]);
+
+const sysmlNodes = computed(() => [
+  {
+    type: 'sysml-block',
+    label: t('nodePanel.nodes.sysmlBlock'),
+    fullLabel: t('nodePanel.nodes.sysmlBlockFull'),
+    icon: 'i-lucide-box',
+    wrapperClass: 'hover:bg-gray-100 hover:border-gray-400',
+    iconClass: 'text-gray-700',
+    textClass: 'group-hover:text-gray-900',
+    draggable: true,
+    showLabel: true
+  },
+  {
+    type: 'sysml-req',
+    label: t('nodePanel.nodes.sysmlReq'),
+    fullLabel: t('nodePanel.nodes.sysmlReqFull'),
+    icon: 'i-lucide-file-text',
+    wrapperClass: 'hover:bg-yellow-50 hover:border-yellow-200',
+    iconClass: 'text-yellow-600',
+    textClass: 'group-hover:text-yellow-700',
+    draggable: true,
+    showLabel: true
+  },
+  {
+    type: 'sysml-usecase',
+    label: t('nodePanel.nodes.sysmlUseCase'),
+    fullLabel: t('nodePanel.nodes.sysmlUseCaseFull'),
+    icon: 'i-lucide-circle',
+    wrapperClass: 'hover:bg-green-50 hover:border-green-200',
+    iconClass: 'text-green-600',
+    textClass: 'group-hover:text-green-700',
+    draggable: true,
+    showLabel: true
+  },
+]);
+
+const filterNodes = (nodes: any[], query: string) => {
+  if (!query) return nodes;
+  return nodes.filter(node => 
+    node.label.toLowerCase().includes(query) || 
+    (node.fullLabel && node.fullLabel.toLowerCase().includes(query))
+  );
+};
+
+const filteredGeneralNodes = computed(() => filterNodes(generalNodes.value, searchText.value.toLowerCase()));
+const filteredSysmlNodes = computed(() => filterNodes(sysmlNodes.value, searchText.value.toLowerCase()));
+
+
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/vueflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  }
+};
+</script>