diff --git a/src/main.js b/src/main.js index 8980fe9..28e43ad 100644 --- a/src/main.js +++ b/src/main.js @@ -17,20 +17,31 @@ let maxSmoothAngle = 0.6; let tools = { select: { icon: "/assets/select.svg", + properties: {} }, transform: { icon: "/assets/transform.svg", + properties: {} }, draw: { - icon: "/assets/draw.svg" + icon: "/assets/draw.svg", + properties: { + "lineWidth": { + type: "number", + // default: 5, + label: "Line Width" + } + } }, rectangle: { - icon: "/assets/rectangle.svg" + icon: "/assets/rectangle.svg", + properties: {} }, polygon: { - icon: "assets/polygon.svg" + icon: "assets/polygon.svg", + properties: {} } } @@ -47,7 +58,14 @@ let context = { "#00FFFF", "#0000FF", "#FF00FF", - ] + ], + lineWidth: 5, +} + +let config = { + shortcuts: { + playAnimation: " ", + } } function uuidv4() { @@ -68,6 +86,25 @@ function getMousePos(canvas, evt) { }; } +function getProperty(context, path) { + let pointer = context; + let pathComponents = path.split('.') + for (let component of pathComponents) { + pointer = pointer[component] + } + return pointer +} + +function setProperty(context, path, value) { + let pointer = context; + let pathComponents = path.split('.') + let finalComponent = pathComponents.pop() + for (let component of pathComponents) { + pointer = pointer[component] + } + pointer[finalComponent] = value +} + class Curve { constructor(cp1x, cp1y, cp2x, cp2y, x, y) { this.cp1x = cp1x; @@ -87,12 +124,13 @@ class Frame { } class Shape { - constructor(startx, starty, fillStyle, strokeStyle, filled=true, stroked=true) { + constructor(startx, starty, context, filled=true, stroked=true) { this.startx = startx; this.starty = starty; this.curves = []; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; + this.fillStyle = context.fillStyle; + this.strokeStyle = context.strokeStyle; + this.lineWidth = context.lineWidth this.filled = filled; this.stroked = stroked; } @@ -105,8 +143,6 @@ class Shape { let points = [{x: this.startx, y: this.starty}] points = points.concat(this.curves) let newpoints = simplifyPolyline(points, 10, false) - console.log(points.length) - console.log(newpoints.length) this.curves = [] let lastpoint = newpoints.shift() let midpoint @@ -115,7 +151,6 @@ class Shape { this.curves.push(new Curve(midpoint.x, midpoint.y,midpoint.x,midpoint.y,point.x,point.y)) lastpoint = point } - console.log(this.curves) } else if (mode=="smooth") { let error = 30; let points = [[this.startx, this.starty]] @@ -160,6 +195,7 @@ class GraphicsObject { } for (let shape of this.frames[this.currentFrame].shapes) { ctx.beginPath() + ctx.lineWidth = shape.lineWidth ctx.moveTo(shape.startx, shape.starty) for (let curve of shape.curves) { ctx.bezierCurveTo(curve.cp1x, curve.cp1y, curve.cp2x, curve.cp2y, curve.x, curve.y) @@ -180,36 +216,25 @@ class GraphicsObject { } } addShape(shape) { - // this.shapes.push(shape) this.frames[this.currentFrame].shapes.push(shape) } } let root = new GraphicsObject(); -// let shp = new Shape(100,100,'blue', 'black') -// shp.addCurve(new Curve(150,150,150,150,200,100)) -// root.addShape(shp) context.activeObject = root async function greet() { // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/ greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value }); - // splitPane(rootPane, 50, true) } window.addEventListener("DOMContentLoaded", () => { - // greetInputEl = document.querySelector("#greet-input"); - // greetMsgEl = document.querySelector("#greet-msg"); rootPane = document.querySelector("#root") rootPane.appendChild(createPane(toolbar())) rootPane.addEventListener("mousemove", (e) => { mouseEvent = e; }) - // document.querySelector("#greet-form").addEventListener("submit", (e) => { - // e.preventDefault(); - // greet(); - // }); let [_toolbar, panel] = splitPane(rootPane, 10, true) let [_stage, _infopanel] = splitPane(panel, 70, false, createPane(infopanel())) }); @@ -218,6 +243,12 @@ window.addEventListener("resize", () => { updateLayout(rootPane) }) +window.addEventListener("keypress", (e) => { + if (e.key == config.shortcuts.playAnimation) { + console.log("Spacebar pressed") + } +}) + function stage() { let stage = document.createElement("canvas") let scroller = document.createElement("div") @@ -232,10 +263,9 @@ function stage() { switch (mode) { case "draw": context.mouseDown = true - context.activeShape = new Shape(mouse.x, mouse.y, context.fillStyle, context.strokeStyle, true, true) + context.activeShape = new Shape(mouse.x, mouse.y, context, true, true) context.activeObject.addShape(context.activeShape) context.lastMouse = mouse - console.log(stage) break; default: @@ -348,7 +378,31 @@ function toolbar() { function infopanel() { let panel = document.createElement("div") - + panel.className = "infopanel" + let input; + let label; + let span; + // for (let i=0; i<10; i++) { + for (let property in tools[mode].properties) { + let prop = tools[mode].properties[property] + label = document.createElement("label") + label.className = "infopanel-field" + span = document.createElement("span") + span.className = "infopanel-label" + span.innerText = prop.label + input = document.createElement("input") + input.className = "infopanel-input" + input.value = getProperty(context, property) + input.addEventListener("input", () => { + console.log(input.value) + if (!isNaN(input.value) && input.value > 0) { + setProperty(context, property, input.value) + } + }) + label.appendChild(span) + label.appendChild(input) + panel.appendChild(label) + } return panel } @@ -390,7 +444,6 @@ function splitPane(div, percent, horiz, newPane=undefined) { div1.className = "panecontainer" div2.className = "panecontainer" - console.log(div) div1.appendChild(content) if (newPane) { div2.appendChild(newPane) @@ -433,13 +486,11 @@ function updateLayout(element) { let children = element.children if (children.length != 2) return; if (element.className == "horizontal-grid") { - console.log(rect) children[0].style.width = `${rect.width * percent / 100}px` children[1].style.width = `${rect.width * (100 - percent) / 100}px` children[0].style.height = `${rect.height}px` children[1].style.height = `${rect.height}px` } else if (element.className == "vertical-grid") { - console.log("vert") children[0].style.height = `${rect.height * percent / 100}px` children[1].style.height = `${rect.height * (100 - percent) / 100}px` children[0].style.width = `${rect.width}px` diff --git a/src/styles.css b/src/styles.css index ada3709..a14e68a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -139,7 +139,7 @@ button { .horizontal-grid, .vertical-grid { display: flex; - gap: 10px; + gap: 5px; background-color: #0f0f0f; width: 100%; height: 100%; @@ -173,7 +173,10 @@ button { display: flex; flex-direction: row; gap: 10px; + padding: 5px; flex-wrap: wrap; + align-content: flex-start; + justify-content: space-around; } .toolbtn { width: calc( 3 * var(--lineheight) ); @@ -203,4 +206,24 @@ button { width: 100%; height: 100%; background-color: #3f3f3f; + display: flex; + box-sizing: border-box; + gap: calc( var(--lineheight) / 2 ); + padding: calc( var(--lineheight) / 2 ); + flex-direction: column; + flex-wrap: wrap; + align-content: flex-start; +} +.infopanel-field { + width: 300px; + height: var(--lineheight); + display: flex; + flex-direction: row; +} +.infopanel-label { + flex: 1 1 50%; +} +.infopanel-input { + flex: 1 1 50%; + width: 50%; } \ No newline at end of file