395 lines
11 KiB
Vue
395 lines
11 KiB
Vue
<template>
|
|
<builder-panel :order="order" :builder="builder" :build-tranches="buildTranches"
|
|
:adjust-shapes="adjustShapes" :delete-shapes="deleteShapes">
|
|
<div style="min-width: 3em; font-size: larger" :style="colorStyle" class="align-self-start ml-2 pt-3">{{ name }}
|
|
</div>
|
|
<div>
|
|
<v-text-field type="number" v-model="rungs"
|
|
density="compact" hide-details class="mx-1 my-2" variant="outlined"
|
|
label="Rungs"
|
|
:color="color" :base-color="color" min="1"
|
|
:disabled="valueA===null"
|
|
style="width: 4.5em;"
|
|
/>
|
|
</div>
|
|
|
|
<slot/>
|
|
|
|
<div v-if="co.drawing" class="d-flex align-center pl-3">
|
|
<v-icon icon="mdi-chat-alert-outline" color="grey" class="mr-1"/>
|
|
Click the chart!
|
|
</div>
|
|
<div v-if="rungs>1" class="mx-2 d-flex align-center">
|
|
<v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100"
|
|
class="no-slider-bg ml-2 mr-4" hide-details/>
|
|
<v-text-field type="number" v-model="skew100" min="-100" max="100"
|
|
density="compact" hide-details variant="outlined" label="Skew" step="5"
|
|
:color="color" :base-color="color">
|
|
<template v-slot:prepend>
|
|
<v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0" :color="color"/>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</builder-panel>
|
|
</template>
|
|
|
|
<script setup>
|
|
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 Color from "color";
|
|
import {cancelDrawing, chart} from "@/charts/chart.js";
|
|
|
|
const os = useOrderStore()
|
|
const co = useChartOrderStore()
|
|
const theme = useTheme().current
|
|
const valueA = defineModel('valueA')
|
|
const valueB = defineModel('valueB')
|
|
const props = defineProps({
|
|
name: String,
|
|
order: Object,
|
|
builder: Object,
|
|
buildTranches: Function,
|
|
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 flippedSign = computed(()=>props.flip?-1:1)
|
|
|
|
const skew100 = computed( {
|
|
get() {return flippedSign.value*props.builder.skew*100},
|
|
set(v) {props.builder.skew = flippedSign.value*v/100; }
|
|
} )
|
|
|
|
// validity checks
|
|
watchEffect(()=>{
|
|
const rungs = props.builder.rungs
|
|
// 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)
|
|
})
|
|
|
|
|
|
const rungs = computed({
|
|
get() {
|
|
return props.builder.rungs
|
|
},
|
|
set(r) {
|
|
if (!r) {
|
|
props.builder.rungs = 1
|
|
return
|
|
}
|
|
r = Number(r)
|
|
props.builder.rungs = r
|
|
const b = valueB.value
|
|
// console.log('set rungs', r, valueA.value, b)
|
|
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
|
|
}
|
|
else if (props.mode===1 ) {
|
|
valueB.value = valueA.value + props.stdWidth
|
|
}
|
|
else
|
|
throw Error(`Unknown rung mode ${props.mode}`)
|
|
}
|
|
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
|
|
}
|
|
else {
|
|
// from multi to multi
|
|
if (props.mode===1)
|
|
valueB.value = valueA.value + props.stdWidth * (r-1)
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
const values = computed(()=>{
|
|
let a = valueA.value
|
|
let b = valueB.value
|
|
const r = props.builder.rungs
|
|
let result
|
|
if ( a===null || !r )
|
|
result = [] // no data
|
|
else if (r===1)
|
|
result = [a] // single shape
|
|
else
|
|
result = linspace(a, b, r) // linear spacing
|
|
props.setValues(result)
|
|
return result;
|
|
})
|
|
|
|
|
|
const weights = computed(() => {
|
|
// 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)
|
|
return ws
|
|
})
|
|
|
|
|
|
const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
|
|
|
|
|
|
// colors
|
|
function computeDefaultColor() {
|
|
const index = props.order.builders.indexOf(props.builder)
|
|
return sideColor(props.order.buy, index)
|
|
}
|
|
const defaultColor = computeDefaultColor()
|
|
const color = computed({
|
|
get() {return props.builder.color},
|
|
set(v) {
|
|
const maxLightness = 60
|
|
// noinspection JSUnresolvedReference
|
|
const c = new Color(v).hsl()
|
|
props.builder.color = c.saturation <= maxLightness ? v : c.lightness(maxLightness).rgb().string()
|
|
}
|
|
})
|
|
const colorStyle = computed(() => {
|
|
return {'color': color.value}
|
|
})
|
|
|
|
|
|
//
|
|
// SHAPE MANAGEMENT
|
|
//
|
|
|
|
// we keep two special control shapes as the edges of the range, with deletable shapes in-between
|
|
|
|
function createShape(value, model, onModel, onDelete) {
|
|
props.setModelValue(model, value)
|
|
return new props.shape(model, onModel, onDelete) // props.shape is the constructor function
|
|
}
|
|
|
|
|
|
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
|
|
}
|
|
const prev = props.getModelValue(this.model)
|
|
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
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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) {
|
|
const value = props.getModelValue(model);
|
|
if (value!==null && value!==undefined)
|
|
valueA.value = value;
|
|
if (model.color)
|
|
color.value = model.color
|
|
},
|
|
deleteSelf)
|
|
|
|
if (props.mode===1)
|
|
translateOnDrag(shapeA)
|
|
|
|
const shapeB = createShape(valueB.value, {color:defaultColor},
|
|
function (model) {
|
|
const value = props.getModelValue(model);
|
|
if (value!==null && value!==undefined)
|
|
valueB.value = value;
|
|
if (model.color)
|
|
color.value = model.color
|
|
},
|
|
deleteSelf)
|
|
|
|
function interiorOnModel(model) {
|
|
if (model.color)
|
|
color.value = model.color
|
|
}
|
|
|
|
let interiorShapes = []
|
|
|
|
function createInteriorShape(index) {
|
|
const shape = new props.shape(makeModel(index), interiorOnModel, deleteSelf)
|
|
translateOnDrag(shape)
|
|
interiorShapes.push(shape)
|
|
}
|
|
|
|
|
|
function removeInteriorShape() {
|
|
if (interiorShapes.length) {
|
|
const shape = interiorShapes.pop()
|
|
shape.delete()
|
|
}
|
|
}
|
|
|
|
function makeModel(index) {
|
|
const ws = weights.value
|
|
const alloc = props.builder.allocation * ws[index];
|
|
const result = {
|
|
color: color.value,
|
|
allocation: alloc,
|
|
maxAllocation: Math.max(...weights.value),
|
|
amount: props.order.amount * alloc,
|
|
amountSymbol: amountSymbol.value,
|
|
}
|
|
props.setModelValue(result, values.value[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
|
|
if( vs.length === 0 ) {
|
|
shapeA.delete()
|
|
shapeB.delete()
|
|
for( const shape of interiorShapes )
|
|
shape.delete()
|
|
interiorShapes = []
|
|
}
|
|
else if (vs.length === 1) {
|
|
//
|
|
// SINGLE SHAPE
|
|
//
|
|
shapeA.setModel(makeModel(0))
|
|
shapeB.delete()
|
|
if (interiorShapes.length) {
|
|
for( const shape of interiorShapes )
|
|
shape.delete()
|
|
interiorShapes = []
|
|
}
|
|
}
|
|
else {
|
|
//
|
|
// VALUE RANGE
|
|
//
|
|
shapeA.setModel(makeModel(0))
|
|
shapeB.setModel(makeModel(vs.length-1))
|
|
const numInterior = Math.max(0,vs.length-2);
|
|
// trim excess interior shapes
|
|
while( interiorShapes.length > numInterior )
|
|
removeInteriorShape()
|
|
// adjust the interior shape values and/or add shapes
|
|
for( let i=1; i<vs.length-1; i++ ) {
|
|
if (i-1 === interiorShapes.length)
|
|
createInteriorShape(i)
|
|
else
|
|
interiorShapes[i-1].setModel(makeModel(i))
|
|
}
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function deleteSelf() {
|
|
if (valueA.value===null)
|
|
cancelDrawing()
|
|
deleteBuilder(props.order, props.builder);
|
|
}
|
|
|
|
function deleteShapes() {
|
|
cancelDrawing()
|
|
shapeA.delete()
|
|
shapeB.delete()
|
|
for (const shape of interiorShapes)
|
|
shape.delete()
|
|
interiorShapes = []
|
|
}
|
|
|
|
onUnmounted(deleteShapes)
|
|
|
|
if (!valueA.value)
|
|
shapeA.createOrDraw(); // initiate drawing mode
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
: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>
|