scratch-blocks 1.1.206 → 2.0.0-beta.1

package/blockly-rc/demos/minimap/minimap.js

@@ -0,0 +1,302 @@
+/**
+
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Minimap demo.
+ */
+'use strict';
+
+/**
+ * Creating a separate namespace for minimap.
+ */
+var Minimap = {};
+
+/**
+ * Initialize the workspace and minimap.
+ * @param {!Workspace} workspace The main workspace of the user.
+ * @param {!Workspace} minimap The workspace that will be used as a minimap.
+ */
+Minimap.init = function(workspace, minimap) {
+  this.workspace = workspace;
+  this.minimap = minimap;
+
+  // Adding scroll callback functionality to vScroll and hScroll just for this demo.
+  // IMPORTANT: This should be changed when there is proper UI event handling
+  //     API available and should be handled by workspace's event listeners.
+  this.workspace.scrollbar.vScroll.setHandlePosition = function(newPosition) {
+    this.handlePosition_ = newPosition;
+    this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_);
+
+    // Code above is same as the original setHandlePosition function in core/scrollbar.js.
+    // New code starts from here.
+
+    // Get the absolutePosition.
+    var absolutePosition = (this.handlePosition_ / this.ratio);
+
+    // Firing the scroll change listener.
+    Minimap.onScrollChange(absolutePosition, this.horizontal_);
+  };
+
+  // Adding call back for horizontal scroll.
+  this.workspace.scrollbar.hScroll.setHandlePosition = function(newPosition) {
+    this.handlePosition_ = newPosition;
+    this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_);
+
+    // Code above is same as the original setHandlePosition function in core/scrollbar.js.
+    // New code starts from here.
+
+    // Get the absolutePosition.
+    var absolutePosition = (this.handlePosition_ / this.ratio);
+
+    // Firing the scroll change listener.
+    Minimap.onScrollChange(absolutePosition, this.horizontal_);
+  };
+
+
+  // Required to stop a positive feedback loop when user clicks minimap
+  // and the scroll changes, which in turn may change minimap.
+  this.disableScrollChange = false;
+
+  // Listen to events on the main workspace.
+  this.workspace.addChangeListener(Minimap.mirrorEvent);
+
+  //Get rectangle bounding the minimap div.
+  this.rect = document.getElementById('mapDiv').getBoundingClientRect();
+
+  // Create a svg overlay on the top of mapDiv for the minimap.
+  this.svg = Blockly.utils.dom.createSvgElement('svg', {
+    'xmlns': Blockly.utils.dom.SVG_NS,
+    'xmlns:html': Blockly.utils.dom.HTML_NS,
+    'xmlns:xlink': Blockly.utils.dom.XLINK_NS,
+    'version': '1.1',
+    'height': this.rect.bottom-this.rect.top,
+    'width': this.rect.right-this.rect.left,
+    'class': 'minimap',
+  }, document.getElementById('mapDiv'));
+  this.svg.style.top = this.rect.top + 'px';
+  this.svg.style.left = this.rect.left + 'px';
+
+  // Creating a rectangle in the minimap that represents current view.
+  Blockly.utils.dom.createSvgElement('rect', {
+    'width': 100,
+    'height': 100,
+    'class': 'mapDragger'
+  }, this.svg);
+
+  // Rectangle in the minimap that represents current view.
+  this.mapDragger = this.svg.childNodes[0];
+
+  // Adding mouse events to the rectangle, to make it Draggable.
+  // Using Blockly.browserEvents.bind to attach mouse/touch listeners.
+  Blockly.browserEvents.bind(
+      this.mapDragger, 'mousedown', null, Minimap.mousedown);
+
+  //When the window change, we need to resize the minimap window.
+  window.addEventListener('resize', Minimap.repositionMinimap);
+
+  // Mouse up event for the minimap.
+  this.svg.addEventListener('mouseup', Minimap.updateMapDragger);
+
+  //Boolean to check whether I am dragging the surface or not.
+  this.isDragging = false;
+};
+
+Minimap.mousedown = function(e) {
+  // Using Blockly.browserEvents.bind to attach mouse/touch listeners.
+  Minimap.mouseMoveBindData = Blockly.browserEvents.bind(
+      document, 'mousemove', null, Minimap.mousemove);
+  Minimap.mouseUpBindData =
+      Blockly.browserEvents.bind(document, 'mouseup', null, Minimap.mouseup);
+
+  Minimap.isDragging = true;
+  e.stopPropagation();
+};
+
+Minimap.mouseup = function(e) {
+  Minimap.isDragging = false;
+  // Removing listeners.
+  Blockly.browserEvents.unbind(Minimap.mouseUpBindData);
+  Blockly.browserEvents.unbind(Minimap.mouseMoveBindData);
+  Minimap.updateMapDragger(e);
+  e.stopPropagation();
+};
+
+Minimap.mousemove = function(e) {
+  if (Minimap.isDragging) {
+    Minimap.updateMapDragger(e);
+    e.stopPropagation();
+  }
+};
+
+/**
+ * Run non-UI events from the main workspace on the minimap.
+ * @param {!Blockly.Events.Abstract} event Event that triggered in the main
+ *    workspace.
+ */
+Minimap.mirrorEvent = function(event) {
+  if (event.isUiEvent) {
+    return;  // Don't mirror UI events.
+  }
+  // Convert event to JSON.  This could then be transmitted across the net.
+  var json = event.toJson();
+  // Convert JSON back into an event, then execute it.
+  var minimapEvent = Blockly.Events.fromJson(json, Minimap.minimap);
+  minimapEvent.run(true);
+  Minimap.scaleMinimap();
+  Minimap.setDraggerHeight();
+  Minimap.setDraggerWidth();
+};
+
+/**
+ * Called when window is resized. Repositions the minimap overlay.
+ */
+Minimap.repositionMinimap = function() {
+  Minimap.rect = document.getElementById('mapDiv').getBoundingClientRect();
+  Minimap.svg.style.top = Minimap.rect.top + 'px';
+  Minimap.svg.style.left = Minimap.rect.left + 'px';
+};
+
+/**
+ * Updates the rectangle's height.
+ */
+Minimap.setDraggerHeight = function() {
+  var workspaceMetrics = Minimap.workspace.getMetrics();
+  var draggerHeight = (workspaceMetrics.viewHeight / Minimap.workspace.scale) *
+      Minimap.minimap.scale;
+  // It's zero when first block is placed.
+  if (draggerHeight === 0) {
+    return;
+  }
+  Minimap.mapDragger.setAttribute('height', draggerHeight);
+};
+
+/**
+ * Updates the rectangle's width.
+ */
+Minimap.setDraggerWidth = function() {
+  var workspaceMetrics = Minimap.workspace.getMetrics();
+  var draggerWidth = (workspaceMetrics.viewWidth / Minimap.workspace.scale) *
+      Minimap.minimap.scale;
+  // It's zero when first block is placed.
+  if (draggerWidth === 0) {
+    return;
+  }
+  Minimap.mapDragger.setAttribute('width', draggerWidth);
+};
+
+
+/**
+ * Updates the overall position of the viewport of the minimap by appropriately
+ * using translate functions.
+ */
+Minimap.scaleMinimap = function() {
+  var minimapBoundingBox = Minimap.minimap.getBlocksBoundingBox();
+  var workspaceBoundingBox = Minimap.workspace.getBlocksBoundingBox();
+  var workspaceMetrics = Minimap.workspace.getMetrics();
+  var minimapMetrics = Minimap.minimap.getMetrics();
+
+  // Scaling the minimap such that all the blocks can be seen in the viewport.
+  // This padding is default because this is how to scrollbar(in main workspace)
+  // is implemented.
+  var topPadding = (workspaceMetrics.viewHeight) * Minimap.minimap.scale /
+      (2 * Minimap.workspace.scale);
+  var sidePadding = (workspaceMetrics.viewWidth) * Minimap.minimap.scale /
+      (2 * Minimap.workspace.scale);
+
+  // If actual padding is more than half view ports height,
+  // change it to actual padding.
+  if ((workspaceBoundingBox.y * Minimap.workspace.scale -
+      workspaceMetrics.contentTop) *
+      Minimap.minimap.scale / Minimap.workspace.scale > topPadding) {
+    topPadding = (workspaceBoundingBox.y * Minimap.workspace.scale -
+        workspaceMetrics.contentTop) *
+        Minimap.minimap.scale / Minimap.workspace.scale;
+  }
+
+  // If actual padding is more than half view ports height,
+  // change it to actual padding.
+  if ((workspaceBoundingBox.x * Minimap.workspace.scale -
+      workspaceMetrics.contentLeft) *
+      Minimap.minimap.scale / Minimap.workspace.scale > sidePadding) {
+    sidePadding = (workspaceBoundingBox.x * Minimap.workspace.scale -
+        workspaceMetrics.contentLeft) *
+        Minimap.minimap.scale / Minimap.workspace.scale;
+  }
+
+  var scalex = (minimapMetrics.viewWidth - 2 * sidePadding) /
+      minimapBoundingBox.width;
+  var scaley = (minimapMetrics.viewHeight - 2 * topPadding) /
+      minimapBoundingBox.height;
+  Minimap.minimap.setScale(Math.min(scalex, scaley));
+
+  // Translating the minimap.
+  Minimap.minimap.translate(
+      -minimapMetrics.contentLeft * Minimap.minimap.scale + sidePadding,
+      -minimapMetrics.contentTop * Minimap.minimap.scale + topPadding);
+};
+
+/**
+ * Handles the onclick event on the minimapBoundingBox.
+ * Changes mapDraggers position.
+ * @param {!Event} e Event from the mouse click.
+ */
+Minimap.updateMapDragger = function(e) {
+  var y = e.clientY;
+  var x = e.clientX;
+  var draggerHeight = Minimap.mapDragger.getAttribute('height');
+  var draggerWidth = Minimap.mapDragger.getAttribute('width');
+
+  var finalY = y - Minimap.rect.top - draggerHeight / 2;
+  var finalX = x - Minimap.rect.left - draggerWidth / 2;
+
+  var maxValidY = (Minimap.workspace.getMetrics().contentHeight -
+      Minimap.workspace.getMetrics().viewHeight) * Minimap.minimap.scale;
+  var maxValidX = (Minimap.workspace.getMetrics().contentWidth -
+      Minimap.workspace.getMetrics().viewWidth) * Minimap.minimap.scale;
+
+  if (y + draggerHeight / 2 > Minimap.rect.bottom) {
+    finalY = Minimap.rect.bottom - Minimap.rect.top - draggerHeight;
+  } else if (y < Minimap.rect.top + draggerHeight / 2) {
+    finalY = 0;
+  }
+
+  if (x + draggerWidth / 2 > Minimap.rect.right) {
+    finalX = Minimap.rect.right - Minimap.rect.left - draggerWidth;
+  } else if (x < Minimap.rect.left + draggerWidth / 2) {
+    finalX = 0;
+  }
+
+  // Do not go below lower bound of scrollbar.
+  if (finalY > maxValidY) {
+    finalY = maxValidY;
+  }
+  if (finalX > maxValidX) {
+    finalX = maxValidX;
+  }
+  Minimap.mapDragger.setAttribute('y', finalY);
+  Minimap.mapDragger.setAttribute('x', finalX);
+  // Required, otherwise creates a feedback loop.
+  Minimap.disableScrollChange = true;
+  Minimap.workspace.scrollbar.vScroll.set((finalY * Minimap.workspace.scale) /
+                                          Minimap.minimap.scale);
+  Minimap.workspace.scrollbar.hScroll.set((finalX * Minimap.workspace.scale) /
+                                          Minimap.minimap.scale);
+  Minimap.disableScrollChange = false;
+};
+
+/**
+ * Handles the onclick event on the minimapBoundingBox, parameters are passed by
+ * the event handler.
+ * @param {number} position This is the absolute position of the scrollbar.
+ * @param {boolean} horizontal Informs if the change event if for
+ *     horizontal (true) or vertical (false) scrollbar.
+ */
+Minimap.onScrollChange = function(position, horizontal) {
+  if (!Minimap.disableScrollChange) {
+    Minimap.mapDragger.setAttribute(horizontal ? 'x' : 'y',
+        position * Minimap.minimap.scale / Minimap.workspace.scale);
+  }
+};

