Commit 33c8050e authored by pacome's avatar pacome

[client/geothermie] added buttons and scale on 3d

parent d9f7de4e
......@@ -10,7 +10,7 @@ import { rect } from 'sdi/app';
import './legend';
export type CakeMode = 'left-cut' | 'right-cut' | 'full-piece';
export type CakeMode = 'left-cut' | 'right-cut' | 'uncut' | 'double-cut';
const { onCanvas } = engine();
......@@ -30,14 +30,33 @@ const attachEngine = (node: Nullable<HTMLCanvasElement>) => {
}
};
const verticalScale = () =>
DIV(
{
className: 'map-scale--vertical'
},
DIV(
{
className: 'map-scale-line',
style: {
height: '150px'
}
},
DIV({ className: 'quarter' }),
DIV({ className: 'quarter' }),
DIV({ className: 'half' })
),
DIV({ className: 'map-scale-label' }, '~depth')
);
const buttonClass = (m: CakeMode) =>
`geo-btn geo-btn--2 geo-btn--icon geo-btn--${m} ${
getCakeMode() === m ? 'active' : ''
}`;
const buttonSlice = () =>
const buttonLeftSlice = () =>
divTooltipTop(
'~slice',
'~LeftSlice',
{
onClick: () => setCakeMode('left-cut')
},
......@@ -48,26 +67,36 @@ const buttonDoubleSlice = () =>
divTooltipTop(
'~doubleSlice',
{
onClick: () => setCakeMode('full-piece')
onClick: () => setCakeMode('double-cut')
},
DIV({ className: buttonClass('full-piece') })
DIV({ className: buttonClass('double-cut') })
);
const buttonNoSlice = () =>
const buttonRightSlice = () =>
divTooltipTop(
'~noSlice',
'~RightSlice',
{
onClick: () => setCakeMode('right-cut')
},
DIV({ className: buttonClass('right-cut') })
);
const buttonNoSlice = () =>
divTooltipTop(
'~noSlice',
{
onClick: () => setCakeMode('uncut')
},
DIV({ className: buttonClass('uncut') })
);
const toolbar3D = () =>
DIV(
{ className: 'toolbar--3D' },
buttonSlice(),
buttonNoSlice(),
buttonLeftSlice(),
buttonDoubleSlice(),
buttonNoSlice()
buttonRightSlice()
);
export const renderCake = () => {
......@@ -83,6 +112,7 @@ export const renderCake = () => {
left: 0
}
},
verticalScale(),
toolbar3D(),
CANVAS({
ref: attachEngine,
......
......@@ -42,33 +42,34 @@ declare module 'sdi/shape' {
}
}
export const defaultGeothermieShape =
() => ({
'geo/name': 'Geothermie',
'geo/xy': null,
'geo/address': null,
'geo/system': 'close' as System,
'geo/cake/render': true,
'geo/cake/mode': 'full-piece' as CakeMode,
'geo/data/point': null,
'geo/data/constraint': null,
'geo/map/top': null,
'geo/map/bottom': null,
'geo/display/maps/separator': 'bottom' as DisplayMapsSeparator,
'geo/display/dataswitch': false,
'geo/tiles': {},
'geo/graph/xy': null,
'geo/graph/snap-xy': null,
'geo/diagram/height': 10, // px
'geo/diagram/graph-width': 160, // px
'geo/diagram/carrot-width': 260, // px
'geo/table/text-hidden': { detailledLithology: Array(100).fill(true) } as MoreTextHidden,
'geo/legend/group/visibility': {},
'geo/connect': {},
});
export const defaultGeothermieShape = () => ({
'geo/name': 'Geothermie',
'geo/xy': null,
'geo/address': null,
'geo/system': 'close' as System,
'geo/cake/render': true,
'geo/cake/mode': 'uncut' as CakeMode,
'geo/data/point': null,
'geo/data/constraint': null,
'geo/map/top': null,
'geo/map/bottom': null,
'geo/display/maps/separator': 'bottom' as DisplayMapsSeparator,
'geo/display/dataswitch': false,
'geo/tiles': {},
'geo/graph/xy': null,
'geo/graph/snap-xy': null,
'geo/diagram/height': 10, // px
'geo/diagram/graph-width': 160, // px
'geo/diagram/carrot-width': 260, // px
'geo/table/text-hidden': {
detailledLithology: Array(100).fill(true)
} as MoreTextHidden,
'geo/legend/group/visibility': {},
'geo/connect': {}
});
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 42.464735 42.464734"
version="1.1"
id="svg37"
sodipodi:docname="angle-no-cut-off.svg"
width="42.464733"
height="42.464733"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata41">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>angle-left-on</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1024"
id="namedview39"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="19.62578"
inkscape:cx="13.444213"
inkscape:cy="21.44597"
inkscape:window-x="1920"
inkscape:window-y="28"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1-2" />
<defs
id="defs7">
<style
id="style2">.cls-1,.cls-5,.cls-6{fill:none;}.cls-2{fill:#8db63c;}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:#fff;}.cls-5{stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.17px;}.cls-6{stroke:#fff;stroke-width:3px;}</style>
<clipPath
id="clip-path"
transform="translate(3.55)">
<path
class="cls-1"
d="M 21.23,1.5 A 19.73,19.73 0 1 0 41,21.23 19.73,19.73 0 0 0 21.23,1.5 Z"
id="path4"
inkscape:connector-curvature="0"
style="fill:none" />
</clipPath>
</defs>
<title
id="title9">angle-left-on</title>
<g
id="Layer_2"
data-name="Layer 2"
transform="translate(-3.5491133,-1.2097794e-4)">
<g
id="Layer_1-2"
data-name="Layer 1">
<g
class="cls-3"
clip-path="url(#clip-path)"
id="g31"
transform="translate(2)">
<polygon
class="cls-4"
points="14.13,19.91 14.13,25.25 24.78,31.4 24.78,26.06 "
id="polygon25"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="14.13,19.91 14.13,25.25 24.78,31.4 24.78,26.06 "
id="polygon27"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
<g
id="g1022"
transform="translate(-2)">
<g
id="g831-0">
<polygon
class="cls-4"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon13-1"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon15-9"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6"
transform="translate(10.65,6.15)">
<polygon
class="cls-4"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon13-1-2"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon15-9-1"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-2"
transform="translate(-10.65,6.15)">
<polygon
class="cls-4"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon13-1-0"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon15-9-7"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3"
transform="translate(0,12.3)">
<polygon
class="cls-4"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon13-1-2-1"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon15-9-1-1"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-2-2"
transform="translate(-21.3,12.3)">
<polygon
class="cls-4"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon13-1-0-1"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon15-9-7-2"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3-0"
transform="translate(-10.650001,18.45)">
<polygon
class="cls-4"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon13-1-2-1-7"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon15-9-1-1-3"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-2"
transform="translate(21.3,12.3)">
<polygon
class="cls-4"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon13-1-2-6"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon15-9-1-4"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3-5"
transform="translate(10.65,18.45)">
<polygon
class="cls-4"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon13-1-2-1-2"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon15-9-1-1-0"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3-0-2"
transform="translate(-2e-7,24.6)">
<polygon
class="cls-4"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon13-1-2-1-7-9"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon15-9-1-1-3-0"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
</g>
</g>
<circle
class="cls-6"
cx="21.23"
cy="21.23"
r="19.73"
transform="rotate(-10.9,23.018774,2.6192504)"
id="circle33"
style="fill:none;stroke:#ffffff;stroke-width:3px" />
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 42.464735 42.464734"
version="1.1"
id="svg37"
sodipodi:docname="angle-no-cut-on.svg"
width="42.464733"
height="42.464733"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata41">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>angle-left-on</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1024"
id="namedview39"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="19.62578"
inkscape:cx="13.444213"
inkscape:cy="21.44597"
inkscape:window-x="1920"
inkscape:window-y="28"
inkscape:window-maximized="1"
inkscape:current-layer="g1022" />
<defs
id="defs7">
<style
id="style2">.cls-1,.cls-5,.cls-6{fill:none;}.cls-2{fill:#8db63c;}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:#fff;}.cls-5{stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.17px;}.cls-6{stroke:#fff;stroke-width:3px;}</style>
<clipPath
id="clip-path"
transform="translate(3.55)">
<path
class="cls-1"
d="M 21.23,1.5 A 19.73,19.73 0 1 0 41,21.23 19.73,19.73 0 0 0 21.23,1.5 Z"
id="path4"
inkscape:connector-curvature="0"
style="fill:none" />
</clipPath>
</defs>
<title
id="title9">angle-left-on</title>
<g
id="Layer_2"
data-name="Layer 2"
transform="translate(-3.5491133,-1.2097794e-4)">
<g
id="Layer_1-2"
data-name="Layer 1">
<path
class="cls-2"
d="m 21.23,41 c 5.562673,-1.1e-5 10.246742,-2.128446 13.65707,-5.432173 C 42.247903,28.437079 43.674805,15.831029 35.194591,7.3336226 22.785432,-5.1006944 1.5356191,3.6609195 1.5,21.23 1.4778769,32.142196 10.317782,41.000022 21.23,41"
transform="translate(3.55)"
id="path11"
inkscape:connector-curvature="0"
style="fill:#8db63c"
sodipodi:nodetypes="csssc" />
<g
class="cls-3"
clip-path="url(#clip-path)"
id="g31"
transform="translate(2)">
<polygon
class="cls-4"
points="14.13,19.91 14.13,25.25 24.78,31.4 24.78,26.06 "
id="polygon25"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="14.13,19.91 14.13,25.25 24.78,31.4 24.78,26.06 "
id="polygon27"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
<g
id="g1022"
transform="translate(-2)">
<g
id="g831-0">
<polygon
class="cls-4"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon13-1"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon15-9"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6"
transform="translate(10.65,6.15)">
<polygon
class="cls-4"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon13-1-2"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon15-9-1"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-2"
transform="translate(-10.65,6.15)">
<polygon
class="cls-4"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon13-1-0"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,20.95 35.43,14.8 24.78,8.65 14.13,14.8 "
id="polygon15-9-7"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3"
transform="translate(0,12.3)">
<polygon
class="cls-4"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon13-1-2-1"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon15-9-1-1"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-2-2"
transform="translate(-21.3,12.3)">
<polygon
class="cls-4"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon13-1-0-1"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon15-9-7-2"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3-0"
transform="translate(-10.650001,18.45)">
<polygon
class="cls-4"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon13-1-2-1-7"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon15-9-1-1-3"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-2"
transform="translate(21.3,12.3)">
<polygon
class="cls-4"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon13-1-2-6"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="35.43,14.8 24.78,8.65 14.13,14.8 24.78,20.95 "
id="polygon15-9-1-4"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3-5"
transform="translate(10.65,18.45)">
<polygon
class="cls-4"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon13-1-2-1-2"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="24.78,8.65 14.13,14.8 24.78,20.95 35.43,14.8 "
id="polygon15-9-1-1-0"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="g831-0-6-3-0-2"
transform="translate(-2e-7,24.6)">
<polygon
class="cls-4"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon13-1-2-1-7-9"
style="fill:#ffffff" />
<polygon
class="cls-5"
points="14.13,14.8 24.78,20.95 35.43,14.8 24.78,8.65 "
id="polygon15-9-1-1-3-0"
style="fill:none;stroke:#1d1d1b;stroke-width:1.16999996px;stroke-linecap:round;stroke-linejoin:round" />
</g>
</g>
</g>
<circle
class="cls-6"
cx="21.23"
cy="21.23"
r="19.73"
transform="rotate(-10.9,23.018774,2.6192504)"
id="circle33"
style="fill:none;stroke:#ffffff;stroke-width:3px" />
</g>
</g>
</svg>
......@@ -58,13 +58,21 @@
background-image: url(../../../assets/icons/angle-right-on.svg);
}
}
.geo-btn--full-piece {
.geo-btn--double-cut {
background-image: url(../../../assets/icons/angle-center-off.svg);
&.active {
background-image: url(../../../assets/icons/angle-center-on.svg);
}
}
.geo-btn--uncut {
background-image: url(../../../assets/icons/angle-no-cut-off.svg);
&.active {
background-image: url(../../../assets/icons/angle-no-cut-on.svg);
}
}
.geo-btn {
background-repeat: no-repeat;
background-position: center;
......
.map-scale--vertical {
.absolute(initial, initial, 0, 0);
width: 20px;
font-size: 7pt;
background-color: @bodyBgColor;
padding: 0.5em;
padding-bottom: 0;
.map-scale-line {
display: flex;
flex-direction: column;
border: 1px solid #000;
border-right: 0px;
width: 6px;
.quarter {
flex: 1;
width: 33%;
&:first-child {
border-bottom: 1px solid #000;
}
}
.half {
flex: 2;
border-top: 1px solid #000;
width: 66%;
}
}
.map-scale-label {
background: @bodyBgColor;
width: 50px;
padding: 0.5em;
padding-bottom: 0px;
margin-top: 0.5em;
}
}
......@@ -5,6 +5,7 @@
@import './elements/component/buttons.less';
@import './elements/component/toggle.less';
@import './elements/component/locate.less';
@import './elements/component/vertical-scale.less';
@import './elements/component/table.less';
@import './elements/component/minimap.less';
@import './elements/component/feature-view.less';
......
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