Merge branch 'main' into demo

Author: Fan-iX

index.html

@@ -14,6 +14,8 @@
         import { createApp } from 'vue'
         import App from './web-docs/index.vue'
         import * as components from '#base/components'
+        import PreHighlightElement from './web-docs/script/pre-highlight.js'
+        customElements.define('pre-highlight', PreHighlightElement)
         let app = createApp(App)
         for (let c in components) {
             app.component(c, components[c])

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vvplot",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "files": [
     "dist"

src/components/Plot.vue

@@ -17,6 +17,11 @@ const components = {
     VVAction, VVSelection,
 }
 
+const opponents = {
+    x: 'y', y: 'x', h: 'v', v: 'h',
+    top: 'bottom', bottom: 'top', left: 'right', right: 'left'
+}
+
 function _isPropTruthy(v) {
     if (v == null) return v
     return v === "" || Boolean(v)
@@ -288,7 +293,7 @@ watch(coordRangePreview, (newRange, oldRange) => {
 
 watch(() => range, (newRange, oldRange) => {
     for (let key in rangeUpdate) {
-        rangeUpdate[key]?.(newRange[key])
+        rangeUpdate[key]?.(newRange[key] + (coordLevels.value[key.charAt(0)] ? 0.5 : 0))
     }
     emit('rangechange', { ...newRange }, { ...oldRange })
     emit('update:range', { ...newRange })
@@ -324,7 +329,7 @@ const expandMult = computed(() => {
     else if (typeof y == 'number') y = { min: y, max: y }
     return { x, y }
 })
-const reverse = computed(() => ({
+const reverse = reactiveComputed(() => ({
     x: _isPropTruthy(primaryAxisConfig.reverse.x) ?? $reverse?.x ?? false,
     y: _isPropTruthy(primaryAxisConfig.reverse.y) ?? $reverse?.y ?? false,
 }))
@@ -346,7 +351,14 @@ const axes = computed(() => {
         $_children, ...etc
     }) => {
         let orientation = ori[coord]
-        position = position ?? defaultPos[coord]
+        position = position ?? "start"
+        if (position == "start") {
+            position = { h: "bottom", v: "left" }[orientation]
+            if (reverse[opponents[coord]]) position = opponents[position]
+        } else if (position == "end") {
+            position = { h: "top", v: "right" }[orientation]
+            if (reverse[opponents[coord]]) position = opponents[position]
+        }
         let action = Object.values($_children ?? {})
             .filter(s => typeof s == "function")
             .flatMap(s => expandFragment(s()))
@@ -444,7 +456,10 @@ const selections = computed(() => {
                 resize: resize !== false,
                 x: xy || Boolean(_isPropTruthy(x)),
                 y: xy || Boolean(_isPropTruthy(y)),
-                xmin, xmax, ymin, ymax,
+                xmin: xmin ?? actionBoundary?.x?.min,
+                xmax: xmax ?? actionBoundary?.x?.max,
+                ymin: ymin ?? actionBoundary?.y?.min,
+                ymax: ymax ?? actionBoundary?.y?.max,
                 ctrlKey: Boolean(_isPropTruthy(ctrl)),
                 shiftKey: Boolean(_isPropTruthy(shift)),
                 altKey: Boolean(_isPropTruthy(alt)),
@@ -464,10 +479,10 @@ const width = defineModel('width')
 const height = defineModel('height')
 onMounted(() => {
     watch(width, (v) => {
-        wrapperRef.value.style.width = str_c(v, 'px')
+        wrapperRef.value.style.width = str_c(v, 'px') ?? null
     }, { immediate: true })
     watch(height, (v) => {
-        wrapperRef.value.style.height = str_c(v, 'px')
+        wrapperRef.value.style.height = str_c(v, 'px') ?? null
     }, { immediate: true })
 })
 const { width: w, height: h } = useElementSize(plotRef)
@@ -500,7 +515,8 @@ const wrapperStyle = computed(() => {
 })
 
 defineExpose({
-    serialize() { return serializeSVG(plotRef.value.svg) }
+    get svg() { return plotRef.value.svg },
+    serialize() { return serializeSVG(plotRef.value.svg) },
 })
 </script>
 <template>

src/components/core/CoreLegend.vue

@@ -7,7 +7,10 @@ const { scales, theme } = defineProps({
     scales: Map,
 })
 const guides = computed(() => {
-    let scale_fns = Array.from(scales.keys())
+    let guide_scales = new Map(
+        Array.from(scales).filter(([fn]) => fn.legend !== false)
+    )
+    let scale_fns = Array.from(guide_scales.keys())
     let keys = scale_fns.map(s => s.key)
     let j = 1
     for (let i in keys) {
@@ -16,7 +19,7 @@ const guides = computed(() => {
     }
     let types = scale_fns.map(s => getGuideType(s))
     let groups = interaction(keys, types)
-    return Map.groupBy(scales, (s, i) => groups.categories[groups[i]])
+    return Map.groupBy(guide_scales, (s, i) => groups.categories[groups[i]])
 })
 
 function getGuideType(scale) {

src/components/core/CorePlot.vue

@@ -310,10 +310,36 @@ function isInPlot(event) {
         event.clientY < rect.bottom - panel.b
 }
 
+function dispatchPointerEvent(e) {
+    if (!layers.value || e._vhandled || !isInPlot(e)) return e
+    let canvasLayers = Array.from(layers.value).filter(l => l.render == 'canvas')
+    if (!canvasLayers.length) return e
+    // clone event
+    let options = {}
+    for (let key in e) options[key] = e[key]
+    options.bubbles = false
+    let event = new PointerEvent(e.type, options)
+    for (let key of Object.keys(e)) {
+        let prop = Object.getOwnPropertyDescriptor(event, key)
+        if (prop && !prop.writable && !prop.set) continue
+        event[key] = e[key]
+    }
+    // dispatch to canvas layers
+    for (let i = layers.value.length - 1; i >= 0; i--)
+        if (layers.value[i].dispatchEvent(event) === false) e.preventDefault()
+    for (let key of Object.keys(event)) {
+        let prop = Object.getOwnPropertyDescriptor(event, key)
+        if (prop && !prop.writable && !prop.set) continue
+        e[key] = event[key]
+    }
+    return event._vhandled ? event : e
+}
+
 let moveTimer, movementX = 0, movementY = 0
 function svgPointerdown(e) {
     let coord = getCoord(e)
-    emit('pointerdown', e, coord)
+    emit('pointerdown', dispatchPointerEvent(e), coord)
+    if (props.clip && !isInPlot(e)) return
     let svg = e.currentTarget
     let pointerMoved = false
     function detectMove(ev) {
@@ -326,16 +352,10 @@ function svgPointerdown(e) {
     e.target.addEventListener('pointerup', function (ev) {
         e.target.removeEventListener('pointermove', detectMove)
         if (!pointerMoved) {
-            let coord = getCoord(ev)
-            emit('singleclick', new PointerEvent("singleclick", ev), coord)
-            if (isInPlot(e) && layers.value) {
-                if (ev.button == 0) {
-                    layers.value.forEach(layer => layer.dispatchEvent(new PointerEvent("click", ev)))
-                }
-            }
+            let event = new PointerEvent("singleclick", ev)
+            ev.target.dispatchEvent(event)
         }
     }, { once: true })
-    if (props.clip && !isInPlot(e)) return
     let sel = props.selections.find(s => ["buttons", "ctrlKey", "shiftKey", "altKey", "metaKey"].every(k => s[k] == e[k]))
     if (sel) {
         let { x = false, y = false, "min-range-x": mrx = 0, "min-range-y": mry = 0 } = sel
@@ -414,7 +434,7 @@ function svgPointerdown(e) {
                 if (sel.dismissible !== true && ["xmin", "xmax", "ymin", "ymax"].every(k => model?.[k] == null)) return
                 let res = {}, event = new PointerEvent("select", e)
                 sel["onUpdate:modelValue"]?.(res)
-                if (!emitEvent(sel["onCancel"], dropNull(res), event)) {
+                if (!emitEvent(sel["onDismiss"], dropNull(res), event)) {
                     emit('select', dropNull(res), event)
                 }
             }
@@ -463,7 +483,7 @@ function svgPointerdown(e) {
 let wheelDelta = 0, wheelTimer
 function svgWheel(e) {
     let coord = getCoord(e)
-    emit('wheel', e, coord)
+    emit('wheel', dispatchPointerEvent(e), coord)
     if (props.clip && !isInPlot(e)) return
     let act = props.action.find(a => ["zoom", "nudge"].includes(a.action) && ["ctrlKey", "shiftKey", "altKey", "metaKey"].every(k => a[k] == e[k]))
     if (!act || !act.x && !act.y) return
@@ -551,15 +571,16 @@ function applyTransform(act, event) {
 }
 const svgVOn = {
     pointerdown: svgPointerdown,
-    pointerup(e) { emit('pointerup', e, getCoord(e)) },
+    pointerup(e) { emit('pointerup', dispatchPointerEvent(e), getCoord(e)) },
     pointerover(e) { emit('pointerover', e, getCoord(e)) },
     pointerout(e) { emit('pointerout', e, getCoord(e)) },
     pointerenter(e) { emit('pointerenter', e, getCoord(e)) },
     pointerleave(e) { emit('pointerleave', e, getCoord(e)) },
-    dblclick(e) { emit('dblclick', e, getCoord(e)) },
-    click(e) { emit('click', e, getCoord(e)) },
-    contextmenu(e) { emit('contextmenu', e, getCoord(e)) },
-    pointermove(e) { emit('pointermove', e, getCoord(e)) },
+    click(e) { emit('click', dispatchPointerEvent(e), getCoord(e)) },
+    contextmenu(e) { emit('contextmenu', dispatchPointerEvent(e), getCoord(e)) },
+    singleclick(e) { emit('singleclick', dispatchPointerEvent(e), getCoord(e)) },
+    dblclick(e) { emit('dblclick', dispatchPointerEvent(e), getCoord(e)) },
+    pointermove(e) { emit('pointermove', dispatchPointerEvent(e), getCoord(e)) },
     wheel: svgWheel,
 }
 
@@ -653,7 +674,7 @@ const axes = computed(() => {
         </defs>
         <rect :transform="`translate(${panel.left}, ${panel.top})`" :width="panel.width" :height="panel.height"
             :fill="theme.plot.background" v-if="theme.plot.background"></rect>
-        <g :transform="`translate(${panel.left}, ${panel.top})`">
+        <g :transform="`translate(${panel.left}, ${panel.top})`" style="pointer-events: none;">
             <CoreGridH v-if="theme.grid.h" v-bind="gridBreaks.h" :layout="innerRect" :theme="theme.grid.h"
                 :activeTransform="activeTransform" :coord2pos="coord2pos" :transition="transition" />
             <CoreGridV v-if="theme.grid.v" v-bind="gridBreaks.v" :layout="innerRect" :theme="theme.grid.v"

src/components/core/axis/CoreAxisH.vue

@@ -71,7 +71,7 @@ const tickLines = computed(() => {
             style: { transition },
         })
     }
-    return result.filter(t => t.stroke != null)
+    return result.filter(t => t.stroke != null).sort((a, b) => a.x1 - b.x1)
 })
 const tickTexts = computed(() => {
     let isTop = theme.tick_position == "top"
@@ -109,7 +109,7 @@ const tickTexts = computed(() => {
             },
         })
     }
-    return result.filter(t => t.text.fill != null)
+    return result.filter(t => t.text.fill != null).sort((a, b) => a.text.x - b.text.x)
 })
 
 const iRef = useTemplateRef("i")

src/components/core/axis/CoreAxisV.vue

@@ -71,7 +71,7 @@ const tickLines = computed(() => {
             style: { transition },
         })
     }
-    return result.filter(t => t.stroke != null)
+    return result.filter(t => t.stroke != null).sort((a, b) => a.y1 - b.y1)
 })
 const tickTexts = computed(() => {
     let isRight = theme.tick_position == "right"
@@ -109,7 +109,7 @@ const tickTexts = computed(() => {
             }
         })
     }
-    return result.filter(t => t.text.fill != null)
+    return result.filter(t => t.text.fill != null).sort((a, b) => a.text.y - b.text.y)
 })
 
 const iRef = useTemplateRef("i")

src/components/core/element/CoreCurve.vue

@@ -16,10 +16,10 @@ const binds = computed(() => {
     let interpolatorFn = interpolators[interpolate] ?? d3.curveNatural
     return {
         d: d3.line().curve(interpolatorFn)(points.map(p => [p.x, p.y])),
-        fill: fill,
-        stroke: color,
+        fill: fill || null,
+        stroke: color || null,
         'stroke-width': linewidth,
-        'stroke-opacity': alpha,
+        'stroke-opacity': alpha == 1 ? null : alpha,
         'stroke-dasharray': parseLineType(linetype),
         transform: (translateX || translateY) ? `translate(${translateX}, ${translateY})` : null,
     }

src/components/core/element/CoreLine.vue

@@ -15,9 +15,9 @@ const {
 const binds = computed(() => {
     return {
         x1, x2, y1, y2,
-        stroke: color,
+        stroke: color || null,
         'stroke-width': linewidth,
-        'stroke-opacity': alpha,
+        'stroke-opacity': alpha == 1 ? null : alpha,
         'stroke-dasharray': parseLineType(linetype),
         transform: (translateX || translateY) ? `translate(${translateX}, ${translateY})` : null,
     }

src/components/core/element/CorePoint.vue

@@ -22,11 +22,11 @@ const paths = {
 const binds = computed(() => {
     let d = shape?.startsWith?.("path:") ? shape?.slice?.(5) : paths[shape]
     let result = {
-        fill: color,
-        'fill-opacity': alpha,
-        stroke,
+        fill: color || null,
+        'fill-opacity': alpha == 1 ? null : alpha,
+        stroke: stroke || null,
         'stroke-width': linewidth,
-        'stroke-opacity': alpha,
+        'stroke-opacity': alpha == 1 ? null : alpha,
         'stroke-dasharray': parseLineType(linetype),
     }
     if (d != null) {