package/blockly-rc/demos/mobile/README.md

@@ -0,0 +1,53 @@
+# Blockly on Mobile Devices
+
+This directory contains three examples of running the Blockly library on mobile
+devices. The `html/` directory is a example of configuring a webpage for touch
+devices, with a Blockly workspace that fills the screen.
+
+The `mobile/html/` is also the basis for the Android and iOS demos. Each native
+app copies this demo into the app's local resources, and required Blockly
+library files, and hosts them in an embedded WebView.
+
+Thus, developers can quickly iterate within the `mobile/html/` directory, and
+see changes in both the Android and iOS native apps.
+
+## Running the Mobile HTML Demo
+
+Before running the mobile HTML demo, you need to create some symbolic links
+in your local file system. Run the `mobile/html/ln_resources.sh` file from
+the `mobile/html/` directory.  This mimics the relative locations of the
+Blockly files seen when loading the page in a native app's embedded WebView.
+
+After doing this, opening `mobile/html/index.html` should open normally,
+filling the page with one large Blockly workspace.
+
+## The Android App
+
+### Build and Run
+
+Open the `demos/mobile/android/` directory in Android Studio. The project
+files in the directory should be ready to build and run the demo in an emulator
+or connected device.
+
+### Android Copy Tasks
+
+If you edit the `mobile/html/` demo to include new files, you will need to
+update the native app project files to also copy those files.
+
+In the Android project, two Gradle tasks are responsible for the copies.
+In `mobile/android/app/build.gradle`, the tasks `copyBlocklyHtmlFile` and
+`copyBlocklyMoreFiles` configure the copy actions.
+
+## The iOS App
+
+### Build and Run
+
+Open the `demos/mobile/iOS/` directory in XCode. The project files in the
+directory should be ready to build and run the demo in a simulator or connected
+device.
+
+### iOS Copy Script
+
+The XCode project call out to `mobile/ios/cp_resources.sh` to copy the required
+HTML and related files. If you've edited the `mobile/html/` demo to require new
+files, update this script to copy these files, too.

