paperjs color palette color proportions tool

color_proportions.js

const calcWeights = cutoffs => {
    let weights = [cutoffs[0]]
    for(let i = 1; i < cutoffs.length; i++){
        let weight = cutoffs[i] - cutoffs[i-1]
        weights.push(weight)
    }
    weights.push(1 - cutoffs.at(-1))
    return weights
}

var cutoffs = [
    0.20,
    0.30,
    0.60,
    0.90
]

width = 400
height = 200

var colors = [
    "red",
    "orange",
    "yellow",
    "lightgreen",
    "lightblue",
]

let weights = calcWeights(cutoffs)
 
colors.forEach((c,i) => {
    let x = (i==0) ? 0 : width*cutoffs[i-1];
    let w = width * weights[i];
    let rect = new Path.Rectangle({
        size: [w,height],
        position: [x + w/2,0],
        fillColor: c
    })
})

var myTool = new Tool()


myTool.adjustPrevious = function(item){
    item.previousSibling.segments[2].point.x = item.bounds.left
    item.previousSibling.segments[3].point.x = item.bounds.left
}

myTool.adjustNext = function(item){
    item.nextSibling.segments[0].point.x = item.bounds.right
    item.nextSibling.segments[1].point.x = item.bounds.right    
}

myTool.on({
    mousedown(e){
        this.hit = project.hitTest(e.point, {curves:true, fill:true, tolerance: 8})

        if(this.hit){
            if(this.hit.type=='fill'){
                this.hitOffset = e.point - this.hit.item.position;
                if(this.hit.item.index > 0 && this.hit.item.index < 4){
                    this.hit.item.selected = true;
                }
            }
            else if(this.hit.type=='curve'){
                let curve = this.hit.item.curves[this.hit.location.index]
                curve.segment1.selected = true
                curve.segment2.selected = true
            }
        }
    },
    mousedrag(e){
        if(this.hit.type=='fill' && this.hit.item.selected == true){
            this.hit.item.position.x = e.point.x - this.hitOffset.x
            this.hit.item.segments[2].point.x -= e.delta.y
            this.hit.item.segments[3].point.x -= e.delta.y
            this.adjustPrevious(this.hit.item)
            this.adjustNext(this.hit.item)
        }    
        else if(this.hit.type=='curve'){
            this.hit.item.segments.forEach(seg => {
                if(seg.selected)seg.point.x = e.point.x
            })
            
            if(this.hit.item.index > 0)this.adjustPrevious(this.hit.item)
            if(this.hit.item.index < 4)this.adjustNext(this.hit.item)
        }
    },
    mouseup(e){
        project.deselectAll()
        this.hit = null
    }
})