https://github.com/pragmagic/karadock
Dock layout engine based on Karax framework
https://github.com/pragmagic/karadock
dock-layout-engine karax-framework nim web
Last synced: 20 days ago
JSON representation
Dock layout engine based on Karax framework
- Host: GitHub
- URL: https://github.com/pragmagic/karadock
- Owner: pragmagic
- License: mit
- Created: 2017-05-16T08:29:22.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-26T08:51:43.000Z (almost 8 years ago)
- Last Synced: 2025-04-09T16:17:44.873Z (20 days ago)
- Topics: dock-layout-engine, karax-framework, nim, web
- Language: Nim
- Size: 2.23 MB
- Stars: 13
- Watchers: 5
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KaraDock
Dock layout engine based on Karax framework.
Example:
```nim
const border = "4px solid black"
const dropPlaceholderColor = "rgba(26, 135, 230, 0.5)"
const bodyColor = "rgb(78, 79, 81)"
const PanelAName = "Panel A"
const PanelBName = "Panel B"
const PanelCName = "Panel C"
const PanelDName = "Panel D"
const PanelEName = "Panel E"
var config = Config(
columnStyle: proc(config; path: ColumnPath): VStyle =
style(borderLeft ~ (if path != 0: border else: "0")),
columnDropPlaceholderStyle: proc(config; path: ColumnPath): VStyle =
style(backgroundColor ~ dropPlaceholderColor),
rowStyle: proc(config; path: RowPath): VStyle =
style(
borderTop ~ (if path.index != 0: border else: "0"),
backgroundColor ~ bodyColor
),
rowHeaderStyle: proc(config; path: RowPath): VStyle =
style(backgroundColor ~ "black"),
rowDropPlaceholderStyle: proc(config; path: RowPath): VStyle =
style(backgroundColor ~ dropPlaceholderColor),
panelNameStyle: proc(config; path: PanelPath): VStyle =
let row = getRow(config=config, path=path.rowPath)
let isActive = row.activePanel == path.index
result = style(
height ~ "26px",
lineHeight ~ "26px",
paddingLeft ~ "15px",
paddingRight ~ "15px",
fontWeight ~ "500",
backgroundColor ~ (if isActive: bodyColor else: "black"),
color ~ (if isActive: "#c7c7c8" else: "#666666")
),
panelNameDropPlaceholderStyle: proc(config; path: PanelPath): VStyle =
style(backgroundColor ~ dropPlaceholderColor),
panelBodyStyle: proc(config; path: PanelPath): VStyle =
style(padding ~ "5px"),
resizerStyle: style(backgroundColor ~ "rgba(255, 255, 255, 0.5)"),
onupdate: proc(configUpd: Config) =
#e.g. save configUpd.columns to LocalStorage
redraw(),
width: window.innerWidth,
height: window.innerHeight,
columns: @[
Column(
width: 250,
rows: @[
Row(
height: 60,
activePanel: 0,
panels: @[
Panel(
name: PanelAName,
isWorkingArea: false,
forceDisplayName: true,
minWidthPx: 250,
minHeightPx: 200,
body: buildHtml(text PanelAName)
)
]
),
Row(
height: 40,
activePanel: 1,
panels: @[
Panel(
name: PanelBName,
isWorkingArea: false,
forceDisplayName: true,
minWidthPx: 250,
minHeightPx: 200,
body: buildHtml(text PanelBName)
),
Panel(
name: PanelCName,
isWorkingArea: false,
forceDisplayName: true,
minWidthPx: 250,
minHeightPx: 200,
body: buildHtml(text PanelCName)
)
]
)
]
),
Column(
width: 100,
rows: @[
Row(
height: 100,
activePanel: 0,
panels: @[
Panel(
name: PanelDName,
isWorkingArea: true,
forceDisplayName: false,
minWidthPx: 400,
minHeightPx: 300,
body: buildHtml(text PanelDName)
)
]
)
]
),
Column(
width: 200,
rows: @[
Row(
height: 100,
activePanel: 0,
panels: @[
Panel(
name: PanelEName,
isWorkingArea: false,
forceDisplayName: true,
minWidthPx: 200,
minHeightPx: 300,
body: buildHtml(text PanelEName)
)
]
)
]
)
]
)
window.addEventListener(cstring"resize", proc(event) =
config.width = window.innerWidth
config.height = window.innerHeight
redraw()
)
proc createDom(): VNode =
let style = style(
color ~ "white",
fontSize ~ "16px"
)
result = buildHtml(tdiv(style=style)):
karaDock(config)
setRenderer createDom
```
To run the example above:
```
nimble install # For first time
```
```
cd examples/
nim js complex.nim
open complex.html
```
## TODO
* Use UUID instead of numeric indexes as panel/row/column paths.
* Automatically collapse/expand rows based on current available `config.height` and sum of `Panel.minHeightPx`.
* Automatically wrap right columns to the left based on current available `config.width` and `Column.width`.
## License
This library is licensed under the MIT license.
Read [LICENSE](https://github.com/pragmagic/karadock/blob/master/LICENSE) file for details.
Copyright (c) 2017 Pragmagic, Inc.