package/blockly-rc/demos/mobile/android/README.md

@@ -0,0 +1,45 @@
+# Blockly in an Android WebView
+
+This code demonstrates how to get Blockly running in an Android app by
+embedding it in a WebView.
+
+### BlocklyWebViewFragment
+
+Most of the work is done within the fragment class `BlocklyWebViewFragment`.
+This fragment instantiates the WebView, loads the HTML
+(`assets/blockly/webview.html`, copied from `demos/mobile/html/index.html`),
+and provides a few helper methods.
+
+### Copying web assets with gradle
+
+This android project copies the necessary files from the main Blockly
+repository (i.e., parent directory). In `app/build.gradle`, note the
+`copyBlocklyHtmlFile` and `copyBlocklyMoreFiles` tasks.
+
+In your own project, the HTML and related files can be placed directly in the
+`assets/blockly` directory without the copy step. However, using the copy tasks
+simplifies the synchronization with an iOS app using the same files.
+
+### Loading Block Definitions and Generator functions
+
+The `webview.html` loads the block definitions and generator functions directly
+into the page, without support or coordination with the Android classes. This
+assumes the app will always utilize the same blocks. This does not mean all
+blocks are visible to the user all the time; that is controlled by the toolbox
+and workspace files. This should accommodate almost all applications.
+
+This does mean loading your own block definitions and generators will involve
+editing the HTML, adding you own `<script>` tag, and possibly removing
+the `blocks_compressed.js` if you do not use any standard blocks.
+
+### Connecting a Developer Console
+
+While the console output of the WebView will be visible in the Android log
+(i.e., `logcat`), some times a more intrusive approach is required to isolate
+a problem. For instructions on connecting the WebView to Chrome's Developer
+Tools, see this article:
+
+    https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
+
+The WebView must be visible in the connect device or emulator before the
+WebView will included in the list of available pages to connect to.

