update_element

Instructions

Implementation Reference

• src/index.js:367-404 (handler)

  Switch case handler that executes the 'update_element' tool: validates input using Zod schemas, retrieves the existing element, applies updates (handling fontFamily and opacity specially), increments version, stores the updated element, and returns confirmation.

  case 'update_element': {
    const rawParams = ElementSchema.partial().extend({ id: ElementIdSchema.shape.id }).passthrough().parse(args);
    const { id, ...updates } = rawParams;
  
    if (!id) throw new Error('Element ID is required');
  
    const existingElement = elements.get(id);
    if (!existingElement) throw new Error(`Element with ID ${id} not found`);
  
    if (typeof updates.fontFamily === 'string') {
      const fontMap = { "virgil": 1, "helvetica": 2, "cascadia": 3 };
      updates.fontFamily = fontMap[updates.fontFamily.toLowerCase()] ?? existingElement.fontFamily;
    }
  
    if (updates.opacity !== undefined) {
      updates.opacity = Math.max(0, Math.min(100, updates.opacity * 100));
    }
  
    const potentialNewElement = {
      ...existingElement,
      ...updates,
      version: (existingElement.version || 0) + 1,
      versionNonce: Math.floor(Math.random() * 2 ** 31),
      updated: Date.now()
    };
  
    Object.keys(potentialNewElement).forEach(key => {
      if (key === 'createdAt' || key === 'updatedAt') delete potentialNewElement[key];
    });
  
    elements.set(id, potentialNewElement);
    logger.info(`Element ${id} updated.`);
    logger.debug('Stored element data after update:', potentialNewElement);
  
    return {
      content: [{ type: 'text', text: JSON.stringify({ id: potentialNewElement.id, updated: true, version: potentialNewElement.version }, null, 2) }]
    };
  }

• src/index.js:119-144 (schema)

  JSON schema for 'update_element' tool input parameters, registered in the MCP server's capabilities.tools, defining properties like id (required), type, position, styling, etc.

  update_element: {
    description: 'Update an existing Excalidraw element',
    inputSchema: {
      type: 'object',
      properties: {
        id: { type: 'string' },
        type: { 
          type: 'string', 
          enum: Object.values(EXCALIDRAW_ELEMENT_TYPES) 
        },
        x: { type: 'number' },
        y: { type: 'number' },
        width: { type: 'number' },
        height: { type: 'number' },
        backgroundColor: { type: 'string' },
        strokeColor: { type: 'string' },
        strokeWidth: { type: 'number' },
        roughness: { type: 'number' },
        opacity: { type: 'number' },
        text: { type: 'string' },
        fontSize: { type: 'number' },
        fontFamily: { type: 'string' }
      },
      required: ['id']
    }
  },

• src/index.js:30-46 (schema)

  Zod schema for Excalidraw element properties, used in the handler for partial parsing and validation of update parameters.

  const ElementSchema = z.object({
    type: z.enum(Object.values(EXCALIDRAW_ELEMENT_TYPES)),
    x: z.number(),
    y: z.number(),
    width: z.number().optional(),
    height: z.number().optional(),
    points: z.array(z.object({ x: z.number(), y: z.number() })).optional(),
    backgroundColor: z.string().optional(),
    strokeColor: z.string().optional(),
    strokeWidth: z.number().optional(),
    roughness: z.number().optional(),
    opacity: z.number().optional(),
    text: z.string().optional(),
    fontSize: z.number().optional(),
    fontFamily: z.number().optional(),
    locked: z.boolean().optional() // ADDED: Make sure locked status is saved
  });

• src/index.js:684-708 (registration)

  Tool registration in the ListToolsRequestHandler response, duplicating the schema for tool listing.

  name: 'update_element',
  description: 'Update an existing Excalidraw element',
  inputSchema: {
    type: 'object',
    properties: {
      id: { type: 'string' },
      type: { 
        type: 'string', 
        enum: Object.values(EXCALIDRAW_ELEMENT_TYPES) 
      },
      x: { type: 'number' },
      y: { type: 'number' },
      width: { type: 'number' },
      height: { type: 'number' },
      backgroundColor: { type: 'string' },
      strokeColor: { type: 'string' },
      strokeWidth: { type: 'number' },
      roughness: { type: 'number' },
      opacity: { type: 'number' },
      text: { type: 'string' },
      fontSize: { type: 'number' },
      fontFamily: { type: 'string' }
    },
    required: ['id']
  }