diff --git a/editor/extension.ts b/editor/extension.ts index 473cea7d..969eeb85 100644 --- a/editor/extension.ts +++ b/editor/extension.ts @@ -3,6 +3,7 @@ import { deployCoreAsync, initAsync } from "./deploy"; import { FieldPorts } from "./field_ports"; +import { FieldImages } from "./field_images"; pxt.editor.initExtensionsAsync = function(opts: pxt.editor.ExtensionOptions): Promise { pxt.debug('loading pxt-ev3 target extensions...') @@ -11,6 +12,9 @@ pxt.editor.initExtensionsAsync = function(opts: pxt.editor.ExtensionOptions): Pr fieldEditors: [{ selector: "ports", editor: FieldPorts + }, { + selector: "images", + editor: FieldImages }], deployCoreAsync }; diff --git a/editor/field_images.ts b/editor/field_images.ts new file mode 100644 index 00000000..2357a580 --- /dev/null +++ b/editor/field_images.ts @@ -0,0 +1,114 @@ +/// +/// +/// + +export interface FieldImagesOptions extends pxtblockly.FieldImageDropdownOptions { +} + +export class FieldImages extends pxtblockly.FieldImageDropdown implements Blockly.FieldCustom { + public isFieldCustom_ = true; + + constructor(text: string, options: FieldImagesOptions, validator?: Function) { + super(text, options, validator); + } + + /** + * Create a dropdown menu under the text. + * @private + */ + public showEditor_() { + // If there is an existing drop-down we own, this is a request to hide the drop-down. + if (Blockly.DropDownDiv.hideIfOwner(this)) { + return; + } + // If there is an existing drop-down someone else owns, hide it immediately and clear it. + Blockly.DropDownDiv.hideWithoutAnimation(); + Blockly.DropDownDiv.clearContent(); + // Populate the drop-down with the icons for this field. + let dropdownDiv = Blockly.DropDownDiv.getContentDiv(); + let contentDiv = document.createElement('div'); + // Accessibility properties + contentDiv.setAttribute('role', 'menu'); + contentDiv.setAttribute('aria-haspopup', 'true'); + const options = this.getOptions(); + for (let i = 0, option: any; option = options[i]; i++) { + let content = (options[i] as any)[0]; // Human-readable text or image. + const value = (options[i] as any)[1]; // Language-neutral value. + // Icons with the type property placeholder take up space but don't have any functionality + // Use for special-case layouts + if (content.type == 'placeholder') { + let placeholder = document.createElement('span'); + placeholder.setAttribute('class', 'blocklyDropDownPlaceholder'); + placeholder.style.width = content.width + 'px'; + placeholder.style.height = content.height + 'px'; + contentDiv.appendChild(placeholder); + continue; + } + let button = document.createElement('button'); + button.setAttribute('id', ':' + i); // For aria-activedescendant + button.setAttribute('role', 'menuitem'); + button.setAttribute('class', 'blocklyDropDownButton'); + button.title = content.alt; + if ((this as any).columns_) { + button.style.width = (((this as any).width_ / (this as any).columns_) - 8) + 'px'; + //button.style.height = ((this.width_ / this.columns_) - 8) + 'px'; + } else { + button.style.width = content.width + 'px'; + button.style.height = content.height + 'px'; + } + let backgroundColor = this.sourceBlock_.getColour(); + if (value == this.getValue()) { + // This icon is selected, show it in a different colour + backgroundColor = this.sourceBlock_.getColourTertiary(); + button.setAttribute('aria-selected', 'true'); + } + button.style.backgroundColor = backgroundColor; + button.style.borderColor = this.sourceBlock_.getColourTertiary(); + Blockly.bindEvent_(button, 'click', this, (this as any).buttonClick_); + Blockly.bindEvent_(button, 'mouseup', this, (this as any).buttonClick_); + // These are applied manually instead of using the :hover pseudoclass + // because Android has a bad long press "helper" menu and green highlight + // that we must prevent with ontouchstart preventDefault + Blockly.bindEvent_(button, 'mousedown', button, function (e) { + this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover'); + e.preventDefault(); + }); + Blockly.bindEvent_(button, 'mouseover', button, function () { + this.setAttribute('class', 'blocklyDropDownButton blocklyDropDownButtonHover'); + contentDiv.setAttribute('aria-activedescendant', this.id); + }); + Blockly.bindEvent_(button, 'mouseout', button, function () { + this.setAttribute('class', 'blocklyDropDownButton'); + contentDiv.removeAttribute('aria-activedescendant'); + }); + let buttonImg = document.createElement('img'); + buttonImg.src = content.src; + //buttonImg.alt = icon.alt; + // Upon click/touch, we will be able to get the clicked element as e.target + // Store a data attribute on all possible click targets so we can match it to the icon. + button.setAttribute('data-value', value); + buttonImg.setAttribute('data-value', value); + button.appendChild(buttonImg); + contentDiv.appendChild(button); + } + contentDiv.style.width = (this as any).width_ + 'px'; + dropdownDiv.appendChild(contentDiv); + + Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), this.sourceBlock_.getColourTertiary()); + + // Calculate positioning based on the field position. + var scale = this.sourceBlock_.workspace.scale; + var bBox = { width: this.size_.width, height: this.size_.height }; + bBox.width *= scale; + bBox.height *= scale; + var position = this.fieldGroup_.getBoundingClientRect(); + var primaryX = position.left + bBox.width / 2; + var primaryY = position.top + bBox.height; + var secondaryX = primaryX; + var secondaryY = position.top; + // Set bounds to workspace; show the drop-down. + (Blockly.DropDownDiv as any).setBoundsElement(this.sourceBlock_.workspace.getParentSvg().parentNode); + (Blockly.DropDownDiv as any).show(this, primaryX, primaryY, secondaryX, secondaryY, + (this as any).onHide_.bind(this)); + } +} \ No newline at end of file diff --git a/legoresources/MC22122017/01a - MakeCode - EV3 start-expand@2x.png b/legoresources/MC22122017/01a - MakeCode - EV3 start-expand@2x.png new file mode 100644 index 00000000..27d8cfeb Binary files /dev/null and b/legoresources/MC22122017/01a - MakeCode - EV3 start-expand@2x.png differ diff --git a/legoresources/MC22122017/01b - MakeCode - basicdesign@2x.png b/legoresources/MC22122017/01b - MakeCode - basicdesign@2x.png new file mode 100644 index 00000000..2ad091a2 Binary files /dev/null and b/legoresources/MC22122017/01b - MakeCode - basicdesign@2x.png differ diff --git a/legoresources/MC22122017/01c - MakeCode - basicdesign – expanded menu@2x.png b/legoresources/MC22122017/01c - MakeCode - basicdesign – expanded menu@2x.png new file mode 100644 index 00000000..4b6fcbdc Binary files /dev/null and b/legoresources/MC22122017/01c - MakeCode - basicdesign – expanded menu@2x.png differ diff --git a/legoresources/MC22122017/01c - MakeCode - basicdesign – expanded sensor@2x.png b/legoresources/MC22122017/01c - MakeCode - basicdesign – expanded sensor@2x.png new file mode 100644 index 00000000..f3236aed Binary files /dev/null and b/legoresources/MC22122017/01c - MakeCode - basicdesign – expanded sensor@2x.png differ diff --git a/legoresources/MC22122017/02a - MakeCode - portselector@2x.png b/legoresources/MC22122017/02a - MakeCode - portselector@2x.png new file mode 100644 index 00000000..53263836 Binary files /dev/null and b/legoresources/MC22122017/02a - MakeCode - portselector@2x.png differ diff --git a/legoresources/MC22122017/03a - MakeCode - all elements@2x.png b/legoresources/MC22122017/03a - MakeCode - all elements@2x.png new file mode 100644 index 00000000..211b9111 Binary files /dev/null and b/legoresources/MC22122017/03a - MakeCode - all elements@2x.png differ diff --git a/legoresources/MC22122017/03b - MakeCode - motorsync@2x.png b/legoresources/MC22122017/03b - MakeCode - motorsync@2x.png new file mode 100644 index 00000000..39aec414 Binary files /dev/null and b/legoresources/MC22122017/03b - MakeCode - motorsync@2x.png differ diff --git a/legoresources/MC22122017/04a - MakeCode - medmotor@2x.png b/legoresources/MC22122017/04a - MakeCode - medmotor@2x.png new file mode 100644 index 00000000..0aa3295e Binary files /dev/null and b/legoresources/MC22122017/04a - MakeCode - medmotor@2x.png differ diff --git a/legoresources/MC22122017/04b - MakeCode - medmotor@2x.png b/legoresources/MC22122017/04b - MakeCode - medmotor@2x.png new file mode 100644 index 00000000..06e48ea9 Binary files /dev/null and b/legoresources/MC22122017/04b - MakeCode - medmotor@2x.png differ diff --git a/legoresources/MC22122017/05a - MakeCode - large motor@2x.png b/legoresources/MC22122017/05a - MakeCode - large motor@2x.png new file mode 100644 index 00000000..9f23e67a Binary files /dev/null and b/legoresources/MC22122017/05a - MakeCode - large motor@2x.png differ diff --git a/legoresources/MC22122017/05b - MakeCode - large motor@2x.png b/legoresources/MC22122017/05b - MakeCode - large motor@2x.png new file mode 100644 index 00000000..298609c3 Binary files /dev/null and b/legoresources/MC22122017/05b - MakeCode - large motor@2x.png differ diff --git a/legoresources/MC22122017/06 - MakeCode - color - 1@2x.png b/legoresources/MC22122017/06 - MakeCode - color - 1@2x.png new file mode 100644 index 00000000..015dee4c Binary files /dev/null and b/legoresources/MC22122017/06 - MakeCode - color - 1@2x.png differ diff --git a/legoresources/MC22122017/06 - MakeCode - color - 2@2x.png b/legoresources/MC22122017/06 - MakeCode - color - 2@2x.png new file mode 100644 index 00000000..75302470 Binary files /dev/null and b/legoresources/MC22122017/06 - MakeCode - color - 2@2x.png differ diff --git a/legoresources/MC22122017/06 - MakeCode - color - 3@2x.png b/legoresources/MC22122017/06 - MakeCode - color - 3@2x.png new file mode 100644 index 00000000..6583e9ca Binary files /dev/null and b/legoresources/MC22122017/06 - MakeCode - color - 3@2x.png differ diff --git a/legoresources/MC22122017/07a - MakeCode - Gyro@2x.png b/legoresources/MC22122017/07a - MakeCode - Gyro@2x.png new file mode 100644 index 00000000..73a7c94b Binary files /dev/null and b/legoresources/MC22122017/07a - MakeCode - Gyro@2x.png differ diff --git a/legoresources/MC22122017/07b - MakeCode - Gyro@2x.png b/legoresources/MC22122017/07b - MakeCode - Gyro@2x.png new file mode 100644 index 00000000..6595c042 Binary files /dev/null and b/legoresources/MC22122017/07b - MakeCode - Gyro@2x.png differ diff --git a/legoresources/MC22122017/08 - MakeCode - UltraSound@2x.png b/legoresources/MC22122017/08 - MakeCode - UltraSound@2x.png new file mode 100644 index 00000000..55ca10b7 Binary files /dev/null and b/legoresources/MC22122017/08 - MakeCode - UltraSound@2x.png differ diff --git a/legoresources/MC22122017/09a - MakeCode - display image@2x.png b/legoresources/MC22122017/09a - MakeCode - display image@2x.png new file mode 100644 index 00000000..6325ce43 Binary files /dev/null and b/legoresources/MC22122017/09a - MakeCode - display image@2x.png differ diff --git a/legoresources/MC22122017/10a - MakeCode – mouseover@2x.png b/legoresources/MC22122017/10a - MakeCode – mouseover@2x.png new file mode 100644 index 00000000..86b5a748 Binary files /dev/null and b/legoresources/MC22122017/10a - MakeCode – mouseover@2x.png differ diff --git a/legoresources/MC22122017/10b - MakeCode – mouseover@2x.png b/legoresources/MC22122017/10b - MakeCode – mouseover@2x.png new file mode 100644 index 00000000..48eff7da Binary files /dev/null and b/legoresources/MC22122017/10b - MakeCode – mouseover@2x.png differ diff --git a/legoresources/MC22122017/10c - MakeCode - popup w-overlay@2x.png b/legoresources/MC22122017/10c - MakeCode - popup w-overlay@2x.png new file mode 100644 index 00000000..1e6b036e Binary files /dev/null and b/legoresources/MC22122017/10c - MakeCode - popup w-overlay@2x.png differ diff --git a/legoresources/MC22122017/11a - MakeCode - delete block@2x.png b/legoresources/MC22122017/11a - MakeCode - delete block@2x.png new file mode 100644 index 00000000..59182dfb Binary files /dev/null and b/legoresources/MC22122017/11a - MakeCode - delete block@2x.png differ diff --git a/legoresources/MC22122017/11b - MakeCode - delete block@2x.png b/legoresources/MC22122017/11b - MakeCode - delete block@2x.png new file mode 100644 index 00000000..90d7af37 Binary files /dev/null and b/legoresources/MC22122017/11b - MakeCode - delete block@2x.png differ diff --git a/legoresources/MC22122017/12a - MakeCode - fullscreen@2x.png b/legoresources/MC22122017/12a - MakeCode - fullscreen@2x.png new file mode 100644 index 00000000..2f439d4f Binary files /dev/null and b/legoresources/MC22122017/12a - MakeCode - fullscreen@2x.png differ diff --git a/legoresources/MC22122017/12b - MakeCode - fullscreen@2x.png b/legoresources/MC22122017/12b - MakeCode - fullscreen@2x.png new file mode 100644 index 00000000..8778901e Binary files /dev/null and b/legoresources/MC22122017/12b - MakeCode - fullscreen@2x.png differ diff --git a/legoresources/MC22122017/Loader - 1@2x.png b/legoresources/MC22122017/Loader - 1@2x.png new file mode 100644 index 00000000..018eca5b Binary files /dev/null and b/legoresources/MC22122017/Loader - 1@2x.png differ diff --git a/legoresources/MC22122017/Loader – 2@2x.png b/legoresources/MC22122017/Loader – 2@2x.png new file mode 100644 index 00000000..fdc5410d Binary files /dev/null and b/legoresources/MC22122017/Loader – 2@2x.png differ diff --git a/legoresources/MC22122017/XX-blocks@2x.png b/legoresources/MC22122017/XX-blocks@2x.png new file mode 100644 index 00000000..5845bc11 Binary files /dev/null and b/legoresources/MC22122017/XX-blocks@2x.png differ diff --git a/libs/core/screen.ts b/libs/core/screen.ts index 4d47d4c6..466a5b48 100644 --- a/libs/core/screen.ts +++ b/libs/core/screen.ts @@ -151,9 +151,9 @@ namespace brick { * @param image the image */ //% blockId=screen_image_picker block="%image" shim=TD_ID - //% image.fieldEditor="imagedropdown" + //% image.fieldEditor="images" //% image.fieldOptions.columns=6 - //% image.fieldOptions.hasSearchBar=true + //% image.fieldOptions.width=600 //% group="Screen" weight=0 blockHidden=1 export function __imagePicker(image: Image): Image { return image;