package/blockly-rc/demos/mobile/android/app/build.gradle

@@ -0,0 +1,64 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 27
+    defaultConfig {
+        applicationId 'com.google.blockly.android.webview.demo'
+        minSdkVersion 19
+        targetSdkVersion 27
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+    productFlavors {
+    }
+}
+
+task copyBlocklyHtmlFile(type: Copy) {
+    from('../../html') {
+        include 'index.html', 'toolbox_standard.js'
+    }
+    into project(':app').file('./src/main/assets/blockly')
+    rename('index.html', 'webview.html')
+}
+
+task copyBlocklyDistFiles(type: Copy) {
+    from('../../../../dist') {
+        include 'blockly_compressed.js', 'blocks_compressed.js'
+    }
+    into project(':app').file('./src/main/assets/blockly')
+}
+
+task copyBlocklyBuildFiles(type: Copy) {
+    from('../../../../build') {
+        include 'msg/**'
+    }
+    into project(':app').file('./src/main/assets/blockly')
+}
+
+task copyBlocklyMediaFiles(type: Copy) {
+    from('../../../..') {
+        include 'media/**'
+        exclude 'media/test_*'
+    }
+    into project(':app').file('./src/main/assets/blockly')
+}
+
+project.afterEvaluate {
+    preBuild.dependsOn(copyBlocklyHtmlFile, copyBlocklyBuildFiles, copyBlocklyDistFiles, copyBlocklyMediaFiles)
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation 'com.android.support:appcompat-v7:27.1.1'
+    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
+    testImplementation 'junit:junit:4.12'
+    androidTestImplementation 'com.android.support.test:runner:1.0.2'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
+}

