|
@@ -33,7 +33,11 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
|
|
|
left: "",
|
|
|
width: "",
|
|
|
height: "",
|
|
|
- transform: "",
|
|
|
+ transform: {
|
|
|
+ rotate: "0deg",
|
|
|
+ translateX: "-50%",
|
|
|
+ translateY: "-50%",
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
init(pageEl: HTMLElement) {
|
|
@@ -45,7 +49,7 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
|
|
|
|
|
|
mousedown(e: MouseEvent, type: keyof typeof transforms, currComp?: any) {
|
|
|
if (!currComp) {
|
|
|
- currComp = this.store.currComp;
|
|
|
+ currComp = this.store.currComp;
|
|
|
}
|
|
|
this.currComp = currComp;
|
|
|
this.compEl = currComp.$el;
|
|
@@ -101,10 +105,23 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
|
|
|
initStyle() {
|
|
|
const rect = this.compEl.getBoundingClientRect();
|
|
|
const pageRect = this.pageEl.getBoundingClientRect();
|
|
|
- this.transferStyle.width = rect.width + "px";
|
|
|
- this.transferStyle.height = rect.height + "px";
|
|
|
- this.transferStyle.top = rect.top - pageRect.top + "px";
|
|
|
- this.transferStyle.left = rect.left - pageRect.left + "px";
|
|
|
+
|
|
|
+ const transform = getTransform(this.compEl);
|
|
|
+
|
|
|
+ this.transferStyle.width = this.compEl.clientWidth + "px";
|
|
|
+ this.transferStyle.height = this.compEl.clientHeight + "px";
|
|
|
+ this.transferStyle.top = rect.top + rect.height / 2 - pageRect.top + "px";
|
|
|
+ this.transferStyle.left = rect.left + rect.width / 2 - pageRect.left + "px";
|
|
|
+ if (!this.transferStyle.transform) {
|
|
|
+ this.transferStyle.transform = {
|
|
|
+ rotate: "0deg",
|
|
|
+ translateX: "-50%",
|
|
|
+ translateY: "-50%",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.transferStyle.transform.rotate = transform.rotate;
|
|
|
+ this.transferStyle.transform.translateY =
|
|
|
+ "-" + this.compEl.clientHeight / 2 + "px";
|
|
|
}
|
|
|
|
|
|
resetStyle() {
|
|
@@ -118,3 +135,35 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
|
|
|
this.resetStyle();
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+export function getTransform(el: HTMLElement) {
|
|
|
+ const st = getComputedStyle(el, null);
|
|
|
+ const tr =
|
|
|
+ st.getPropertyValue("-webkit-transform") ||
|
|
|
+ st.getPropertyValue("-moz-transform") ||
|
|
|
+ st.getPropertyValue("-ms-transform") ||
|
|
|
+ st.getPropertyValue("-o-transform") ||
|
|
|
+ st.getPropertyValue("transform") ||
|
|
|
+ "FAIL";
|
|
|
+
|
|
|
+ // console.error("Matrix: " + tr);
|
|
|
+
|
|
|
+ if (tr == "none")
|
|
|
+ return {
|
|
|
+ rotate: "0deg",
|
|
|
+ };
|
|
|
+
|
|
|
+ // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
|
|
|
+
|
|
|
+ const values = tr.split("(")[1].split(")")[0].split(",");
|
|
|
+ // console.error("values: ", values);
|
|
|
+ const a: any = values[0];
|
|
|
+ const b: any = values[1];
|
|
|
+ const c: any = values[2];
|
|
|
+ const d: any = values[3];
|
|
|
+
|
|
|
+ const angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
|
|
|
+ return {
|
|
|
+ rotate: `${angle}deg`,
|
|
|
+ };
|
|
|
+}
|