feat(gsoc'24): Implemented LayoutElements Panel vue component #317
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <template> | ||
| <div class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css" | ||
| ref="layoutElementPanelRef"> | ||
| <div class="panel-header"> | ||
| {{ $t('simulator.layout.layout_elements') }} | ||
| <span class="fas fa-minus-square minimize"></span> | ||
| <span class="fas fa-external-link-square-alt maximize"></span> | ||
| </div> | ||
| <div class="panel-body"> | ||
| <v-expansion-panels id="menu" class="accordion" variant="accordion"> | ||
| <v-expansion-panel v-for="(group, groupIndex) in SimulatorState.subCircuitElementList" :key="groupIndex"> | ||
| <v-expansion-panel-title> | ||
| {{ group.type }}s | ||
| </v-expansion-panel-title> | ||
| <v-expansion-panel-text eager> | ||
| <div class="panel customScroll"> | ||
| <div v-for="(element, elementIndex) in group.elements" class="icon subcircuitModule" | ||
| :key="`${groupIndex}-${elementIndex}`" :id="`${group.type}-${elementIndex}`" | ||
| :data-element-id="elementIndex" :data-element-name="group.type" | ||
| @mousedown="dragElement(group.type, element, elementIndex)"> | ||
| <div class="icon-image"> | ||
| <img :src="getImgUrl(group.type)" /> | ||
| <p class="img__description"> | ||
| {{ element.label !== '' ? element.label : $t('simulator.unlabeled') }} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </v-expansion-panel-text> | ||
| </v-expansion-panel> | ||
| </v-expansion-panels> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { useState } from '#/store/SimulatorStore/state' | ||
| import { simulationArea } from '#/simulator/src/simulationArea' | ||
| import { useLayoutStore } from '#/store/layoutStore'; | ||
| import { ref, onMounted } from 'vue'; | ||
|
|
||
| const layoutStore = useLayoutStore() | ||
|
|
||
| const layoutElementPanelRef = ref<HTMLElement | null>(null); | ||
|
|
||
| onMounted(() => { | ||
| layoutStore.layoutElementPanelRef = layoutElementPanelRef.value | ||
| }) | ||
|
|
||
| const SimulatorState = useState(); | ||
|
|
||
| const dragElement = (groupType: string, element: any, index: number) => { | ||
| element.subcircuitMetadata.showInSubcircuit = true | ||
| element.newElement = true | ||
| simulationArea.lastSelected = element | ||
|
|
||
| // Remove the element from subCircuitElementList | ||
| SimulatorState.subCircuitElementList.forEach((typeGroup) => { | ||
| typeGroup.elements = typeGroup.elements.filter( | ||
| (_, elementIndex) => { | ||
| if(typeGroup.type === groupType && index === elementIndex) | ||
| return false | ||
|
|
||
| return true; | ||
| } | ||
| ) | ||
| }) | ||
|
|
||
| // Remove the type group if its elements array is empty | ||
| SimulatorState.subCircuitElementList = | ||
| SimulatorState.subCircuitElementList.filter( | ||
| (typeGroup) => typeGroup.elements.length > 0 | ||
| ) | ||
| } | ||
|
|
||
| function getImgUrl(elementName: string) { | ||
| const elementImg = new URL( | ||
| `../../../simulator/src/img/${elementName}.svg`, | ||
| import.meta.url | ||
| ).href; | ||
| return elementImg; | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
|
|
||
| .layoutElementPanel { | ||
| width: 220px; | ||
| font: inherit; | ||
| display: none; | ||
| top: 90px; | ||
| left: 10px; | ||
| } | ||
| </style> | ||
|
Comment on lines
+85
to
+94
There was a problem hiding this comment. Review of the Style Section The scoped style section is concise and targets the
Suggestions:
Overall, the style section is well-implemented, but adding responsiveness could improve the component's usability across different devices. |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -661,14 +661,6 @@ div.icon img { | |
| right: 10px; | ||
| } | ||
|
|
||
| .timing-diagram-panel { | ||
| border-radius: 5px; | ||
| z-index: 70; | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Review of the Script Section
The script section is well-organized and makes effective use of Vue's composition API and TypeScript. Here are some detailed observations:
layoutElementPanelRefand their usage in lifecycle hooks (e.g.,onMounted) is correctly implemented.dragElementfunction on lines 52-74 handles the logic for dragging elements and updating the state accordingly. However, the logic inside this function is quite complex and could benefit from further decomposition or comments for clarity.getImgUrlfunction on lines 76-82 is a utility function that constructs URLs for images. The use ofURLandimport.meta.urlis appropriate for this purpose.Suggestions:
dragElementfor Clarity: Consider breaking down thedragElementfunction into smaller, more manageable functions. This can improve readability and maintainability.dragElementwould help other developers understand the code more quickly.Overall, the script section is robust, but minor improvements could enhance its clarity and maintainability.