fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-16 23:08:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Plumb layer panel (#107)

Browse Source 
* WIP ExpandFolder handling

* Implement response parsing in typescript

* Update layer panel with list sent by wasm

* Add events for layer interaction

* Add proper default naming

* Fix displaying of the eye icon

* Attach path to LayerPanelEntry

* Fix lint issues

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
TrueDoctor
2021-05-07 10:17:46 +02:00
committed by Keavon Chambers
parent 76d3e8cde4
commit 6adb984f2d
14 changed files with 276 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/web/src/components/panels/Document.vue
View File

@@ -180,7 +180,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler } from "../../response-handler";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import ShelfItem from "../widgets/ShelfItem.vue";
@@ -324,13 +324,13 @@ export default defineComponent({
},
},
mounted() {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
registerResponseHandler(ResponseType["Tool::UpdateCanvas"], (responseData: any) => {
this.viewportSvg = responseData.Tool.UpdateCanvas.document;
registerResponseHandler(ResponseType.UpdateCanvas, (responseData: Response) => {
const updateData = responseData as UpdateCanvas;
if (updateData) this.viewportSvg = updateData.document;
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
registerResponseHandler(ResponseType["Tool::SetActiveTool"], (responseData: any) => {
this.activeTool = responseData.Tool.SetActiveTool.tool_name;
registerResponseHandler(ResponseType.SetActiveTool, (responseData: Response) => {
const toolData = responseData as SetActiveTool;
if (toolData) this.activeTool = toolData.tool_name;
});
window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));

51
client/web/src/components/panels/LayerTree.vue
View File

@@ -7,16 +7,10 @@
</LayoutRow>
<LayoutRow :class="'layer-tree'">
<LayoutCol :class="'list'">
<div
class="layer-row"
v-for="layerId in Array(5)
.fill()
.map((_, i) => i)"
:key="layerId"
>
<div class="layer-row" v-for="layer in layers" :key="layer.path">
<div class="layer-visibility">
<IconButton v-if="layerId % 2 == 0" @click="hideLayer(layerId)" :size="24" title="Visible"><EyeVisible /></IconButton>
<IconButton v-if="layerId % 2 == 1" @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton>
<IconButton v-if="layer.visible" @click="hideLayer(layer)" :size="24" title="Visible"><EyeVisible /></IconButton>
<IconButton v-if="!layer.visible" @click="showLayer(layer)" :size="24" title="Hidden"><EyeHidden /></IconButton>
</div>
<div class="layer">
<div class="layer-thumbnail"></div>
@@ -24,7 +18,7 @@
<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
</div>
<div class="layer-name">
<span>Foo bar</span>
<span>{{ layer.name }}</span>
</div>
</div>
</div>
@@ -77,7 +71,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler } from "../../response-handler";
import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import NumberInput from "../widgets/NumberInput.vue";
@@ -102,23 +96,42 @@ export default defineComponent({
},
props: {},
methods: {
hideLayer(layerId: number) {
console.log(`Hidden layer ID: ${layerId}`);
hideLayer(layerId: LayerPanelEntry) {
const layer = layerId as LayerPanelEntry;
if (layer) {
console.log(`Hidden layer ID: ${layer.path}`);
} else {
console.error("hideLayer did not receive valid arguments");
}
},
showLayer(layerId: number) {
console.log(`Shown layer ID: ${layerId}`);
showLayer(layerId: LayerPanelEntry) {
const layer = layerId as LayerPanelEntry;
if (layer) {
console.log(`Shown layer: ${layer.path}`);
} else {
console.error("showLayer did not receive valid arguments");
}
},
},
mounted() {
registerResponseHandler(ResponseType["Document::ExpandFolder"], (responseData) => {
console.log("ExpandFolder: ", responseData);
registerResponseHandler(ResponseType.ExpandFolder, (responseData: Response) => {
const expandData = responseData as ExpandFolder;
if (expandData) {
const responsePath = expandData.path;
const responseLayers = expandData.children as Array<LayerPanelEntry>;
if (responsePath.length > 0) console.error("Non root paths are currently not implemented");
this.layers = responseLayers;
}
});
registerResponseHandler(ResponseType["Document::CollapseFolder"], (responseData) => {
registerResponseHandler(ResponseType.CollapseFolder, (responseData) => {
console.log("CollapseFolder: ", responseData);
});
},
data() {
return {};
return {
layers: [] as Array<LayerPanelEntry>,
};
},
});
</script>