cloud-blocks
Version:
Cloud Blocks is a library for building scratch computing interfaces with Luxrobo MODI.
393 lines (340 loc) • 9.96 kB
JavaScript
/**
* @license
* Visual Blocks Editor
*
* Copyright 2017 Google Inc.
* https://developers.google.com/blockly/
*
* Licensed 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.
*/
/**
* @fileoverview Layout code for a vertical variant of the flyout.
* @author Sophie
*/
'use strict';
goog.provide('Blockly.CodeSketchVerticalFlyout');
/**
* overrides position
*/
/**
* Class for a flyout.
* @param {!Object} workspaceOptions Dictionary of options for the workspace.
* @extends {Blockly.VerticalFlyout}
* @constructor
*/
Blockly.CodeSketchVerticalFlyout = function (workspaceOptions) {
Blockly.CodeSketchVerticalFlyout.superClass_.constructor.call(
this,
workspaceOptions
);
this.workspace_ = new Blockly.CodeSketchWorkspaceSvg(workspaceOptions);
this.parentWorkspace_ = this.workspace_.options.parentWorkspace;
/**
* @author Tom
*/
var videoOptions = this.getVideoOptions();
if (videoOptions) {
this.videoHeight_ = videoOptions.videoHeight;
}
/**
* @author Tom
*/
// this.initTrashcanSvg();
// this.setTrashcanAlignCenter();
};
goog.inherits(Blockly.CodeSketchVerticalFlyout, Blockly.VerticalFlyout);
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.videoHeight_ = 0;
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.MIN_FLYOUT_WIDTH = 240;
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.MAX_FLYOUT_WIDTH = 500;
/**
* @author Tom
* Trashcan close svg path
*/
Blockly.CodeSketchVerticalFlyout.prototype.TRASHCAN_CLOSE_PATH_ =
'trashcan-close.svg';
/**
* @author Tom
* Trashcan open svg path
*/
Blockly.CodeSketchVerticalFlyout.prototype.TRASHCAN_OPEN_PATH_ =
'trashcan-open.svg';
/**
* @author Tom
* Trashcan width
*/
Blockly.CodeSketchVerticalFlyout.prototype.TRASHCAN_WIDTH_ = 50;
/**
* @author Tom
* Trashcan height
*/
Blockly.CodeSketchVerticalFlyout.prototype.TRASHCAN_HEIGHT_ = 50;
/**
* @author Tom
* Trashcan X position
*/
Blockly.CodeSketchVerticalFlyout.prototype.TRASHCAN_X_ = 100;
/**
* @author Tom
* Trashcan Y position
*/
Blockly.CodeSketchVerticalFlyout.prototype.TRASHCAN_Y_ = 450;
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.getMinWidth = function () {
return Blockly.CodeSketchVerticalFlyout.MIN_FLYOUT_WIDTH;
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.getMaxWidth = function () {
return Blockly.CodeSketchVerticalFlyout.MAX_FLYOUT_WIDTH;
};
/**
* Move the flyout to the edge of the workspace.
*/
Blockly.CodeSketchVerticalFlyout.prototype.position = function () {
if (!this.isVisible()) {
return;
}
var targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
if (!targetWorkspaceMetrics) {
// Hidden components will return null.
return;
}
// This version of the flyout does not change width to fit its contents.
// Instead it matches the width of its parent or uses a default value.
this.width_ = this.getWidth();
if (this.parentToolbox_) {
var toolboxWidth = this.parentToolbox_.getWidth();
var categoryWidth = toolboxWidth - this.width_;
var x =
this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT
? targetWorkspaceMetrics.viewWidth
: categoryWidth;
var y = 0;
} else {
var x =
this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT
? targetWorkspaceMetrics.viewWidth - this.width_
: 0;
var y = 0;
}
// Record the height for Blockly.CodeSketchVerticalFlyout.getMetrics_
this.height_ = Math.max(0, targetWorkspaceMetrics.viewHeight - y);
/**
* @author Tom
*/
var videoOptions = this.getVideoOptions();
if (videoOptions) {
const videoHeight = this.videoHeight_
? this.videoHeight_
: videoOptions.videoHeight;
this.height_ -= videoHeight + videoOptions.collapseHeight;
}
this.setTrashcanAlignCenter();
this.setBackgroundPath_(this.width_, this.height_);
this.svgGroup_.setAttribute('width', this.width_);
this.svgGroup_.setAttribute('height', this.height_);
var transform = 'translate(' + x + 'px,' + y + 'px)';
Blockly.utils.setCssTransform(this.svgGroup_, transform);
// Update the scrollbar (if one exists).
if (this.scrollbar_) {
// Set the scrollbars origin to be the top left of the flyout.
this.scrollbar_.setOrigin(x, y);
this.scrollbar_.resize();
}
// The blocks need to be visible in order to be laid out and measured
// correctly, but we don't want the flyout to show up until it's properly
// sized. Opacity is set to zero in show().
this.svgGroup_.style.opacity = 1;
};
/**
* Creates the flyout's DOM. Only needs to be called once. The flyout can
* either exist as its own svg element or be a g element nested inside a
* separate svg element.
* @param {string} tagName The type of tag to put the flyout in. This
* should be <svg> or <g>.
* @return {!Element} The flyout's SVG group.
*/
Blockly.CodeSketchVerticalFlyout.prototype.createDom = function (tagName) {
Blockly.CodeSketchVerticalFlyout.superClass_.createDom.call(this, tagName);
/*
<svg | g>
<path class="blocklyFlyoutBackground"/>
<g class="blocklyFlyout"></g>
</ svg | g>
*/
// Setting style to display:none to start. The toolbox and flyout
// hide/show code will set up proper visibility and size later.
this.svgGroup_ = Blockly.utils.createSvgElement(
tagName,
{ class: 'blocklyFlyout', style: 'display: none' },
null
);
this.svgBackground_ = Blockly.utils.createSvgElement(
'path',
{ class: 'blocklyFlyoutBackground' },
this.svgGroup_
);
this.createTrashcanSVG_();
this.svgGroup_.appendChild(this.workspace_.createDom());
return this.svgGroup_;
};
/**
* @author Sophie
*/
Blockly.CodeSketchVerticalFlyout.prototype.adjustCategoryHeight = function (
videoPlayerVisible,
videoHeight,
isToggle
) {
const treeDiv = this.parentToolbox_.HtmlDiv;
if (isToggle) {
// collapse button 25
treeDiv.style.height = videoPlayerVisible
? `calc(100% - 25px)`
: `calc(100% - ${videoHeight}px)`;
} else {
treeDiv.style.height = `${
document.documentElement.clientHeight - videoHeight
}px`;
}
};
/**
* @author Sophie
*/
Blockly.CodeSketchVerticalFlyout.prototype.setTrashcanAlignCenter = function () {
this.trashcanSvg.setAttribute(
'x',
this.width_ / 2 - this.TRASHCAN_WIDTH_ / 2
);
this.trashcanSvg.setAttribute(
'y',
this.height_ / 2 - this.TRASHCAN_HEIGHT_ / 2
);
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.createTrashcanSVG_ = function () {
this.trashcanSvg = Blockly.utils.createSvgElement(
'image',
{
width: this.TRASHCAN_WIDTH_,
height: this.TRASHCAN_HEIGHT_,
fill: '#000000'
},
this.svgGroup_
);
this.trashcanSvg.setAttributeNS(
'http://www.w3.org/1999/xlink',
'xlink:href',
Blockly.mainWorkspace.options.pathToMedia + this.TRASHCAN_CLOSE_PATH_
);
};
/**
* @author Tom
* Set background color darker
*/
Blockly.CodeSketchVerticalFlyout.prototype.setBackgroundOpacity = function (
isOpacity
) {
this.svgBackground_.style.fill = isOpacity ? '#000000' : '#f9f9f9';
this.svgBackground_.style.fillOpacity = 0.7;
};
/**
* Get the width of the flyout.
* @return {number} The width of the flyout.
*/
Blockly.CodeSketchVerticalFlyout.prototype.getWidth = function () {
/**
* @author Sophie
*/
return this.width_ > 0 ? this.width_ : this.DEFAULT_WIDTH;
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.getVideoOptions = function () {
var workspaceOptions = this.parentWorkspace_.options;
if (workspaceOptions) {
return workspaceOptions.videoOptions;
} else {
return undefined;
}
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.setHeight = function (
videoHeight = 0
) {
this.setVideoHeight(videoHeight);
this.position();
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.setVideoHeight = function (
videoHeight = 0
) {
this.videoHeight_ = videoHeight;
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.setWidth = function (newWidth = 0) {
this.width_ = newWidth;
// this.position();
};
/**
* @author Tom
*/
Blockly.CodeSketchVerticalFlyout.prototype.resize = function (height, width) {
// this.width_ = newWidth - this.parentToolbox_.HtmlDiv.clientWidth;
this.setWidth(width);
this.setHeight(height);
// var toolboxWidth = this.parentToolbox_.getWidth();
// this.svgGroup_.setAttribute('width', this.width_);
// this.svgGroup_.setAttribute('height', this.height_);
// this.workspace_.translate(width, 0);
// var transform = 'translate(' + x + 'px,' + y + 'px)';
// Blockly.utils.setCssTransform(this.svgGroup_, transform);
// this.svgGroup_.setAttribute('width', this.width_);
// this.svgGroup_.setAttribute('height', this.height_);
// this.setBackgroundPath_(this.width_, this.height_);
// // modify scroll position
// const scrollContentLeft = this.scrollbar_.oldHostMetrics_.contentLeft + 5;
// this.scrollbar_.setPosition_(
// this.width_ - scrollContentLeft,
// this.scrollbar_.position_.y
// );
// // reposition trashcan
// this.setTrashcanAlignCenter();
// // recalculate delete area
// this.workspace_.updateScreenCalculations_();
// // translate block canvas
// this.workspace_.translate(width, 0);
// // rerender blocks in flyout
// this.workspace_.setMetrics({});
};