microboard-temp 0.5.55 → 0.5.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/browser.js +45 -6
- package/dist/cjs/index.js +45 -6
- package/dist/cjs/node.js +45 -6
- package/dist/esm/browser.js +45 -6
- package/dist/esm/index.js +45 -6
- package/dist/esm/node.js +45 -6
- package/dist/types/Items/Examples/CardGame/Deck/Deck.d.ts +1 -0
- package/dist/types/Items/Examples/CardGame/Screen/Screen.d.ts +4 -0
- package/dist/types/Items/Examples/CardGame/Screen/ScreenOperation.d.ts +7 -1
- package/package.json +1 -1
package/dist/cjs/browser.js
CHANGED
|
@@ -48230,6 +48230,13 @@ class Deck extends BaseItem {
|
|
|
48230
48230
|
return card;
|
|
48231
48231
|
}
|
|
48232
48232
|
}
|
|
48233
|
+
getCards(count) {
|
|
48234
|
+
const cards = this.index?.list().slice(0, count);
|
|
48235
|
+
if (cards) {
|
|
48236
|
+
this.removeChildItems(cards);
|
|
48237
|
+
return cards;
|
|
48238
|
+
}
|
|
48239
|
+
}
|
|
48233
48240
|
getBottomCard() {
|
|
48234
48241
|
const card = this.index?.list()[0];
|
|
48235
48242
|
if (card) {
|
|
@@ -48911,7 +48918,7 @@ class AddScreen extends ShapeTool {
|
|
|
48911
48918
|
}
|
|
48912
48919
|
|
|
48913
48920
|
// src/Items/Examples/CardGame/Screen/Screen.ts
|
|
48914
|
-
var
|
|
48921
|
+
var screenPath = new Path([
|
|
48915
48922
|
new Line(new Point(0, 0), new Point(100, 0)),
|
|
48916
48923
|
new Line(new Point(100, 0), new Point(100, 100)),
|
|
48917
48924
|
new Line(new Point(100, 100), new Point(0, 100)),
|
|
@@ -48919,7 +48926,8 @@ var handPath = new Path([
|
|
|
48919
48926
|
], true, "#FFFFFF", "#000000");
|
|
48920
48927
|
var defaultScreenData = {
|
|
48921
48928
|
itemType: "Screen",
|
|
48922
|
-
ownerId: ""
|
|
48929
|
+
ownerId: "",
|
|
48930
|
+
backgroundUrl: ""
|
|
48923
48931
|
};
|
|
48924
48932
|
|
|
48925
48933
|
class Screen extends BaseItem {
|
|
@@ -48928,6 +48936,8 @@ class Screen extends BaseItem {
|
|
|
48928
48936
|
path;
|
|
48929
48937
|
borderWidth = 1;
|
|
48930
48938
|
backgroundColor = "#FFFFFF";
|
|
48939
|
+
backgroundUrl = "";
|
|
48940
|
+
backgroundImage = null;
|
|
48931
48941
|
constructor(board, id = "", ownerId = "") {
|
|
48932
48942
|
super(board, id, defaultScreenData, true);
|
|
48933
48943
|
this.ownerId = ownerId;
|
|
@@ -48953,6 +48963,9 @@ class Screen extends BaseItem {
|
|
|
48953
48963
|
case "setBorderColor":
|
|
48954
48964
|
this.applyBorderColor(op.newData.borderColor);
|
|
48955
48965
|
break;
|
|
48966
|
+
case "setBackgroundUrl":
|
|
48967
|
+
this.applyBackgroundUrl(op.newData.backgroundUrl);
|
|
48968
|
+
break;
|
|
48956
48969
|
}
|
|
48957
48970
|
break;
|
|
48958
48971
|
}
|
|
@@ -48976,7 +48989,7 @@ class Screen extends BaseItem {
|
|
|
48976
48989
|
}
|
|
48977
48990
|
setBackgroundColor(backgroundColor) {
|
|
48978
48991
|
this.emit({
|
|
48979
|
-
class: "
|
|
48992
|
+
class: "Screen",
|
|
48980
48993
|
method: "setBackgroundColor",
|
|
48981
48994
|
item: [this.getId()],
|
|
48982
48995
|
newData: { backgroundColor },
|
|
@@ -48989,7 +49002,7 @@ class Screen extends BaseItem {
|
|
|
48989
49002
|
}
|
|
48990
49003
|
setBorderWidth(borderWidth) {
|
|
48991
49004
|
this.emit({
|
|
48992
|
-
class: "
|
|
49005
|
+
class: "Screen",
|
|
48993
49006
|
method: "setBorderWidth",
|
|
48994
49007
|
item: [this.getId()],
|
|
48995
49008
|
newData: { borderWidth },
|
|
@@ -49002,18 +49015,37 @@ class Screen extends BaseItem {
|
|
|
49002
49015
|
}
|
|
49003
49016
|
setBorderColor(borderColor) {
|
|
49004
49017
|
this.emit({
|
|
49005
|
-
class: "
|
|
49018
|
+
class: "Screen",
|
|
49006
49019
|
method: "setBorderColor",
|
|
49007
49020
|
item: [this.getId()],
|
|
49008
49021
|
newData: { borderColor },
|
|
49009
49022
|
prevData: { borderColor: this.borderColor }
|
|
49010
49023
|
});
|
|
49011
49024
|
}
|
|
49025
|
+
applyBackgroundUrl(url) {
|
|
49026
|
+
this.backgroundUrl = url || "";
|
|
49027
|
+
if (url) {
|
|
49028
|
+
this.backgroundImage = new Image;
|
|
49029
|
+
this.backgroundImage.src = url;
|
|
49030
|
+
this.applyBackgroundColor("none");
|
|
49031
|
+
} else {
|
|
49032
|
+
this.backgroundImage = null;
|
|
49033
|
+
}
|
|
49034
|
+
}
|
|
49035
|
+
setBackgroundUrl(url) {
|
|
49036
|
+
this.emit({
|
|
49037
|
+
class: "Screen",
|
|
49038
|
+
method: "setBackgroundUrl",
|
|
49039
|
+
item: [this.getId()],
|
|
49040
|
+
newData: { backgroundUrl: url },
|
|
49041
|
+
prevData: { backgroundUrl: this.backgroundUrl }
|
|
49042
|
+
});
|
|
49043
|
+
}
|
|
49012
49044
|
applyOwnerId(ownerId) {
|
|
49013
49045
|
this.ownerId = ownerId;
|
|
49014
49046
|
}
|
|
49015
49047
|
transformPath() {
|
|
49016
|
-
this.path =
|
|
49048
|
+
this.path = screenPath.copy();
|
|
49017
49049
|
this.path.transform(this.transformation.matrix);
|
|
49018
49050
|
this.path.setBackgroundColor(this.backgroundColor);
|
|
49019
49051
|
this.path.setBorderColor(this.borderColor);
|
|
@@ -49036,6 +49068,13 @@ class Screen extends BaseItem {
|
|
|
49036
49068
|
if (this.transformationRenderBlock) {
|
|
49037
49069
|
return;
|
|
49038
49070
|
}
|
|
49071
|
+
if (this.backgroundImage && this.backgroundImage.complete) {
|
|
49072
|
+
const ctx = context.ctx;
|
|
49073
|
+
ctx.save();
|
|
49074
|
+
this.transformation.matrix.applyToContext(ctx);
|
|
49075
|
+
ctx.drawImage(this.backgroundImage, 0, 0);
|
|
49076
|
+
ctx.restore();
|
|
49077
|
+
}
|
|
49039
49078
|
this.path.render(context);
|
|
49040
49079
|
if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
|
|
49041
49080
|
super.render(context);
|
package/dist/cjs/index.js
CHANGED
|
@@ -48230,6 +48230,13 @@ class Deck extends BaseItem {
|
|
|
48230
48230
|
return card;
|
|
48231
48231
|
}
|
|
48232
48232
|
}
|
|
48233
|
+
getCards(count) {
|
|
48234
|
+
const cards = this.index?.list().slice(0, count);
|
|
48235
|
+
if (cards) {
|
|
48236
|
+
this.removeChildItems(cards);
|
|
48237
|
+
return cards;
|
|
48238
|
+
}
|
|
48239
|
+
}
|
|
48233
48240
|
getBottomCard() {
|
|
48234
48241
|
const card = this.index?.list()[0];
|
|
48235
48242
|
if (card) {
|
|
@@ -48911,7 +48918,7 @@ class AddScreen extends ShapeTool {
|
|
|
48911
48918
|
}
|
|
48912
48919
|
|
|
48913
48920
|
// src/Items/Examples/CardGame/Screen/Screen.ts
|
|
48914
|
-
var
|
|
48921
|
+
var screenPath = new Path([
|
|
48915
48922
|
new Line(new Point(0, 0), new Point(100, 0)),
|
|
48916
48923
|
new Line(new Point(100, 0), new Point(100, 100)),
|
|
48917
48924
|
new Line(new Point(100, 100), new Point(0, 100)),
|
|
@@ -48919,7 +48926,8 @@ var handPath = new Path([
|
|
|
48919
48926
|
], true, "#FFFFFF", "#000000");
|
|
48920
48927
|
var defaultScreenData = {
|
|
48921
48928
|
itemType: "Screen",
|
|
48922
|
-
ownerId: ""
|
|
48929
|
+
ownerId: "",
|
|
48930
|
+
backgroundUrl: ""
|
|
48923
48931
|
};
|
|
48924
48932
|
|
|
48925
48933
|
class Screen extends BaseItem {
|
|
@@ -48928,6 +48936,8 @@ class Screen extends BaseItem {
|
|
|
48928
48936
|
path;
|
|
48929
48937
|
borderWidth = 1;
|
|
48930
48938
|
backgroundColor = "#FFFFFF";
|
|
48939
|
+
backgroundUrl = "";
|
|
48940
|
+
backgroundImage = null;
|
|
48931
48941
|
constructor(board, id = "", ownerId = "") {
|
|
48932
48942
|
super(board, id, defaultScreenData, true);
|
|
48933
48943
|
this.ownerId = ownerId;
|
|
@@ -48953,6 +48963,9 @@ class Screen extends BaseItem {
|
|
|
48953
48963
|
case "setBorderColor":
|
|
48954
48964
|
this.applyBorderColor(op.newData.borderColor);
|
|
48955
48965
|
break;
|
|
48966
|
+
case "setBackgroundUrl":
|
|
48967
|
+
this.applyBackgroundUrl(op.newData.backgroundUrl);
|
|
48968
|
+
break;
|
|
48956
48969
|
}
|
|
48957
48970
|
break;
|
|
48958
48971
|
}
|
|
@@ -48976,7 +48989,7 @@ class Screen extends BaseItem {
|
|
|
48976
48989
|
}
|
|
48977
48990
|
setBackgroundColor(backgroundColor) {
|
|
48978
48991
|
this.emit({
|
|
48979
|
-
class: "
|
|
48992
|
+
class: "Screen",
|
|
48980
48993
|
method: "setBackgroundColor",
|
|
48981
48994
|
item: [this.getId()],
|
|
48982
48995
|
newData: { backgroundColor },
|
|
@@ -48989,7 +49002,7 @@ class Screen extends BaseItem {
|
|
|
48989
49002
|
}
|
|
48990
49003
|
setBorderWidth(borderWidth) {
|
|
48991
49004
|
this.emit({
|
|
48992
|
-
class: "
|
|
49005
|
+
class: "Screen",
|
|
48993
49006
|
method: "setBorderWidth",
|
|
48994
49007
|
item: [this.getId()],
|
|
48995
49008
|
newData: { borderWidth },
|
|
@@ -49002,18 +49015,37 @@ class Screen extends BaseItem {
|
|
|
49002
49015
|
}
|
|
49003
49016
|
setBorderColor(borderColor) {
|
|
49004
49017
|
this.emit({
|
|
49005
|
-
class: "
|
|
49018
|
+
class: "Screen",
|
|
49006
49019
|
method: "setBorderColor",
|
|
49007
49020
|
item: [this.getId()],
|
|
49008
49021
|
newData: { borderColor },
|
|
49009
49022
|
prevData: { borderColor: this.borderColor }
|
|
49010
49023
|
});
|
|
49011
49024
|
}
|
|
49025
|
+
applyBackgroundUrl(url) {
|
|
49026
|
+
this.backgroundUrl = url || "";
|
|
49027
|
+
if (url) {
|
|
49028
|
+
this.backgroundImage = new Image;
|
|
49029
|
+
this.backgroundImage.src = url;
|
|
49030
|
+
this.applyBackgroundColor("none");
|
|
49031
|
+
} else {
|
|
49032
|
+
this.backgroundImage = null;
|
|
49033
|
+
}
|
|
49034
|
+
}
|
|
49035
|
+
setBackgroundUrl(url) {
|
|
49036
|
+
this.emit({
|
|
49037
|
+
class: "Screen",
|
|
49038
|
+
method: "setBackgroundUrl",
|
|
49039
|
+
item: [this.getId()],
|
|
49040
|
+
newData: { backgroundUrl: url },
|
|
49041
|
+
prevData: { backgroundUrl: this.backgroundUrl }
|
|
49042
|
+
});
|
|
49043
|
+
}
|
|
49012
49044
|
applyOwnerId(ownerId) {
|
|
49013
49045
|
this.ownerId = ownerId;
|
|
49014
49046
|
}
|
|
49015
49047
|
transformPath() {
|
|
49016
|
-
this.path =
|
|
49048
|
+
this.path = screenPath.copy();
|
|
49017
49049
|
this.path.transform(this.transformation.matrix);
|
|
49018
49050
|
this.path.setBackgroundColor(this.backgroundColor);
|
|
49019
49051
|
this.path.setBorderColor(this.borderColor);
|
|
@@ -49036,6 +49068,13 @@ class Screen extends BaseItem {
|
|
|
49036
49068
|
if (this.transformationRenderBlock) {
|
|
49037
49069
|
return;
|
|
49038
49070
|
}
|
|
49071
|
+
if (this.backgroundImage && this.backgroundImage.complete) {
|
|
49072
|
+
const ctx = context.ctx;
|
|
49073
|
+
ctx.save();
|
|
49074
|
+
this.transformation.matrix.applyToContext(ctx);
|
|
49075
|
+
ctx.drawImage(this.backgroundImage, 0, 0);
|
|
49076
|
+
ctx.restore();
|
|
49077
|
+
}
|
|
49039
49078
|
this.path.render(context);
|
|
49040
49079
|
if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
|
|
49041
49080
|
super.render(context);
|
package/dist/cjs/node.js
CHANGED
|
@@ -50703,6 +50703,13 @@ class Deck extends BaseItem {
|
|
|
50703
50703
|
return card;
|
|
50704
50704
|
}
|
|
50705
50705
|
}
|
|
50706
|
+
getCards(count) {
|
|
50707
|
+
const cards = this.index?.list().slice(0, count);
|
|
50708
|
+
if (cards) {
|
|
50709
|
+
this.removeChildItems(cards);
|
|
50710
|
+
return cards;
|
|
50711
|
+
}
|
|
50712
|
+
}
|
|
50706
50713
|
getBottomCard() {
|
|
50707
50714
|
const card = this.index?.list()[0];
|
|
50708
50715
|
if (card) {
|
|
@@ -51384,7 +51391,7 @@ class AddScreen extends ShapeTool {
|
|
|
51384
51391
|
}
|
|
51385
51392
|
|
|
51386
51393
|
// src/Items/Examples/CardGame/Screen/Screen.ts
|
|
51387
|
-
var
|
|
51394
|
+
var screenPath = new Path([
|
|
51388
51395
|
new Line(new Point(0, 0), new Point(100, 0)),
|
|
51389
51396
|
new Line(new Point(100, 0), new Point(100, 100)),
|
|
51390
51397
|
new Line(new Point(100, 100), new Point(0, 100)),
|
|
@@ -51392,7 +51399,8 @@ var handPath = new Path([
|
|
|
51392
51399
|
], true, "#FFFFFF", "#000000");
|
|
51393
51400
|
var defaultScreenData = {
|
|
51394
51401
|
itemType: "Screen",
|
|
51395
|
-
ownerId: ""
|
|
51402
|
+
ownerId: "",
|
|
51403
|
+
backgroundUrl: ""
|
|
51396
51404
|
};
|
|
51397
51405
|
|
|
51398
51406
|
class Screen extends BaseItem {
|
|
@@ -51401,6 +51409,8 @@ class Screen extends BaseItem {
|
|
|
51401
51409
|
path;
|
|
51402
51410
|
borderWidth = 1;
|
|
51403
51411
|
backgroundColor = "#FFFFFF";
|
|
51412
|
+
backgroundUrl = "";
|
|
51413
|
+
backgroundImage = null;
|
|
51404
51414
|
constructor(board, id = "", ownerId = "") {
|
|
51405
51415
|
super(board, id, defaultScreenData, true);
|
|
51406
51416
|
this.ownerId = ownerId;
|
|
@@ -51426,6 +51436,9 @@ class Screen extends BaseItem {
|
|
|
51426
51436
|
case "setBorderColor":
|
|
51427
51437
|
this.applyBorderColor(op.newData.borderColor);
|
|
51428
51438
|
break;
|
|
51439
|
+
case "setBackgroundUrl":
|
|
51440
|
+
this.applyBackgroundUrl(op.newData.backgroundUrl);
|
|
51441
|
+
break;
|
|
51429
51442
|
}
|
|
51430
51443
|
break;
|
|
51431
51444
|
}
|
|
@@ -51449,7 +51462,7 @@ class Screen extends BaseItem {
|
|
|
51449
51462
|
}
|
|
51450
51463
|
setBackgroundColor(backgroundColor) {
|
|
51451
51464
|
this.emit({
|
|
51452
|
-
class: "
|
|
51465
|
+
class: "Screen",
|
|
51453
51466
|
method: "setBackgroundColor",
|
|
51454
51467
|
item: [this.getId()],
|
|
51455
51468
|
newData: { backgroundColor },
|
|
@@ -51462,7 +51475,7 @@ class Screen extends BaseItem {
|
|
|
51462
51475
|
}
|
|
51463
51476
|
setBorderWidth(borderWidth) {
|
|
51464
51477
|
this.emit({
|
|
51465
|
-
class: "
|
|
51478
|
+
class: "Screen",
|
|
51466
51479
|
method: "setBorderWidth",
|
|
51467
51480
|
item: [this.getId()],
|
|
51468
51481
|
newData: { borderWidth },
|
|
@@ -51475,18 +51488,37 @@ class Screen extends BaseItem {
|
|
|
51475
51488
|
}
|
|
51476
51489
|
setBorderColor(borderColor) {
|
|
51477
51490
|
this.emit({
|
|
51478
|
-
class: "
|
|
51491
|
+
class: "Screen",
|
|
51479
51492
|
method: "setBorderColor",
|
|
51480
51493
|
item: [this.getId()],
|
|
51481
51494
|
newData: { borderColor },
|
|
51482
51495
|
prevData: { borderColor: this.borderColor }
|
|
51483
51496
|
});
|
|
51484
51497
|
}
|
|
51498
|
+
applyBackgroundUrl(url) {
|
|
51499
|
+
this.backgroundUrl = url || "";
|
|
51500
|
+
if (url) {
|
|
51501
|
+
this.backgroundImage = new Image;
|
|
51502
|
+
this.backgroundImage.src = url;
|
|
51503
|
+
this.applyBackgroundColor("none");
|
|
51504
|
+
} else {
|
|
51505
|
+
this.backgroundImage = null;
|
|
51506
|
+
}
|
|
51507
|
+
}
|
|
51508
|
+
setBackgroundUrl(url) {
|
|
51509
|
+
this.emit({
|
|
51510
|
+
class: "Screen",
|
|
51511
|
+
method: "setBackgroundUrl",
|
|
51512
|
+
item: [this.getId()],
|
|
51513
|
+
newData: { backgroundUrl: url },
|
|
51514
|
+
prevData: { backgroundUrl: this.backgroundUrl }
|
|
51515
|
+
});
|
|
51516
|
+
}
|
|
51485
51517
|
applyOwnerId(ownerId) {
|
|
51486
51518
|
this.ownerId = ownerId;
|
|
51487
51519
|
}
|
|
51488
51520
|
transformPath() {
|
|
51489
|
-
this.path =
|
|
51521
|
+
this.path = screenPath.copy();
|
|
51490
51522
|
this.path.transform(this.transformation.matrix);
|
|
51491
51523
|
this.path.setBackgroundColor(this.backgroundColor);
|
|
51492
51524
|
this.path.setBorderColor(this.borderColor);
|
|
@@ -51509,6 +51541,13 @@ class Screen extends BaseItem {
|
|
|
51509
51541
|
if (this.transformationRenderBlock) {
|
|
51510
51542
|
return;
|
|
51511
51543
|
}
|
|
51544
|
+
if (this.backgroundImage && this.backgroundImage.complete) {
|
|
51545
|
+
const ctx = context.ctx;
|
|
51546
|
+
ctx.save();
|
|
51547
|
+
this.transformation.matrix.applyToContext(ctx);
|
|
51548
|
+
ctx.drawImage(this.backgroundImage, 0, 0);
|
|
51549
|
+
ctx.restore();
|
|
51550
|
+
}
|
|
51512
51551
|
this.path.render(context);
|
|
51513
51552
|
if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
|
|
51514
51553
|
super.render(context);
|
package/dist/esm/browser.js
CHANGED
|
@@ -48076,6 +48076,13 @@ class Deck extends BaseItem {
|
|
|
48076
48076
|
return card;
|
|
48077
48077
|
}
|
|
48078
48078
|
}
|
|
48079
|
+
getCards(count) {
|
|
48080
|
+
const cards = this.index?.list().slice(0, count);
|
|
48081
|
+
if (cards) {
|
|
48082
|
+
this.removeChildItems(cards);
|
|
48083
|
+
return cards;
|
|
48084
|
+
}
|
|
48085
|
+
}
|
|
48079
48086
|
getBottomCard() {
|
|
48080
48087
|
const card = this.index?.list()[0];
|
|
48081
48088
|
if (card) {
|
|
@@ -48757,7 +48764,7 @@ class AddScreen extends ShapeTool {
|
|
|
48757
48764
|
}
|
|
48758
48765
|
|
|
48759
48766
|
// src/Items/Examples/CardGame/Screen/Screen.ts
|
|
48760
|
-
var
|
|
48767
|
+
var screenPath = new Path([
|
|
48761
48768
|
new Line(new Point(0, 0), new Point(100, 0)),
|
|
48762
48769
|
new Line(new Point(100, 0), new Point(100, 100)),
|
|
48763
48770
|
new Line(new Point(100, 100), new Point(0, 100)),
|
|
@@ -48765,7 +48772,8 @@ var handPath = new Path([
|
|
|
48765
48772
|
], true, "#FFFFFF", "#000000");
|
|
48766
48773
|
var defaultScreenData = {
|
|
48767
48774
|
itemType: "Screen",
|
|
48768
|
-
ownerId: ""
|
|
48775
|
+
ownerId: "",
|
|
48776
|
+
backgroundUrl: ""
|
|
48769
48777
|
};
|
|
48770
48778
|
|
|
48771
48779
|
class Screen extends BaseItem {
|
|
@@ -48774,6 +48782,8 @@ class Screen extends BaseItem {
|
|
|
48774
48782
|
path;
|
|
48775
48783
|
borderWidth = 1;
|
|
48776
48784
|
backgroundColor = "#FFFFFF";
|
|
48785
|
+
backgroundUrl = "";
|
|
48786
|
+
backgroundImage = null;
|
|
48777
48787
|
constructor(board, id = "", ownerId = "") {
|
|
48778
48788
|
super(board, id, defaultScreenData, true);
|
|
48779
48789
|
this.ownerId = ownerId;
|
|
@@ -48799,6 +48809,9 @@ class Screen extends BaseItem {
|
|
|
48799
48809
|
case "setBorderColor":
|
|
48800
48810
|
this.applyBorderColor(op.newData.borderColor);
|
|
48801
48811
|
break;
|
|
48812
|
+
case "setBackgroundUrl":
|
|
48813
|
+
this.applyBackgroundUrl(op.newData.backgroundUrl);
|
|
48814
|
+
break;
|
|
48802
48815
|
}
|
|
48803
48816
|
break;
|
|
48804
48817
|
}
|
|
@@ -48822,7 +48835,7 @@ class Screen extends BaseItem {
|
|
|
48822
48835
|
}
|
|
48823
48836
|
setBackgroundColor(backgroundColor) {
|
|
48824
48837
|
this.emit({
|
|
48825
|
-
class: "
|
|
48838
|
+
class: "Screen",
|
|
48826
48839
|
method: "setBackgroundColor",
|
|
48827
48840
|
item: [this.getId()],
|
|
48828
48841
|
newData: { backgroundColor },
|
|
@@ -48835,7 +48848,7 @@ class Screen extends BaseItem {
|
|
|
48835
48848
|
}
|
|
48836
48849
|
setBorderWidth(borderWidth) {
|
|
48837
48850
|
this.emit({
|
|
48838
|
-
class: "
|
|
48851
|
+
class: "Screen",
|
|
48839
48852
|
method: "setBorderWidth",
|
|
48840
48853
|
item: [this.getId()],
|
|
48841
48854
|
newData: { borderWidth },
|
|
@@ -48848,18 +48861,37 @@ class Screen extends BaseItem {
|
|
|
48848
48861
|
}
|
|
48849
48862
|
setBorderColor(borderColor) {
|
|
48850
48863
|
this.emit({
|
|
48851
|
-
class: "
|
|
48864
|
+
class: "Screen",
|
|
48852
48865
|
method: "setBorderColor",
|
|
48853
48866
|
item: [this.getId()],
|
|
48854
48867
|
newData: { borderColor },
|
|
48855
48868
|
prevData: { borderColor: this.borderColor }
|
|
48856
48869
|
});
|
|
48857
48870
|
}
|
|
48871
|
+
applyBackgroundUrl(url) {
|
|
48872
|
+
this.backgroundUrl = url || "";
|
|
48873
|
+
if (url) {
|
|
48874
|
+
this.backgroundImage = new Image;
|
|
48875
|
+
this.backgroundImage.src = url;
|
|
48876
|
+
this.applyBackgroundColor("none");
|
|
48877
|
+
} else {
|
|
48878
|
+
this.backgroundImage = null;
|
|
48879
|
+
}
|
|
48880
|
+
}
|
|
48881
|
+
setBackgroundUrl(url) {
|
|
48882
|
+
this.emit({
|
|
48883
|
+
class: "Screen",
|
|
48884
|
+
method: "setBackgroundUrl",
|
|
48885
|
+
item: [this.getId()],
|
|
48886
|
+
newData: { backgroundUrl: url },
|
|
48887
|
+
prevData: { backgroundUrl: this.backgroundUrl }
|
|
48888
|
+
});
|
|
48889
|
+
}
|
|
48858
48890
|
applyOwnerId(ownerId) {
|
|
48859
48891
|
this.ownerId = ownerId;
|
|
48860
48892
|
}
|
|
48861
48893
|
transformPath() {
|
|
48862
|
-
this.path =
|
|
48894
|
+
this.path = screenPath.copy();
|
|
48863
48895
|
this.path.transform(this.transformation.matrix);
|
|
48864
48896
|
this.path.setBackgroundColor(this.backgroundColor);
|
|
48865
48897
|
this.path.setBorderColor(this.borderColor);
|
|
@@ -48882,6 +48914,13 @@ class Screen extends BaseItem {
|
|
|
48882
48914
|
if (this.transformationRenderBlock) {
|
|
48883
48915
|
return;
|
|
48884
48916
|
}
|
|
48917
|
+
if (this.backgroundImage && this.backgroundImage.complete) {
|
|
48918
|
+
const ctx = context.ctx;
|
|
48919
|
+
ctx.save();
|
|
48920
|
+
this.transformation.matrix.applyToContext(ctx);
|
|
48921
|
+
ctx.drawImage(this.backgroundImage, 0, 0);
|
|
48922
|
+
ctx.restore();
|
|
48923
|
+
}
|
|
48885
48924
|
this.path.render(context);
|
|
48886
48925
|
if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
|
|
48887
48926
|
super.render(context);
|
package/dist/esm/index.js
CHANGED
|
@@ -48069,6 +48069,13 @@ class Deck extends BaseItem {
|
|
|
48069
48069
|
return card;
|
|
48070
48070
|
}
|
|
48071
48071
|
}
|
|
48072
|
+
getCards(count) {
|
|
48073
|
+
const cards = this.index?.list().slice(0, count);
|
|
48074
|
+
if (cards) {
|
|
48075
|
+
this.removeChildItems(cards);
|
|
48076
|
+
return cards;
|
|
48077
|
+
}
|
|
48078
|
+
}
|
|
48072
48079
|
getBottomCard() {
|
|
48073
48080
|
const card = this.index?.list()[0];
|
|
48074
48081
|
if (card) {
|
|
@@ -48750,7 +48757,7 @@ class AddScreen extends ShapeTool {
|
|
|
48750
48757
|
}
|
|
48751
48758
|
|
|
48752
48759
|
// src/Items/Examples/CardGame/Screen/Screen.ts
|
|
48753
|
-
var
|
|
48760
|
+
var screenPath = new Path([
|
|
48754
48761
|
new Line(new Point(0, 0), new Point(100, 0)),
|
|
48755
48762
|
new Line(new Point(100, 0), new Point(100, 100)),
|
|
48756
48763
|
new Line(new Point(100, 100), new Point(0, 100)),
|
|
@@ -48758,7 +48765,8 @@ var handPath = new Path([
|
|
|
48758
48765
|
], true, "#FFFFFF", "#000000");
|
|
48759
48766
|
var defaultScreenData = {
|
|
48760
48767
|
itemType: "Screen",
|
|
48761
|
-
ownerId: ""
|
|
48768
|
+
ownerId: "",
|
|
48769
|
+
backgroundUrl: ""
|
|
48762
48770
|
};
|
|
48763
48771
|
|
|
48764
48772
|
class Screen extends BaseItem {
|
|
@@ -48767,6 +48775,8 @@ class Screen extends BaseItem {
|
|
|
48767
48775
|
path;
|
|
48768
48776
|
borderWidth = 1;
|
|
48769
48777
|
backgroundColor = "#FFFFFF";
|
|
48778
|
+
backgroundUrl = "";
|
|
48779
|
+
backgroundImage = null;
|
|
48770
48780
|
constructor(board, id = "", ownerId = "") {
|
|
48771
48781
|
super(board, id, defaultScreenData, true);
|
|
48772
48782
|
this.ownerId = ownerId;
|
|
@@ -48792,6 +48802,9 @@ class Screen extends BaseItem {
|
|
|
48792
48802
|
case "setBorderColor":
|
|
48793
48803
|
this.applyBorderColor(op.newData.borderColor);
|
|
48794
48804
|
break;
|
|
48805
|
+
case "setBackgroundUrl":
|
|
48806
|
+
this.applyBackgroundUrl(op.newData.backgroundUrl);
|
|
48807
|
+
break;
|
|
48795
48808
|
}
|
|
48796
48809
|
break;
|
|
48797
48810
|
}
|
|
@@ -48815,7 +48828,7 @@ class Screen extends BaseItem {
|
|
|
48815
48828
|
}
|
|
48816
48829
|
setBackgroundColor(backgroundColor) {
|
|
48817
48830
|
this.emit({
|
|
48818
|
-
class: "
|
|
48831
|
+
class: "Screen",
|
|
48819
48832
|
method: "setBackgroundColor",
|
|
48820
48833
|
item: [this.getId()],
|
|
48821
48834
|
newData: { backgroundColor },
|
|
@@ -48828,7 +48841,7 @@ class Screen extends BaseItem {
|
|
|
48828
48841
|
}
|
|
48829
48842
|
setBorderWidth(borderWidth) {
|
|
48830
48843
|
this.emit({
|
|
48831
|
-
class: "
|
|
48844
|
+
class: "Screen",
|
|
48832
48845
|
method: "setBorderWidth",
|
|
48833
48846
|
item: [this.getId()],
|
|
48834
48847
|
newData: { borderWidth },
|
|
@@ -48841,18 +48854,37 @@ class Screen extends BaseItem {
|
|
|
48841
48854
|
}
|
|
48842
48855
|
setBorderColor(borderColor) {
|
|
48843
48856
|
this.emit({
|
|
48844
|
-
class: "
|
|
48857
|
+
class: "Screen",
|
|
48845
48858
|
method: "setBorderColor",
|
|
48846
48859
|
item: [this.getId()],
|
|
48847
48860
|
newData: { borderColor },
|
|
48848
48861
|
prevData: { borderColor: this.borderColor }
|
|
48849
48862
|
});
|
|
48850
48863
|
}
|
|
48864
|
+
applyBackgroundUrl(url) {
|
|
48865
|
+
this.backgroundUrl = url || "";
|
|
48866
|
+
if (url) {
|
|
48867
|
+
this.backgroundImage = new Image;
|
|
48868
|
+
this.backgroundImage.src = url;
|
|
48869
|
+
this.applyBackgroundColor("none");
|
|
48870
|
+
} else {
|
|
48871
|
+
this.backgroundImage = null;
|
|
48872
|
+
}
|
|
48873
|
+
}
|
|
48874
|
+
setBackgroundUrl(url) {
|
|
48875
|
+
this.emit({
|
|
48876
|
+
class: "Screen",
|
|
48877
|
+
method: "setBackgroundUrl",
|
|
48878
|
+
item: [this.getId()],
|
|
48879
|
+
newData: { backgroundUrl: url },
|
|
48880
|
+
prevData: { backgroundUrl: this.backgroundUrl }
|
|
48881
|
+
});
|
|
48882
|
+
}
|
|
48851
48883
|
applyOwnerId(ownerId) {
|
|
48852
48884
|
this.ownerId = ownerId;
|
|
48853
48885
|
}
|
|
48854
48886
|
transformPath() {
|
|
48855
|
-
this.path =
|
|
48887
|
+
this.path = screenPath.copy();
|
|
48856
48888
|
this.path.transform(this.transformation.matrix);
|
|
48857
48889
|
this.path.setBackgroundColor(this.backgroundColor);
|
|
48858
48890
|
this.path.setBorderColor(this.borderColor);
|
|
@@ -48875,6 +48907,13 @@ class Screen extends BaseItem {
|
|
|
48875
48907
|
if (this.transformationRenderBlock) {
|
|
48876
48908
|
return;
|
|
48877
48909
|
}
|
|
48910
|
+
if (this.backgroundImage && this.backgroundImage.complete) {
|
|
48911
|
+
const ctx = context.ctx;
|
|
48912
|
+
ctx.save();
|
|
48913
|
+
this.transformation.matrix.applyToContext(ctx);
|
|
48914
|
+
ctx.drawImage(this.backgroundImage, 0, 0);
|
|
48915
|
+
ctx.restore();
|
|
48916
|
+
}
|
|
48878
48917
|
this.path.render(context);
|
|
48879
48918
|
if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
|
|
48880
48919
|
super.render(context);
|
package/dist/esm/node.js
CHANGED
|
@@ -50537,6 +50537,13 @@ class Deck extends BaseItem {
|
|
|
50537
50537
|
return card;
|
|
50538
50538
|
}
|
|
50539
50539
|
}
|
|
50540
|
+
getCards(count) {
|
|
50541
|
+
const cards = this.index?.list().slice(0, count);
|
|
50542
|
+
if (cards) {
|
|
50543
|
+
this.removeChildItems(cards);
|
|
50544
|
+
return cards;
|
|
50545
|
+
}
|
|
50546
|
+
}
|
|
50540
50547
|
getBottomCard() {
|
|
50541
50548
|
const card = this.index?.list()[0];
|
|
50542
50549
|
if (card) {
|
|
@@ -51218,7 +51225,7 @@ class AddScreen extends ShapeTool {
|
|
|
51218
51225
|
}
|
|
51219
51226
|
|
|
51220
51227
|
// src/Items/Examples/CardGame/Screen/Screen.ts
|
|
51221
|
-
var
|
|
51228
|
+
var screenPath = new Path([
|
|
51222
51229
|
new Line(new Point(0, 0), new Point(100, 0)),
|
|
51223
51230
|
new Line(new Point(100, 0), new Point(100, 100)),
|
|
51224
51231
|
new Line(new Point(100, 100), new Point(0, 100)),
|
|
@@ -51226,7 +51233,8 @@ var handPath = new Path([
|
|
|
51226
51233
|
], true, "#FFFFFF", "#000000");
|
|
51227
51234
|
var defaultScreenData = {
|
|
51228
51235
|
itemType: "Screen",
|
|
51229
|
-
ownerId: ""
|
|
51236
|
+
ownerId: "",
|
|
51237
|
+
backgroundUrl: ""
|
|
51230
51238
|
};
|
|
51231
51239
|
|
|
51232
51240
|
class Screen extends BaseItem {
|
|
@@ -51235,6 +51243,8 @@ class Screen extends BaseItem {
|
|
|
51235
51243
|
path;
|
|
51236
51244
|
borderWidth = 1;
|
|
51237
51245
|
backgroundColor = "#FFFFFF";
|
|
51246
|
+
backgroundUrl = "";
|
|
51247
|
+
backgroundImage = null;
|
|
51238
51248
|
constructor(board, id = "", ownerId = "") {
|
|
51239
51249
|
super(board, id, defaultScreenData, true);
|
|
51240
51250
|
this.ownerId = ownerId;
|
|
@@ -51260,6 +51270,9 @@ class Screen extends BaseItem {
|
|
|
51260
51270
|
case "setBorderColor":
|
|
51261
51271
|
this.applyBorderColor(op.newData.borderColor);
|
|
51262
51272
|
break;
|
|
51273
|
+
case "setBackgroundUrl":
|
|
51274
|
+
this.applyBackgroundUrl(op.newData.backgroundUrl);
|
|
51275
|
+
break;
|
|
51263
51276
|
}
|
|
51264
51277
|
break;
|
|
51265
51278
|
}
|
|
@@ -51283,7 +51296,7 @@ class Screen extends BaseItem {
|
|
|
51283
51296
|
}
|
|
51284
51297
|
setBackgroundColor(backgroundColor) {
|
|
51285
51298
|
this.emit({
|
|
51286
|
-
class: "
|
|
51299
|
+
class: "Screen",
|
|
51287
51300
|
method: "setBackgroundColor",
|
|
51288
51301
|
item: [this.getId()],
|
|
51289
51302
|
newData: { backgroundColor },
|
|
@@ -51296,7 +51309,7 @@ class Screen extends BaseItem {
|
|
|
51296
51309
|
}
|
|
51297
51310
|
setBorderWidth(borderWidth) {
|
|
51298
51311
|
this.emit({
|
|
51299
|
-
class: "
|
|
51312
|
+
class: "Screen",
|
|
51300
51313
|
method: "setBorderWidth",
|
|
51301
51314
|
item: [this.getId()],
|
|
51302
51315
|
newData: { borderWidth },
|
|
@@ -51309,18 +51322,37 @@ class Screen extends BaseItem {
|
|
|
51309
51322
|
}
|
|
51310
51323
|
setBorderColor(borderColor) {
|
|
51311
51324
|
this.emit({
|
|
51312
|
-
class: "
|
|
51325
|
+
class: "Screen",
|
|
51313
51326
|
method: "setBorderColor",
|
|
51314
51327
|
item: [this.getId()],
|
|
51315
51328
|
newData: { borderColor },
|
|
51316
51329
|
prevData: { borderColor: this.borderColor }
|
|
51317
51330
|
});
|
|
51318
51331
|
}
|
|
51332
|
+
applyBackgroundUrl(url) {
|
|
51333
|
+
this.backgroundUrl = url || "";
|
|
51334
|
+
if (url) {
|
|
51335
|
+
this.backgroundImage = new Image;
|
|
51336
|
+
this.backgroundImage.src = url;
|
|
51337
|
+
this.applyBackgroundColor("none");
|
|
51338
|
+
} else {
|
|
51339
|
+
this.backgroundImage = null;
|
|
51340
|
+
}
|
|
51341
|
+
}
|
|
51342
|
+
setBackgroundUrl(url) {
|
|
51343
|
+
this.emit({
|
|
51344
|
+
class: "Screen",
|
|
51345
|
+
method: "setBackgroundUrl",
|
|
51346
|
+
item: [this.getId()],
|
|
51347
|
+
newData: { backgroundUrl: url },
|
|
51348
|
+
prevData: { backgroundUrl: this.backgroundUrl }
|
|
51349
|
+
});
|
|
51350
|
+
}
|
|
51319
51351
|
applyOwnerId(ownerId) {
|
|
51320
51352
|
this.ownerId = ownerId;
|
|
51321
51353
|
}
|
|
51322
51354
|
transformPath() {
|
|
51323
|
-
this.path =
|
|
51355
|
+
this.path = screenPath.copy();
|
|
51324
51356
|
this.path.transform(this.transformation.matrix);
|
|
51325
51357
|
this.path.setBackgroundColor(this.backgroundColor);
|
|
51326
51358
|
this.path.setBorderColor(this.borderColor);
|
|
@@ -51343,6 +51375,13 @@ class Screen extends BaseItem {
|
|
|
51343
51375
|
if (this.transformationRenderBlock) {
|
|
51344
51376
|
return;
|
|
51345
51377
|
}
|
|
51378
|
+
if (this.backgroundImage && this.backgroundImage.complete) {
|
|
51379
|
+
const ctx = context.ctx;
|
|
51380
|
+
ctx.save();
|
|
51381
|
+
this.transformation.matrix.applyToContext(ctx);
|
|
51382
|
+
ctx.drawImage(this.backgroundImage, 0, 0);
|
|
51383
|
+
ctx.restore();
|
|
51384
|
+
}
|
|
51346
51385
|
this.path.render(context);
|
|
51347
51386
|
if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
|
|
51348
51387
|
super.render(context);
|
|
@@ -23,6 +23,7 @@ export declare class Deck extends BaseItem {
|
|
|
23
23
|
applyRemoveChildren(childIds: string[]): void;
|
|
24
24
|
getDeck(): Card[];
|
|
25
25
|
getTopCard(): Card | undefined;
|
|
26
|
+
getCards(count: number): Card[] | undefined;
|
|
26
27
|
getBottomCard(): Card | undefined;
|
|
27
28
|
getRandomCard(): Card | undefined;
|
|
28
29
|
shuffleDeck(): void;
|
|
@@ -12,6 +12,8 @@ export declare class Screen extends BaseItem {
|
|
|
12
12
|
private path;
|
|
13
13
|
private borderWidth;
|
|
14
14
|
backgroundColor: string;
|
|
15
|
+
backgroundUrl: string;
|
|
16
|
+
backgroundImage: HTMLImageElement | null;
|
|
15
17
|
constructor(board: Board, id?: string, ownerId?: string);
|
|
16
18
|
apply(op: ScreenOperation): void;
|
|
17
19
|
getBackgroundColor(): string;
|
|
@@ -24,6 +26,8 @@ export declare class Screen extends BaseItem {
|
|
|
24
26
|
setBorderWidth(borderWidth: BorderWidth): void;
|
|
25
27
|
private applyBorderColor;
|
|
26
28
|
setBorderColor(borderColor: string): void;
|
|
29
|
+
private applyBackgroundUrl;
|
|
30
|
+
setBackgroundUrl(url?: string): void;
|
|
27
31
|
applyOwnerId(ownerId: string): void;
|
|
28
32
|
private transformPath;
|
|
29
33
|
updateMbr(): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseOperation } from "../../../../Events/EventsOperations";
|
|
2
|
-
export type ScreenOperation = SetBackgroundColor | SetBorderColor | SetBorderWidth;
|
|
2
|
+
export type ScreenOperation = SetBackgroundColor | SetBorderColor | SetBorderWidth | SetBackgroundUrl;
|
|
3
3
|
interface SetBackgroundColor extends BaseOperation<{
|
|
4
4
|
backgroundColor: string;
|
|
5
5
|
}> {
|
|
@@ -18,4 +18,10 @@ export interface SetBorderWidth extends BaseOperation<{
|
|
|
18
18
|
class: "Screen";
|
|
19
19
|
method: "setBorderWidth";
|
|
20
20
|
}
|
|
21
|
+
export interface SetBackgroundUrl extends BaseOperation<{
|
|
22
|
+
backgroundUrl?: string;
|
|
23
|
+
}> {
|
|
24
|
+
class: "Screen";
|
|
25
|
+
method: "setBackgroundUrl";
|
|
26
|
+
}
|
|
21
27
|
export {};
|