14 |
20 |
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/styles/index.less:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Copyright 2019 Kevin Verdieck, originally developed at Palantir Technologies, Inc.
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | */
17 | @import 'mosaic';
18 | @import 'mosaic-window';
19 | @import 'blueprint-theme';
20 |
--------------------------------------------------------------------------------
/webpack/hot.ts:
--------------------------------------------------------------------------------
1 | import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
2 | import webpack from 'webpack';
3 | import 'webpack-dev-server';
4 | import config from './base';
5 | import { CONSTANTS } from './constants';
6 |
7 | const hotConfig: webpack.Configuration = {
8 | ...config,
9 | mode: 'development',
10 | devtool: 'cheap-module-source-map',
11 | stats: 'minimal',
12 | optimization: {
13 | runtimeChunk: 'single',
14 | },
15 | devServer: {
16 | static: CONSTANTS.DOCS_DIR,
17 | historyApiFallback: true,
18 | hot: true,
19 | host: '0.0.0.0',
20 | port: CONSTANTS.DEV_SERVER_PORT,
21 | },
22 | plugins: [...(config.plugins || []), new ReactRefreshWebpackPlugin()],
23 | };
24 |
25 | // tslint:disable-next-line no-default-export
26 | export default hotConfig;
27 |
--------------------------------------------------------------------------------
/tslint.yml:
--------------------------------------------------------------------------------
1 | ---
2 | defaultSeverity: error
3 | extends:
4 | - tslint:recommended
5 | - tslint-react
6 | - tslint-plugin-prettier
7 | - tslint-config-prettier
8 | linterOptions:
9 | format: stylish
10 | rules:
11 | curly: true
12 | interface-name:
13 | options:
14 | - never-prefix
15 | member-access: false
16 | member-ordering: false
17 | object-literal-sort-keys: false
18 | ordered-imports:
19 | options:
20 | import-sources-order: case-insensitive
21 | module-source-path: full
22 | named-imports-order: case-insensitive
23 | import-blacklist: [true, 'lodash']
24 | prettier: true
25 | no-namespace: false
26 | variable-name:
27 | options:
28 | - check-format
29 | - allow-leading-underscore
30 | - allow-pascal-case
31 | - ban-keywords
32 | array-type:
33 | options:
34 | - array
35 | no-console:
36 | options:
37 | - log
38 | switch-default: true
39 | max-classes-per-file: false
40 | await-promise: true
41 | ban-comma-operator: true
42 | prefer-object-spread: true
43 | no-default-export: true
44 | jsx-no-lambda: false
45 | jsx-key: false
46 |
--------------------------------------------------------------------------------
/src/buttons/SplitButton.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import noop from 'lodash/noop';
3 | import React from 'react';
4 |
5 | import { MosaicWindowContext } from '../contextTypes';
6 | import { OptionalBlueprint } from '../util/OptionalBlueprint';
7 | import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
8 |
9 | export class SplitButton extends React.PureComponent
24 | {values(MosaicDropTargetPosition).map((position) => (
25 |
28 | );
29 | });
30 | RootDropTargets.displayName = 'RootDropTargets';
31 |
32 | function useDelayedTrue(currentValue: boolean, delay: number): boolean {
33 | const delayedRef = React.useRef(currentValue);
34 |
35 | const [, setCounter] = React.useState(0);
36 | const setAndRender = (newValue: boolean) => {
37 | delayedRef.current = newValue;
38 | setCounter((count) => count + 1);
39 | };
40 |
41 | if (!currentValue) {
42 | delayedRef.current = false;
43 | }
44 |
45 | React.useEffect(() => {
46 | if (delayedRef.current === currentValue || !currentValue) {
47 | return;
48 | }
49 |
50 | const timer = window.setTimeout(() => setAndRender(true), delay);
51 | return () => {
52 | window.clearTimeout(timer);
53 | };
54 | }, [currentValue]);
55 |
56 | return delayedRef.current;
57 | }
58 |
--------------------------------------------------------------------------------
/src/MosaicZeroState.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import noop from 'lodash/noop';
3 | import React from 'react';
4 |
5 | import { MosaicContext } from './contextTypes';
6 | import { CreateNode, MosaicKey } from './types';
7 | import { OptionalBlueprint } from './util/OptionalBlueprint';
8 |
9 | export interface MosaicZeroStateProps
25 |
43 | );
44 | }
45 |
46 | private replace = () =>
47 | Promise.resolve(this.props.createNode!())
48 | .then((node) => this.context.mosaicActions.replaceWith([], node))
49 | .catch(noop); // Swallow rejections (i.e. on user cancel)
50 | }
51 |
--------------------------------------------------------------------------------
/webpack/base.ts:
--------------------------------------------------------------------------------
1 | import HtmlWebpackPlugin from 'html-webpack-plugin';
2 | import webpack from 'webpack';
3 | import { CONSTANTS } from './constants';
4 |
5 | const config: webpack.Configuration = {
6 | entry: CONSTANTS.APP_ENTRY,
7 | output: {
8 | filename: '[name].js',
9 | path: CONSTANTS.DOCS_DIR,
10 | },
11 | devtool: 'source-map',
12 | resolve: {
13 | extensions: ['.webpack.js', '.web.js', '.json', '.ts', '.js', '.tsx'],
14 | },
15 | optimization: {
16 | moduleIds: 'named',
17 | },
18 | module: {
19 | rules: [
20 | {
21 | test: /\.html$/,
22 | loader: 'html-loader',
23 | },
24 | {
25 | test: /\.tsx?$/,
26 | use: [
27 | {
28 | loader: 'ts-loader',
29 | options: {
30 | compilerOptions: {
31 | noEmit: false,
32 | declaration: false,
33 | },
34 | },
35 | },
36 | ],
37 | },
38 | {
39 | test: /node_modules.*\.js$/,
40 | loader: 'source-map-loader',
41 | },
42 | {
43 | test: /\.css$/,
44 | use: [
45 | {
46 | loader: 'style-loader',
47 | },
48 | {
49 | loader: 'css-loader',
50 | },
51 | ],
52 | },
53 | {
54 | test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff2?$|\.ttf$|\.eot$/,
55 | type: 'asset/resource',
56 | },
57 | {
58 | test: /\.less/,
59 | use: [
60 | {
61 | loader: 'style-loader',
62 | },
63 | {
64 | loader: 'css-loader',
65 | },
66 | {
67 | loader: 'less-loader',
68 | },
69 | ],
70 | },
71 | ],
72 | },
73 | plugins: [
74 | new HtmlWebpackPlugin({
75 | template: CONSTANTS.HTML_TEMPLATE,
76 | }),
77 | ],
78 | };
79 |
80 | // tslint:disable-next-line no-default-export
81 | export default config;
82 |
--------------------------------------------------------------------------------
/test/boundingBoxSpec.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { BoundingBox } from '../src/util/BoundingBox';
3 |
4 | // Yay javascript float precision
5 | function expectBoundingBoxCloseTo(a: BoundingBox, b: BoundingBox, delta: number = 0.000001) {
6 | expect(a.top).to.be.closeTo(b.top, delta);
7 | expect(a.right).to.be.closeTo(b.right, delta);
8 | expect(a.bottom).to.be.closeTo(b.bottom, delta);
9 | expect(a.left).to.be.closeTo(b.left, delta);
10 | }
11 |
12 | describe('BoundingBox', () => {
13 | describe('Root', () => {
14 | const EMPTY = BoundingBox.empty();
15 | it('should split column', () => {
16 | const { first, second } = BoundingBox.split(EMPTY, 25, 'column');
17 | expectBoundingBoxCloseTo(first, {
18 | top: 0,
19 | right: 0,
20 | bottom: 75,
21 | left: 0,
22 | });
23 | expectBoundingBoxCloseTo(second, {
24 | top: 25,
25 | right: 0,
26 | bottom: 0,
27 | left: 0,
28 | });
29 | });
30 | it('should split row', () => {
31 | const { first, second } = BoundingBox.split(EMPTY, 25, 'row');
32 | expectBoundingBoxCloseTo(first, {
33 | top: 0,
34 | right: 75,
35 | bottom: 0,
36 | left: 0,
37 | });
38 | expectBoundingBoxCloseTo(second, {
39 | top: 0,
40 | right: 0,
41 | bottom: 0,
42 | left: 25,
43 | });
44 | });
45 | });
46 | describe('Complex', () => {
47 | const COMPLEX = {
48 | top: 100 / 6,
49 | right: 100 / 6,
50 | bottom: 100 / 6,
51 | left: 100 / 6,
52 | };
53 | it('should split column', () => {
54 | const { first, second } = BoundingBox.split(COMPLEX, 25, 'column');
55 | expectBoundingBoxCloseTo(first, {
56 | top: 100 / 6,
57 | right: 100 / 6,
58 | bottom: (100 / 6) * 4,
59 | left: 100 / 6,
60 | });
61 | expectBoundingBoxCloseTo(second, {
62 | top: (100 / 6) * 2,
63 | right: 100 / 6,
64 | bottom: 100 / 6,
65 | left: 100 / 6,
66 | });
67 | });
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Copyright 2019 Kevin Verdieck, originally developed at Palantir Technologies, Inc.
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | */
17 | export {
18 | Mosaic,
19 | MosaicProps,
20 | MosaicUncontrolledProps,
21 | MosaicControlledProps,
22 | MosaicWithoutDragDropContext,
23 | } from './Mosaic';
24 | export {
25 | MosaicNode,
26 | MosaicDragType,
27 | MosaicDirection,
28 | MosaicBranch,
29 | CreateNode,
30 | MosaicParent,
31 | MosaicPath,
32 | MosaicUpdate,
33 | MosaicUpdateSpec,
34 | TileRenderer,
35 | } from './types';
36 | export { MosaicContext, MosaicRootActions, MosaicWindowActions, MosaicWindowContext } from './contextTypes';
37 | export {
38 | buildSpecFromUpdate,
39 | createDragToUpdates,
40 | createExpandUpdate,
41 | createHideUpdate,
42 | createRemoveUpdate,
43 | updateTree,
44 | } from './util/mosaicUpdates';
45 | export {
46 | createBalancedTreeFromLeaves,
47 | Corner,
48 | getAndAssertNodeAtPathExists,
49 | getLeaves,
50 | getNodeAtPath,
51 | getOtherBranch,
52 | getOtherDirection,
53 | getPathToCorner,
54 | isParent,
55 | } from './util/mosaicUtilities';
56 | export { MosaicWindow, MosaicWindowProps } from './MosaicWindow';
57 | export { createDefaultToolbarButton, DefaultToolbarButton, MosaicButtonProps } from './buttons/MosaicButton';
58 | export { MosaicZeroState, MosaicZeroStateProps } from './MosaicZeroState';
59 | export { Separator } from './buttons/Separator';
60 | export { ExpandButton } from './buttons/ExpandButton';
61 | export { ReplaceButton } from './buttons/ReplaceButton';
62 | export { SplitButton } from './buttons/SplitButton';
63 | export { RemoveButton } from './buttons/RemoveButton';
64 | export { DEFAULT_CONTROLS_WITH_CREATION, DEFAULT_CONTROLS_WITHOUT_CREATION } from './buttons/defaultToolbarControls';
65 |
--------------------------------------------------------------------------------
/styles/mosaic.less:
--------------------------------------------------------------------------------
1 | @import (reference) './mixins';
2 |
3 | @split-size: 6px;
4 |
5 | .mosaic {
6 | height: 100%;
7 | width: 100%;
8 |
9 | &,
10 | > * {
11 | box-sizing: border-box;
12 | }
13 |
14 | .mosaic-zero-state {
15 | @padding: @split-size;
16 | .absolute-fill(@padding, @padding, @padding, @padding);
17 | width: auto;
18 | height: auto;
19 | z-index: 1;
20 | }
21 | }
22 |
23 | .mosaic-root {
24 | @size: @split-size / 2;
25 | .absolute-fill(@size, @size, @size, @size);
26 | }
27 |
28 | .mosaic-split {
29 | position: absolute;
30 | z-index: 1;
31 | touch-action: none;
32 |
33 | &:hover {
34 | background: black;
35 | }
36 |
37 | .mosaic-split-line {
38 | position: absolute;
39 | }
40 |
41 | &.-row {
42 | margin-left: -@split-size / 2;
43 | width: @split-size;
44 | cursor: ew-resize;
45 |
46 | .mosaic-split-line {
47 | top: 0;
48 | bottom: 0;
49 | left: @split-size / 2;
50 | right: @split-size / 2;
51 | }
52 | }
53 |
54 | &.-column {
55 | margin-top: -@split-size / 2;
56 | height: @split-size;
57 | cursor: ns-resize;
58 |
59 | .mosaic-split-line {
60 | top: @split-size / 2;
61 | bottom: @split-size / 2;
62 | left: 0;
63 | right: 0;
64 | }
65 | }
66 | }
67 |
68 | .mosaic-tile {
69 | position: absolute;
70 | margin: @split-size / 2;
71 |
72 | > * {
73 | height: 100%;
74 | width: 100%;
75 | }
76 | }
77 |
78 | .split-percentages(@split-amount) {
79 | @amount: ~'calc(100% - ' @split-amount ~')';
80 | &.left {
81 | right: @amount;
82 | }
83 | &.right {
84 | left: @amount;
85 | }
86 | &.bottom {
87 | top: @amount;
88 | }
89 | &.top {
90 | bottom: @amount;
91 | }
92 | }
93 |
94 | .mosaic-drop-target {
95 | position: relative;
96 |
97 | &.drop-target-hover .drop-target-container {
98 | display: block;
99 | }
100 |
101 | &.mosaic > .drop-target-container .drop-target {
102 | .split-percentages(10px);
103 | }
104 |
105 | .drop-target-container {
106 | .absolute-fill();
107 | display: none;
108 |
109 | &.-dragging {
110 | display: block;
111 | }
112 |
113 | .drop-target {
114 | .absolute-fill();
115 | .split-percentages(30%);
116 | background: fade(black, 20%);
117 | border: 2px solid black;
118 | opacity: 0;
119 | z-index: 5;
120 |
121 | &.drop-target-hover {
122 | opacity: 1;
123 | .split-percentages(50%);
124 | }
125 | }
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 |
3 | references:
4 | js_deps_cache_key: &js_deps_cache_key v1-dependencies-{{ checksum "yarn.lock" }}
5 | workspace_root: &workspace_root .
6 | attach_workspace: &attach_workspace
7 | attach_workspace:
8 | at: *workspace_root
9 | jobs:
10 | build:
11 | docker:
12 | - image: circleci/node:gallium
13 | working_directory: ~/react-mosaic
14 | steps:
15 | - checkout
16 | - run:
17 | name: Install Yarn
18 | command: |
19 | curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.18
20 | export PATH="$HOME/.yarn/bin:$PATH"
21 | - restore_cache:
22 | keys:
23 | - *js_deps_cache_key
24 | - run: yarn install --frozen-lockfile
25 | - save_cache:
26 | paths:
27 | - node_modules
28 | - ~/.cache/yarn
29 | key: *js_deps_cache_key
30 | - run:
31 | name: Build
32 | command: yarn build
33 | - persist_to_workspace:
34 | root: *workspace_root
35 | paths:
36 | - .
37 | test:
38 | docker:
39 | - image: circleci/node:dubnium
40 | working_directory: ~/react-mosaic
41 | steps:
42 | - *attach_workspace
43 | - run: mkdir reports
44 | - run:
45 | name: Run unit tests
46 | command: yarn test:unit --reporter mocha-junit-reporter --reporter-options mochaFile=reports/mocha/test-results.xml
47 | - run:
48 | name: Lint
49 | command: yarn test:lint --format junit -o ./reports/tslint/tslint.xml
50 | - store_test_results:
51 | path: reports
52 | - store_artifacts:
53 | path: ./reports/mocha/test-results.xml
54 | - store_artifacts:
55 | path: ./reports/tslint/tslint.xml
56 | deploy:
57 | docker:
58 | - image: circleci/node:dubnium
59 | working_directory: ~/react-mosaic
60 | steps:
61 | - *attach_workspace
62 | - run:
63 | name: Publish
64 | command: |
65 | npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN
66 | npm publish
67 | workflows:
68 | version: 2
69 | build-test-deploy:
70 | jobs:
71 | - build:
72 | filters:
73 | tags:
74 | only: /^v.*/
75 | - test:
76 | requires:
77 | - build
78 | filters:
79 | tags:
80 | only: /^v.*/
81 | - deploy:
82 | requires:
83 | - test
84 | filters:
85 | tags:
86 | only: /^v.*/
87 | branches:
88 | ignore: /.*/
89 |
--------------------------------------------------------------------------------
/styles/mosaic-window.less:
--------------------------------------------------------------------------------
1 | @import (reference) 'mixins';
2 |
3 | .mosaic-window,
4 | .mosaic-preview {
5 | position: relative;
6 | display: flex;
7 | flex-direction: column;
8 | overflow: hidden;
9 | box-shadow: 0 0 1px fade(black, 20%);
10 |
11 | @toolbar-height: 30px;
12 | .mosaic-window-toolbar {
13 | z-index: 4;
14 | display: flex;
15 | justify-content: space-between;
16 | align-items: center;
17 | flex-shrink: 0;
18 | height: @toolbar-height;
19 | background: white;
20 | box-shadow: 0 1px 1px fade(black, 20%);
21 |
22 | &.draggable {
23 | cursor: move;
24 | }
25 | }
26 |
27 | .mosaic-window-title {
28 | display: flex;
29 | align-items: center;
30 | height: 100%;
31 | padding-left: 15px;
32 | flex: 1;
33 | text-overflow: ellipsis;
34 | white-space: nowrap;
35 | overflow: hidden;
36 | min-height: 18px;
37 | }
38 |
39 | .mosaic-window-controls {
40 | display: flex;
41 | height: 100%;
42 |
43 | .separator {
44 | @separator-height: 20px;
45 | height: @separator-height;
46 | border-left: 1px solid black;
47 | margin: (@toolbar-height - @separator-height)/2 4px;
48 | }
49 | }
50 |
51 | .mosaic-window-body {
52 | position: relative;
53 | flex: 1;
54 | height: 0;
55 | background: white;
56 | z-index: 1;
57 | overflow: hidden;
58 | }
59 |
60 | .mosaic-window-additional-actions-bar {
61 | .absolute-fill(@top: @toolbar-height; @bottom: initial);
62 | height: 0;
63 | overflow: hidden;
64 | background: white;
65 | justify-content: flex-end;
66 | display: flex;
67 | z-index: 3;
68 |
69 | .@{ns}-button {
70 | margin: 0;
71 |
72 | &:after {
73 | display: none;
74 | }
75 | }
76 | }
77 |
78 | .mosaic-window-body-overlay {
79 | .absolute-fill();
80 | opacity: 0;
81 | background: white;
82 | display: none;
83 | z-index: 2;
84 | }
85 |
86 | &.additional-controls-open {
87 | .mosaic-window-additional-actions-bar {
88 | height: @toolbar-height;
89 | }
90 | .mosaic-window-body-overlay {
91 | display: block;
92 | }
93 | }
94 |
95 | .mosaic-preview {
96 | height: 100%;
97 | width: 100%;
98 | position: absolute;
99 | z-index: 0;
100 | border: 1px solid black;
101 | max-height: 400px;
102 |
103 | .mosaic-window-body {
104 | display: flex;
105 | flex-direction: column;
106 | align-items: center;
107 | justify-content: center;
108 | }
109 |
110 | h4 {
111 | margin-bottom: 10px;
112 | }
113 | }
114 | }
115 |
116 | .mosaic:not(.mosaic-blueprint-theme) {
117 | .mosaic-default-control {
118 | &.close-button:before {
119 | content: 'Close';
120 | }
121 | &.split-button:before {
122 | content: 'Split';
123 | }
124 | &.replace-button:before {
125 | content: 'Replace';
126 | }
127 | &.expand-button:before {
128 | content: 'Expand';
129 | }
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/src/MosaicRoot.tsx:
--------------------------------------------------------------------------------
1 | import flatten from 'lodash/flatten';
2 | import React from 'react';
3 | import { MosaicContext } from './contextTypes';
4 | import { Split } from './Split';
5 | import { MosaicBranch, MosaicDirection, MosaicKey, MosaicNode, ResizeOptions, TileRenderer } from './types';
6 | import { BoundingBox } from './util/BoundingBox';
7 | import { isParent } from './util/mosaicUtilities';
8 |
9 | export interface MosaicRootProps
26 |
28 | No Windows Present
29 |
30 | {this.props.createNode && (
31 |
40 | )}
41 |
42 | {this.renderRecursively(root, BoundingBox.empty(), [])}
;
22 | }
23 |
24 | private renderRecursively(
25 | node: MosaicNode
42 | {this.props.renderTile(node, path)}
43 |
44 | );
45 | }
46 | }
47 |
48 | private renderSplit(
49 | direction: MosaicDirection,
50 | boundingBox: BoundingBox,
51 | splitPercentage: number,
52 | path: MosaicBranch[],
53 | ) {
54 | const { resize } = this.props;
55 | if (resize !== 'DISABLED') {
56 | return (
57 |
46 |
47 |
48 | );
49 | }
50 |
51 | componentDidMount() {
52 | this.rootElement.current!.addEventListener('touchstart', this.onMouseDown, TOUCH_EVENT_OPTIONS);
53 | }
54 |
55 | componentWillUnmount() {
56 | this.unbindListeners();
57 | if (this.rootElement.current) {
58 | this.rootElement.current.ownerDocument!.removeEventListener('touchstart', this.onMouseDown, TOUCH_EVENT_OPTIONS);
59 | }
60 | }
61 |
62 | private bindListeners() {
63 | if (!this.listenersBound) {
64 | this.rootElement.current!.ownerDocument!.addEventListener('mousemove', this.onMouseMove, true);
65 | this.rootElement.current!.ownerDocument!.addEventListener('touchmove', this.onMouseMove, TOUCH_EVENT_OPTIONS);
66 | this.rootElement.current!.ownerDocument!.addEventListener('mouseup', this.onMouseUp, true);
67 | this.rootElement.current!.ownerDocument!.addEventListener('touchend', this.onMouseUp, true);
68 | this.listenersBound = true;
69 | }
70 | }
71 |
72 | private unbindListeners() {
73 | if (this.rootElement.current) {
74 | this.rootElement.current.ownerDocument!.removeEventListener('mousemove', this.onMouseMove, true);
75 | this.rootElement.current.ownerDocument!.removeEventListener('touchmove', this.onMouseMove, TOUCH_EVENT_OPTIONS);
76 | this.rootElement.current.ownerDocument!.removeEventListener('mouseup', this.onMouseUp, true);
77 | this.rootElement.current.ownerDocument!.removeEventListener('touchend', this.onMouseUp, true);
78 | this.listenersBound = false;
79 | }
80 | }
81 |
82 | private computeStyle() {
83 | const { boundingBox, direction, splitPercentage } = this.props;
84 | const positionStyle = direction === 'column' ? 'top' : 'left';
85 | const absolutePercentage = BoundingBox.getAbsoluteSplitPercentage(boundingBox, splitPercentage, direction);
86 | return {
87 | ...BoundingBox.asStyles(boundingBox),
88 | [positionStyle]: `${absolutePercentage}%`,
89 | };
90 | }
91 |
92 | private onMouseDown = (event: React.MouseEvent
76 | {this.renderNavBar()}
77 |
78 | renderTile={(count, path) => (
79 | totalWindowCount + 1} />}
82 | value={this.state.currentNode}
83 | onChange={this.onChange}
84 | onRelease={this.onRelease}
85 | className={THEMES[this.state.currentTheme]}
86 | blueprintNamespace="bp4"
87 | />
88 |
89 |
150 |
186 | );
187 | }
188 | }
189 |
190 | interface ExampleWindowProps {
191 | count: number;
192 | path: MosaicBranch[];
193 | totalWindowCount: number;
194 | }
195 |
196 | const ExampleWindow = ({ count, path, totalWindowCount }: ExampleWindowProps) => {
197 | const adContainer = React.useRef
151 |
157 |
152 |
153 | react-mosaic v{version}
154 |
155 |
156 |
158 |
167 |
168 | Example Actions:
169 |
175 |
181 |
182 | 
183 |
184 |
185 | Custom Toolbar
: null}
222 | >
223 |
224 |
227 |
228 | );
229 | };
230 |
--------------------------------------------------------------------------------
/src/Mosaic.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import { DragDropManager } from 'dnd-core';
3 | import countBy from 'lodash/countBy';
4 | import keys from 'lodash/keys';
5 | import pickBy from 'lodash/pickBy';
6 | import { HTML5toTouch } from 'rdndmb-html5-to-touch';
7 | import React from 'react';
8 | import { DndProvider } from 'react-dnd';
9 | import { MultiBackend } from 'react-dnd-multi-backend';
10 | import { v4 as uuid } from 'uuid';
11 |
12 | import { MosaicContext, MosaicRootActions } from './contextTypes';
13 | import { MosaicRoot } from './MosaicRoot';
14 | import { MosaicZeroState } from './MosaicZeroState';
15 | import { RootDropTargets } from './RootDropTargets';
16 | import { MosaicKey, MosaicNode, MosaicPath, MosaicUpdate, ResizeOptions, TileRenderer } from './types';
17 | import { createExpandUpdate, createHideUpdate, createRemoveUpdate, updateTree } from './util/mosaicUpdates';
18 | import { getLeaves } from './util/mosaicUtilities';
19 |
20 | const DEFAULT_EXPAND_PERCENTAGE = 70;
21 |
22 | export interface MosaicBaseProps{`Window ${count}`}
225 | {count === 3 && } 226 |
136 | {this.renderTree()}
137 |
139 |
73 |
81 | ),
82 | renderToolbar: null,
83 | };
84 | static contextType = MosaicContext;
85 | context!: MosaicContext
74 |
76 | {title}
75 |
77 |
80 | {title}
78 | (this.rootElement = element)}
114 | >
115 | {this.renderToolbar()}
116 | ;
156 | return (
157 | ) => {
243 | const { connectDragSource } = this.props;
244 | return connectDragSource(connectedElements);
245 | };
246 |
247 | private readonly childContext: MosaicWindowContext = {
248 | blueprintNamespace: this.context.blueprintNamespace,
249 | mosaicWindowActions: {
250 | split: this.split,
251 | replaceWithNew: this.swap,
252 | setAdditionalControlsOpen: this.setAdditionalControlsOpen,
253 | getPath: this.getPath,
254 | connectDragSource: this.connectDragSource,
255 | },
256 | };
257 | }
258 |
259 | function ConnectedInternalMosaicWindow(props: InternalMosaicWindowProps) {
260 | const { mosaicActions, mosaicId } = useContext(MosaicContext);
261 |
262 | const [, connectDragSource, connectDragPreview] = useDrag({
263 | type: MosaicDragType.WINDOW,
264 | item: (_monitor): MosaicDragItem | null => {
265 | if (props.onDragStart) {
266 | props.onDragStart();
267 | }
268 | // TODO: Actually just delete instead of hiding
269 | // The defer is necessary as the element must be present on start for HTML DnD to not cry
270 | const hideTimer = defer(() => mosaicActions.hide(props.path));
271 | return {
272 | mosaicId,
273 | hideTimer,
274 | };
275 | },
276 | end: (item, monitor) => {
277 | const { hideTimer } = item;
278 | // If the hide call hasn't happened yet, cancel it
279 | window.clearTimeout(hideTimer);
280 |
281 | const ownPath = props.path;
282 | const dropResult: MosaicDropData = (monitor.getDropResult() || {}) as MosaicDropData;
283 | const { position, path: destinationPath } = dropResult;
284 | if (position != null && destinationPath != null && !isEqual(destinationPath, ownPath)) {
285 | mosaicActions.updateTree(createDragToUpdates(mosaicActions.getRoot()!, ownPath, destinationPath, position));
286 | if (props.onDragEnd) {
287 | props.onDragEnd('drop');
288 | }
289 | } else {
290 | // TODO: restore node from captured state
291 | mosaicActions.updateTree([
292 | {
293 | path: dropRight(ownPath),
294 | spec: {
295 | splitPercentage: {
296 | $set: undefined,
297 | },
298 | },
299 | },
300 | ]);
301 | if (props.onDragEnd) {
302 | props.onDragEnd('reset');
303 | }
304 | }
305 | },
306 | });
307 |
308 | const [{ isOver, draggedMosaicId }, connectDropTarget] = useDrop({
309 | accept: MosaicDragType.WINDOW,
310 | collect: (monitor: DropTargetMonitor) => ({
311 | isOver: monitor.isOver(),
312 | draggedMosaicId: monitor.getItem()?.mosaicId,
313 | }),
314 | });
315 | return (
316 | extends React.PureComponent> {
328 | render() {
329 | return {...(this.props as InternalMosaicWindowProps)} />;
330 | }
331 | }
332 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-mosaic
2 |
3 | [](https://circleci.com/gh/nomcopter/react-mosaic/tree/master)
4 | [](https://www.npmjs.com/package/react-mosaic-component)
5 |
6 | react-mosaic is a full-featured React Tiling Window Manager meant to give a user complete control over their workspace.
7 | It provides a simple and flexible API to tile arbitrarily complex react components across a user's view.
8 | react-mosaic is written in TypeScript and provides typings but can be used in JavaScript as well.
9 |
10 | The best way to see it is a simple [**Demo**](https://nomcopter.github.io/react-mosaic/).
11 |
12 | #### Screencast
13 |
14 | [](./screencast.gif)
15 |
16 | ## Usage
17 |
18 | The core of react-mosaic's operations revolve around the simple binary tree [specified by `MosaicNode`](./src/types.ts#L12).
19 | [`T`](./src/types.ts#L7) is the type of the leaves of the tree and is a `string` or a `number` that can be resolved to a `JSX.Element` for display.
20 |
21 | ### Installation
22 |
23 | 1. `yarn add react-mosaic-component`
24 | 1. Make sure `react-mosaic-component.css` is included on your page.
25 | 1. Import the `Mosaic` component and use it in your app.
26 | 1. (Optional) Install Blueprint
27 |
28 | ### Blueprint Theme
29 |
30 | Without a theme, Mosaic only loads the styles necessary for it to function -
31 | making it easier for the consumer to style it to match their own app.
32 |
33 | By default, Mosaic renders with the `mosaic-blueprint-theme` class.
34 | This uses the excellent [Blueprint](http://blueprintjs.com/) React UI Toolkit to provide a good starting state.
35 | It is recommended to at least start developing with this theme.
36 | To use it install Blueprint `yarn add @blueprintjs/core @blueprintjs/icons` and add their CSS to your page.
37 | Don't forget to set `blueprintNamespace` in `Mosaic` to the correct value for the version of Blueprint you are using.
38 |
39 | See [blueprint-theme.less](./styles/blueprint-theme.less) for an example of creating a theme.
40 |
41 | #### Blueprint Dark Theme
42 |
43 | Mosaic supports the Blueprint Dark Theme out of the box when rendered with the `mosaic-blueprint-theme bp3-dark` class.
44 |
45 | ### Examples
46 |
47 | #### Simple Tiling
48 |
49 | ##### app.css
50 |
51 | ```css
52 | html,
53 | body,
54 | #app {
55 | height: 100%;
56 | width: 100%;
57 | margin: 0;
58 | }
59 | ```
60 |
61 | ##### App.tsx
62 |
63 | ```tsx
64 | import { Mosaic } from 'react-mosaic-component';
65 |
66 | import 'react-mosaic-component/react-mosaic-component.css';
67 | import '@blueprintjs/core/lib/css/blueprint.css';
68 | import '@blueprintjs/icons/lib/css/blueprint-icons.css';
69 |
70 | import './app.css';
71 |
72 | const ELEMENT_MAP: { [viewId: string]: JSX.Element } = {
73 | a: `](./src/types.ts#L12).
101 |
102 | The user can resize these panes but there is no other advanced functionality.
103 | This example renders a simple tiled interface with one element on the left half, and two stacked elements on the right half.
104 | The user can resize these panes but there is no other advanced functionality.
105 |
106 | #### Drag, Drop, and other advanced functionality with `MosaicWindow`
107 |
108 | `MosaicWindow` is a component that renders a toolbar and controls around its children for a tile as well as providing full featured drag and drop functionality.
109 |
110 | ```tsx
111 | export type ViewId = 'a' | 'b' | 'c' | 'new';
112 |
113 | const TITLE_MAP: Record = {
114 | a: 'Left Window',
115 | b: 'Top Right Window',
116 | c: 'Bottom Right Window',
117 | new: 'New Window',
118 | };
119 |
120 | export const app = (
121 |
122 | renderTile={(id, path) => (
123 | path={path} createNode={() => 'new'} title={TITLE_MAP[id]}>
124 | {
170 | /**
171 | * Lookup function to convert `T` to a displayable `JSX.Element`
172 | */
173 | renderTile: TileRenderer;
174 | /**
175 | * Called when a user initiates any change to the tree (removing, adding, moving, resizing, etc.)
176 | */
177 | onChange?: (newNode: MosaicNode | null) => void;
178 | /**
179 | * Called when a user completes a change (fires like above except for the interpolation during resizing)
180 | */
181 | onRelease?: (newNode: MosaicNode | null) => void;
182 | /**
183 | * Additional classes to affix to the root element
184 | * Default: 'mosaic-blueprint-theme'
185 | */
186 | className?: string;
187 | /**
188 | * Options that control resizing
189 | * @see: [[ResizeOptions]]
190 | */
191 | resize?: ResizeOptions;
192 | /**
193 | * View to display when the current value is `null`
194 | * default: Simple NonIdealState view
195 | */
196 | zeroStateView?: JSX.Element;
197 | /**
198 | * Override the mosaicId passed to `react-dnd` to control how drag and drop works with other components
199 | * Note: does not support updating after instantiation
200 | * default: Random UUID
201 | */
202 | mosaicId?: string;
203 | /**
204 | * Make it possible to use different versions of Blueprint with `mosaic-blueprint-theme`
205 | * Note: does not support updating after instantiation
206 | * default: 'bp3'
207 | */
208 | blueprintNamespace?: string;
209 | /**
210 | * Override the react-dnd provider to allow applications to inject an existing drag and drop context
211 | */
212 | dragAndDropManager?: DragDropManager | undefined;
213 | }
214 |
215 | export interface MosaicControlledProps extends MosaicBaseProps {
216 | /**
217 | * The tree to render
218 | */
219 | value: MosaicNode | null;
220 | onChange: (newNode: MosaicNode | null) => void;
221 | }
222 |
223 | export interface MosaicUncontrolledProps extends MosaicBaseProps {
224 | /**
225 | * The initial tree to render, can be modified by the user
226 | */
227 | initialValue: MosaicNode | null;
228 | }
229 |
230 | export type MosaicProps = MosaicControlledProps | MosaicUncontrolledProps;
231 | ```
232 |
233 | #### `MosaicWindow`
234 |
235 | ```typescript
236 | export interface MosaicWindowProps {
237 | title: string;
238 | /**
239 | * Current path to this window, provided by `renderTile`
240 | */
241 | path: MosaicBranch[];
242 | className?: string;
243 | /**
244 | * Controls in the top right of the toolbar
245 | * default: [Replace, Split, Expand, Remove] if createNode is defined and [Expand, Remove] otherwise
246 | */
247 | toolbarControls?: React.ReactNode;
248 | /**
249 | * Additional controls that will be hidden in a drawer beneath the toolbar.
250 | * default: []
251 | */
252 | additionalControls?: React.ReactNode;
253 | /**
254 | * Label for the button that expands the drawer
255 | */
256 | additionalControlButtonText?: string;
257 | /**
258 | * A callback that triggers when a user toggles the additional controls
259 | */
260 | onAdditionalControlsToggle?: (toggle: boolean) => void;
261 | /**
262 | * Disables the overlay that blocks interaction with the window when additional controls are open
263 | */
264 | disableAdditionalControlsOverlay?: boolean;
265 | /**
266 | * Whether or not a user should be able to drag windows around
267 | */
268 | draggable?: boolean;
269 | /**
270 | * Method called when a new node is required (such as the Split or Replace buttons)
271 | */
272 | createNode?: CreateNode;
273 | /**
274 | * Optional method to override the displayed preview when a user drags a window
275 | */
276 | renderPreview?: (props: MosaicWindowProps) => JSX.Element;
277 | /**
278 | * Optional method to override the displayed toolbar
279 | */
280 | renderToolbar?: ((props: MosaicWindowProps, draggable: boolean | undefined) => JSX.Element) | null;
281 | /**
282 | * Optional listener for when the user begins dragging the window
283 | */
284 | onDragStart?: () => void;
285 | /**
286 | * Optional listener for when the user finishes dragging a window.
287 | */
288 | onDragEnd?: (type: 'drop' | 'reset') => void;
289 | }
290 | ```
291 |
292 | The default controls rendered by `MosaicWindow` can be accessed from [`defaultToolbarControls`](./src/buttons/defaultToolbarControls.tsx)
293 |
294 | ### Advanced API
295 |
296 | The above API is good for most consumers, however Mosaic provides functionality on the [Context](https://facebook.github.io/react/docs/context.html) of its children that make it easier to alter the view state.
297 | All leaves rendered by Mosaic will have the following available on React context.
298 | These are used extensively by `MosaicWindow`.
299 |
300 | ```typescript
301 | /**
302 | * Valid node types
303 | * @see React.Key
304 | */
305 | export type MosaicKey = string | number;
306 | export type MosaicBranch = 'first' | 'second';
307 | export type MosaicPath = MosaicBranch[];
308 |
309 | /**
310 | * Context provided to everything within Mosaic
311 | */
312 | export interface MosaicContext {
313 | mosaicActions: MosaicRootActions;
314 | mosaicId: string;
315 | }
316 |
317 | export interface MosaicRootActions {
318 | /**
319 | * Increases the size of this node and bubbles up the tree
320 | * @param path Path to node to expand
321 | * @param percentage Every node in the path up to root will be expanded to this percentage
322 | */
323 | expand: (path: MosaicPath, percentage?: number) => void;
324 | /**
325 | * Remove the node at `path`
326 | * @param path
327 | */
328 | remove: (path: MosaicPath) => void;
329 | /**
330 | * Hide the node at `path` but keep it in the DOM. Used in Drag and Drop
331 | * @param path
332 | */
333 | hide: (path: MosaicPath) => void;
334 | /**
335 | * Replace currentNode at `path` with `node`
336 | * @param path
337 | * @param node
338 | */
339 | replaceWith: (path: MosaicPath, node: MosaicNode) => void;
340 | /**
341 | * Atomically applies all updates to the current tree
342 | * @param updates
343 | * @param suppressOnRelease (default: false)
344 | */
345 | updateTree: (updates: MosaicUpdate[], suppressOnRelease?: boolean) => void;
346 | /**
347 | * Returns the root of this Mosaic instance
348 | */
349 | getRoot: () => MosaicNode | null;
350 | }
351 | ```
352 |
353 | Children (and toolbar elements) within `MosaicWindow` are passed the following additional functions on context.
354 |
355 | ```typescript
356 | export interface MosaicWindowContext extends MosaicContext {
357 | mosaicWindowActions: MosaicWindowActions;
358 | }
359 |
360 | export interface MosaicWindowActions {
361 | /**
362 | * Fails if no `createNode()` is defined
363 | * Creates a new node and splits the current node.
364 | * The current node becomes the `first` and the new node the `second` of the result.
365 | * `direction` is chosen by querying the DOM and splitting along the longer axis
366 | */
367 | split: () => Promise;
368 | /**
369 | * Fails if no `createNode()` is defined
370 | * Convenience function to call `createNode()` and replace the current node with it.
371 | */
372 | replaceWithNew: () => Promise;
373 | /**
374 | * Sets the open state for the tray that holds additional controls.
375 | * Pass 'toggle' to invert the current state.
376 | */
377 | setAdditionalControlsOpen: (open: boolean | 'toggle') => void;
378 | /**
379 | * Returns the path to this window
380 | */
381 | getPath: () => MosaicPath;
382 | /**
383 | * Enables connecting a different drag source besides the react-mosaic toolbar
384 | */
385 | connectDragSource: (connectedElements: React.ReactElement) => React.ReactElement;
386 | }
387 | ```
388 |
389 | To access the functions simply use the [`MosaicContext`](./src/contextTypes.ts#L90)
390 | or [`MosaicWindowContext`](./src/contextTypes.ts#L91) [context consumers](https://reactjs.org/docs/context.html#contextconsumer).
391 |
392 | ### Mutating the Tree
393 |
394 | Utilities are provided for working with the MosaicNode tree in [`mosaicUtilities`](src/util/mosaicUtilities.ts) and
395 | [`mosaicUpdates`](src/util/mosaicUpdates.ts)
396 |
397 | #### MosaicUpdate
398 |
399 | [`MosaicUpdateSpec`](./src/types.ts#L33) is an argument meant to be passed to [`immutability-helper`](https://github.com/kolodny/immutability-helper)
400 | to modify the state at a path.
401 | [`mosaicUpdates`](src/util/mosaicUpdates.ts) has examples.
402 |
403 | ## Upgrade Considerations / Changelog
404 |
405 | See [Releases](https://github.com/nomcopter/react-mosaic/releases)
406 |
407 | ## License
408 |
409 | Copyright 2019 Kevin Verdieck, originally developed at Palantir Technologies, Inc.
410 |
411 | Licensed under the Apache License, Version 2.0 (the "License");
412 | you may not use this file except in compliance with the License.
413 | You may obtain a copy of the License at
414 |
415 | http://www.apache.org/licenses/LICENSE-2.0
416 |
417 | Unless required by applicable law or agreed to in writing, software
418 | distributed under the License is distributed on an "AS IS" BASIS,
419 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
420 | See the License for the specific language governing permissions and
421 | limitations under the License.
422 |
--------------------------------------------------------------------------------
{this.props.children}
117 | {!disableAdditionalControlsOverlay && (
118 | {
121 | this.setAdditionalControlsOpen(false);
122 | }}
123 | />
124 | )}
125 |
,
131 | )}
132 |
133 | );
134 | }
135 |
136 | private getToolbarControls() {
137 | const { toolbarControls, createNode } = this.props;
138 | if (toolbarControls) {
139 | return toolbarControls;
140 | } else if (createNode) {
141 | return DEFAULT_CONTROLS_WITH_CREATION;
142 | } else {
143 | return DEFAULT_CONTROLS_WITHOUT_CREATION;
144 | }
145 | }
146 |
147 | private renderToolbar() {
148 | const { title, draggable, additionalControls, additionalControlButtonText, path, renderToolbar } = this.props;
149 | const { additionalControlsOpen } = this.state;
150 | const toolbarControls = this.getToolbarControls();
151 | const draggableAndNotRoot = draggable && path.length > 0;
152 | const connectIfDraggable = draggableAndNotRoot ? this.props.connectDragSource : (el: React.ReactElement) => el;
153 |
154 | if (renderToolbar) {
155 | const connectedToolbar = connectIfDraggable(renderToolbar(this.props, draggable)) as React.ReactElement{additionalControls}
126 | {connectDragPreview(renderPreview!(this.props))}
127 |
128 | {values(MosaicDropTargetPosition).map(this.renderDropTarget)}
129 |
130 |
158 | {connectedToolbar}
159 |
160 | );
161 | }
162 |
163 | const titleDiv = connectIfDraggable(
164 |
165 | {title}
166 |
,
167 | )!;
168 |
169 | const hasAdditionalControls = !isEmpty(additionalControls);
170 |
171 | return (
172 |
173 | {titleDiv}
174 |
193 | );
194 | }
195 |
196 | private renderDropTarget = (position: MosaicDropTargetPosition) => {
197 | const { path } = this.props;
198 |
199 | return
175 | {hasAdditionalControls && (
176 |
188 | )}
189 | {hasAdditionalControls &&
192 | Left Window
,
74 | b: Top Right Window
,
75 | c: Bottom Right Window
,
76 | };
77 |
78 | export const app = (
79 |
80 |
81 | renderTile={(id) => ELEMENT_MAP[id]}
82 | initialValue={{
83 | direction: 'row',
84 | first: 'a',
85 | second: {
86 | direction: 'column',
87 | first: 'b',
88 | second: 'c',
89 | },
90 | splitPercentage: 40,
91 | }}
92 | />
93 |
94 | );
95 | ```
96 |
97 | `renderTile` is a stateless lookup function to convert `T` into a displayable `JSX.Element`.
98 | By default `T` is `string` (so to render one element `initialValue="ID"` works).
99 | `T`s must be unique within an instance of `Mosaic`, they are used as keys for [React list management](https://reactjs.org/docs/lists-and-keys.html).
100 | `initialValue` is a [`MosaicNode