Skip to content

Commit

Permalink
feat: add inspector properties panel
Browse files Browse the repository at this point in the history
  • Loading branch information
YunYouJun committed Jan 17, 2024
1 parent 30b9de0 commit 028c3bb
Show file tree
Hide file tree
Showing 37 changed files with 1,145 additions and 545 deletions.
2 changes: 1 addition & 1 deletion demo/love/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"@advjs/theme-default": "workspace:*",
"advjs": "workspace:*",
"https-localhost": "^4.7.1",
"nodemon": "^3.0.2",
"nodemon": "^3.0.3",
"vite-plugin-inspect": "^0.8.1"
}
}
4 changes: 2 additions & 2 deletions demo/starter/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
"@advjs/theme-default": "workspace:*",
"advjs": "workspace:*",
"https-localhost": "^4.7.1",
"nodemon": "^3.0.2",
"nodemon": "^3.0.3",
"vite-plugin-inspect": "^0.8.1",
"vite-plugin-vue-devtools": "^7.0.8"
"vite-plugin-vue-devtools": "^7.0.10"
}
}
2 changes: 1 addition & 1 deletion demo/use-dialog-box/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@advjs/parser": "workspace:*",
"vue": "^3.4.10"
"vue": "^3.4.14"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.3",
Expand Down
2 changes: 1 addition & 1 deletion docs/.vitepress/components/demo/InputNumberDemo.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ref } from 'vue'
import type { Vector2, Vector3 } from '../../../../packages/gui/src'
import type { Vector2, Vector3 } from '@advjs/gui'
const num = ref(6)
Expand Down
4 changes: 2 additions & 2 deletions docs/.vitepress/components/demo/TabsDemo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
import { ref } from 'vue'
const tabList = ref([
{ title: 'Project', key: 'project', icon: 'i-ri-folder-line' },
{ title: 'Console', key: 'console', icon: 'i-ri-terminal-box-line' },
{ title: 'Project', key: 'project', icon: 'i-ri-folder-fill' },
{ title: 'Console', key: 'console', icon: 'i-ri-terminal-box-fill' },
])
</script>

