dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SMOOTH RENDERING!

Browse Source
This commit is contained in:
Tim
2024-04-22 21:12:43 -04:00
parent dc8185491b
commit e86b9738d8
6 changed files with 99 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/chart/RungBuilder.vue
View File

@@ -8,7 +8,7 @@
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Rungs"
:color="color" :base-color="color" min="1"
:disabled="valueA===null"
:disabled="endpoints[0]===null"
style="width: 4.5em;"
/>
</div>
@@ -37,17 +37,14 @@
import BuilderPanel from "@/components/chart/BuilderPanel.vue";
import {useOrderStore} from "@/store/store.js";
import {deleteBuilder, linearWeights, useChartOrderStore} from "@/orderbuild.js";
import {useTheme} from "vuetify";
import {linspace, sideColor} from "@/misc.js";
import {computed, onUnmounted, watchEffect} from "vue";
import {computed, watchEffect} from "vue";
import Color from "color";
import {cancelDrawing} from "@/charts/chart.js";
const os = useOrderStore()
const co = useChartOrderStore()
const theme = useTheme().current
const valueA = defineModel('valueA')
const valueB = defineModel('valueB')
const endpoints = defineModel('modelValue') // 2-item list of points/values
const props = defineProps({
name: String,
order: Object,
@@ -76,7 +73,7 @@ const skew100 = computed( {
watchEffect(()=>{
const rungs = props.builder.rungs
// const prev = props.builder.valid
props.builder.valid = rungs >= 1 && valueA.value && (rungs < 2 || valueB.value)
props.builder.valid = rungs >= 1 && endpoints.value[0] && (rungs < 2 || endpoints.value[1])
// console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
})
@@ -90,21 +87,22 @@ const rungs = computed({
props.builder.rungs = 1
return
}
let [a,b] = endpoints.value
const prevR = props.builder.rungs
r = Number(r)
props.builder.rungs = r
const b = valueB.value
// console.log('set rungs', r, valueA.value, b)
// console.log('set rungs', r, ...endpoints.value)
if ( r > 0 && b === null ) {
// convert single shape to a range
if (props.mode===0) {
const width = props.stdWidth
const mid = valueA.value
valueA.value = mid - width/2
valueB.value = mid + width/2
const mid = a
a = mid - width/2
b = mid + width/2
endpoints.value = [a,b]
}
else if (props.mode===1 ) {
valueB.value = valueA.value + props.stdWidth
endpoints.value = [a, a+props.stdWidth]
}
else
throw Error(`Unknown rung mode ${props.mode}`)
@@ -112,14 +110,16 @@ const rungs = computed({
else if ( r === 1 && b !== null ) {
// convert from a range to a single shape
if (props.mode===0)
valueA.value = (valueA.value + b) / 2
valueB.value = null
a = (a + b) / 2
b = null
endpoints.value = [a, b]
}
else {
// from multi to multi
if (props.mode===1) {
const width = (valueB.value - valueA.value) / (prevR-1)
valueB.value = valueA.value + width * (r-1)
const width = (b - a) / (prevR-1)
b = a + width * (r-1)
endpoints.value = [a, b]
}
}
}
@@ -127,8 +127,7 @@ const rungs = computed({
const values = computed(()=>{
let a = valueA.value
let b = valueB.value
const [a, b] = endpoints.value
const r = props.builder.rungs
let result
if ( a===null || !r )
@@ -191,18 +190,18 @@ function translateOnModel(shape) {
shape.onModel = function (model, oldModel) {
oldOnModel.call(this, ...arguments)
// console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
if (!this.beingDragged()) {
oldOnModel.call(this, ...arguments)
if (!this.beingDragged())
return
}
const prev = props.getModelValue(oldModel)
const cur = props.getModelValue(this.model)
const delta = cur - prev
// console.log('delta', shape.id, prev, cur, delta)
let [a, b] = endpoints.value
if (delta !== 0) {
valueA.value += delta
a += delta
if (rungs.value > 1)
valueB.value += delta
b += delta
endpoints.value = [a, b]
}
}
}
@@ -212,11 +211,11 @@ function setModelColor(model) {
color.value = model.color
}
const shapeA = createShape(valueA.value, {color: defaultColor},
const shapeA = createShape(endpoints.value[0], {color: defaultColor},
function (model) {
const value = props.getModelValue(model);
if (value !== valueA.value)
valueA.value = value;
if (value !== endpoints.value[0])
endpoints.value = [value, endpoints.value[1]]
setModelColor(model)
},
deleteSelf)
@@ -224,11 +223,11 @@ const shapeA = createShape(valueA.value, {color: defaultColor},
if (props.mode===1)
translateOnModel(shapeA)
const shapeB = createShape(valueB.value, {color:defaultColor},
const shapeB = createShape(endpoints.value[1], {color:defaultColor},
function (model) {
const value = props.getModelValue(model);
if (value !== valueB.value)
valueB.value = value;
if (value !== endpoints.value[1])
endpoints.value = [endpoints.value[0], value]
setModelColor(model)
},
deleteSelf)
@@ -268,41 +267,10 @@ function makeModel(index) {
}
let group = null
function adjustShapes() {
// this is where all the shapes are created or adjusted
// console.log('adjustShapes()', valueA.value, valueB.value)
// console.error('adjustShapes()', ...endpoints.value)
const vs = values.value
//
//
// const selection = []
// if (shapeA.id !== null)
// selection.push(shapeA.id)
// if (shapeB.id !== null)
// selection.push(shapeB.id)
// for( const s of interiorShapes ) {
// if (s.id !== null)
// selection.push(s.id)
// }
// if (group===null) {
// if (selection.length) {
// const gc = chart.shapesGroupController();
// group = gc.createGroupFromSelection(selection)
// }
// }
// else {
// const gc = chart.shapesGroupController();
// const shapes = gc.shapesInGroup(group)
//
// console.log('shapes', group, shapes)
// for (const s of selection)
// if (!shapes.includes(s)) {
// console.log('add shape to group', group, s)
// gc.addShapeToGroup(group, s)
// }
// }
//
//
if (vs.length)
cancelDrawing()
// shape properties
@@ -343,11 +311,10 @@ function adjustShapes() {
interiorShapes[i-1].setModel(makeModel(i))
}
}
return ''
}
function deleteSelf() {
if (valueA.value===null)
if (endpoints.value[0]===null)
cancelDrawing()
deleteBuilder(props.order, props.builder);
}
@@ -361,9 +328,8 @@ function deleteShapes() {
interiorShapes = []
}
onUnmounted(deleteShapes)
if (!valueA.value)
if (!endpoints.value[0])
shapeA.createOrDraw(); // initiate drawing mode
</script>