CanvasSectionContainer: Rename drawing order to processing order.
Signed-off-by: Gökay Şatır <gokaysatir@collabora.com> Change-Id: I3061b9ffa56cbd455d7834ab76a953189c0b6dd3
This commit is contained in:
parent
2f6c967aac
commit
c7b320587e
2 changed files with 12 additions and 12 deletions
|
@ -15,9 +15,9 @@
|
||||||
zIndex: Elements with highest zIndex will be drawn on top.
|
zIndex: Elements with highest zIndex will be drawn on top.
|
||||||
expand: '' | 'right' | 'left' | 'top' | 'bottom' | 'left right top bottom' (any combination)
|
expand: '' | 'right' | 'left' | 'top' | 'bottom' | 'left right top bottom' (any combination)
|
||||||
interactable: true | false // If false, only general events will be fired (onDraw, newDocumentTopLeft, onResize). Example: editing mode, background drawings etc.
|
interactable: true | false // If false, only general events will be fired (onDraw, newDocumentTopLeft, onResize). Example: editing mode, background drawings etc.
|
||||||
drawingOrder:
|
processingOrder:
|
||||||
|
|
||||||
Drawing order feature is tricky, let's say you want something like this:
|
Processing order feature is tricky, let's say you want something like this:
|
||||||
|
|
||||||
--------------------
|
--------------------
|
||||||
| top bar |
|
| top bar |
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
Top bar's height will be static most probably. It needs to be drawn first, so it can be expanded to right.
|
Top bar's height will be static most probably. It needs to be drawn first, so it can be expanded to right.
|
||||||
If top bar is drawn after tiles area, since "tiles area" will most probably be expanded to all directions, it will leave no space for top bar.
|
If top bar is drawn after tiles area, since "tiles area" will most probably be expanded to all directions, it will leave no space for top bar.
|
||||||
So, tiles area will be drawn last.
|
So, tiles area will be drawn last.
|
||||||
For above situation, drawing orders would be (with the same zIndex):
|
For above situation, processing orders would be (with the same zIndex):
|
||||||
* top bar -> 1
|
* top bar -> 1
|
||||||
* left bar -> 2
|
* left bar -> 2
|
||||||
* tiles area -> 3
|
* tiles area -> 3
|
||||||
|
@ -69,7 +69,7 @@ class CanvasSectionObject {
|
||||||
position: Array<number> = new Array(0);
|
position: Array<number> = new Array(0);
|
||||||
size: Array<number> = new Array(0);
|
size: Array<number> = new Array(0);
|
||||||
expand: Array<string> = new Array(0);
|
expand: Array<string> = new Array(0);
|
||||||
drawingOrder: number = null;
|
processingOrder: number = null;
|
||||||
zIndex: number = null;
|
zIndex: number = null;
|
||||||
interactable: boolean = true;
|
interactable: boolean = true;
|
||||||
myProperties: any = {};
|
myProperties: any = {};
|
||||||
|
@ -94,7 +94,7 @@ class CanvasSectionObject {
|
||||||
this.position = options.position;
|
this.position = options.position;
|
||||||
this.size = options.size;
|
this.size = options.size;
|
||||||
this.expand = options.expand.split(' ');
|
this.expand = options.expand.split(' ');
|
||||||
this.drawingOrder = options.drawingOrder;
|
this.processingOrder = options.processingOrder;
|
||||||
this.zIndex = options.zIndex;
|
this.zIndex = options.zIndex;
|
||||||
this.interactable = options.interactable;
|
this.interactable = options.interactable;
|
||||||
this.myProperties = options.myProperties ? options.myProperties: {};
|
this.myProperties = options.myProperties ? options.myProperties: {};
|
||||||
|
@ -651,11 +651,11 @@ class CanvasSectionContainer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// According to drawing order. Section with the highest drawing order will be drawn last.
|
// According to processing order. Section with the highest processing order will be calculated last.
|
||||||
for (var i: number = 0; i < this.sections.length - 1; i++) {
|
for (var i: number = 0; i < this.sections.length - 1; i++) {
|
||||||
var zIndex = this.sections[i].zIndex;
|
var zIndex = this.sections[i].zIndex;
|
||||||
while (i < this.sections.length - 1 && zIndex === this.sections[i + 1].zIndex) {
|
while (i < this.sections.length - 1 && zIndex === this.sections[i + 1].zIndex) {
|
||||||
if (this.sections[i].drawingOrder > this.sections[i + 1].drawingOrder) {
|
if (this.sections[i].processingOrder > this.sections[i + 1].processingOrder) {
|
||||||
var temp = this.sections[i + 1];
|
var temp = this.sections[i + 1];
|
||||||
this.sections[i + 1] = this.sections[i];
|
this.sections[i + 1] = this.sections[i];
|
||||||
this.sections[i] = temp;
|
this.sections[i] = temp;
|
||||||
|
@ -741,7 +741,7 @@ class CanvasSectionContainer {
|
||||||
|| options.position === undefined
|
|| options.position === undefined
|
||||||
|| options.size === undefined
|
|| options.size === undefined
|
||||||
|| options.expand === undefined
|
|| options.expand === undefined
|
||||||
|| options.drawingOrder === undefined
|
|| options.processingOrder === undefined
|
||||||
|| options.zIndex === undefined
|
|| options.zIndex === undefined
|
||||||
|| options.interactable === undefined
|
|| options.interactable === undefined
|
||||||
) {
|
) {
|
||||||
|
|
|
@ -241,7 +241,7 @@ L.TileSectionManager = L.Class.extend({
|
||||||
position: [250 * that._dpiScale, 250 * that._dpiScale], // Set its initial position to somewhere blank. Other sections shouldn't cover this point after initializing.
|
position: [250 * that._dpiScale, 250 * that._dpiScale], // Set its initial position to somewhere blank. Other sections shouldn't cover this point after initializing.
|
||||||
size: [0, 0], // Going to be expanded, no initial width or height is necessary.
|
size: [0, 0], // Going to be expanded, no initial width or height is necessary.
|
||||||
expand: 'top left bottom right', // Expand to all directions.
|
expand: 'top left bottom right', // Expand to all directions.
|
||||||
drawingOrder: 1,
|
processingOrder: 1,
|
||||||
zIndex: 5,
|
zIndex: 5,
|
||||||
interactable: true,
|
interactable: true,
|
||||||
myProperties: {
|
myProperties: {
|
||||||
|
@ -274,7 +274,7 @@ L.TileSectionManager = L.Class.extend({
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
size: [0, 0],
|
size: [0, 0],
|
||||||
expand: '',
|
expand: '',
|
||||||
drawingOrder: 1,
|
processingOrder: 1,
|
||||||
zIndex: 4,
|
zIndex: 4,
|
||||||
// Even if this one is drawn on top, won't be able to catch events.
|
// Even if this one is drawn on top, won't be able to catch events.
|
||||||
// Sections with "interactable: true" can catch events even if they are under a section with property "interactable: false".
|
// Sections with "interactable: true" can catch events even if they are under a section with property "interactable: false".
|
||||||
|
@ -355,7 +355,7 @@ L.TileSectionManager = L.Class.extend({
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
size: [0, 0],
|
size: [0, 0],
|
||||||
expand: '',
|
expand: '',
|
||||||
drawingOrder: 1,
|
processingOrder: 1,
|
||||||
zIndex: 8, // Above all.
|
zIndex: 8, // Above all.
|
||||||
// Even if this one is drawn on top, won't be able to catch events.
|
// Even if this one is drawn on top, won't be able to catch events.
|
||||||
// Sections with "interactable: true" can catch events even if they are under a section with property "interactable: false".
|
// Sections with "interactable: true" can catch events even if they are under a section with property "interactable: false".
|
||||||
|
@ -389,7 +389,7 @@ L.TileSectionManager = L.Class.extend({
|
||||||
position: [0, 0],
|
position: [0, 0],
|
||||||
size: [0, 0],
|
size: [0, 0],
|
||||||
expand: '',
|
expand: '',
|
||||||
drawingOrder: 1,
|
processingOrder: 1,
|
||||||
zIndex: 6, // Above tile layer.
|
zIndex: 6, // Above tile layer.
|
||||||
interactable: false,
|
interactable: false,
|
||||||
myProperties: {},
|
myProperties: {},
|
||||||
|
|
Loading…
Reference in a new issue