@geode/opengeodeweb-front 9.9.0 → 9.10.0-rc.2

package/stores/hybrid_viewer.js

@@ -0,0 +1,193 @@
+import "@kitware/vtk.js/Rendering/Profiles/Geometry"
+import vtkGenericRenderWindow from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow"
+import vtkXMLPolyDataReader from "@kitware/vtk.js/IO/XML/XMLPolyDataReader"
+import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper"
+import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor"
+
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+import Status from "@ogw_f/utils/status.js"
+
+export const useHybridViewerStore = defineStore("hybridViewer", () => {
+  const viewer_store = use_viewer_store()
+  const db = reactive({})
+  const status = ref(Status.NOT_CREATED)
+  const camera_options = reactive({})
+  const genericRenderWindow = reactive({})
+  const is_moving = ref(false)
+  const zScale = ref(1.0)
+  let viewStream
+  let gridActor = null
+
+  async function initHybridViewer() {
+    if (status.value !== Status.NOT_CREATED) return
+    status.value = Status.CREATING
+    genericRenderWindow.value = vtkGenericRenderWindow.newInstance({
+      background: [180 / 255, 180 / 255, 180 / 255],
+      listenWindowResize: false,
+    })
+
+    const webGLRenderWindow =
+      genericRenderWindow.value.getApiSpecificRenderWindow()
+    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style
+    imageStyle.transition = "opacity 0.1s ease-in"
+    imageStyle.zIndex = 1
+
+    await viewer_store.ws_connect()
+    viewStream = viewer_store.client.getImageStream().createViewStream("-1")
+    viewStream.onImageReady((e) => {
+      if (is_moving.value) return
+      const webGLRenderWindow =
+        genericRenderWindow.value.getApiSpecificRenderWindow()
+      const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style
+      webGLRenderWindow.setBackgroundImage(e.image)
+      imageStyle.opacity = 1
+    })
+
+    status.value = Status.CREATED
+  }
+
+  async function addItem(id, value) {
+    const reader = vtkXMLPolyDataReader.newInstance()
+    const textEncoder = new TextEncoder()
+    await reader.parseAsArrayBuffer(
+      textEncoder.encode(value.binary_light_viewable),
+    )
+    const polydata = reader.getOutputData(0)
+    const mapper = vtkMapper.newInstance()
+    mapper.setInputData(polydata)
+    const actor = vtkActor.newInstance()
+    actor.getProperty().setColor(20 / 255, 20 / 255, 20 / 255)
+    actor.setMapper(mapper)
+    const renderer = genericRenderWindow.value.getRenderer()
+    const renderWindow = genericRenderWindow.value.getRenderWindow()
+    renderer.addActor(actor)
+    renderer.resetCamera()
+    renderWindow.render()
+    db[id] = { actor, polydata, mapper }
+  }
+
+  async function setZScaling(z_scale) {
+    zScale.value = z_scale
+    const renderer = genericRenderWindow.value.getRenderer()
+    const actors = renderer.getActors()
+    actors.forEach((actor) => {
+      if (actor !== gridActor) {
+        const scale = actor.getScale()
+        actor.setScale(scale[0], scale[1], z_scale)
+      }
+    })
+    renderer.resetCamera()
+    genericRenderWindow.value.getRenderWindow().render()
+    const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling
+    if (!schema) return
+    await viewer_call({
+      schema,
+      params: {
+        z_scale: z_scale,
+      },
+    })
+  }
+
+  function syncRemoteCamera() {
+    const renderer = genericRenderWindow.value.getRenderer()
+    const camera = renderer.getActiveCamera()
+    const params = {
+      camera_options: {
+        focal_point: camera.getFocalPoint(),
+        view_up: camera.getViewUp(),
+        position: camera.getPosition(),
+        view_angle: camera.getViewAngle(),
+        clipping_range: camera.getClippingRange(),
+        distance: camera.getDistance(),
+      },
+    }
+    viewer_call(
+      {
+        schema: viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
+        params,
+      },
+      {
+        response_fonction: () => {
+          for (const key in params.camera_options) {
+            camera_options[key] = params.camera_options[key]
+          }
+        },
+      },
+    )
+  }
+
+  function remoteRender() {
+    viewer_call({
+      schema: viewer_schemas.opengeodeweb_viewer.viewer.render_now,
+    })
+  }
+
+  function setContainer(container) {
+    genericRenderWindow.value.setContainer(container.value.$el)
+    const webGLRenderWindow =
+      genericRenderWindow.value.getApiSpecificRenderWindow()
+    webGLRenderWindow.setUseBackgroundImage(true)
+    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style
+    imageStyle.transition = "opacity 0.1s ease-in"
+    imageStyle.zIndex = 1
+    resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight)
+
+    useMousePressed({
+      target: container,
+      onPressed: (event) => {
+        if (event.button == 0) {
+          is_moving.value = true
+          event.stopPropagation()
+          imageStyle.opacity = 0
+        }
+      },
+      onReleased: () => {
+        is_moving.value = false
+        syncRemoteCamera()
+      },
+    })
+
+    let wheelEventEndTimeout = null
+    useEventListener(container, "wheel", () => {
+      is_moving.value = true
+      imageStyle.opacity = 0
+      clearTimeout(wheelEventEndTimeout)
+      wheelEventEndTimeout = setTimeout(() => {
+        is_moving.value = false
+        syncRemoteCamera()
+      }, 600)
+    })
+  }
+
+  async function resize(width, height) {
+    if (
+      viewer_store.status !== Status.CONNECTED ||
+      status.value !== Status.CREATED
+    ) {
+      return
+    }
+    const webGLRenderWindow =
+      genericRenderWindow.value.getApiSpecificRenderWindow()
+    const canvas = webGLRenderWindow.getCanvas()
+    canvas.width = width
+    canvas.height = height
+    await nextTick()
+    webGLRenderWindow.setSize(width, height)
+    viewStream.setSize(width, height)
+    const renderWindow = genericRenderWindow.value.getRenderWindow()
+    renderWindow.render()
+    remoteRender()
+  }
+
+  return {
+    db,
+    genericRenderWindow,
+    addItem,
+    setZScaling,
+    syncRemoteCamera,
+    initHybridViewer,
+    resize,
+    setContainer,
+    zScale,
+  }
+})

