@operato/scene-tab 9.0.0-beta.1 → 9.0.0-beta.15
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/index.d.ts +4 -4
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/tab-button.js +8 -4
- package/dist/tab-button.js.map +1 -1
- package/dist/tab-card.js +8 -4
- package/dist/tab-card.js.map +1 -1
- package/dist/tab-container.d.ts +1 -1
- package/dist/tab-container.js +12 -4
- package/dist/tab-container.js.map +1 -1
- package/dist/tab.js +8 -4
- package/dist/tab.js.map +1 -1
- package/dist/templates/index.js +2 -2
- package/dist/templates/index.js.map +1 -1
- package/package.json +5 -4
- package/things-scene.config.js +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as TabCard } from './tab-card';
|
|
2
|
-
export { default as TabContainer } from './tab-container';
|
|
3
|
-
export { default as Tab } from './tab';
|
|
4
|
-
export { default as TabButton } from './tab-button';
|
|
1
|
+
export { default as TabCard } from './tab-card.js';
|
|
2
|
+
export { default as TabContainer } from './tab-container.js';
|
|
3
|
+
export { default as Tab } from './tab.js';
|
|
4
|
+
export { default as TabButton } from './tab-button.js';
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
export { default as TabCard } from './tab-card';
|
|
5
|
-
export { default as TabContainer } from './tab-container';
|
|
6
|
-
export { default as Tab } from './tab';
|
|
7
|
-
export { default as TabButton } from './tab-button';
|
|
4
|
+
export { default as TabCard } from './tab-card.js';
|
|
5
|
+
export { default as TabContainer } from './tab-container.js';
|
|
6
|
+
export { default as Tab } from './tab.js';
|
|
7
|
+
export { default as TabButton } from './tab-button.js';
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as TabCard } from './tab-card.js'\nexport { default as TabContainer } from './tab-container.js'\nexport { default as Tab } from './tab.js'\nexport { default as TabButton } from './tab-button.js'\n"]}
|
package/dist/tab-button.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
1
2
|
/*
|
|
2
3
|
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
4
|
*/
|
|
4
|
-
import { Component, RectPath } from '@hatiolab/things-scene';
|
|
5
|
-
|
|
5
|
+
import { Component, RectPath, sceneComponent } from '@hatiolab/things-scene';
|
|
6
|
+
let TabButton = class TabButton extends RectPath(Component) {
|
|
6
7
|
get index() {
|
|
7
8
|
return this.parent.indexOf(this);
|
|
8
9
|
}
|
|
@@ -56,6 +57,9 @@ export default class TabButton extends RectPath(Component) {
|
|
|
56
57
|
}
|
|
57
58
|
this.invalidate();
|
|
58
59
|
}
|
|
59
|
-
}
|
|
60
|
-
|
|
60
|
+
};
|
|
61
|
+
TabButton = __decorate([
|
|
62
|
+
sceneComponent('tab-button')
|
|
63
|
+
], TabButton);
|
|
64
|
+
export default TabButton;
|
|
61
65
|
//# sourceMappingURL=tab-button.js.map
|
package/dist/tab-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../src/tab-button.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAS,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../src/tab-button.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath, sceneComponent, State } from '@hatiolab/things-scene'\n\nimport Tab from './tab.js'\n\n@sceneComponent('tab-button')\nexport default class TabButton extends RectPath(Component) {\n get index() {\n return (this.parent as Tab).indexOf(this)\n }\n\n get activated() {\n return (this.parent as Tab).activeIndex === this.index\n }\n\n private _fillStyle?: string\n private _fontColor?: string\n private _strokeStyle?: string\n private _lineWidth?: string\n\n prerender(context: CanvasRenderingContext2D) {\n super.prerender(context)\n\n let { activeFillStyle, activeLineColor, activeLineWidth, activeFontColor } = this.state\n\n if (this.activated) {\n this.model.fillStyle = activeFillStyle\n this.model.fontColor = activeFontColor\n this.model.strokeStyle = activeLineColor\n this.model.lineWidth = activeLineWidth\n } else {\n this.model.fillStyle = this._fillStyle\n this.model.fontColor = this._fontColor\n this.model.strokeStyle = this._strokeStyle\n this.model.lineWidth = this._lineWidth\n }\n }\n\n render(context: CanvasRenderingContext2D) {\n var { left = 0, top = 0, width, height } = this.bounds\n\n context.beginPath()\n\n context.rect(left, top, width, height)\n\n this.drawFill(context)\n this.drawStroke(context)\n }\n\n onclick(e: MouseEvent) {\n ;(this.parent as Tab).activeIndex = this.index\n this.parent.invalidate()\n }\n\n setStylesFromParent(style: State) {\n if ('fillStyle' in style) this._fillStyle = style.fillStyle\n if ('fontColor' in style) this._fontColor = style.fontColor\n if ('strokeStyle' in style) this._strokeStyle = style.strokeStyle\n if ('lineWidth' in style) this._lineWidth = style.lineWidth\n\n this.set(style)\n }\n\n onchange(after: State) {\n if ('text' in after) {\n ;(this.parent as Tab).reference?.getAt(this.index).setState('text', after.text)\n }\n\n this.invalidate()\n }\n}\n"]}
|
package/dist/tab-card.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
1
2
|
/*
|
|
2
3
|
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
4
|
*/
|
|
4
|
-
import {
|
|
5
|
+
import { Container, sceneComponent } from '@hatiolab/things-scene';
|
|
5
6
|
const NATURE = {
|
|
6
7
|
mutable: false,
|
|
7
8
|
resizable: true,
|
|
@@ -22,7 +23,7 @@ const NATURE = {
|
|
|
22
23
|
}
|
|
23
24
|
]
|
|
24
25
|
};
|
|
25
|
-
|
|
26
|
+
let TabCard = class TabCard extends Container {
|
|
26
27
|
get hasTextProperty() {
|
|
27
28
|
return false;
|
|
28
29
|
}
|
|
@@ -60,6 +61,9 @@ export default class TabCard extends Container {
|
|
|
60
61
|
get nature() {
|
|
61
62
|
return NATURE;
|
|
62
63
|
}
|
|
63
|
-
}
|
|
64
|
-
|
|
64
|
+
};
|
|
65
|
+
TabCard = __decorate([
|
|
66
|
+
sceneComponent('tab-card')
|
|
67
|
+
], TabCard);
|
|
68
|
+
export default TabCard;
|
|
65
69
|
//# sourceMappingURL=tab-card.js.map
|
package/dist/tab-card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-card.js","sourceRoot":"","sources":["../src/tab-card.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"tab-card.js","sourceRoot":"","sources":["../src/tab-card.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAA8B,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAI9F,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,UAAU,OAAgB;oBAChC,IAAI,YAAY,GAAG,OAAO,CAAC,MAAsB,CAAA;oBACjD,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;oBACrC,YAAY,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;gBACpC,CAAC;aACF;SACF;KACF;CACF,CAAA;AAGc,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAG5C,IAAI,eAAe;QACjB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,OAAO;QACT,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF,CAAA;AA7CoB,OAAO;IAD3B,cAAc,CAAC,UAAU,CAAC;GACN,OAAO,CA6C3B;eA7CoB,OAAO","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, Container, sceneComponent } from '@hatiolab/things-scene'\n\nimport TabContainer from './tab-container.js'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'action',\n label: 'remove',\n name: 'remove',\n property: {\n icon: 'remove_circle',\n action: function (tabCard: TabCard) {\n let tabContainer = tabCard.parent as TabContainer\n tabContainer.removeComponent(tabCard)\n tabContainer.set('activeIndex', 0)\n }\n }\n }\n ]\n}\n\n@sceneComponent('tab-card')\nexport default class TabCard extends Container {\n private _clickPoint?: Component\n\n get hasTextProperty() {\n return false\n }\n\n get showMoveHandle() {\n return false\n }\n\n /*\n * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.\n *\n * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)\n * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)\n *\n * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.\n */\n get mutable() {\n return false\n }\n\n /*\n * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.\n *\n * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)\n * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)\n */\n get resizable() {\n return false\n }\n\n /*\n * 회전을 할 수 있는 지를 결정한다.\n *\n * 일반적으로 모든 컴포넌트는 가능하다.(return true)\n */\n get rotatable() {\n return false\n }\n\n get nature() {\n return NATURE\n }\n}\n"]}
|
package/dist/tab-container.d.ts
CHANGED
package/dist/tab-container.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
1
2
|
/*
|
|
2
3
|
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
4
|
*/
|
|
4
|
-
import { CardLayout,
|
|
5
|
+
import { CardLayout, Container, Model, sceneComponent } from '@hatiolab/things-scene';
|
|
5
6
|
const LABEL_WIDTH = 25;
|
|
6
7
|
const LABEL_HEIGHT = 25;
|
|
7
8
|
function rgba(r, g, b, a) {
|
|
@@ -32,7 +33,7 @@ const NATURE = {
|
|
|
32
33
|
'value-property': 'activeIndex',
|
|
33
34
|
help: 'scene/component/tab-container'
|
|
34
35
|
};
|
|
35
|
-
|
|
36
|
+
let TabContainer = class TabContainer extends Container {
|
|
36
37
|
constructor() {
|
|
37
38
|
super(...arguments);
|
|
38
39
|
this._focused = false;
|
|
@@ -114,6 +115,10 @@ export default class TabContainer extends Container {
|
|
|
114
115
|
...this.layoutConfig,
|
|
115
116
|
activeIndex: after.activeIndex
|
|
116
117
|
};
|
|
118
|
+
/*
|
|
119
|
+
자동 data 변경은 반복적인 데이타바인딩을 일으키는 점을 감안하라.
|
|
120
|
+
즉, 자신의 activeIndex를 데이타바인딩으로 수정하지말아야 한다.
|
|
121
|
+
*/
|
|
117
122
|
this.data = after.activeIndex;
|
|
118
123
|
}
|
|
119
124
|
}
|
|
@@ -165,6 +170,9 @@ export default class TabContainer extends Container {
|
|
|
165
170
|
this.addComponent(tabCard);
|
|
166
171
|
this.setState('activeIndex', this.components.length - 1);
|
|
167
172
|
}
|
|
168
|
-
}
|
|
169
|
-
|
|
173
|
+
};
|
|
174
|
+
TabContainer = __decorate([
|
|
175
|
+
sceneComponent('tab-container')
|
|
176
|
+
], TabContainer);
|
|
177
|
+
export default TabContainer;
|
|
170
178
|
//# sourceMappingURL=tab-container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-container.js","sourceRoot":"","sources":["../src/tab-container.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAmB,SAAS,EAAE,KAAK,EAAgB,MAAM,wBAAwB,CAAA;AAI/G,MAAM,WAAW,GAAG,EAAE,CAAA;AACtB,MAAM,YAAY,GAAG,EAAE,CAAA;AAEvB,SAAS,IAAI,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;IACtD,OAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAA;AACvC,CAAC;AAED,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE;gBACR,IAAI,EAAE,YAAY;gBAClB,MAAM,EAAE,CAAC,YAA0B,EAAE,EAAE;oBACrC,YAAY,CAAC,OAAO,EAAE,CAAA;gBACxB,CAAC;aACF;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,cAAc;YACrB,IAAI,EAAE,aAAa;SACpB;KACF;IACD,gBAAgB,EAAE,aAAa;IAC/B,IAAI,EAAE,+BAA+B;CACtC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,SAAS;IAAnD;;QACU,aAAQ,GAAY,KAAK,CAAA;IAsKnC,CAAC;IAnKC,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,MAAM;QACR,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAA;IACtC,CAAC;IAED,IAAI,YAAY,CAAC,MAAM;QACrB,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;IACvC,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,WAAW,IAAI,CAAC,CAAY,CAAA;IACnF,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1C,CAAC;IAED,IAAI,WAAW,CAAC,WAAmB;QACjC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAA;IACpC,CAAC;IAED,UAAU,CAAC,OAAiC;QAC1C,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1C,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;YAEhD,mBAAmB;YACnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAChD,OAAO,CAAC,SAAS,EAAE,CAAA;gBAEnB,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,WAAW,EAAE,GAAG,GAAG,CAAC,GAAG,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAA;gBAEnF,IAAI,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;gBACxC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;gBAChD,OAAO,CAAC,IAAI,EAAE,CAAA;gBAEd,OAAO,CAAC,SAAS,EAAE,CAAA;YACrB,CAAC;YAED,OAAO,CAAC,SAAS,EAAE,CAAA;YAEnB,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;YACzB,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,WAAW,EAAE,GAAG,CAAC,CAAA;YACvC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,YAAY,CAAC,CAAA;YAC/E,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,YAAY,CAAC,CAAA;YAEjE,OAAO,CAAC,WAAW,GAAG,MAAM,CAAA;YAC5B,OAAO,CAAC,MAAM,EAAE,CAAA;YAEhB,OAAO,CAAC,SAAS,EAAE,CAAA;QACrB,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;IAC3B,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAEnC,IAAI,IAAI,CAAC,GAAG,CAAC,UAAU;YAAE,OAAO,QAAQ,CAAA;QAExC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACtC,IAAI,CAAC,GAAG,YAAY,CAAA;QAEpB,QAAQ;YACN,QAAQ;gBACR,0BAA0B;gBAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,WAAW,EAAE,IAAI,CAAC;oBACrC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,WAAW,EAAE,IAAI,CAAC;oBACtC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC;oBACxC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,CAAA;QAE7C,IAAI,QAAQ;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;;YAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QAE1B,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,QAAQ,CAAC,KAAY;QACnB,IAAI,aAAa,IAAI,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,YAAY,GAAG;gBAClB,GAAG,IAAI,CAAC,YAAY;gBACpB,WAAW,EAAE,KAAK,CAAC,WAAW;aAC/B,CAAA;YAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,WAAW,CAAA;QAC/B,CAAC;IACH,CAAC;IAED,SAAS,CAAC,CAAa;QACrB,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,CAAA;QAClC,OAAO,IAAI,CAAC,YAAY,CAAA;QAExB,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,CAAC;YAC1E,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;QAEpD,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE9B,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI,CAAA;QACtB,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,CAAA;QAErB,IAAI,CAAC,GAAG,CAAC;YAAE,OAAM;QAEjB,CAAC,IAAI,YAAY,CAAA;QACjB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAEjB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA;QAE9C,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM;YAAE,OAAM;QAEvC,wCAAwC;QACxC,oCAAoC;QACpC,6BAA6B;QAC7B,wBAAwB;QACxB,kBAAkB;QAClB,kBAAkB;QAClB,QAAQ;QACR,IAAI;QACJ,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;IACjC,CAAC;IAED,WAAW,CAAC,CAAa;QACvB,IAAI,CAAC,YAAY,GAAG;YAClB,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;SACb,CAAA;IACH,CAAC;IAED,OAAO;QACL,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;QAC/D,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;QAE9B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC5B,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;YAChC,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ,CAAC,CAAA;QAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QAC1B,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAC1D,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { CardLayout, Component, ComponentNature, Container, Model, POINT, State } from '@hatiolab/things-scene'\n\nimport TabCard from './tab-card'\n\nconst LABEL_WIDTH = 25\nconst LABEL_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'action',\n label: 'add-card',\n name: 'addCard',\n property: {\n icon: 'add_circle',\n action: (tabContainer: TabContainer) => {\n tabContainer.addCard()\n }\n }\n },\n {\n type: 'number',\n label: 'active index',\n name: 'activeIndex'\n }\n ],\n 'value-property': 'activeIndex',\n help: 'scene/component/tab-container'\n}\n\nexport default class TabContainer extends Container {\n private _focused: boolean = false\n private __down_point?: POINT\n\n get nature() {\n return NATURE\n }\n\n get layout() {\n return CardLayout\n }\n\n get layoutConfig() {\n return this.getState('layoutConfig')\n }\n\n set layoutConfig(config) {\n this.setState('layoutConfig', config)\n }\n\n get activeCard(): TabCard {\n return this.components[this.getState('layoutConfig').activeIndex || 0] as TabCard\n }\n\n get activeIndex() {\n return this.getState('activeIndex') || 0\n }\n\n set activeIndex(activeIndex: number) {\n this.setState('activeIndex', Number(activeIndex))\n }\n\n ready() {\n super.ready()\n\n if (this.components.length == 0) {\n this.addCard()\n }\n\n this.data = this.state.activeIndex\n }\n\n postrender(context: CanvasRenderingContext2D) {\n if (!this.app.isViewMode && this._focused) {\n var { left, top, width, fillStyle } = this.state\n\n // tabCard 선택 탭 그리기\n for (let i = 0; i < this.components.length; i++) {\n context.beginPath()\n\n context.rect(left - LABEL_WIDTH, top + i * LABEL_HEIGHT, LABEL_WIDTH, LABEL_HEIGHT)\n\n let color = 255 - ((20 * (i + 1)) % 255)\n context.fillStyle = rgba(color, color, color, 1)\n context.fill()\n\n context.closePath()\n }\n\n context.beginPath()\n\n context.moveTo(left, top)\n context.lineTo(left - LABEL_WIDTH, top)\n context.lineTo(left - LABEL_WIDTH, top + this.components.length * LABEL_HEIGHT)\n context.lineTo(left, top + this.components.length * LABEL_HEIGHT)\n\n context.strokeStyle = '#ccc'\n context.stroke()\n\n context.closePath()\n }\n\n super.postrender(context)\n }\n\n contains(x: number, y: number) {\n var contains = super.contains(x, y)\n\n if (this.app.isViewMode) return contains\n\n var { left, top, width } = this.bounds\n var h = LABEL_HEIGHT\n\n contains =\n contains ||\n // card selector 영역에 포함되는지\n (x < Math.max(left - LABEL_WIDTH, left) &&\n x > Math.min(left - LABEL_WIDTH, left) &&\n y < Math.max(top + h * this.size(), top) &&\n y > Math.min(top + h * this.size(), top))\n\n if (contains) this._focused = true\n else this._focused = false\n\n this.invalidate()\n return contains\n }\n\n onchange(after: State) {\n if ('activeIndex' in after) {\n this.layoutConfig = {\n ...this.layoutConfig,\n activeIndex: after.activeIndex\n }\n\n this.data = after.activeIndex\n }\n }\n\n onmouseup(e: MouseEvent) {\n var down_point = this.__down_point\n delete this.__down_point\n\n if (!down_point || down_point.x != e.offsetX || down_point.y != e.offsetY) {\n return\n }\n\n var point = this.transcoordC2S(e.offsetX, e.offsetY)\n\n var { left, top } = this.state\n\n var x = point.x - left\n var y = point.y - top\n\n if (x > 0) return\n\n y /= LABEL_HEIGHT\n y = Math.floor(y)\n\n if (!this.layoutConfig) this.layoutConfig = {}\n\n if (y >= this.components.length) return\n\n // /* 생성 버튼이 클릭되면, 새로운 tabCard를 추가한다. */\n // if(y == this.components.length) {\n // this.add(Model.compile({\n // type: 'tab-card',\n // width: 100,\n // height: 100\n // }))\n // }\n this.setState('activeIndex', y)\n }\n\n onmousedown(e: MouseEvent) {\n this.__down_point = {\n x: e.offsetX,\n y: e.offsetY\n }\n }\n\n addCard() {\n const color = 255 - ((20 * (this.components.length + 1)) % 255)\n const hex = color.toString(16)\n\n const tabCard = Model.compile({\n type: 'tab-card',\n fillStyle: `#${hex}${hex}${hex}`,\n top: 0,\n left: 0,\n width: 100,\n height: 100\n })\n\n this.addComponent(tabCard)\n this.setState('activeIndex', this.components.length - 1)\n }\n}\n\nComponent.register('tab-container', TabContainer)\n"]}
|
|
1
|
+
{"version":3,"file":"tab-container.js","sourceRoot":"","sources":["../src/tab-container.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n CardLayout,\n Component,\n ComponentNature,\n Container,\n Model,\n POINT,\n sceneComponent,\n State\n} from '@hatiolab/things-scene'\n\nimport TabCard from './tab-card.js'\n\nconst LABEL_WIDTH = 25\nconst LABEL_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'action',\n label: 'add-card',\n name: 'addCard',\n property: {\n icon: 'add_circle',\n action: (tabContainer: TabContainer) => {\n tabContainer.addCard()\n }\n }\n },\n {\n type: 'number',\n label: 'active index',\n name: 'activeIndex'\n }\n ],\n 'value-property': 'activeIndex',\n help: 'scene/component/tab-container'\n}\n\n@sceneComponent('tab-container')\nexport default class TabContainer extends Container {\n private _focused: boolean = false\n private __down_point?: POINT\n\n get nature() {\n return NATURE\n }\n\n get layout() {\n return CardLayout\n }\n\n get layoutConfig() {\n return this.getState('layoutConfig')\n }\n\n set layoutConfig(config) {\n this.setState('layoutConfig', config)\n }\n\n get activeCard(): TabCard {\n return this.components[this.getState('layoutConfig').activeIndex || 0] as TabCard\n }\n\n get activeIndex() {\n return this.getState('activeIndex') || 0\n }\n\n set activeIndex(activeIndex: number) {\n this.setState('activeIndex', Number(activeIndex))\n }\n\n ready() {\n super.ready()\n\n if (this.components.length == 0) {\n this.addCard()\n }\n\n this.data = this.state.activeIndex\n }\n\n postrender(context: CanvasRenderingContext2D) {\n if (!this.app.isViewMode && this._focused) {\n var { left, top, width, fillStyle } = this.state\n\n // tabCard 선택 탭 그리기\n for (let i = 0; i < this.components.length; i++) {\n context.beginPath()\n\n context.rect(left - LABEL_WIDTH, top + i * LABEL_HEIGHT, LABEL_WIDTH, LABEL_HEIGHT)\n\n let color = 255 - ((20 * (i + 1)) % 255)\n context.fillStyle = rgba(color, color, color, 1)\n context.fill()\n\n context.closePath()\n }\n\n context.beginPath()\n\n context.moveTo(left, top)\n context.lineTo(left - LABEL_WIDTH, top)\n context.lineTo(left - LABEL_WIDTH, top + this.components.length * LABEL_HEIGHT)\n context.lineTo(left, top + this.components.length * LABEL_HEIGHT)\n\n context.strokeStyle = '#ccc'\n context.stroke()\n\n context.closePath()\n }\n\n super.postrender(context)\n }\n\n contains(x: number, y: number) {\n var contains = super.contains(x, y)\n\n if (this.app.isViewMode) return contains\n\n var { left, top, width } = this.bounds\n var h = LABEL_HEIGHT\n\n contains =\n contains ||\n // card selector 영역에 포함되는지\n (x < Math.max(left - LABEL_WIDTH, left) &&\n x > Math.min(left - LABEL_WIDTH, left) &&\n y < Math.max(top + h * this.size(), top) &&\n y > Math.min(top + h * this.size(), top))\n\n if (contains) this._focused = true\n else this._focused = false\n\n this.invalidate()\n return contains\n }\n\n onchange(after: State) {\n if ('activeIndex' in after) {\n this.layoutConfig = {\n ...this.layoutConfig,\n activeIndex: after.activeIndex\n }\n\n /* \n 자동 data 변경은 반복적인 데이타바인딩을 일으키는 점을 감안하라.\n 즉, 자신의 activeIndex를 데이타바인딩으로 수정하지말아야 한다.\n */\n this.data = after.activeIndex\n }\n }\n\n onmouseup(e: MouseEvent) {\n var down_point = this.__down_point\n delete this.__down_point\n\n if (!down_point || down_point.x != e.offsetX || down_point.y != e.offsetY) {\n return\n }\n\n var point = this.transcoordC2S(e.offsetX, e.offsetY)\n\n var { left, top } = this.state\n\n var x = point.x - left\n var y = point.y - top\n\n if (x > 0) return\n\n y /= LABEL_HEIGHT\n y = Math.floor(y)\n\n if (!this.layoutConfig) this.layoutConfig = {}\n\n if (y >= this.components.length) return\n\n // /* 생성 버튼이 클릭되면, 새로운 tabCard를 추가한다. */\n // if(y == this.components.length) {\n // this.add(Model.compile({\n // type: 'tab-card',\n // width: 100,\n // height: 100\n // }))\n // }\n this.setState('activeIndex', y)\n }\n\n onmousedown(e: MouseEvent) {\n this.__down_point = {\n x: e.offsetX,\n y: e.offsetY\n }\n }\n\n addCard() {\n const color = 255 - ((20 * (this.components.length + 1)) % 255)\n const hex = color.toString(16)\n\n const tabCard = Model.compile({\n type: 'tab-card',\n fillStyle: `#${hex}${hex}${hex}`,\n top: 0,\n left: 0,\n width: 100,\n height: 100\n })\n\n this.addComponent(tabCard)\n this.setState('activeIndex', this.components.length - 1)\n }\n}\n"]}
|
package/dist/tab.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
1
2
|
/*
|
|
2
3
|
* Copyright © HatioLab Inc. All rights reserved.
|
|
3
4
|
*/
|
|
4
|
-
import {
|
|
5
|
+
import { Container, LinearHorizontalLayout, LinearVerticalLayout, Model, sceneComponent } from '@hatiolab/things-scene';
|
|
5
6
|
const HANDLE_WIDTH = 25;
|
|
6
7
|
const HANDLE_HEIGHT = 25;
|
|
7
8
|
function rgba(r, g, b, a) {
|
|
@@ -61,7 +62,7 @@ const NATURE = {
|
|
|
61
62
|
'value-property': 'activeIndex',
|
|
62
63
|
help: 'scene/component/tab'
|
|
63
64
|
};
|
|
64
|
-
|
|
65
|
+
let Tab = class Tab extends Container {
|
|
65
66
|
get layout() {
|
|
66
67
|
let { width, height } = this.state;
|
|
67
68
|
if (width >= height) {
|
|
@@ -226,6 +227,9 @@ export default class Tab extends Container {
|
|
|
226
227
|
}
|
|
227
228
|
this.setTabButtonsStyle(after);
|
|
228
229
|
}
|
|
229
|
-
}
|
|
230
|
-
|
|
230
|
+
};
|
|
231
|
+
Tab = __decorate([
|
|
232
|
+
sceneComponent('tab')
|
|
233
|
+
], Tab);
|
|
234
|
+
export default Tab;
|
|
231
235
|
//# sourceMappingURL=tab.js.map
|
package/dist/tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../src/tab.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n Component,\n ComponentNature,\n Container,\n LinearHorizontalLayout,\n LinearVerticalLayout,\n Model,\n State,\n Style\n} from '@hatiolab/things-scene'\nimport TabButton from './tab-button'\n\nconst HANDLE_WIDTH = 25\nconst HANDLE_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'id-input',\n label: 'tab-reference',\n name: 'reference',\n property: {\n component: (c: Component) => {\n /* this means compare target component */\n const ret = ['tab-container', 'indoor-map'].includes(c.model.type as string)\n return ret\n }\n }\n },\n {\n type: 'number',\n label: 'tab-active-index',\n name: 'activeIndex',\n property: {\n min: 0,\n step: 1\n }\n },\n {\n type: 'color',\n label: 'active-fill-style',\n name: 'activeFillStyle',\n property: 'activeFillStyle'\n },\n {\n type: 'color',\n label: 'active-font-color',\n name: 'activeFontColor',\n property: 'activeFontColor'\n },\n {\n type: 'color',\n label: 'active-line-color',\n name: 'activeLineColor',\n property: 'activeLineColor'\n },\n {\n type: 'number',\n label: 'active-line-width',\n name: 'activeLineWidth',\n property: 'activeLineWidth'\n }\n ],\n 'value-property': 'activeIndex',\n help: 'scene/component/tab'\n}\n\nexport default class Tab extends Container {\n get layout() {\n let { width, height } = this.state\n\n if (width >= height) {\n return LinearHorizontalLayout\n } else {\n return LinearVerticalLayout\n }\n }\n\n get nature() {\n return NATURE\n }\n\n get focusible() {\n return false\n }\n\n get reference() {\n var { reference } = this.state\n if (!reference) {\n return null\n }\n\n if (!this._reference) {\n this._reference = this.root.findById(reference)\n // this._reference?.on('change', this.onRefChanged, this)\n }\n\n return this._reference\n }\n\n get activeIndex() {\n return this.getState('activeIndex')\n }\n\n private _reference: any\n\n set reference(reference) {\n // this.reference?.off('change', this.onRefChanged, this)\n\n this._reference = null\n this.model.reference = reference\n }\n\n set activeIndex(index) {\n this.setState('activeIndex', index)\n if (this.reference) {\n this.reference.activeIndex = index\n }\n }\n\n ready() {\n super.ready()\n\n this.data = this.state?.activeIndex || 0\n\n this.setTabButtonsStyle(this.state)\n }\n\n render(context: CanvasRenderingContext2D) {\n super.render(context)\n\n if (this.reference) {\n if (this.size() !== this.reference.size()) {\n this.rebuildTabButtons()\n }\n } else {\n // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..\n var componentsLength = this.components.length\n\n for (var i = componentsLength - 1; i >= 0; i--) {\n var tabBtn = this.components[i]\n this.removeComponent(tabBtn)\n }\n }\n }\n\n contains(x: number, y: number) {\n if (!this.app.isEditMode) {\n return super.contains(x, y)\n }\n\n if (super.contains(x, y)) {\n return true\n }\n\n var { left, top, width } = this.bounds\n\n var right = left + width\n\n var h = HANDLE_HEIGHT\n\n return (\n x < Math.max(right + HANDLE_WIDTH, right) &&\n x > Math.min(right + HANDLE_WIDTH, right) &&\n y < Math.max(top + h, top) &&\n y > Math.min(top + h, top)\n )\n }\n\n // dispose() {\n // this.reference?.off('change', this.onRefChanged, this)\n\n // super.dispose()\n // }\n\n rebuildTabButtons() {\n var {\n width,\n height,\n fillStyle,\n activeFillStyle,\n activeLineColor,\n activeLineWidth,\n strokeStyle,\n fontColor,\n activeFontColor,\n fontFamily,\n fontSize,\n lineHeight,\n italic,\n bold,\n lineWidth = 0\n } = this.state\n\n var reference = this.reference\n let children = []\n\n let components = reference.components\n\n let componentsLength = this.components.length\n\n for (var i = componentsLength - 1; i >= 0; i--) {\n this.removeComponent(this.components[i])\n }\n\n for (let i = 0; i < components.length; i++) {\n const componentType = components[i].model.type\n if (componentType != 'tab-card' && componentType != 'floor') {\n continue\n }\n\n let tabCardText = components[i].text || ''\n\n children.push(\n Model.compile({\n type: 'tab-button',\n index: i,\n text: tabCardText || String(i + 1),\n fillStyle: fillStyle || 'transparent',\n activeFillStyle: activeFillStyle,\n activeLineColor: activeLineColor,\n activeLineWidth: activeLineWidth,\n activeFontColor: activeFontColor || fontColor,\n fontColor: fontColor,\n fontFamily: fontFamily,\n fontSize: fontSize,\n lineHeight: lineHeight,\n italic: italic,\n bold: bold,\n strokeStyle: strokeStyle,\n lineWidth: lineWidth,\n left: 0,\n top: 0,\n width: width,\n height: height\n })\n )\n }\n\n this.add(children)\n\n this.reflow()\n\n this.activeIndex = this.state.activeIndex || 0\n }\n\n setTabButtonsStyle(style: Style) {\n const toCopy = {} as any\n\n if ('fillStyle' in style) toCopy.fillStyle = style.fillStyle\n if ('fontColor' in style) toCopy.fontColor = style.fontColor\n if ('strokeStyle' in style) toCopy.strokeStyle = style.strokeStyle\n if ('lineWidth' in style) toCopy.lineWidth = style.lineWidth\n\n if ('activeFillStyle' in style) toCopy.activeFillStyle = style.activeFillStyle\n if ('activeFontColor' in style) toCopy.activeFontColor = style.activeFontColor\n if ('activeLineWidth' in style) toCopy.activeLineWidth = style.activeLineWidth\n if ('activeLineColor' in style) toCopy.activeLineColor = style.activeLineColor\n\n var children = this.components\n\n for (var i in children) {\n var tabBtn = children[i]\n ;(tabBtn as TabButton).setStylesFromParent(toCopy)\n }\n }\n\n // onRefChanged(after: any, before: any, hint: any) {\n // let sourceIndex = hint.deliverer.indexOf(hint.origin)\n // if (this.components[sourceIndex]) {\n // this.components[sourceIndex].set(after)\n // this.invalidate()\n // }\n // }\n\n onchange(after: State, before: State) {\n if ('reference' in after) {\n this.reference = after.reference\n this.invalidate()\n }\n\n if ('activeIndex' in after) {\n this.data = after.activeIndex\n }\n\n this.setTabButtonsStyle(after)\n }\n}\n\nComponent.register('tab', Tab)\n"]}
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../src/tab.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n Component,\n ComponentNature,\n Container,\n LinearHorizontalLayout,\n LinearVerticalLayout,\n Model,\n sceneComponent,\n State,\n Style\n} from '@hatiolab/things-scene'\nimport TabButton from './tab-button.js'\n\nconst HANDLE_WIDTH = 25\nconst HANDLE_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'id-input',\n label: 'tab-reference',\n name: 'reference',\n property: {\n component: (c: Component) => {\n /* this means compare target component */\n const ret = ['tab-container', 'indoor-map'].includes(c.model.type as string)\n return ret\n }\n }\n },\n {\n type: 'number',\n label: 'tab-active-index',\n name: 'activeIndex',\n property: {\n min: 0,\n step: 1\n }\n },\n {\n type: 'color',\n label: 'active-fill-style',\n name: 'activeFillStyle',\n property: 'activeFillStyle'\n },\n {\n type: 'color',\n label: 'active-font-color',\n name: 'activeFontColor',\n property: 'activeFontColor'\n },\n {\n type: 'color',\n label: 'active-line-color',\n name: 'activeLineColor',\n property: 'activeLineColor'\n },\n {\n type: 'number',\n label: 'active-line-width',\n name: 'activeLineWidth',\n property: 'activeLineWidth'\n }\n ],\n 'value-property': 'activeIndex',\n help: 'scene/component/tab'\n}\n\n@sceneComponent('tab')\nexport default class Tab extends Container {\n get layout() {\n let { width, height } = this.state\n\n if (width >= height) {\n return LinearHorizontalLayout\n } else {\n return LinearVerticalLayout\n }\n }\n\n get nature() {\n return NATURE\n }\n\n get focusible() {\n return false\n }\n\n get reference() {\n var { reference } = this.state\n if (!reference) {\n return null\n }\n\n if (!this._reference) {\n this._reference = this.root.findById(reference)\n // this._reference?.on('change', this.onRefChanged, this)\n }\n\n return this._reference\n }\n\n get activeIndex() {\n return this.getState('activeIndex')\n }\n\n private _reference: any\n\n set reference(reference) {\n // this.reference?.off('change', this.onRefChanged, this)\n\n this._reference = null\n this.model.reference = reference\n }\n\n set activeIndex(index) {\n this.setState('activeIndex', index)\n if (this.reference) {\n this.reference.activeIndex = index\n }\n }\n\n ready() {\n super.ready()\n\n this.data = this.state?.activeIndex || 0\n\n this.setTabButtonsStyle(this.state)\n }\n\n render(context: CanvasRenderingContext2D) {\n super.render(context)\n\n if (this.reference) {\n if (this.size() !== this.reference.size()) {\n this.rebuildTabButtons()\n }\n } else {\n // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..\n var componentsLength = this.components.length\n\n for (var i = componentsLength - 1; i >= 0; i--) {\n var tabBtn = this.components[i]\n this.removeComponent(tabBtn)\n }\n }\n }\n\n contains(x: number, y: number) {\n if (!this.app.isEditMode) {\n return super.contains(x, y)\n }\n\n if (super.contains(x, y)) {\n return true\n }\n\n var { left, top, width } = this.bounds\n\n var right = left + width\n\n var h = HANDLE_HEIGHT\n\n return (\n x < Math.max(right + HANDLE_WIDTH, right) &&\n x > Math.min(right + HANDLE_WIDTH, right) &&\n y < Math.max(top + h, top) &&\n y > Math.min(top + h, top)\n )\n }\n\n // dispose() {\n // this.reference?.off('change', this.onRefChanged, this)\n\n // super.dispose()\n // }\n\n rebuildTabButtons() {\n var {\n width,\n height,\n fillStyle,\n activeFillStyle,\n activeLineColor,\n activeLineWidth,\n strokeStyle,\n fontColor,\n activeFontColor,\n fontFamily,\n fontSize,\n lineHeight,\n italic,\n bold,\n lineWidth = 0\n } = this.state\n\n var reference = this.reference\n let children = []\n\n let components = reference.components\n\n let componentsLength = this.components.length\n\n for (var i = componentsLength - 1; i >= 0; i--) {\n this.removeComponent(this.components[i])\n }\n\n for (let i = 0; i < components.length; i++) {\n const componentType = components[i].model.type\n if (componentType != 'tab-card' && componentType != 'floor') {\n continue\n }\n\n let tabCardText = components[i].text || ''\n\n children.push(\n Model.compile({\n type: 'tab-button',\n index: i,\n text: tabCardText || String(i + 1),\n fillStyle: fillStyle || 'transparent',\n activeFillStyle: activeFillStyle,\n activeLineColor: activeLineColor,\n activeLineWidth: activeLineWidth,\n activeFontColor: activeFontColor || fontColor,\n fontColor: fontColor,\n fontFamily: fontFamily,\n fontSize: fontSize,\n lineHeight: lineHeight,\n italic: italic,\n bold: bold,\n strokeStyle: strokeStyle,\n lineWidth: lineWidth,\n left: 0,\n top: 0,\n width: width,\n height: height\n })\n )\n }\n\n this.add(children)\n\n this.reflow()\n\n this.activeIndex = this.state.activeIndex || 0\n }\n\n setTabButtonsStyle(style: Style) {\n const toCopy = {} as any\n\n if ('fillStyle' in style) toCopy.fillStyle = style.fillStyle\n if ('fontColor' in style) toCopy.fontColor = style.fontColor\n if ('strokeStyle' in style) toCopy.strokeStyle = style.strokeStyle\n if ('lineWidth' in style) toCopy.lineWidth = style.lineWidth\n\n if ('activeFillStyle' in style) toCopy.activeFillStyle = style.activeFillStyle\n if ('activeFontColor' in style) toCopy.activeFontColor = style.activeFontColor\n if ('activeLineWidth' in style) toCopy.activeLineWidth = style.activeLineWidth\n if ('activeLineColor' in style) toCopy.activeLineColor = style.activeLineColor\n\n var children = this.components\n\n for (var i in children) {\n var tabBtn = children[i]\n ;(tabBtn as TabButton).setStylesFromParent(toCopy)\n }\n }\n\n // onRefChanged(after: any, before: any, hint: any) {\n // let sourceIndex = hint.deliverer.indexOf(hint.origin)\n // if (this.components[sourceIndex]) {\n // this.components[sourceIndex].set(after)\n // this.invalidate()\n // }\n // }\n\n onchange(after: State, before: State) {\n if ('reference' in after) {\n this.reference = after.reference\n this.invalidate()\n }\n\n if ('activeIndex' in after) {\n this.data = after.activeIndex\n }\n\n this.setTabButtonsStyle(after)\n }\n}\n"]}
|
package/dist/templates/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAC7C,OAAO,GAAG,MAAM,UAAU,CAAA;AAE1B,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC,CAAA","sourcesContent":["import TabContainer from './tab-container.js'\nimport Tab from './tab.js'\n\nexport default [TabContainer, Tab]\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
"name": "@operato/scene-tab",
|
|
3
3
|
"description": "Tab style container for Things Scene",
|
|
4
4
|
"author": "heartyoh",
|
|
5
|
-
"version": "9.0.0-beta.
|
|
5
|
+
"version": "9.0.0-beta.15",
|
|
6
|
+
"type": "module",
|
|
6
7
|
"main": "dist/index.js",
|
|
7
8
|
"module": "dist/index.js",
|
|
8
9
|
"license": "MIT",
|
|
@@ -37,8 +38,8 @@
|
|
|
37
38
|
"@typescript-eslint/parser": "^4.33.0",
|
|
38
39
|
"@web/dev-server": "^0.1.28",
|
|
39
40
|
"concurrently": "^8.0.1",
|
|
40
|
-
"eslint": "^
|
|
41
|
-
"eslint-config-prettier": "^
|
|
41
|
+
"eslint": "^9.18.0",
|
|
42
|
+
"eslint-config-prettier": "^10.0.1",
|
|
42
43
|
"husky": "^8.0.3",
|
|
43
44
|
"lint-staged": "^13.2.2",
|
|
44
45
|
"prettier": "^2.4.1",
|
|
@@ -57,5 +58,5 @@
|
|
|
57
58
|
"prettier --write"
|
|
58
59
|
]
|
|
59
60
|
},
|
|
60
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "3a94a8a9ee8cb8de82ad331cb08b9e48d6625d31"
|
|
61
62
|
}
|
package/things-scene.config.js
CHANGED