Full Sail University에서 Final Project로 진행한 복분자막걸리(Raspberry Rice Wine, RRW) 개발 과정에서 작성한 글입니다.
This week, I have worked on the template editor. Although it's still not an 'editor', everything except the actual editor is there, like the template list, layer list, and the layer editor that only renders. There were some stressful tasks, like implementing a nested layer list. But I have solved all the problems and everything implemented is working well.
The template editor takes a separate view with a PanelWrapper
. Four panels, template list, layer list, layer editor, and preview, form the editor. The template list shows the templates used in the project. It should be able to add new templates, import from/export as a file, and excluding templates from the project. However, displaying templates and selecting one of them are the only implemented features.
The layer list shows the layers included in the selected template. The tricky part was that a template can have multiple layers, and a layer can have multiple layers as children. To display this kind of hierarchy in a simple and clear way, I have made the list items expandable. The indent gets larger as the hierarchy goes deep. Every layer that has children becomes expandable. This was possible to be implemented using the render()
function-based component rendering. Recursively rendering the items was impossible to implement using the Vue templates, but was pretty easy to implement using JSX.
The layer editor is incomplete. It currently only renders the selected layer. However, it should be able to adjust the properties of the selected layer. Rendering the layer works by applying an inline CSS object that is made of props and style generators included in the layer. Although it is currently not visible to the user side, it is working well internally, and should be possible to check it out when the property editor is implemented.
I have struggled with doing all the stuff this week. It doesn't seem like a problem of my skills but looks like a personal problem. I've been tired for a whole week and wasn't able to focus on the work. I hope it gets better next week to do some nicer works.