suckless/dwm - Unnamed repository; edit this file 'description' to name the repository.

about summary refs log tree commit diff stats

path: root/view.c

diff options

Diffstat (limited to 'view.c')

-rw-r--r--

19

1 files changed, 7 insertions, 12 deletions

.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
const input = document.getElementById('input');
let rectangles = JSON.parse(localStorage.getItem('rectangles')) || [];
let currentRectangle = null;
let dragging = false;

const createRectangle = (x, y, width, height, text) => ({ x, y, width, height, text });
const isPointInsideRectangle = (point, rectangle) => (
    point.x >= rectangle.x &&
    point.x <= rectangle.x + rectangle.width &&
    point.y >= rectangle.y &&
    point.y <= rectangle.y + rectangle.height
);

const handleMouseDown = (e) => {
    currentRectangle = createRectangle(e.clientX, e.clientY, 0, 0, '');
    dragging = true;
};

const handleMouseMove = (e) => {
    if (dragging && currentRectangle) {
        currentRectangle.width = e.clientX - currentRectangle.x;
        currentRectangle.height = e.clientY - currentRectangle.y;
        render();
    }
};

const handleMouseUp = (e) => {
    if (dragging && currentRectangle) {
        rectangles.push(currentRectangle);
        localStorage.setItem('rectangles', JSON.stringify(rectangles));
        currentRectangle = null;
        dragging = false;
    }
};

const handleDoubleClick = (e) => {
    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
    if (rectangle) {
        input.style.left = `${rectangle.x}px`;
        input.style.top = `${rectangle.y}px`;
        input.value = rectangle.text;
        input.focus();
        currentRectangle = rectangle;
    }
};

const handleContextMenu = (e) => {
    e.preventDefault();
    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
    if (rectangle) {
        if (confirm('Are you sure you want to remove this rectangle?')) {
            rectangles = rectangles.filter((r) => r !== rectangle);
            localStorage.setItem('rectangles', JSON.stringify(rectangles));
            render();
        }
    }
};

const handleInputBlur = (e) => {
    if (currentRectangle) {
        currentRectangle.text = input.value;
        localStorage.setItem('rectangles', JSON.stringify(rectangles));
        input.value = '';
        render();
    }
};

const handleClick = (e) => {
    rectangles.forEach((r) => (r.focus = false));
    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
    if (rectangle) {
        rectangle.focus = true;
        render();
    }
};

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
canvas.addEventListener('dblclick', handleDoubleClick);
canvas.addEventListener('contextmenu', handleContextMenu);
input.addEventListener('blur', handleInputBlur);
canvas.addEventListener('click', handleClick);

const render = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    rectangles.forEach((r) => {
        ctx.fillStyle = 'white';
        ctx.fillRect(r.x, r.y, r.width, r.height);
        ctx.lineWidth = r.focus ? 3 : 1;
        ctx.strokeRect(r.x, r.y, r.width, r.height);
        ctx.fillStyle = 'black';
        ctx.fillText(r.text, r.x, r.y + r.height);
    });
    if (currentRectangle) {
        ctx.fillStyle = 'white';
        ctx.fillRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
        ctx.lineWidth = 1;
        ctx.strokeRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
    }
    ctx.lineWidth = 1;
};

render();