Merge brach 'main' into demo

Author: Fan-iX

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vvplot",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "license": "MIT",
   "files": [
     "dist"
@@ -15,6 +15,8 @@
   "imports": {
     "#base/*": "./src/*"
   },
+  "homepage": "https://fan-ix.github.io/vvplot/",
+  "repository": "https://github.com/Fan-iX/vvplot/",
   "exports": {
     ".": "./dist/index.js",
     "./components": "./dist/components.js",

src/components/Plot.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch, Fragment, useAttrs, useSlots, useTemplateRef, onMounted, reactive } from 'vue'
+import { computed, watch, Fragment, useAttrs, useSlots, useTemplateRef, onMounted, reactive, provide } from 'vue'
 import { reactiveComputed, useElementSize } from '@vueuse/core'
 import { baseParse } from '@vue/compiler-core'
 import { theme_base, theme_default, themeBuild, themeMerge, themePreprocess } from '../js/theme'
@@ -22,26 +22,23 @@ function _isPropTruthy(v) {
     return v === "" || Boolean(v)
 }
 
-const emit = defineEmits(['resize'])
+const emit = defineEmits(['resize', 'rangechange', 'select', 'update:range', 'update:rangePreview'])
 const {
     data: $data, scales: $scales, aes: $aes,
     expandAdd: $expandAdd, expandMult: $expandMult, extend: $extend,
-    levels: $levels, range: $range, minRange: $minRange,
+    levels: $levels, range: $range, minRange: $minRange, rangePreview: $rangePreview,
     axes: $axes, theme: $theme, action: $action, reverse: $reverse,
     flip, clip, resize, legendTeleport
 } = defineProps({
     data: Array, scales: Object, aes: Object,
     expandAdd: Object, expandMult: Object, extend: Object,
-    levels: Object, range: Object, minRange: Object,
+    levels: Object, range: Object, minRange: Object, rangePreview: Object,
     axes: [Object, Array], theme: [Object, Array], action: [Object, Array], reverse: Object,
     flip: Boolean, clip: { type: Boolean, default: true }, resize: null,
     legendTeleport: null,
 })
-const activeSelection = defineModel('activeSelection')
-const translateH = defineModel('translateH')
-const translateV = defineModel('translateV')
-const transcaleH = defineModel('transcaleH')
-const transcaleV = defineModel('transcaleV')
+const selectionPreview = defineModel('selectionPreview', { default: () => ({}) })
+const selectionPreviewTheme = defineModel('selectionPreviewTheme', { default: () => ({}) })
 const transition = defineModel('transition')
 
 function expandFragment(componentList) {
@@ -119,13 +116,6 @@ const vBind = computed(() => {
             wrapper[key] = $attrs[key]
         }
     }
-    for (let ori of ['x', 'y']) {
-        for (let bound of ['min', 'max']) {
-            if (primaryAxis?.[ori]?.[`onUpdate:${bound}`]) {
-                plot[`onUpdate:${ori}${bound}`] = primaryAxis?.[ori]?.[`onUpdate:${bound}`]
-            }
-        }
-    }
     return { plot, wrapper }
 })
 
@@ -143,15 +133,36 @@ const primaryAxis = reactiveComputed(() => {
         y: yAxes.find(c => _isPropTruthy(c.primary)) ?? yAxes.find(c => c.primary == null && !_isPropTruthy(c.secondary))
     }
 })
