react-chemdoodle
Version:
The React Chemdoodle Web Components (`react-chemdoodle`) is a UI library add-on for the [ChemDoodle Web Components](https://web.chemdoodle.com/) (CWC) library. CWC provides 18 unique component canvases from a simple 2D "ViewerCanvas" to 3D "EditorCanvas3D
177 lines (162 loc) • 8.61 kB
JavaScript
var $4lIHT$reactjsxruntime = require("react/jsx-runtime");
var $4lIHT$react = require("react");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "ViewerCanvas", () => $400c7f00b6e459af$export$7755ba36120fb79f);
$parcel$export(module.exports, "SketcherCanvas", () => $031efe9adeb0dcac$export$127dd0ad98963438);
function $400c7f00b6e459af$export$7755ba36120fb79f({ id: id , data: data , style: style , width: width = 100 , height: height = 100 , canvasStyle: canvasStyle , moleculeStyle: moleculeStyle }) {
(0, $4lIHT$react.useEffect)(()=>{
// Setup canvas
const viewerCanvas = new ChemDoodle.ViewerCanvas(id);
viewerCanvas.styles = {
...viewerCanvas.styles,
...canvasStyle
};
// Setup molecule
const molecule = ChemDoodle.readMOL(data.mol);
for(const key in moleculeStyle)molecule[key](moleculeStyle[key]);
// Load molecule in canvas
viewerCanvas.loadMolecule(molecule);
}, [
id,
data,
canvasStyle,
moleculeStyle
]);
return /*#__PURE__*/ (0, $4lIHT$reactjsxruntime.jsx)("canvas", {
id: id,
style: style,
width: width,
height: height
});
}
(function(c, iChemLabs, io, structures, actions, gui, imageDepot, desktop, tools, states, q, document1, undefined) {
gui.ToolbarManager.prototype.write = function() {
let sb = [
'<div id="' + this.sketcher.id + '_toolbar" style="font-size:10px;">'
];
/* NOTE: patch change */ let bg = this.sketcher.id + "_main_group";
if (this.sketcher.oneMolecule) sb.push(this.buttonMove.getSource(bg));
else sb.push(this.lassoSet.getSource(bg));
sb.push(this.buttonClear.getSource());
sb.push(this.buttonErase.getSource(bg));
sb.push(this.buttonCenter.getSource());
if (this.sketcher.useServices) sb.push(this.buttonClean.getSource());
sb.push(this.flipSet.getSource());
sb.push(this.historySet.getSource());
if (!this.sketcher.oneMolecule) sb.push(this.copySet.getSource());
sb.push(this.scaleSet.getSource());
sb.push(this.buttonOpen.getSource());
sb.push(this.buttonSave.getSource());
sb.push(this.buttonTemplate.getSource(bg));
if (this.sketcher.useServices) {
sb.push(this.buttonSearch.getSource());
sb.push(this.buttonCalculate.getSource());
}
if (!this.sketcher.floatDrawTools) {
sb.push("<br>");
if (desktop.TextInput) sb.push(this.buttonTextInput.getSource(bg));
sb.push(this.labelSet.getSource(bg));
if (this.sketcher.includeQuery) sb.push(this.buttonQuery.getSource(bg));
sb.push(this.attributeSet.getSource(bg));
sb.push(this.bondSet.getSource(bg));
sb.push(this.ringSet.getSource(bg));
sb.push(this.buttonChain.getSource(bg));
if (!this.sketcher.oneMolecule) sb.push(this.shapeSet.getSource(bg));
}
sb.push("</div>");
if (this.sketcher.floatDrawTools) {
if (desktop.TextInput) this.drawTools.components.splice(0, 0, this.buttonTextInput);
if (this.sketcher.includeQuery) this.drawTools.components.splice(desktop.TextInput ? 1 : 0, 0, this.buttonQuery);
this.drawTools.components.splice(this.drawTools.components.length - (this.sketcher.oneMolecule ? 1 : 3), 0, this.buttonChain);
if (!this.sketcher.oneMolecule) this.drawTools.components.push(this.buttonVAP);
sb.push(this.drawTools.getSource(bg));
}
if (document1.getElementById(this.sketcher.id)) {
let canvas = q("#" + this.sketcher.id);
canvas.before(sb.join(""));
} else document1.write(sb.join(""));
};
})(ChemDoodle, ChemDoodle.iChemLabs, ChemDoodle.io, ChemDoodle.structures, ChemDoodle.uis.actions, ChemDoodle.uis.gui, ChemDoodle.uis.gui.imageDepot, ChemDoodle.uis.gui.desktop, ChemDoodle.uis.tools, ChemDoodle.uis.states, ChemDoodle.lib.jQuery, document);
(function(c, extensions, featureDetection, uis, structures, d2, tools, q, m, window1, undefined) {
const prototype = c.SketcherCanvas.prototype;
c.SketcherCanvas = function(id, width, height, options) {
// keep checks to undefined here as these are booleans
this.isMobile = options.isMobile === undefined ? featureDetection.supports_touch() : options.isMobile;
this.useServices = options.useServices === undefined ? false : options.useServices;
this.oneMolecule = options.oneMolecule === undefined ? false : options.oneMolecule;
this.requireStartingAtom = options.requireStartingAtom === undefined ? true : options.requireStartingAtom;
this.includeToolbar = options.includeToolbar === undefined ? true : options.includeToolbar;
this.floatDrawTools = options.floatDrawTools === undefined ? false : options.floatDrawTools;
this.resizable = options.resizable === undefined ? false : options.resizable;
this.includeQuery = options.includeQuery === undefined ? false : options.includeQuery;
// save the original options object
this.originalOptions = options;
// toolbar manager needs the sketcher id to make it unique to this
// canvas
this.id = id;
this.toolbarManager = new uis.gui.ToolbarManager(this);
const hasToolbar = !!document.getElementById(this.id + "_toolbar");
/* NOTE: patch change */ if (this.includeToolbar && !hasToolbar) {
this.toolbarManager.write();
// If pre-created, wait until the last button image loads before
// calling setup.
let self = this;
if (document.getElementById(this.id)) q("#" + id + "_button_chain_icon").load(function() {
self.toolbarManager.setup();
});
else q(window1).load(function() {
self.toolbarManager.setup();
});
this.dialogManager = new uis.gui.DialogManager(this);
}
if (uis.gui.desktop.TextInput) this.textInput = new uis.gui.desktop.TextInput(this, this.id + "_textInput");
if (id) this.create(id, width, height);
// cursor manager must be initialized before state manager
// cursor manager must be initialized after sketcher element is created to set the default cursor
this.cursorManager = new uis.gui.desktop.CursorManager(this);
this.stateManager = new uis.states.StateManager(this);
this.historyManager = new uis.actions.HistoryManager(this);
this.copyPasteManager = new uis.CopyPasteManager(this);
// styles is now created and available
this.styles.atoms_circleDiameter_2D = 7;
this.styles.atoms_circleBorderWidth_2D = 0;
this.isHelp = false;
this.lastPinchScale = 1;
this.lastGestureRotate = 0;
this.inGesture = false;
if (this.oneMolecule) {
let startMol = new structures.Molecule();
startMol.atoms.push(new structures.Atom());
this.loadMolecule(startMol);
} else {
this.startAtom = new structures.Atom("C", -10, -10);
this.startAtom.isLone = true;
this.lasso = new tools.Lasso(this);
}
if (this.resizable) {
let jqsk = q("#" + this.id);
let self1 = this;
jqsk.resizable({
resize: function(event, ui) {
self1.resize(jqsk.innerWidth(), jqsk.innerHeight());
}
});
}
};
c.SketcherCanvas.prototype = prototype;
})(ChemDoodle, ChemDoodle.extensions, ChemDoodle.featureDetection, ChemDoodle.uis, ChemDoodle.structures, ChemDoodle.structures.d2, ChemDoodle.uis.tools, ChemDoodle.lib.jQuery, Math, window);
const $031efe9adeb0dcac$export$127dd0ad98963438 = /*#__PURE__*/ (0, $4lIHT$react.memo)(({ id: id , width: width = 100 , height: height = 100 , canvasOptions: canvasOptions })=>{
const sketcherInstance = (0, $4lIHT$react.useRef)(null);
(0, $4lIHT$react.useEffect)(()=>{
sketcherInstance.current = new ChemDoodle.SketcherCanvas(id, undefined, undefined, canvasOptions);
sketcherInstance.current.toolbarManager.setup();
}, []);
return /*#__PURE__*/ (0, $4lIHT$reactjsxruntime.jsx)("canvas", {
id: id,
width: width,
height: height
});
});
//# sourceMappingURL=index.js.map