v0.7.15

caplin · Nov 14, 2023 · 88cbbf5 · 88cbbf5
1 parent 9b05a77
commit 88cbbf5
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 20 deletions.
diff --git a/ChangeLog.txt b/ChangeLog.txt
@@ -1,3 +1,6 @@
+0.7.15
+Added arrow icon to edge indicators
+
 0.7.14
 Added attribute tabsetClassName to tab nodes, this will add the classname to the parent
 tabset when there is a single stretched tab. Updated mosaic layout in demo to use this to color headers.  

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.7.14",
+    "version": "0.7.15",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

diff --git a/src/view/Icons.tsx b/src/view/Icons.tsx
@@ -23,6 +23,13 @@ export const OverflowIcon = () => {
     );
 }
 
+export const EdgeIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" style={{display:"block",  width:10, height:10}} preserveAspectRatio="none" viewBox="0 0 100 100"><path  fill="var(--color-edge-icon)" stroke="var(--color-edge-icon)" 
+            d="M10 30 L90 30 l-40 40 Z" /></svg>
+    );
+}
+
 export const PopoutIcon = () => {
     return (
         // <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none"/><path stroke="var(--color-icon)" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>

diff --git a/src/view/Layout.tsx b/src/view/Layout.tsx
@@ -26,7 +26,7 @@ import { FloatingWindowTab } from "./FloatingWindowTab";
 import { TabFloating } from "./TabFloating";
 import { IJsonTabNode } from "../model/IJsonModel";
 import { Orientation } from "../Orientation";
-import { CloseIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
+import { CloseIcon, EdgeIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
 import { TabButtonStamp } from "./TabButtonStamp";
 
 export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
@@ -136,6 +136,7 @@ export interface IIcons {
     maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
     restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
     more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: { node: TabNode; index: number }[]) => React.ReactNode));
+    edgeArrow?: React.ReactNode ;
 }
 
 const defaultIcons = {
@@ -145,6 +146,7 @@ const defaultIcons = {
     maximize: <MaximizeIcon />,
     restore: <RestoreIcon />,
     more: <OverflowIcon />,
+    edgeArrow: <EdgeIcon />
 };
 
 export interface ICustomDropDestination {
@@ -519,17 +521,34 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
 
         const edges: React.ReactNode[] = [];
+        const arrowIcon = this.icons.edgeArrow;
         if (this.state.showEdges) {
             const r = this.centerRect;
             const length = this.edgeRectLength;
             const width = this.edgeRectWidth;
             const offset = this.edgeRectLength / 2;
             const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
             const radius = 50;
-            edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_TOP)}></div>);
-            edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT)}></div>);
-            edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM)}></div>);
-            edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT)}></div>);
+            edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_TOP)}>
+                <div style={{transform: "rotate(180deg)"}}>
+                    {arrowIcon}
+                </div>
+            </div>);
+            edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT)}>
+                <div style={{transform: "rotate(90deg)"}}>
+                    {arrowIcon}
+                </div>
+            </div>);
+            edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM)}>
+                <div>
+                    {arrowIcon}
+                </div>
+            </div>);
+            edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT)}>
+                <div style={{transform: "rotate(-90deg)"}}>
+                    {arrowIcon}
+                </div>
+            </div>);
         }
 
         // this.layoutTime = (Date.now() - this.start);

diff --git a/style/_base.scss b/style/_base.scss
@@ -60,9 +60,11 @@
     &__edge_rect {
         position: absolute;
         z-index: 1000;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
         background-color: var(--color-edge-marker);
         pointer-events: none;
+        display:flex;
+        align-items: center;
+        justify-content: center;
     }
 
     &__drag_rect {

diff --git a/style/dark.css b/style/dark.css
diff --git a/style/dark.scss b/style/dark.scss
@@ -75,6 +75,7 @@ $font-family: Roboto, Arial, sans-serif !default;
         --color-popup-selected-background: var(--color-4);
 
         --color-edge-marker: gray;
+        --color-edge-icon: #eee;
     }
 }
 @mixin tabset_mixin {

diff --git a/style/gray.css b/style/gray.css
diff --git a/style/gray.scss b/style/gray.scss
@@ -73,7 +73,8 @@ $font_family: Roboto, Arial, sans-serif !default;
         --color-popup-selected: var(--color-text);
         --color-popup-selected-background: var(--color-3);
 
-        --color-edge-marker: gray;
+        --color-edge-marker: #aaa;
+        --color-edge-icon: #555;
     }
 }
 

diff --git a/style/light.css b/style/light.css
diff --git a/style/light.scss b/style/light.scss
@@ -74,7 +74,8 @@ $font-family: Roboto, Arial, sans-serif !default;
         --color-popup-selected: var(--color-text);
         --color-popup-selected-background: var(--color-3);
 
-        --color-edge-marker: gray;
+        --color-edge-marker: #aaa;
+        --color-edge-icon: #555;
     }
 }
 

diff --git a/style/underline.css b/style/underline.css
diff --git a/style/underline.css.map b/style/underline.css.map
diff --git a/style/underline.scss b/style/underline.scss
@@ -74,7 +74,8 @@ $font-family: Roboto, Arial, sans-serif !default;
         --color-popup-selected: var(--color-text);
         --color-popup-selected-background: var(--color-3);
 
-        --color-edge-marker: gray;
+        --color-edge-marker: #aaa;
+        --color-edge-icon: #555;
 
         --color-underline: rgb(65, 105, 225);
         --color-underline-hover: #aaa;

diff --git a/test/style/light.css b/test/style/light.css