Skip to content

Commit ca922d1

Browse files
JudimaxJudimax
committed
[UPDATE] additional work
1 parent 1026a46 commit ca922d1

File tree

6 files changed

+113
-101
lines changed

6 files changed

+113
-101
lines changed

‎projects/wml-components-base/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@
1313
"scripts": {
1414
"build": "npx ng build"
1515
},
16-
"version": "19.0.5000"
16+
"version": "19.0.5001"
1717
}

‎projects/wml-components-base/src/lib/functions.ts‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
import { WMLUIProperty,WMLUIFrameworkType, WMLUIGlobal, WMLDeepPartial } from "./models";
1+
import {WMLUIFrameworkType, WMLUIGlobal, WMLDeepPartial, WML_DOCUMENT, WML_WINDOW } from "./models";
2+
23

34
export function detectFramework(): WMLUIFrameworkType {
4-
let myWindow: any = window ?? {};
5+
6+
57
let detectedFramework: WMLUIFrameworkType = 'VanillaJS';
68

7-
const isReact = !!document.querySelector('[data-reactroot], [data-reactid]');
8-
const isAngular = !!myWindow.ng || !!document.querySelector('[ng-version]');
9-
const isVue = !!myWindow.Vue;
10-
const isSvelte = !!document.querySelector('[class*="svelte-"]');
11-
const isEmber = !!myWindow.Ember || !!document.querySelector('[id*="ember"]');
12-
const isBackbone = !!myWindow.Backbone;
13-
const isPreact = !!myWindow.preact || !!document.querySelector('[data-preactroot]');
14-
const isNext = !!document.querySelector('#__next') || !!myWindow.__NEXT_DATA__;
15-
const isNuxt = !!myWindow.__NUXT__;
16-
const isGatsby = !!myWindow.___gatsby;
17-
const isRemix = typeof myWindow.__remixManifest !== 'undefined';
18-
const isNest = !!document.querySelector('[ng-version]') && !!myWindow.NestFactory;
19-
const isLit = !!myWindow.litHtml || !!document.querySelector('template[shadowroot]');
20-
const isAlpine = !!myWindow.Alpine;
21-
const isMithril = !!myWindow.m || !!document.querySelector('[data-mithril]');
22-
const isAurelia = !!myWindow.Aurelia;
23-
const isRiot = !!myWindow.riot;
24-
const isInferno = !!myWindow.Inferno;
25-
const isStencil = !!document.querySelector('script[data-stencil-namespace]');
9+
const isReact = !!WML_DOCUMENT.querySelector?.('[data-reactroot], [data-reactid]');
10+
const isAngular = !!WML_WINDOW.ng || !!WML_DOCUMENT.querySelector?.('[ng-version]');
11+
const isVue = !!WML_WINDOW.Vue;
12+
const isSvelte = !!WML_DOCUMENT.querySelector?.('[class*="svelte-"]');
13+
const isEmber = !!WML_WINDOW.Ember || !!WML_DOCUMENT.querySelector?.('[id*="ember"]');
14+
const isBackbone = !!WML_WINDOW.Backbone;
15+
const isPreact = !!WML_WINDOW.preact || !!WML_DOCUMENT.querySelector?.('[data-preactroot]');
16+
const isNext = !!WML_DOCUMENT.querySelector?.('#__next') || !!WML_WINDOW.__NEXT_DATA__;
17+
const isNuxt = !!WML_WINDOW.__NUXT__;
18+
const isGatsby = !!WML_WINDOW.___gatsby;
19+
const isRemix = typeof WML_WINDOW.__remixManifest !== 'undefined';
20+
const isNest = !!WML_DOCUMENT.querySelector?.('[ng-version]') && !!WML_WINDOW.NestFactory;
21+
const isLit = !!WML_WINDOW.litHtml || !!WML_DOCUMENT.querySelector?.('template[shadowroot]');
22+
const isAlpine = !!WML_WINDOW.Alpine;
23+
const isMithril = !!WML_WINDOW.m || !!WML_DOCUMENT.querySelector?.('[data-mithril]');
24+
const isAurelia = !!WML_WINDOW.Aurelia;
25+
const isRiot = !!WML_WINDOW.riot;
26+
const isInferno = !!WML_WINDOW.Inferno;
27+
const isStencil = !!WML_DOCUMENT.querySelector?.('script[data-stencil-namespace]');
2628

2729
if (isReact) detectedFramework = 'React';
2830
else if (isAngular) detectedFramework = 'Angular';
@@ -68,7 +70,8 @@ export function getGlobalObject ():any {
6870
return globalThis; // ECMAScript standard global object
6971
}
7072
if (typeof window !== 'undefined') {
71-
return window; // Browser environment
73+
// TODO double check if this should be returned
74+
return WML_WINDOW; // Browser environment
7275
}
7376
// @ts-ignore
7477
if (typeof global !== 'undefined') {
@@ -164,43 +167,40 @@ export let toggleClassString =(targetClass:string,classList:Array<string>,pred
164167
/**
165168
* @obsolete, cant get to work properly
166169
*/
167-
let WMLUIPropertyDecorator = (target:any,key:any)=>{
168-
let text = target[key];
169-
let uiProperty = new WMLUIProperty({
170-
text
171-
})
172-
const getter = () => uiProperty;
173-
174-
const setter = (newValue: any) => {
175-
uiProperty = newValue;
176-
};
177-
178-
Object.defineProperty(target, key, {
179-
get: getter,
180-
set: setter,
181-
enumerable: true,
182-
configurable: true,
183-
});
184-
}
170+
// let WMLUIPropertyDecorator = (target:any,key:any)=>{
171+
// let text = target[key];
172+
// let uiProperty = new WMLUIProperty({
173+
// text
174+
// })
175+
// const getter = () => uiProperty;
176+
177+
// const setter = (newValue: any) => {
178+
// uiProperty = newValue;
179+
// };
180+
181+
// Object.defineProperty(target, key, {
182+
// get: getter,
183+
// set: setter,
184+
// enumerable: true,
185+
// configurable: true,
186+
// });
187+
// }
185188

186189

187190
export let generateRandomNumber = (range: number = 100, additional: number = 0) => {
188191
return Math.floor(Math.random() * range) + additional
189192
}
190193

191-
192194
export let generateRandomColor = () => {
193195
let randomNumber = generateRandomNumber(0xFFFFFF);
194196
let hexColor = randomNumber.toString(16).padStart(6, '0');
195197
return `#${hexColor}`;
196198
};
197199

198-
199200
export let selectRandomOptionFromArray = (myArray: Array<any>, index?: number) => {
200201
return myArray[generateRandomNumber(index ?? myArray.length)]
201202
}
202203

203-
204204
export const replaceValuesWithPaths = <T = any>(
205205
obj: any,
206206
path = "",

‎projects/wml-components-base/src/lib/models.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11

22
import { detectFramework, getGlobalObject, updateClassString } from "./functions";
33

4+
export let WML_WINDOW: any;
5+
export let WML_DOCUMENT: any;
6+
7+
try {
8+
WML_WINDOW = window;
9+
WML_DOCUMENT = document;
10+
} catch {
11+
WML_WINDOW = {};
12+
WML_DOCUMENT = {};
13+
}
414

515
export type WMLUIFrameworkType='React' | 'Angular' | 'Vue.js' | 'Svelte' | 'Ember.js' | 'Backbone.js' | 'Preact' | 'Next.js' | 'Nuxt.js' | 'Gatsby' | 'Remix' | 'NestJS' | 'VanillaJS'| 'Lit' | 'Alpine.js' | 'Mithril.js' | 'Aurelia' | 'Riot.js' | 'Inferno' | 'Stencil'
616

@@ -528,8 +538,8 @@ export class WMLMotionUIProperty<V=any,T="animation" | "transition"> extends WML
528538
return
529539
}
530540
// Create a new style element
531-
this.currentStyleElement = document.createElement('style');
532-
document.head.appendChild(this.currentStyleElement);
541+
this.currentStyleElement = WML_DOCUMENT.createElement('style');
542+
WML_DOCUMENT.head.appendChild(this.currentStyleElement);
533543

534544
// Generate the keyframes string from the keyFrameStyles property
535545
let keyframes = `@keyframes ${this.keyFrameName} {`;
@@ -547,6 +557,7 @@ export class WMLMotionUIProperty<V=any,T="animation" | "transition"> extends WML
547557
}`;
548558

549559
// Insert the keyframes rule into the style element
560+
// @ts-ignore
550561
let styleSheet = this.currentStyleElement.sheet!
551562
styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
552563

@@ -626,7 +637,7 @@ export class WMLMotionUIProperty<V=any,T="animation" | "transition"> extends WML
626637
}
627638
}
628639
getElement = ()=> {
629-
return document.getElementsByClassName(this.keyFrameName)[0];
640+
return WML_DOCUMENT.getElementsByClassName(this.keyFrameName)[0];
630641
}
631642
getTransitionProperties = ()=> {
632643
let htmlElement = this.getElement();

‎projects/wml-table/src/lib/wml-table-zero/private-utils/common-utils.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { WML_DOCUMENT } from "@windmillcode/wml-components-base";
2+
13
export let getCSSVARS =(selector:string="wml-table-zero")=> {
2-
let root = document.querySelector(selector) as HTMLElement;
4+
let root = WML_DOCUMENT.querySelector(selector) as HTMLElement;
35
let rootStyle = () => getComputedStyle(root);
46
let cssvars= {
57
wmlMobile: rootStyle().getPropertyValue('--wml-table-mobile'),

‎projects/wml-three/package.json‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
{
2-
"dependencies": {
3-
"tslib": "^2.3.0"
4-
},
5-
"funding": "https://github.com/sponsors/WindMillCode",
6-
"homepage": "https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/intro/wml-three",
7-
"name": "@windmillcode/wml-three",
8-
"peerDependencies": {
9-
"@types/three": "^0.170.0",
10-
"@windmillcode/wml-components-base": "^19.0.5000",
11-
"dat.gui": "^0.7.9",
12-
"lil-gui": "^0.19.2",
13-
"three": "^0.170.0"
14-
},
15-
"private": false,
16-
"repository": {
17-
"url": "https://github.com/WindMillCode/Windmillcode-Angular-CDK"
18-
},
19-
"schematics": "",
20-
"scripts": {
21-
"build": "npx ng build"
22-
},
23-
"version": "19.0.5000"
2+
"dependencies": {
3+
"tslib": "^2.3.0"
4+
},
5+
"funding": "https://github.com/sponsors/WindMillCode",
6+
"homepage": "https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/intro/wml-three",
7+
"name": "@windmillcode/wml-three",
8+
"peerDependencies": {
9+
"@types/three": "^0.170.0",
10+
"@windmillcode/wml-components-base": "^19.0.5001",
11+
"lil-gui": "0.20.0",
12+
"three": "^0.170.0"
13+
},
14+
"private": false,
15+
"repository": {
16+
"url": "https://github.com/WindMillCode/Windmillcode-Angular-CDK"
17+
},
18+
"schematics": "",
19+
"scripts": {
20+
"build": "npx ng build"
21+
},
22+
"version": "19.0.5001"
2423
}

‎projects/wml-three/src/lib/models.ts‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { getGlobalObject, WMLConstructorDecorator } from "@windmillcode/wml-components-base";
22
import { AmbientLight, BufferGeometry, Camera, CameraHelper, Clock, Controls, DirectionalLight, DirectionalLightHelper, HemisphereLight, HemisphereLightHelper, Intersection, Light, Loader, LoadingManager, Material, Mesh, Object3D, Object3DEventMap, OrthographicCamera, PerspectiveCamera, PointLight, PointLightHelper, Raycaster, Renderer, Scene, SpotLight, SpotLightHelper, Vector2, Vector3, WebGLRenderer,InstancedMesh } from "three";
3-
import { GUI as DatGUI } from "dat.gui";
43
import { GUI as LilGUI } from "lil-gui";
54
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
65
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -11,13 +10,13 @@ import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRe
1110
export class WMLThreeProps<R = Renderer> {
1211
constructor(params: Partial<WMLThreeProps> = {}) { }
1312
renderers: Array<any| Renderer > = [new WebGLRenderer({ antialias: true })];
14-
rendererParentElement = getGlobalObject().document.body;
13+
rendererParentElement = getGlobalObject()?.document?.body;
1514
// TODO Array<Object3D> was there for a reason why
1615
scenes: Array<Scene> = [new Scene()]
1716
cameras: Array<Camera> = [];
1817
controls: Array<Controls<any>> = [];
1918
inspectors: Array<{
20-
gui?: DatGUI | LilGUI,
19+
gui?: LilGUI,
2120
values: {
2221
[key: string]: {
2322
value:any,
@@ -67,10 +66,10 @@ export class WMLThreeProps<R = Renderer> {
6766
}
6867

6968
preCheck = () => {
70-
let myGlobal = getGlobalObject()
71-
if(!myGlobal?.document) {
72-
throw new Error('Three.js cannot work in your program, because it requires the "document" global.Browser environments usually hold this in the global window variable')
73-
}
69+
// let myGlobal = getGlobalObject()
70+
// if(!myGlobal?.document) {
71+
// throw new Error('Three.js cannot work in your program, because it requires the "document" global.Browser environments usually hold this in the global window variable')
72+
// }
7473
}
7574
animate = () => {
7675
this.animateFunctions.forEach(fn => fn({clock:this.clock}))
@@ -205,30 +204,31 @@ export class WMLThreeProps<R = Renderer> {
205204
}))
206205
}
207206
initInspectors = () => {
208-
this.inspectors.forEach((inspector) => {
209-
if(inspector.gui instanceof DatGUI){
210-
Object.entries(inspector.values).forEach(([key,val]:any) => {
211-
inspector.options = inspector.options ?? {}
212-
inspector.options[key] = val.value
213-
})
214-
Object.entries(inspector.values).forEach(([key,val]:any) => {
215-
let control
216-
if(['boolean'].includes(typeof val.value) ){
217-
control =inspector.gui.add(inspector.options, key)
218-
}
219-
if(['string'].includes(typeof val.value) ){
220-
control =inspector.gui.addColor(inspector.options, key)
221-
}
222-
else if(typeof val.value === 'number'){
223-
control = inspector.gui.add(inspector.options, key, val?.min,val?.max)
224-
}
225-
if(val?.onChange){
226-
val?.onChange(val.value,true)
227-
control.onChange(val?.onChange)
228-
}
229-
})
230-
}
231-
})
207+
// TODO handle inspect logic for lil.gui dat.gui is removed does not work in server environments
208+
// this.inspectors.forEach((inspector) => {
209+
// if(inspector.gui instanceof DatGUI){
210+
// Object.entries(inspector.values).forEach(([key,val]:any) => {
211+
// inspector.options = inspector.options ?? {}
212+
// inspector.options[key] = val.value
213+
// })
214+
// Object.entries(inspector.values).forEach(([key,val]:any) => {
215+
// let control
216+
// if(['boolean'].includes(typeof val.value) ){
217+
// control =inspector.gui.add(inspector.options, key)
218+
// }
219+
// if(['string'].includes(typeof val.value) ){
220+
// control =inspector.gui.addColor(inspector.options, key)
221+
// }
222+
// else if(typeof val.value === 'number'){
223+
// control = inspector.gui.add(inspector.options, key, val?.min,val?.max)
224+
// }
225+
// if(val?.onChange){
226+
// val?.onChange(val.value,true)
227+
// control.onChange(val?.onChange)
228+
// }
229+
// })
230+
// }
231+
// })
232232
}
233233
initRayCasters = () => {
234234
this.rayCasters.forEach((item) => {

0 commit comments

Comments
 (0)