+
+const primaryAxisConfig = {
+    levels: reactive({}),
+    extend: reactive({}),
+    ['min-range']: reactive({}),
+    ['expand-add']: reactive({}),
+    ['expand-mult']: reactive({}),
+    boundary: reactive({}),
+    reverse: reactive({}),
+    min: reactive({}),
+    max: reactive({}),
+    ['min-preview']: reactive({}),
+    ['max-preview']: reactive({}),
+}
+
+watch(primaryAxis, v => {
+    for (let ori of ['x', 'y']) {
+        for (let key in primaryAxisConfig) {
+            primaryAxisConfig[key][ori] = v?.[ori]?.[key]
+        }
+    }
+}, { immediate: true })
+
 const actionBoundary = reactiveComputed(() => {
     let boundary = {}
     for (let ori of ['x', 'y']) {
-        let bound = primaryAxis[ori]?.boundary
-        if (bound) {
-            boundary[ori] = {
-                min: bound.min ?? bound[0],
-                max: bound.max ?? bound[1]
-            }
+        let bound = primaryAxisConfig.boundary[ori]
+        boundary[ori] = {
+            min: bound?.min ?? bound?.[0],
+            max: bound?.max ?? bound?.[1]
         }
     }
     return boundary
@@ -165,8 +176,8 @@ const schema = computed(() => {
     return {
         data: $data,
         aes: $aes,
-        extendX: primaryAxis?.x?.extend ?? $extend?.x ?? 0,
-        extendY: primaryAxis?.y?.extend ?? $extend?.y ?? 0
+        extendX: primaryAxisConfig.extend.x ?? $extend?.x ?? 0,
+        extendY: primaryAxisConfig.extend.y ?? $extend?.y ?? 0
     }
 })
 /* layers
@@ -205,22 +216,18 @@ const levels = computed(() => (({ x, y, ...etc }) => etc)($levels ?? {}))
 const coordLevels = computed(() => {
     let levels = {}
     for (let ori of ['x', 'y']) {
-        if (primaryAxis[ori]) {
-            let ax = primaryAxis[ori]
-            levels[ori] = ax.levels ?? $levels?.[ori]
-        }
+        levels[ori] = primaryAxisConfig.levels[ori] ?? $levels?.[ori]
     }
     return levels
 })
 
-const range = computed(() => {
+const coordRange = computed(() => {
     let result = {}
     for (let ori of ['x', 'y']) {
-        let ax = primaryAxis[ori]
-        let min = ax?.min ?? ax?.limits?.min ?? ax?.limits?.[0]
-        let max = ax?.max ?? ax?.limits?.max ?? ax?.limits?.[1]
-        result[ori + "min"] = isFinite(min) && !Number.isNaN(min) ? min : $range?.[ori + "min"]
-        result[ori + "max"] = isFinite(max) && !Number.isNaN(max) ? max : $range?.[ori + "max"]
+        let min = primaryAxisConfig.min[ori] ?? $range?.[ori + "min"]
+        let max = primaryAxisConfig.max[ori] ?? $range?.[ori + "max"]
+        result[ori + "min"] = isFinite(min) && !Number.isNaN(min) ? min : null
+        result[ori + "max"] = isFinite(max) && !Number.isNaN(max) ? max : null
         let level = coordLevels.value[ori]
         if (level != null) {
             result[ori + "min"] = (result[ori + "min"] ?? 0) - 0.5
@@ -230,31 +237,96 @@ const range = computed(() => {
     return result
 })
 
+const coordRangePreview = computed(() => {
+    let result = {}
+    for (let ori of ['x', 'y']) {
+        let min = primaryAxisConfig['min-preview'][ori] ?? $rangePreview?.[ori + "min"]
+        let max = primaryAxisConfig['max-preview'][ori] ?? $rangePreview?.[ori + "max"]
+        result[ori + "min"] = isFinite(min) && !Number.isNaN(min) ? min : null
+        result[ori + "max"] = isFinite(max) && !Number.isNaN(max) ? max : null
+    }
+    return result
+})
+const rangeUpdate = reactiveComputed(() => {
+    return {
+        xmin: primaryAxis?.x?.["onUpdate:min"],
+        xmax: primaryAxis?.x?.["onUpdate:max"],
+        ymin: primaryAxis?.y?.["onUpdate:min"],
+        ymax: primaryAxis?.y?.["onUpdate:max"],
+    }
+})
+const rangePreviewUpdate = reactiveComputed(() => {
+    return {
+        xmin: primaryAxis?.x?.["onUpdate:minPreview"],
+        xmax: primaryAxis?.x?.["onUpdate:maxPreview"],
+        ymin: primaryAxis?.y?.["onUpdate:minPreview"],
+        ymax: primaryAxis?.y?.["onUpdate:maxPreview"],
+    }
+})
+
+const range = reactive({}), rangePreview = reactive({})
+watch(coordRange, (newRange, oldRange) => {
+    if (newRange?.xmin !== oldRange?.xmin)
+        range.xmin = newRange.xmin
+    if (newRange?.xmax !== oldRange?.xmax)
+        range.xmax = newRange.xmax
+    if (newRange?.ymin !== oldRange?.ymin)
+        range.ymin = newRange.ymin
+    if (newRange?.ymax !== oldRange?.ymax)
+        range.ymax = newRange.ymax
+}, { immediate: true })
+watch(coordRangePreview, (newRange, oldRange) => {
+    if (newRange?.xmin !== oldRange?.xmin)
+        rangePreview.xmin = newRange.xmin
+    if (newRange?.xmax !== oldRange?.xmax)
+        rangePreview.xmax = newRange.xmax
+    if (newRange?.ymin !== oldRange?.ymin)
+        rangePreview.ymin = newRange.ymin
+    if (newRange?.ymax !== oldRange?.ymax)
+        rangePreview.ymax = newRange.ymax
+}, { immediate: true })
+
+watch(() => range, (newRange, oldRange) => {
+    for (let key in rangeUpdate) {
+        rangeUpdate[key]?.(newRange[key])
+    }
+    emit('rangechange', { ...newRange }, { ...oldRange })
+    emit('update:range', { ...newRange })
+}, { deep: true })
+watch(() => rangePreview, (newRange) => {
+    for (let key in rangePreviewUpdate) {
+        rangePreviewUpdate[key]?.(newRange[key])
+    }
+    emit('update:rangePreview', { ...newRange })
+}, { deep: true })
+provide('range', range)
+provide('rangePreview', rangePreview)
+
 const minRange = computed(() => ({
-    x: primaryAxis?.x?.['min-range'] ?? $minRange?.x ?? 0,
-    y: primaryAxis?.y?.['min-range'] ?? $minRange?.y ?? 0,
+    x: primaryAxisConfig["min-range"].x ?? $minRange?.x ?? 0,
+    y: primaryAxisConfig["min-range"].y ?? $minRange?.y ?? 0,
 }))
 const expandAdd = computed(() => {
-    let x = primaryAxis?.x?.['expand-add'] ?? $expandAdd?.x ?? 0,
-        y = primaryAxis?.y?.['expand-add'] ?? $expandAdd?.y ?? 0
+    let x = primaryAxisConfig['expand-add'].x ?? $expandAdd?.x ?? 0,
+        y = primaryAxisConfig['expand-add'].y ?? $expandAdd?.y ?? 0
     if (Array.isArray(x)) x = { min: x[0], max: x[1] }
     else if (typeof x == 'number') x = { min: x, max: x }
     if (Array.isArray(y)) y = { min: y[0], max: y[1] }
     else if (typeof y == 'number') y = { min: y, max: y }
     return { x, y }
 })
 const expandMult = computed(() => {
-    let x = primaryAxis?.x?.['expand-mult'] ?? $expandMult?.x ?? 0.05,
-        y = primaryAxis?.y?.['expand-mult'] ?? $expandMult?.y ?? 0.05
+    let x = primaryAxisConfig['expand-mult'].x ?? $expandMult?.x ?? 0.05,
+        y = primaryAxisConfig['expand-mult'].y ?? $expandMult?.y ?? 0.05
     if (Array.isArray(x)) x = { min: x[0], max: x[1] }
     else if (typeof x == 'number') x = { min: x, max: x }
     if (Array.isArray(y)) y = { min: y[0], max: y[1] }
     else if (typeof y == 'number') y = { min: y, max: y }
     return { x, y }
 })
 const reverse = computed(() => ({
-    x: _isPropTruthy(primaryAxis?.x?.['reverse']) ?? $reverse?.x ?? false,
-    y: _isPropTruthy(primaryAxis?.y?.['reverse']) ?? $reverse?.y ?? false,
+    x: _isPropTruthy(primaryAxisConfig.reverse.x) ?? $reverse?.x ?? false,
+    y: _isPropTruthy(primaryAxisConfig.reverse.y) ?? $reverse?.y ?? false,
 }))
 
 const buttonsMap = { left: 1, right: 2, middle: 4, X1: 8, X2: 16 }
@@ -304,12 +376,18 @@ const axes = computed(() => {
         return {
             coord, orientation, position, title, breaks, labels, minorBreaks,
             showGrid: _isPropTruthy(showGrid) ?? position !== "none",
-            extend: extend ?? primaryAxis?.[coord]?.extend,
+            extend: extend ?? primaryAxisConfig.extend[coord],
             theme: Object.assign({}, ...[theme.value?.axis?.[position] ?? theme.value?.axis?.[orientation]].concat($$theme)),
             action, ...etc,
         }
     }).filter(ax => ax != null)
 })
+const paddings = reactive({})
+watch(axes, ax => {
+    for (let p of ["left", "right", "top", "bottom"]) {
+        paddings[p] = ax.some(a => a.position == p)
+    }
+}, { immediate: true })
 const action = computed(() => {
     return vaction.value.map(c => ({ ...c.type.$_props, ...c.props })).concat($action ?? [])
         .flatMap(props => {
@@ -374,6 +452,7 @@ const selections = computed(() => {
                 buttons: buttons ?? buttonsMap[button] ?? 1,
                 modelValue, "onUpdate:modelValue": onUpdate,
                 theme: Object.assign({}, ...[theme.value?.selection].concat($$theme)),
+                onSelect: (d, e) => emit('select', d, e),
                 ...etc
             }
         })
@@ -425,13 +504,12 @@ defineExpose({
 </script>
 <template>
     <div ref="wrapper" class="vvplot" :style="wrapperStyle" v-bind="vBind.wrapper">
-        <CorePlot ref="plot" :schema="schema" :layers="layers" :range="range" :min-range="minRange"
+        <CorePlot ref="plot" :paddings="paddings" :schema="schema" :layers="layers" :min-range="minRange"
             :expand-add="expandAdd" :expand-mult="expandMult" :reverse="reverse" :flip="flip"
             :coord-levels="coordLevels" :levels="levels" :scales="$scales" :axes="axes" :theme="theme"
-            :selections="selections" v-model:active-selection="activeSelection" v-model:transcale-h="transcaleH"
-            v-model:transcale-v="transcaleV" v-model:translate-h="translateH" v-model:translate-v="translateV"
-            v-model:transition="transition" v-bind="vBind.plot" :action="action" :clip="clip"
-            :legendTeleport="legendTeleport" />
+            :selections="selections" v-model:transition="transition" v-bind="vBind.plot"
+            v-model:selectionPreview="selectionPreview" v-model:selectionPreviewTheme="selectionPreviewTheme"
+            :action="action" :clip="clip" :legendTeleport="legendTeleport" @select="(d, e) => emit('select', d, e)" />
         <div class="vvplot-panel-container" :style="panelStyle" v-if="vnodes.dom.panel?.length">
             <div class="vvplot-panel">
                 <component v-for="c in vnodes.dom.panel" :is="c" />