diff --git a/examples/ControlACs.js b/examples/ControlACs.js index 43eb3290a4..1b60a9e848 100644 --- a/examples/ControlACs.js +++ b/examples/ControlACs.js @@ -11,7 +11,7 @@ // Set the following variables to the right value var NUM_AC = 3; // This is the number of AC. Their ID need to be unique and between 0 (included) and NUM_AC (excluded) -var NAMES = new Array("Arnold", "Jeff"); // ACs names ordered by IDs (Default name is "ACx", x = ID + 1)) +var NAMES = new Array("Craig", "Clement", "Jeff"); // ACs names ordered by IDs (Default name is "ACx", x = ID + 1)) // Those variables MUST be common to every scripts var controlVoxelSize = 0.25; @@ -40,9 +40,10 @@ var windowDimensions = Controller.getViewportDimensions(); var TOOL_ICON_URL = "http://s3-us-west-1.amazonaws.com/highfidelity-public/images/tools/"; var ALPHA_ON = 1.0; var ALPHA_OFF = 0.7; -var COLOR_TOOL_BAR = { red: 128, green: 128, blue: 128 }; -var COLOR_MASTER = { red: 200, green: 200, blue: 200 }; -var TEXT_HEIGHT = 10; +var COLOR_TOOL_BAR = { red: 0, green: 0, blue: 0 }; +var COLOR_MASTER = { red: 0, green: 0, blue: 0 }; +var TEXT_HEIGHT = 12; +var TEXT_MARGIN = 3; var toolBars = new Array(); var nameOverlays = new Array(); @@ -52,76 +53,87 @@ var playLoopIcon = new Array(); var stopIcon = new Array(); setupToolBars(); + function setupToolBars() { if (toolBars.length > 0) { print("Multiple calls to Recorder.js:setupToolBars()"); return; } - + Tool.IMAGE_HEIGHT /= 2; + Tool.IMAGE_WIDTH /= 2; + for (i = 0; i <= NUM_AC; i++) { toolBars.push(new ToolBar(0, 0, ToolBar.HORIZONTAL)); - nameOverlays.push(Overlays.addOverlay("text", { - font: { size: TEXT_HEIGHT }, - text: (i === NUM_AC) ? "Master" : - ((i < NAMES.length) ? NAMES[i] : - "AC" + (i + 1)), - x: 0, y: 0, - width: 0, - height: 0, - alpha: 1.0, - visible: true - })); - + toolBars[i].setBack((i === NUM_AC) ? COLOR_MASTER : COLOR_TOOL_BAR, ALPHA_OFF); + onOffIcon.push(toolBars[i].addTool({ - imageURL: TOOL_ICON_URL + "models-tool.svg", - subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, true, false)); - playIcon.push(null); - playLoopIcon.push(null); - stopIcon.push(null); + imageURL: TOOL_ICON_URL + "ac-on-off.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + x: 0, y: 0, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_ON, + visible: true + }, true, true)); + + playIcon[i] = toolBars[i].addTool({ + imageURL: TOOL_ICON_URL + "play.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_OFF, + visible: true + }, false); + + var playLoopWidthFactor = 1.65; + playLoopIcon[i] = toolBars[i].addTool({ + imageURL: TOOL_ICON_URL + "play-and-loop.svg", + subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: playLoopWidthFactor * Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_OFF, + visible: true + }, false); + + stopIcon[i] = toolBars[i].addTool({ + imageURL: TOOL_ICON_URL + "recording-stop.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: ALPHA_OFF, + visible: true + }, false); + + nameOverlays.push(Overlays.addOverlay("text", { + backgroundColor: { red: 0, green: 0, blue: 0 }, + font: { size: TEXT_HEIGHT }, + text: (i === NUM_AC) ? "Master" : i + ". " + + ((i < NAMES.length) ? NAMES[i] : + "AC" + i), + x: 0, y: 0, + width: toolBars[i].width + ToolBar.SPACING, + height: TEXT_HEIGHT + TEXT_MARGIN, + leftMargin: TEXT_MARGIN, + topMargin: TEXT_MARGIN, + alpha: ALPHA_OFF, + visible: true + })); } } function sendCommand(id, action) { - if (action === SHOW && toolBars[id].numberOfTools() === 1) { - toolBars[id].selectTool(onOffIcon[id], true); - - playIcon[id] = toolBars[id].addTool({ - imageURL: TOOL_ICON_URL + "play.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - playLoopIcon[id] = toolBars[id].addTool({ - imageURL: TOOL_ICON_URL + "play-loop.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - stopIcon[id] = toolBars[id].addTool({ - imageURL: TOOL_ICON_URL + "stop.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - toolBars[id].setBack((id === NUM_AC) ? COLOR_MASTER : COLOR_TOOL_BAR, ALPHA_OFF); - } else if (action === HIDE && toolBars[id].numberOfTools() != 1) { + if (action === SHOW) { toolBars[id].selectTool(onOffIcon[id], false); - toolBars[id].removeLastTool(); - toolBars[id].removeLastTool(); - toolBars[id].removeLastTool(); - toolBars[id].setBack(null); - } + toolBars[id].setAlpha(ALPHA_ON, playIcon[id]); + toolBars[id].setAlpha(ALPHA_ON, playLoopIcon[id]); + toolBars[id].setAlpha(ALPHA_ON, stopIcon[id]); + } else if (action === HIDE) { + toolBars[id].selectTool(onOffIcon[id], true); + toolBars[id].setAlpha(ALPHA_OFF, playIcon[id]); + toolBars[id].setAlpha(ALPHA_OFF, playLoopIcon[id]); + toolBars[id].setAlpha(ALPHA_OFF, stopIcon[id]); + } else if (toolBars[id].toolSelected(onOffIcon[id])) { + return; + } if (id === toolBars.length - 1) { for (i = 0; i < NUM_AC; i++) { @@ -141,55 +153,56 @@ function sendCommand(id, action) { function mousePressEvent(event) { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - + // Check master control var i = toolBars.length - 1; - if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay)) { - if (toolBars[i].toolSelected(onOffIcon[i])) { - sendCommand(i, SHOW); - } else { - sendCommand(i, HIDE); - } - } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY); - } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY_LOOP); - } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, STOP); - } else { - // Check individual controls + if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + if (toolBars[i].toolSelected(onOffIcon[i])) { + sendCommand(i, SHOW); + } else { + sendCommand(i, HIDE); + } + } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY); + } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY_LOOP); + } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, STOP); + } else { + // Check individual controls for (i = 0; i < NUM_AC; i++) { - if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay)) { - if (toolBars[i].toolSelected(onOffIcon[i])) { - sendCommand(i, SHOW); - } else { - sendCommand(i, HIDE); - } - } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY); - } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, PLAY_LOOP); - } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay)) { - sendCommand(i, STOP); - } else { - - } + if (onOffIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + if (toolBars[i].toolSelected(onOffIcon[i], false)) { + sendCommand(i, SHOW); + } else { + sendCommand(i, HIDE); + } + } else if (playIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY); + } else if (playLoopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, PLAY_LOOP); + } else if (stopIcon[i] === toolBars[i].clicked(clickedOverlay, false)) { + sendCommand(i, STOP); + } else { + + } } - } + } } function moveUI() { - var relative = { x: 70, y: 400 }; + var textSize = TEXT_HEIGHT + 2 * TEXT_MARGIN; + var relative = { x: 70, y: 75 + (NUM_AC) * (Tool.IMAGE_HEIGHT + ToolBar.SPACING + textSize) }; + for (i = 0; i <= NUM_AC; i++) { toolBars[i].move(relative.x, - windowDimensions.y - relative.y + - i * (Tool.IMAGE_HEIGHT + 2 * ToolBar.SPACING + TEXT_HEIGHT)); + windowDimensions.y - relative.y + + i * (Tool.IMAGE_HEIGHT + ToolBar.SPACING + textSize)); + Overlays.editOverlay(nameOverlays[i], { - x: relative.x, - y: windowDimensions.y - relative.y + - i * (Tool.IMAGE_HEIGHT + 2 * ToolBar.SPACING + TEXT_HEIGHT) - - ToolBar.SPACING - 2 * TEXT_HEIGHT - }); + x: toolBars[i].x - ToolBar.SPACING, + y: toolBars[i].y - textSize + }); } } diff --git a/examples/Recorder.js b/examples/Recorder.js index 7ecf0e2640..b3a4c7a4c3 100644 --- a/examples/Recorder.js +++ b/examples/Recorder.js @@ -13,7 +13,6 @@ Script.include("toolBars.js"); var recordingFile = "recording.rec"; var playFromCurrentLocation = true; -var loop = true; var windowDimensions = Controller.getViewportDimensions(); var TOOL_ICON_URL = "http://s3-us-west-1.amazonaws.com/highfidelity-public/images/tools/"; @@ -21,69 +20,91 @@ var ALPHA_ON = 1.0; var ALPHA_OFF = 0.7; var COLOR_ON = { red: 128, green: 0, blue: 0 }; var COLOR_OFF = { red: 128, green: 128, blue: 128 }; -Tool.IMAGE_WIDTH *= 0.7; -Tool.IMAGE_HEIGHT *= 0.7; +var COLOR_TOOL_BAR = { red: 0, green: 0, blue: 0 }; var toolBar = null; var recordIcon; var playIcon; +var playLoopIcon; var saveIcon; var loadIcon; +var spacing; +var timerOffset; setupToolBar(); var timer = null; setupTimer(); +var watchStop = false; + function setupToolBar() { if (toolBar != null) { print("Multiple calls to Recorder.js:setupToolBar()"); return; } - + Tool.IMAGE_HEIGHT /= 2; + Tool.IMAGE_WIDTH /= 2; + toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); - toolBar.setBack(COLOR_OFF, ALPHA_OFF); - - recordIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "record.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false); - - playIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "play.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); - - saveIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "save.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); - - loadIcon = toolBar.addTool({ - imageURL: TOOL_ICON_URL + "load.svg", - width: Tool.IMAGE_WIDTH, - height: Tool.IMAGE_HEIGHT, - alpha: ALPHA_ON, - visible: true - }, false, false); + + toolBar.setBack(COLOR_TOOL_BAR, ALPHA_OFF); + + recordIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "recording-record.svg", + subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + x: 0, y: 0, + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: MyAvatar.isPlaying() ? ALPHA_OFF : ALPHA_ON, + visible: true + }, true, !MyAvatar.isRecording()); + + var playLoopWidthFactor = 1.65; + playIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "play-pause.svg", + width: playLoopWidthFactor * Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); + + playLoopIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "play-and-loop.svg", + subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT }, + width: playLoopWidthFactor * Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); + + timerOffset = toolBar.width; + spacing = toolBar.addSpacing(0); + + saveIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "recording-save.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.isPlaying() || MyAvatar.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); + + loadIcon = toolBar.addTool({ + imageURL: TOOL_ICON_URL + "recording-upload.svg", + width: Tool.IMAGE_WIDTH, + height: Tool.IMAGE_HEIGHT, + alpha: (MyAvatar.isRecording() || MyAvatar.isPlaying()) ? ALPHA_OFF : ALPHA_ON, + visible: true + }, false); } function setupTimer() { timer = Overlays.addOverlay("text", { - font: { size: 20 }, + font: { size: 15 }, text: (0.00).toFixed(3), backgroundColor: COLOR_OFF, x: 0, y: 0, - width: 100, - height: 100, + width: 0, + height: 0, alpha: 1.0, visible: true }); @@ -92,7 +113,8 @@ function setupTimer() { function updateTimer() { var text = ""; if (MyAvatar.isRecording()) { - text = formatTime(MyAvatar.recorderElapsed()) + text = formatTime(MyAvatar.recorderElapsed()); + } else { text = formatTime(MyAvatar.playerElapsed()) + " / " + formatTime(MyAvatar.playerLength()); @@ -101,6 +123,7 @@ function updateTimer() { Overlays.editOverlay(timer, { text: text }) + toolBar.changeSpacing(text.length * 8 + ((MyAvatar.isRecording()) ? 15 : 0), spacing); } function formatTime(time) { @@ -127,54 +150,86 @@ function formatTime(time) { } function moveUI() { - var relative = { x: 30, y: 90 }; + var relative = { x: 70, y: 40 }; toolBar.move(relative.x, windowDimensions.y - relative.y); Overlays.editOverlay(timer, { - x: relative.x - 10, - y: windowDimensions.y - relative.y - 35, - width: 0, - height: 0 + x: relative.x + timerOffset - ToolBar.SPACING, + y: windowDimensions.y - relative.y - ToolBar.SPACING }); } function mousePressEvent(event) { clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y }); - - if (recordIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isPlaying()) { - if (!MyAvatar.isRecording()) { - MyAvatar.startRecording(); - toolBar.setBack(COLOR_ON, ALPHA_ON); - } else { - MyAvatar.stopRecording(); - MyAvatar.loadLastRecording(); - toolBar.setBack(COLOR_OFF, ALPHA_OFF); - } - } else if (playIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { - if (MyAvatar.isPlaying()) { - MyAvatar.stopPlaying(); - } else { - MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); - MyAvatar.setPlayerLoop(loop); - MyAvatar.startPlaying(true); - } - } else if (saveIcon === toolBar.clicked(clickedOverlay)) { - if (!MyAvatar.isRecording()) { - recordingFile = Window.save("Save recording to file", ".", "*.rec"); - if (recordingFile != null) { + + if (recordIcon === toolBar.clicked(clickedOverlay, false) && !MyAvatar.isPlaying()) { + if (!MyAvatar.isRecording()) { + MyAvatar.startRecording(); + toolBar.selectTool(recordIcon, false); + toolBar.setAlpha(ALPHA_OFF, playIcon); + toolBar.setAlpha(ALPHA_OFF, playLoopIcon); + toolBar.setAlpha(ALPHA_OFF, saveIcon); + toolBar.setAlpha(ALPHA_OFF, loadIcon); + } else { + MyAvatar.stopRecording(); + toolBar.selectTool(recordIcon, true ); + MyAvatar.loadLastRecording(); + toolBar.setAlpha(ALPHA_ON, playIcon); + toolBar.setAlpha(ALPHA_ON, playLoopIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } + } else if (playIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { + if (MyAvatar.isPlaying()) { + MyAvatar.stopPlaying(); + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } else if (MyAvatar.playerLength() > 0) { + MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); + MyAvatar.setPlayerLoop(false); + MyAvatar.startPlaying(); + toolBar.setAlpha(ALPHA_OFF, recordIcon); + toolBar.setAlpha(ALPHA_OFF, saveIcon); + toolBar.setAlpha(ALPHA_OFF, loadIcon); + watchStop = true; + } + } else if (playLoopIcon === toolBar.clicked(clickedOverlay) && !MyAvatar.isRecording()) { + if (MyAvatar.isPlaying()) { + MyAvatar.stopPlaying(); + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } else if (MyAvatar.playerLength() > 0) { + MyAvatar.setPlayFromCurrentLocation(playFromCurrentLocation); + MyAvatar.setPlayerLoop(true); + MyAvatar.startPlaying(); + toolBar.setAlpha(ALPHA_OFF, recordIcon); + toolBar.setAlpha(ALPHA_OFF, saveIcon); + toolBar.setAlpha(ALPHA_OFF, loadIcon); + } + } else if (saveIcon === toolBar.clicked(clickedOverlay)) { + if (!MyAvatar.isRecording() && !MyAvatar.isPlaying() && MyAvatar.playerLength() != 0) { + recordingFile = Window.save("Save recording to file", ".", "*.rec"); + if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) { MyAvatar.saveRecording(recordingFile); - } - } - } else if (loadIcon === toolBar.clicked(clickedOverlay)) { - if (!MyAvatar.isRecording()) { - recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); - if (recordingFile != "null") { - MyAvatar.loadRecording(recordingFile); - } - } - } else { - - } + } + } + } else if (loadIcon === toolBar.clicked(clickedOverlay)) { + if (!MyAvatar.isRecording() && !MyAvatar.isPlaying()) { + recordingFile = Window.browse("Load recorcding from file", ".", "*.rec"); + if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) { + MyAvatar.loadRecording(recordingFile); + } + if (MyAvatar.playerLength() > 0) { + toolBar.setAlpha(ALPHA_ON, playIcon); + toolBar.setAlpha(ALPHA_ON, playLoopIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + } + } + } else { + + } } function update() { @@ -186,6 +241,13 @@ function update() { } updateTimer(); + + if (watchStop && !MyAvatar.isPlaying()) { + watchStop = false; + toolBar.setAlpha(ALPHA_ON, recordIcon); + toolBar.setAlpha(ALPHA_ON, saveIcon); + toolBar.setAlpha(ALPHA_ON, loadIcon); + } } function scriptEnding() { diff --git a/examples/toolBars.js b/examples/toolBars.js index 092ab5992e..dc17f02869 100644 --- a/examples/toolBars.js +++ b/examples/toolBars.js @@ -61,11 +61,10 @@ Overlay2D = function(properties, overlay) { // overlay is an optionnal variable } this.clicked = function(clickedOverlay) { - return (overlay == clickedOverlay ? true : false); + return overlay === clickedOverlay; } this.cleanup = function() { - print("Cleanup"); Overlays.deleteOverlay(overlay); } } @@ -112,9 +111,9 @@ Tool = function(properties, selectable, selected) { // selectable and selected a this.select(selected); this.baseClicked = this.clicked; - this.clicked = function(clickedOverlay) { + this.clicked = function(clickedOverlay, update) { if (this.baseClicked(clickedOverlay)) { - if (selectable) { + if (selectable && update) { this.toggle(); } return true; @@ -141,6 +140,7 @@ ToolBar = function(x, y, direction) { alpha: 1.0, visible: false }); + this.spacing = []; this.addTool = function(properties, selectable, selected) { if (direction == ToolBar.HORIZONTAL) { @@ -154,16 +154,56 @@ ToolBar = function(x, y, direction) { this.width = Math.max(properties.width, this.width); this.height += properties.height + ToolBar.SPACING; } + if (this.back != null) { Overlays.editOverlay(this.back, { - width: this.width + 2 * ToolBar.SPACING, - height: this.height + 2 * ToolBar.SPACING + width: this.width + + ((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING, + height: this.height + + ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, }); } this.tools.push(new Tool(properties, selectable, selected)); return ((this.tools.length) - 1); } + + this.addSpacing = function(size) { + if (direction == ToolBar.HORIZONTAL) { + this.width += size; + } else { + this.height += size; + } + this.spacing[this.tools.length] = size; + + return (this.tools.length); + } + + this.changeSpacing = function(size, id) { + if (this.spacing[id] === null) { + this.spacing[id] = 0; + } + var diff = size - this.spacing[id]; + this.spacing[id] = size; + + var dx = (direction == ToolBar.HORIZONTAL) ? diff : 0; + var dy = (direction == ToolBar.VERTICAL) ? diff : 0; + this.width += dx; + this.height += dy; + + for(i = id; i < this.tools.length; i++) { + this.tools[i].move(this.tools[i].x() + dx, + this.tools[i].y() + dy); + } + if (this.back != null) { + Overlays.editOverlay(this.back, { + width: this.width + + ((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING, + height: this.height + + ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, + }); + } + } this.removeLastTool = function() { this.tools.pop().cleanup(); @@ -209,18 +249,22 @@ ToolBar = function(x, y, direction) { this.tools[tool].setAlpha(alpha); } } - + this.setBack = function(color, alpha) { if (color == null) { Overlays.editOverlay(this.back, { - visible: false - }); + visible: false + }); } else { Overlays.editOverlay(this.back, { - visible: true, - backgroundColor: color, - alpha: alpha - }) + width: this.width + + ((direction == ToolBar.HORIZONTAL) ? 1 : 2) * ToolBar.SPACING, + height: this.height + + ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, + visible: true, + backgroundColor: color, + alpha: alpha + }); } } @@ -233,9 +277,13 @@ ToolBar = function(x, y, direction) { } } - this.clicked = function(clickedOverlay) { + this.clicked = function(clickedOverlay, update) { + if(typeof(update) === 'undefined') { + update = true; + } + for(var tool in this.tools) { - if (this.tools[tool].visible() && this.tools[tool].clicked(clickedOverlay)) { + if (this.tools[tool].visible() && this.tools[tool].clicked(clickedOverlay, update)) { return parseInt(tool); } }