Merge branch 'main' into demo

Fan-iX · Fan-iX · commit 00637b443bc0 · 2025-11-20T06:29:29.000-05:00
diff --git a/src/components/Plot.vue b/src/components/Plot.vue
@@ -409,12 +409,12 @@ const panelStyle = computed(() => {
 
 const wrapperStyle = computed(() => {
     let style = { overflow: 'hidden', boxSizing: 'border-box' }
-    if (resize == "x") {
+    if (resize === "both" || resize === true || resize === "") {
+        Object.assign(style, { resize: "both" })
+    } else if (resize === "horizontal" || resize === "x" && !flip || resize === "y" && flip) {
         Object.assign(style, { resize: "horizontal" })
-    } else if (resize == "y") {
+    } else if (resize === "vertical" || resize === "y" && !flip || resize === "x" && flip) {
         Object.assign(style, { resize: "vertical" })
-    } else if (resize == true || resize == "both" || resize == "") {
-        Object.assign(style, { resize: "both" })
     }
     return style
 })
diff --git a/src/components/core/CorePlot.vue b/src/components/core/CorePlot.vue
@@ -1,6 +1,6 @@
 <script setup>
 defineOptions({ inheritAttrs: false })
-import { reactive, ref, computed, watch, useTemplateRef, useId } from 'vue'
+import { reactive, computed, watch, useTemplateRef, useId } from 'vue'
 import { GPlot } from '#base/js/plot'
 import { unique, oob_squish_any, oob_squish_infinite, dropNull, emitEvent } from '#base/js/utils'
 import { reactiveComputed, useElementSize } from '@vueuse/core'
@@ -193,19 +193,19 @@ function pos2coord({
 function _coord2pos(
     { value, min, max } = {},
     { oob = oob_squish_infinite } = {},
-    scale, rev, length, range
+    scale, rev, length, boundary
 ) {
     let result = {}
     if (value != null) {
-        result.value = oob(length * (rev ? 1 - scale(value) : scale(value)), range)
+        result.value = oob(length * (rev ? 1 - scale(value) : scale(value)), boundary)
     }
     if (min == null && max == null) return result
     if (rev) {
-        if (max != null) result.min = oob(length * (1 - scale(max)), range)
-        if (min != null) result.max = oob(length * (1 - scale(min)), range)
+        if (max != null) result.min = oob(length * (1 - scale(max)), boundary)
+        if (min != null) result.max = oob(length * (1 - scale(min)), boundary)
     } else {
-        if (min != null) result.min = oob(length * scale(min), range)
-        if (max != null) result.max = oob(length * scale(max), range)
+        if (min != null) result.min = oob(length * scale(min), boundary)
+        if (max != null) result.max = oob(length * scale(max), boundary)
     }
     return result
 }
@@ -218,8 +218,8 @@ function coord2pos({
     let { width, height, l, r, t, b } = innerRect
     let result = {}
     let scales = vplot.value.coordScales
-    let rangeH = { min: -l, max: width + r },
-        rangeV = { min: -t, max: height + b }
+    let boundaryH = { min: -l, max: width + r },
+        boundaryV = { min: -t, max: height + b }
     if (x != null || xmin != null || xmax != null) {
         if (flip) {
             [v, vmin, vmax] = [x, xmin, xmax]
@@ -240,7 +240,7 @@ function coord2pos({
             { oob },
             scales[flip ? 'y' : 'x'],
             reverse[flip ? 'y' : 'x'],
-            width, rangeH
+            width, boundaryH
         )
         Object.assign(result, dropNull({ h: value, hmin: min, hmax: max }))
     }
@@ -250,15 +250,15 @@ function coord2pos({
             { oob },
             scales[flip ? 'x' : 'y'],
             !reverse[flip ? 'x' : 'y'],
-            height, rangeV
+            height, boundaryV
         )
         Object.assign(result, dropNull({ v: value, vmin: min, vmax: max }))
     }
     if (limited) {
-        if (result.hmin == null) result.hmin = rangeH.min
-        if (result.hmax == null) result.hmax = rangeH.max
-        if (result.vmin == null) result.vmin = rangeV.min
-        if (result.vmax == null) result.vmax = rangeV.max
+        if (result.hmin == null) result.hmin = boundaryH.min
+        if (result.hmax == null) result.hmax = boundaryH.max
+        if (result.vmin == null) result.vmin = boundaryV.min
+        if (result.vmax == null) result.vmax = boundaryV.max
     }
     return result
 }
@@ -411,19 +411,19 @@ function svgPointerdown(e) {
         svg.style.userSelect = 'none'
         moveTimer = clearTimeout(moveTimer)
         let boundary = coord2pos(act, { unlimited: true })
-        let rangeH = {
+        let boundaryH = {
             min: boundary.hmax == null ? -Infinity : innerRect.width - boundary.hmax,
             max: boundary.hmin == null ? Infinity : - boundary.hmin,
         },
-            rangeV = {
+            boundaryV = {
                 min: boundary.vmax == null ? -Infinity : innerRect.height - boundary.vmax,
                 max: boundary.vmin == null ? Infinity : - boundary.vmin,
             }
         e.target.onpointermove = (ev) => {
             let { x = false, y = false } = act
             let [h, v] = flip ? [y, x] : [x, y]
-            if (h) translateH.value = oob_squish_any(translateH.value + ev.movementX, rangeH)
-            if (v) translateV.value = oob_squish_any(translateV.value + ev.movementY, rangeV)
+            if (h) translateH.value = oob_squish_any(translateH.value + ev.movementX, boundaryH)
+            if (v) translateV.value = oob_squish_any(translateV.value + ev.movementY, boundaryV)
         }
         e.target.onpointerup = (ev) => {
             ev.currentTarget.onpointerup = null
@@ -546,19 +546,19 @@ function wheel(act, pos, delta) {
         let boundary = coord2pos(act, { unlimited: true })
         if (h) {
             let movement = sensitivity * innerRect.width * (-delta / 120)
-            let range = {
+            let boundaryH = {
                 min: boundary.hmax == null ? -Infinity : innerRect.width - boundary.hmax,
                 max: boundary.hmin == null ? Infinity : - boundary.hmin,
             }
-            translateH.value = oob_squish_any(movement, range)
+            translateH.value = oob_squish_any(movement, boundaryH)
         }
         if (v) {
             let movement = sensitivity * innerRect.height * (-delta / 120)
-            let range = {
+            let boundaryV = {
                 min: boundary.vmax == null ? -Infinity : innerRect.height - boundary.vmax,
                 max: boundary.vmin == null ? Infinity : - boundary.vmin,
             }
-            translateV.value = oob_squish_any(movement, range)
+            translateV.value = oob_squish_any(movement, boundaryV)
         }
     }
 }
@@ -579,10 +579,10 @@ const svgVOn = {
 function changerange(coord) {
     let { xmin, xmax, ymin, ymax } = coord
     let { xmin: $xmin, xmax: $xmax, ymin: $ymin, ymax: $ymax } = range
-    xmin = xmin != null ? xmin + expandAdd.x.min : $xmin
-    xmax = xmax != null ? xmax - expandAdd.x.max : $xmax
-    ymin = ymin != null ? ymin + expandAdd.y.min : $ymin
-    ymax = ymax != null ? ymax - expandAdd.y.max : $ymax
+    xmin = xmin != null ? typeof xmin == "number" ? xmin + expandAdd.x.min : new xmin.constructor(+xmin + expandAdd.x.min) : $xmin
+    xmax = xmax != null ? typeof xmin == "number" ? xmax - expandAdd.x.max : new xmax.constructor(+xmax - expandAdd.x.max) : $xmax
+    ymin = ymin != null ? typeof xmin == "number" ? ymin + expandAdd.y.min : new ymin.constructor(+ymin + expandAdd.y.min) : $ymin
+    ymax = ymax != null ? typeof xmin == "number" ? ymax - expandAdd.y.max : new ymax.constructor(+ymax - expandAdd.y.max) : $ymax
     if (xmin == $xmin && xmax == $xmax && ymin == $ymin && ymax == $ymax) return
     if (xmin != $xmin) emit('update:xmin', xmin)
     if (xmax != $xmax) emit('update:xmax', xmax)
diff --git a/src/components/core/axis/CoreAxisH.vue b/src/components/core/axis/CoreAxisH.vue
@@ -147,13 +147,13 @@ function axisMovePointerdown(e) {
     e.stopPropagation()
     e.target.style.cursor = 'grabbing'
     let boundary = coord2pos(act, { unlimited: true })
-    let range = {
+    let boundaryH = {
         min: boundary.hmax == null ? -Infinity : layout.width - boundary.hmax,
         max: boundary.hmin == null ? Infinity : - boundary.hmin
     }
     e.target.setPointerCapture(e.pointerId)
     e.target.onpointermove = (ev) => {
-        translateH.value = oob_squish_any(translateH.value + ev.movementX, range)
+        translateH.value = oob_squish_any(translateH.value + ev.movementX, boundaryH)
     }
     e.target.onpointerup = (ev) => {
         e.target.onpointermove = null
@@ -256,11 +256,11 @@ function wheel(act, pos, delta) {
         let { sensitivity = 0.1 } = act
         let movement = sensitivity * layout.width * (-delta / 120)
         let boundary = coord2pos(act, { unlimited: true })
-        let range = {
+        let boundaryH = {
             min: boundary.hmax == null ? -Infinity : layout.width - boundary.hmax,
             max: boundary.hmin == null ? Infinity : - boundary.hmin,
         }
-        translateH.value = oob_squish_any(movement, range)
+        translateH.value = oob_squish_any(movement, boundaryH)
     }
 }
 function applyTransform(act, event) {
diff --git a/src/components/core/axis/CoreAxisV.vue b/src/components/core/axis/CoreAxisV.vue
@@ -147,13 +147,13 @@ function axisMovePointerdown(e) {
     e.stopPropagation()
     e.target.style.cursor = 'grabbing'
     let boundary = coord2pos(act, { unlimited: true })
-    let range = {
+    let boundaryV = {
         min: boundary.vmax == null ? -Infinity : layout.height - boundary.vmax,
         max: boundary.vmin == null ? Infinity : - boundary.vmin
     }
     e.target.setPointerCapture(e.pointerId)
     e.target.onpointermove = (ev) => {
-        translateV.value = oob_squish_any(translateV.value + ev.movementY, range)
+        translateV.value = oob_squish_any(translateV.value + ev.movementY, boundaryV)
     }
     e.target.onpointerup = (ev) => {
         e.target.onpointermove = null
@@ -256,11 +256,11 @@ function wheel(act, pos, delta) {
         let { sensitivity = 0.1 } = act
         let movement = sensitivity * layout.height * (-delta / 120)
         let boundary = coord2pos(act, { unlimited: true })
-        let range = {
+        let boundaryV = {
             min: boundary.vmax == null ? -Infinity : layout.height - boundary.vmax,
             max: boundary.vmin == null ? Infinity : - boundary.vmin,
         }
-        translateV.value = oob_squish_any(movement, range)
+        translateV.value = oob_squish_any(movement, boundaryV)
     }
 }
 function applyTransform(act, event) {
diff --git a/src/js/geom.js b/src/js/geom.js
@@ -120,13 +120,13 @@ export default {
         },
         get_range(ds, orientation) {
             if (orientation == 'x') {
-                let xmin = (ds.x ?? []).map((v, i) => +v - ds.width[i] / 2),
-                    xmax = (ds.x ?? []).map((v, i) => +v + ds.width[i] / 2)
+                let xmin = (ds.x ?? []).map((v, i) => +v - (ds.width?.[i] ?? 0) / 2),
+                    xmax = (ds.x ?? []).map((v, i) => +v + (ds.width?.[i] ?? 0) / 2)
                 return xmin.concat(xmax)
             }
             if (orientation == 'y') {
-                let ymin = (ds.y ?? []).map((v, i) => +v - ds.height[i] / 2),
-                    ymax = (ds.y ?? []).map((v, i) => +v + ds.height[i] / 2)
+                let ymin = (ds.y ?? []).map((v, i) => +v - (ds.height?.[i] ?? 0) / 2),
+                    ymax = (ds.y ?? []).map((v, i) => +v + (ds.height?.[i] ?? 0) / 2)
                 return ymin.concat(ymax)
             }
         },
diff --git a/web-docs/docs/gallery.vue b/web-docs/docs/gallery.vue
@@ -125,46 +125,46 @@ const vBind = {
             </div>
             <hr>
             <pre><code class="html">{{templates[9] = `<VVPlot :data="economics" :theme="{ plot: { margin_right: 50 } }">
-        <VVAxisY :labels="v => \`\${v * 100}%\`" :expand-mult="{ min: 0.2, max: 0.1 }" title="unemployment rate"
-            :theme="{ title_color: 'gray' }">
-            <VVAction move rescale zoom />
-        </VVAxisY>
-        <VVAxisX position="10%"
-            :theme="{ tick_length: 3, title_position: 'right', title_size: 16, text_angle: 45, tick_anchor_x: 0 }"
-            :show-grid="false" title="date" :extend="0.5">
-            <VVAction move rescale zoom />
-        </VVAxisX>
-        <VVGeomLine :x="d => new Date(d.date)" :y="d => d.unemploy / d.pop" />
-    </VVPlot>`}}</code></pre>
+    <VVAxisY :labels="v => \`\${v * 100}%\`" :expand-mult="{ min: 0.2, max: 0.1 }" title="unemployment rate"
+        :theme="{ title_color: 'gray' }">
+        <VVAction move rescale zoom />
+    </VVAxisY>
+    <VVAxisX position="10%"
+        :theme="{ tick_length: 3, title_position: 'right', title_size: 16, text_angle: 45, tick_anchor_x: 0 }"
+        :show-grid="false" title="date" :extend="0.5">
+        <VVAction move rescale zoom />
+    </VVAxisX>
+    <VVGeomLine :x="d => new Date(d.date)" :y="d => d.unemploy / d.pop" />
+</VVPlot>`}}</code></pre>
             <component :is="{ template: templates[9], props: Object.keys(vBind) }" v-bind="vBind" />
             <hr>
             <pre><code class="html">{{templates[10] = `<VVPlot :data="economics">
-        <VVAxisX :labels="vvlabel.timestamp({ format: 'yyyy/MM' })" position="top" />
-        <VVAxisY position="left" primary />
-        <VVAxisY position="right" />
-        <VVAxisX position="bottom" secondary />
-        <VVGeomLine :x="d => new Date(d.date)" :y="d => d.pop" />
-    </VVPlot>`}}</code></pre>
+    <VVAxisX :labels="vvlabel.timestamp({ format: 'yyyy/MM' })" position="top" />
+    <VVAxisY position="left" primary />
+    <VVAxisY position="right" />
+    <VVAxisX position="bottom" secondary />
+    <VVGeomLine :x="d => new Date(d.date)" :y="d => d.pop" />
+</VVPlot>`}}</code></pre>
             <component :is="{ template: templates[10], props: Object.keys(vBind) }" v-bind="vBind" />
             <hr>
             <pre><code class="html">{{templates[11] = `<VVPlot :data="[{ x: 2, y: -1 }, { x: -1, y: 2 }]">
-        <VVAxisX :position="0" :expand-mult="1" :breaks="vvbreak.number({ step: 1 })" title="x"
-            :theme="{ title_position: 'right', title_size: 16 }">
-            <VVAction move rescale zoom />
-        </VVAxisX>
-        <VVAxisY :position="0" :expand-mult="1" :extend="1" title="y"
-            :theme="{ title_position: 'top', title_dock_x: 0, title_size: 16, title_angle: 0 }">
-            <VVAction move rescale zoom />
-        </VVAxisY>
-        <VVGeomPoint :x="d => d.x" :y="d => d.y" />
-    </VVPlot>`}}</code></pre>
+    <VVAxisX :position="0" :expand-mult="1" :breaks="vvbreak.number({ step: 1 })" title="x"
+        :theme="{ title_position: 'right', title_size: 16 }">
+        <VVAction move rescale zoom />
+    </VVAxisX>
+    <VVAxisY :position="0" :expand-mult="1" :extend="1" title="y"
+        :theme="{ title_position: 'top', title_dock_x: 0, title_size: 16, title_angle: 0 }">
+        <VVAction move rescale zoom />
+    </VVAxisY>
+    <VVGeomPoint :x="d => d.x" :y="d => d.y" />
+</VVPlot>`}}</code></pre>
             <component :is="{ template: templates[11], props: Object.keys(vBind) }" v-bind="vBind" />
             <hr>
             <pre><code class="html">{{templates[12] = `<VVPlot :data="letters">
-        <VVAxisX :expand-add="1" :expand-mult="0" :levels="['x', 'y', 'z', '', 'a', 'b', 'c']" :position="0" />
-        <VVAxisY position="center" :theme="{ tick_anchor_y: 1 }" />
-        <VVGeomBar :x="d => d" />
-    </VVPlot>`}}</code></pre>
+    <VVAxisX :expand-add="1" :expand-mult="0" :levels="['x', 'y', 'z', '', 'a', 'b', 'c']" :position="0" />
+    <VVAxisY position="center" :theme="{ tick_anchor_y: 1 }" />
+    <VVGeomBar :x="d => d" />
+</VVPlot>`}}</code></pre>
             <component :is="{ template: templates[12], props: Object.keys(vBind) }" v-bind="vBind" />
         </section>
     </article>
diff --git a/web-docs/index.vue b/web-docs/index.vue
@@ -34,7 +34,7 @@ window.addEventListener('hashchange', () => {
 })
 </script>
 <template>
-    <div class="content">
+    <div class="content" :class="{ 'h-screen': page == 'playground' }">
         <nav class="flex flex-row gap-4 p-4 sticky top-0 bg-white border-b border-gray-200 z-20">
             <a :href="'#' + k" :key="k" v-for="(v, k) in pages">{{ k.replace(/_/g, " ") }}</a>
         </nav>
diff --git a/web-docs/playground.vue b/web-docs/playground.vue
diff --git a/web-docs/style/style.css b/web-docs/style/style.css

Original file line number	Diff line number	Diff line change
`@@ -147,13 +147,13 @@ function axisMovePointerdown(e) {`
`147`	`147`	`e.stopPropagation()`
`148`	`148`	`e.target.style.cursor = 'grabbing'`
`149`	`149`	`let boundary = coord2pos(act, { unlimited: true })`
`150`		`- let range = {`
	`150`	`+ let boundaryH = {`
`151`	`151`	`min: boundary.hmax == null ? -Infinity : layout.width - boundary.hmax,`
`152`	`152`	`max: boundary.hmin == null ? Infinity : - boundary.hmin`
`153`	`153`	`}`
`154`	`154`	`e.target.setPointerCapture(e.pointerId)`
`155`	`155`	`e.target.onpointermove = (ev) => {`
`156`		`- translateH.value = oob_squish_any(translateH.value + ev.movementX, range)`
	`156`	`+ translateH.value = oob_squish_any(translateH.value + ev.movementX, boundaryH)`
`157`	`157`	`}`
`158`	`158`	`e.target.onpointerup = (ev) => {`
`159`	`159`	`e.target.onpointermove = null`
`@@ -256,11 +256,11 @@ function wheel(act, pos, delta) {`
`256`	`256`	`let { sensitivity = 0.1 } = act`
`257`	`257`	`let movement = sensitivity * layout.width * (-delta / 120)`
`258`	`258`	`let boundary = coord2pos(act, { unlimited: true })`
`259`		`- let range = {`
	`259`	`+ let boundaryH = {`
`260`	`260`	`min: boundary.hmax == null ? -Infinity : layout.width - boundary.hmax,`
`261`	`261`	`max: boundary.hmin == null ? Infinity : - boundary.hmin,`
`262`	`262`	`}`
`263`		`- translateH.value = oob_squish_any(movement, range)`
	`263`	`+ translateH.value = oob_squish_any(movement, boundaryH)`
`264`	`264`	`}`
`265`	`265`	`}`
`266`	`266`	`function applyTransform(act, event) {`