ziko 1.7.0 → 1.9.0
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/ziko.cjs +458 -174
- package/dist/ziko.js +458 -174
- package/dist/ziko.min.js +2 -2
- package/dist/ziko.mjs +453 -173
- package/package.json +1 -1
- package/src/dom/{flex → components/Flex}/index.js +1 -1
- package/src/dom/components/{for → For}/index.js +1 -1
- package/src/dom/{suspense → components/Suspense}/index.js +3 -7
- package/src/dom/components/View/index.js +9 -0
- package/src/dom/{graphics/canvas.js → components/graphics/Canvas/index.js} +6 -6
- package/src/dom/{graphics/svg.js → components/graphics/Svg/index.js} +4 -4
- package/src/dom/components/graphics/index.js +2 -0
- package/src/dom/components/index.js +10 -3
- package/src/dom/{wrappers/html → components/wrappers/HTMLWrapper}/index.js +1 -1
- package/src/dom/{wrappers/svg → components/wrappers/SVGWrapper}/index.js +1 -1
- package/src/dom/components/wrappers/index.js +2 -0
- package/src/dom/constructors/mixins/dom.js +1 -0
- package/src/dom/index.js +0 -8
- package/src/hooks/index.d.ts +1 -0
- package/src/hooks/index.js +1 -0
- package/src/hooks/use-derived.js +24 -17
- package/src/hooks/use-effect.d.ts +39 -0
- package/src/hooks/use-effect.js +40 -0
- package/src/hooks/use-state.d.ts +28 -10
- package/src/hooks/use-state.js +3 -1
- package/src/symbols/index.d.ts +39 -0
- package/src/symbols/index.js +5 -0
- package/src/dom/graphics/index.js +0 -2
- package/src/dom/logic/index.js +0 -1
- package/src/dom/view/index.js +0 -13
- package/src/dom/wrappers/index.js +0 -2
- package/src/events-dep/binders/coordinates-based-event.js +0 -25
- package/src/events-dep/binders/custom-event.js +0 -33
- package/src/events-dep/binders/index.js +0 -105
- package/src/events-dep/custom-events-registry/click-away.js +0 -38
- package/src/events-dep/custom-events-registry/index.js +0 -3
- package/src/events-dep/custom-events-registry/swipe.js +0 -76
- package/src/events-dep/custom-events-registry/view.js +0 -74
- package/src/events-dep/customizers/normalise-coordinates.js +0 -0
- package/src/events-dep/details-setter/index.js +0 -4
- package/src/events-dep/details-setter/key.js +0 -14
- package/src/events-dep/details-setter/mouse.js +0 -35
- package/src/events-dep/details-setter/pointer.js +0 -35
- package/src/events-dep/details-setter/touch.js +0 -37
- package/src/events-dep/events-map/index.js +0 -70
- package/src/events-dep/index.js +0 -3
- package/src/events-dep/types/__Shared__.d.ts +0 -155
- package/src/events-dep/types/clipboard.d.ts +0 -20
- package/src/events-dep/types/focus.d.ts +0 -19
- package/src/events-dep/types/pointer.d.ts +0 -45
- package/src/events-dep/utils.js +0 -38
- package/src/events-dep/ziko-event.js +0 -108
- package/src/watch/dom-observer/ziko-observer.js +0 -15
- /package/src/dom/{flex → components/Flex}/utils/index.js +0 -0
- /package/src/dom/components/{fragment → Fragment}/index.d.ts +0 -0
- /package/src/dom/components/{fragment → Fragment}/index.js +0 -0
- /package/src/dom/components/{swap → Swap}/index.d.ts +0 -0
- /package/src/dom/components/{swap → Swap}/index.js +0 -0
- /package/src/dom/{logic/switch → components/Switch}/index.js +0 -0
package/dist/ziko.mjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/*
|
|
3
3
|
Project: ziko.js
|
|
4
4
|
Author: Zakaria Elalaoui
|
|
5
|
-
Date :
|
|
5
|
+
Date : Wed Aug 26 2026 10:48:40 GMT+0100 (UTC+01:00)
|
|
6
6
|
Git-Repo : https://github.com/zakarialaoui10/ziko.js
|
|
7
7
|
Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
|
|
8
8
|
Released under MIT License
|
|
@@ -2430,11 +2430,10 @@ var LifecycleMethods = /*#__PURE__*/Object.freeze({
|
|
|
2430
2430
|
unmount: unmount
|
|
2431
2431
|
});
|
|
2432
2432
|
|
|
2433
|
+
const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");
|
|
2434
|
+
|
|
2433
2435
|
// import { __init__global__ } from "../__ziko__/index.js";
|
|
2434
2436
|
|
|
2435
|
-
// if (!globalThis.__Ziko__) __init__global__();
|
|
2436
|
-
|
|
2437
|
-
const STATE_GETTER = Symbol.for("ziko.stateGetter");
|
|
2438
2437
|
|
|
2439
2438
|
function useState(initialValue) {
|
|
2440
2439
|
const state = {
|
|
@@ -2638,6 +2637,7 @@ async function __addItem__(adder, pusher, ...ele) {
|
|
|
2638
2637
|
// Fix Items Latter
|
|
2639
2638
|
if (ele[i] instanceof Function) {
|
|
2640
2639
|
if (isStateGetter(ele[i])) {
|
|
2640
|
+
console.log({s : ele[i]()});
|
|
2641
2641
|
const getter = ele[i]();
|
|
2642
2642
|
ele[i] = text(getter.value);
|
|
2643
2643
|
getter._subscribe(
|
|
@@ -3330,15 +3330,6 @@ const waitElm=(UIElement)=>{
|
|
|
3330
3330
|
});
|
|
3331
3331
|
};
|
|
3332
3332
|
|
|
3333
|
-
class UIView extends UIElement$1{
|
|
3334
|
-
constructor(...items){
|
|
3335
|
-
super({element : 'div', name : 'view'});
|
|
3336
|
-
this.append(...items);
|
|
3337
|
-
}
|
|
3338
|
-
}
|
|
3339
|
-
|
|
3340
|
-
const View = (...items) => new UIView(...items);
|
|
3341
|
-
|
|
3342
3333
|
const HTMLTags = [
|
|
3343
3334
|
'a',
|
|
3344
3335
|
'abb',
|
|
@@ -3498,6 +3489,62 @@ const tags = new Proxy({}, {
|
|
|
3498
3489
|
}
|
|
3499
3490
|
});
|
|
3500
3491
|
|
|
3492
|
+
function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
|
|
3493
|
+
if (globalThis.customElements?.get(name)) {
|
|
3494
|
+
console.warn(`Custom element "${name}" is already defined`);
|
|
3495
|
+
return;
|
|
3496
|
+
}
|
|
3497
|
+
if(name.search('-') === -1){
|
|
3498
|
+
console.warn(`"${name}" is not a valid custom element name`);
|
|
3499
|
+
return;
|
|
3500
|
+
}
|
|
3501
|
+
globalThis.customElements?.define(
|
|
3502
|
+
name,
|
|
3503
|
+
class extends HTMLElement {
|
|
3504
|
+
static get observedAttributes() {
|
|
3505
|
+
return ['style', ...Object.keys(props)];
|
|
3506
|
+
}
|
|
3507
|
+
|
|
3508
|
+
constructor() {
|
|
3509
|
+
super();
|
|
3510
|
+
this.attachShadow({ mode });
|
|
3511
|
+
this.props = {};
|
|
3512
|
+
this.mask = {
|
|
3513
|
+
...props,
|
|
3514
|
+
// style: { type: Object }
|
|
3515
|
+
};
|
|
3516
|
+
}
|
|
3517
|
+
|
|
3518
|
+
connectedCallback() {
|
|
3519
|
+
this.render();
|
|
3520
|
+
}
|
|
3521
|
+
|
|
3522
|
+
render() {
|
|
3523
|
+
this.shadowRoot.innerHTML = '';
|
|
3524
|
+
const item = UI_Constructor(this.props);
|
|
3525
|
+
if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot));
|
|
3526
|
+
else item.mount(this.shadowRoot);
|
|
3527
|
+
}
|
|
3528
|
+
|
|
3529
|
+
attributeChangedCallback(name, _, newValue) {
|
|
3530
|
+
Object.assign(this.props, {
|
|
3531
|
+
[name]: this.mask[name].type(newValue)
|
|
3532
|
+
});
|
|
3533
|
+
this.render();
|
|
3534
|
+
}
|
|
3535
|
+
}
|
|
3536
|
+
);
|
|
3537
|
+
}
|
|
3538
|
+
|
|
3539
|
+
class UIView extends UIElement$1{
|
|
3540
|
+
constructor(...items){
|
|
3541
|
+
super({element : 'div', name : 'view'});
|
|
3542
|
+
this.append(...items);
|
|
3543
|
+
}
|
|
3544
|
+
}
|
|
3545
|
+
|
|
3546
|
+
const View = (...items) => new UIView(...items);
|
|
3547
|
+
|
|
3501
3548
|
function set_vertical(direction){
|
|
3502
3549
|
direction == 1
|
|
3503
3550
|
? this.style({ flexDirection: "column" })
|
|
@@ -3603,7 +3650,7 @@ class UIElement extends UIElementCore{
|
|
|
3603
3650
|
}
|
|
3604
3651
|
}
|
|
3605
3652
|
|
|
3606
|
-
class
|
|
3653
|
+
class UISuspense extends UIElement{
|
|
3607
3654
|
constructor(fallback_ui, callback){
|
|
3608
3655
|
super({element : "div", name : "suspense"});
|
|
3609
3656
|
this.setAttr({
|
|
@@ -3624,148 +3671,7 @@ class ZikoUISuspense extends UIElement{
|
|
|
3624
3671
|
}
|
|
3625
3672
|
}
|
|
3626
3673
|
|
|
3627
|
-
const Suspense = (fallback_ui, callback) => new
|
|
3628
|
-
|
|
3629
|
-
class UIHTMLWrapper extends UIElement$1 {
|
|
3630
|
-
constructor(content){
|
|
3631
|
-
super({element : 'div', name : 'html_wrappper'});
|
|
3632
|
-
this.element.append(html2dom(content));
|
|
3633
|
-
this.style({
|
|
3634
|
-
display : 'contents'
|
|
3635
|
-
});
|
|
3636
|
-
}
|
|
3637
|
-
}
|
|
3638
|
-
|
|
3639
|
-
function html2dom(htmlString) {
|
|
3640
|
-
if(globalThis?.DOMParser){
|
|
3641
|
-
const parser = new DOMParser();
|
|
3642
|
-
const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
|
|
3643
|
-
doc.body.firstChild.style.display = "contents";
|
|
3644
|
-
return doc.body.firstChild;
|
|
3645
|
-
}
|
|
3646
|
-
}
|
|
3647
|
-
|
|
3648
|
-
const HTMLWrapper = (content) => new UIHTMLWrapper(content);
|
|
3649
|
-
|
|
3650
|
-
class UISVGWrapper extends UIElement$1 {
|
|
3651
|
-
constructor(content){
|
|
3652
|
-
super({element : 'div', name : 'html_wrappper'});
|
|
3653
|
-
this.element.append(svg2dom(content));
|
|
3654
|
-
this.style({
|
|
3655
|
-
display : 'contents'
|
|
3656
|
-
});
|
|
3657
|
-
}
|
|
3658
|
-
}
|
|
3659
|
-
|
|
3660
|
-
function svg2dom(svgString) {
|
|
3661
|
-
if (typeof DOMParser !== "undefined") {
|
|
3662
|
-
const parser = new DOMParser();
|
|
3663
|
-
const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
|
|
3664
|
-
const svg = doc.documentElement;
|
|
3665
|
-
|
|
3666
|
-
if (svg.nodeName === "parsererror") {
|
|
3667
|
-
throw new Error("Invalid SVG string");
|
|
3668
|
-
}
|
|
3669
|
-
if(svg.hasAttribute('xmlns')) return svg
|
|
3670
|
-
// TO Fix ...
|
|
3671
|
-
const {children, attributes} = svg;
|
|
3672
|
-
const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
3673
|
-
for(let {name, value} of attributes){
|
|
3674
|
-
element.setAttribute(name, value);
|
|
3675
|
-
}
|
|
3676
|
-
element.append(...children);
|
|
3677
|
-
|
|
3678
|
-
globalThis.svg = svg;
|
|
3679
|
-
globalThis.children = children;
|
|
3680
|
-
globalThis.attributes = attributes;
|
|
3681
|
-
globalThis.element = element;
|
|
3682
|
-
return element;
|
|
3683
|
-
}
|
|
3684
|
-
throw new Error("DOMParser is not available in this environment");
|
|
3685
|
-
}
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
const SVGWrapper = (content) => new UISVGWrapper(content);
|
|
3690
|
-
|
|
3691
|
-
function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
|
|
3692
|
-
if (globalThis.customElements?.get(name)) {
|
|
3693
|
-
console.warn(`Custom element "${name}" is already defined`);
|
|
3694
|
-
return;
|
|
3695
|
-
}
|
|
3696
|
-
if(name.search('-') === -1){
|
|
3697
|
-
console.warn(`"${name}" is not a valid custom element name`);
|
|
3698
|
-
return;
|
|
3699
|
-
}
|
|
3700
|
-
globalThis.customElements?.define(
|
|
3701
|
-
name,
|
|
3702
|
-
class extends HTMLElement {
|
|
3703
|
-
static get observedAttributes() {
|
|
3704
|
-
return ['style', ...Object.keys(props)];
|
|
3705
|
-
}
|
|
3706
|
-
|
|
3707
|
-
constructor() {
|
|
3708
|
-
super();
|
|
3709
|
-
this.attachShadow({ mode });
|
|
3710
|
-
this.props = {};
|
|
3711
|
-
this.mask = {
|
|
3712
|
-
...props,
|
|
3713
|
-
// style: { type: Object }
|
|
3714
|
-
};
|
|
3715
|
-
}
|
|
3716
|
-
|
|
3717
|
-
connectedCallback() {
|
|
3718
|
-
this.render();
|
|
3719
|
-
}
|
|
3720
|
-
|
|
3721
|
-
render() {
|
|
3722
|
-
this.shadowRoot.innerHTML = '';
|
|
3723
|
-
const item = UI_Constructor(this.props);
|
|
3724
|
-
if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot));
|
|
3725
|
-
else item.mount(this.shadowRoot);
|
|
3726
|
-
}
|
|
3727
|
-
|
|
3728
|
-
attributeChangedCallback(name, _, newValue) {
|
|
3729
|
-
Object.assign(this.props, {
|
|
3730
|
-
[name]: this.mask[name].type(newValue)
|
|
3731
|
-
});
|
|
3732
|
-
this.render();
|
|
3733
|
-
}
|
|
3734
|
-
}
|
|
3735
|
-
);
|
|
3736
|
-
}
|
|
3737
|
-
|
|
3738
|
-
class UISwitch extends UIElement$1{
|
|
3739
|
-
constructor(key, cases){
|
|
3740
|
-
super();
|
|
3741
|
-
this.key = key;
|
|
3742
|
-
this.cases = cases;
|
|
3743
|
-
this.init();
|
|
3744
|
-
}
|
|
3745
|
-
init(){
|
|
3746
|
-
Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
|
|
3747
|
-
super.init(this.current.element);
|
|
3748
|
-
}
|
|
3749
|
-
get current(){
|
|
3750
|
-
const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
|
|
3751
|
-
return this.cases[matched]
|
|
3752
|
-
}
|
|
3753
|
-
updateKey(key){
|
|
3754
|
-
this.key = key;
|
|
3755
|
-
this.replaceElementWith(this.current.element);
|
|
3756
|
-
// this.cache.element.replaceWith(this.current.element)
|
|
3757
|
-
// this.cache.element = this.current.element;
|
|
3758
|
-
return this;
|
|
3759
|
-
}
|
|
3760
|
-
|
|
3761
|
-
}
|
|
3762
|
-
|
|
3763
|
-
const Switch=({key, cases})=> new UISwitch(key, cases);
|
|
3764
|
-
|
|
3765
|
-
// export const Switch=({key, cases}) => {
|
|
3766
|
-
// const matched = Object.keys(cases).find(n => n == key) ?? 'default';
|
|
3767
|
-
// return this.cases[matched]()
|
|
3768
|
-
// }
|
|
3674
|
+
const Suspense = (fallback_ui, callback) => new UISuspense(fallback_ui, callback);
|
|
3769
3675
|
|
|
3770
3676
|
class UISwap extends UIElement$1 {
|
|
3771
3677
|
#DISPLAYS_MAP = new WeakMap()
|
|
@@ -3857,6 +3763,335 @@ class UIFor extends UIFragment{
|
|
|
3857
3763
|
|
|
3858
3764
|
const For = ({each, fallback, mapFn} = {}) => new UIFor({each, fallback, mapFn});
|
|
3859
3765
|
|
|
3766
|
+
class UISwitch extends UIElement$1{
|
|
3767
|
+
constructor(key, cases){
|
|
3768
|
+
super();
|
|
3769
|
+
this.key = key;
|
|
3770
|
+
this.cases = cases;
|
|
3771
|
+
this.init();
|
|
3772
|
+
}
|
|
3773
|
+
init(){
|
|
3774
|
+
Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unmount());
|
|
3775
|
+
super.init(this.current.element);
|
|
3776
|
+
}
|
|
3777
|
+
get current(){
|
|
3778
|
+
const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
|
|
3779
|
+
return this.cases[matched]
|
|
3780
|
+
}
|
|
3781
|
+
updateKey(key){
|
|
3782
|
+
this.key = key;
|
|
3783
|
+
this.replaceElementWith(this.current.element);
|
|
3784
|
+
// this.cache.element.replaceWith(this.current.element)
|
|
3785
|
+
// this.cache.element = this.current.element;
|
|
3786
|
+
return this;
|
|
3787
|
+
}
|
|
3788
|
+
|
|
3789
|
+
}
|
|
3790
|
+
|
|
3791
|
+
const Switch=({key, cases})=> new UISwitch(key, cases);
|
|
3792
|
+
|
|
3793
|
+
// export const Switch=({key, cases}) => {
|
|
3794
|
+
// const matched = Object.keys(cases).find(n => n == key) ?? 'default';
|
|
3795
|
+
// return this.cases[matched]()
|
|
3796
|
+
// }
|
|
3797
|
+
|
|
3798
|
+
class UIHTMLWrapper extends UIElement$1 {
|
|
3799
|
+
constructor(content){
|
|
3800
|
+
super({element : 'div', name : 'html_wrappper'});
|
|
3801
|
+
this.element.append(html2dom(content));
|
|
3802
|
+
this.style({
|
|
3803
|
+
display : 'contents'
|
|
3804
|
+
});
|
|
3805
|
+
}
|
|
3806
|
+
}
|
|
3807
|
+
|
|
3808
|
+
function html2dom(htmlString) {
|
|
3809
|
+
if(globalThis?.DOMParser){
|
|
3810
|
+
const parser = new DOMParser();
|
|
3811
|
+
const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
|
|
3812
|
+
doc.body.firstChild.style.display = "contents";
|
|
3813
|
+
return doc.body.firstChild;
|
|
3814
|
+
}
|
|
3815
|
+
}
|
|
3816
|
+
|
|
3817
|
+
const HTMLWrapper = (content) => new UIHTMLWrapper(content);
|
|
3818
|
+
|
|
3819
|
+
class UISVGWrapper extends UIElement$1 {
|
|
3820
|
+
constructor(content){
|
|
3821
|
+
super({element : 'div', name : 'html_wrappper'});
|
|
3822
|
+
this.element.append(svg2dom(content));
|
|
3823
|
+
this.style({
|
|
3824
|
+
display : 'contents'
|
|
3825
|
+
});
|
|
3826
|
+
}
|
|
3827
|
+
}
|
|
3828
|
+
|
|
3829
|
+
function svg2dom(svgString) {
|
|
3830
|
+
if (typeof DOMParser !== "undefined") {
|
|
3831
|
+
const parser = new DOMParser();
|
|
3832
|
+
const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
|
|
3833
|
+
const svg = doc.documentElement;
|
|
3834
|
+
|
|
3835
|
+
if (svg.nodeName === "parsererror") {
|
|
3836
|
+
throw new Error("Invalid SVG string");
|
|
3837
|
+
}
|
|
3838
|
+
if(svg.hasAttribute('xmlns')) return svg
|
|
3839
|
+
// TO Fix ...
|
|
3840
|
+
const {children, attributes} = svg;
|
|
3841
|
+
const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
3842
|
+
for(let {name, value} of attributes){
|
|
3843
|
+
element.setAttribute(name, value);
|
|
3844
|
+
}
|
|
3845
|
+
element.append(...children);
|
|
3846
|
+
|
|
3847
|
+
globalThis.svg = svg;
|
|
3848
|
+
globalThis.children = children;
|
|
3849
|
+
globalThis.attributes = attributes;
|
|
3850
|
+
globalThis.element = element;
|
|
3851
|
+
return element;
|
|
3852
|
+
}
|
|
3853
|
+
throw new Error("DOMParser is not available in this environment");
|
|
3854
|
+
}
|
|
3855
|
+
|
|
3856
|
+
|
|
3857
|
+
|
|
3858
|
+
const SVGWrapper = (content) => new UISVGWrapper(content);
|
|
3859
|
+
|
|
3860
|
+
class UICanvas extends UIElement$1{
|
|
3861
|
+
constructor(w,h){
|
|
3862
|
+
super("canvas","canvas");
|
|
3863
|
+
this.ctx = this.element?.getContext("2d");
|
|
3864
|
+
this.style({
|
|
3865
|
+
border:"1px red solid",
|
|
3866
|
+
});
|
|
3867
|
+
this.transformMatrix = new Matrix([
|
|
3868
|
+
[1,0,0],
|
|
3869
|
+
[0,1,0],
|
|
3870
|
+
[0,0,1]
|
|
3871
|
+
]);
|
|
3872
|
+
this.axisMatrix = new Matrix([
|
|
3873
|
+
[-10,-10],
|
|
3874
|
+
[10,10]
|
|
3875
|
+
]);
|
|
3876
|
+
// setTimeout(()=>this.resize(w,h),0);
|
|
3877
|
+
requestAnimationFrame(()=>this.resize(w,h),0);
|
|
3878
|
+
this.on("sizeupdated",()=>this.adjust());
|
|
3879
|
+
}
|
|
3880
|
+
get Xmin(){
|
|
3881
|
+
return this.axisMatrix[0][0];
|
|
3882
|
+
}
|
|
3883
|
+
get Ymin(){
|
|
3884
|
+
return this.axisMatrix[0][1];
|
|
3885
|
+
}
|
|
3886
|
+
get Xmax(){
|
|
3887
|
+
return this.axisMatrix[1][0];
|
|
3888
|
+
}
|
|
3889
|
+
get Ymax(){
|
|
3890
|
+
return this.axisMatrix[1][1];
|
|
3891
|
+
}
|
|
3892
|
+
get ImageData(){
|
|
3893
|
+
return this.ctx.getImageData(0,0,c.Width,c.Height);
|
|
3894
|
+
}
|
|
3895
|
+
draw(all=true){
|
|
3896
|
+
if(all){
|
|
3897
|
+
this.clear();
|
|
3898
|
+
this.items.forEach(element => {
|
|
3899
|
+
element.parent=this;
|
|
3900
|
+
element.draw(this.ctx);
|
|
3901
|
+
});
|
|
3902
|
+
}
|
|
3903
|
+
else {
|
|
3904
|
+
this.items.at(-1).parent=this;
|
|
3905
|
+
this.items.at(-1).draw(this.ctx);
|
|
3906
|
+
}
|
|
3907
|
+
this.maintain();
|
|
3908
|
+
return this;
|
|
3909
|
+
}
|
|
3910
|
+
applyTransformMatrix(){
|
|
3911
|
+
this.ctx.setTransform(
|
|
3912
|
+
this.transformMatrix[0][0],
|
|
3913
|
+
this.transformMatrix[1][0],
|
|
3914
|
+
this.transformMatrix[0][1],
|
|
3915
|
+
this.transformMatrix[1][1],
|
|
3916
|
+
this.transformMatrix[0][2],
|
|
3917
|
+
this.transformMatrix[1][2],
|
|
3918
|
+
);
|
|
3919
|
+
return this;
|
|
3920
|
+
}
|
|
3921
|
+
resize(w,h){
|
|
3922
|
+
this.size(w,h);
|
|
3923
|
+
this.lineWidth();
|
|
3924
|
+
this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
|
|
3925
|
+
this.emit("sizeupdated");
|
|
3926
|
+
return this;
|
|
3927
|
+
}
|
|
3928
|
+
adjust(){
|
|
3929
|
+
this.element.width =this.element?.getBoundingClientRect().width;
|
|
3930
|
+
this.element.height =this.element?.getBoundingClientRect().height;
|
|
3931
|
+
this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
|
|
3932
|
+
return this;
|
|
3933
|
+
}
|
|
3934
|
+
view(xMin,yMin,xMax,yMax){
|
|
3935
|
+
this.transformMatrix[0][0]=this.width/(xMax-xMin); // scaleX
|
|
3936
|
+
this.transformMatrix[1][1]=-this.height/(yMax-yMin); // scaleY
|
|
3937
|
+
this.transformMatrix[0][2]=this.width/2;
|
|
3938
|
+
this.transformMatrix[1][2]=this.height/2;
|
|
3939
|
+
this.axisMatrix=new Matrix([
|
|
3940
|
+
[xMin,yMin],
|
|
3941
|
+
[xMax,yMax]
|
|
3942
|
+
]);
|
|
3943
|
+
|
|
3944
|
+
this.applyTransformMatrix();
|
|
3945
|
+
this.clear();
|
|
3946
|
+
this.lineWidth(1);
|
|
3947
|
+
this.draw();
|
|
3948
|
+
return this;
|
|
3949
|
+
}
|
|
3950
|
+
reset(){
|
|
3951
|
+
this.ctx.setTransform(1,0,0,0,0,0);
|
|
3952
|
+
return this;
|
|
3953
|
+
}
|
|
3954
|
+
append(element){
|
|
3955
|
+
this.items.push(element);
|
|
3956
|
+
this.draw(false);
|
|
3957
|
+
return this;
|
|
3958
|
+
}
|
|
3959
|
+
background(color){
|
|
3960
|
+
this.ctx.fillStyle = color;
|
|
3961
|
+
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
3962
|
+
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
3963
|
+
this.applyTransformMatrix();
|
|
3964
|
+
this.draw();
|
|
3965
|
+
}
|
|
3966
|
+
lineWidth(w){
|
|
3967
|
+
this.ctx.lineWidth=w/this.transformMatrix[0][0];
|
|
3968
|
+
return this
|
|
3969
|
+
}
|
|
3970
|
+
getImageData(x=0,y=0,w=this.width,h=this.height){
|
|
3971
|
+
return this.ctx.getImageData(x,y,w,h);
|
|
3972
|
+
}
|
|
3973
|
+
clear(){
|
|
3974
|
+
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
3975
|
+
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
3976
|
+
this.applyTransformMatrix();
|
|
3977
|
+
return this;
|
|
3978
|
+
}
|
|
3979
|
+
clone(){
|
|
3980
|
+
console.log(this.width);
|
|
3981
|
+
const canvas=new UICanvas();
|
|
3982
|
+
canvas.items=this.items;
|
|
3983
|
+
canvas.transformMatrix=this.transformMatrix;
|
|
3984
|
+
canvas.axisMatrix=this.axisMatrix;
|
|
3985
|
+
Object.assign(canvas.cache,{...this.cache});
|
|
3986
|
+
//waitForUIElm(this)
|
|
3987
|
+
//console.log(element)
|
|
3988
|
+
this.size(this.element.style.width,this.element.style.width);
|
|
3989
|
+
this.applyTransformMatrix();
|
|
3990
|
+
this.draw();
|
|
3991
|
+
this.adjust();
|
|
3992
|
+
return canvas;
|
|
3993
|
+
}
|
|
3994
|
+
toImage() {
|
|
3995
|
+
this.img = document?.createElement("img");
|
|
3996
|
+
this.img.src = this.element?.toDataURL("image/png");
|
|
3997
|
+
return this;
|
|
3998
|
+
}
|
|
3999
|
+
toBlob() {
|
|
4000
|
+
var canvas = this.element;
|
|
4001
|
+
canvas.toBlob(function (blob) {
|
|
4002
|
+
var newImg = document?.createElement("img"),
|
|
4003
|
+
url = URL.createObjectURL(blob);
|
|
4004
|
+
newImg.onload = function () {
|
|
4005
|
+
URL.revokeObjectURL(url);
|
|
4006
|
+
};
|
|
4007
|
+
newImg.src = url;
|
|
4008
|
+
console.log(newImg);
|
|
4009
|
+
});
|
|
4010
|
+
}
|
|
4011
|
+
zoomIn(){
|
|
4012
|
+
|
|
4013
|
+
}
|
|
4014
|
+
zoomOut(){
|
|
4015
|
+
|
|
4016
|
+
}
|
|
4017
|
+
undo(n){
|
|
4018
|
+
|
|
4019
|
+
}
|
|
4020
|
+
redo(n){
|
|
4021
|
+
|
|
4022
|
+
}
|
|
4023
|
+
stream(){
|
|
4024
|
+
|
|
4025
|
+
}
|
|
4026
|
+
}
|
|
4027
|
+
|
|
4028
|
+
const Canvas=(w,h)=>new UICanvas(w,h);
|
|
4029
|
+
|
|
4030
|
+
class UISvg extends UIElement$1 {
|
|
4031
|
+
constructor(w=360,h=300) {
|
|
4032
|
+
super("svg","svg");
|
|
4033
|
+
//this.cache={};
|
|
4034
|
+
// this.setAttr("width",w);
|
|
4035
|
+
// this.setAttr("height",h);
|
|
4036
|
+
// this.setAttr({
|
|
4037
|
+
// width : w,
|
|
4038
|
+
// height : h
|
|
4039
|
+
// })
|
|
4040
|
+
this.style({border:"1px black solid"});
|
|
4041
|
+
//this.view(-w/2,-h/2,w/2,h/2);
|
|
4042
|
+
this.size(w, h);
|
|
4043
|
+
this.view(-10,-10,10,10);
|
|
4044
|
+
}
|
|
4045
|
+
size(w, h){
|
|
4046
|
+
this.setAttr({
|
|
4047
|
+
width : w,
|
|
4048
|
+
height : h
|
|
4049
|
+
});
|
|
4050
|
+
return this
|
|
4051
|
+
}
|
|
4052
|
+
view(x1,y1,x2,y2){
|
|
4053
|
+
let width=Math.abs(x2-x1);
|
|
4054
|
+
let height=Math.abs(y2-y1);
|
|
4055
|
+
this.setAttr("viewBox",[x1,y1,width,height].join(" "));
|
|
4056
|
+
this.st.scaleY(-1);
|
|
4057
|
+
return this;
|
|
4058
|
+
}
|
|
4059
|
+
add(...svgElement){
|
|
4060
|
+
for(let i=0;i<svgElement.length;i++){
|
|
4061
|
+
this.element.append(svgElement[i].element);
|
|
4062
|
+
this.items.push(svgElement[i]);
|
|
4063
|
+
}
|
|
4064
|
+
this.maintain();
|
|
4065
|
+
return this;
|
|
4066
|
+
}
|
|
4067
|
+
remove(...svgElement){
|
|
4068
|
+
for(let i=0;i<svgElement.length;i++){
|
|
4069
|
+
this.element?.removeChild(svgElement[i].element);
|
|
4070
|
+
this.items=this.items.filter(n=>!svgElement);
|
|
4071
|
+
}
|
|
4072
|
+
this.maintain();
|
|
4073
|
+
return this;
|
|
4074
|
+
}
|
|
4075
|
+
mask(){
|
|
4076
|
+
|
|
4077
|
+
}
|
|
4078
|
+
toString(){
|
|
4079
|
+
return (new XMLSerializer()).serializeToString(this.element);
|
|
4080
|
+
}
|
|
4081
|
+
btoa(){
|
|
4082
|
+
return btoa(this.toString())
|
|
4083
|
+
}
|
|
4084
|
+
toImg(){
|
|
4085
|
+
return 'data:image/svg+xml;base64,'+this.btoa()
|
|
4086
|
+
}
|
|
4087
|
+
toImg2(){
|
|
4088
|
+
return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
|
|
4089
|
+
}
|
|
4090
|
+
|
|
4091
|
+
}
|
|
4092
|
+
|
|
4093
|
+
const Svg =(w,h)=>new UISvg(w,h);
|
|
4094
|
+
|
|
3860
4095
|
const { PI, sqrt: sqrt$1, cos: cos$2, sin: sin$2, acos, pow } = Math;
|
|
3861
4096
|
|
|
3862
4097
|
const linear = t => t;
|
|
@@ -4798,23 +5033,29 @@ function useDerived(deriveFn, sources) {
|
|
|
4798
5033
|
let value = deriveFn(...sources.map(s => s().value));
|
|
4799
5034
|
const subscribers = new Set();
|
|
4800
5035
|
|
|
4801
|
-
sources.
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
});
|
|
4813
|
-
|
|
5036
|
+
// const unsubscribers = sources.map(source => {
|
|
5037
|
+
// const srcValue = source();
|
|
5038
|
+
|
|
5039
|
+
// return srcValue._subscribe(() => {
|
|
5040
|
+
// const newVal = deriveFn(...sources.map(s => s().value));
|
|
5041
|
+
|
|
5042
|
+
// if (!Object.is(newVal, value)) {
|
|
5043
|
+
// value = newVal;
|
|
5044
|
+
// subscribers.forEach(fn => fn(value));
|
|
5045
|
+
// }
|
|
5046
|
+
// });
|
|
5047
|
+
// });
|
|
5048
|
+
|
|
5049
|
+
const getter = () => ({
|
|
4814
5050
|
value,
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
5051
|
+
_subscribe: (fn) => {
|
|
5052
|
+
subscribers.add(fn);
|
|
5053
|
+
return () => subscribers.delete(fn);
|
|
5054
|
+
},
|
|
5055
|
+
});
|
|
5056
|
+
|
|
5057
|
+
getter[STATE_GETTER] = true;
|
|
5058
|
+
return getter
|
|
4818
5059
|
}
|
|
4819
5060
|
|
|
4820
5061
|
const mapfun=(fun,...X)=>{
|
|
@@ -4871,6 +5112,45 @@ const useReactive = (nested_value) => mapfun(
|
|
|
4871
5112
|
nested_value
|
|
4872
5113
|
);
|
|
4873
5114
|
|
|
5115
|
+
const useEffect = (callback, deps = []) =>{
|
|
5116
|
+
const states = deps.filter(isStateGetter);
|
|
5117
|
+
|
|
5118
|
+
let cleanup;
|
|
5119
|
+
|
|
5120
|
+
const execute = () => {
|
|
5121
|
+
// Cleanup previous effect
|
|
5122
|
+
if (typeof cleanup === "function") {
|
|
5123
|
+
cleanup();
|
|
5124
|
+
}
|
|
5125
|
+
|
|
5126
|
+
// Read current state values
|
|
5127
|
+
const values = states.map(state => state().value);
|
|
5128
|
+
|
|
5129
|
+
// Execute effect
|
|
5130
|
+
cleanup = callback(...values);
|
|
5131
|
+
};
|
|
5132
|
+
|
|
5133
|
+
// Subscribe to states
|
|
5134
|
+
const unsubscribers = states.map(state =>
|
|
5135
|
+
state()._subscribe(execute)
|
|
5136
|
+
);
|
|
5137
|
+
|
|
5138
|
+
// Initial execution
|
|
5139
|
+
execute();
|
|
5140
|
+
|
|
5141
|
+
// Return effect cleanup
|
|
5142
|
+
return () => {
|
|
5143
|
+
unsubscribers.forEach(unsubscribe => {
|
|
5144
|
+
unsubscribe();
|
|
5145
|
+
});
|
|
5146
|
+
|
|
5147
|
+
if (typeof cleanup === "function") {
|
|
5148
|
+
cleanup();
|
|
5149
|
+
cleanup = undefined;
|
|
5150
|
+
}
|
|
5151
|
+
};
|
|
5152
|
+
};
|
|
5153
|
+
|
|
4874
5154
|
class UseThread {
|
|
4875
5155
|
#worker;
|
|
4876
5156
|
#callbacks = new Map();
|
|
@@ -5293,4 +5573,4 @@ if(globalThis?.document){
|
|
|
5293
5573
|
document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
|
|
5294
5574
|
}
|
|
5295
5575
|
|
|
5296
|
-
export { App, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, For, Fragment, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA,
|
|
5576
|
+
export { App, Canvas, ClickAwayEvent, ClickListeners, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, For, Fragment, HTMLWrapper, KeyListeners, Matrix, PI$1 as PI, PtrListeners, Random, SPA, SVGWrapper, Scheduler, Suspense, Svg, Swap, SwipeEvent, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UICanvas, UIElement$1 as UIElement, UIFlex, UIFragment, UIHTMLWrapper, UINode, UISVGWrapper, UISuspense, UISvg, UISwap, UISwitch, UIView, UseRoot, UseThread, View, ViewEvent, ViewListeners, ZikoApp, ZikoSPA, ZikoUIText, abs, accum_max, accum_min, accum_prod, accum_product, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arc, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cbrt, ceil, clamp, clock, cloneUI, complex, contraharmonic_mean, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, ema, exp$1 as exp, floor, fract, geo_mean, harmonic_mean, hypot, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, interquartile_mean, iqr, isStateGetter, is_primitive, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, ln, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, midhinge, midrange, min, modulo, mul, nand, nor, norm, normalize_css_value, not, nthr, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, parseXML, parse_props, percentile, pow$1 as pow, power_mean, q1, q3, rad2deg, register_click_away_event, register_swipe_event, register_view_event, remove_class, rms, rolling_std, rolling_variance, round, sample_std, sample_variance, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sma, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trimmed_mean, trunc, useDerived, useEffect, useEventEmitter, useIPC, useLocalStorage, useMediaQuery, useQueryParams, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, watchQueryParams, weighted_mean, weighted_std, weighted_variance, winsorized_mean, wma, xnor, xor };
|