mirror of
https://github.com/google/blockly.git
synced 2026-01-07 09:00:11 +01:00
7ccdcc5cef
* refactor(events): Use "export ... from" where applicable
* refactor(events): Introduce EventType enum
Introduce an enum for the event .type values. We can't actually
use it as the type of the .type property on Abstract events,
because we want to allow developers to add their own custom
event types inheriting from this type, but at least this way we
can be reasonably sure that all of our own event subclasses have
distinct .type values—plus consistent use of enum syntax
(EventType.TYPE_NAME) is probably good for readability overall.
Put it in a separate module from the rest of events/utils.ts
because it would be helpful if event utils could use
event instanceof SomeEventType
for type narrowing but but at the moment most events are in
modules that depend on events/utils.ts for their .type
constant, and although circular ESM dependencies should work
in principle there are various restrictions and this
particular circularity causes issues at the moment.
A few of the event classes also depend on utils.ts for fire()
or other functions, which will be harder to deal with, but at
least this commit is win in terms of reducing the complexity
of our dependencies, making most of the Abstract event subclass
module dependent on type.ts, which has no imports, rather than
on utils.ts which has multiple imports.
413 lines
13 KiB
JavaScript
413 lines
13 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2020 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {EventType} from '../../build/src/core/events/type.js';
|
|
import {assert} from '../../node_modules/chai/chai.js';
|
|
import {defineStackBlock} from './test_helpers/block_definitions.js';
|
|
import {
|
|
assertEventFired,
|
|
assertEventNotFired,
|
|
createChangeListenerSpy,
|
|
} from './test_helpers/events.js';
|
|
import {
|
|
sharedTestSetup,
|
|
sharedTestTeardown,
|
|
} from './test_helpers/setup_teardown.js';
|
|
import {testAWorkspace} from './test_helpers/workspace.js';
|
|
|
|
suite('WorkspaceSvg', function () {
|
|
setup(function () {
|
|
this.clock = sharedTestSetup.call(this, {fireEventsNow: false}).clock;
|
|
const toolbox = document.getElementById('toolbox-categories');
|
|
this.workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
|
|
Blockly.defineBlocksWithJsonArray([
|
|
{
|
|
'type': 'simple_test_block',
|
|
'message0': 'simple test block',
|
|
'output': null,
|
|
},
|
|
{
|
|
'type': 'test_val_in',
|
|
'message0': 'test in %1',
|
|
'args0': [
|
|
{
|
|
'type': 'input_value',
|
|
'name': 'NAME',
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
});
|
|
|
|
teardown(function () {
|
|
sharedTestTeardown.call(this);
|
|
});
|
|
|
|
test('dispose of WorkspaceSvg without dom throws no error', function () {
|
|
const ws = new Blockly.WorkspaceSvg(new Blockly.Options({}));
|
|
ws.dispose();
|
|
});
|
|
|
|
test('appendDomToWorkspace alignment', function () {
|
|
const dom = Blockly.utils.xml.textToDom(
|
|
'<xml xmlns="https://developers.google.com/blockly/xml">' +
|
|
' <block type="math_random_float" inline="true" x="21" y="23">' +
|
|
' </block>' +
|
|
'</xml>',
|
|
);
|
|
Blockly.Xml.appendDomToWorkspace(dom, this.workspace);
|
|
assert.equal(this.workspace.getAllBlocks(false).length, 1, 'Block count');
|
|
Blockly.Xml.appendDomToWorkspace(dom, this.workspace);
|
|
assert.equal(this.workspace.getAllBlocks(false).length, 2, 'Block count');
|
|
const blocks = this.workspace.getAllBlocks(false);
|
|
assert.equal(
|
|
blocks[0].getRelativeToSurfaceXY().x,
|
|
21,
|
|
'Block 1 position x',
|
|
);
|
|
assert.equal(
|
|
blocks[0].getRelativeToSurfaceXY().y,
|
|
23,
|
|
'Block 1 position y',
|
|
);
|
|
assert.equal(
|
|
blocks[1].getRelativeToSurfaceXY().x,
|
|
21,
|
|
'Block 2 position x',
|
|
);
|
|
// Y separation value defined in appendDomToWorkspace as 10
|
|
assert.equal(
|
|
blocks[1].getRelativeToSurfaceXY().y,
|
|
23 + blocks[0].getHeightWidth().height + 10,
|
|
'Block 2 position y',
|
|
);
|
|
});
|
|
|
|
test('Replacing shadow disposes of old shadow', function () {
|
|
const dom = Blockly.utils.xml.textToDom(
|
|
'<xml xmlns="https://developers.google.com/blockly/xml">' +
|
|
'<block type="test_val_in">' +
|
|
'<value name="NAME">' +
|
|
'<shadow type="simple_test_block"></shadow>' +
|
|
'</value>' +
|
|
'</block>' +
|
|
'</xml>',
|
|
);
|
|
|
|
Blockly.Xml.appendDomToWorkspace(dom, this.workspace);
|
|
const blocks = this.workspace.getAllBlocks(false);
|
|
assert.equal(blocks.length, 2, 'Block count');
|
|
const shadowBlock = blocks[1];
|
|
assert.equal(false, shadowBlock.isDeadOrDying());
|
|
|
|
const block = this.workspace.newBlock('simple_test_block');
|
|
block.initSvg();
|
|
|
|
const inputConnection = this.workspace
|
|
.getTopBlocks()[0]
|
|
.getInput('NAME').connection;
|
|
inputConnection.connect(block.outputConnection);
|
|
assert.equal(false, block.isDeadOrDying());
|
|
assert.equal(true, shadowBlock.isDeadOrDying());
|
|
});
|
|
|
|
suite('updateToolbox', function () {
|
|
test('Passes in null when toolbox exists', function () {
|
|
assert.throws(
|
|
function () {
|
|
this.workspace.updateToolbox(null);
|
|
}.bind(this),
|
|
"Can't nullify an existing toolbox.",
|
|
);
|
|
});
|
|
test('Passes in toolbox def when current toolbox is null', function () {
|
|
this.workspace.options.languageTree = null;
|
|
assert.throws(
|
|
function () {
|
|
this.workspace.updateToolbox({'contents': []});
|
|
}.bind(this),
|
|
"Existing toolbox is null. Can't create new toolbox.",
|
|
);
|
|
});
|
|
test('Existing toolbox has no categories', function () {
|
|
sinon
|
|
.stub(Blockly.utils.toolbox.TEST_ONLY, 'hasCategoriesInternal')
|
|
.returns(true);
|
|
this.workspace.toolbox_ = null;
|
|
assert.throws(
|
|
function () {
|
|
this.workspace.updateToolbox({'contents': []});
|
|
}.bind(this),
|
|
"Existing toolbox has no categories. Can't change mode.",
|
|
);
|
|
});
|
|
test('Existing toolbox has categories', function () {
|
|
sinon
|
|
.stub(Blockly.utils.toolbox.TEST_ONLY, 'hasCategoriesInternal')
|
|
.returns(false);
|
|
this.workspace.flyout_ = null;
|
|
assert.throws(
|
|
function () {
|
|
this.workspace.updateToolbox({'contents': []});
|
|
}.bind(this),
|
|
"Existing toolbox has categories. Can't change mode.",
|
|
);
|
|
});
|
|
});
|
|
|
|
suite('Viewport change events', function () {
|
|
function resetEventHistory(changeListenerSpy) {
|
|
changeListenerSpy.resetHistory();
|
|
}
|
|
function assertSpyFiredViewportEvent(spy, workspace, expectedProperties) {
|
|
assertEventFired(
|
|
spy,
|
|
Blockly.Events.ViewportChange,
|
|
expectedProperties,
|
|
workspace.id,
|
|
);
|
|
assertEventFired(
|
|
spy,
|
|
Blockly.Events.ViewportChange,
|
|
expectedProperties,
|
|
workspace.id,
|
|
);
|
|
}
|
|
function assertViewportEventFired(
|
|
changeListenerSpy,
|
|
workspace,
|
|
expectedEventCount = 1,
|
|
) {
|
|
const metrics = workspace.getMetrics();
|
|
const expectedProperties = {
|
|
scale: workspace.scale,
|
|
oldScale: 1,
|
|
viewTop: metrics.viewTop,
|
|
viewLeft: metrics.viewLeft,
|
|
type: EventType.VIEWPORT_CHANGE,
|
|
};
|
|
assertSpyFiredViewportEvent(
|
|
changeListenerSpy,
|
|
workspace,
|
|
expectedProperties,
|
|
);
|
|
sinon.assert.callCount(changeListenerSpy, expectedEventCount);
|
|
}
|
|
function runViewportEventTest(
|
|
eventTriggerFunc,
|
|
changeListenerSpy,
|
|
workspace,
|
|
clock,
|
|
expectedEventCount = 1,
|
|
) {
|
|
clock.runAll();
|
|
resetEventHistory(changeListenerSpy);
|
|
eventTriggerFunc();
|
|
clock.runAll();
|
|
assertViewportEventFired(
|
|
changeListenerSpy,
|
|
workspace,
|
|
expectedEventCount,
|
|
);
|
|
}
|
|
setup(function () {
|
|
defineStackBlock();
|
|
this.changeListenerSpy = createChangeListenerSpy(this.workspace);
|
|
});
|
|
teardown(function () {
|
|
delete Blockly.Blocks['stack_block'];
|
|
});
|
|
|
|
suite('zoom', function () {
|
|
test('setScale', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.setScale(2),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('zoom(50, 50, 1)', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.zoom(50, 50, 1),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('zoom(50, 50, -1)', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.zoom(50, 50, -1),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('zoomCenter(1)', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.zoomCenter(1),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('zoomCenter(-1)', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.zoomCenter(-1),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('zoomToFit', function () {
|
|
const block = this.workspace.newBlock('stack_block');
|
|
block.initSvg();
|
|
block.render();
|
|
runViewportEventTest(
|
|
() => this.workspace.zoomToFit(),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
});
|
|
suite('scroll', function () {
|
|
test('centerOnBlock', function () {
|
|
const block = this.workspace.newBlock('stack_block');
|
|
block.initSvg();
|
|
block.render();
|
|
runViewportEventTest(
|
|
() => this.workspace.centerOnBlock(block.id),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('scroll', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.scroll(50, 50),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
test('scrollCenter', function () {
|
|
runViewportEventTest(
|
|
() => this.workspace.scrollCenter(),
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
);
|
|
});
|
|
});
|
|
suite('Blocks triggering viewport changes', function () {
|
|
test('block move that triggers scroll', function () {
|
|
const block = this.workspace.newBlock('stack_block');
|
|
block.initSvg();
|
|
block.render();
|
|
this.clock.runAll();
|
|
resetEventHistory(this.changeListenerSpy);
|
|
// Expect 2 events, 1 move, 1 viewport
|
|
runViewportEventTest(
|
|
() => {
|
|
block.moveBy(1000, 1000);
|
|
},
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
2,
|
|
);
|
|
});
|
|
test("domToWorkspace that doesn't trigger scroll", function () {
|
|
// 4 blocks with space in center.
|
|
Blockly.Xml.domToWorkspace(
|
|
Blockly.utils.xml.textToDom(
|
|
'<xml xmlns="https://developers.google.com/blockly/xml">' +
|
|
'<block type="controls_if" x="88" y="88"></block>' +
|
|
'<block type="controls_if" x="288" y="88"></block>' +
|
|
'<block type="controls_if" x="88" y="238"></block>' +
|
|
'<block type="controls_if" x="288" y="238"></block>' +
|
|
'</xml>',
|
|
),
|
|
this.workspace,
|
|
);
|
|
const xmlDom = Blockly.utils.xml.textToDom(
|
|
'<block type="controls_if" x="188" y="163"></block>',
|
|
);
|
|
this.clock.runAll();
|
|
resetEventHistory(this.changeListenerSpy);
|
|
// Add block in center of other blocks, not triggering scroll.
|
|
Blockly.Xml.domToWorkspace(
|
|
Blockly.utils.xml.textToDom(
|
|
'<block type="controls_if" x="188" y="163"></block>',
|
|
),
|
|
this.workspace,
|
|
);
|
|
this.clock.runAll();
|
|
assertEventNotFired(
|
|
this.changeListenerSpy,
|
|
Blockly.Events.ViewportChange,
|
|
{type: EventType.VIEWPORT_CHANGE},
|
|
);
|
|
});
|
|
test("domToWorkspace at 0,0 that doesn't trigger scroll", function () {
|
|
// 4 blocks with space in center.
|
|
Blockly.Xml.domToWorkspace(
|
|
Blockly.utils.xml.textToDom(
|
|
'<xml xmlns="https://developers.google.com/blockly/xml">' +
|
|
'<block type="controls_if" x="-75" y="-72"></block>' +
|
|
'<block type="controls_if" x="75" y="-72"></block>' +
|
|
'<block type="controls_if" x="-75" y="75"></block>' +
|
|
'<block type="controls_if" x="75" y="75"></block>' +
|
|
'</xml>',
|
|
),
|
|
this.workspace,
|
|
);
|
|
const xmlDom = Blockly.utils.xml.textToDom(
|
|
'<block type="controls_if" x="0" y="0"></block>',
|
|
);
|
|
this.clock.runAll();
|
|
resetEventHistory(this.changeListenerSpy);
|
|
// Add block in center of other blocks, not triggering scroll.
|
|
Blockly.Xml.domToWorkspace(xmlDom, this.workspace);
|
|
this.clock.runAll();
|
|
assertEventNotFired(
|
|
this.changeListenerSpy,
|
|
Blockly.Events.ViewportChange,
|
|
{type: EventType.VIEWPORT_CHANGE},
|
|
);
|
|
});
|
|
test.skip('domToWorkspace multiple blocks triggers one viewport event', function () {
|
|
// TODO: Un-skip after adding filtering for consecutive viewport events.
|
|
const addingMultipleBlocks = () => {
|
|
Blockly.Xml.domToWorkspace(
|
|
Blockly.utils.xml.textToDom(
|
|
'<xml xmlns="https://developers.google.com/blockly/xml">' +
|
|
'<block type="controls_if" x="88" y="88"></block>' +
|
|
'<block type="controls_if" x="288" y="88"></block>' +
|
|
'<block type="controls_if" x="88" y="238"></block>' +
|
|
'<block type="controls_if" x="288" y="238"></block>' +
|
|
'</xml>',
|
|
),
|
|
this.workspace,
|
|
);
|
|
};
|
|
// Expect 10 events, 4 create, 4 move, 1 viewport, 1 finished loading
|
|
runViewportEventTest(
|
|
addingMultipleBlocks,
|
|
this.changeListenerSpy,
|
|
this.workspace,
|
|
this.clock,
|
|
10,
|
|
);
|
|
});
|
|
});
|
|
});
|
|
suite('Workspace Base class', function () {
|
|
testAWorkspace();
|
|
});
|
|
});
|