package/blockly-rc/demos/mobile/android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

package/blockly-rc/demos/mobile/android/app/src/androidTest/java/com/example/blocklywebview/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.example.blocklywebview;
+
+import android.content.Context;
+import android.support.test.InstrumentationRegistry;
+import android.support.test.runner.AndroidJUnit4;
+
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import static org.junit.Assert.*;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+    @Test
+    public void useAppContext() {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getTargetContext();
+
+        assertEquals("com.example.blocklywebview", appContext.getPackageName());
+    }
+}

package/blockly-rc/demos/mobile/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.example.blocklywebview">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+        <activity android:name="com.google.blockly.android.webview.demo.MainActivity">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

package/blockly-rc/demos/mobile/android/app/src/main/java/com/google/blockly/android/webview/BlocklyWebViewFragment.java

@@ -0,0 +1,40 @@
+package com.google.blockly.android.webview;
+
+import android.annotation.SuppressLint;
+import android.os.Bundle;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+
+/**
+ * This fragments contains and manages the web view that hosts Blockly.
+ */
+public class BlocklyWebViewFragment extends Fragment {
+    protected @Nullable WebView mWebView = null;
+
+    @SuppressLint("SetJavaScriptEnabled")
+    @Nullable
+    @Override
+    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
+            @Nullable Bundle savedInstanceState) {
+        mWebView = new WebView(inflater.getContext());
+        mWebView.setWebChromeClient(new WebChromeClient());
+        WebSettings webSettings = mWebView.getSettings();
+        webSettings.setJavaScriptEnabled(true);
+        mWebView.loadUrl("file:///android_asset/blockly/webview.html");
+        return mWebView;
+    }
+
+    // TODO: Method to invoke code generation
+    // TODO: Method to load workspace from string (or InputStream?)
+    // TODO: Method to serialize workspace to string (or OutputStream?)
+    // TODO: Clear / reset workspace
+    // TODO: Load toolbox
+    // TODO: Listener for event JSON
+    // TODO: Method to evaluate JavaScript string in the WebView
+}