Merge pull request #588 from mathuo/562-dockview-framework-wrappers-vuejs-angular-javascript-etc

562 dockview framework wrappers vuejs angular javascript etc

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -1418,7 +1418,7 @@ export class DockviewComponent
 
                 if (!referencePanel) {
                     throw new Error(
-                        `referencePanel ${options.position.referencePanel} does not exist`
+                        `referencePanel '${options.position.referencePanel}' does not exist`
                     );
                 }
 
@@ -1432,7 +1432,7 @@ export class DockviewComponent
 
                 if (!referenceGroup) {
                     throw new Error(
-                        `referencePanel ${options.position.referenceGroup} does not exist`
+                        `referenceGroup '${options.position.referenceGroup}' does not exist`
                     );
                 }
             } else {

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -78,6 +78,10 @@ const colors = [
 ];
 let count = 0;
 
+const WatermarkComponent = () => {
+    return <div>custom watermark</div>;
+};
+
 const DockviewDemo = (props: { theme?: string }) => {
     const [logLines, setLogLines] = React.useState<
         { text: string; timestamp?: Date; backgroundColor?: string }[]
@@ -174,6 +178,8 @@ const DockviewDemo = (props: { theme?: string }) => {
         defaultConfig(event.api);
     };
 
+    const [watermark, setWatermark] = React.useState<boolean>(false);
+
     return (
         <div
             style={{
@@ -187,7 +193,11 @@ const DockviewDemo = (props: { theme?: string }) => {
             }}
         >
             <div>
-                <GridActions api={api} />
+                <GridActions
+                    api={api}
+                    toggleCustomWatermark={() => setWatermark(!watermark)}
+                    hasCustomWatermark={watermark}
+                />
                 {api && (
                     <PanelActions
                         api={api}
@@ -218,6 +228,9 @@ const DockviewDemo = (props: { theme?: string }) => {
                     rightHeaderActionsComponent={RightControls}
                     leftHeaderActionsComponent={LeftControls}
                     prefixHeaderActionsComponent={PrefixHeaderControls}
+                    watermarkComponent={
+                        watermark ? WatermarkComponent : undefined
+                    }
                     onReady={onReady}
                     className={props.theme || 'dockview-theme-abyss'}
                 />

packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx

@@ -2,7 +2,11 @@ import { DockviewApi } from 'dockview';
 import * as React from 'react';
 import { defaultConfig, nextId } from './defaultLayout';
 
-export const GridActions = (props: { api?: DockviewApi }) => {
+export const GridActions = (props: {
+    api?: DockviewApi;
+    hasCustomWatermark: boolean;
+    toggleCustomWatermark: () => void;
+}) => {
     const onClear = () => {
         props.api?.clear();
     };
@@ -61,6 +65,18 @@ export const GridActions = (props: { api?: DockviewApi }) => {
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>
+            <span className="button-action">
+                <button
+                    className={
+                        props.hasCustomWatermark
+                            ? 'demo-button selected'
+                            : 'demo-button'
+                    }
+                    onClick={props.toggleCustomWatermark}
+                >
+                    Use Custom Watermark
+                </button>
+            </span>
             <button className="text-button" onClick={onClear}>
                 Clear
             </button>

packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx

@@ -7,7 +7,7 @@ const PanelAction = (props: {
     panelId: string;
 }) => {
     const onClick = () => {
-        props.api?.getPanel(props.panelId)?.focus();
+        props.api.getPanel(props.panelId)?.focus();
     };
     return (
         <div className="button-action">
@@ -27,9 +27,9 @@ const PanelAction = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                        const panel = props.api?.getPanel(props.panelId);
+                        const panel = props.api.getPanel(props.panelId);
                         if (panel) {
-                            props.api?.addFloatingGroup(panel);
+                            props.api.addFloatingGroup(panel);
                         }
                     }}
                 >
@@ -38,9 +38,9 @@ const PanelAction = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                        const panel = props.api?.getPanel(props.panelId);
+                        const panel = props.api.getPanel(props.panelId);
                         if (panel) {
-                            props.api?.addPopoutGroup(panel);
+                            props.api.addPopoutGroup(panel);
                         }
                     }}
                 >
@@ -51,7 +51,7 @@ const PanelAction = (props: {
                 <button
                     className="demo-icon-button"
                     onClick={() => {
-                        const panel = props.api?.getPanel(props.panelId);
+                        const panel = props.api.getPanel(props.panelId);
                         panel?.api.close();
                     }}
                 >