Removes editing infra and replaces it with a hook for custom component wrapper

Author: torkelo

packages/scenes/src/components/NestedScene.tsx

@@ -45,7 +45,7 @@ export class NestedScene extends SceneObjectBase<NestedSceneState> {
   };
 }
 
-export function NestedSceneRenderer({ model, isEditing }: SceneComponentProps<NestedScene>) {
+export function NestedSceneRenderer({ model }: SceneComponentProps<NestedScene>) {
   const { title, isCollapsed, canCollapse, canRemove, body, actions } = model.useState();
   const styles = useStyles2(getStyles);
 
@@ -85,7 +85,7 @@ export function NestedSceneRenderer({ model, isEditing }: SceneComponentProps<Ne
         </Stack>
         <div className={styles.actions}>{toolbarActions}</div>
       </div>
-      {!isCollapsed && <body.Component model={body} isEditing={isEditing} />}
+      {!isCollapsed && <body.Component model={body} />}
     </div>
   );
 }

packages/scenes/src/components/SceneByFrameRepeater.tsx

@@ -43,8 +43,8 @@ export class SceneByFrameRepeater extends SceneObjectBase<SceneByFrameRepeaterSt
     this.state.body.setState({ children: newChildren });
   }
 
-  public static Component = ({ model, isEditing }: SceneComponentProps<SceneByFrameRepeater>) => {
+  public static Component = ({ model }: SceneComponentProps<SceneByFrameRepeater>) => {
     const { body } = model.useState();
-    return <body.Component model={body} isEditing={isEditing} />;
+    return <body.Component model={body} />;
   };
 }

packages/scenes/src/components/layout/SceneFlexLayout.tsx

@@ -33,7 +33,7 @@ export class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> imple
   }
 }
 
