Implement clipping (#333)

* Clip view forms

* Clipping implementation

* Keyboard event

* Use stencil for filling the holes: Step 1

* Stencil buffer: Part 2

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Change clip plane color

* Update clip plane material

* Take clipplane into consideration when it comes to mesh picking

* Shall we be smart?

* Rename clip plane mesh

* Show clipping plane

* Remove outdated comment

* Update icon

* Fix exploded view

* Add showClipPlane option

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

packages/base/src/commands.ts

@@ -25,7 +25,8 @@ import {
   requestAPI,
   sphereIcon,
   torusIcon,
-  unionIcon
+  unionIcon,
+  clippingIcon
 } from './tools';
 import { JupyterCadPanel, JupyterCadWidget } from './widget';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
@@ -407,6 +408,40 @@ const CAMERA_FORM = {
   }
 };
 
+const CLIP_VIEW_FORM = {
+  title: 'Clip View Settings',
+  schema: {
+    type: 'object',
+    required: ['Enabled'],
+    additionalProperties: false,
+    properties: {
+      Enabled: {
+        type: 'boolean',
+        description: 'Whether the clip view is enabled or not'
+      },
+      ShowClipPlane: {
+        type: 'boolean',
+        description: 'Whether the clip plane should be rendered or not'
+      }
+    }
+  },
+  default: (panel: JupyterCadPanel) => {
+    return {
+      Enabled: panel.clipView?.enabled ?? false,
+      ShowClipPlane: panel.clipView?.showClipPlane ?? true
+    };
+  },
+  syncData: (panel: JupyterCadPanel) => {
+    return (props: IDict) => {
+      const { Enabled, ShowClipPlane } = props;
+      panel.clipView = {
+        enabled: Enabled,
+        showClipPlane: ShowClipPlane
+      };
+    };
+  }
+};
+
 const EXPORT_FORM = {
   title: 'Export to .jcad',
   schema: {
@@ -686,6 +721,29 @@ export function addCommands(
     }
   });
 
+  commands.addCommand(CommandIDs.updateClipView, {
+    label: trans.__('Clipping'),
+    isEnabled: () => Boolean(tracker.currentWidget),
+    icon: clippingIcon,
+    execute: async () => {
+      const current = tracker.currentWidget;
+
+      if (!current) {
+        return;
+      }
+
+      const dialog = new FormDialog({
+        context: current.context,
+        title: CLIP_VIEW_FORM.title,
+        schema: CLIP_VIEW_FORM.schema,
+        sourceData: CLIP_VIEW_FORM.default(current.content),
+        syncData: CLIP_VIEW_FORM.syncData(current.content),
+        cancelButton: true
+      });
+      await dialog.launch();
+    }
+  });
+
   commands.addCommand(CommandIDs.exportJcad, {
     label: trans.__('Export to .jcad'),
     isEnabled: () => {
@@ -737,6 +795,7 @@ export namespace CommandIDs {
   export const updateAxes = 'jupytercad:updateAxes';
   export const updateExplodedView = 'jupytercad:updateExplodedView';
   export const updateCameraSettings = 'jupytercad:updateCameraSettings';
+  export const updateClipView = 'jupytercad:updateClipView';
 
   export const exportJcad = 'jupytercad:exportJcad';
 }