Full Sail University에서 Final Project로 진행한 복분자막걸리(Raspberry Rice Wine, RRW) 개발 과정에서 작성한 글입니다.
In this week, I have focused on implementing the script editor. Now the basic functionalities of the script editor are working. This includes adding/editing scripts, adding fields, editing the name and the value of fields. Although some features like swapping the order of scripts, removing fields, and locking fields(duplicated to the newly created script), I'm mostly satisfied with this week's progress.
Actually, I should have finished implementing the layout system before implementing the editor since I left the tab content rendering part incomplete. The panel content is declared inside the slot, and the PanelWrapper component directly generates tab objects from it. The title of the tab is retrieved from the title property of the VNode. And the VNode becomes the content of the tab.
I have faced two issues while working on this part. The first one was about dynamically rendering VNodes inside the template of the Panel component. I tried <component :is="vnode" /> first but then realized that it is not being updated even when I update the vnode. I solved this issue by creating a VNodeRenderer component that receives a VNode as a prop and then renders it using render(), not template.
The second issue was about watching the slot content change. Since the PanelWrapper component uses dynamically created slot names (`${row}-${col}` format), I needed to watch every existing slot. I have ended with this:
const currSlot = slots[`${i}-${j}`]
if (currSlot) {
watch(
() => currSlot(),
(v) => {
// handle the change
},
{ immediate: true, deep: true }
)
}I'm not sure if this works well when the number of rows/cols changes, but I have ignored that part because handling that case would also require lots of work on other parts of the layout system.
After resolving all issues in the layout system, I have started implementing the script editor. The script editor component, ScriptSetEditor, currently has two subcomponents(displayed as tabs), ScriptList and ScriptEditor. ScriptList handles selecting the script to edit, and adding new scripts. Then ScriptEditor is used for editing the selected script. It's currently possible to edit existing fields' values and to add new fields in the script. As mentioned before, more features are needed to be implemented, like swapping the order of scripts, locking fields, and more.
I'm mostly satisfied with this week's progress, as now I have something related to the core functionality working. It'd be better to implement more features, but I have failed to achieve it because of the issues mentioned above. Next week I want to finish the remaining features and start implementing some hotkey system for speedy titling.
