Commit 5bf11131 authored by Pierre Marchand's avatar Pierre Marchand

[client/geothermie] connectors - act 2wq

parent 854b9cf4
......@@ -20,6 +20,7 @@ import {
import renderText from './text';
import { rect } from 'sdi/app';
import { setDiagramHeight } from '../events/geothermie';
import renderConnect from './table/connect';
// import { tr } from 'sdi/locale';
// tslint:disable-next-line:variable-name
......@@ -57,16 +58,16 @@ const renderOutRegion = () =>
);
const renderGeothermie = (...node: ReactNode[]) =>
DIV(
{ className: 'geo-output', ref: rectify },
renderGeoSidebar(),
isOutRegion() ? renderOutRegion() :
DIV(
{ className: 'content' },
renderPaginator(),
DIV({ className: 'content--body' }, ...node)
)
);
DIV(
{ className: 'geo-output', ref: rectify },
renderGeoSidebar(),
isOutRegion() ? renderOutRegion() :
DIV(
{ className: 'content' },
renderPaginator(),
DIV({ className: 'content--body' }, ...node)
)
);
export const general = () =>
renderGeothermie(renderDepthTable(), renderCarrot(), renderText());
......@@ -75,23 +76,24 @@ export const license = () =>
renderGeothermie(renderDepthTable(), renderCarrot(), renderText());
export const geology = () =>
getSystem().map(sys => {
if (sys === 'close') {
return renderGeothermie(
renderLeftCloseTable(),
// renderConnect('close-carrot'),
renderCarrot(),
// renderConnect('carrot-conductivity'),
renderRightCloseTable()
);
} else {
return renderGeothermie(
renderLeftOpenTable(),
renderCarrot(),
renderRightOpenTable()
);
}
});
getSystem().map((sys) => {
if (sys === 'close') {
return renderGeothermie(
renderLeftCloseTable(),
renderConnect('close', 'carrot'),
renderCarrot(),
renderConnect('carrot', 'conductivity'),
renderRightCloseTable()
);
}
else {
return renderGeothermie(
renderLeftOpenTable(),
renderCarrot(),
renderRightOpenTable()
);
}
});
export const finance = () => renderGeothermie(renderText());
......
/**
* Connect create a component that links 2 sets of offsets
*/
import { createElement as svg } from 'react';
import * as debug from 'debug';
import { getConnect } from 'geothermie/src/queries/geothermie';
import { DIV } from 'sdi/components/elements';
import { DIV, CANVAS } from 'sdi/components/elements';
import { updateConnect } from 'geothermie/src/events/geothermie';
import { pair, fst, snd } from 'sdi/lib';
import { scopeOption } from 'sdi/lib';
import { rect } from 'sdi/app';
import { none, some } from 'fp-ts/lib/Option';
import { fromNullable } from 'fp-ts/lib/Option';
type DOMProperties = { [key: string]: any };
const logger = debug('sdi:connect');
export type ConnectName =
| 'height-carrot'
| 'close-carrot'
| 'carrot-conductivity'
| 'conductivity-comment'
| 'open-carrot'
| 'carrot-open'
| 'geology-carrot'
| 'carrot-hydrology'
| 'carrot'
| 'depth'
| 'close'
| 'conductivity'
| 'comment'
| 'open'
| 'geology'
| 'hydrology'
;
export interface ConnectData {
left: number[];
right: number[];
width: number;
height: number;
offset: number;
heights: number[];
}
export const defaultConnect = (): ConnectData => ({
left: [],
right: [],
width: 10,
height: 10,
})
offset: 75,
heights: [],
});
export const rectifyConnect = (
......@@ -43,22 +41,10 @@ export const rectifyConnect = (
) => updateConnect(name, f);
export const rectifyLeft = (
name: ConnectName,
left: number[],
) => rectifyConnect(name, data => ({ ...data, left }));
export const rectifyRight = (
export const rectifySizes = (
name: ConnectName,
right: number[],
) => rectifyConnect(name, data => ({ ...data, right }));
export const rectifyGeometry = (
name: ConnectName,
width: number,
height: number,
) => rectifyConnect(name, data => ({ ...data, width, height }));
sizes: number[],
) => rectifyConnect(name, data => ({ ...data, sizes }));
const zip = <A, B>(
......@@ -75,74 +61,135 @@ const zip = <A, B>(
};
const container = (
width: number,
height: number,
...children: React.ReactSVGElement[]
) =>
svg(
'svg', {
viewBox: `0 0 ${width} ${height}`
}, ...children);
export const line = (
ctx: CanvasRenderingContext2D,
x1: number,
y1: number,
x2: number,
y2: number,
properties = {} as DOMProperties,
) =>
svg('line', { x1, y1, x2, y2, ...properties });
) => {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(
x1 + ((x2 - x1) * 0.5), y1, // control point 1
x1 + ((x2 - x1) * 0.5), y2, // control point 2
x2, y2, // end point
);
ctx.stroke();
};
export const accumulate = (
ns: number[],
init = 0,
) =>
fst(ns.reduce(
(acc, n) => pair(fst(acc).concat(snd(acc) + n), n),
pair([] as number[], init),
));
ns.reduce(
(acc, n) => {
const last = acc[acc.length - 1];
return acc.concat(last + n);
},
[init],
);
const renderConnectData = (
{ width, height, left, right }: ConnectData,
ctx: CanvasRenderingContext2D,
left: ConnectData,
right: ConnectData,
width: number,
) => {
// if (left.length === 0 || right.length === 0) {
if (true) {
return none
if (left.heights.length === 0 || right.heights.length === 0) {
return;
}
const accLeft = accumulate(left)
const accRight = accumulate(right)
const maxLeft = accLeft[accLeft.length - 1];
const maxRight = accRight[accRight.length - 1];
const scaleLeft = (y: number) => y * height / maxLeft;
const scaleRight = (y: number) => y * height / maxRight;
const lines =
zip(accLeft, accRight)
.map(([left, right]) => line(
0, scaleLeft(left),
width, scaleRight(right),
{ stroke: 'black' }));
return some(container(width, height, ...lines));
const accLeft = accumulate(left.heights, left.offset);
const accRight = accumulate(right.heights, right.offset);
// const maxLeft = accLeft[accLeft.length - 1];
// const maxRight = accRight[accRight.length - 1];
// const scaleLeft = (y: number) => y * height / maxLeft;
// const scaleRight = (y: number) => y * height / maxRight;
const zipped = zip(accLeft, accRight);
zipped.map(([left, right]) => line(
ctx,
0, left,
width, right));
};
const geometry = (
name: ConnectName,
) => rect((r) => {
rectifyGeometry(name, r.width, r.height);
});
const onMount = (
left: ConnectName,
right: ConnectName,
canvas: HTMLCanvasElement,
) => {
let { width, height } = canvas.getBoundingClientRect();
canvas.width = width;
canvas.height = height;
const draw = () => {
const ctx = canvas.getContext('2d');
if (ctx) {
scopeOption()
.let('left', getConnect(left))
.let('right', getConnect(right))
.map(({ left, right }) => renderConnectData(ctx, left, right, width));
}
};
rect((r) => {
if (
Math.floor(width) !== Math.floor(r.width)
&& Math.floor(height) !== Math.floor(r.height)
) {
width = r.width;
height = r.height;
canvas.width = width;
canvas.height = height;
draw();
}
})(canvas);
draw();
};
const onUnMount = (
_left: ConnectName,
_right: ConnectName,
) => {
// TODO
};
const ref = (
left: ConnectName,
right: ConnectName,
) => (
canvas: HTMLCanvasElement | null,
) => fromNullable(canvas)
.foldL(
() => onUnMount(left, right),
canvas => onMount(left, right, canvas),
);
export const renderConnect = (
name: ConnectName,
left: ConnectName,
right: ConnectName,
) => DIV(
{
className: `connect ${name}`,
ref: geometry(name)
},
getConnect(name).chain(renderConnectData));
CANVAS({
ref: ref(left, right),
style: {
width: '100%',
height: '100%',
},
}));
export default renderConnect;
logger('loaded');
......@@ -15,6 +15,8 @@ import { renderNoTableLine, computeLineHeight, getLayersDepths, keyAndTrad } fro
import { renderDepthTitle, renderDepthCol } from './table-depth';
import renderGraph from './graph';
import { rect } from 'sdi/app';
import { fromNullable } from 'fp-ts/lib/Option';
import { updateConnect } from 'geothermie/src/events/geothermie';
// import { rectifyRight, rectifyLeft } from './connect';
......@@ -25,7 +27,7 @@ const getSatConductivity = () => SAT_CONDUCTIVITY;
const getUS = () =>
STRATIGRAPHY_UNITS_NAME.map(u =>
u === 'US/RBC_1' ? keyAndTrad('US/RBC 11-14'): keyAndTrad(u)
u === 'US/RBC_1' ? keyAndTrad('US/RBC 11-14') : keyAndTrad(u)
);
......@@ -78,8 +80,7 @@ const getDrySatLayersDepths =
const renderLeftCloseTableLine =
(l: number, index: number) =>
l === 0 ? renderNoTableLine() : TR({
className: '',
style: { height: computeLineHeight(l) + '%' },
className: 'closed-tr',
key: index
},
TD({ className: 'large' }, ''),
......@@ -88,9 +89,12 @@ const renderLeftCloseTableLine =
);
const rectifyLeftTable = rect((_r, el) => {
const hs = [...el.children].map(c => c.getBoundingClientRect().height);
logger(`rectifyLeftTable`, hs);
// rectifyLeft('close-carrot', hs);
const offset = fromNullable(el.querySelector('.close-thead')).map(h => h.clientHeight).getOrElse(0)
fromNullable(el.querySelector('.close-tbody'))
.map((tbody) => {
const heights = [...tbody.children].map(c => c.clientHeight);
updateConnect('close', () => ({ offset, heights }))
})
});
export const renderLeftCloseTable =
......@@ -98,8 +102,11 @@ export const renderLeftCloseTable =
getLayersThicknesses().fold(
NODISPLAY(),
thicknesses => DIV({ className: '~table--close' },
TABLE({ style: { height: getDiagramHeight() } },
THEAD({},
TABLE({
// style: { height: getDiagramHeight() }
ref: rectifyLeftTable
},
THEAD({ className: 'close-thead' },
TR({},
TH({}, tr.geo('closeTableColRemark')),
TH({}, tr.geo('closeTableColUS')),
......@@ -107,7 +114,7 @@ export const renderLeftCloseTable =
),
),
TBODY({
ref: rectifyLeftTable
className: 'close-tbody'
},
...thicknesses.map((l, i) => renderLeftCloseTableLine(l, i))
)
......@@ -154,15 +161,19 @@ export const renderRightCloseTable =
className: 'table--conductivity',
key: 'table--conductivity',
},
TABLE({ style: { height: getDiagramHeight() } },
THEAD({},
TABLE({
style: {
// height: getDiagramHeight(),
},
ref: rectifyConductivity,
},
THEAD({ className: 'conductivity-thead' },
TR({},
TH({}, tr.geo('closeTableColCond')),
),
),
TBODY({
className: 'table--conductivity--stauration--body',
ref: rectifyConductivity
},
...thicknesses.map((l, i) => [
renderDryLine(l, i),
......
......@@ -12,7 +12,6 @@ import { fromNullable } from 'fp-ts/lib/Option';
import { CakeMode } from '../components/cake';
import {
getMoreTextHiddenArray,
getLayersThicknesses
} from '../queries/geothermie';
import { MoreTextHidden } from '../components/table/format';
import {
......@@ -73,7 +72,6 @@ export const setXY = (x: number, y: number) => assign('geo/xy', { x, y });
export const setDataPoint = (d: DepthPoint) => {
assign('geo/data/point', d);
updateCarrotConnect();
};
export const setDataConstraint = (c: ConstraintPoint) =>
......@@ -131,30 +129,6 @@ export const updateConnect = (
)
);
const updateCarrotConnect = () => {
const csnLeft: ConnectName[] = [
'carrot-conductivity',
'carrot-hydrology',
'carrot-open'
];
const csnRight: ConnectName[] = [
'close-carrot',
'geology-carrot',
'height-carrot',
'open-carrot'
];
getLayersThicknesses().map(ts => {
csnLeft.map(n => updateConnect(n, d => ({ ...d, left: ts.concat() })));
csnRight.map(n =>
updateConnect(n, d => ({ ...d, right: ts.concat() }))
);
});
dispatch('geo/connect', c => {
console.log(c);
return c;
});
};
export const setDiagramHeight = (n: number) => assign('geo/diagram/height', n);
......@@ -33,6 +33,8 @@ table {
border-bottom: none;
}
}
line-height: 1em;
height: 6em;
}
td {
border: 1px solid @borderDarkColor;
......@@ -43,11 +45,12 @@ table {
min-width: 180px;
}
&.depth {
border-bottom: none;
border-top: none;
// border-bottom: none;
// border-top: none;
vertical-align: bottom;
position: relative;
bottom: -12px; /* hack for offsetting the depth values */
line-height: initial;
// position: relative;
// bottom: -12px; /* hack for offsetting the depth values */
}
&.saturated {
background-color: lightblue;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment