From 0f9fd0e5556d66721ea6281431b723669b0f7ae9 Mon Sep 17 00:00:00 2001 From: Carlos Venegas Date: Wed, 5 Feb 2025 22:12:59 +0100 Subject: [PATCH] Optimizing load design speed --- app/index.html | 1 + app/scripts/graphics/joint.routers.js | 2 +- app/scripts/graphics/joint.shapes.js | 411 +----------------- app/scripts/graphics/joint.shapes/code.js | 11 +- app/scripts/graphics/joint.shapes/constant.js | 11 +- app/scripts/graphics/joint.shapes/io.js | 11 +- app/scripts/graphics/joint.shapes/memory.js | 399 +++++++++++++++++ app/styles/design.css | 2 +- 8 files changed, 432 insertions(+), 416 deletions(-) create mode 100644 app/scripts/graphics/joint.shapes/memory.js diff --git a/app/index.html b/app/index.html index 898eaaa54..c1e2e3b78 100644 --- a/app/index.html +++ b/app/index.html @@ -490,6 +490,7 @@ + diff --git a/app/scripts/graphics/joint.routers.js b/app/scripts/graphics/joint.routers.js index c520377e1..cb02b21b3 100644 --- a/app/scripts/graphics/joint.routers.js +++ b/app/scripts/graphics/joint.routers.js @@ -16,7 +16,7 @@ joint.routers.ice = (function (g, _, joint) { // if number of route finding loops exceed the maximum, stops searching and returns // fallback route - maximumLoops: 820, //2000 + maximumLoops: 1000, //2000 // possible starting directions from an element startDirections: ['right', 'bottom'], diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js index 0e8706c37..1d5b6809a 100644 --- a/app/scripts/graphics/joint.shapes.js +++ b/app/scripts/graphics/joint.shapes.js @@ -653,12 +653,19 @@ joint.shapes.ice.GenericView = joint.shapes.ice.ModelView.extend({ //-- correctly, until this is fixed, bypass the optimization //-- let temporalBypass = true; + let width = WIRE_WIDTH * state.zoom; + if (temporalBypass || this.initialized === false) { this.initialized = true; - // Render ports width - let width = WIRE_WIDTH * state.zoom; + const nwidth = width * 3; + let tokId = 'port-wire-' + modelId + '-'; + let dome; + this.cacheDome = {}; + let ckey = '--'; + + // Render ports width // var pwires = this.$el[0].getElementsByClassName("port-wire"); - if (typeof this.pwires === 'undefined') { + /* if (typeof this.pwires === 'undefined') { this.pwires = this.$el[0].getElementsByClassName('port-wire'); } @@ -669,12 +676,7 @@ joint.shapes.ice.GenericView = joint.shapes.ice.ModelView.extend({ value: width + 'px', }); } - const nwidth = width * 3; - let tokId = 'port-wire-' + modelId + '-'; - let dome; - this.cacheDome = {}; - let ckey = '--'; - for (i = 0; i < leftPorts.length; i++) { + for (i = 0; i < leftPorts.length; i++) { port = leftPorts[i]; if (port.size > 1) { ckey = tokId + port.id; @@ -709,7 +711,7 @@ joint.shapes.ice.GenericView = joint.shapes.ice.ModelView.extend({ value: nwidth + 'px', }); } - } + }*/ // Render rules var portDefault, paths, rects, j; @@ -781,393 +783,4 @@ joint.shapes.ice.GenericView = joint.shapes.ice.ModelView.extend({ return false; }, }); -// Memory block - -joint.shapes.ice.Memory = joint.shapes.ice.Model.extend({ - defaults: joint.util.deepSupplement( - { - type: 'ice.Memory', - size: { - width: 96, - height: 104, - }, - }, - joint.shapes.ice.Model.prototype.defaults - ), -}); - -joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ - initialize: function () { - _.bindAll(this, 'updateBox'); - joint.dia.ElementView.prototype.initialize.apply(this, arguments); - - var id = sha1(this.model.get('id')).toString().substring(0, 6); - var editorLabel = 'editor' + id; - - // Select "ace-editor" theme depending on "uiTheme" profile variable - var editorTheme; - if (global.uiTheme === 'dark') { - // DARK -> theme monokai - editorTheme = 'monokai'; - } else { - editorTheme = 'chrome'; // DEFAULT or LIGHT -> theme chrome - } - - this.$box = $( - joint.util.template( - '\ -
\ -
\ -
\ - \ - \ -
\ -
\ -
\ - \ -
\ -
\ - ' - )() - ); - - this.editorSelector = this.$box.find('.memory-editor'); - this.contentSelector = this.$box.find('.memory-content'); - this.headerSelector = this.$box.find('.header'); - - this.model.on('change', this.updateBox, this); - this.model.on('remove', this.removeBox, this); - - this.listenTo(this.model, 'process:ports', this.update); - joint.dia.ElementView.prototype.initialize.apply(this, arguments); - - // Prevent paper from handling pointerdown. - this.editorSelector.on('mousedown click', function (event) { - event.stopPropagation(); - }); - - this.updateBox(); - - this.updating = false; - this.prevZoom = 0; - this.deltas = []; - this.counter = 0; - this.timer = null; - var undoGroupingInterval = 200; - - var self = this; - this.editor = ace.edit(this.editorSelector[0]); - this.updateScrollStatus(false); - this.editor.$blockScrolling = Infinity; - this.editor.commands.removeCommand('touppercase'); - this.editor.session.on('change', function (delta) { - if (!self.updating) { - // Check consecutive-change interval - if (Date.now() - self.counter < undoGroupingInterval) { - clearTimeout(self.timer); - } - // Update deltas - self.deltas = self.deltas.concat([delta]); - // Launch timer - self.timer = setTimeout(function () { - var deltas = JSON.parse(JSON.stringify(self.deltas)); - // Set deltas - self.model.set('deltas', deltas); - // Reset deltas - self.deltas = []; - // Set data.list - self.model.attributes.data.list = self.editor.session.getValue(); - }, undoGroupingInterval); - // Reset counter - self.counter = Date.now(); - } - }); - this.editor.on('focus', function () { - self.updateScrollStatus(true); - $(document).trigger('disableSelected'); - self.editor.setHighlightActiveLine(true); - self.editor.setHighlightGutterLine(true); - // Show cursor - self.editor.renderer.$cursorLayer.element.style.opacity = 1; - }); - this.editor.on('blur', function () { - self.updateScrollStatus(false); - var selection = self.editor.session.selection; - if (selection) { - selection.clearSelection(); - } - self.editor.setHighlightActiveLine(false); - self.editor.setHighlightGutterLine(false); - // Hide cursor - self.editor.renderer.$cursorLayer.element.style.opacity = 0; - }); - this.editor.on('paste', function (e) { - if (e.text.startsWith('{"icestudio":')) { - // Prevent paste blocks - e.text = ''; - } - }); - this.editor.on('mousewheel', function (event) { - // Stop mousewheel event propagation when target is active - if ( - document.activeElement.parentNode.id === self.editorSelector.attr('id') - ) { - // Enable only scroll - event.stopPropagation(); - } else { - // Enable only zoom - event.preventDefault(); - } - }); - - this.setupResizer(); - - // Apply data - this.apply({ ini: true }); - }, - - apply: function (opt) { - this.applyName(); - this.applyLocal(); - this.applyValue(opt); - this.applyFormat(); - if (this.editor) { - this.editor.resize(); - } - }, - - applyName: function () { - var name = this.model.get('data').name; - this.$box.find('label').text(name); - }, - - applyLocal: function () { - if (this.model.get('data').local) { - this.$box.find('svg').removeClass('hidden'); - } else { - this.$box.find('svg').addClass('hidden'); - } - }, - - applyValue: function (opt) { - this.updating = true; - var data = this.model.get('data'); - - opt = opt || {}; - - if (opt.ini) { - this.editor.session.setValue(data.list); - } else { - // Set data.list - this.model.attributes.data.list = this.editor.session.getValue(); - } - setTimeout( - function (self) { - self.updating = false; - }, - 10, - this - ); - }, - - applyFormat: function () { - this.updating = true; - - var self = this; - var data = this.model.get('data'); - var radix = data.format || 16; // Handle bad data that could happen in a previous .ice file - this.editor.session.gutterRenderer = { - getWidth: function (session, lastLineNumber, config) { - return lastLineNumber.toString().length * config.characterWidth; - }, - getText: function (session, row) { - var text = row.toString(radix).toUpperCase(); - var config = self.editor.renderer.layerConfig; - var size = config.lastRow.toString(radix).length; - while (text.length < size) { - text = '0' + text; - } - return (radix === 16 ? '0x' : '') + text; - }, - }; - // this.editor.renderer.setShowGutter(false); - this.editor.renderer.setShowGutter(true); - - this.updating = false; - }, - - update: function () { - this.renderPorts(); - this.editor.setReadOnly(this.model.get('disabled')); - joint.dia.ElementView.prototype.update.apply(this, arguments); - }, - - updateBox: function () { - var bbox = this.model.getBBox(); - var data = this.model.get('data'); - var state = this.model.get('state'); - - var pendingTasks = []; - var editorUpdated = false; - - if (this.editor) { - if (this.prevZoom !== state.zoom) { - this.prevZoom = state.zoom; - editorUpdated = true; - - pendingTasks.push( - { - e: this.editorSelector[0], - property: 'top', - value: 24 * state.zoom + 'px', - }, - { - e: this.editorSelector[0], - property: 'margin', - value: 7 * state.zoom + 'px', - }, - { - e: this.editorSelector[0], - property: 'border-radius', - value: 5 * state.zoom + 'px', - }, - { - e: this.editorSelector[0], - property: 'border-width', - value: state.zoom + 0.5 + 'px', - } - ); - - var textLayers = this.$box[0].querySelectorAll('.ace_text-layer'); - for (var i = 0; i < textLayers.length; i++) { - pendingTasks.push({ - e: textLayers[i], - property: 'padding', - value: '0px ' + Math.round(4 * state.zoom) + 'px', - }); - } - } - - if (editorUpdated) { - this.editor.setFontSize(Math.round(aceFontSize * state.zoom)); - this.editor.renderer.$cursorLayer.$padding = Math.round(4 * state.zoom); - } - - this.editor.resize(); - } - - var wireWidth = WIRE_WIDTH * state.zoom; - var wires = this.$el[0].getElementsByClassName('port-wire'); - for (var j = 0; j < wires.length; j++) { - pendingTasks.push({ - e: wires[j], - property: 'stroke-width', - value: wireWidth + 'px', - }); - } - - var topOffset = data.name || data.local ? 0 : 24; - pendingTasks.push( - { - e: this.contentSelector[0], - property: 'left', - value: Math.round((bbox.width / 2.0) * (state.zoom - 1)) + 'px', - }, - { - e: this.contentSelector[0], - property: 'top', - value: - Math.round( - ((bbox.height + topOffset) / 2.0) * (state.zoom - 1) + topOffset - ) + 'px', - }, - { - e: this.contentSelector[0], - property: 'width', - value: Math.round(bbox.width) + 'px', - }, - { - e: this.contentSelector[0], - property: 'height', - value: Math.round(bbox.height - topOffset) + 'px', - }, - { - e: this.contentSelector[0], - property: 'transform', - value: 'scale(' + state.zoom + ')', - } - ); - - if (data.name || data.local) { - this.headerSelector.removeClass('hidden'); - } else { - this.headerSelector.addClass('hidden'); - } - - pendingTasks.push( - { - e: this.$box[0], - property: 'left', - value: bbox.x * state.zoom + state.pan.x + 'px', - }, - { - e: this.$box[0], - property: 'top', - value: bbox.y * state.zoom + state.pan.y + 'px', - }, - { - e: this.$box[0], - property: 'width', - value: bbox.width * state.zoom + 'px', - }, - { - e: this.$box[0], - property: 'height', - value: bbox.height * state.zoom + 'px', - } - ); - - requestAnimationFrame(() => { - for (let task of pendingTasks) { - if (task.e) { - task.e.style[task.property] = task.value; - } - } - }); - }, -}); diff --git a/app/scripts/graphics/joint.shapes/code.js b/app/scripts/graphics/joint.shapes/code.js index 57462643e..e4049c690 100644 --- a/app/scripts/graphics/joint.shapes/code.js +++ b/app/scripts/graphics/joint.shapes/code.js @@ -1,5 +1,6 @@ -//-- jshint rules -/* global sha1, WIRE_WIDTH, aceFontSize */ +// jshint ignore:start + +/* --global sha1, WIRE_WIDTH, aceFontSize */ 'use strict'; @@ -272,7 +273,7 @@ joint.shapes.ice.CodeView = joint.shapes.ice.ModelView.extend({ } var wireWidth = WIRE_WIDTH * state.zoom; - this.applyStyles(this.$el[0].getElementsByClassName('port-wire'), { +/* this.applyStyles(this.$el[0].getElementsByClassName('port-wire'), { 'stroke-width': wireWidth + 'px', }); @@ -304,7 +305,7 @@ joint.shapes.ice.CodeView = joint.shapes.ice.ModelView.extend({ } } }); - } + }*/ var contentTransform = { left: Math.round((bbox.width / 2.0) * (state.zoom - 1)) + 'px', @@ -356,4 +357,4 @@ joint.shapes.ice.CodeView = joint.shapes.ice.ModelView.extend({ }, }); - +// jshint ignore:end diff --git a/app/scripts/graphics/joint.shapes/constant.js b/app/scripts/graphics/joint.shapes/constant.js index 41063730f..5de285626 100644 --- a/app/scripts/graphics/joint.shapes/constant.js +++ b/app/scripts/graphics/joint.shapes/constant.js @@ -1,5 +1,6 @@ -//-- jshint rules -/* global placementCssTasks, WIRE_WIDTH */ +//-- jshint rules +/* jshint ignore: start */ +/* --global placementCssTasks, WIRE_WIDTH */ 'use strict'; @@ -128,7 +129,7 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ // Set wire width let width = WIRE_WIDTH * state.zoom; //var pwires = this.$el[0].getElementsByClassName("port-wire"); - if (typeof this.pwires === 'undefined') { + /*if (typeof this.pwires === 'undefined') { this.pwires = this.$el[0].getElementsByClassName('port-wire'); } let i; @@ -138,9 +139,9 @@ joint.shapes.ice.ConstantView = joint.shapes.ice.ModelView.extend({ property: 'stroke-width', value: width + 'px', }); - } + }*/ return this.place('.constant-content', bbox, state, pendingTasks); }, }); - +/* jshint ignore: end */ diff --git a/app/scripts/graphics/joint.shapes/io.js b/app/scripts/graphics/joint.shapes/io.js index e25c41d37..e8fe932ec 100644 --- a/app/scripts/graphics/joint.shapes/io.js +++ b/app/scripts/graphics/joint.shapes/io.js @@ -1,6 +1,6 @@ //-- jshint rules -/* global sha1, placementCssIOTasks, WIRE_WIDTH */ - +/* --global sha1, placementCssIOTasks, WIRE_WIDTH */ +/* jshint ignore: start */ 'use strict'; @@ -397,7 +397,7 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ var paths, rects; var width = WIRE_WIDTH * state.zoom; - var pwires = this.$el[0].getElementsByClassName('port-wire'); +/*var pwires = this.$el[0].getElementsByClassName('port-wire'); for (i = 0; i < pwires.length; i++) { pendingTasks.push({ e: pwires[i], @@ -405,6 +405,7 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ value: width + 'px', }); } + // Set buses var nwidth = width * 3; tokId = 'port-wire-' + modelId + '-'; @@ -497,7 +498,7 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ }); } } - } + }*/ // return this.place(data, bbox, state, pendingTasks); }, @@ -525,4 +526,4 @@ joint.shapes.ice.IOView = joint.shapes.ice.ModelView.extend({ joint.shapes.ice.InputView = joint.shapes.ice.IOView; joint.shapes.ice.OutputView = joint.shapes.ice.IOView; - +/* jshint ignore: end */ diff --git a/app/scripts/graphics/joint.shapes/memory.js b/app/scripts/graphics/joint.shapes/memory.js new file mode 100644 index 000000000..52b595220 --- /dev/null +++ b/app/scripts/graphics/joint.shapes/memory.js @@ -0,0 +1,399 @@ +//-- jshint rules +/* jshint ignore: start */ + +/* --global sha1, aceFontSize, WIRE_WIDTH */ + +'use strict'; + + +// Memory block + +joint.shapes.ice.Memory = joint.shapes.ice.Model.extend({ + defaults: joint.util.deepSupplement( + { + type: 'ice.Memory', + size: { + width: 96, + height: 104, + }, + }, + joint.shapes.ice.Model.prototype.defaults + ), +}); + +joint.shapes.ice.MemoryView = joint.shapes.ice.ModelView.extend({ + initialize: function () { + _.bindAll(this, 'updateBox'); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); + + var id = sha1(this.model.get('id')).toString().substring(0, 6); + var editorLabel = 'editor' + id; + + // Select "ace-editor" theme depending on "uiTheme" profile variable + var editorTheme; + if (global.uiTheme === 'dark') { + // DARK -> theme monokai + editorTheme = 'monokai'; + } else { + editorTheme = 'chrome'; // DEFAULT or LIGHT -> theme chrome + } + + this.$box = $( + joint.util.template( + '\ +
\ +
\ +
\ + \ + \ +
\ +
\ +
\ + \ +
\ +
\ + ' + )() + ); + + this.editorSelector = this.$box.find('.memory-editor'); + this.contentSelector = this.$box.find('.memory-content'); + this.headerSelector = this.$box.find('.header'); + + this.model.on('change', this.updateBox, this); + this.model.on('remove', this.removeBox, this); + + this.listenTo(this.model, 'process:ports', this.update); + joint.dia.ElementView.prototype.initialize.apply(this, arguments); + + // Prevent paper from handling pointerdown. + this.editorSelector.on('mousedown click', function (event) { + event.stopPropagation(); + }); + + this.updateBox(); + + this.updating = false; + this.prevZoom = 0; + this.deltas = []; + this.counter = 0; + this.timer = null; + var undoGroupingInterval = 200; + + var self = this; + this.editor = ace.edit(this.editorSelector[0]); + this.updateScrollStatus(false); + this.editor.$blockScrolling = Infinity; + this.editor.commands.removeCommand('touppercase'); + this.editor.session.on('change', function (delta) { + if (!self.updating) { + // Check consecutive-change interval + if (Date.now() - self.counter < undoGroupingInterval) { + clearTimeout(self.timer); + } + // Update deltas + self.deltas = self.deltas.concat([delta]); + // Launch timer + self.timer = setTimeout(function () { + var deltas = JSON.parse(JSON.stringify(self.deltas)); + // Set deltas + self.model.set('deltas', deltas); + // Reset deltas + self.deltas = []; + // Set data.list + self.model.attributes.data.list = self.editor.session.getValue(); + }, undoGroupingInterval); + // Reset counter + self.counter = Date.now(); + } + }); + this.editor.on('focus', function () { + self.updateScrollStatus(true); + $(document).trigger('disableSelected'); + self.editor.setHighlightActiveLine(true); + self.editor.setHighlightGutterLine(true); + // Show cursor + self.editor.renderer.$cursorLayer.element.style.opacity = 1; + }); + this.editor.on('blur', function () { + self.updateScrollStatus(false); + var selection = self.editor.session.selection; + if (selection) { + selection.clearSelection(); + } + self.editor.setHighlightActiveLine(false); + self.editor.setHighlightGutterLine(false); + // Hide cursor + self.editor.renderer.$cursorLayer.element.style.opacity = 0; + }); + this.editor.on('paste', function (e) { + if (e.text.startsWith('{"icestudio":')) { + // Prevent paste blocks + e.text = ''; + } + }); + this.editor.on('mousewheel', function (event) { + // Stop mousewheel event propagation when target is active + if ( + document.activeElement.parentNode.id === self.editorSelector.attr('id') + ) { + // Enable only scroll + event.stopPropagation(); + } else { + // Enable only zoom + event.preventDefault(); + } + }); + + this.setupResizer(); + + // Apply data + this.apply({ ini: true }); + }, + + apply: function (opt) { + this.applyName(); + this.applyLocal(); + this.applyValue(opt); + this.applyFormat(); + if (this.editor) { + this.editor.resize(); + } + }, + + applyName: function () { + var name = this.model.get('data').name; + this.$box.find('label').text(name); + }, + + applyLocal: function () { + if (this.model.get('data').local) { + this.$box.find('svg').removeClass('hidden'); + } else { + this.$box.find('svg').addClass('hidden'); + } + }, + + applyValue: function (opt) { + this.updating = true; + var data = this.model.get('data'); + + opt = opt || {}; + + if (opt.ini) { + this.editor.session.setValue(data.list); + } else { + // Set data.list + this.model.attributes.data.list = this.editor.session.getValue(); + } + setTimeout( + function (self) { + self.updating = false; + }, + 10, + this + ); + }, + + applyFormat: function () { + this.updating = true; + + var self = this; + var data = this.model.get('data'); + var radix = data.format || 16; // Handle bad data that could happen in a previous .ice file + this.editor.session.gutterRenderer = { + getWidth: function (session, lastLineNumber, config) { + return lastLineNumber.toString().length * config.characterWidth; + }, + getText: function (session, row) { + var text = row.toString(radix).toUpperCase(); + var config = self.editor.renderer.layerConfig; + var size = config.lastRow.toString(radix).length; + while (text.length < size) { + text = '0' + text; + } + return (radix === 16 ? '0x' : '') + text; + }, + }; + // this.editor.renderer.setShowGutter(false); + this.editor.renderer.setShowGutter(true); + + this.updating = false; + }, + + update: function () { + this.renderPorts(); + this.editor.setReadOnly(this.model.get('disabled')); + joint.dia.ElementView.prototype.update.apply(this, arguments); + }, + + updateBox: function () { + var bbox = this.model.getBBox(); + var data = this.model.get('data'); + var state = this.model.get('state'); + + var pendingTasks = []; + var editorUpdated = false; + + if (this.editor) { + if (this.prevZoom !== state.zoom) { + this.prevZoom = state.zoom; + editorUpdated = true; + + pendingTasks.push( + { + e: this.editorSelector[0], + property: 'top', + value: 24 * state.zoom + 'px', + }, + { + e: this.editorSelector[0], + property: 'margin', + value: 7 * state.zoom + 'px', + }, + { + e: this.editorSelector[0], + property: 'border-radius', + value: 5 * state.zoom + 'px', + }, + { + e: this.editorSelector[0], + property: 'border-width', + value: state.zoom + 0.5 + 'px', + } + ); + + var textLayers = this.$box[0].querySelectorAll('.ace_text-layer'); + for (var i = 0; i < textLayers.length; i++) { + pendingTasks.push({ + e: textLayers[i], + property: 'padding', + value: '0px ' + Math.round(4 * state.zoom) + 'px', + }); + } + } + + if (editorUpdated) { + this.editor.setFontSize(Math.round(aceFontSize * state.zoom)); + this.editor.renderer.$cursorLayer.$padding = Math.round(4 * state.zoom); + } + + this.editor.resize(); + } + + /*var wireWidth = WIRE_WIDTH * state.zoom; + var wires = this.$el[0].getElementsByClassName('port-wire'); + for (var j = 0; j < wires.length; j++) { + pendingTasks.push({ + e: wires[j], + property: 'stroke-width', + value: wireWidth + 'px', + }); + } +*/ + var topOffset = data.name || data.local ? 0 : 24; + pendingTasks.push( + { + e: this.contentSelector[0], + property: 'left', + value: Math.round((bbox.width / 2.0) * (state.zoom - 1)) + 'px', + }, + { + e: this.contentSelector[0], + property: 'top', + value: + Math.round( + ((bbox.height + topOffset) / 2.0) * (state.zoom - 1) + topOffset + ) + 'px', + }, + { + e: this.contentSelector[0], + property: 'width', + value: Math.round(bbox.width) + 'px', + }, + { + e: this.contentSelector[0], + property: 'height', + value: Math.round(bbox.height - topOffset) + 'px', + }, + { + e: this.contentSelector[0], + property: 'transform', + value: 'scale(' + state.zoom + ')', + } + ); + + if (data.name || data.local) { + this.headerSelector.removeClass('hidden'); + } else { + this.headerSelector.addClass('hidden'); + } + + pendingTasks.push( + { + e: this.$box[0], + property: 'left', + value: bbox.x * state.zoom + state.pan.x + 'px', + }, + { + e: this.$box[0], + property: 'top', + value: bbox.y * state.zoom + state.pan.y + 'px', + }, + { + e: this.$box[0], + property: 'width', + value: bbox.width * state.zoom + 'px', + }, + { + e: this.$box[0], + property: 'height', + value: bbox.height * state.zoom + 'px', + } + ); + + requestAnimationFrame(() => { + for (let task of pendingTasks) { + if (task.e) { + task.e.style[task.property] = task.value; + } + } + }); + }, +}); + +/* jshint ignore: end */ diff --git a/app/styles/design.css b/app/styles/design.css index b2d161294..15f72abfe 100644 --- a/app/styles/design.css +++ b/app/styles/design.css @@ -943,7 +943,7 @@ g { font-size: 18px; width: 36px; height: 36px; - text-align: right; + text-align: center; vertical-align: middle; line-height: 25px; cursor: pointer;