Added glyph zoom (#772)
* Added zooming * Updated zoom center * Updated icon * Update chart_editor.tsx Co-authored-by: Ramil Minyukov (Akvelon INC) <v-rminyukov@microsoft.com>
This commit is contained in:
Ramil Minyukov
GitHub
Родитель
99fc227ba6
Коммит
c5919d0530
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.13333H1H2V0H1.9887H1H0V1V2V2.13333ZM5.9661 0H9.9435V1V2H5.9661V1V0ZM2 42.6667H1.9887H1H0V41.6667V40.6667V40.5333H1H2V42.6667ZM45.7288 0H45.7401H46.7288H47.7288V1V2V2.13333H46.7288H45.7288V0ZM13.9209 1V0H17.8983V1V2H13.9209V1ZM21.8757 1V0H25.8531V1V2H21.8757V1ZM29.8305 1V0H33.8079V1V2H29.8305V1ZM37.7853 1V0H41.7627V1V2H37.7853V1ZM46.7288 6.4H47.7288V10.6667H46.7288H45.7288V6.4H46.7288ZM46.7288 14.9333H47.7288V19.2H46.7288H45.7288V14.9333H46.7288ZM17.8983 41.6667V42.6667H13.9209V41.6667V40.6667H17.8983V41.6667ZM9.9435 41.6667V42.6667H5.9661V41.6667V40.6667H9.9435V41.6667ZM1 36.2667H0V32H1H2V36.2667H1ZM1 27.7333H0V23.4667H1H2V27.7333H1ZM1 19.2H0V14.9333H1H2V19.2H1ZM1 10.6667H0V6.4H1H2V10.6667H1Z" fill="black"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M63.5774 61.49C63.8591 61.7816 64 62.127 64 62.5263C64 62.9256 63.8591 63.271 63.5774 63.5626C63.2957 63.8542 62.962 64 62.5763 64C62.1905 64 61.8568 63.8542 61.5751 63.5626L44.1123 45.5099C42.6886 46.7226 41.1239 47.6513 39.4184 48.2961C37.7278 48.9408 35.9555 49.2632 34.1017 49.2632C32.6631 49.2632 31.2765 49.0713 29.9417 48.6875C28.607 48.3037 27.3612 47.7588 26.2044 47.0526C25.0477 46.3465 23.9873 45.5022 23.0233 44.5197C22.0742 43.5219 21.2585 42.4244 20.5763 41.227C19.8941 40.0296 19.3676 38.7401 18.9968 37.3585C18.6261 35.977 18.4407 34.5417 18.4407 33.0526C18.4407 31.5636 18.6261 30.1283 18.9968 28.7467C19.3676 27.3651 19.8941 26.0757 20.5763 24.8783C21.2585 23.6809 22.0742 22.591 23.0233 21.6085C23.9873 20.6107 25.0477 19.7588 26.2044 19.0526C27.3612 18.3465 28.607 17.8015 29.9417 17.4178C31.2765 17.034 32.6631 16.8421 34.1017 16.8421C35.5403 16.8421 36.9269 17.034 38.2616 17.4178C39.5964 17.8015 40.8422 18.3465 41.9989 19.0526C43.1557 19.7588 44.2087 20.6107 45.1578 21.6085C46.1218 22.591 46.9449 23.6809 47.6271 24.8783C48.3093 26.0757 48.8358 27.3651 49.2066 28.7467C49.5773 30.1283 49.7627 31.5636 49.7627 33.0526C49.7627 34.9715 49.4513 36.8136 48.8284 38.5789C48.2055 40.3289 47.3083 41.9408 46.1366 43.4145L63.5774 61.49ZM34.1017 46.3158C35.8665 46.3158 37.5275 45.9704 39.0847 45.2796C40.642 44.5735 41.9989 43.6217 43.1557 42.4244C44.3125 41.227 45.2246 39.8224 45.892 38.2105C46.5742 36.5987 46.9153 34.8794 46.9153 33.0526C46.9153 31.2259 46.5742 29.5066 45.892 27.8947C45.2246 26.2829 44.3125 24.8783 43.1557 23.6809C41.9989 22.4836 40.642 21.5395 39.0847 20.8487C37.5275 20.1425 35.8665 19.7895 34.1017 19.7895C32.3369 19.7895 30.6759 20.1425 29.1186 20.8487C27.5614 21.5395 26.2044 22.4836 25.0477 23.6809C23.8909 24.8783 22.9714 26.2829 22.2892 27.8947C21.6218 29.5066 21.2881 31.2259 21.2881 33.0526C21.2881 34.8794 21.6218 36.5987 22.2892 38.2105C22.9714 39.8224 23.8909 41.227 25.0477 42.4244C26.2044 43.6217 27.5614 44.5735 29.1186 45.2796C30.6759 45.9704 32.3369 46.3158 34.1017 46.3158ZM35.5254 31.5789H41.2203V34.5263H35.5254V40.421H32.678V34.5263H26.9831V31.5789H32.678V25.6842H35.5254V31.5789Z" fill="#252423"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="45.5593" height="47.1579" fill="white" transform="translate(18.4407 16.8421)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 3.1 KiB |
|
|
@ -231,6 +231,7 @@ addSVGIcon("Line", require("resources/icons/icons_element-line.svg"));
|
|||
addSVGIcon("FontColorA", require("resources/icons/icons_element-text.svg"));
|
||||
addSVGIcon("TextField", require("resources/icons/icons_element-textbox.svg"));
|
||||
addSVGIcon("mark/data-axis", require("resources/icons/icons_data-axis.svg"));
|
||||
addSVGIcon("rect-zoom", require("resources/icons/rect-zoom.svg"));
|
||||
|
||||
addSVGIcon(
|
||||
"BarChartVerticalFilter",
|
||||
|
|
|
|||
|
|
@ -565,6 +565,19 @@ export class ChartEditorView
|
|||
};
|
||||
}
|
||||
break;
|
||||
case "rectangle-zoom":
|
||||
{
|
||||
mode = "rectangle";
|
||||
onCreate = (x1, y1, x2, y2) => {
|
||||
console.log(x1, y1, x2, y2);
|
||||
const width = Math.abs(x2[0] - x1[0]);
|
||||
const height = Math.abs(y2[0] - y1[0]);
|
||||
const centerX = Math.min(x2[0], x1[0]) + width / 2;
|
||||
const centerY = Math.min(y2[0], y1[0]) + height / 2;
|
||||
this.doCustomZoom(centerX, centerY, width, height);
|
||||
};
|
||||
}
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<CreatingComponent
|
||||
|
|
@ -596,6 +609,27 @@ export class ChartEditorView
|
|||
}
|
||||
}
|
||||
|
||||
public doCustomZoom(cx: number, cy: number, width: number, height: number) {
|
||||
const width_main = this.state.viewWidth;
|
||||
const height_main = this.state.viewHeight;
|
||||
|
||||
const newCX = width_main / 2 - cx;
|
||||
const newCY = height_main / 2 + cy;
|
||||
|
||||
const newScale =
|
||||
width_main > height_main ? height_main / height : width_main / width;
|
||||
|
||||
this.setState({
|
||||
zoom: {
|
||||
centerX: newCX,
|
||||
centerY: newCY,
|
||||
scale: 1,
|
||||
},
|
||||
});
|
||||
|
||||
this.doZoom(newScale);
|
||||
}
|
||||
|
||||
public renderBoundsGuides() {
|
||||
// let chartClass = this.props.store.chartManager.getChartClass(this.props.store.chartState);
|
||||
// let boundsGuides = chartClass.getSnappingGuides();
|
||||
|
|
@ -1363,6 +1397,23 @@ export class ChartEditorView
|
|||
);
|
||||
}
|
||||
|
||||
public doZoom(factor: number) {
|
||||
const { scale, centerX, centerY } = this.state.zoom;
|
||||
const fixPoint = Geometry.unapplyZoom(this.state.zoom, {
|
||||
x: this.state.viewWidth / 2,
|
||||
y: this.state.viewHeight / 2,
|
||||
});
|
||||
let newScale = scale * factor;
|
||||
newScale = Math.min(20, Math.max(0.05, newScale));
|
||||
this.setState({
|
||||
zoom: {
|
||||
centerX: centerX + (scale - newScale) * fixPoint.x,
|
||||
centerY: centerY + (scale - newScale) * fixPoint.y,
|
||||
scale: newScale,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
public render() {
|
||||
const width = this.state.viewWidth;
|
||||
|
|
@ -1406,39 +1457,13 @@ export class ChartEditorView
|
|||
<Button
|
||||
icon="ZoomIn"
|
||||
onClick={() => {
|
||||
const { scale, centerX, centerY } = this.state.zoom;
|
||||
const fixPoint = Geometry.unapplyZoom(this.state.zoom, {
|
||||
x: this.state.viewWidth / 2,
|
||||
y: this.state.viewHeight / 2,
|
||||
});
|
||||
let newScale = scale * 1.1;
|
||||
newScale = Math.min(20, Math.max(0.05, newScale));
|
||||
this.setState({
|
||||
zoom: {
|
||||
centerX: centerX + (scale - newScale) * fixPoint.x,
|
||||
centerY: centerY + (scale - newScale) * fixPoint.y,
|
||||
scale: newScale,
|
||||
},
|
||||
});
|
||||
this.doZoom(1.1);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon="ZoomOut"
|
||||
onClick={() => {
|
||||
const { scale, centerX, centerY } = this.state.zoom;
|
||||
const fixPoint = Geometry.unapplyZoom(this.state.zoom, {
|
||||
x: this.state.viewWidth / 2,
|
||||
y: this.state.viewHeight / 2,
|
||||
});
|
||||
let newScale = scale / 1.1;
|
||||
newScale = Math.min(20, Math.max(0.05, newScale));
|
||||
this.setState({
|
||||
zoom: {
|
||||
centerX: centerX + (scale - newScale) * fixPoint.x,
|
||||
centerY: centerY + (scale - newScale) * fixPoint.y,
|
||||
scale: newScale,
|
||||
},
|
||||
});
|
||||
this.doZoom(1 / 1.1);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
|
|
@ -1456,6 +1481,15 @@ export class ChartEditorView
|
|||
});
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon="rect-zoom"
|
||||
title={"Rectangle zoom"}
|
||||
onClick={() => {
|
||||
new Actions.SetCurrentTool("rectangle-zoom").dispatch(
|
||||
this.props.store.dispatcher
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.isSolving ? (
|
||||
|
|
|
|||
|
|
@ -238,6 +238,13 @@ export class MarkEditorView extends ContextedComponent<
|
|||
this.refSingleMarkView.doZoomAuto();
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon="rect-zoom"
|
||||
title={"Rectangle zoom"}
|
||||
onClick={() => {
|
||||
this.dispatch(new Actions.SetCurrentTool("rectangle-zoom"));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -313,6 +320,24 @@ export class SingleMarkView
|
|||
});
|
||||
}
|
||||
|
||||
public doCustomZoom(cx: number, cy: number, width: number, height: number) {
|
||||
const newCX = this.props.width / 2 - cx;
|
||||
const newCY = this.props.height / 2 + cy;
|
||||
const newScale =
|
||||
this.props.width > this.props.height
|
||||
? this.props.height / height
|
||||
: this.props.width / width;
|
||||
|
||||
this.setState({
|
||||
zoom: {
|
||||
centerX: newCX,
|
||||
centerY: newCY,
|
||||
scale: 1,
|
||||
},
|
||||
});
|
||||
this.doZoom(newScale);
|
||||
}
|
||||
|
||||
public doZoomAuto() {
|
||||
const newZoom = this.getFitViewZoom(this.props.width, this.props.height);
|
||||
if (!newZoom) {
|
||||
|
|
@ -1558,6 +1583,18 @@ export class SingleMarkView
|
|||
// };
|
||||
// }
|
||||
// break;
|
||||
case "rectangle-zoom":
|
||||
{
|
||||
mode = "rectangle";
|
||||
onCreate = (x1, y1, x2, y2) => {
|
||||
const width = Math.abs(x2[0] - x1[0]);
|
||||
const height = Math.abs(y2[0] - y1[0]);
|
||||
const centerX = Math.min(x2[0], x1[0]) + width / 2;
|
||||
const centerY = Math.min(y2[0], y1[0]) + height / 2;
|
||||
this.doCustomZoom(centerX, centerY, width, height);
|
||||
};
|
||||
}
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<CreatingComponent
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче