<commit_before>import Rx from '@reactivex/rxjs/dist/cjs/Rx';
import config from '../config';

const colors = {
    outline: "pink",
    marker: "black",
    playgroundOutline: "blue",
    trackable: "white"
};

const outlineWidth = 10;
const markerSize = 60;

class PlaygroundRenderer extends HTMLCanvasElement {
    createdCallback() {
        this.width = config.canvasWidth;
        this.height = config.canvasWidth / config.screenRatio;
        this.context = this.getContext('2d');
    }

    subscribeTo(observable) {
        observable.subscribe({
            next: trackables => this.renderPlayground(trackables)
        });
    }

    renderPlayground(trackables) {
        console.log("render", trackables);
        this.context.clearRect(0, 0, this.width, this.height);
        this.drawOutline();
        trackables.forEach(i => this.renderTrackable(i));
    }

    drawOutline() {
        this.context.beginPath();
        this.context.moveTo(0, 0);
        this.context.lineTo(this.width, 0);
        this.context.lineTo(this.width, this.height);
        this.context.lineTo(0, this.height);
        this.context.lineTo(0, 0);
        this.context.lineWidth = outlineWidth;
        this.context.strokeStyle = colors.outline;
        this.context.stroke();
    }

    renderTrackable(trackable) {
        this.context.beginPath();
        this.context.arc(trackable.x, trackable.y, 10, 0, 2 * Math.PI);
        this.context.strokeStyle = colors.trackable;
        this.context.lineWidth = 3;
        this.context.stroke();
    }
}

export default document.registerElement('playground-renderer', {
    prototype: PlaygroundRenderer.prototype,
    extends: 'canvas'
});<commit_msg>use the color provided from trackables.rectangle<commit_after>import Rx from '@reactivex/rxjs/dist/cjs/Rx';
import config from '../config';

const colors = {
    outline: "pink",
    marker: "pink",
    trackable: "white"
};

const outlineWidth = 10;
const markerSize = 60;

class PlaygroundRenderer extends HTMLCanvasElement {
    createdCallback() {
        this.width = config.canvasWidth;
        this.height = config.canvasWidth / config.screenRatio;
        this.context = this.getContext('2d');
    }

    subscribeTo(observable) {
        observable.subscribe({
            next: trackables => this.renderPlayground(trackables)
        });
    }

    renderPlayground(trackables) {
        console.log("render", trackables);
        this.context.clearRect(0, 0, this.width, this.height);
        this.drawOutline();
        trackables.forEach(i => this.renderTrackable(i));
    }

    drawOutline() {
        this.context.beginPath();
        this.context.moveTo(0, 0);
        this.context.lineTo(this.width, 0);
        this.context.lineTo(this.width, this.height);
        this.context.lineTo(0, this.height);
        this.context.lineTo(0, 0);
        this.context.lineWidth = outlineWidth;
        this.context.strokeStyle = colors.outline;
        this.context.stroke();
    }

    renderTrackable(trackable) {
        this.context.beginPath();
        this.context.arc(trackable.x, trackable.y, 10, 0, 2 * Math.PI);
        this.context.strokeStyle = trackable.rectangle.color;
        this.context.lineWidth = 3;
        this.context.stroke();
    }
}

export default document.registerElement('playground-renderer', {
    prototype: PlaygroundRenderer.prototype,
    extends: 'canvas'
});
{'fraction_non_alphanumeric': 0.13074204946996468, 'fraction_numerical': 0.01060070671378092, 'mean_word_length': 2.7577433628318584, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3803010', 'n_tokens_mistral': 1046, 'n_tokens_neox': 1010, 'n_words': 179}