-function FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexLayout>) {
+function FlexLayoutRenderer({ model }: SceneComponentProps<SceneFlexLayout>) {
   const { direction = 'row', children, wrap } = model.useState();
   const style: CSSProperties = {
     flexGrow: 1,
@@ -48,7 +48,7 @@ function FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexL
   return (
     <div style={style}>
       {children.map((item) => (
-        <FlexLayoutChildComponent key={item.state.key} item={item} direction={direction} isEditing={isEditing} />
+        <FlexLayoutChildComponent key={item.state.key} item={item} direction={direction} />
       ))}
     </div>
   );
@@ -67,7 +67,7 @@ function FlexLayoutChildComponent({
 
   return (
     <div style={getItemStyles(direction, placement)}>
-      <item.Component model={item} isEditing={isEditing} />
+      <item.Component model={item} />
     </div>
   );
 }

packages/scenes/src/core/SceneComponentWrapper.tsx

@@ -1,14 +1,11 @@
 import React, { useEffect } from 'react';
 
-import { SceneComponentProps, SceneEditor, SceneObject } from './types';
+import { SceneComponentCustomWrapper, SceneComponentProps, SceneObject } from './types';
 
-function SceneComponentWrapperWithoutMemo<T extends SceneObject>({
-  model,
-  isEditing,
-  ...otherProps
-}: SceneComponentProps<T>) {
+function SceneComponentWrapperWithoutMemo<T extends SceneObject>({ model, ...otherProps }: SceneComponentProps<T>) {
   const Component = (model as any).constructor['Component'] ?? EmptyRenderer;
-  const inner = <Component {...otherProps} model={model} isEditing={isEditing} />;
+  const inner = <Component {...otherProps} model={model} />;
+  const CustomWrapper = getComponentWrapper(model);
 
   // Handle component activation state state
   useEffect(() => {
@@ -22,18 +19,11 @@ function SceneComponentWrapperWithoutMemo<T extends SceneObject>({
     };
   }, [model]);
 
-  if (!isEditing) {
-    return inner;
+  if (CustomWrapper) {
+    return <CustomWrapper model={model}>{inner}</CustomWrapper>;
   }
 
-  const editor = getSceneEditor(model);
-  const EditWrapper = getSceneEditor(model).getEditComponentWrapper();
-
-  return (
-    <EditWrapper model={model} editor={editor}>
-      {inner}
-    </EditWrapper>
-  );
+  return inner;
 }
 
 export const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);
@@ -42,15 +32,14 @@ function EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null
   return null;
 }
 
-function getSceneEditor(sceneObject: SceneObject): SceneEditor {
-  const { $editor } = sceneObject.state;
-  if ($editor) {
-    return $editor;
+function getComponentWrapper(sceneObject: SceneObject): SceneComponentCustomWrapper | undefined {
+  if (sceneObject.componentWrapper) {
+    return sceneObject.componentWrapper;
   }
 
   if (sceneObject.parent) {
-    return getSceneEditor(sceneObject.parent);
+    return getComponentWrapper(sceneObject.parent);
   }
 
-  throw new Error('No editor found in scene tree');
+  return undefined;
 }

packages/scenes/src/core/SceneObjectBase.tsx

@@ -76,13 +76,6 @@ export abstract class SceneObjectBase<TState extends SceneObjectState = SceneObj
     return SceneComponentWrapper;
   }
 
-  /**
-   * Temporary solution, should be replaced by declarative options
-   */
-  public get Editor(): SceneComponent<this> {
-    return ((this as any).constructor['Editor'] ?? (() => null)) as SceneComponent<this>;
-  }
-
   private setParent() {
     forEachSceneObjectInState(this._state, (child) => (child._parent = this));
   }

packages/scenes/src/core/sceneGraph.ts

@@ -4,7 +4,7 @@ import { DefaultTimeRange, EmptyDataNode, EmptyVariableSet } from '../variables/
 import { CustomFormatterFn, sceneInterpolator } from '../variables/interpolation/sceneInterpolator';
 import { SceneVariables } from '../variables/types';
 
-import { SceneDataState, SceneEditor, SceneLayout, SceneObject, SceneTimeRangeLike } from './types';
+import { SceneDataState, SceneLayout, SceneObject, SceneTimeRangeLike } from './types';
 import { lookupVariable } from '../variables/lookupVariable';
 
 /**
@@ -54,22 +54,6 @@ export function getTimeRange(sceneObject: SceneObject): SceneTimeRangeLike {
   return DefaultTimeRange;
 }
 
-/**
- * Will walk up the scene object graph to the closest $editor scene object
- */
-export function getSceneEditor(sceneObject: SceneObject): SceneEditor {
-  const { $editor } = sceneObject.state;
-  if ($editor) {
-    return $editor;
-  }
-
-  if (sceneObject.parent) {
-    return getSceneEditor(sceneObject.parent);
-  }
-
-  throw new Error('No editor found in scene tree');
-}
-
 /**
  * Will walk up the scene object graph to the closest $layout scene object
  */
@@ -126,7 +110,6 @@ export const sceneGraph = {
   getVariables,
   getData,
   getTimeRange,
-  getSceneEditor,
   getLayout,
   interpolate,
   lookupVariable,

packages/scenes/src/core/types.ts

@@ -18,7 +18,6 @@ export interface SceneObjectStatePlain {
   key?: string;
   $timeRange?: SceneTimeRangeLike;
   $data?: SceneDataProvider;
-  $editor?: SceneEditor;
   $variables?: SceneVariables;
 }
 
@@ -43,10 +42,15 @@ export interface SceneLayoutChildOptions {
 
 export interface SceneComponentProps<T> {
   model: T;
-  isEditing?: boolean;
 }
 
-export type SceneComponent<TModel> = React.FunctionComponent<SceneComponentProps<TModel>>;
+export interface SceneComponentWrapperProps {
+  model: SceneObject;
+  children: React.ReactNode;
+}
+
+export type SceneComponent<TModel> = (props: SceneComponentProps<TModel>) => React.ReactElement | null;
+export type SceneComponentCustomWrapper = (props: SceneComponentWrapperProps) => React.ReactElement | null;
 
 export interface SceneDataState extends SceneObjectStatePlain {
   data?: PanelData;
@@ -68,6 +72,9 @@ export interface SceneObject<TState extends SceneObjectState = SceneObjectState>
   /** This abstraction declares URL sync dependencies of a scene object. **/
   readonly urlSync?: SceneObjectUrlSyncHandler<TState>;
 
+  /** Component wrapper, can be used to for edit modes, to wrap some objecs in an edit wrappers */
+  readonly componentWrapper?: SceneComponentCustomWrapper;
+
   /** Subscribe to state changes */
   subscribeToState(handler: SceneStateChangedHandler<TState>): Unsubscribable;
 
@@ -103,9 +110,6 @@ export interface SceneObject<TState extends SceneObjectState = SceneObjectState>
   /** A React component to use for rendering the object */
   Component(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;
 
-  /** To be replaced by declarative method */
-  Editor(props: SceneComponentProps<SceneObject<TState>>): React.ReactElement | null;
-
   /** Force a re-render, should only be needed when variable values change */
   forceRender(): void;
 
@@ -131,24 +135,6 @@ export interface SceneLayout<T extends SceneLayoutState = SceneLayoutState> exte
   getDragClassCancel?(): string;
 }
 
-export interface SceneEditorState extends SceneObjectStatePlain {
-  hoverObject?: SceneObjectRef;
-  selectedObject?: SceneObjectRef;
-}
-
-export interface SceneEditor extends SceneObject<SceneEditorState> {
-  onMouseEnterObject(model: SceneObject): void;
-  onMouseLeaveObject(model: SceneObject): void;
-  onSelectObject(model: SceneObject): void;
-  getEditComponentWrapper(): React.ComponentType<SceneComponentEditWrapperProps>;
-}
-
-interface SceneComponentEditWrapperProps {
-  editor: SceneEditor;
-  model: SceneObject;
-  children: React.ReactNode;
-}
-
 export interface SceneTimeRangeState extends SceneObjectStatePlain {
   from: string;
   to: string;