v0.7.15

Author: nealus

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.  

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",

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>

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);

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 {

style/dark.css

@@ -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 {

style/dark.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;
     }
 }