package/stores/menu.js

@@ -0,0 +1,182 @@
+// PointSet components
+import PointSetPointsOptions from "@ogw_f/components/Viewer/PointSet/PointsOptions.vue"
+
+// EdgedCurve components
+import EdgedCurvePointsOptions from "@ogw_f/components/Viewer/EdgedCurve/PointsOptions.vue"
+import EdgedCurveEdgesOptions from "@ogw_f/components/Viewer/EdgedCurve/EdgesOptions.vue"
+
+// PolygonalSurface components
+import PolygonalSurfacePointsOptions from "@ogw_f/components/Viewer/PolygonalSurface/PointsOptions.vue"
+import PolygonalSurfaceEdgesOptions from "@ogw_f/components/Viewer/PolygonalSurface/EdgesOptions.vue"
+import PolygonalSurfacePolygonsOptions from "@ogw_f/components/Viewer/PolygonalSurface/PolygonsOptions.vue"
+
+// TriangulatedSurface components
+import TriangulatedSurfacePointsOptions from "@ogw_f/components/Viewer/TriangulatedSurface/PointsOptions.vue"
+import TriangulatedSurfaceEdgesOptions from "@ogw_f/components/Viewer/TriangulatedSurface/EdgesOptions.vue"
+import TriangulatedSurfaceTrianglesOptions from "@ogw_f/components/Viewer/TriangulatedSurface/TrianglesOptions.vue"
+
+// Grid 2D components
+import Grid2DPointsOptions from "@ogw_f/components/Viewer/Grid/2D/PointsOptions.vue"
+import Grid2DEdgesOptions from "@ogw_f/components/Viewer/Grid/2D/EdgesOptions.vue"
+import Grid2DCellsOptions from "@ogw_f/components/Viewer/Grid/2D/CellsOptions.vue"
+
+// Grid 3D components
+import Grid3DPointsOptions from "@ogw_f/components/Viewer/Grid/3D/PointsOptions.vue"
+import Grid3DEdgesOptions from "@ogw_f/components/Viewer/Grid/3D/EdgesOptions.vue"
+import Grid3DFacetsOptions from "@ogw_f/components/Viewer/Grid/3D/FacetsOptions.vue"
+import Grid3DCellsOptions from "@ogw_f/components/Viewer/Grid/3D/CellsOptions.vue"
+
+// Solid components
+import SolidPointsOptions from "@ogw_f/components/Viewer/Solid/PointsOptions.vue"
+import SolidEdgesOptions from "@ogw_f/components/Viewer/Solid/EdgesOptions.vue"
+import SolidPolygonsOptions from "@ogw_f/components/Viewer/Solid/PolygonsOptions.vue"
+import SolidPolyhedraOptions from "@ogw_f/components/Viewer/Solid/PolyhedraOptions.vue"
+
+// TetrahedralSolid components
+import TetrahedralSolidTrianglesOptions from "@ogw_f/components/Viewer/TetrahedralSolid/TrianglesOptions.vue"
+import TetrahedralSolidTetrahedraOptions from "@ogw_f/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue"
+
+// Model components
+import ModelEdgesOptions from "@ogw_f/components/Viewer/Generic/Model/EdgesOptions.vue"
+import ModelPointsOptions from "@ogw_f/components/Viewer/Generic/Model/PointsOptions.vue"
+
+const PointSet_menu = [PointSetPointsOptions]
+
+const EdgedCurve_menu = [EdgedCurvePointsOptions, EdgedCurveEdgesOptions]
+
+const PolygonalSurface_menu = [
+  PolygonalSurfacePointsOptions,
+  PolygonalSurfaceEdgesOptions,
+  PolygonalSurfacePolygonsOptions,
+]
+
+const TriangulatedSurface_menu = [
+  TriangulatedSurfacePointsOptions,
+  TriangulatedSurfaceEdgesOptions,
+  TriangulatedSurfaceTrianglesOptions,
+]
+
+const Grid2D_menu = [
+  Grid2DPointsOptions,
+  Grid2DEdgesOptions,
+  Grid2DCellsOptions,
+]
+const Grid3D_menu = [
+  Grid3DPointsOptions,
+  Grid3DEdgesOptions,
+  Grid3DFacetsOptions,
+  Grid3DCellsOptions,
+]
+
+const Solid_menu = [
+  SolidPointsOptions,
+  SolidEdgesOptions,
+  SolidPolygonsOptions,
+  SolidPolyhedraOptions,
+]
+
+const TetrahedralSolid_menu = [
+  SolidPointsOptions,
+  SolidEdgesOptions,
+  TetrahedralSolidTrianglesOptions,
+  TetrahedralSolidTetrahedraOptions,
+]
+
+const BRep_menu = [ModelEdgesOptions, ModelPointsOptions]
+
+const CrossSection_menu = [ModelEdgesOptions, ModelPointsOptions]
+
+const ImplicitCrossSection_menu = [ModelEdgesOptions, ModelPointsOptions]
+const ImplicitStructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions]
+
+const Section_menu = [ModelEdgesOptions, ModelPointsOptions]
+
+const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions]
+
+const menusData = {
+  mesh: {
+    EdgedCurve2D: EdgedCurve_menu,
+    EdgedCurve3D: EdgedCurve_menu,
+    HybridSolid3D: Solid_menu,
+    LightRegularGrid2D: Grid2D_menu,
+    LightRegularGrid3D: Grid3D_menu,
+    PointSet2D: PointSet_menu,
+    PointSet3D: PointSet_menu,
+    PolygonalSurface2D: PolygonalSurface_menu,
+    PolygonalSurface3D: PolygonalSurface_menu,
+    PolyhedralSolid3D: Solid_menu,
+    RegularGrid2D: Grid2D_menu,
+    RegularGrid3D: Grid3D_menu,
+    TetrahedralSolid3D: TetrahedralSolid_menu,
+    TriangulatedSurface2D: TriangulatedSurface_menu,
+    TriangulatedSurface3D: TriangulatedSurface_menu,
+  },
+  model: {
+    BRep: BRep_menu,
+    CrossSection: CrossSection_menu,
+    ImplicitCrossSection: ImplicitCrossSection_menu,
+    ImplicitStructuralModel: ImplicitStructuralModel_menu,
+    Section: Section_menu,
+    StructuralModel: StructuralModel_menu,
+  },
+}
+
+export const useMenuStore = defineStore("menu", () => {
+  const menus = ref(menusData)
+  const display_menu = ref(false)
+  const current_id = ref(null)
+  const menuX = ref(0)
+  const menuY = ref(0)
+  const containerWidth = ref(window.innerWidth)
+  const containerHeight = ref(window.innerHeight)
+
+  function getMenuItems(objectType, geodeObject) {
+    if (!objectType || !geodeObject || !menus.value[objectType]) {
+      return []
+    }
+    return menus.value[objectType][geodeObject] || []
+  }
+
+  function closeMenu() {
+    display_menu.value = false
+    current_id.value = null
+  }
+
+  async function openMenu(id, x, y, containerWidth, containerHeight) {
+    await closeMenu()
+    current_id.value = id
+
+    if (x !== undefined && y !== undefined) {
+      menuX.value = x
+      menuY.value = y
+    }
+
+    if (containerWidth) containerWidth.value = containerWidth
+    if (containerHeight) containerHeight.value = containerHeight
+
+    display_menu.value = true
+  }
+
+  function showItemsWithDelay() {
+    const DELAY = 50
+    const items = getMenuItems()
+    items.forEach((item, index) => {
+      setTimeout(() => {
+        item.visible = true
+      }, index * DELAY)
+    })
+  }
+
+  return {
+    display_menu,
+    current_id,
+    menuX,
+    menuY,
+    containerWidth,
+    containerHeight,
+    getMenuItems,
+    closeMenu,
+    openMenu,
+    showItemsWithDelay,
+  }
+})

