| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| |
| var htrace = htrace || {}; |
| |
| // Triangle button widget. |
| htrace.TriangleButton = function(params) { |
| this.fgColor = "#6600ff"; |
| this.bgColor = "#ffffff"; |
| this.selected = false; |
| this.direction = "down"; |
| |
| this.draw = function() { |
| this.ctx.save(); |
| var fg = this.selected ? this.bgColor : this.fgColor; |
| var bg = this.selected ? this.fgColor : this.bgColor; |
| this.ctx.beginPath(); |
| this.ctx.rect(this.x0, this.y0, |
| this.xF - this.x0, this.yF - this.y0); |
| this.ctx.clip(); |
| this.ctx.fillStyle = bg; |
| this.ctx.strokeStyle = fg; |
| this.ctx.fillRect(this.x0, this.y0, |
| this.xF - this.x0, this.yF - this.y0); |
| this.ctx.lineWidth = 3; |
| this.ctx.strokeRect(this.x0, this.y0, |
| this.xF - this.x0, this.yF - this.y0); |
| var xPad = (this.xF - this.x0) / 5; |
| var yPad = (this.yF - this.y0) / 5; |
| this.ctx.fillStyle = fg; |
| this.ctx.strokeStyle = fg; |
| this.ctx.beginPath(); |
| this.ctx.strokeStyle = fg; |
| if (this.direction === "up") { |
| this.ctx.moveTo(Math.floor(this.x0 + ((this.xF - this.x0) / 2)), |
| this.y0 + yPad); |
| this.ctx.lineTo(this.xF - xPad, this.yF - yPad); |
| this.ctx.lineTo(this.x0 + xPad, this.yF - yPad); |
| } else if (this.direction === "down") { |
| this.ctx.moveTo(this.x0 + xPad, this.y0 + yPad); |
| this.ctx.lineTo(this.xF - xPad, this.y0 + yPad); |
| this.ctx.lineTo(Math.floor(this.x0 + ((this.xF - this.x0) / 2)), |
| this.yF - yPad); |
| } else { |
| console.log("TriangleButton: unknown direction " + this.direction); |
| } |
| this.ctx.closePath(); |
| this.ctx.fill(); |
| this.ctx.restore(); |
| }; |
| |
| this.inBoundingBox = function(x, y) { |
| return ((x >= this.x0) && (x <= this.xF) && (y >= this.y0) && (y <= this.yF)); |
| } |
| |
| this.handleMouseDown = function(x, y) { |
| // console.log("TriangleButton#handleMouseDown(x=" + x + ", y=" + y + |
| // ", x0=" + this.x0 + ", y0="+ this.y0 + |
| // ", xF=" + this.xF + ", yF=" + this.yF); |
| if (this.inBoundingBox(x,y)) { |
| this.selected = true; |
| return true; |
| } |
| return false; |
| } |
| |
| this.handleMouseUp = function(x, y) { |
| if (this.selected) { |
| console.log("executing callback"); |
| } |
| this.selected = false; |
| } |
| |
| this.handleMouseMove = function(x, y) { |
| var selected = this.inBoundingBox(x,y); |
| if (this.selected != selected) { |
| this.selected = selected; |
| return true; |
| } |
| return false; |
| } |
| |
| for (var k in params) { |
| this[k]=params[k]; |
| } |
| return this; |
| }; |