{"id":19441507,"url":"https://github.com/antix-development/diagram","last_synced_at":"2025-02-25T07:42:13.899Z","repository":{"id":212636143,"uuid":"701967579","full_name":"Antix-Development/diagram","owner":"Antix-Development","description":"A simple HTML canvas that you can draw stuff on.","archived":false,"fork":false,"pushed_at":"2023-12-15T09:54:51.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-07T21:51:55.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Antix-Development.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-08T05:21:08.000Z","updated_at":"2023-10-08T05:22:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"edc0ea80-d806-4aef-ac24-44e467bb7beb","html_url":"https://github.com/Antix-Development/diagram","commit_stats":null,"previous_names":["antix-development/diagram"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antix-Development%2Fdiagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antix-Development%2Fdiagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antix-Development%2Fdiagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Antix-Development%2Fdiagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Antix-Development","download_url":"https://codeload.github.com/Antix-Development/diagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240625424,"owners_count":19831320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T15:35:54.362Z","updated_at":"2025-02-25T07:42:13.859Z","avatar_url":"https://github.com/Antix-Development.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/antixdevelu"],"categories":[],"sub_categories":[],"readme":"\u003c!--\nDiagram - A simple HTML canvas that you can draw stuff on.\nCopyright (c) Cliff Earl, Antix Development, 2023.\nMIT \"plus\" License:\n--\u003e\n\n\u003cdiv align=\"justify\"\u003e\n\n# Diagram\n\n![diagram](diagram.png)\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### What's New with it?\n\nv1.0.0 (8 Oct 2023)\n\n- Initial public release\n\n\u003c!-- \u003cdetails\u003e\u003csummary\u003ev?.?.? (dd mmm yyyy)\u003c/summary\u003e\u003cp\u003e\n- detail.\n- detail.\n\u003c/p\u003e\u003c/details\u003e --\u003e\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### Why is it?\n\nWhilst performing JavaScript experiments, more often than not, I find myself creating an HTML canvas and drawing stuff to it. I do this every time.. from scratch.\n\nMost recently I was experimenting with 2d ray casting and was converting some C++ code to JavaScript and I noticed the programmer ([javidx9](https://github.com/OneLoneCoder)) always uses his own very cool 2d game engine, the olcPixelGameEngine to draw stuff into a window.\n\nThe code I was converting had loads of function calls to things like `drawLine()`, and `fillRect()`, which looked easy to use.. way more easy than buggering around with 2d drawing contexts constantly, as is usually the case.\n\nSo I decided to create my own little \"thing\" that would operate in a similar way, thus allowing me to never have to code yet another canvas drawing system!\n\nWhy the heck didn't I do this years ago?!\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### What is it?\n\nDiagram is basically a managed HTML canvas on which you can draw lines, rectangles, circles, text, and grids. In time it may morph into something more, but for now it pretty much ticks all of my own boxes.\n\nIf you end up using Diagram, please let me know, I would love to see what you are using it for. Maybe you would also consider [buying me a coffee](https://www.buymeacoffee.com/antixdevelu) :)\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### What do I do with it?\n\nReally you just include the script, create a diagram, then begin drawing stuff to it. Sounds too easy to be true huh? Well let's look at what functionality diagram provides...\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### Core methods\n\nDiagram contains the following core methods...\n\n\u003cbr\u003e\n\n`diagram(x, y, width, height)`\n\nCreates a new diagram with the given dimensions, absolutely positioned at the given coordinates.\n\nThe diagram will be prepended to the document body and will have a high `zIndex` value meaning that it \"should\" appear on top of all other HTML elements.\n\nThe diagrams default font will be set to \"Courier New\" with a size of 14 pixels.\n\n\u003cbr\u003e\n\n`clear(color = '111')`\n\nClear the entire diagram using the given color.\n\n\u003cbr\u003e\n\n`drawLine(x1, y1, x2, y2, color = 'ccc', lineWidth = 1, pattern = [])`\n\nDraw a line between the two given coordinate pairs, using the given color, line width, and pattern.\n\n\u003cbr\u003e\n\n`drawRect(x, y, width, height, strokeColor = 'ce9', lineWidth = 1, pattern = [])`\n\nDraw an outlined rectangle using the given coordinates, dimensions, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`fillRect(x, y, width, height, color = '563')`\n\nDraw a filled rectangle using the given coordinates, dimensions, and color.\n\n\u003cbr\u003e\n\n`outlineRect(x, y, width, height, fillColor = '563', strokeColor = 'ce9', lineWidth = 1, pattern = [])`\n\nDraw a filled AND outlined rectangle at the given coordinates, using the given dimensions, colors, line width, and pattern.\n\n\u003cbr\u003e\n\n`plotPixel(x, y, color = 'ddd')`\n\nPlot a single pixel at the given coordinates, using the given color.\n\n\u003cbr\u003e\n\n`drawCircle(x, y, radius, strokeColor = '8bd', lineWidth = 1, pattern = [])`\n\nDraw an outlined circle at the given coordinates, using the given radius, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`fillCircle(x, y, radius, fillColor = '578')`\n\nDraw a filled circle at the given coordinates, using the given radius and color.\n\n\u003cbr\u003e\n\n`outlineCircle(x, y, radius, fillColor = '578', strokeColor = '8bd', lineWidth = 1, pattern = [])`\n\nDraw a filled AND outlined circle at the given coordinates, using the given radius, colors, line width, and pattern.\n\n\u003cbr\u003e\n\n`drawEllipse(x, y, radiusX, radiusY, strokeColor = 'ddd', lineWidth = 1, pattern = [])`\n\nDraw an outlined ellipse at the given coordinates, using the given radii, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`fillEllipse(x, y, radiusX, radiusY, fillColor = '777')`\n\nDraw a filled ellipse at the given coordinates, using the given radii and color.\n\n\u003cbr\u003e\n\n`outlineEllipse(x, y, radiusX, radiusY, fillColor = '777', strokeColor = 'ddd', lineWidth = 1, pattern = [])`\n\nDraw a filled AND outlined ellipse at the given coordinates, using the given radii, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`drawPoly(vertices, strokeColor = 'f9e', lineWidth = 1, pattern = [])`\n\nDraw an outlined polygon using the given vertices, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`fillPoly(vertices, fillColor = '857')`\n\nDraw an outlined polygon using the given vertices, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`outlinePoly(vertices, fillColor = '857', strokeColor = 'f9e', lineWidth = 1, pattern = [])`\n\nDraw an outlined polygon using the given vertices, color, line width, and pattern.\n\n\u003cbr\u003e\n\n`setFont(name, height, style = 'normal')`\n\nSet the font using the given name, height, and style.\n\n\u003cbr\u003e\n\n`drawText(text, x, y, color = 'ddd', lineWidth = 1, pattern = [])`\n\nDraw the given text (outlined) at the given coordinates, using the given color, line width, and pattern.\n\n\u003cbr\u003e\n\n`fillText(text, x, y, color = 'ddd')`\n\nDraw the given text (filled) at the given coordinates in the given color.\n\n\u003cbr\u003e\n\n`outlineText(text, x, y, fillColor = 'ddd', strokeColor = 'fff', lineWidth = 1, pattern = [])`\n\nDraw the given text (filled AND outlined) at the given coordinates, using the given colors, line width, and pattern.\n\n\u003cbr\u003e\n\n`overlayGrid(cellWidth, cellHheight, color = '444', pattern = [])`\n\nDraw a grid over the diagram using the given vector which contains the width and height of each grid cell, using the given color, and pattern.\n\n\u003cbr\u003e\n\n\n### Utility methods\n\n`setArc(x, y, radius)`\n\nCreate an arc at the given coordinates, using the given radius.\n\n\u003cbr\u003e\n\n`buildPath(path)`\n\nCreate a path using the given path coordinate pairs.\n\n\u003cbr\u003e\n\n`setFill(color)`\n\nSet diagram drawing context fill color to the given color.\n\n\u003cbr\u003e\n\n`setStroke(color)`\n\nSet diagram drawing context stroke color to the given color.\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### Event handlers\n\nDiagram handles a bunch of events and allows you to set code to be called when said events are triggered.\n\nDiagram handles the following events...\n\n\u003cbr\u003e\n\n`handleKeyDown(func)`\n\nSet keyboard down event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handleKeyUp(func)`\n\nSet keyboard up event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handlePointerMove(func)`\n\nSet pointer move event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handlePointerUp(func)`\n\nSet pointer up event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handlePointerDown(func)`\n\nSet pointer down event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handlePointerClick(func)`\n\nSet pointer click event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handlePointerEnter(func)`\n\nSet pointer enter event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\n`handlePointerLeave(func)`\n\nSet pointer leave event handler to execute the given function when triggered.\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### Getters\n\nDialog maintains a state for input events and those states can be read using the following methods...\n\n\u003cbr\u003e\n\n`keyHeld(key)`\n\nGet held state for given key.\n\nThe `key` parameter should be an ascii string in lower case. Valid keys on my keyboard are...\n\n'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '`', '~', '!', '@', '#', '$', '%', '^' '\u0026', '*', '(', ')', '-', '_', '+', '=', '[', ']', '{', '}', '\u003c', '\u003e', ',', '.', '/', '?', 'capslock', 'os', 'contextmenu', 'printscreen', 'scrolllock', 'pause', 'insert', 'home', 'pageup', 'delete', 'end',  'pagedown', 'arrowleft', 'arrowright', 'arrowup', 'arrowdown', 'clear', 'numlock', 'enter', 'backspace', 'escape', 'nediaplaypause', 'audiovolumemute', 'audiovolumeup', 'audiovolumedown', 'launchmail', 'launchapplication2', 'shift', 'ctrl', 'alt', 'enter', 'f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', and 'f12'.\n\n\u003cbr\u003e\n\n`shiftHeld()`\n\nGet held state of SHIFT key.\n\n\u003cbr\u003e\n\n`ctrlHeld()`\n\nGet held state of CTRL key.\n\n\u003cbr\u003e\n\n`altHeld()`\n\nGet held state of ALT key.\n\n\u003cbr\u003e\n\n`getMouseX()`\n\nGet the current x-axis coordinate of the pointer.\n\n\u003cbr\u003e\n\n`getMouseY()`\n\nGet the current y-axis coordinate of the pointer.\n\n\u003cbr\u003e\n\n`getMousePosition()`\n\nGet a vector representing the current pointer coordinates.\n\n\u003cbr\u003e\n\n`buttonHeld(button)`\n\nGet held state of the given button. Valid buttons are...\n\n0 - Main button pressed, usually the left button or the un-initialized state.\n\n1 - Auxiliary button pressed, usually the wheel button or the middle button (if present).\n\n2 - Secondary button pressed, usually the right button.\n\n3 - Fourth button, typically the Browser Back button.\n\n4 - Fifth button, typically the Browser Forward button.\n\n\u003cbr\u003e\n\u003chr\u003e\n\n### 2d vectors\n\nDiagram also supports 2d vectors and provides the followinf methods to create and manipulate them...\n\n\u003cbr\u003e\n\n`vf2d(x = 0, y = 0)`\n\nCreate a new floating point vector, using the given coordinates. Numbers will be rounded using `Math.round()`.\n\n\u003cbr\u003e\n\n`vi2d(x = 0, y = 0)`\n\nCreate a new integer vector, using the given coordinates.\n\n\u003cbr\u003e\n\n`vmag(v)`\n\nGet magnitude of the given vector.\n\n\u003cbr\u003e\n\n`vnorm(v)`\n\nNormalize the given vector.\n\n\u003cbr\u003e\n\n`vangle(a, b)`\n\nGet angle (in radians) between the two given vectors.\n\n\u003cbr\u003e\n\n`vadd(a, b)`\n\nAdd the two given vectors.\n\n\u003cbr\u003e\n\n`vsubtract(a, b)`\n\nSubtract the given vector (b) from the given vector (a).\n\n\u003cbr\u003e\n\n`vmultiply(v, m)`\n\nMultiply the given vector by the given multiplier.\n\n\u003cbr\u003e\n\n`vdivide(v, d)`\n\nDivide the given vector by the given divisor.\n\n\u003cbr\u003e\n\n`vdot(a, b)`\n\nCalculate the dot product of the two given vectors.\n\n\u003cbr\u003e\n\n`vcross(a, b)`\n\nCalculate the cross product of the two given vectors.\n\n\u003cbr\u003e\n\n`vdistance(a, b)`\n\nGet the distance between the two given vectors.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantix-development%2Fdiagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantix-development%2Fdiagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantix-development%2Fdiagram/lists"}