Skip to content

Commit

Permalink
feat(pdf-object): add debug mode
Browse files Browse the repository at this point in the history
  • Loading branch information
adenvt committed Jan 10, 2023
1 parent 348f54e commit 9e3c497
Show file tree
Hide file tree
Showing 16 changed files with 480 additions and 64 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

# Persona Design System

![npm (scoped)](https://img.shields.io/npm/v/@privyid/persona)
[![Build CI](https://github.com/privy-open-source/design-system/actions/workflows/node.js.yml/badge.svg)](https://github.com/privy-open-source/design-system/actions/workflows/node.js.yml)
[![CodeQL](https://github.com/privy-open-source/design-system/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/privy-open-source/design-system/actions/workflows/codeql-analysis.yml)
[![Coverage Status](https://coveralls.io/repos/github/privy-open-source/design-system/badge.svg?branch=main)](https://coveralls.io/github/privy-open-source/design-system?branch=main)
Expand Down
28 changes: 8 additions & 20 deletions src/components/chart/Chart.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ it('should re-render if data changed', async () => {
weight: '600',
},
},
grid: { borderColor: '#BFBFBF' },
border: { color: '#BFBFBF' },
},
y: {
ticks: {
Expand All @@ -167,10 +167,7 @@ it('should re-render if data changed', async () => {
weight: '600',
},
},
grid: {
borderColor: '#BFBFBF',
borderDash : [4],
},
border: { color: '#BFBFBF', dash: [4] },
},
},
})
Expand Down Expand Up @@ -265,7 +262,7 @@ it('should re-render if variant changed', async () => {
weight: '600',
},
},
grid: { borderColor: '#BFBFBF' },
border: { color: '#BFBFBF' },
},
y: {
ticks: {
Expand All @@ -276,10 +273,7 @@ it('should re-render if variant changed', async () => {
weight: '600',
},
},
grid: {
borderColor: '#BFBFBF',
borderDash : [4],
},
border: { color: '#BFBFBF', dash: [4] },
},
},
})
Expand Down Expand Up @@ -382,7 +376,7 @@ it('should re-render if variant changed', async () => {
weight: '600',
},
},
grid: { borderColor: '#BFBFBF' },
border: { color: '#BFBFBF' },
},
y: {
ticks: {
Expand All @@ -393,10 +387,7 @@ it('should re-render if variant changed', async () => {
weight: '600',
},
},
grid: {
borderColor: '#BFBFBF',
borderDash : [4],
},
border: { color: '#BFBFBF', dash: [4] },
},
},
})
Expand Down Expand Up @@ -446,7 +437,7 @@ it('should re-render if variant changed', async () => {
weight: '600',
},
},
grid: { borderColor: '#BFBFBF' },
border: { color: '#BFBFBF' },
},
y: {
ticks: {
Expand All @@ -457,10 +448,7 @@ it('should re-render if variant changed', async () => {
weight: '600',
},
},
grid: {
borderColor: '#BFBFBF',
borderDash : [4],
},
border: { color: '#BFBFBF', dash: [4] },
},
},
})
Expand Down
8 changes: 4 additions & 4 deletions src/components/chart/adapter/line.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default defineAdapter({
weight: '600',
},
},
grid: { borderColor: '#BFBFBF' },
border: { color: '#BFBFBF' },
},
y: {
ticks: {
Expand All @@ -61,9 +61,9 @@ export default defineAdapter({
weight: '600',
},
},
grid: {
borderColor: '#BFBFBF',
borderDash : [4],
border: {
color: '#BFBFBF',
dash : [4],
},
},
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/pdf-object-text/PdfObjectText.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {
ref,
watch,
} from 'vue-demi'
import { PDF_OBJECTS_CONTEXT, useObjectSize } from '../pdf-object'
import { PDF_OBJECTS_CONTEXT, useSizeModel } from '../pdf-object'
import PdfObject from '../pdf-object/PdfObject.vue'
import pTextarea from '../textarea/Textarea.vue'
import { getTextWidth, toImage } from './utils/text-to-image'
Expand Down Expand Up @@ -116,7 +116,7 @@ export default defineComponent({
ratio,
width : vWidth,
height: vHeight,
} = useObjectSize(props)
} = useSizeModel(props)
const isEdit = ref(true)
const image = ref('')
Expand Down
40 changes: 30 additions & 10 deletions src/components/pdf-object/PdfObject.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
@keydown.right.passive="move(1, 0)">
<div class="pdf-object__container">
<slot />
<PdfObjectDebugger v-if="debug" />
</div>
<div
v-show="resizeable"
v-show="resizable"
class="pdf-object__resize resize-handle" />
</div>
</template>
Expand All @@ -32,23 +33,27 @@ import {
defineComponent,
inject,
onMounted,
provide,
ref,
toRef,
watchEffect,
} from 'vue-demi'
import useDrag from './utils/use-drag'
import {
PDF_OBJECTS_CONTEXT,
PDF_OBJECT_CONTEXT,
useObjectModel,
usePage,
focus,
} from '.'
import { computePosition, getPosition } from './utils/position'
import { getEmptyPosition, ObjectPosition } from './utils/overlap'
import { useResize } from './utils/use-resize'
import PdfObjectDebugger from './PdfObjectDebugger.vue'
export default defineComponent({
props: {
components: { PdfObjectDebugger },
props : {
x: {
type : Number,
default: undefined,
Expand Down Expand Up @@ -85,21 +90,21 @@ export default defineComponent({
type : Number,
default: undefined,
},
ratio: {
type : Number,
default: undefined,
},
moveable: {
type : Boolean,
default: true,
},
resizeable: {
resizable: {
type : Boolean,
default: true,
},
autofocus: {
type : Boolean,
default: true,
default: false,
},
debug: {
type : Boolean,
default: false,
},
},
emits: [
Expand Down Expand Up @@ -175,7 +180,7 @@ export default defineComponent({
},
})
const resizeable = useResize(object, {
const resizable = useResize(object, {
minHeight: minHeight,
minWidth : minWidth,
maxHeight: maxHeight,
Expand Down Expand Up @@ -260,7 +265,7 @@ export default defineComponent({
}
syncRef(moveable, toRef(props, 'moveable'), { direction: 'rtl', immediate: true })
syncRef(resizeable, toRef(props, 'resizeable'), { direction: 'rtl', immediate: true })
syncRef(resizable, toRef(props, 'resizable'), { direction: 'rtl', immediate: true })
onMounted(async () => {
await until(pageEl).toBeTruthy()
Expand All @@ -272,6 +277,21 @@ export default defineComponent({
focus(object.value)
})
// Provide some data for debug
provide(PDF_OBJECT_CONTEXT, {
id,
x,
y,
page,
width,
height,
minHeight,
minWidth,
maxHeight,
maxWidth,
ratio,
})
return { move }
},
})
Expand Down
61 changes: 61 additions & 0 deletions src/components/pdf-object/PdfObjectAddon.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<template>
<div
class="pdf-object__addon"
:class="classNames">
<slot />
</div>
</template>

<script lang="ts">
import {
computed,
defineComponent,
PropType,
} from 'vue-demi'
import { AddonPositionVariant } from '.'
export default defineComponent({
props: {
position: {
type : String as PropType<AddonPositionVariant>,
default: 'right',
},
},
setup (props) {
const classNames = computed(() => {
const result: string[] = []
if (props.position)
result.push(`pdf-object__addon--${props.position}`)
return result
})
return { classNames }
},
})
</script>

<style lang="postcss">
.pdf-object {
&__addon {
@apply absolute;
&--right {
@apply top-0 left-full pl-2;
}
&--left {
@apply top-0 right-full pr-2;
}
&--top {
@apply bottom-full left-0 pb-2;
}
&--bottom {
@apply top-full left-0 pt-2;
}
}
}
</style>
79 changes: 79 additions & 0 deletions src/components/pdf-object/PdfObjectDebugger.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<template>
<div
ref="target"
class="pdf-object__debugger">
<pre>x: {{ x }}</pre>
<pre>y: {{ y }}</pre>
<pre>page: {{ page }}</pre>
<pre>width: {{ width }}</pre>
<pre>height: {{ height }}</pre>
</div>
</template>

<script lang="ts">
import {
autoPlacement,
autoUpdate,
computePosition,
offset,
} from '@floating-ui/dom'
import { templateRef } from '@vueuse/core'
import {
defineComponent,
inject,
watchEffect,
} from 'vue-demi'
import { PDF_OBJECT_CONTEXT } from '.'
export default defineComponent({
setup () {
const {
x,
y,
page,
width,
height,
} = inject(PDF_OBJECT_CONTEXT)
const target = templateRef<HTMLDivElement>('target')
watchEffect((onCleanup) => {
if (target.value) {
const cleanup = autoUpdate(target.value.parentElement, target.value, () => {
computePosition(target.value.parentElement, target.value, {
strategy : 'absolute',
middleware: [autoPlacement(), offset(12)],
}).then(({ x, y }) => {
if (target.value) {
target.value.style.left = `${x || 0}px`
target.value.style.top = `${y || 0}px`
}
})
})
onCleanup(cleanup)
}
}, { flush: 'post' })
return {
x,
y,
page,
width,
height,
}
},
})
</script>

<style lang="postcss">
.pdf-object {
&__debugger {
@apply grid grid-cols-1 p-4 bg-emphasis text-on-emphasis absolute rounded w-[198px];
> pre {
@apply truncate;
}
}
}
</style>
2 changes: 1 addition & 1 deletion src/components/pdf-object/PdfObjects.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ export default defineComponent({
const dropTarget = toRef(props, 'dropTarget')
provide(PDF_OBJECTS_CONTEXT, {
...pdfContext,
objects,
root,
...pdfContext,
})
useDrop(root, dropTarget)
Expand Down
Loading

0 comments on commit 9e3c497

Please sign in to comment.