package/stores/treeview.js

@@ -0,0 +1,64 @@
+export const use_treeview_store = defineStore("treeview", () => {
+  const dataStyleStore = useDataStyleStore()
+
+  /** State **/
+  const items = ref([])
+  const selection = ref([])
+  const components_selection = ref([])
+  const isAdditionnalTreeDisplayed = ref(false)
+  const panelWidth = ref(300)
+  const model_id = ref("")
+  const isTreeCollection = ref(false)
+  const selectedTree = ref(null)
+
+  /** Functions **/
+  function addItem(geodeObject, displayed_name, id, object_type) {
+    dataStyleStore.addDataStyle(id, geodeObject, object_type)
+    const child = { title: displayed_name, id, object_type }
+    for (let i = 0; i < items.value.length; i++) {
+      if (items.value[i].title === geodeObject) {
+        items.value[i].children.push(child)
+        selection.value.push(child)
+        return
+      }
+    }
+    items.value.push({ title: geodeObject, children: [child] })
+    selection.value.push(child)
+  }
+
+  function displayAdditionalTree(id) {
+    isAdditionnalTreeDisplayed.value = true
+    model_id.value = id
+  }
+
+  function displayFileTree() {
+    isAdditionnalTreeDisplayed.value = false
+  }
+
+  function toggleTreeView() {
+    isTreeCollection.value = !isTreeCollection.value
+    console.log(
+      "Switched to",
+      isTreeCollection.value ? "TreeCollection" : "TreeComponent",
+    )
+  }
+
+  function setPanelWidth(width) {
+    panelWidth.value = width
+  }
+
+  return {
+    items,
+    selection,
+    components_selection,
+    isAdditionnalTreeDisplayed,
+    panelWidth,
+    model_id,
+    selectedTree,
+    addItem,
+    displayAdditionalTree,
+    displayFileTree,
+    toggleTreeView,
+    setPanelWidth,
+  }
+})