flo-bit.dev / mandala
[READ-ONLY] Mirror of https://github.com/flo-bit/mandala. flo-bit.github.io/mandala/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

load settings with file, small fixes

author
Florian date (Mar 27, 2023, 4:53 PM +0200) commit c71306d9 parent 3c4ffcea
+125 -83
+125 -83
script.js
··· 83 83 mandalaDrawer.saveAsPNG(); 84 84 } 85 85 86 + if (event.key == "f" && (event.metaKey || event.ctrlKey)) { 87 + openFileModal(); 88 + } 89 + 90 + if (event.key == "b" && (event.metaKey || event.ctrlKey)) { 91 + openBrushModal(); 92 + } 93 + 86 94 if (event.key == "+" && (event.metaKey || event.ctrlKey)) { 87 95 event.preventDefault(); 88 96 view.zoom *= 1.1; ··· 118 126 }); 119 127 120 128 let mirrorButton = document.getElementById("mirror-button"); 121 - if (mandalaDrawer.mirror) { 122 - mirrorButton.classList.remove("is-light"); 123 - } else { 124 - mirrorButton.classList.add("is-light"); 125 - } 126 - 127 129 mirrorButton.addEventListener("click", function (e) { 128 130 mandalaDrawer.mirror = !mandalaDrawer.mirror; 129 131 if (mandalaDrawer.mirror) { ··· 134 136 }); 135 137 136 138 let simplifyButton = document.getElementById("simplify-button"); 137 - if (mandalaDrawer.simplify) { 138 - simplifyButton.classList.remove("is-light"); 139 - } else { 140 - simplifyButton.classList.add("is-light"); 141 - } 142 - 143 139 simplifyButton.addEventListener("click", function (e) { 144 140 mandalaDrawer.simplify = !mandalaDrawer.simplify; 145 141 if (mandalaDrawer.simplify) { ··· 150 146 }); 151 147 152 148 let brushColorInput = document.getElementById("brush-color-input"); 153 - brushColorInput.value = mandalaDrawer.brushColor; 154 - 155 149 brushColorInput.addEventListener("change", function (e) { 156 150 mandalaDrawer.brushColor = brushColorInput.value; 157 151 }); ··· 197 191 // exportJSONButton.addEventListener("click", mandalaDrawer.saveAsJSON); 198 192 199 193 let backgroundColorInput = document.getElementById("background-color-input"); 200 - backgroundColorInput.value = mandalaDrawer.backgroundColor; 201 - 202 194 backgroundColorInput.addEventListener("change", function (e) { 203 195 mandalaDrawer.backgroundColor = backgroundColorInput.value; 204 196 ··· 227 219 updateFilesList(mandalaDrawer); 228 220 } 229 221 222 + function updateUI(mandalaDrawer) { 223 + let brushSizeSlider = document.getElementById("brush-size-bar"); 224 + brushSizeSlider.value = mandalaDrawer.brushSizePercentage * 100; 225 + 226 + let brushSizeLabel = document.getElementById("brush-size-input"); 227 + brushSizeLabel.value = mandalaDrawer.brushSize; 228 + 229 + let rotationsSlider = document.getElementById("rotations-bar"); 230 + rotationsSlider.value = mandalaDrawer.rotationsPercentage * 100; 231 + 232 + let rotationsLabel = document.getElementById("rotations-input"); 233 + rotationsLabel.value = mandalaDrawer.rotations; 234 + 235 + let brushColorInput = document.getElementById("brush-color-input"); 236 + brushColorInput.value = mandalaDrawer.brushColor; 237 + 238 + let backgroundColorInput = document.getElementById("background-color-input"); 239 + backgroundColorInput.value = mandalaDrawer.backgroundColor; 240 + 241 + let mirrorButton = document.getElementById("mirror-button"); 242 + if (mandalaDrawer.mirror) { 243 + mirrorButton.classList.remove("is-light"); 244 + } else { 245 + mirrorButton.classList.add("is-light"); 246 + } 247 + 248 + let simplifyButton = document.getElementById("simplify-button"); 249 + if (mandalaDrawer.simplify) { 250 + simplifyButton.classList.remove("is-light"); 251 + } else { 252 + simplifyButton.classList.add("is-light"); 253 + } 254 + } 255 + 230 256 function updateFilesList(mandalaDrawer) { 231 257 let filesList = document.getElementById("files-list"); 232 258 filesList.innerHTML = ""; 233 259 234 - /* 235 - <div class="control columns is-mobile is-vcentered"> 236 - <div class="column is-narrow"> 237 - label class="label">export</label> 238 - </div> 239 - <div class="column"> 240 - <button class="button is-danger" id="save-button"> 241 - <span class="icon"> 242 - <i class="mdi mdi-file"></i> 243 - </span> 244 - 245 - <span>open</span> 246 - </button> 247 - </div> 248 - </div> 249 - */ 250 260 for (let file of mandalaDrawer.files) { 251 261 let columns = document.createElement("div"); 252 262 columns.classList.add("columns"); ··· 317 327 let brushSizeInput = document.getElementById("brush-size-input"); 318 328 let brushSizeBar = document.getElementById("brush-size-bar"); 319 329 320 - brushSizeBar.value = mandalaDrawer.brushSizePercentage * 100; 321 - brushSizeInput.value = mandalaDrawer.brushSize; 322 - 323 330 brushSizeBar.addEventListener("click", function (e) { 324 331 let brushSize = e.offsetX / brushSizeBar.offsetWidth; 325 332 mandalaDrawer.setPercentageBrushSize(brushSize); ··· 357 364 let rotationsInput = document.getElementById("rotations-input"); 358 365 let rotationsBar = document.getElementById("rotations-bar"); 359 366 360 - rotationsBar.value = mandalaDrawer.rotationsPercentage * 100; 361 - rotationsInput.value = mandalaDrawer.rotations; 362 - 363 367 rotationsBar.addEventListener("click", function (e) { 364 368 let rotations = e.offsetX / rotationsBar.offsetWidth; 365 369 mandalaDrawer.setPercentageRotations(rotations); ··· 407 411 constructor() { 408 412 this.tool = new Tool(); 409 413 410 - let json = localStorage.getItem("brush-settings"); 411 - let settings = json === null ? {} : JSON.parse(json); 412 - 413 414 this.path = undefined; 414 415 this.paths = undefined; 415 416 416 - this._simplify = settings.simplify ?? true; 417 - this._mirror = settings.mirror ?? true; 418 - 419 - this._brushColor = settings.brushColor ?? "#FF0000"; 420 - 421 417 this.minRotations = 0; 422 418 this.maxRotations = 32; 423 419 424 420 this.maxBrushSize = 15; 425 421 this.minBrushSize = 0.2; 426 422 427 - this.files = settings.files ?? []; 428 - 429 - this.rotations = settings.rotations ?? 8; 430 - this.brushSize = settings.brushSize ?? 1; 431 - 432 - this.backgroundColor = settings.backgroundColor ?? "#FFFFFF"; 423 + this.loadFiles(); 424 + this.loadFile(); 433 425 434 - console.log(this.files); 435 426 this.setupTool(); 436 427 } 437 428 ··· 476 467 this._brushSize = Math.round(brushSize * 10) / 10; 477 468 } 478 469 470 + calculateBrushSizePercentage() { 471 + let percentage = 472 + (this.brushSize - this.minBrushSize) / 473 + (this.maxBrushSize - this.minBrushSize); 474 + percentage = Math.max(0, percentage); 475 + percentage = Math.min(1, percentage); 476 + 477 + this.brushSizePercentage = percentage; 478 + } 479 + 479 480 setPercentageRotations(percentage) { 480 481 if (isNaN(percentage)) percentage = 0; 481 482 ··· 490 491 this.rotations = Math.round(rotations); 491 492 } 492 493 494 + calculateRotationsPercentage() { 495 + let percentage = 496 + (this.rotations - this.minRotations) / 497 + (this.maxRotations - this.minRotations); 498 + percentage = Math.max(0, percentage); 499 + percentage = Math.min(1, percentage); 500 + 501 + this.rotationsPercentage = percentage; 502 + } 503 + 493 504 set backgroundColor(color) { 494 505 this._backgroundColor = color; 495 506 view.element.style.backgroundColor = color; 496 - this.saveSettings(); 507 + this.saveFile(); 497 508 } 498 509 get backgroundColor() { 499 510 return this._backgroundColor; ··· 501 512 502 513 set mirror(mirror) { 503 514 this._mirror = mirror; 504 - this.saveSettings(); 515 + this.saveFile(); 505 516 } 506 517 get mirror() { 507 518 return this._mirror; 508 519 } 520 + 509 521 set rotations(rotations) { 510 522 this._rotations = rotations; 511 - let percentage = 512 - (rotations - this.minRotations) / (this.maxRotations - this.minRotations); 513 - percentage = Math.max(0, percentage); 514 - percentage = Math.min(1, percentage); 515 - 516 - this.rotationsPercentage = percentage; 517 - this.saveSettings(); 523 + this.calculateRotationsPercentage(); 524 + this.saveFile(); 518 525 } 519 526 get rotations() { 520 527 return this._rotations; 521 528 } 522 529 set simplify(simplify) { 523 530 this._simplify = simplify; 524 - this.saveSettings(); 531 + this.saveFile(); 525 532 } 526 533 get simplify() { 527 534 return this._simplify; 528 535 } 529 536 set brushColor(color) { 530 537 this._brushColor = color; 531 - this.saveSettings(); 538 + this.saveFile(); 532 539 } 533 540 get brushColor() { 534 541 return this._brushColor; 535 542 } 536 543 set brushSize(size) { 537 544 this._brushSize = size; 538 - let percentage = 539 - (size - this.minBrushSize) / (this.maxBrushSize - this.minBrushSize); 540 - percentage = Math.max(0, percentage); 541 - percentage = Math.min(1, percentage); 542 - 543 - this.brushSizePercentage = percentage; 544 - this.saveSettings(); 545 + this.calculateBrushSizePercentage(); 546 + this.saveFile(); 545 547 } 546 548 get brushSize() { 547 549 return this._brushSize; ··· 650 652 651 653 saveFile(name) { 652 654 let json = paper.project.exportJSON(); 653 - localStorage.setItem(name ?? "current-project", json); 655 + let wrapper = { 656 + json: json, 657 + backgroundColor: this.backgroundColor, 658 + brushColor: this.brushColor, 659 + brushSize: this.brushSize, 660 + mirror: this.mirror, 661 + rotations: this.rotations, 662 + simplify: this.simplify, 663 + }; 664 + 665 + localStorage.setItem(name ?? "current-project", JSON.stringify(wrapper)); 654 666 655 667 if (name !== undefined && !this.files.includes(name)) { 656 668 this.files.push(name); 657 - this.saveSettings(); 669 + this.saveFiles(); 658 670 } 659 671 } 660 672 661 673 loadFile(name) { 662 674 let json = localStorage.getItem(name ?? "current-project"); 663 - paper.project.importJSON(json); 675 + let wrapper = JSON.parse(json); 676 + 677 + paper.project.importJSON(wrapper.json); 678 + 679 + this.setSettings(wrapper); 664 680 } 665 681 666 682 removeFile(name) { 667 683 localStorage.removeItem(name); 668 684 this.files = this.files.filter((f) => f !== name); 669 - this.saveSettings(); 685 + this.saveFiles(); 670 686 } 671 687 672 688 undo() { ··· 677 693 this.saveFile(); 678 694 } 679 695 680 - saveSettings() { 696 + setSettings(settings) { 697 + this._simplify = settings.simplify ?? true; 698 + this._mirror = settings.mirror ?? true; 699 + 700 + this._brushColor = settings.brushColor ?? "#FF0000"; 701 + 702 + this._rotations = settings.rotations ?? 8; 703 + this.calculateRotationsPercentage(); 704 + this._brushSize = settings.brushSize ?? 1; 705 + this.calculateBrushSizePercentage(); 706 + 707 + this._backgroundColor = settings.backgroundColor ?? "#FFFFFF"; 708 + view.element.style.backgroundColor = this.backgroundColor; 709 + 710 + updateUI(this); 711 + } 712 + 713 + loadFiles() { 714 + let settings = localStorage.getItem("settings"); 715 + if (settings === null) return; 716 + 717 + settings = JSON.parse(settings); 718 + this.files = settings.files; 719 + } 720 + saveFiles() { 681 721 let settings = {}; 682 - settings.mirror = this.mirror; 683 - settings.simplify = this.simplify; 684 - settings.rotations = this.rotations; 685 - settings.brushSize = this.brushSize; 686 - settings.brushColor = this.brushColor; 687 - settings.backgroundColor = this.backgroundColor; 688 722 settings.files = this.files; 689 723 690 - localStorage.setItem("brush-settings", JSON.stringify(settings)); 724 + localStorage.setItem("settings", JSON.stringify(settings)); 691 725 } 692 726 } 693 727 ··· 705 739 706 740 function closeFileModal() { 707 741 closeModal(document.getElementById("file-modal")); 742 + } 743 + 744 + function openBrushModal() { 745 + openModal(document.getElementById("brush-modal")); 746 + } 747 + 748 + function closeBrushModal() { 749 + closeModal(document.getElementById("brush-modal")); 708 750 } 709 751 710 752 document.addEventListener("DOMContentLoaded", () => {