Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
baku89 committed Sep 29, 2023
1 parent 4185089 commit 0a3abbd
Show file tree
Hide file tree
Showing 7 changed files with 427 additions and 68 deletions.
122 changes: 54 additions & 68 deletions src/components/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import MonacoEditor, {ErrorInfo} from './MonacoEditor.vue'
import OverlayColorPicker from './OverlayColorPicker.vue'
import OverlayNumberSlider from './OverlayNumberSlider.vue'
import OverlayPointHandle from './OverlayPointHandle.vue'
import {Tab, Tabs} from './Tabs'
const {refAppStorage} = useAppStorage('com.baku89.paperjs-editor')
Expand Down Expand Up @@ -332,47 +333,42 @@ window.addEventListener('drop', async e => {
/>
</div>
<FloatingPane name="inspector" icon="code">
<div class="inspector">
<div class="actions">
<Tabs class="inspector-tab">
<template #before-tablist>
<button class="play" @click="autoRefresh = !autoRefresh">
<span class="material-symbols-outlined">{{
autoRefresh ? 'pause_circle' : 'play_circle'
}}</span>
{{ autoRefresh ? 'Pause' : 'Resume' }}
</button>
<div class="spacer" />
<button @click="copyCanvasAsSVG">
<span class="material-symbols-outlined">content_copy</span>
</button>
<button @click="pasteSVGToCanvas">
<span class="material-symbols-outlined">content_paste</span>
</button>
<button @click="saveProject">
<span class="material-symbols-outlined">download</span>
</button>
</div>
<div class="editor-wrapper">
<MonacoEditor
v-model="code"
v-model:cursorIndex="cursorIndex"
v-model:cursorPosition="cursorPosition"
class="editor"
:errors="errors"
/>
<OverlayColorPicker
v-model:code="code"
v-model:visible="colorPickerVisible"
:cursor-index="cursorIndex"
:cursor-position="cursorPosition"
/>
<OverlayNumberSlider
v-show="!colorPickerVisible"
v-model:code="code"
v-model:cursorIndex="cursorIndex"
:cursor-position="cursorPosition"
/>
</div>
</div>
</template>
<Tab name="Settings">
<div>Settings</div>
</Tab>
<Tab name="Code" class="inspector">
<div class="editor-wrapper">
<MonacoEditor
v-model="code"
v-model:cursorIndex="cursorIndex"
v-model:cursorPosition="cursorPosition"
class="editor"
:errors="errors"
/>
<OverlayColorPicker
v-model:code="code"
v-model:visible="colorPickerVisible"
:cursor-index="cursorIndex"
:cursor-position="cursorPosition"
/>
<OverlayNumberSlider
v-show="!colorPickerVisible"
v-model:code="code"
v-model:cursorIndex="cursorIndex"
:cursor-position="cursorPosition"
/>
</div>
</Tab>
</Tabs>
</FloatingPane>
</main>
</div>
Expand Down Expand Up @@ -448,47 +444,37 @@ window.addEventListener('drop', async e => {
background-image radial-gradient(circle at 0 0, var(--dot-color) 1px, transparent 0), linear-gradient(to bottom, var(--axis-color) 1px, transparent 0), linear-gradient(to right, var(--axis-color) 1px, transparent 0)
background-repeat repeat, repeat-x, repeat-y
.inspector-tab
height 100%
.play
display inline-flex
justify-content center
align-items center
background var(--ui-button)
color var(--ui-color)
width 32px
height 32px
border-radius 9999px
vertical-align middle
padding 0 6px
gap .4em
transition all ease .2s
width auto
padding 0 12px 0 6px
background var(--ui-color)
color var(--ui-bg)
&:hover
background var(--ui-accent)
color var(--ui-bg)
.inspector
position relative
height 100%
display flex
flex-direction column
gap 1rem
.actions
display flex
align-items center
gap 0.5rem
.spacer
flex-grow 1
button
display inline-flex
justify-content center
align-items center
background var(--ui-button)
color var(--ui-color)
width 32px
height 32px
border-radius 9999px
vertical-align middle
padding 0 6px
gap .4em
transition all ease .2s
&.play
width auto
padding 0 12px 0 6px
background var(--ui-color)
color var(--ui-bg)
&:hover
background var(--ui-accent)
color var(--ui-bg)
.editor-wrapper
position relative
flex-grow 1
Expand Down
105 changes: 105 additions & 0 deletions src/components/Tabs/Tab.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<script setup lang="ts">
import {
defineProps,
onBeforeMount,
onBeforeUnmount,
ref,
watch,
withDefaults,
} from 'vue'
import {AddTabKey, DeleteTabKey, TabsProviderKey, UpdateTabKey} from './symbols'
import {injectStrict} from './utils'
type Props = {
id?: string
name: string
prefix?: string
suffix?: string
isDisabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
id: undefined,
isDisabled: false,
})
const isActive = ref(false)
const tabsProvider = injectStrict(TabsProviderKey)
const addTab = injectStrict(AddTabKey)
const updateTab = injectStrict(UpdateTabKey)
const deleteTab = injectStrict(DeleteTabKey)
const header = props.prefix + props.name + props.suffix
const computedId = props.id
? props.id
: props.name.toLowerCase().replace(/ /g, '-')
const paneId = computedId + '-pane'
watch(
() => tabsProvider.activeTabName,
() => {
isActive.value = hash.value === tabsProvider.activeTabName
}
)
watch(
() => Object.assign({}, props),
() => {
updateTab(computedId, {
name: props.name,
header: props.prefix + props.name + props.suffix,
isDisabled: props.isDisabled,
index: tabsProvider.tabs.length,
computedId: computedId,
paneId: paneId,
})
}
)
onBeforeMount(() => {
addTab({
name: props.name,
header: header,
isDisabled: props.isDisabled,
hash: hash.value,
index: tabsProvider.tabs.length,
computedId: computedId,
paneId: paneId,
})
})
onBeforeUnmount(() => {
deleteTab(computedId)
})
defineExpose({
header,
computedId,
paneId,
hash,
isActive,
})
</script>

<template>
<section
v-show="isActive"
:id="paneId"
ref="tab"
class="Tab"
:data-tab-id="computedId"
:aria-hidden="!isActive"
role="tabpanel"
tabindex="-1"
>
<slot />
</section>
</template>

<style lang="stylus" scoped>
.Tab
height 100%
</style>
Loading

0 comments on commit 0a3abbd

Please sign in to comment.