DCA redraw hacks

This commit is contained in:
Tim
2024-04-17 22:18:34 -04:00
parent 45a3d09e2b
commit 1579060024
6 changed files with 248 additions and 58 deletions

View File

@@ -36,12 +36,12 @@
<script setup>
import BuilderPanel from "@/components/chart/BuilderPanel.vue";
import {useOrderStore} from "@/store/store.js";
import {allocationText, deleteBuilder, linearWeights, useChartOrderStore, weightColors} from "@/orderbuild.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 Color from "color";
import {cancelDrawing} from "@/charts/chart.js";
import {cancelDrawing, chart} from "@/charts/chart.js";
const os = useOrderStore()
const co = useChartOrderStore()
@@ -56,14 +56,15 @@ const props = defineProps({
stdWidth: Number,
shape: Function, // shape() -> Shape
mode: { type: Number, default: 0 }, // rung addition mode: 0 = split, 1 = extend
flip: { type: Boolean, default: false }, // if true, the skew slider is flipped upside-down
getModelValue: Function, // getModelValue(model) -> value
setModelValue: Function, // setModelValue(model,value) -> void
getPointsValue: Function, // getValueFromPoints(points) -> value
setValues: Function, // setValues(values:Array) -> void
setWeights: Function, // setValues(values:Array) -> void
})
const flipped = computed(() => valueA.value !== null && valueB.value !== null && valueA.value > valueB.value)
const flippedSign = computed(()=>flipped.value?-1:1)
const flippedSign = computed(()=>props.flip?-1:1)
const skew100 = computed( {
get() {return flippedSign.value*props.builder.skew*100},
@@ -73,9 +74,9 @@ const skew100 = computed( {
// validity checks
watchEffect(()=>{
const rungs = props.builder.rungs
const prev = props.builder.valid
// const prev = props.builder.valid
props.builder.valid = rungs >= 1 && valueA.value && (rungs < 2 || valueB.value)
console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
// console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
})
@@ -138,7 +139,7 @@ const values = computed(()=>{
const weights = computed(() => {
// const skew = flipped.value ? -props.builder.skew : props.builder.skew
// const skew = props.flip ? -props.builder.skew : props.builder.skew
const ws = linearWeights(props.builder.rungs, -props.builder.skew)
if (props.setWeights)
props.setWeights(ws)
@@ -184,6 +185,7 @@ function createShape(value, model, onModel, onDelete) {
function translateOnDrag(shape) {
const oldOnPoints = shape.onPoints
shape.onPoints = function (points) {
// console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
if (!this.beingDragged()) {
oldOnPoints.call(this, points)
return
@@ -192,6 +194,7 @@ function translateOnDrag(shape) {
oldOnPoints.call(this, points)
const cur = props.getModelValue(this.model)
const delta = cur - prev
// console.log('delta', points, shape.ourPoints, prev, cur, delta)
if (delta !== 0) {
valueA.value += delta
valueB.value += delta
@@ -199,6 +202,28 @@ function translateOnDrag(shape) {
}
}
// function translateOnDrag(shape) {
// const oldOnPoints = shape.onPoints
// shape.onPoints = function (points) {
// console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
// if (!this.beingDragged()) {
// oldOnPoints.call(this, points)
// return
// }
//
// // todo vectorize
// const prev = props.getPointsValue(shape.ourPoints)
// const cur = props.getPointsValue(points)
// const delta = cur - prev
// console.log('delta', points, shape.ourPoints, prev, cur, delta)
// if (delta !== 0) {
// valueA.value += delta
// valueB.value += delta
// }
// oldOnPoints.call(this, points)
// }
// }
const shapeA = createShape(valueA.value, {color: defaultColor},
function (model) {
@@ -258,10 +283,42 @@ function makeModel(index) {
return result
}
let group = null
function adjustShapes() {
// this is where all the shapes are created or adjusted
// console.log('adjustShapes()', valueA.value, valueB.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
@@ -306,10 +363,13 @@ function adjustShapes() {
}
function deleteSelf() {
if (valueA.value===null)
cancelDrawing()
deleteBuilder(props.order, props.builder);
}
function deleteShapes() {
cancelDrawing()
shapeA.delete()
shapeB.delete()
for (const shape of interiorShapes)
@@ -325,5 +385,10 @@ if (!valueA.value)
</script>
<style scoped lang="scss">
</style>
:deep(.v-slider.v-input--vertical > .v-input__control) {
min-height: 5em !important;
}
:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
background-color: inherit !important;
}
</style>