Expand Down
2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"devDependencies": {
"@iconify-json/file-icons": "^1.1.8",
"@iconify-json/logos": "^1.1.42",
"@iconify-json/vscode-icons": "^1.1.32",
"@iconify-json/vscode-icons": "^1.1.33",
"unocss": "0.58.3",
"unplugin-vue-components": "^0.26.0",
"vite-plugin-pwa": "^0.17.4",
Expand Down
13 changes: 0 additions & 13 deletions editor/core/components/inspector/InspectorView.vue

This file was deleted.

26 changes: 23 additions & 3 deletions editor/core/components/panel/PanelHierarchy.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { ToolbarButton, ToolbarRoot, ToolbarToggleGroup } from 'radix-vue'
const tabList = ref([
{ title: 'Hierarchy', key: 'hierarchy', icon: 'i-ri-node-tree' },
])
</script>

<template>
<AGUIPanel h="full" w="full">
<AGUIDetails title="Hierarchy">
<slot />
</AGUIDetails>
<AGUITabs :list="tabList">
<AGUITabPanel>
<ToolbarRoot class="flex items-center justify-center p-1">
<ToolbarToggleGroup />
<AGUIInput class="flex flex-grow" placeholder="Search" />
<ToolbarButton
class="ml-1"
>
<AGUIIconButton size="mini" icon="i-ri-search-line" />
</ToolbarButton>
</ToolbarRoot>
<HierarchyView />
</AGUITabPanel>
</AGUITabs>
</AGUIPanel>
</template>
17 changes: 13 additions & 4 deletions editor/core/components/panel/PanelInspector.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
<script lang="ts" setup>
import { ref } from 'vue'
const tabList = ref([
{ title: 'Inspector', key: 'inspector', icon: 'i-ri-information-fill' },
])
</script>

<template>
<AGUIPanel h="full" w="full">
<AGUIDetails w="full" title="Inspector" open>
<InspectorView />
<slot />
</AGUIDetails>
<AGUITabs :list="tabList">
<AGUITabPanel>
<InspectorView />
</AGUITabPanel>
</AGUITabs>
</AGUIPanel>
</template>
4 changes: 2 additions & 2 deletions editor/core/components/panel/PanelProject.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { type FSFileItem, curDir, saveFile } from '@advjs/gui/client'
import { ref } from 'vue'
const tabList = ref([
{ title: 'Project', key: 'project', icon: 'i-ri-folder-line' },
{ title: 'Console', key: 'console', icon: 'i-ri-terminal-box-line' },
{ title: 'Project', key: 'project', icon: 'i-ri-folder-fill' },
{ title: 'Console', key: 'console', icon: 'i-ri-terminal-box-fill' },
])
async function onFileDrop(files: FSFileItem[]) {
Expand Down
115 changes: 115 additions & 0 deletions editor/core/components/panel/view/HierarchyView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'
import type { TreeNode, Trees } from '@advjs/gui'
import AGUITree from '@advjs/gui/client/components/tree/AGUITree.vue'
const treeData = ref<Trees>([
{
name: 'Level one 1',
children: [
{
name: 'Level two 1-1',
children: [
{
name: 'Level three 1-1-1',
},
],
},
],
},
{
name: 'Level one 2',
visible: true,
children: [
{
name: 'Level two 2-1',
visible: true,
children: [
{
name: 'Level three 2-1-1',
},
],
},
{
name: 'Level two 2-2',
children: [
{
name: 'Level three 2-2-1',
},
],
},
],
},
{
name: 'Level one 3',
expanded: true,
children: [
{
name: 'Level two 3-1',
expanded: true,
children: [
{
name: 'Level three 3-1-1',
selectable: true,
},
{
name: 'Level three 3-1-2 Long Name Long Name Long Name Long Name Long Name Long Name',
selectable: true,
},
],
},
{
name: 'Level two 3-2',
visible: false,
children: [
{
name: 'Level three 3-2-1',
},
],
},
],
},
])
function onSelected(nodes: Trees) {
console.log('onSelected', nodes)
}
function onUnselected(nodes: Trees) {
console.log('onUnselected', nodes)
}
function hide(nodes: Trees) {
console.log('hide', nodes)
}
function show(nodes: Trees) {
console.log('show', nodes)
}
function collapse(nodes: Trees) {
console.log('collapse', nodes)
}
function expand(nodes: Trees) {
console.log('expand', nodes)
}
function activate(node: TreeNode) {
console.log('activate', node)
}
</script>

<template>
<AGUITree
:data="treeData"
@node-selected="onSelected"
@node-unselected="onUnselected"
@node-hide="hide"
@node-show="show"
@node-collapse="collapse"
@node-expand="expand"
@node-activate="activate"
/>
</template>
73 changes: 73 additions & 0 deletions editor/core/components/panel/view/InspectorView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<script lang="ts" setup>
import { ref } from 'vue'
import type { AGUIPropertiesPanelProps, Vector3 } from '@advjs/gui'
const items = ref<AGUIPropertiesPanelProps[]>([
{
icon: 'i-mdi-axis-arrow',
title: 'Transform',
properties: [
{
name: 'Position',
value: {
x: 0,
y: 0,
z: 0,
},
},
{
name: 'Rotation',
value: {
x: 0,
y: 0,
z: 0,
},
},
{
name: 'Scale',
value: {
x: 0,
y: 0,
z: 0,
},
},
],
},
])
const defaultOpenItems = items.value.map(item => item.title).concat('test')
const vector3 = ref<Vector3>({
x: 0,
y: 0,
z: 0,
})
</script>

<template>
<AGUIAccordion type="multiple" :default-value="defaultOpenItems">
<AGUIPropertiesPanel v-for="item in items" :key="item.title" :item="item" />
<AGUIAccordionItem
:item="{
icon: 'i-ri-cloud-line',
title: 'test',
}"
>
<AGUIForm>
<AGUIFormItem label="Default">
<AGUIInputVector v-model="vector3" />
</AGUIFormItem>

<AGUIFormItem label="Default">
<AGUICheckbox />
</AGUIFormItem>
<AGUIFormItem label="Checked" description="Checked Checkbox">
<AGUICheckbox checked />
</AGUIFormItem>
<AGUIFormItem label="Disabled">
<AGUICheckbox disabled />
</AGUIFormItem>
</AGUIForm>
</AGUIAccordionItem>
</AGUIAccordion>
</template>
6 changes: 4 additions & 2 deletions editor/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@
"devDependencies": {
"@advjs/gui": "workspace:*",
"@iconify-json/carbon": "^1.1.27",
"@iconify-json/ep": "^1.1.14",
"@iconify-json/mdi": "^1.1.64",
"@iconify-json/twemoji": "^1.1.15",
"@nuxt/devtools": "^1.0.8",
"@nuxtjs/color-mode": "^3.3.2",
"@pinia/nuxt": "^0.5.1",
"@unocss/eslint-config": "^0.58.3",
"@unocss/nuxt": "^0.58.3",
"@vite-pwa/nuxt": "^0.4.0",
"@vueuse/nuxt": "^10.7.1",
"@vueuse/nuxt": "^10.7.2",
"baklavajs": "2.3.0",
"consola": "^3.2.3",
"nuxt": "^3.9.1",
"nuxt": "^3.9.2",
"pinia": "^2.1.7"
}
}
6 changes: 3 additions & 3 deletions editor/vrm/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@
},
"dependencies": {
"@advjs/plugin-babylon": "workspace:*",
"@unhead/vue": "^1.8.9",
"@vueuse/core": "^10.7.1",
"@unhead/vue": "^1.8.10",
"@vueuse/core": "^10.7.2",
"@vueuse/head": "^2.0.0",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"prism-theme-vars": "^0.2.4",
"vue": "^3.4.10",
"vue": "^3.4.14",
"vue-demi": "^0.14.6",
"vue-i18n": "^9.9.0",
"vue-router": "^4.2.5"
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
"@antfu/ni": "^0.21.12",
"@types/fs-extra": "^11.0.4",
"@types/howler": "^2.2.11",
"@types/node": "^20.11.0",
"@types/node": "^20.11.4",
"@types/prompts": "^2.4.9",
"@types/semver": "^7.5.6",
"@types/unist": "^3.0.2",
Expand All @@ -83,7 +83,7 @@
"advjs": "workspace:*",
"consola": "^3.2.3",
"cross-env": "^7.0.3",
"cypress": "^13.6.2",
"cypress": "^13.6.3",
"cypress-vite": "^1.5.0",
"eslint": "8.56.0",
"eslint-plugin-cypress": "^2.15.1",
Expand All @@ -98,7 +98,7 @@
"typescript": "^5.3.3",
"unbuild": "^2.0.0",
"vite": "^5.0.11",
"vitest": "^1.1.3",
"vitest": "^1.2.0",
"vue-tsc": "^1.8.27"
},
"lint-staged": {
Expand Down
Loading

2 comments on commit 028c3bb

@vercel
Copy link

@vercel vercel bot commented on 028c3bb Jan 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 028c3bb Jan 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.