mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-27 10:55:56 +01:00
saving UI state
This commit is contained in:
Val Erastov (xibyte)
parent
b819960284
commit
68dbb898db
7 changed files with 79 additions and 29 deletions
|
|
@ -11,14 +11,15 @@ import ReactDOM from "react-dom";
|
|||
import {SketcherApp} from "./sketcher/components/SketcherApp";
|
||||
import React from "react";
|
||||
import {stream} from "lstream";
|
||||
import {loadUIState, saveUIState} from "./sketcher/uiState";
|
||||
|
||||
function initializeSketcherApplication() {
|
||||
var app = new App2D();
|
||||
window.__CAD_APP = app;
|
||||
var sketchId = app.getSketchId();
|
||||
if (sketchId == App2D.STORAGE_PREFIX + '__sample2D__') {
|
||||
var sample = '{"layers":[{"name":"_dim","style":{"lineWidth":1,"strokeStyle":"#bcffc1","fillStyle":"#00FF00"},"data":[{"id":0,"_class":"TCAD.TWO.DiameterDimension","obj":90},{"id":1,"_class":"TCAD.TWO.DiameterDimension","obj":95},{"id":2,"_class":"TCAD.TWO.DiameterDimension","obj":42},{"id":3,"_class":"TCAD.TWO.Dimension","a":5,"b":8,"flip":false},{"id":4,"_class":"TCAD.TWO.DiameterDimension","obj":105}]},{"name":"sketch","style":{"lineWidth":2,"strokeStyle":"#ffffff","fillStyle":"#000000"},"data":[{"id":11,"_class":"TCAD.TWO.Segment","points":[[5,[6,110.1295615870824],[7,313.66509156975803]],[8,[9,419.44198895058975],[10,516.7065215258621]]]},{"id":18,"_class":"TCAD.TWO.Segment","points":[[12,[13,489.1218947877601],[14,477.98601743930897]],[15,[16,481.90945628911174],[17,182.9391540301952]]]},{"id":25,"_class":"TCAD.TWO.Segment","points":[[19,[20,427.6872468325118],[21,163.96220645927505]],[22,[23,349.9023145352797],[24,256.7344291384989]]]},{"id":32,"_class":"TCAD.TWO.Segment","points":[[26,[27,306.81261277555075],[28,273.1404656521002]],[29,[30,135.09050734792822],[31,247.98348666778958]]]},{"id":42,"_class":"TCAD.TWO.Arc","points":[[33,[34,489.1218947877601],[35,477.98601743930897]],[36,[37,419.44198895058975],[38,516.7065215258621]],[39,[40,444.1353623657045],[41,479.08688157090376]]]},{"id":53,"_class":"TCAD.TWO.Arc","points":[[44,[45,427.6872468325118],[46,163.96220645927505]],[47,[48,481.90945628911174],[49,182.9391540301952]],[50,[51,451.2148840882273],[52,183.68960424767275]]]},{"id":64,"_class":"TCAD.TWO.Arc","points":[[55,[56,349.9023145352797],[57,256.7344291384989]],[58,[59,306.81261277555075],[60,273.1404656521002]],[61,[62,313.6665992835383],[63,226.35256652594512]]]},{"id":75,"_class":"TCAD.TWO.Arc","points":[[66,[67,110.1295615870824],[68,313.66509156975803]],[69,[70,135.09050734792822],[71,247.98348666778958]],[72,[73,129.8749213918784],[74,283.58516027516237]]]},{"id":80,"_class":"TCAD.TWO.Circle","c":[77,[78,444.1353623657045],[79,479.08688157090376]],"r":17},{"id":85,"_class":"TCAD.TWO.Circle","c":[82,[83,451.2148840882273],[84,183.68960424767275]],"r":17},{"id":90,"_class":"TCAD.TWO.Circle","c":[87,[88,129.8749213918784],[89,283.58516027516237]],"r":17},{"id":95,"_class":"TCAD.TWO.Circle","c":[92,[93,364.7627927122075],[94,358.27520724354514]],"r":50},{"id":100,"_class":"TCAD.TWO.Circle","c":[97,[98,450.6425914465028],[99,356.1758703461729]],"r":13},{"id":105,"_class":"TCAD.TWO.Circle","c":[102,[103,281.1241663120215],[104,360.3197585470608]],"r":13}]},{"name":"_construction_","style":{"lineWidth":1,"strokeStyle":"#aaaaaa","fillStyle":"#000000"},"data":[{"id":113,"_class":"TCAD.TWO.Segment","points":[[107,[108,366.96497096679207],[109,448.36204633886825]],[110,[111,362.6842565514955],[112,273.2463262825022]]]},{"id":120,"_class":"TCAD.TWO.Segment","points":[[114,[115,254.60331148100178],[116,360.9680624545806]],[117,[118,474.9222739434132],[119,355.5823520325097]]]}]}],"constraints":[["Tangent",[42,18]],["Tangent",[42,11]],["coi",[33,12]],["coi",[36,8]],["Tangent",[53,25]],["Tangent",[53,18]],["coi",[44,19]],["coi",[47,15]],["Tangent",[64,25]],["Tangent",[64,32]],["coi",[55,22]],["coi",[58,26]],["Tangent",[75,11]],["Tangent",[75,32]],["coi",[66,5]],["coi",[69,29]],["coi",[77,39]],["coi",[82,50]],["coi",[87,72]],["RR",[80,85]],["RR",[85,90]],["parallel",[113,18]],["perpendicular",[120,113]],["Symmetry",[92,120]],["PointOnLine",[92,113]],["PointOnLine",[102,120]],["PointOnLine",[97,120]],["RR",[105,100]]]}';
|
||||
localStorage.setItem(sketchId, sample);
|
||||
if (sketchId === App2D.STORAGE_PREFIX + '__sample2D__') {
|
||||
// var sample = '{"layers":[{"name":"_dim","style":{"lineWidth":1,"strokeStyle":"#bcffc1","fillStyle":"#00FF00"},"data":[{"id":0,"_class":"TCAD.TWO.DiameterDimension","obj":90},{"id":1,"_class":"TCAD.TWO.DiameterDimension","obj":95},{"id":2,"_class":"TCAD.TWO.DiameterDimension","obj":42},{"id":3,"_class":"TCAD.TWO.Dimension","a":5,"b":8,"flip":false},{"id":4,"_class":"TCAD.TWO.DiameterDimension","obj":105}]},{"name":"sketch","style":{"lineWidth":2,"strokeStyle":"#ffffff","fillStyle":"#000000"},"data":[{"id":11,"_class":"TCAD.TWO.Segment","points":[[5,[6,110.1295615870824],[7,313.66509156975803]],[8,[9,419.44198895058975],[10,516.7065215258621]]]},{"id":18,"_class":"TCAD.TWO.Segment","points":[[12,[13,489.1218947877601],[14,477.98601743930897]],[15,[16,481.90945628911174],[17,182.9391540301952]]]},{"id":25,"_class":"TCAD.TWO.Segment","points":[[19,[20,427.6872468325118],[21,163.96220645927505]],[22,[23,349.9023145352797],[24,256.7344291384989]]]},{"id":32,"_class":"TCAD.TWO.Segment","points":[[26,[27,306.81261277555075],[28,273.1404656521002]],[29,[30,135.09050734792822],[31,247.98348666778958]]]},{"id":42,"_class":"TCAD.TWO.Arc","points":[[33,[34,489.1218947877601],[35,477.98601743930897]],[36,[37,419.44198895058975],[38,516.7065215258621]],[39,[40,444.1353623657045],[41,479.08688157090376]]]},{"id":53,"_class":"TCAD.TWO.Arc","points":[[44,[45,427.6872468325118],[46,163.96220645927505]],[47,[48,481.90945628911174],[49,182.9391540301952]],[50,[51,451.2148840882273],[52,183.68960424767275]]]},{"id":64,"_class":"TCAD.TWO.Arc","points":[[55,[56,349.9023145352797],[57,256.7344291384989]],[58,[59,306.81261277555075],[60,273.1404656521002]],[61,[62,313.6665992835383],[63,226.35256652594512]]]},{"id":75,"_class":"TCAD.TWO.Arc","points":[[66,[67,110.1295615870824],[68,313.66509156975803]],[69,[70,135.09050734792822],[71,247.98348666778958]],[72,[73,129.8749213918784],[74,283.58516027516237]]]},{"id":80,"_class":"TCAD.TWO.Circle","c":[77,[78,444.1353623657045],[79,479.08688157090376]],"r":17},{"id":85,"_class":"TCAD.TWO.Circle","c":[82,[83,451.2148840882273],[84,183.68960424767275]],"r":17},{"id":90,"_class":"TCAD.TWO.Circle","c":[87,[88,129.8749213918784],[89,283.58516027516237]],"r":17},{"id":95,"_class":"TCAD.TWO.Circle","c":[92,[93,364.7627927122075],[94,358.27520724354514]],"r":50},{"id":100,"_class":"TCAD.TWO.Circle","c":[97,[98,450.6425914465028],[99,356.1758703461729]],"r":13},{"id":105,"_class":"TCAD.TWO.Circle","c":[102,[103,281.1241663120215],[104,360.3197585470608]],"r":13}]},{"name":"_construction_","style":{"lineWidth":1,"strokeStyle":"#aaaaaa","fillStyle":"#000000"},"data":[{"id":113,"_class":"TCAD.TWO.Segment","points":[[107,[108,366.96497096679207],[109,448.36204633886825]],[110,[111,362.6842565514955],[112,273.2463262825022]]]},{"id":120,"_class":"TCAD.TWO.Segment","points":[[114,[115,254.60331148100178],[116,360.9680624545806]],[117,[118,474.9222739434132],[119,355.5823520325097]]]}]}],"constraints":[["Tangent",[42,18]],["Tangent",[42,11]],["coi",[33,12]],["coi",[36,8]],["Tangent",[53,25]],["Tangent",[53,18]],["coi",[44,19]],["coi",[47,15]],["Tangent",[64,25]],["Tangent",[64,32]],["coi",[55,22]],["coi",[58,26]],["Tangent",[75,11]],["Tangent",[75,32]],["coi",[66,5]],["coi",[69,29]],["coi",[77,39]],["coi",[82,50]],["coi",[87,72]],["RR",[80,85]],["RR",[85,90]],["parallel",[113,18]],["perpendicular",[120,113]],["Symmetry",[92,120]],["PointOnLine",[92,113]],["PointOnLine",[102,120]],["PointOnLine",[97,120]],["RR",[105,100]]]}';
|
||||
// localStorage.setItem(sketchId, sample);
|
||||
}
|
||||
app.loadFromLocalStorage();
|
||||
app.fit();
|
||||
|
|
@ -34,22 +35,6 @@ function initializeSketcherApplication() {
|
|||
$('.act-' + act.id).click(act.action).attr('title', act.desc);
|
||||
}
|
||||
|
||||
function infoStr(c) {
|
||||
if (c.SettableFields === undefined) return "";
|
||||
var info = Object.keys(c.SettableFields).map(function(f) {
|
||||
var val = c[f];
|
||||
var num = Number(val);
|
||||
if (isNaN(num)) {
|
||||
num = Number(app.viewer.parametricManager.constantResolver(val));
|
||||
return val + "(" + (isNaN(num) ? "?" : num.toFixed(2)) + ")" ;
|
||||
}
|
||||
return num.toFixed(2);
|
||||
}).join(", ");
|
||||
if (info.length != 0) {
|
||||
info = " <span style='font-size: 8px;'>[" + info + "]</span>";
|
||||
}
|
||||
return info;
|
||||
}
|
||||
|
||||
const constraintsView = app.dock.views['Constraints'];
|
||||
|
||||
|
|
@ -136,9 +121,10 @@ function initializeSketcherApplication() {
|
|||
app.viewer.bus.subscribe('dimScale', function(value) {
|
||||
dimScale.input.val(value);
|
||||
});
|
||||
var constantTextArea = $('<textarea />', {placeholder : 'for example: A = 50', css: {
|
||||
var constantTextArea = $('<textarea />', {id: 'dimTextArea', placeholder : 'for example: A = 50', css: {
|
||||
width: '100%',
|
||||
resize: 'vertical',
|
||||
height: 100,
|
||||
background: 'inherit',
|
||||
border : 'none',
|
||||
color: '#C4E1A4'
|
||||
|
|
@ -152,6 +138,13 @@ function initializeSketcherApplication() {
|
|||
|
||||
app.dock.views['Dimensions'].node.append(constantTextArea);
|
||||
|
||||
loadUIState(app.dock);
|
||||
app.dock.show('Constraints');
|
||||
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveUIState(app.dock);
|
||||
});
|
||||
|
||||
startReact(app.context);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export function StageControl() {
|
|||
|
||||
|
||||
return <div className={ls.root}>
|
||||
{stages.list.map((stage, i) => <div><button onClick={() => setStage(i)}>{i}.</button></div>)}
|
||||
{stages.list.map((stage, i) => <div key={stage.index}><button onClick={() => setStage(i)}>{i}.</button></div>)}
|
||||
<div><button onClick={createStage}>+</button></div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {eqEps} from "../../brep/geom/tolerance";
|
|||
import {Polynomial, POW_1_FN} from "./polynomial";
|
||||
import {compositeFn} from "gems/func";
|
||||
|
||||
const DEBUG = true;
|
||||
const DEBUG = false;
|
||||
|
||||
export class AlgNumSubSystem {
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import {NurbsObject} from './shapes/nurbsObject';
|
|||
import {System} from './system';
|
||||
import {AlgNumConstraint} from "./constr/ANConstraints";
|
||||
import {SketchGenerator} from "./generators/sketchGenerator";
|
||||
import {getUIState} from "./uiState";
|
||||
|
||||
const Types = {
|
||||
POINT : 'TCAD.TWO.EndPoint',
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class ToolManager {
|
|||
}, false);
|
||||
canvas.addEventListener('mouseup', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// e.stopPropagation(); // allow propagation for move in sake of dynamic layout
|
||||
this.tool.mouseup(e);
|
||||
}, false);
|
||||
window.addEventListener('touchstart', (e) => {
|
||||
|
|
|
|||
42
web/app/sketcher/uiState.js
Normal file
42
web/app/sketcher/uiState.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
export function saveUIState(dock) {
|
||||
const state = {
|
||||
};
|
||||
|
||||
state.dockWidth = dock.dockEl.width();
|
||||
state.views = dock.getState();
|
||||
|
||||
const dimTextArea = document.getElementById('dimTextArea');
|
||||
if (dimTextArea) {
|
||||
state.dimTextAreaHeight = dimTextArea.offsetHeight;
|
||||
}
|
||||
|
||||
localStorage.setItem('UI', JSON.stringify(state));
|
||||
}
|
||||
|
||||
export function loadUIState(dock) {
|
||||
const stateStr = localStorage.getItem('UI');
|
||||
if (!stateStr) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
|
||||
const state = JSON.parse(stateStr);
|
||||
|
||||
if (state.dockWidth) {
|
||||
dock.dockEl.width(state.dockWidth);
|
||||
}
|
||||
|
||||
const dimTextArea = document.getElementById('dimTextArea');
|
||||
if (state.dimTextAreaHeight && dimTextArea) {
|
||||
dimTextArea.style.height = state.dimTextAreaHeight + 'px';
|
||||
}
|
||||
|
||||
if (state.views) {
|
||||
dock.setState(state.views);
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
|
@ -91,15 +91,15 @@ Window.prototype.tileUpPolicy = function(firstTime, relativeEl) {
|
|||
function WinManager() {
|
||||
this.moveHandler = null;
|
||||
var wm = this;
|
||||
$('body').mousemove(function(e) {
|
||||
document.body.addEventListener("mousemove", function( e ) {
|
||||
if (wm.moveHandler != null) {
|
||||
wm.moveHandler(e);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
$('body').mouseup(function(e) {
|
||||
}, false);
|
||||
document.body.addEventListener("mouseup", function( e ) {
|
||||
wm.moveHandler = null;
|
||||
});
|
||||
}, false);
|
||||
}
|
||||
|
||||
WinManager.prototype.captureDrag = function(el, e) {
|
||||
|
|
@ -115,7 +115,7 @@ WinManager.prototype.captureDrag = function(el, e) {
|
|||
WinManager.prototype.captureResize = function(el, dirMask, e, onResize) {
|
||||
|
||||
var origin = {x : e.pageX, y : e.pageY};
|
||||
var originSize = {x : el.width(), y : el.height()};
|
||||
var originSize = {x : el.outerWidth(), y : el.height()};
|
||||
var originLocation = el.offset();
|
||||
var north = _maskTest(dirMask, DIRECTIONS.NORTH);
|
||||
var south = _maskTest(dirMask, DIRECTIONS.SOUTH);
|
||||
|
|
@ -233,7 +233,7 @@ WinManager.prototype.registerResize = function(el, dirMask, onResize) {
|
|||
} else if (west && onWestEdge(e, $this)) {
|
||||
el.css('cursor', 'ew-resize');
|
||||
} else {
|
||||
el.css('cursor', 'inherited');
|
||||
el.css('cursor', "");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -383,6 +383,20 @@ Dock.prototype.isVisible = function(viewName) {
|
|||
return this.views[viewName].switchBtn.hasClass('selected');
|
||||
};
|
||||
|
||||
Dock.prototype.setState = function(state) {
|
||||
state.forEach(viewName => this.show(viewName));
|
||||
};
|
||||
|
||||
Dock.prototype.getState = function() {
|
||||
const state = [];
|
||||
Object.keys(this.views).forEach(viewName => {
|
||||
if (this.isVisible(viewName)) {
|
||||
state.push(viewName);
|
||||
}
|
||||
});
|
||||
return state;
|
||||
};
|
||||
|
||||
function _maskTest(mask, value) {
|
||||
return (mask & value) === value;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue