DCA redraw hacks
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user