Commit 059d8372 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Brush size as buttons

parent e3fef752
......@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
### Changed
- Drawn shapes are now more or less wide according to zoom level
- Color selector has now presets + modal selector
- Brush size selector are now four buttons
## 0.1.1
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><defs><linearGradient id="rnb" x1="0" y1="1" x2="1" y2="0"><stop offset="2%" stop-color="red"/><stop offset="18%" stop-color="fuchsia"/><stop offset="34%" stop-color="blue"/><stop offset="50%" stop-color="cyan"/><stop offset="66%" stop-color="lime"/><stop offset="82%" stop-color="yellow"/><stop offset="98%" stop-color="red"/></linearGradient></defs><rect width="100" height="100" fill="url(#rnb)"/></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="100"
height="100"
id="svg21"
sodipodi:docname="rainbow.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<metadata
id="metadata25">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview23"
showgrid="false"
inkscape:zoom="2.36"
inkscape:cx="-17.584746"
inkscape:cy="50"
inkscape:window-x="0"
inkscape:window-y="452"
inkscape:window-maximized="1"
inkscape:current-layer="svg21" />
<defs
id="defs17">
<linearGradient
id="rnb"
x1="0"
y1="100"
x2="100"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0,-100)">
<stop
offset="2%"
stop-color="red"
id="stop2" />
<stop
offset="18%"
stop-color="fuchsia"
id="stop4" />
<stop
offset="34%"
stop-color="blue"
id="stop6" />
<stop
offset="50%"
stop-color="cyan"
id="stop8" />
<stop
offset="66%"
stop-color="lime"
id="stop10" />
<stop
offset="82%"
stop-color="yellow"
id="stop12" />
<stop
offset="98%"
stop-color="red"
id="stop14" />
</linearGradient>
</defs>
<rect
width="100"
height="100"
id="rect19"
style="fill:url(#rnb)"
x="0"
y="-100"
transform="rotate(90)" />
</svg>
......@@ -74,13 +74,18 @@
<div id="map" class="map-no-bottom"></div>
<div id="bottom-menu" class="menu-dark row m-0">
<div id="color-picker-line" class="col-12 col-md-6 col-lg-4 offset-lg-2 d-flex justify-content-around align-items-center"></div>
<div class="col-9 col-md-4 col-lg-3 d-flex justify-content-around align-items-center">
<input id="pensize" type="range" min="1" max="40" style="width: 100%; max-width: 250px" />
<div id="color-picker-line" class="col-12 col-sm-6 col-lg-4 offset-lg-2 d-flex justify-content-around align-items-center"></div>
<div class="col-9 col-sm-4 col-lg-3 d-flex justify-content-around align-items-center">
<div id="brush-sizes" class="btn-group btn-group-lg" role="group" aria-label="Brush size">
<button type="button" class="btn btn-dark" data-size="3"><i class="fa fa-circle" style="font-size: 8px" title="Very small"></i></button>
<button type="button" class="btn btn-dark" data-size="8"><i class="fa fa-circle" style="font-size: 13px" title="Small"></i></button>
<button type="button" class="btn btn-dark" data-size="15"><i class="fa fa-circle" style="font-size: 18px" title="Medium"></i></button>
<button type="button" class="btn btn-dark" data-size="25"><i class="fa fa-circle" style="font-size: 23px" title="Large"></i></button>
</div>
</div>
<div class="col-3 col-md-2 col-lg-1 d-flex justify-content-around align-items-center">
<div class="col-3 col-sm-2 col-lg-1 d-flex justify-content-between align-items-center">
<button id="btn-undo" class="btn btn-dark btn-lg" type="button" disabled>
<i class="fa fa-undo" title="Undo"></i>
</button>
......
......@@ -19,7 +19,7 @@ let map, sid, shapesLayer, tmpShapeCoordinates,
useBackgroundFromURL;
const drawOpts = {
color: "#f0240f",
penSize: 20,
penSize: 10,
opacity: 1
};
const shapesLayersById = {};
......@@ -29,7 +29,7 @@ const shapesLayersWithoutId = {};
const socket = io();
let domBtnColor;
const domLoader = document.getElementById("loader");
const domInputPenSize = document.getElementById("pensize");
const domBrushSizes = document.getElementById("brush-sizes");
const domColorPicker = document.getElementById("color-picker");
const domColorPickerLine = document.getElementById("color-picker-line");
const domBtnUndo = document.getElementById("btn-undo");
......@@ -433,7 +433,6 @@ function changeMode(mode) {
[ map.dragging, map.doubleClickZoom, map.scrollWheelZoom, map.touchZoom ].forEach(h => h.disable());
map.zoomControl.remove();
domBtnColor.style.color = drawOpts.color;
domInputPenSize.value = drawOpts.penSize;
enableDrawing();
break;
}
......@@ -472,8 +471,17 @@ function undoShapeDrawn() {
/**
* Change pen size
*/
function setPenSize(e) {
drawOpts.penSize = Math.round(e.target.value);
function setPenSize(size) {
drawOpts.penSize = parseInt(size);
for(let i=0; i < domBrushSizes.childNodes.length; i++) {
const domBtn = domBrushSizes.childNodes[i];
if(domBtn.nodeName.toLowerCase() === "button") {
const size = parseInt(domBtn.getAttribute("data-size"));
if(size === drawOpts.penSize) { domBtn.classList.add("active"); }
else { domBtn.classList.remove("active"); }
}
}
}
/**
......@@ -504,7 +512,7 @@ function setColor(color) {
function updateSharingLinks() {
document.getElementById("share-url").value = location.href;
document.getElementById("share-courriel").href = `mailto:?subject=${encodeURIComponent("Sketch map made with Gribrouillon")}&body=${encodeURIComponent("Link : "+location.href)}`;
document.getElementById("share-sms").href = `sms:?body=${encodeURIComponent("Sketch map made with Gribrouillon : "+location.href)}`;
document.getElementById("share-sms").href = `sms:?&body=${encodeURIComponent("Sketch map made with Gribrouillon : "+location.href)}`;
document.getElementById("share-qrcode").innerHTML = new QRCode({
content: location.href,
width: 200,
......@@ -641,7 +649,7 @@ function hideLeftMenu() {
* Read all params from URL
*/
function readUrlParameters() {
return Object.fromEntries(
return ["?", ""].includes(location.search.trim()) ? {} : Object.fromEntries(
location.search
.replace(/^\?/, '')
.split("&")
......@@ -682,8 +690,6 @@ function init() {
// Buttons
document.getElementById("btn-valid").addEventListener("click", () => changeMode("nav"));
document.getElementById("btn-edit").addEventListener("click", () => changeMode("draw"));
domInputPenSize.addEventListener("change", setPenSize);
domInputPenSize.addEventListener("input", setPenSize);
domBtnUndo.addEventListener("click", undoShapeDrawn);
$("#sharingModal").on("show.bs.modal", updateSharingLinks);
$("#backgroundModal").on("show.bs.modal", updateBackgroundsList);
......@@ -694,6 +700,21 @@ function init() {
document.execCommand("copy");
});
// Brush sizes
let setActive = true;
for(let i=0; i < domBrushSizes.childNodes.length; i++) {
const domBtn = domBrushSizes.childNodes[i];
if(domBtn.nodeName.toLowerCase() === "button") {
const size = parseInt(domBtn.getAttribute("data-size"));
if(setActive) {
domBtn.classList.add("active");
setActive = false;
drawOpts.penSize = size;
}
domBtn.addEventListener("click", () => setPenSize(size));
}
}
// Color picker
COLORS_BASE.forEach(color => {
const domBtn = document.createElement("button");
......
......@@ -159,6 +159,11 @@
/* Color picker */
.btn-dark:not(:disabled):not(.disabled).active {
background-color: #797f83;
border-color: #797f83;
}
.btn-color {
border: 1px solid white;
border-radius: 18px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment