Merge pull request #30 from deno-windowing/rawhandle

feat: raw handle

README.md

@@ -17,7 +17,7 @@ import {
   createWindow,
   getProcAddress,
   mainloop,
-} from "https://deno.land/x/[email protected].3/mod.ts";
+} from "https://deno.land/x/[email protected].4/mod.ts";
 import * as gl from "https://deno.land/x/[email protected]/api/gles23.2.ts";
 
 const window = createWindow({
@@ -51,7 +51,7 @@ await mainloop(frame);
 import {
   mainloop,
   WindowCanvas,
-} from "https://deno.land/x/[email protected].3/ext/canvas.ts";
+} from "https://deno.land/x/[email protected].4/ext/canvas.ts";
 
 const canvas = new WindowCanvas({
   title: "Skia Canvas",
@@ -99,10 +99,10 @@ deno run --unstable --allow-ffi --allow-write --allow-env <file>
 ## Maintainers
 
 - Dj ([@DjDeveloperr](https://github.com/DjDeveloperr))
-- Loading ([@load1n9](https://github.com/load1n9))
+- Dean Srebnik ([@load1n9](https://github.com/load1n9))
 
 ## License
 
 [Apache-2.0](./LICENSE) licensed.
 
-Copyright 2023 © The Deno Windowing Team
+Copyright 2024 © The Deno Windowing Team

deno.jsonc

@@ -17,7 +17,8 @@
     "example:window": "deno run -A --unstable examples/window.ts",
     "example:capture": "deno run -A --unstable examples/mouse-capture.ts",
     "example:custom_cursor": "deno run -A --unstable examples/custom-cursor.ts",
-    "example:custom_icon": "deno run -A --unstable examples/custom-icon.ts"
+    "example:custom_icon": "deno run -A --unstable examples/custom-icon.ts",
+    "example:webgpu": "deno run -A --unstable examples/webgpu.ts"
   },
 
   "lint": {

examples/clock/window.ts

@@ -3,7 +3,7 @@ import {
   Canvas,
   CanvasRenderingContext2D,
   createCanvas,
-} from "https://deno.land/x/[email protected].4/mod.ts";
+} from "https://deno.land/x/[email protected].5/mod.ts";
 
 import {
   createWindow,
@@ -12,7 +12,7 @@ import {
   WindowClosedEvent,
   WindowFramebufferSizeEvent,
   WindowRefreshEvent,
-} from "https://deno.land/x/[email protected]/mod.ts";
+} from "../../mod.ts";
 
 export class WindowCanvas {
   canvas: Canvas;
@@ -84,5 +84,5 @@ export class WindowCanvas {
   }
 }
 
-export * from "https://deno.land/x/[email protected].4/mod.ts";
-export { mainloop } from "https://deno.land/x/[email protected]/mod.ts";
+export * from "https://deno.land/x/[email protected].5/mod.ts";
+export { mainloop } from "../../mod.ts";

examples/imgui.ts

@@ -1,6 +1,6 @@
-import { createWindow, getProcAddress, mainloop, pollEvents } from "../mod.ts";
+import { createWindow, getProcAddress, mainloop } from "../mod.ts";
 import * as gl from "https://deno.land/x/[email protected]/api/gles23.2.ts";
-import { CBool, createContext, destroyContext, imgui } from "../ext/imgui.ts";
+import { Bool, createContext, destroyContext, imgui } from "../ext/imgui.ts";
 
 const window = createWindow({
   title: "Imgui",
@@ -19,17 +19,17 @@ addEventListener("close", (event) => {
 
 const imguiContext = createContext(window);
 
-const showDemo = new CBool(true);
+const showDemo = new Bool(true);
 await mainloop(() => {
   gl.Clear(gl.COLOR_BUFFER_BIT);
   imgui.implOpenGL3NewFrame();
   imgui.implGlfwNewFrame();
   imgui.newFrame();
   imgui.begin("control");
-  imgui.checkbox("show demo window", showDemo);
+  imgui.checkbox("show demo window", showDemo.buffer);
   imgui.end();
   if (showDemo.value) {
-    imgui.showDemoWindow(showDemo);
+    imgui.showDemoWindow(showDemo.buffer);
   }
   imgui.render();
   const drawData = imgui.getDrawData();

examples/imgui2.ts

@@ -6,7 +6,6 @@ import {
   mainloop,
   WindowCanvas,
 } from "../ext/canvas.ts";
-import { pollEvents } from "../src/platform/glfw/window.ts";
 
 const win = new WindowCanvas({
   title: "IMGUI Skia",

examples/webgpu.ts

@@ -0,0 +1,157 @@
+import { createWindow, mainloop } from "../mod.ts";
+
+const adapter = await navigator.gpu.requestAdapter();
+const device = await adapter!.requestDevice();
+
+const window = createWindow({
+  title: "Deno Window Manager",
+  width: 512,
+  height: 512,
+  resizable: true,
+});
+
+const { width, height } = window.framebufferSize;
+
+const surface = window.windowSurface();
+
+const context = surface.getContext("webgpu");
+
+let pipeline: GPURenderPipeline;
+
+const uniformLength = 5;
+
+let uniformValues: Float32Array,
+  uniformBindGroup: GPUBindGroup,
+  uniformBuffer: GPUBuffer;
+
+function createPipeline() {
+  const fragEntry = "fs_main";
+
+  const shaderModule = device.createShaderModule({
+    code: `
+  struct Uniforms {
+      mouse: vec2f,
+      clicked: f32,
+      frame: f32,
+  };
+  
+  @group(0) @binding(0) var<uniform> shaderplay: Uniforms;
+  $struct VertexInput {
+      @builtin(vertex_index) vertex_index: u32,
+  };
+  
+  @vertex
+  fn vs_main(in: VertexInput) -> @builtin(position) vec4<f32> {
+      let x = f32(i32(in.vertex_index) - 1);
+      let y = f32(i32(in.vertex_index & 1u) * 2 - 1);
+      return vec4<f32>(x, y, 0.0, 1.0);
+  }
+  
+  @fragment
+  fn fs_main(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
+      return vec4<f32>(1.0, 0.0, 0.0, 1.0);
+  }
+  `,
+    label: "example",
+  });
+
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX,
+        buffer: {
+          type: "uniform",
+        },
+      },
+    ],
+  });
+  pipeline = device.createRenderPipeline({
+    // "auto" layout not working in Deno but works in browser
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [
+        bindGroupLayout,
+      ],
+    }),
+    vertex: {
+      module: shaderModule,
+      entryPoint: "vs_main",
+      buffers: [],
+    },
+    fragment: {
+      module: shaderModule,
+      entryPoint: fragEntry,
+      targets: [
+        {
+          format: "bgra8unorm",
+        },
+      ],
+    },
+  });
+
+  const value = new Float32Array(uniformLength);
+  uniformBuffer = device.createBuffer({
+    size: value.byteLength,
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+  });
+  uniformValues = value;
+
+  device.queue.writeBuffer(uniformBuffer, 0, value);
+
+  uniformBindGroup = device.createBindGroup({
+    layout: bindGroupLayout,
+    entries: [
+      { binding: 0, resource: { buffer: uniformBuffer } },
+    ],
+  });
+
+  // window.raise();
+}
+
+createPipeline();
+
+context.configure({
+  device,
+  format: "bgra8unorm",
+});
+
+addEventListener("mousemove", (evt) => {
+  uniformValues[0] = evt.clientX / width;
+  uniformValues[1] = evt.clientY / height;
+});
+
+addEventListener("mousedown", (evt) => {
+  uniformValues[2] = 1;
+});
+
+addEventListener("mouseup", (evt) => {
+  uniformValues[2] = 0;
+});
+
+await mainloop(() => {
+  uniformValues[3]++; // frame++
+
+  const commandEncoder = device.createCommandEncoder();
+  const textureView = context.getCurrentTexture().createView();
+
+  const renderPass = commandEncoder.beginRenderPass({
+    colorAttachments: [
+      {
+        view: textureView,
+        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+        loadOp: "clear",
+        storeOp: "store",
+      },
+    ],
+  });
+
+  device.queue.writeBuffer(uniformBuffer, 0, uniformValues);
+
+  renderPass.setPipeline(pipeline);
+  renderPass.setBindGroup(0, uniformBindGroup);
+  renderPass.draw(3, 1);
+  renderPass.end();
+
+  device.queue.submit([commandEncoder.finish()]);
+  surface.present();
+}, false);

ext/canvas.ts

@@ -2,7 +2,7 @@ import {
   Canvas,
   CanvasRenderingContext2D,
   createCanvas,
-} from "https://deno.land/x/[email protected].2/mod.ts";
+} from "https://deno.land/x/[email protected].5/mod.ts";
 
 import {
   createWindow,
@@ -86,4 +86,4 @@ export class WindowCanvas {
 export * from "../mod.ts";
 // deno-lint-ignore ban-ts-comment
 // @ts-expect-error
-export * from "https://deno.land/x/[email protected].2/mod.ts";
+export * from "https://deno.land/x/[email protected].5/mod.ts";

ext/imgui.ts

@@ -1,7 +1,7 @@
 // deno-lint-ignore-file no-explicit-any
 import { DwmWindow } from "../mod.ts";
-import * as imgui from "https://raw.githubusercontent.com/djfos/dimgui/main/src/call.ts";
-export * from "https://raw.githubusercontent.com/djfos/dimgui/main/src/type.ts";
+import * as imgui from "https://raw.githubusercontent.com/deno-windowing/dimgui/main/src/call.ts";
+export * from "https://raw.githubusercontent.com/deno-windowing/dimgui/main/src/type.ts";
 
 export function createContext(window: DwmWindow) {
   const imguiContext = imgui.createContext();

ext/styles/windows.ts

@@ -6,19 +6,12 @@ import {
   DwmEnableBlurBehindWindow,
   DwmSetWindowAttribute,
   DWMWA_USE_IMMERSIVE_DARK_MODE,
-} from "https://win32.deno.dev/0.2.0/Graphics.Dwm";
+} from "https://win32.deno.dev/0.4.1/Graphics.Dwm";
 import { DwmWindow } from "../../mod.ts";
 
-// const { SetWindowCompositionAttribute } = Deno.dlopen("user32.dll", {
-//   "SetWindowCompositionAttribute": {
-//     parameters: ["pointer", "pointer"],
-//     result: "pointer",
-//   },
-// }).symbols;
-
 function applyBlur(win: DwmWindow) {
   DwmEnableBlurBehindWindow(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     allocDWM_BLURBEHIND({
       dwFlags: DWM_BB_ENABLE,
       fEnable: true,
@@ -30,7 +23,7 @@ function applyBlur(win: DwmWindow) {
 
 function clearBlur(win: DwmWindow) {
   DwmEnableBlurBehindWindow(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     allocDWM_BLURBEHIND({
       dwFlags: DWM_BB_ENABLE,
       fEnable: false,
@@ -42,7 +35,7 @@ function clearBlur(win: DwmWindow) {
 
 function applyDark(win: DwmWindow) {
   DwmSetWindowAttribute(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     DWMWA_USE_IMMERSIVE_DARK_MODE,
     Uint8Array.of(2),
     4,
@@ -51,7 +44,7 @@ function applyDark(win: DwmWindow) {
 
 function applyLight(win: DwmWindow) {
   DwmSetWindowAttribute(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     DWMWA_USE_IMMERSIVE_DARK_MODE,
     Uint8Array.of(0),
     4,
@@ -60,7 +53,7 @@ function applyLight(win: DwmWindow) {
 
 function applyMica(win: DwmWindow) {
   DwmSetWindowAttribute(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     38,
     Uint8Array.of(2),
     4,
@@ -69,7 +62,7 @@ function applyMica(win: DwmWindow) {
 
 function applyMicaAlt(win: DwmWindow) {
   DwmSetWindowAttribute(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     38,
     Uint8Array.of(4),
     4,
@@ -78,7 +71,7 @@ function applyMicaAlt(win: DwmWindow) {
 
 function clearMica(win: DwmWindow) {
   DwmSetWindowAttribute(
-    ffi.glfwGetWin32Window(win.nativeHandle),
+    ffi.glfwGetWin32Window!(win.nativeHandle),
     38,
     Uint8Array.of(0),
     4,

src/core/event.ts

@@ -243,27 +243,8 @@ export class WindowDropEvent extends WindowEvent {
 
 export type AnimationFrameCallback = (time: number) => unknown;
 export const animationFrames = new Map<number, AnimationFrameCallback>();
-let animationFrameId = 0;
-
-export function requestAnimationFrameImpl(callback: AnimationFrameCallback) {
-  animationFrameId++;
-  animationFrames.set(animationFrameId, callback);
-  return animationFrameId;
-}
-
-export function cancelAnimationFrameImpl(id: number) {
-  animationFrames.delete(id);
-}
-
-Object.assign(window, {
-  requestAnimationFrame: requestAnimationFrameImpl,
-  cancelAnimationFrame: cancelAnimationFrameImpl,
-});
 
 declare global {
-  const requestAnimationFrame: typeof requestAnimationFrameImpl;
-  const cancelAnimationFrame: typeof cancelAnimationFrameImpl;
-
   interface WindowEventMap {
     close: WindowCloseEvent;
     closed: WindowClosedEvent;

src/core/mod.ts

@@ -2,3 +2,5 @@ export * from "./common.ts";
 export * from "./event.ts";
 export * from "./platform.ts";
 export * from "./window.ts";
+
+export type RawPlatform = "cocoa" | "win32" | "x11";