[FORDJ] Add Playground App

modules/typesniffer/typesniffer.go

@@ -30,6 +30,7 @@ var (
 	svgComment       = regexp.MustCompile(`(?s)<!--.*?-->`)
 	svgTagRegex      = regexp.MustCompile(`(?si)\A\s*(?:(<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg\b`)
 	svgTagInXMLRegex = regexp.MustCompile(`(?si)\A<\?xml\b.*?\?>\s*(?:(<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg\b`)
+	ifcRegex         = regexp.MustCompile(`(?si)ISO\-10303\-21\;`)
 )
 
 // SniffedType contains information about a blobs type.
@@ -57,6 +58,11 @@ func (ct SniffedType) IsPDF() bool {
 	return strings.Contains(ct.contentType, "application/pdf")
 }
 
+// IsIFC detects if data is a IFC format
+func (ct SniffedType) IsIFC() bool {
+	return strings.Contains(ct.contentType, "ifc/")
+}
+
 // IsVideo detects if data is an video format
 func (ct SniffedType) IsVideo() bool {
 	return strings.Contains(ct.contentType, "video/")
@@ -83,6 +89,14 @@ func (ct SniffedType) GetMimeType() string {
 	return strings.SplitN(ct.contentType, ";", 2)[0]
 }
 
+func DetectContentFromData(ct string, data []byte) string {
+	if ifcRegex.Match(data) {
+		return "ifc/"
+	} else {
+		return ct
+	}
+}
+
 // DetectContentType extends http.DetectContentType with more content types. Defaults to text/unknown if input is empty.
 func DetectContentType(data []byte) SniffedType {
 	if len(data) == 0 {
@@ -135,6 +149,9 @@ func DetectContentType(data []byte) SniffedType {
 			ct = "audio/ogg" // for most cases, it is used as an audio container
 		}
 	}
+
+	ct = DetectContentFromData(ct, data)
+
 	return SniffedType{ct}
 }
 

routers/web/playground.go

@@ -0,0 +1,25 @@
+// Copyright 2024 Milovann Yanatchkov
+// SPDX-License-Identifier: MIT
+
+package web
+
+import (
+	"net/http"
+
+	"code.gitea.io/gitea/modules/base"
+	"code.gitea.io/gitea/services/context"
+)
+
+const (
+	// tplPlayground home page template
+	tplPlayground base.TplName = "playground/playground"
+)
+
+func Playground(ctx *context.Context) {
+	if ctx.IsSigned {
+		ctx.Data["UserName"] = ctx.Doer.DisplayName()
+	}
+
+	ctx.Data["PageIsPlayground"] = true
+	ctx.HTML(http.StatusOK, tplPlayground)
+}

routers/web/repo/view.go

@@ -616,6 +616,8 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry) {
 
 	case fInfo.st.IsPDF():
 		ctx.Data["IsPDFFile"] = true
+	case fInfo.st.IsIFC():
+		ctx.Data["IsIFC"] = true
 	case fInfo.st.IsVideo():
 		ctx.Data["IsVideoFile"] = true
 	case fInfo.st.IsAudio():

routers/web/web.go

@@ -444,6 +444,7 @@ func registerRoutes(m *web.Route) {
 	// Especially some AJAX requests, we can reduce middleware number to improve performance.
 
 	m.Get("/", Home)
+	m.Get("/playground", Playground)
 	m.Get("/sitemap.xml", sitemapEnabled, ignExploreSignIn, HomeSitemap)
 	m.Group("/.well-known", func() {
 		m.Get("/openid-configuration", auth.OIDCWellKnown)

templates/base/head_navbar.tmpl

@@ -39,6 +39,7 @@
 				{{end}}
 			{{end}}
 			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
+			<a class="item{{if .PageIsPlayground}} active{{end}}" href="{{AppSubUrl}}/playground">Playground</a>
 		{{else if .IsLandingPageOrganizations}}
 			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a>
 		{{else}}

templates/playground/playground.tmpl

@@ -0,0 +1,8 @@
+{{template "base/head" .}}
+{{if .IsSigned}}
+User : 	{{.UserName}}
+{{else}}
+User : None
+{{end}}
+<div id="playground"></div>
+{{template "base/footer" .}}

templates/repo/view_file.tmpl

@@ -116,6 +116,130 @@
 						</audio>
 					{{else if .IsPDFFile}}
 						<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
+					{{else if .IsIFC}}
+
+
+<div class="full-screen" id="container" style="width: 100%;height:500px;"></div>
+<script type="module">
+
+    import * as THREE from "https://unpkg.com/three@0.152.2/build/three.module.js";
+	import * as OBC from "/assets/js/openbim-components.js";
+    import * as WEBIFC from "https://unpkg.com/web-ifc@0.0.50/web-ifc-api.js";
+    import Stats from "https://unpkg.com/stats-js@1.0.1/src/Stats.js";
+    import * as dat from "https://unpkg.com/three@0.152.2/examples/jsm/libs/lil-gui.module.min.js";
+    import {downloadZip} from "https://unpkg.com/client-zip@2.3.0/index.js";
+
+    const container = document.getElementById('container');
+    const components = new OBC.Components();
+
+    components.scene = new OBC.SimpleScene(components);
+    components.renderer = new OBC.PostproductionRenderer(components, container);
+    components.camera = new OBC.SimpleCamera(components);
+    components.raycaster = new OBC.SimpleRaycaster(components);
+
+    components.init();
+
+    components.renderer.postproduction.enabled = true;
+    const scene = components.scene.get();
+    components.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);
+    components.scene.setup();
+
+    const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
+    const customEffects = components.renderer.postproduction.customEffects;
+    customEffects.excludedMeshes.push(grid.get());
+
+    let fragments = new OBC.FragmentManager(components);
+    let fragmentIfcLoader = new OBC.FragmentIfcLoader(components);
+
+    const mainToolbar = new OBC.Toolbar(components, { name: 'Main Toolbar', position: 'bottom' });
+    components.ui.addToolbar(mainToolbar);
+    const ifcButton = fragmentIfcLoader.uiElement.get("main");
+    mainToolbar.addChild(ifcButton);
+
+    await fragmentIfcLoader.setup()
+
+    const excludedCats = [
+        WEBIFC.IFCTENDONANCHOR,
+        WEBIFC.IFCREINFORCINGBAR,
+        WEBIFC.IFCREINFORCINGELEMENT,
+    ];
+
+    for(const cat of excludedCats) {
+        fragmentIfcLoader.settings.excludedCategories.add(cat);
+    }
+
+    fragmentIfcLoader.settings.webIfc.COORDINATE_TO_ORIGIN = true;
+    fragmentIfcLoader.settings.webIfc.OPTIMIZE_PROFILES = true;
+
+    async function loadIfcAsFragments() {
+		//const testpath="http://localhost:3014/rvba/test/src/branch/main/1019-column.ifc"
+		//const testpath="/rvba/test/src/branch/main/1019-column.ifc"
+		//const testpath="http://localhost:3014/rvba/test/raw/branch/main/1019-column.ifc"
+		const testpath="{{$.RawFileLink}}"
+		//const testpath="http://localhost:3014/rvba/test/src/branch/main/example.ifc"
+        //const file = await fetch('./small.ifc');
+        const file = await fetch(testpath);
+        const data = await file.arrayBuffer();
+        const buffer = new Uint8Array(data);
+        const model = await fragmentIfcLoader.load(buffer, "example");
+        scene.add(model);
+    }
+
+    async function exportFragments() {
+        if (!fragments.groups.length) return;
+        const group = fragments.groups[0];
+        const data = fragments.export(group);
+        const blob = new Blob([data]);
+        const fragmentFile = new File([blob], 'small.frag');
+
+        const files = [];
+        files.push(fragmentFile);
+        files.push(new File([JSON.stringify(group.properties)], 'small.json'));
+        const result = await downloadZip(files).blob();
+        result.name = 'example';
+        download(result);
+    }
+
+    function download(file) {
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(file);
+        link.download = file.name;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+    }
+
+    function disposeFragments() {
+        fragments.dispose();
+    }
+
+    const stats = new Stats();
+    stats.showPanel(2);
+    document.body.append(stats.dom);
+    stats.dom.style.left = '0px';
+    const renderer = components.renderer;
+    renderer.onBeforeUpdate.add(() => stats.begin());
+    renderer.onAfterUpdate.add(() => stats.end());
+
+	window.dispatchEvent(new Event('resize'));
+
+    const settings = {
+        loadFragments: () => loadIfcAsFragments(),
+        exportFragments: () => exportFragments(),
+        disposeFragments: () => disposeFragments(),
+    };
+
+    const gui = new dat.GUI();
+
+    //gui.add(settings, 'loadFragments').name('Import fragments');
+    //gui.add(settings, 'exportFragments').name('Export fragments');
+    //gui.add(settings, 'disposeFragments').name('Dispose fragments');
+
+    loadIfcAsFragments();
+
+</script>
+
+
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}

web_src/js/components/Playground.vue

@@ -0,0 +1,41 @@
+
+<template>
+    <h1 v-if="gameData">{{ gameData.File.Name }}</h1>
+    <div v-if="gameData">
+        {{ gameData.File.name }}
+        <br>
+        <GameStep v-for="step in gameData.File.Steps" :name="step.Items.Name.Value" /> 
+    </div>
+    <p v-if="serverData">{{ serverData.data }}</p>
+    <button @click="fetchData">Fetch</button>
+
+</template>
+<script>
+import GameStep from './Step.vue';
+export default {
+    components: {
+        GameStep,
+    },
+    data() {
+        return {
+            serverData: null,
+            gameData:null,
+            gameValue: null,
+        }
+    },
+    mounted() {
+        this.fetchGame();
+    },
+    methods : {
+        async fetchData() {
+            const response = await fetch("http://localhost:3333/time/");
+            this.serverData = await response.json();
+        },
+        async fetchGame() {
+            const response = await fetch("http://localhost:3333/game/");
+            this.gameData = await response.json();
+        },
+    }
+};
+</script>
+<style></style>

web_src/js/components/Step.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        {{ StepName }} : {{ stepData.result }}
+    </div>
+    <br>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            stepData: "",
+            StepName: this.name,
+        }
+    },
+    mounted() {
+        this.fetchData();
+    },
+    props: [
+        'name'
+    ],
+    methods : {
+        async fetchData() {
+            const response = await fetch("http://localhost:3333/step", {
+                    method: "POST",
+                    body: this.StepName,
+                }
+            );
+            this.stepData = await response.json();
+        },
+    }
+};
+</script>
+<style></style>

web_src/js/features/playground.js

@@ -0,0 +1,11 @@
+import {createApp} from 'vue'
+import Playground from '../components/Playground.vue'
+
+export function initPlayground() {
+	const el = document.getElementById('playground');
+	if (!el) return;
+
+	const View = createApp(Playground);	
+	View.mount(el);
+}
+

web_src/js/index.js

@@ -88,6 +88,8 @@ import {initRepositorySearch} from './features/repo-search.js';
 import {initColorPickers} from './features/colorpicker.js';
 import {initRepoMilestoneEditor} from './features/repo-milestone.js';
 
+import {initPlayground} from './features/playground.js';
+
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
 initDirAuto();
@@ -190,4 +192,6 @@ onDomReady(() => {
   initPdfViewer();
   initScopedAccessTokenCategories();
   initColorPickers();
+
+  initPlayground();
 });