1/* global EVENTS, HELPER, POP, DRAW, LAYER, EL, HELP, LANG */ 2/* global WIDTH, HEIGHT, canvas_front, DRAW_TOOLS_CONFIG, canvas_grid, canvas_preview */ 3 4var GUI = new GUI_CLASS(); 5 6/** 7 * manages grapchic interface functionality: left/right sidebar actions 8 * 9 * @author toolpic.com 10 */ 11function GUI_CLASS() { 12 13 /** 14 * preview mini window size on right sidebar 15 */ 16 this.PREVIEW_SIZE = {w: 148, h: 100}; 17 18 /** 19 * last used menu id 20 */ 21 this.last_menu = ''; 22 23 /** 24 * grid dimnesions config 25 */ 26 this.grid_size = [50, 50]; 27 28 /** 29 * if grid is visible 30 */ 31 this.grid = false; 32 33 /** 34 * true if using transparecy, false if using white background 35 */ 36 this.TRANSPARENCY = true; 37 38 /** 39 * zoom level, original - 100%, can vary from 10% to 1000% 40 */ 41 this.ZOOM = 100; 42 43 /** 44 * visible part center coordinates, when zoomed in 45 */ 46 this.zoom_center = [50, 50]; 47 48 /** 49 * common image dimensions 50 */ 51 this.common_dimensions = [ 52 [640,480, '480p'], 53 [800,600, 'SVGA'], 54 [1024,768, 'XGA'], 55 [1280,720, 'hdtv, 720p'], 56 [1600,1200, 'UXGA'], 57 [1920,1080, 'Full HD, 1080p'], 58 [3840,2160, '4K UHD'], 59 //[7680,4320, '8K UHD'], 60 ]; 61 62 /** 63 * last color copy 64 */ 65 var COLOR_copy; 66 67 this.draw_helpers = function () { 68 var active_tool = HELPER.getCookie('active_tool'); 69 if(active_tool == '') 70 active_tool = DRAW.active_tool; 71 DRAW.active_tool = active_tool; 72 73 //left menu 74 var html = ''; 75 for (var i in DRAW_TOOLS_CONFIG) { 76 html += '<a title="' + DRAW_TOOLS_CONFIG[i].title + '"'; 77 html += ' style="background: #989898 url(\'img/' + DRAW_TOOLS_CONFIG[i].icon[0] + '\') no-repeat ' + DRAW_TOOLS_CONFIG[i].icon[1] + 'px ' + DRAW_TOOLS_CONFIG[i].icon[2] + 'px;"'; 78 if (DRAW_TOOLS_CONFIG[i].name == active_tool) 79 html += ' class="active trn"'; 80 else 81 html += ' class="trn"'; 82 html += ' onclick="return GUI.action(\'' + DRAW_TOOLS_CONFIG[i].name + '\');"'; 83 html += ' id="' + DRAW_TOOLS_CONFIG[i].name + '"'; 84 html += ' href="#"></a>' + "\n"; 85 } 86 document.getElementById("menu_left_container").innerHTML = html; 87 88 //draw colors 89 var html = ''; 90 var colors_data = [ 91 ['#ff0000', '#ff5b31', '#ffa500', '#ff007f', '#ff00ff'], //red 92 ['#00ff00', '#008000', '#7fff00', '#00ff7f', '#8ac273'], //green 93 ['#0000ff', '#007fff', '#37629c', '#000080', '#8000ff'], //blue 94 ['#ffff00', '#ffff80', '#ddd06a', '#808000', '#bcb88a'], //yellow 95 ['#ffffff', '#c0c0c0', '#808080', '#404040', '#000000'], //grey 96 ]; 97 for (var i in colors_data) { 98 for (var j in colors_data[i]) { 99 html += '<div style="background-color:' + colors_data[i][j] + ';" class="mini-color" onclick="GUI.set_color(this);"></div>' + "\n"; 100 } 101 html += '<div style="clear:both;"></div>' + "\n"; 102 } 103 document.getElementById("all_colors").innerHTML = html; 104 }; 105 106 this.autodetect_dimensions = function(){ 107 var canvas_wrapper = document.querySelector('#canvas_wrapper'); 108 var page_w = canvas_wrapper.clientWidth; 109 var page_h = canvas_wrapper.clientHeight; 110 var auto_size = false; 111 112 var save_resolution_cookie = HELPER.getCookie('save_resolution'); 113 if(save_resolution_cookie != ''){ 114 //load last saved resolution 115 save_resolution = 'Yes'; 116 var last_resolution = JSON.parse(save_resolution_cookie); 117 WIDTH = parseInt(last_resolution[0]); 118 HEIGHT = parseInt(last_resolution[1]); 119 } 120 else{ 121 //use largest possible 122 for(var i = this.common_dimensions.length-1; i >= 0; i--){ 123 if(this.common_dimensions[i][0] >page_w || this.common_dimensions[i][1] > page_h){ 124 //browser size is too small 125 continue; 126 } 127 WIDTH = this.common_dimensions[i][0]; 128 HEIGHT = this.common_dimensions[i][1]; 129 auto_size = true; 130 break; 131 } 132 133 if(auto_size == false) { 134 //screen size is smaller then 400x300 135 WIDTH = page_w - 5; 136 HEIGHT = page_h - 10; 137 if(page_w < 585){ 138 HEIGHT = HEIGHT - 15; 139 } 140 } 141 } 142 }; 143 144 this.draw_background = function (canvas, W, H, gap, force) { 145 if (this.TRANSPARENCY == false && force == undefined) { 146 canvas.beginPath(); 147 canvas.rect(0, 0, W, H); 148 canvas.fillStyle = "#ffffff"; 149 canvas.fill(); 150 return false; 151 } 152 if (gap == undefined) 153 gap = 10; 154 var fill = true; 155 for (var i = 0; i < W; i = i + gap) { 156 if (i % (gap * 2) == 0) 157 fill = true; 158 else 159 fill = false; 160 for (var j = 0; j < H; j = j + gap) { 161 if (fill == true) { 162 canvas.fillStyle = '#eeeeee'; 163 canvas.fillRect(i, j, gap, gap); 164 fill = false; 165 } 166 else 167 fill = true; 168 } 169 } 170 }; 171 172 this.draw_grid = function (gap_x, gap_y) { 173 if (this.grid == false) { 174 document.getElementById("canvas_grid").style.display = 'none'; 175 return false; 176 } 177 else { 178 document.getElementById("canvas_grid").style.display = ''; 179 canvas_grid.clearRect(0, 0, WIDTH, HEIGHT); 180 } 181 182 //size 183 if (gap_x != undefined && gap_y != undefined) 184 this.grid_size = [gap_x, gap_y]; 185 else { 186 gap_x = this.grid_size[0]; 187 gap_y = this.grid_size[1]; 188 } 189 gap_x = parseInt(gap_x); 190 gap_y = parseInt(gap_y); 191 if (gap_x < 2) 192 gap_x = 2; 193 if (gap_y < 2) 194 gap_y = 2; 195 for (var i = gap_x; i < WIDTH; i = i + gap_x) {
196 if (gap_x == 0) 197 break; 198 if (i % (gap_x * 5) == 0) //main lines 199 canvas_grid.strokeStyle = '#222222'; 200 else { 201 EL.line_dashed(canvas_grid, i, 0, i, HEIGHT, 3, '#888888'); 202 continue; 203 } 204 canvas_grid.beginPath(); 205 canvas_grid.moveTo(0.5 + i, 0); 206 canvas_grid.lineTo(0.5 + i, HEIGHT); 207 canvas_grid.stroke(); 208 } 209 for (var i = gap_y; i < HEIGHT; i = i + gap_y) { 210 if (gap_y == 0) 211 break; 212 if (i % (gap_y * 5) == 0) //main lines 213 canvas_grid.strokeStyle = '#222222'; 214 else { 215 EL.line_dashed(canvas_grid, 0, i, WIDTH, i, 3, '#888888'); 216 continue; 217 } 218 canvas_grid.beginPath(); 219 canvas_grid.moveTo(0, 0.5 + i); 220 canvas_grid.lineTo(WIDTH, 0.5 + i); 221 canvas_grid.stroke(); 222 } 223 }; 224 this.redraw_preview = function () { 225 canvas_preview.beginPath(); 226 canvas_preview.rect(0, 0, GUI.PREVIEW_SIZE.w, GUI.PREVIEW_SIZE.h); 227 canvas_preview.fillStyle = "#ffffff"; 228 canvas_preview.fill(); 229 this.draw_background(canvas_preview, GUI.PREVIEW_SIZE.w, GUI.PREVIEW_SIZE.h, 5); 230 231 //redraw preview area 232 canvas_preview.save(); 233 canvas_preview.scale(GUI.PREVIEW_SIZE.w / WIDTH, GUI.PREVIEW_SIZE.h / HEIGHT); 234 for(var i = LAYER.layers.length-1; i >=0; i--){ 235 if (LAYER.layers[i].visible == false) 236 continue; 237 canvas_preview.drawImage(document.getElementById(LAYER.layers[i].name), 0, 0, WIDTH, HEIGHT); 238 } 239 canvas_preview.restore(); 240 241 //active zone 242 var canvas_wrapper = document.querySelector('#canvas_wrapper'); 243 var visible_w = canvas_wrapper.clientWidth / GUI.ZOOM * 100; 244 var visible_h = canvas_wrapper.clientHeight / GUI.ZOOM * 100; 245
246 var mini_rect_w = GUI.PREVIEW_SIZE.w * visible_w / WIDTH; 247 var mini_rect_h = GUI.PREVIEW_SIZE.h * visible_h / HEIGHT; 248 249 //xx = (GUI.zoom_center[0] * WIDTH / 100 - visible_w*GUI.zoom_center[0]/100) * GUI.ZOOM / 100; 250 if(EVENTS.mouse.valid == true){ 251 //using exact position 252 mini_rect_x = GUI.zoom_center[0] * GUI.PREVIEW_SIZE.w / 100 - mini_rect_w * GUI.zoom_center[0] / 100; 253 mini_rect_y = GUI.zoom_center[1] * GUI.PREVIEW_SIZE.h / 100 - mini_rect_h * GUI.zoom_center[1] / 100; 254 } 255 else{ 256 //using center 257 mini_rect_x = GUI.zoom_center[0] * GUI.PREVIEW_SIZE.w / 100 - mini_rect_w / 2; 258 mini_rect_y = GUI.zoom_center[1] * GUI.PREVIEW_SIZE.h / 100 - mini_rect_h / 2; 259 } 260 261 //validate 262 mini_rect_x = Math.max(0, mini_rect_x); 263 mini_rect_y = Math.max(0, mini_rect_y); 264 mini_rect_w = Math.min(GUI.PREVIEW_SIZE.w-1, mini_rect_w); 265 mini_rect_h = Math.min(GUI.PREVIEW_SIZE.h-1, mini_rect_h); 266 if (mini_rect_x + mini_rect_w > GUI.PREVIEW_SIZE.w) 267 mini_rect_x = GUI.PREVIEW_SIZE.w - mini_rect_w ; 268 if (mini_rect_y + mini_rect_h > GUI.PREVIEW_SIZE.h) 269 mini_rect_y = GUI.PREVIEW_SIZE.h - mini_rect_h; 270 271 if(mini_rect_x == 0 && mini_rect_y == 0 && mini_rect_w == GUI.PREVIEW_SIZE.w -1 && mini_rect_h == GUI.PREVIEW_SIZE.h -1){ 272 //everything is visible 273 return false; 274 } 275 276 //draw selected area in preview canvas 277 canvas_preview.lineWidth = 1; 278 canvas_preview.beginPath(); 279 canvas_preview.rect(Math.round(mini_rect_x) + 0.5, Math.round(mini_rect_y) + 0.5, mini_rect_w, mini_rect_h); 280 canvas_preview.fillStyle = "rgba(0, 255, 0, 0.3)"; 281 canvas_preview.strokeStyle = "#00ff00"; 282 canvas_preview.fill(); 283 canvas_preview.stroke(); 284 return true; 285 }; 286 this.zoom = function (recalc, scroll) { 287 if (recalc != undefined) { 288 //zoom-in or zoom-out 289 if (recalc == 1 || recalc == -1) { 290 var step = 100; 291 if (this.ZOOM <= 110 && recalc < 0){ 292 step = 10; 293 } 294 if (this.ZOOM <= 90 && recalc > 0){ 295 step = 10; 296 } 297 if (this.ZOOM >= 100 && this.ZOOM < 300 && recalc == 1){ 298 this.ZOOM += 50; 299 } 300 else if (this.ZOOM <= 300 && this.ZOOM > 100 && recalc == -1){ 301 this.ZOOM -= 50; 302 } 303 else{ 304 this.ZOOM = this.ZOOM + recalc * step; 305 } 306 } 307 else { 308 //zoom using exact value 309 this.ZOOM = parseInt(recalc); 310 } 311 this.ZOOM = Math.max(this.ZOOM, 10); 312 GUI.redraw_preview(); 313 } 314 document.getElementById("zoom_nr").value = this.ZOOM+'%'; 315 document.getElementById("zoom_range").value = this.ZOOM; 316 317 //change scale and repaint 318 document.getElementById('canvas_back').style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; 319 document.getElementById('canvas_back').style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; 320 for (var i in LAYER.layers) { 321 document.getElementById(LAYER.layers[i].name).style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; 322 document.getElementById(LAYER.layers[i].name).style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; 323 } 324 document.getElementById('canvas_front').style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; 325 document.getElementById('canvas_front').style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; 326 327 document.getElementById('canvas_grid').style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; 328 document.getElementById('canvas_grid').style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; 329 330 //check main resize corners 331 if (this.ZOOM != 100) { 332 document.getElementById('resize-w').style.display = "none"; 333 document.getElementById('resize-h').style.display = "none"; 334 document.getElementById('resize-wh').style.display = "none"; 335 } 336 else { 337 document.getElementById('resize-w').style.display = "block"; 338 document.getElementById('resize-h').style.display = "block"; 339 document.getElementById('resize-wh').style.display = "block"; 340 } 341 342 if (scroll != undefined){ 343 EVENTS.scroll_window(); 344 } 345 this.redraw_preview(); 346 return true; 347 }; 348 349 this.zoom_auto = function(only_increase){ 350 var canvas_wrapper = document.querySelector('#canvas_wrapper'); 351 var page_w = canvas_wrapper.clientWidth; 352 var page_h = canvas_wrapper.clientHeight; 353 354 var best_width = page_w / WIDTH * 100; 355 var best_height = page_h / HEIGHT * 100; 356 var best_zoom = Math.floor(Math.min(best_width, best_height)); 357 if(only_increase != undefined && best_zoom > 100){ 358 return false; 359 } 360 this.zoom(Math.min(best_width, best_height), true); 361 }; 362 363 this.update_attribute = function (object, next_value) { 364 var max_value = 999; 365 366 for (var k in this.action_data().attributes) { 367 if (k != object.id) 368 continue; 369 if (this.action_data().attributes[k] === true || this.action_data().attributes[k] === false) { 370 //true / false 371 var value; 372 if (next_value == 0) 373 value = true; 374 else 375 value = false; 376 //save 377 this.action_data().attributes[k] = value; 378 this.show_action_attributes(); 379 } 380 else if (typeof this.action_data().attributes[k] == 'object') { 381 //select 382 383 var selected = object.options[object.selectedIndex]; 384 var value = selected.getAttribute('data-value'); 385 386 var key = k.replace("_values", ""); 387 this.action_data().attributes[key] = value; 388 } 389 else if (this.action_data().attributes[k][0] == '#') { 390 //color 391 var key = k.replace("_values", ""); 392 this.action_data().attributes[key] = object.value; 393 } 394 else { 395 //numbers 396 if (next_value != undefined) { 397 var old_value = parseInt(this.action_data().attributes[k]); 398 if (next_value > 0) { 399 //increase 400 if (old_value >= 100) 401 object.value = old_value + 50; 402 else if (old_value >= 10) 403 object.value = old_value + 10; 404 else if (old_value >= 5) 405 object.value = old_value + 5; 406 else 407 object.value = old_value + 1; 408 } 409 else if (next_value < 0) { 410 //decrease 411 if (old_value > 100) 412 object.value = old_value - 50; 413 else if (old_value > 10) 414 object.value = old_value - 10; 415 else if (old_value > 5) 416 object.value = old_value - 5; 417 else 418 object.value = old_value - 1; 419 } 420 421 if (object.value < 1) 422 object.value = 1; 423 if (object.value > max_value) 424 object.value = max_value; 425 } 426 else { 427 if (object.value.length == 0) 428 return false; 429 object.value = parseInt(object.value); 430 object.value = Math.abs(object.value); 431 if (object.value == 0 || isNaN(object.value) || value > max_value) 432 object.value = this.action_data().attributes[k]; 433 } 434 if (k == 'power' && object.value > 100) 435 object.value = 100; 436 437 //save 438 this.action_data().attributes[k] = object.value; 439 440 document.getElementById(k).value = object.value; 441 } 442 if (this.action_data().on_update != undefined){ 443 DRAW[this.action_data().on_update](object.value); 444 } 445 } 446 447 //custom 448 if(DRAW.active_tool == 'erase'){ 449 var strict = this.action_data().attributes.strict; 450 var is_circle = GUI.action_data().attributes.circle; 451 452 if(is_circle == false){ 453 //hide strict controlls 454 document.getElementById('strict').style.display = 'none'; 455 } 456 else{ 457 //show strict controlls 458 document.getElementById('strict').style.display = 'block'; 459 } 460 } 461 }; 462 463 this.action = function (key) { 464 DRAW[key]('init', {valid: true}); 465 if (DRAW.active_tool == key) 466 return false; 467 468 //change 469 if (DRAW.active_tool != '') 470 document.getElementById(DRAW.active_tool).className = ""; 471 DRAW.active_tool = key; 472 document.getElementById(key).className = "active trn"; 473 this.show_action_attributes(); 474 475 //save for next session
476 HELPER.setCookie('active_tool', key); 477 478 return false; 479 }; 480 481 this.action_data = function () { 482 for (var i in DRAW_TOOLS_CONFIG) { 483 if (DRAW_TOOLS_CONFIG[i].name == DRAW.active_tool) 484 return DRAW_TOOLS_CONFIG[i]; 485 } 486 }; 487 488 /** 489 * used strings: 490 * "Fill", "Square", "Circle", "Radial", "Anti aliasing", "Circle", "Strict", "Burn" 491 */ 492 this.show_action_attributes = function () { 493 html = ''; 494 for (var k in this.action_data().attributes) { 495 var title = k[0].toUpperCase() + k.slice(1); 496 title = title.replace("_", " "); 497 if (this.action_data().attributes[k + "_values"] != undefined) 498 continue; 499 if (this.action_data().attributes[k] === true || this.action_data().attributes[k] === false) { 500 //true / false 501 if (this.action_data().attributes[k] == true) 502 html += '<div onclick="GUI.update_attribute(this, 1)" style="background-color:#5680c1;" class="attribute-area trn" id="' + k + '">' + title + '</div>'; 503 else 504 html += '<div onclick="GUI.update_attribute(this, 0)" class="attribute-area trn" id="' + k + '">' + title + '</div>'; 505 } 506 else if (typeof GUI.action_data().attributes[k] == 'object') { 507 //drop down select 508 html += '<select style="font-size:11px;margin-bottom:10px;" onchange="GUI.update_attribute(this);" id="' + k + '">'; 509 for (var j in GUI.action_data().attributes[k]) { 510 var sel = ''; 511 var key = k.replace("_values", ""); 512 if (GUI.action_data().attributes[key] == GUI.action_data().attributes[k][j]) 513 sel = 'selected="selected"'; 514 html += '<option class="trn" ' + sel + ' name="' + GUI.action_data().attributes[k][j] + '" data-value="'+GUI.action_data().attributes[k][j]+'">' + GUI.action_data().attributes[k][j] + '</option>'; 515 } 516 html += '</select>'; 517 } 518 else if (GUI.action_data().attributes[k][0] == '#') { 519 //color 520 html += '<table style="width:100%;">'; //table for 100% width 521 html += '<tr>'; 522 html += '<td style="font-weight:bold;width:45px;">' + title + ':</td>'; 523 html += '<td><input onchange="GUI.update_attribute(this);" type="color" id="' + k + '" value="' + GUI.action_data().attributes[k] + '" /></td>'; 524 html += '</tr>'; 525 html += '</table>'; 526 } 527 else { 528 //numbers 529 html += '<div id="' + k + '_container">'; 530 html += '<table style="width:100%;">'; //table for 100% width 531 html += '<tr>'; 532 html += '<td style="font-weight:bold;padding-right:2px;white-space:nowrap;" class="trn">' + title + ':</td>'; 533 html += '<td><input onchange="GUI.update_attribute(this);" type="number" id="' + k + '" value="' + GUI.action_data().attributes[k] + '" /></td>'; 534 html += '</tr>'; 535 html += '</table>'; 536 html += '<div style="float:left;width:32px;" onclick="GUI.update_attribute(this, 1)" class="attribute-area" id="' + k + '">+</div>'; 537 html += '<div style="margin-left:48px;margin-bottom:15px;" onclick="GUI.update_attribute(this, -1)" class="attribute-area" id="' + k + '">-</div>'; 538 html += '</div>'; 539 } 540 } 541 document.getElementById("action_attributes").innerHTML = html; 542 543 //retranslate 544 HELP.help_translate(LANG); 545 }; 546 547 this.set_color = function (object) { 548 if (MAIN.use_OS_color_mode == true && object.id == 'main_color') 549 COLOR = object.value; 550 else 551 COLOR = HELPER.rgb2hex_all(object.style.backgroundColor); 552 COLOR_copy = COLOR; 553 554 if (MAIN.use_OS_color_mode == true) 555 document.getElementById("main_color").value = COLOR; //supported 556 else 557 document.getElementById("main_color_alt").style.backgroundColor = COLOR; //not supported 558 559 document.getElementById("color_hex").value = COLOR; 560 var colors = HELPER.hex2rgb(COLOR); 561 document.getElementById("rgb_r").value = colors.r; 562 document.getElementById("rgb_g").value = colors.g; 563 document.getElementById("rgb_b").value = colors.b; 564 565 //also set alpha to max 566 if(ALPHA == 0) { 567 ALPHA = 255; 568 document.getElementById("rgb_a").value = ALPHA; 569 } 570 }; 571 572 this.set_color_manual = function (event) { 573 var object = event.target; 574 if (object.value.length == 6 && object.value[0] != '#') { 575 COLOR = '#' + object.value; 576 this.sync_colors(); 577 } 578 if (object.value.length == 7) { 579 COLOR = object.value; 580 this.sync_colors(); 581 } 582 else if (object.value.length > 7) { 583 object.value = COLOR; 584 } 585 }; 586 587 this.set_color_rgb = function (object, c) { 588 var colors = HELPER.hex2rgb(COLOR); 589 if (object.value.length > 3) { 590 object.value = colors[c]; 591 } 592 else if (object.value.length > 0) { 593 value = object.value; 594 value = parseInt(value); 595 if (isNaN(value) || value != object.value || value > 255 || value < 0) { 596 object.value = colors[c]; 597 return false; 598 } 599 COLOR = "#" + ("000000" + HELPER.rgbToHex(document.getElementById("rgb_r").value, document.getElementById("rgb_g").value, document.getElementById("rgb_b").value)).slice(-6); 600 ALPHA = document.getElementById("rgb_a").value; 601 document.getElementById("rgb_a").value = ALPHA; 602 this.sync_colors(); 603 } 604 }; 605 606 this.sync_colors = function () { 607 document.getElementById("color_hex").value = COLOR; 608 609 if (MAIN.use_OS_color_mode == true) 610 document.getElementById("main_color").value = COLOR; //supported 611 else 612 document.getElementById("main_color_alt").style.backgroundColor = COLOR; //not supported 613 614 var colors = HELPER.hex2rgb(COLOR); 615 document.getElementById("rgb_r").value = colors.r; 616 document.getElementById("rgb_g").value = colors.g; 617 document.getElementById("rgb_b").value = colors.b; 618 }; 619 620 this.toggle_color_select = function () { 621 if (POP.active == false) { 622 POP.add({ 623 title: 'Color:', 624 function: function () { 625 COLOR_copy = COLOR; 626 var html = '<canvas style="position:relative;margin-bottom:5px;" id="c_all" width="300" height="300"></canvas>'; 627 html += '<table>'; 628 html += '<tr>'; 629 html += ' <td><b>Luminosity:</b></td>'; 630 html += ' <td><input id="lum_ranger" oninput="GUI.change_lum(this.value);document.getElementById(\'lum_preview\').innerHTML=this.value;
630" type="range" value="0" min="-255" max="255" step="1"></td>'; 631 html += ' <td style="padding-left:10px;width:30px;" id="lum_preview">0</td>'; 632 html += '</tr>'; 633 html += '<tr>'; 634 html += ' <td><b>Alpha:</b></td>'; 635 html += ' <td><input oninput="GUI.change_alpha(this.value);document.getElementById(\'alpha_preview\').innerHTML=this.value;" type="range" value="' + ALPHA + '" min="0" max="255" step="1"></td>'; 636 html += ' <td style="padding-left:10px;" id="alpha_preview">' + ALPHA + '</td></tr>'; 637 html += '</tr>'; 638 html += '</table>'; 639 return html; 640 } 641 }); 642 POP.show( 643 'Select color', 644 undefined, 645 undefined, 646 this.toggle_color_select_onload 647 ); 648 } 649 else{ 650 POP.hide(); 651 } 652 }; 653 654 this.change_lum = function (lumi) { 655 lumi = parseInt(lumi); 656 var c3 = HELPER.hex2rgb(COLOR_copy); 657 c3.r += lumi; 658 c3.g += lumi; 659 c3.b += lumi; 660 661 if (c3.r < 0) 662 c3.r = 0; 663 if (c3.g < 0) 664 c3.g = 0; 665 if (c3.b < 0) 666 c3.b = 0; 667 if (c3.r > 255) 668 c3.r = 255; 669 if (c3.g > 255) 670 c3.g = 255; 671 if (c3.b > 255) 672 c3.b = 255; 673 674 COLOR = "#" + ("000000" + HELPER.rgbToHex(c3.r, c3.g, c3.b)).slice(-6); 675 this.sync_colors(); 676 }; 677 678 this.change_alpha = function (value) { 679 ALPHA = parseInt(value); 680 document.getElementById("rgb_a").value = ALPHA; 681 }; 682 683 this.toggle_color_select_onload = function () { 684 var img = new Image(); 685 img.onload = function () { 686 document.getElementById("c_all").getContext("2d").drawImage(img, 0, 0); 687 document.getElementById("c_all").onmousedown = function (event) { 688 if (event.offsetX) { 689 mouse_x = event.offsetX; 690 mouse_y = event.offsetY; 691 } 692 else if (event.layerX) { 693 mouse_x = event.layerX; 694 mouse_y = event.layerY; 695 } 696 var c = document.getElementById("c_all").getContext("2d").getImageData(mouse_x, mouse_y, 1, 1).data;
697 COLOR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); 698 GUI.sync_colors(); 699 COLOR_copy = COLOR; 700 document.getElementById("lum_ranger").value = 0; 701 }; 702 }; 703 img.src = 'img/colorwheel.png'; 704 }; 705 706 this.draw_selected_area = function (no_resize) { 707 if (DRAW.select_data == false) 708 return false; 709 //draw area 710 canvas_front.clearRect(0, 0, WIDTH, HEIGHT); 711 var x = DRAW.select_data.x; 712 var y = DRAW.select_data.y; 713 var w = DRAW.select_data.w; 714 var h = DRAW.select_data.h; 715 if (this.ZOOM != 100) { 716 x = Math.round(x); 717 y = Math.round(y); 718 w = Math.round(w); 719 h = Math.round(h); 720 } 721 722 //fill 723 canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; 724 canvas_front.fillRect(x, y, w, h); 725 if (this.ZOOM <= 100) { 726 //borders 727 canvas_front.strokeStyle = "rgba(0, 255, 0, 1)"; 728 canvas_front.lineWidth = 1; 729 canvas_front.strokeRect(x + 0.5, y + 0.5, w, h); 730 } 731 if (no_resize == true) 732 return true; 733 734 //draw carners 735 square(x, y, 0, 0); 736 square(x + w, y, -1, 0); 737 square(x, y + h, 0, -1); 738 square(x + w, y + h, -1, -1); 739 740 //draw centers 741 square(x + w / 2, y, 0, 0); 742 square(x, y + h / 2, 0, 0); 743 square(x + w / 2, y + h, 0, -1); 744 square(x + w, y + h / 2, -1, 0); 745 746 function square(x, y, mx, my) { 747 var sr_size = Math.ceil(EVENTS.sr_size / GUI.ZOOM * 100); 748 x = Math.round(x); 749 y = Math.round(y); 750 canvas_front.beginPath(); 751 canvas_front.rect(x + mx * Math.round(sr_size), y + my * Math.round(sr_size), sr_size, sr_size); 752 canvas_front.fillStyle = "#0000ff"; 753 canvas_front.fill(); 754 } 755 }; 756 757 this.toggle = function(query){ 758 document.querySelector(query).classList.toggle("active"); 759 }; 760}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.