@pie-element/graphing 0.1.0

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keysIn.js

@@ -0,0 +1,9 @@
+import e from "./isArrayLike.js";
+import t from "./_arrayLikeKeys.js";
+import n from "./_baseKeysIn.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keysIn.js
+function r(r) {
+	return e(r) ? t(r, !0) : n(r);
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/last.js

@@ -0,0 +1,7 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/last.js
+function e(e) {
+	var t = e == null ? 0 : e.length;
+	return t ? e[t - 1] : void 0;
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/memoize.js

@@ -0,0 +1,16 @@
+import e from "./_MapCache.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/memoize.js
+var t = "Expected a function";
+function n(r, i) {
+	if (typeof r != "function" || i != null && typeof i != "function") throw TypeError(t);
+	var a = function() {
+		var e = arguments, t = i ? i.apply(this, e) : e[0], n = a.cache;
+		if (n.has(t)) return n.get(t);
+		var o = r.apply(this, e);
+		return a.cache = n.set(t, o) || n, o;
+	};
+	return a.cache = new (n.Cache || e)(), a;
+}
+n.Cache = e;
+//#endregion
+export { n as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/noop.js

@@ -0,0 +1,4 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/noop.js
+function e() {}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/set.js

@@ -0,0 +1,7 @@
+import e from "./_baseSet.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/set.js
+function t(t, n, r) {
+	return t == null ? t : e(t, n, r);
+}
+//#endregion
+export { t as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubArray.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubArray.js
+function e() {
+	return [];
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubFalse.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubFalse.js
+function e() {
+	return !1;
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toString.js

@@ -0,0 +1,7 @@
+import e from "./_baseToString.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toString.js
+function t(t) {
+	return t == null ? "" : e(t);
+}
+//#endregion
+export { t as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/uniq.js

@@ -0,0 +1,7 @@
+import e from "./_baseUniq.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/uniq.js
+function t(t) {
+	return t && t.length ? e(t) : [];
+}
+//#endregion
+export { t as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/uniqWith.js

@@ -0,0 +1,7 @@
+import e from "./_baseUniq.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/uniqWith.js
+function t(t, n) {
+	return n = typeof n == "function" ? n : void 0, t && t.length ? e(t, void 0, n) : [];
+}
+//#endregion
+export { t as default };

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@pie-element/graphing",
+  "version": "0.1.0",
+  "description": "",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/correct-answer-toggle": "0.1.0",
+    "@pie-lib/graphing": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "classnames": "^2.2.5",
+    "debug": "^4.1.1",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-lib/graphing-utils": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "lodash-es": "^4.17.21",
+    "prop-types": "^15.6.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./delivery": {
+      "development": "./src/delivery/index.ts",
+      "types": "./dist/delivery/index.d.ts",
+      "default": "./dist/delivery/index.js"
+    },
+    "./author": {
+      "development": "./src/author/index.ts",
+      "types": "./dist/author/index.d.ts",
+      "default": "./dist/author/index.js"
+    },
+    "./controller": {
+      "development": "./src/controller/index.ts",
+      "types": "./dist/controller/index.d.ts",
+      "default": "./dist/controller/index.js"
+    }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "typescript": "^5.9.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "bun x vite build && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "demo": "bun x vite --mode demo",
+    "test": "bun x vitest run"
+  }
+}

package/src/author/configure.tsx

@@ -0,0 +1,299 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/graphing/configure/src/configure.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+import { intersection } from 'lodash-es';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+import { settings, layout, InputContainer } from '@pie-lib/config-ui';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+
+import GraphingConfig from './graphing-config.js';
+import CorrectResponse from './correct-response.js';
+
+const { Panel, toggle, radio, checkboxes, textField, dropdown } = settings;
+const log = debug('@pie-element:graphing:configure');
+
+const StyledInputContainer: any = styled(InputContainer)(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
+
+const Description: any = styled(Typography)(({ theme }) => ({
+  marginBottom: theme.spacing(2.5),
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+export class Configure extends React.Component {
+  static propTypes = {
+    onModelChanged: PropTypes.func,
+    onConfigurationChanged: PropTypes.func,
+    imageSupport: PropTypes.object,
+    uploadSoundSupport: PropTypes.object,
+    model: PropTypes.object.isRequired,
+    configuration: PropTypes.object.isRequired,
+  };
+
+  componentDidMount() {
+    const { configuration, onModelChanged, model } = this.props;
+    const { availableTools, title, graphDimensions } = configuration || {};
+    let { arrows, titleEnabled: showTitle, dimensionsEnabled: showDimensions } = model || {};
+
+    // This is used for offering support for old models which have the property arrows: boolean
+    // Same thing is set in the controller: packages/graphing/controller/src/index.js - model
+    if (typeof arrows === 'boolean') {
+      if (arrows) {
+        arrows = { left: true, right: true, up: true, down: true };
+      } else {
+        arrows = { left: false, right: false, up: false, down: false };
+      }
+    }
+
+    const toolbarTools = intersection(availableTools || [], model.toolbarTools || []);
+    const titleEnabled = showTitle === undefined || showTitle === null ? title.enabled : showTitle;
+    const dimensionsEnabled =
+      showDimensions === undefined || showDimensions === null ? graphDimensions.enabled : showDimensions;
+
+    onModelChanged && onModelChanged({ ...model, arrows, toolbarTools, titleEnabled, dimensionsEnabled });
+  }
+
+  onRationaleChange: any = (rationale) => {
+    const { onModelChanged, model } = this.props;
+
+    onModelChanged({ ...model, rationale });
+  };
+
+  onPromptChange: any = (prompt) => {
+    const { onModelChanged, model } = this.props;
+
+    onModelChanged({ ...model, prompt });
+  };
+
+  onTeacherInstructionsChange: any = (teacherInstructions) => {
+    const { onModelChanged, model } = this.props;
+
+    onModelChanged({ ...model, teacherInstructions });
+  };
+
+  render() {
+    const { model, configuration, onConfigurationChanged, onModelChanged, imageSupport, uploadSoundSupport } =
+      this.props;
+    const {
+      arrows = {},
+      authoring = {},
+      availableTools = [],
+      baseInputConfiguration = {},
+      coordinatesOnHover = {},
+      contentDimensions = {},
+      gridConfigurations = [],
+      graphDimensions = {},
+      instruction = {},
+      labels = {},
+      padding = {},
+      prompt = {},
+      rationale = {},
+      scoringType = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      title = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      withRubric = {},
+      language = {},
+      languageChoices = {},
+      mathMlOptions = {},
+      removeIncompleteTool = false,
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      labelsEnabled,
+      dimensionsEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      titleEnabled,
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError,
+    } = errors || {};
+
+    log('[render] model', model);
+
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const labelsPlaceholders = {
+      top: labels.top,
+      right: labels.right,
+      bottom: labels.bottom,
+      left: labels.left,
+    };
+
+    const panelItemType = {
+      arrows:
+        arrows.settings &&
+        checkboxes(arrows.label, {
+          left: arrows.left,
+          right: arrows.right,
+          up: arrows.up,
+          down: arrows.down,
+        }),
+      titleEnabled: title.settings && toggle(title.label),
+      padding: padding.settings && toggle(padding.label),
+      labelsEnabled: labels.settings && toggle(labels.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+      dimensionsEnabled: graphDimensions.settings && toggle(graphDimensions.label),
+      coordinatesOnHover: coordinatesOnHover.settings && toggle(coordinatesOnHover.label),
+    };
+
+    const panelProperties = {
+      'authoring.enabled': authoring.settings && toggle(authoring.label, true),
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['dichotomous', 'partial scoring']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+      instruction: instruction.settings && textField(instruction.label),
+    };
+
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props,
+    });
+
+    return (
+      <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
+        dimensions={contentDimensions}
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            configuration={configuration}
+            onChangeModel={onModelChanged}
+            onChangeConfiguration={onConfigurationChanged}
+            groups={{
+              Settings: panelItemType,
+              Properties: panelProperties,
+            }}
+          />
+        }
+      >
+        <Description component="div" variant="body1">
+          {instruction?.label || ''}
+        </Description>
+
+        {teacherInstructionsEnabled && (
+          <StyledInputContainer label={teacherInstructions.label}>
+            <EditableHtml
+              markup={model.teacherInstructions || ''}
+              onChange={this.onTeacherInstructionsChange}
+              imageSupport={imageSupport}
+              error={teacherInstructionsError}
+              nonEmpty={false}
+              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </StyledInputContainer>
+        )}
+
+        {promptEnabled && (
+          <StyledInputContainer label={prompt.label}>
+            <EditableHtml
+              markup={model.prompt}
+              onChange={this.onPromptChange}
+              imageSupport={imageSupport}
+              error={promptError}
+              nonEmpty={false}
+              spellCheck={spellCheckEnabled}
+              pluginProps={getPluginProps(prompt?.inputConfiguration)}
+              disableUnderline
+              maxImageWidth={defaultImageMaxWidth}
+              maxImageHeight={defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {promptError && <ErrorText>{promptError}</ErrorText>}
+          </StyledInputContainer>
+        )}
+
+        <GraphingConfig
+          authoring={authoring}
+          availableTools={availableTools}
+          gridConfigurations={gridConfigurations}
+          graphDimensions={graphDimensions}
+          labelsPlaceholders={labelsPlaceholders}
+          model={model}
+          showLabels={labelsEnabled}
+          dimensionsEnabled={dimensionsEnabled}
+          showTitle={titleEnabled}
+          titlePlaceholder={title.placeholder}
+          onChange={this.props.onModelChanged}
+          mathMlOptions={mathMlOptions}
+          removeIncompleteTool={removeIncompleteTool}
+        />
+
+        <CorrectResponse
+          availableTools={availableTools}
+          errors={errors}
+          model={model}
+          onChange={this.props.onModelChanged}
+          mathMlOptions={mathMlOptions}
+          removeIncompleteTool={removeIncompleteTool}
+        />
+
+        {rationaleEnabled && (
+          <StyledInputContainer label={rationale.label || 'Rationale'}>
+            <EditableHtml
+              markup={model.rationale || ''}
+              onChange={this.onRationaleChange}
+              imageSupport={imageSupport}
+              error={rationaleError}
+              spellCheck={spellCheckEnabled}
+              pluginProps={getPluginProps(rationale?.inputConfiguration)}
+              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {rationaleError && <ErrorText>{rationaleError}</ErrorText>}
+          </StyledInputContainer>
+        )}
+      </layout.ConfigLayout>
+    );
+  }
+}
+
+export default Configure;